mirror of
https://github.com/discourse/discourse.git
synced 2024-12-20 13:23:42 +08:00
cb819ab49a
The chart component was not rerendering if the chart config passed to it was changed, this commit fixes the issue by getting the config from `this.args` before trying to access it inside an async call, so if the args change Ember correctly rerenders. Also adds tests for this and general chart rendering. --------- Co-authored-by: Martin Brennan <martin@discourse.org>
26 lines
677 B
Plaintext
26 lines
677 B
Plaintext
import Component from "@glimmer/component";
|
|
import { modifier } from "ember-modifier";
|
|
import loadScript from "discourse/lib/load-script";
|
|
|
|
// args:
|
|
// chartConfig - object
|
|
export default class Chart extends Component {
|
|
renderChart = modifier((element) => {
|
|
const { chartConfig } = this.args;
|
|
|
|
loadScript("/javascripts/Chart.min.js").then(() => {
|
|
this.chart = new window.Chart(element.getContext("2d"), chartConfig);
|
|
});
|
|
|
|
return () => this.chart?.destroy();
|
|
});
|
|
|
|
<template>
|
|
<div ...attributes>
|
|
<div class="chart-canvas-container">
|
|
<canvas {{this.renderChart}} class="chart-canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
}
|