Revert "web/elements: fix chart not rendering if update events happens before initial render"

This reverts commit f53343141e.

web/src/elements/charts/Chart.ts

@@ -22,7 +22,7 @@ export abstract class AKChart<T> extends LitElement {
     abstract apiRequest(): Promise<T>;
     abstract getChartData(data: T): ChartData;
 
-    chart: Chart;
+    chart?: Chart;
 
     @property()
     centerText?: string;
@@ -45,22 +45,17 @@ export abstract class AKChart<T> extends LitElement {
 
     constructor() {
         super();
-        const canvas = this.shadowRoot?.querySelector<HTMLCanvasElement>("canvas");
-        if (!canvas) {
-            console.warn("Failed to get canvas element");
-            return;
-        }
-        const ctx = canvas.getContext("2d");
-        if (!ctx) {
-            console.warn("failed to get 2d context");
-            return;
-        }
-        this.chart = this.configureChart(undefined, ctx);
         window.addEventListener("resize", () => {
-            this.chart.resize();
+            if (this.chart) {
+                this.chart.resize();
+            }
         });
         window.addEventListener(EVENT_REFRESH, () => {
-            this.firstUpdated();
+            this.apiRequest().then((r: T) => {
+                if (!this.chart) return;
+                this.chart.data = this.getChartData(r);
+                this.chart.update();
+            });
         });
         const matcher = window.matchMedia("(prefers-color-scheme: light)");
         const handler = (ev?: MediaQueryListEvent) => {
@@ -76,9 +71,18 @@ export abstract class AKChart<T> extends LitElement {
     }
 
     firstUpdated(): void {
-        this.apiRequest().then((r: T) => {
+        this.apiRequest().then((r) => {
-            this.chart.data = this.getChartData(r);
+            const canvas = this.shadowRoot?.querySelector<HTMLCanvasElement>("canvas");
-            this.chart.update();
+            if (!canvas) {
+                console.warn("Failed to get canvas element");
+                return false;
+            }
+            const ctx = canvas.getContext("2d");
+            if (!ctx) {
+                console.warn("failed to get 2d context");
+                return false;
+            }
+            this.chart = this.configureChart(r, ctx);
         });
     }
 
@@ -151,10 +155,10 @@ export abstract class AKChart<T> extends LitElement {
         } as ChartOptions;
     }
 
-    configureChart(data: T | undefined, ctx: CanvasRenderingContext2D): Chart {
+    configureChart(data: T, ctx: CanvasRenderingContext2D): Chart {
         const config = {
             type: this.getChartType(),
-            data: data ? this.getChartData(data) : {},
+            data: this.getChartData(data),
             options: this.getOptions(),
             plugins: this.getPlugins(),
         };