[Feature request] Setters for reactives options

[AndreaMinato]

Hi i would like to request this feature.

I'm using your project with vueJs and I am perfonrming an ajax call to retrieve my data, so I would like to instanciate as soon as I create my component the gauge (maybe with min and max to some default values) and, when the ajax returns me the data use them to populate the gauge.

So it would be nice to have this feature.

Thanks!

PS.

right now i use a "workaround" setting the max value to 100 and calculating all in percentages.

[naikus]

Hi @AndreaMinato can you give me a code example for this?

[AndreaMinato]

The framework

I'm using vueJs and I want tot wrap this library into a component, I don't want to use vue-gauge since I need to keep the fewer dependencies I can.

Some details

In the mounted function (called as soon as my component is rendered) I create the gauge setting the values as some defaults, than I call LoadData that send a request to a server to get the data. It would be Handy to have the chance to change the max property when I get the response from the server.

Workaround

Right know I just use the 100 max value, but it cause some graphics inconsistencies since if i had a cooking time of 600 the value itself (calculated like this return Math.round(this.timeElapsed / this.totaltime * 100);) change once every 6 seconds.

The code

import Vue from "vue";

import Gauge from "svg-gauge";
import axios from "axios";

export default Vue.extend({
  name: "Gauge",

  data() {
    return {
      interval: null,
      gauge: null,
      totaltime: 0,
      timeleft: 0,
      status: "",
      lidError: "",
      UpperPlateTemperature: "",
      BottomPlateTemperature: "",
      recipe: ""
    };
  },

  computed: {
    timeElapsed() {
      return this.totaltime - this.timeleft;
    },
    value() {
      return Math.round(this.timeElapsed / this.totaltime * 100);
    },
    finished() {
      if (this.timeleft <= 0) {
        this.$emit("finished");
        return true;
      }
      return false;
    }
  },
  mounted() {
    this.createGauge();
    this.loadData();
  },
  methods: {
    tickIt() {
      this.interval = setInterval(() => {
        this.timeleft--;
        this.gauge.setValue(this.value);
      }, 1000);

      this.$on("finished", () => {
        clearInterval(this.interval);
      });
    },
    createGauge() {
      this.gauge = Gauge(this.$refs.gauge, {
        max: 100,
        value: 0,
        showValue: false,
        dialRadius: 48,
        gaugeClass: "gauge",
        dialClass: "dial",
        valueDialClass: "value",
        valueTextClass: "value-text"
      });
    },
    async loadData() {
      clearInterval(this.interval);
      try {
        let res = await axios.get(`/gaugeValues`);
        this.totaltime = res.data["CookingTime"];
        this.timeleft = res.data["RunTime"];
      } catch (error) {
       console.log(error);
      }

      this.gauge.setValueAnimated(this.value, 1);
      this.tickIt();
    }
  }
});

[naikus]

Hi @AndreaMinato I'll take a look into this.