Component is not reacting by dataset in using VueUiGauge and VueUiWheel

[manulsan]

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
  

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

[graphieros]

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

[manulsan]

By upgrading, It is working well.

Thank you