Server returns query data, bar chart, styling charts

web/src/aggregator/chart/CityChart.tsx

@@ -0,0 +1,55 @@
+import { onMount, onCleanup, createSignal, Component } from "solid-js";
+import { Chart } from "chart.js";
+
+import { DataQuery, formatDateString } from "../helpers";
+import { CityLargeChart } from "./CityLargeChart";
+import { createCustomChart } from "./CustomChart";
+
+export const CityChart: Component<{
+    city: string;
+    data: [string, number | null][];
+    query: DataQuery;
+}> = (props) => {
+    const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>();
+    const [getIsLarge, setIsLarge] = createSignal(false);
+
+    let chart: Chart | undefined;
+    const data: [string, number | null][] = props.data.map(([dateStr, value]) => [
+        formatDateString(dateStr),
+        value,
+    ]);
+
+    // Split the data into two arrays for the x and y axis
+    const timestamps = data.map(item => item[0]);
+    const values = data.map(item => item[1]);
+    
+    onMount(() => {
+        const ctx = getCanvas()!.getContext('2d')!;
+        chart = createCustomChart(
+            ctx,
+            false,
+            timestamps,
+            values,
+            props.city,
+            props.query.field,
+            props.query.granularity,
+        );
+    });
+
+    function handleCanvasClick() {
+        setIsLarge(!getIsLarge());
+    }
+
+    onCleanup(() => {
+        chart?.destroy();
+    });
+
+    return (
+        <div>
+        <canvas ref={setCanvas} onClick={handleCanvasClick} />
+        <div style={{ display: getIsLarge() ? "block" : "none" }}>
+            <CityLargeChart city={props.city} data={props.data} query={props.query} close={() => setIsLarge(false)} />
+        </div>
+        </div>
+    );
+}