Mikhus/canvas-gauges

updated values failed to redraw the correct needle value

Open

#170 opened on May 29, 2018

View on GitHub
 (7 comments) (0 reactions) (1 assignee)JavaScript (402 forks)github user discovery
bughelp wanted

Repository metrics

Stars
 (1,601 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

When updating the needle values for the radial gauge component, the watch function will not update the needle value on the first try. It settles at zero a few times before accepting the new value.

<template>
  <canvas class="canvas-gauges"></canvas>
</template>

<script>
import { RadialGauge } from 'canvas-gauges'
export default {
  props: {
    value: Number,
    options: {
      type: Object,
      default: () => ({})
    }
  },
  data: function () {
    return {
      chart: null
    }
  },
  mounted: function () {
    this.chart = new RadialGauge(Object.assign({}, this.options, { renderTo: this.$el, value: this.value }))
      .draw()
  },
  beforeDestroy: function () {
    this.chart.destroy()
  },
  watch: {
    value: function (val) {
      this.chart.value = val
    },
    options: function (opt) {
      this.chart.destroy()
      this.chart = new RadialGauge(Object.assign({}, this.options, {renderTo: this.$el, value: this.value})).draw()
    }
  }
}
</script>

Contributor guide