Charts for list data

web/src/aggregator/CityChart.tsx

@@ -0,0 +1,70 @@
+import { onMount, onCleanup, createSignal, Component } from "solid-js";
+import { Chart, CategoryScale, LinearScale, LineController, PointElement, LineElement, Title } from 'chart.js';
+import moment from "moment";
+
+// Register the controllers, elements, scales, and plugins we'll be using
+Chart.register(LineController, LinearScale, PointElement, LineElement, Title, CategoryScale);
+
+export const CityChart: Component<{ data: [string, number | null][] }> = (props) => {
+  const [canvas, setCanvas] = createSignal<HTMLCanvasElement>();
+  let chart: Chart;
+  const data: [string, number | null][] = props.data.map(([dateStr, value]) => [
+    moment(new Date(dateStr)).format("HH:mm"),
+    value,
+  ]);
+
+  // Split the data into two arrays for the x and y axis
+  const timestamps = data.map(item => item[0]);
+  const temperatures = data.map(item => item[1]);
+  
+  onMount(() => {
+    const ctx = canvas()!.getContext('2d')!;
+
+    chart = new Chart(ctx, {
+      type: 'line',
+      data: {
+        labels: timestamps,
+        datasets: [{
+          label: 'Temperature',
+          data: temperatures,
+          fill: false,
+          borderColor: 'rgb(75, 192, 192)',
+          tension: 0.1,
+        }]
+      },
+      options: {
+        spanGaps: false,
+        plugins: {
+            title: {
+                // display: true,
+                text: "Rīga",
+            },
+        },
+        scales: {
+            x: {
+                beginAtZero: true,
+                title: {
+                    // display: true,
+                    text: 'Day'
+                },
+            },
+            y: {
+                beginAtZero: true,
+                title: {
+                    // display: true,
+                    text: 'Temperature (°C)'
+                }
+            }
+        }
+      }
+    });
+  });
+
+  onCleanup(() => {
+    chart.destroy();
+  });
+
+  return (
+    <canvas ref={setCanvas} />
+  );
+}

web/src/aggregator/Result.tsx

@@ -1,6 +1,9 @@
 import moment from "moment";
 import { Accessor, Component, createResource, createSignal } from "solid-js";
 import { apiHost } from "../consts";
+import { CityChart } from "./CityChart";
+
+import "../css/Result.css"
 
 export const Result: Component<{
     getCities: Accessor<Set<string>>,
@@ -17,7 +20,7 @@ export const Result: Component<{
     const [getTimestamp, setTimestamp] = createSignal<number>(0);
 
     const fetchQuery = async (timestamp: number) => {
-        if (cities() === "") return "ERROR: Select cities!";
+        if (cities() === "") return new Error("ERROR: Select cities!");
         await new Promise(resolve => setTimeout(resolve, 500))
         const response = await fetch(`${apiHost}/api/query/${queryStart()}-${queryEnd()}/${cities()}/${props.getField()}/${props.getKey()}`);
         const json = await response.json();
@@ -35,20 +38,49 @@ export const Result: Component<{
             <p>weather field: { props.getField() }</p>
             <p>aggregation field: { props.getKey() }</p>
             <h3>Result:</h3>
-            <p>
-                { queryResource.loading && (
-                    <div>
-                        <span class="spinner"></span>
-                        <span style={{ "padding-left": "16px" }}>Loading query</span>
-                    </div>
-                )}
-                { queryResource.error && (
-                    <div>Error while querying: ${queryResource.error}</div>
-                )}
-                { queryResource() && (
-                    <span>{JSON.stringify(queryResource())}</span>
-                )}
-            </p>
+            { queryResource.loading && (
+                <div>
+                    <span class="spinner"></span>
+                    <span style={{ "padding-left": "16px" }}>Loading query</span>
+                </div>
+            )}
+            { queryResource.error && (
+                <div>Error while querying: ${queryResource.error}</div>
+            )}
+            { queryResource() && queryResource() instanceof Error &&
+                <div>{ queryResource().message }</div>
+            }
+            { queryResource() && (
+                <div class="result-container">
+                    { Object.entries(queryResource())
+                        .sort((a, b) => (a[0] as string) > (b[0] as string) ? 1 : -1)
+                        .map(cityData => <ExportCity city={cityData[0]} value={cityData[1]} />)
+                    }</div>
+            )}
         </div>
     );
+}
+
+const ExportCity: Component<{ city: string, value: any }> = ({ city, value }) => {
+    return (
+        <div class="result-item">
+            <h4>{ city }</h4>
+            {
+                isDateNumber(value)
+                ? <CityChart data={value}/>
+                : value
+            }
+        </div>
+    );
+}
+
+function isDateNumber(value: unknown): value is [string, number | null][] {
+    if (!Array.isArray(value)) return false;
+    for (let i = 0; i < value.length; i++) {
+        let item = value[i];
+        if (!Array.isArray(item) || item.length !== 2 || typeof item[0] !== 'string' || (typeof item[1] !== 'number' && item[1] !== null)) {
+            return false;
+        }
+    }
+    return true;
 }