Charts for list data
This commit is contained in:
Guntis Smaukstelis
Generated
+49
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
|
||||
@@ -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} />
|
||||
);
|
||||
}
|
||||
@@ -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,7 +38,6 @@ 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>
|
||||
@@ -45,10 +47,40 @@ export const Result: Component<{
|
||||
{ queryResource.error && (
|
||||
<div>Error while querying: ${queryResource.error}</div>
|
||||
)}
|
||||
{ queryResource() && queryResource() instanceof Error &&
|
||||
<div>{ queryResource().message }</div>
|
||||
}
|
||||
{ queryResource() && (
|
||||
<span>{JSON.stringify(queryResource())}</span>
|
||||
<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>
|
||||
)}
|
||||
</p>
|
||||
</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;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100vh; /* Adjust to desired height */
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.column {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user