Upgrade `data-explorer-bar-chart` to Octane (#201)

* Upgrade `data-explorer-bar-chart` to Octane

assets/javascripts/discourse/components/data-explorer-bar-chart.hbs

@@ -0,0 +1,4 @@
+<canvas
+  {{did-insert this.initChart}}
+  {{on "change" this.updateChartData}}
+></canvas>

assets/javascripts/discourse/components/data-explorer-bar-chart.js

@@ -1,41 +1,42 @@
-import Component from "@ember/component";
+import Component from "@glimmer/component";
 import loadScript from "discourse/lib/load-script";
-import discourseComputed from "discourse-common/utils/decorators";
 import themeColor from "../lib/themeColor";
+import { bind } from "discourse-common/utils/decorators";
+import { action } from "@ember/object";
 
-export default Component.extend({
+export default class DataExplorerBarChart extends Component {
-  barsColor: themeColor("--tertiary"),
+  chart;
-  barsHoverColor: themeColor("--tertiary-high"),
+  barsColor = themeColor("--tertiary");
-  gridColor: themeColor("--primary-low"),
+  barsHoverColor = themeColor("--tertiary-high");
-  labelsColor: themeColor("--primary-medium"),
+  gridColor = themeColor("--primary-low");
-  chart: null,
+  labelsColor = themeColor("--primary-medium");
 
-  @discourseComputed("data", "options")
+  get config() {
-  config(data, options) {
+    const data = this.data;
+    const options = this.options;
     return {
       type: "bar",
       data,
       options,
     };
-  },
+  }
 
-  @discourseComputed("labels.[]", "values.[]", "datasetName")
+  get data() {
-  data(labels, values, datasetName) {
+    const labels = this.args.labels;
     return {
       labels,
       datasets: [
         {
-          label: datasetName,
+          label: this.args.datasetName,
-          data: values,
+          data: this.args.values,
           backgroundColor: this.barsColor,
           hoverBackgroundColor: this.barsHoverColor,
         },
       ],
     };
-  },
+  }
 
-  @discourseComputed
+  get options() {
-  options() {
     return {
       scales: {
         legend: {
@@ -68,31 +69,23 @@ export default Component.extend({
         ],
       },
     };
-  },
+  }
 
-  didInsertElement() {
+  @bind
-    this._super(...arguments);
+  async initChart(canvas) {
-    this._initChart();
+    await loadScript("/javascripts/Chart.min.js");
-  },
+    const context = canvas.getContext("2d");
+    // eslint-disable-next-line
+    this.chart = new Chart(context, this.config);
+  }
 
-  didUpdate() {
+  @action
-    this._super(...arguments);
+  updateChartData() {
     this.chart.data = this.data;
     this.chart.update();
-  },
+  }
 
-  willDestroyElement() {
+  willDestroy() {
-    this._super(...arguments);
     this.chart.destroy();
-  },
+  }
-
+}
-  _initChart() {
-    loadScript("/javascripts/Chart.min.js").then(() => {
-      const canvas = this.element.querySelector("canvas");
-      const context = canvas.getContext("2d");
-      const config = this.config;
-      // eslint-disable-next-line
-      this.chart = new Chart(context, config);
-    });
-  },
-});

assets/javascripts/discourse/templates/components/data-explorer-bar-chart.hbs

@@ -1 +0,0 @@
-<canvas></canvas>

assets/javascripts/discourse/templates/explorer-query-result.hbs

@@ -52,11 +52,11 @@
 
   <section>
     {{#if showChart}}
-      {{data-explorer-bar-chart
+      <DataExplorerBarChart
-        labels=chartLabels
+        @labels={{chartLabels}}
-        values=chartValues
+        @values={{chartValues}}
-        datasetName=chartDatasetName
+        @datasetName={{chartDatasetName}}
-      }}
+      />
     {{else}}
       <table>
         <thead>