-
Notifications
You must be signed in to change notification settings - Fork 97
Component is not reacting by dataset in using VueUiGauge and VueUiWheel #40
-
Reactive Issues
This is the first time using this component that it has well featured and various components.
while using this one, view rendering seems to be "not rendered" by data changes,
if someone has same issues, please share with me.
Thank you advance.
Dev environment
- Vue3
- Composition API
- Quasar Framework
Usoing components
- VueUiGauge
- VueUiWheel
Result In Vue
- Even if data is changed, Chart Drawing is not re-rendered
- Picture
image
Codes
DataSet
const wheelData = computed(() => {
return {
percentage: props.liveData.widgetData.value.dataValue,
};
});
const gaugeData = computed(() => {
return {
series: [
{
from: 0,
to: 5,
color: '#6376DD',
id: '111',
},
{
from: 5,
to: 100,
color: '#42d392',
id: '222',
},
],
value: props.liveData.widgetData.value.value,
};
});
Vue template codes
<div v-else-if="widgetType == 'gauge3'" style="width: 100%; text-align: center" >
<VueUiGauge :config="gaugeConfig" :dataset="gaugeData" />
</div>
<div v-else-if="widgetType == 'gauge4'" style="width: 60%; text-align: center" >
<VueUiWheel :config="wheelConfig" :dataset="wheelData" />
</div>
Configuration
const gaugeConfig = computed(() => {
return <VueUiGaugeConfig>{
theme: isDarkMode.value ? 'hack' : 'zen', // 'hack', // zen, hack , concrete
style: {
fontFamily: 'inherit',
chart: {
backgroundColor: '#FFFFFF',
color: '#1A1A1A',
animation: {
use: false,
speed: 1,
acceleration: 1,
},
layout: {
track: {
size: 1,
useGradient: true,
gradientIntensity: 20,
},
markers: {
size: 1,
color: '#1A1A1A',
bold: true,
fontSizeRatio: 1,
offsetY: 0,
stroke: '#1A1A1A',
strokeWidth: 1,
backgroundColor: '#FFFFFF',
roundingValue: 0,
},
pointer: {
type: 'pointy',
size: 1,
stroke: '#1A1A1A',
strokeWidth: 12,
useRatingColor: true,
color: '#CCCCCC',
circle: {
radius: 10,
stroke: '#1A1A1A',
strokeWidth: 2,
color: '#FFFFFF',
},
},
},
legend: {
fontSize: 48,
prefix: '',
suffix: '',
showPlusSymbol: true,
useRatingColor: true,
color: '#1A1A1A',
roundingValue: 1,
},
// title: {
// text: 'Title',
// color: '#1A1A1A',
// fontSize: 20,
// bold: true,
// subtitle: {
// text: '',
// color: '#A1A1A1',
// fontSize: 16,
// bold: false,
// },
// },
},
},
userOptions: {
show: true,
},
};
});
const wheelConfig = computed(() => {
return <VueUiWheelConfig>{
theme: isDarkMode.value ? 'hack' : 'zen', // 'hack', // zen, hack , concrete
style: {
fontFamily: 'inherit',
chart: {
backgroundColor: '#FFFFFF',
color: '#1A1A1A',
animation: {
use: true,
speed: 0.5,
acceleration: 1,
},
layout: {
wheel: {
ticks: {
rounded: true,
inactiveColor: '#e1e5e8',
activeColor: '#6376DD',
gradient: {
show: true,
shiftHueIntensity: 10,
},
},
},
innerCircle: {
show: true,
stroke: '#e1e5e8',
strokeWidth: 1,
},
percentage: {
show: true,
fontSize: 48,
rounding: 0,
bold: true,
},
},
// title: {
// text: 'Title',
// color: '#1A1A1A',
// fontSize: 20,
// bold: true,
// subtitle: {
// text: '',
// color: '#A1A1A1',
// fontSize: 16,
// bold: false,
// },
// },
},
},
userOptions: {
show: true,
},
};
});
While applying "series" and "value" together, series is rerendered like belows
Changing gaugeData code
const gaugeData = computed(() => {
console.log('widgetData.value.value=', props.liveData.widgetData.value.value);
return {
series: [
{
from: 0,
to: props.liveData.widgetData.value.value,
color: '#6376DD',
id: '111',
},
{
from: props.liveData.widgetData.value.value,
to: 100,
color: '#42d392',
id: '222',
},
],
value: props.liveData.widgetData.value.value,
};
});
Result of rendering
Beta Was this translation helpful? Give feedback.
All reactions
Hi @manulsan :)
You can upgrade to version 2.2.18 which solves reactivity issues for these components.
Thank you for pointing it out, and for trying out the library!
Let me know if you still have issues with these components.
I don't think you should update the from and to attributes of the dataset series. They are meant to be fixed to convey information about how bad or good is the current value.
PS.
Another way to force re-redering while waiting for a solution would have been for you to add a key to the component, and increment it whenever dataset changes.
const step = ref(0); watch(() => props.liveData.widgetData.value.value, () => { step.value += 1; })
<VueUiGauge :dataset="dataset...
Replies: 2 comments
-
Hi @manulsan :)
You can upgrade to version 2.2.18 which solves reactivity issues for these components.
Thank you for pointing it out, and for trying out the library!
Let me know if you still have issues with these components.
I don't think you should update the from and to attributes of the dataset series. They are meant to be fixed to convey information about how bad or good is the current value.
PS.
Another way to force re-redering while waiting for a solution would have been for you to add a key to the component, and increment it whenever dataset changes.
const step = ref(0); watch(() => props.liveData.widgetData.value.value, () => { step.value += 1; })
<VueUiGauge :dataset="dataset" :config="config" :key="`gauge_${step}`" />
This forces the whole component to re-render with the new dataset.
Cheers
Beta Was this translation helpful? Give feedback.
All reactions
-
By upgrading, It is working well.
Thank you
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1