jeudi 12 décembre 2019

How to create a dynamic chart using ember-vega

Im trying to create a vega chart in an ember octane app but in doing so im able to render the chart once, but from then on, even if the values change, the chart doesn't get rerendered

the code im using is

component.ts

@tracked
  model!: any;

get chartData() {
    const data = this.model.data;
    return {
      table: data.map((datum: any) => {
        return {
          ...datum
        };
      })
    };
  }

chart.hbs


why isn't it not working, but at the same time doing set(this,"dataSource",this.model.data) works

dataSource: computed(function() {
    return emberArray([
        {"category": "A", "amount": 28},
        {"category": "B", "amount": 55},
        {"category": "C", "amount": 43},
        {"category": "D", "amount": 91},
        {"category": "E", "amount": 81},
        {"category": "F", "amount": 53},
        {"category": "G", "amount": 19},
        {"category": "H", "amount": 87}
    ]);
}),

data: computed('dataSource.{[],@each.amount}', function () {
    const dataSource = get(this, 'dataSource');
    return {
        table: dataSource.map((datum) => {
            // return a copy because Vega Vis will mutate the dataset.
            return {
                ...datum
            };
        })
    };
})



Aucun commentaire:

Enregistrer un commentaire