From 6f005c56d74d89e5b4ab4ec6e7be067f388952bf Mon Sep 17 00:00:00 2001 From: Guntis Smaukstelis Date: Tue, 23 May 2023 00:46:07 +0300 Subject: [PATCH] Charts for list data --- web/package-lock.json | 49 ++++++++++++++++++++++ web/package.json | 2 + web/src/aggregator/CityChart.tsx | 70 ++++++++++++++++++++++++++++++++ web/src/aggregator/Result.tsx | 62 +++++++++++++++++++++------- web/src/css/FileManager.css | 2 +- web/src/css/Result.css | 11 +++++ 6 files changed, 180 insertions(+), 16 deletions(-) create mode 100644 web/src/aggregator/CityChart.tsx create mode 100644 web/src/css/Result.css diff --git a/web/package-lock.json b/web/package-lock.json index 9c84ea4..f75ac46 100644 --- a/web/package-lock.json +++ b/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", diff --git a/web/package.json b/web/package.json index db0a474..b86b4f1 100644 --- a/web/package.json +++ b/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" } diff --git a/web/src/aggregator/CityChart.tsx b/web/src/aggregator/CityChart.tsx new file mode 100644 index 0000000..afb270c --- /dev/null +++ b/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(); + 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 ( + + ); +} \ No newline at end of file diff --git a/web/src/aggregator/Result.tsx b/web/src/aggregator/Result.tsx index 2f8e1c9..f9193a6 100644 --- a/web/src/aggregator/Result.tsx +++ b/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>, @@ -17,7 +20,7 @@ export const Result: Component<{ const [getTimestamp, setTimestamp] = createSignal(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<{

weather field: { props.getField() }

aggregation field: { props.getKey() }

Result:

-

- { queryResource.loading && ( -

- - Loading query -
- )} - { queryResource.error && ( -
Error while querying: ${queryResource.error}
- )} - { queryResource() && ( - {JSON.stringify(queryResource())} - )} -

+ { queryResource.loading && ( +
+ + Loading query +
+ )} + { queryResource.error && ( +
Error while querying: ${queryResource.error}
+ )} + { queryResource() && queryResource() instanceof Error && +
{ queryResource().message }
+ } + { queryResource() && ( +
+ { Object.entries(queryResource()) + .sort((a, b) => (a[0] as string) > (b[0] as string) ? 1 : -1) + .map(cityData => ) + }
+ )} ); +} + +const ExportCity: Component<{ city: string, value: any }> = ({ city, value }) => { + return ( +
+

{ city }

+ { + isDateNumber(value) + ? + : value + } +
+ ); +} + +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; } \ No newline at end of file diff --git a/web/src/css/FileManager.css b/web/src/css/FileManager.css index 95c46b9..83bc132 100644 --- a/web/src/css/FileManager.css +++ b/web/src/css/FileManager.css @@ -1,6 +1,6 @@ .container { display: flex; - height: 100vh; /* Adjust to desired height */ + min-height: 100vh; } .column { diff --git a/web/src/css/Result.css b/web/src/css/Result.css new file mode 100644 index 0000000..ac40b96 --- /dev/null +++ b/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; +} \ No newline at end of file