Linear gauge in Vue showing extra space
Hello, I have customized my linear gauge with ranges as on my code below. My problem is it is rendering with linear gauge aligned on center, not fitted on the parent element it is contained on. I have tried allowMargin, using bootstrap classes, setting the style height and width with !important or every tag such as the div, lineargauge tag, axis tag (basically trial and error). I have check also in the documentation and it is behaving the same, setting the dimensions does not set the dimension of the gauge itselt only the container, and the gauge is some percent smaller and align on the center. It is kind of difficult layout when you try to align other items because of the extra space. Please help. Below is my latest try.
<pre>
<template>
<div class="main" ref="gauge" align="left">
<ejs-lineargauge :height="size.height" align="left"
:width="size.width" background="transparent" id='container1'
allow-margin="false" orientation='Horizontal' :container='container1'>
<e-axes align="left">
<e-axis :line='line1' :labelStyle='labelStyle1' :ranges='gRanges' align="left"
:majorTicks="majorTick1" :minorTicks="minorTick1" >
<e-pointers align="left">
<e-pointer align="left" :value='graphValue' :height='height1' :color='graphColor' :placement='placement1' :offset='offset1' type="Bar"></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-lineargauge>
</div>
</template>
<style scoped>
#control-container {
padding: 0px !important;
}
</style>
<script>
import { LinearGaugePlugin } from "@syncfusion/ej2-vue-lineargauge";
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
name:"LinearGaugeCustom",
component:{
LinearGaugePlugin,
},
props:{
orientationType: String,
gaugeDesign: Object,
valueDesign: Object,
graphValue: Number
},
computed:{
orientation:function(){
if(this.gaugeDesign === undefined)
return 'Horizontal';
console.log(this.orientationType);
if(this.orientationType.indexOf('GaugeVertical')!= -1)
return 'Vertical';
else
return 'Horizontal';
},
minimum : function(){
return 0;
},
maximum : function(){
if(this.gaugeDesign===undefined)
return 100;
else
return this.gaugeDesign.ValueEnd;
},
gRanges : function(){
if(this.gaugeDesign===undefined)
return [];
let uniformWidth = 100;
let range1 = {
start: 0,
end: this.gaugeDesign.Limit2,
startWidth: uniformWidth,
endWidth: uniformWidth,
color: 'rgba(54, 197, 0, 0.7)'
}
let range2 = {
start: this.gaugeDesign.Limit2,
end: this.gaugeDesign.Limit3,
startWidth: uniformWidth,
endWidth: uniformWidth,
color: 'rgba(243, 157, 7, 0.7)'
}
let range3 = {
start: this.gaugeDesign.Limit3,
end: this.gaugeDesign.ValueEnd,
startWidth: uniformWidth,
endWidth: uniformWidth,
color: 'rgba(244, 0, 0, 0.7)'
}
return [range1,range2, range3];
},
isBlinkOnLimit2:function() {
if(this.gaugeDesign === undefined)
return false;
else
return this.gaugeDesign.isBlinkOnLimit3; },
isBlinkOnLimit3:function() {
if(this.gaugeDesign === undefined)
return false;
else
return this.gaugeDesign.isBlinkOnLimit3; },
isShowValueWithGraph:function() {
if(this.gaugeDesign === undefined)
return false;
else
return this.gaugeDesign.IsShowValueWithGraph; },
graphColor: function(){
if(this.gaugeDesign === undefined)
return 'gray';
if(this.graphValue < this.gaugeDesign.Limit2)
return this.gRanges[0].color; //green
else if(this.graphValue < this.gaugeDesign.Limit3 && this.graphValue > this.gaugeDesign.Limit2)
return this.gRanges[1].color; //orange
else if(this.graphValue > this.gaugeDesign.Limit3)
return this.gRanges[2].color; //red
else
return 'gray';
}
},
data:function(){
return{
size: {
height: '100%', width: '100%'
},
orientation1: 'Horizontal',
container1: {
width: 30, //done
border: {
width: 0
},
offset: 30 //done
},
line1: {
offset:35 //done
},
labelStyle1: {
font : {size: '0px'} //font-size of label, 0 means do not show
},
placement1: 'Near',
offset1: 0, //offset of pointer
height1: 200, //height of pointer
majorTick1: { height: 100, width: 1}, //ticks
minorTick1: { height: 100}, width: 1, //ticks
annotations1: []
}
},
mounted(){
console.log(this.valueDesign);
setTimeout(this.ReRenderThis(), 500);
},
watch:{
graphValue : function(){
const X = this.gaugeDesign.X - (0.15 * this.$refs.gauge.offsetWidth);
const Y = this.gaugeDesign.Y;
console.log(`Test : ${X},${Y}`);
}
},
methods: {
ReRenderThis:function(){
if(this.gaugeDesign==undefined)
{
const X = this.gaugeDesign.X - (0.15 * this.size.width);
const Y = this.gaugeDesign.Y;
console.log(`Test : ${X},${Y}`);
}
}
}
})
</script>
<style scoped>
</style>
</pre>
SIGN IN To post a reply.
1 Reply
1 reply marked as answer
SB
Swetha Babu
Syncfusion Team
May 31, 2021 11:09 AM UTC
Hi Krys,
Thank you for contacting Syncfusion support.
When we validated the provided code snippet, we came to know that you have set the "allowMargin" property name wrongly. We have created a simple Vue application using your provided code snippet and the same can be downloaded from the below link.
Code Snippet:
|
<div class="main" ref="gauge" align="left">
<ejs-lineargauge ref="gauge" :height="size.height"
:width="size.width" background="transparent"
:allowMargin=false orientation='Horizontal' :container='container1'>
<e-axes>
<e-axis :line='line1' :labelStyle='labelStyle1' :ranges='gRanges'
:majorTicks="majorTick1" :minorTicks="minorTick1" >
<e-pointers>
<e-pointer :value='graphValue' :height='height1' :color='graphColor' :placement='placement1' :offset='offset1' type="Bar"></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-lineargauge>
</div> |
Please let us know if the above application meets your requirement. Also, please let us know if you need any further assistance.
Regards,
Swetha Babu.
Marked as answer
SIGN IN To post a reply.
- 1 Reply
- 2 Participants
- Marked answer
-
KP Krys Pat
- May 29, 2021 09:03 AM UTC
- May 31, 2021 11:09 AM UTC
