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

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>
+    );
+}