bot/WeatherTool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Server returns query data, bar chart, styling charts

Browse Source
This commit is contained in:
Guntis Smaukstelis
2023-08-03 00:03:48 +03:00
parent cf57669830
commit b887317c6b
11 changed files with 295 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/scala/parse/Aggregate.scala
+9
View File
@@ -18,6 +18,15 @@ object Aggregate {
granularity: ChronoUnit,
)
implicit val userQueryEncoder: Encoder[UserQuery] = new Encoder[UserQuery] {
override def apply(userQuery: UserQuery): Json = Json.obj(
"cities" -> Json.fromValues(userQuery.cities.map(Json.fromString)),
"field" -> Json.fromString(userQuery.field),
"key" -> Json.fromString(userQuery.key.toString),
"granularity" -> Json.fromString(userQuery.granularity.toString)
)
}
sealed trait AggregateKey
object AggregateKey {
case object Min extends AggregateKey
src/main/scala/server/Server.scala
+10 -3
View File
@@ -5,7 +5,7 @@ import cats.implicits.toTraverseOps
import com.comcast.ip4s.IpLiteralSyntax
import db.DataService
import fetch.FetchService
import parse.{Parser, WeatherData}
import parse.{Aggregate, Parser, WeatherData}
import server.ValidateRoutes.{AggKey, CityList, DateTimeRange, Granularity, ValidDate}
import io.circe.{Json, Printer}
import org.http4s._
@@ -16,8 +16,10 @@ import org.http4s.server.middleware.CORS
import org.http4s.server.middleware.CORSConfig
import org.http4s.server.staticcontent.FileService
import org.http4s.ember.server.EmberServerBuilder
import io.circe.generic.auto._
import io.circe.syntax._
import parse.Aggregate.AggregateValueImplicits.aggregateValueEncoder
import parse.Aggregate.userQueryEncoder
import parse.Aggregate.{AggregateKey, UserQuery}
import org.http4s.circe.jsonEncoder
import org.typelevel.log4cats.Logger
@@ -45,13 +47,18 @@ class Server(dataService: DataService, fetch: FetchService, log: Logger[IO]) {
}
}
private case class ResponseWrapper(result: Map[String, Option[Aggregate.AggregateValue]], query: UserQuery)
private val apiRoutes = HttpRoutes.of[IO] {
// http://0.0.0.0:8080/api/query/20230414_2200-20230501_1230/Liepāja,Rēzekne/tempMax/max
case GET -> Root / "query" / DateTimeRange(from, to) / Granularity(granularity) / CityList(cities) / field / AggKey(key) =>
val userQuery = UserQuery(cities, field, key, granularity)
dataService.getInRange(from, to)
.map(Parser.queryData(UserQuery(cities, field, key, granularity), _))
.flatMap(result => Ok(result.asJson.pretty))
.map(Parser.queryData(userQuery, _))
.map(result => ResponseWrapper(result, userQuery))
.flatMap(responseWrapper => Ok(responseWrapper.asJson.pretty))
// http://0.0.0.0:8080/api/fetch/date/20230514
case GET -> Root / "fetch" / "date" / ValidDate(date) =>
web/src/aggregator/Aggregator.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export function Aggregator() {
const [getStart, setStart] = createSignal(dayAgo);
const [getEnd, setEnd] = createSignal(nowRounded);
const [getField, setField] = createSignal("tempMax");
const [getKey, setKey] = createSignal("max");
const [getKey, setKey] = createSignal("list");
const [getGranularity, setGranularity] = createSignal("hour");
return (
web/src/aggregator/CityChart.tsx
-84
View File
@@ -1,84 +0,0 @@
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);
function formatDateString(str: string): string {
const date = moment(new Date(str));
switch (str.length) {
// year: 2023
case 4: return date.format("yyyy");
// year-month: 2023-06
case 7: return date.format("yyyy-MM");
// year-month-day: 2023-06-23
case 10: return date.format("yyyy-MM-DD");
// year-month-day hour:minute 2023-06-23T23:59
default: return date.format("HH:mm");
}
}
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]) => [
formatDateString(dateStr),
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
+10 -4
View File
@@ -4,7 +4,8 @@ import { Accessor, Component, createResource, createSignal } from "solid-js";
import "../css/Result.css"
import { apiHost, ResultKeyVal, resultOrder, ResultOrderKeys } from "../consts";
import { SelectOrder } from "./SelectOrder";
import { CityResult } from "./CityResult";
import { CityResult } from "./chart/CityResult";
import { isDataQuery } from "./helpers";
export const Result: Component<{
getCities: Accessor<Set<string>>,
@@ -54,12 +55,17 @@ export const Result: Component<{
{ queryResource() && queryResource() instanceof Error &&
<div>{ queryResource().message }</div>
}
{ queryResource() && (
{ queryResource() && queryResource().result && isDataQuery(queryResource().query) && (
<div class="result-container">
{ Object.entries(queryResource())
{ Object.entries(queryResource().result)
.map(keyVal => [...keyVal] as ResultKeyVal)
.sort((a, b) => resultOrder[getOrderKey()](a, b))
.map(cityData => <CityResult city={cityData[0]} value={cityData[1]} />)
.map(cityData =>
<CityResult
city={cityData[0]}
query={queryResource().query}
result={cityData[1]}
/>)
}</div>
)}
</div>
web/src/aggregator/chart/CityChart.tsx
+55
View File
@@ -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>
);
}
web/src/aggregator/chart/CityLargeChart.tsx
+46
View File
@@ -0,0 +1,46 @@
import { onMount, createSignal, Component } from "solid-js";
import { Chart } from "chart.js";
import { DataQuery, formatDateString } from "../helpers";
import "../../css/overlay.css"
import { createCustomChart } from "./CustomChart";
export const CityLargeChart: Component<{
city: string;
data: [string, number | null][];
query: DataQuery;
close: () => void
}> = (props) => {
const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>();
let chart: Chart;
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,
true,
timestamps,
values,
props.city,
props.query.field,
props.query.granularity,
);
});
return (
<div class="overlay" onClick={props.close}>
<div class="overlay-content">
<canvas ref={setCanvas} />
</div>
</div>
);
}
web/src/aggregator/CityResult.tsx → web/src/aggregator/chart/CityResult.tsx
+5 -4
View File
@@ -1,14 +1,15 @@
import { Component } from "solid-js";
import { CityChart } from "./CityChart";
import { DataQuery } from "../helpers";
export const CityResult: Component<{ city: string, value: any }> = ({ city, value }) => {
export const CityResult: Component<{ city: string, query: DataQuery, result: any }> = ({ city, query, result }) => {
return (
<div class="result-item">
<h4>{ city }</h4>
{
isDateNumber(value)
? <CityChart data={value}/>
: value
isDateNumber(result)
? <CityChart city={city} data={result} query={query}/>
: result
}
</div>
);
web/src/aggregator/chart/CustomChart.ts
+100
View File
@@ -0,0 +1,100 @@
import {
BarElement,
BarController,
CategoryScale,
Chart,
LinearScale,
LineController,
PointElement,
LineElement,
Title,
} from "chart.js";
// Register the controllers, elements, scales, and plugins we'll be using
Chart.register(
BarElement,
BarController,
LineController,
LinearScale,
PointElement,
LineElement,
Title,
CategoryScale,
);
// Chart.defaults.backgroundColor = "#FF0000";
const barChartData = ["precipitation", "sunDuration"];
export function createCustomChart(
ctx: CanvasRenderingContext2D,
showBig: boolean,
timestamps: string[],
values: Array<number | null>,
city: string,
field: string,
granularity: string,
): Chart {
const dataConfig = {
labels: timestamps,
datasets: [{
label: field,
data: values,
fill: false,
borderColor: "rgb(75, 192, 192)",
backgroundColor: "rgb(75, 192, 192)",
tension: 0.1,
}]
};
const optionsConfig = {
plugins: {
title: {
display: showBig,
text: city,
},
},
scales: {
x: {
beginAtZero: true,
title: {
display: showBig,
text: granularity,
},
},
y: {
beginAtZero: true,
title: {
display: showBig,
text: field,
}
}
},
};
if (!barChartData.includes(field)) {
dataConfig.datasets[0].backgroundColor = "#FFFFFF";
}
return new Chart(ctx, {
type: barChartData.includes(field) ? "bar" : "line",
data: dataConfig,
options: {
...optionsConfig,
animation: false,
spanGaps: false,
},
plugins: [ canvas_bg_plugin ],
});
}
const canvas_bg_plugin = {
id: "canvas_bg_plugin",
beforeDraw: (chart: any, args: any, options: any) => {
const { ctx } = chart;
ctx.save();
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.restore();
},
};
web/src/aggregator/helpers.ts
+30
View File
@@ -0,0 +1,30 @@
import moment from "moment";
export function formatDateString(str: string): string {
const date = moment(new Date(str));
switch (str.length) {
// year: 2023
case 4: return date.format("yyyy");
// year-month: 2023-06
case 7: return date.format("yyyy-MM");
// year-month-day: 2023-06-23
case 10: return date.format("yyyy-MM-DD");
// year-month-day hour:minute 2023-06-23T23:59
default: return date.format("HH:mm");
}
}
export interface DataQuery {
cities: string[];
field: string;
granularity: string;
key: string;
}
export function isDataQuery(variable: any): variable is DataQuery {
return variable &&
Array.isArray(variable.cities) &&
typeof variable.field === 'string' &&
typeof variable.granularity === 'string' &&
typeof variable.key === 'string';
}
web/src/css/overlay.css
+29
View File
@@ -0,0 +1,29 @@
/* Overlay styles */
.overlay {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 999;
}
.overlay-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 90%;
max-height: 90%;
background-color: white;
}
.overlay-content img {
display: block;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}