Call to updateNeedle not working

[DSC-CSTS]

Hi,

I want to build a component but having trouble to dynamically update the needle value. Gauge-chart states this needs to be done via the updateNeedle function with the example:

// Drawing and updating the chart
GaugeChart
  .gaugeChart(element, 300, gaugeOptions)
  .updateNeedle(50)

Here is my code. It all happens in the watch->gaugeValue. I tried all the lines in there but with no success. It is done like this because eventually the needle value will come from a $store. For the test a 4 second interval is implemented to change the needle value by 10 every time. Is there someone who can point me in the right direction?

Regards, Dirk

<template>
  <v-container class="ma-0 pb-0" fluid>
    <v-row>
      <v-col cols="12" class="state_primary gauge">
        <vue-gauge 
        v-model="gaugeValue"
        :ref="this.gaugeid"
        :refid="this.gaugeid" 
        :options=options 
        :value="theVal"
        />
      />
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import VueGauge from "vue-gauge";

export default {
  components: {
    VueGauge
  },
  props: {
    gaugeid: String,
    gaugewidth: {
      type: Number,
      default: 200
    },
    needleColor:{
      type: String,
      default: '#e65c66'
    },
    rangeLabelLeft: {
      type: String,
      default: "0" 
    },
    rangeLabelRight: {
      type: String,
      default: "100" 
    },
    arcColors: {
      type: Array,
      default: function () {
        return ['#0077be', '#03c03c'];
      }
    },
    arcDelimiters: {
      type: Array,
      default: function () {
        return [50];
      }
    }

  },
  data() {
    return {
      options: {
        'hasNeedle': true,
        'needleValue': 0,
        'needleColor': this.needleColor,
        'arcColors': this.arcColors,
        'arcDelimiters':this.arcDelimiters,
        'rangeLabel':[this.rangeLabelLeft, this.rangeLabelRight],
        'chartWidth': this.gaugewidth

      },
      theVal: 0

    };
  },
  methods: {
  },
  computed: {
    gaugeValue() {
      return this.theVal;
    }
  },
  watch: {
    gaugeValue() {
      let el = this.$refs[this.gaugeid].$el;

// All not working...
      // this.GaugeChart.gaugeChart(el, 300, this.options).updateNeedle(this.theVal)
      // this.$refs[this.gaugeid].updateNeedle(this.theVal);
      // this.$refs[this.gaugeid].GaugeChart.gaugeChart(el, 300, this.options).updateNeedle(this.theVal)
      // this.GaugeChart.gaugeChart(el, 300, this.options).updateNeedle(this.theVal)
      // GaugeChart.GaugeChart(el, 300, this.options).updateNeedle(this.theVal)
      // this.$refs[this.gaugeid].gaugeChart(el, 300, this.options).updateNeedle(this.theVal)

      this.gaugeChart(el, 300, this.options).updateNeedle(this.theVal)
    }
  },
  mounted() {
      setInterval(() => {
        const min = 0
        const max = 100
        this.theVal += 10;
        if( this.theVal >max)
        {
          this.theVal = min
        }
      }, 4000)

  }
};

</script>

[vano20]

I am able to make this work using this. But it remove the whole point of using this library. Because the library is not exposing the updateNeedles to parent. I am end up referencing GaugeChart object myself

...
// import gaugechart object on imports statement
let GaugeChart = require('vue-gauge/assets/bundle.js')
...
mounted() {
    // Get element
    let element = document.querySelector('#gauge-1')

    // get svg tags
    let [svg] = element.getElementsByTagName('svg')

    // remove initial svg element created by the library
    svg.remove()

    // reinit rendering GaugeChart and referencing it to global variable
    this.gauge = GaugeChart.gaugeChart(element, 250, this.config)
    this.gauge.updateNeedle(this.needleValue)

    // updating the global gaugechart variable
    this.currentInterval = setInterval(() => {

      if (this.needleValue < 100) this.needleValue += 10
      if (this.currentInterval && this.needleValue === 100) clearInterval(this.currentInterval)

      this.gauge.updateNeedle(this.needleValue)
    }, 1000);

We can force re-render and re-init gaugeChart to updateNeedle using v-if too.

[VIRGO96]

any clean version to achive this

[VIRGO96]

@vano20 what is this.config here ?

[vano20]

@vano20 what is this.config here ?

I'm referring to this vanilla gaugeChart config