Charts for list data

web/package-lock.json

@@ -8,10 +8,12 @@
       "name": "weather-tool-web",
       "version": "0.0.0",
       "dependencies": {
+        "chart.js": "^4.3.0",
         "moment": "^2.29.4",
         "solid-js": "^1.6.10"
       },
       "devDependencies": {
+        "@types/chart.js": "^2.9.37",
         "typescript": "^4.9.5",
         "vite": "^4.1.1",
         "vite-plugin-html-env": "^1.2.8",
@@ -908,6 +910,11 @@
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
       "dev": true
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.0",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.0.tgz",
@@ -949,6 +956,15 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "node_modules/@types/chart.js": {
+      "version": "2.9.37",
+      "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.37.tgz",
+      "integrity": "sha512-9bosRfHhkXxKYfrw94EmyDQcdjMaQPkU1fH2tDxu8DWXxf1mjzWQAV4laJF51ZbC2ycYwNDvIm1rGez8Bug0vg==",
+      "dev": true,
+      "dependencies": {
+        "moment": "^2.10.2"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -1063,6 +1079,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.3.0.tgz",
+      "integrity": "sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=7"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -2143,6 +2170,11 @@
         }
       }
     },
+    "@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "@types/babel__core": {
       "version": "7.20.0",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.0.tgz",
@@ -2184,6 +2216,15 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/chart.js": {
+      "version": "2.9.37",
+      "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.37.tgz",
+      "integrity": "sha512-9bosRfHhkXxKYfrw94EmyDQcdjMaQPkU1fH2tDxu8DWXxf1mjzWQAV4laJF51ZbC2ycYwNDvIm1rGez8Bug0vg==",
+      "dev": true,
+      "requires": {
+        "moment": "^2.10.2"
+      }
+    },
     "ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -2255,6 +2296,14 @@
         "supports-color": "^5.3.0"
       }
     },
+    "chart.js": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.3.0.tgz",
+      "integrity": "sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==",
+      "requires": {
+        "@kurkle/color": "^0.3.0"
+      }
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",

web/package.json

@@ -9,12 +9,14 @@
     "serve": "vite preview"
   },
   "devDependencies": {
+    "@types/chart.js": "^2.9.37",
     "typescript": "^4.9.5",
     "vite": "^4.1.1",
     "vite-plugin-html-env": "^1.2.8",
     "vite-plugin-solid": "^2.5.0"
   },
   "dependencies": {
+    "chart.js": "^4.3.0",
     "moment": "^2.29.4",
     "solid-js": "^1.6.10"
   }

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 && (
-                { queryResource.loading && (
+                <div>
-                    <div>
+                    <span class="spinner"></span>
-                        <span class="spinner"></span>
+                    <span style={{ "padding-left": "16px" }}>Loading query</span>
-                        <span style={{ "padding-left": "16px" }}>Loading query</span>
+                </div>
-                    </div>
+            )}
-                )}
+            { queryResource.error && (
-                { queryResource.error && (
+                <div>Error while querying: ${queryResource.error}</div>
-                    <div>Error while querying: ${queryResource.error}</div>
+            )}
-                )}
+            { queryResource() && queryResource() instanceof Error &&
-                { queryResource() && (
+                <div>{ queryResource().message }</div>
-                    <span>{JSON.stringify(queryResource())}</span>
+            }
-                )}
+            { queryResource() && (
-            </p>
+                <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;
+}

web/src/css/FileManager.css

@@ -1,6 +1,6 @@
 .container {
     display: flex;
-    height: 100vh; /* Adjust to desired height */
+    min-height: 100vh;
   }
 
   .column {

web/src/css/Result.css

@@ -0,0 +1,11 @@
+.result-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 10px;
+}
+
+  .result-item {
+    background-color: #f2f2f2;
+    padding: 10px;
+    text-align: center;
+}