Add granularity for aggregation, group by hour/day/month/year

web/src/aggregator/Aggregator.tsx

@@ -4,6 +4,7 @@ import { createSignal } from "solid-js";
 import { Result } from "./Result";
 import { SelectCity } from "./SelectCity";
 import { SelectField } from "./SelectField";
+import { SelectGranularity } from "./SelectGranularity";
 import { SelectKey } from "./SelectKey";
 import { SelectTimeRange } from "./SelectTimeRange";
 
@@ -16,6 +17,7 @@ export function Aggregator() {
     const [getEnd, setEnd] = createSignal(nowRounded);
     const [getField, setField] = createSignal("tempMax");
     const [getKey, setKey] = createSignal("max");
+    const [getGranularity, setGranularity] = createSignal("hour");
 
     return (
         <div class="aggregator">
@@ -36,6 +38,7 @@ export function Aggregator() {
                     <div>
                         <SelectField getField={getField} setField={setField} />
                         <SelectKey getKey={getKey} setKey={setKey} />
+                        <SelectGranularity getGranularity={getGranularity} setGranularity={setGranularity} />
                     </div>
                 </div>
                 <div class="column">
@@ -45,6 +48,7 @@ export function Aggregator() {
                         getEnd={getEnd}
                         getField={getField}
                         getKey={getKey}
+                        getGranularity={getGranularity}
                     />
                 </div>
             </div>

web/src/aggregator/CityChart.tsx

@@ -5,11 +5,25 @@ 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]) => [
-    moment(new Date(dateStr)).format("HH:mm"),
+    formatDateString(dateStr),
     value,
   ]);
 

web/src/aggregator/Result.tsx

@@ -12,6 +12,7 @@ export const Result: Component<{
     getEnd: Accessor<Date>,
     getField: Accessor<string>,
     getKey: Accessor<string>,
+    getGranularity: Accessor<string>,
 }> = (props) => {
     const cities = () => [...props.getCities()].join(",");
     const queryStart = () => moment(props.getStart()).format("YYYYMMDD_HHmm");
@@ -21,7 +22,7 @@ export const Result: Component<{
     const fetchQuery = async (timestamp: number) => {
         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 response = await fetch(`${apiHost}/api/query/${queryStart()}-${queryEnd()}/${props.getGranularity()}/${cities()}/${props.getField()}/${props.getKey()}`);
         const json = await response.json();
         return json;
     }

web/src/aggregator/SelectGranularity.tsx

@@ -0,0 +1,22 @@
+import { Accessor, Component, Setter } from "solid-js";
+
+import { aggregateGranularity } from "../consts";
+
+export const SelectGranularity: Component<{
+    getGranularity: Accessor<string>,
+    setGranularity: Setter<string>,
+}> = ({ getGranularity, setGranularity }) => {
+    return (
+        <div>
+            <h3>Select granularity</h3>
+            <select onChange={(e) => setGranularity(e.target.value)}>
+                { aggregateGranularity.map(granularity =>
+                    <option
+                        value={granularity}
+                        selected={granularity === getGranularity() ? true : false}
+                    >{granularity}</option>
+                )}
+            </select>
+        </div>
+    );
+}