Refactor select fields

web/src/aggregator/Aggregator.tsx

@@ -2,8 +2,9 @@ import moment from "moment";
 import { createSignal } from "solid-js";
 
 import { Result } from "./Result";
-import { SelectAggregator } from "./SelectAggregator";
 import { SelectCity } from "./SelectCity";
+import { SelectField } from "./SelectField";
+import { SelectKey } from "./SelectKey";
 import { SelectTimeRange } from "./SelectTimeRange";
 
 const nowRounded = new Date(new Date().setMinutes(30));
@@ -33,12 +34,8 @@ export function Aggregator() {
                         />
                     </div>
                     <div>
-                        <SelectAggregator
+                        <SelectField getField={getField} setField={setField} />
-                            getField={getField}
+                        <SelectKey getKey={getKey} setKey={setKey} />
-                            setField={setField}
-                            getKey={getKey}
-                            setKey={setKey}
-                        />
                     </div>
                 </div>
                 <div class="column">

web/src/aggregator/CityResult.tsx

@@ -0,0 +1,26 @@
+import { Component } from "solid-js";
+import { CityChart } from "./CityChart";
+
+export const CityResult: 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;
+}

web/src/aggregator/Result.tsx

@@ -1,11 +1,10 @@
 import moment from "moment";
 import { Accessor, Component, createResource, createSignal } from "solid-js";
 
-import { apiHost, ResultKeyVal, resultOrder, ResultOrderKeys } from "../consts";
-import { CityChart } from "./CityChart";
-
 import "../css/Result.css"
+import { apiHost, ResultKeyVal, resultOrder, ResultOrderKeys } from "../consts";
 import { SelectOrder } from "./SelectOrder";
+import { CityResult } from "./CityResult";
 
 export const Result: Component<{
     getCities: Accessor<Set<string>>,
@@ -15,9 +14,6 @@ export const Result: Component<{
     getKey: Accessor<string>,
 }> = (props) => {
     const cities = () => [...props.getCities()].join(",");
-    const citiesStr = () => [...props.getCities()].join(", ");
-    const startStr = () => moment(props.getStart()).format("YYYY/MM/DD, HH:mm");
-    const endStr = () => moment(props.getEnd()).format("YYYY/MM/DD, HH:mm");
     const queryStart = () => moment(props.getStart()).format("YYYYMMDD_HHmm");
     const queryEnd = () => moment(props.getEnd()).format("YYYYMMDD_HHmm"); 
     const [getTimestamp, setTimestamp] = createSignal<number>(0);
@@ -35,17 +31,12 @@ export const Result: Component<{
 
     return (
         <div>
-            <h3>Aggregate by:</h3>
             <input
                 type="button"
                 class="primary"
                 value="Query Data"
                 onClick={() => setTimestamp(Date.now())}
             />
-            <p>cities: { citiesStr() }</p>
-            <p>time range: { startStr() } - { endStr() }</p>
-            <p>weather field: { props.getField() }</p>
-            <p>aggregation field: { props.getKey() }</p>
             <div class="resultTitle">
                 <h3>Result:</h3>
                 <SelectOrder getter={getOrderKey} setter={setOrderKey} />
@@ -67,33 +58,9 @@ export const Result: Component<{
                     { Object.entries(queryResource())
                         .map(keyVal => [...keyVal] as ResultKeyVal)
                         .sort((a, b) => resultOrder[getOrderKey()](a, b))
-                        .map(cityData => <ExportCity city={cityData[0]} value={cityData[1]} />)
+                        .map(cityData => <CityResult city={cityData[0]} value={cityData[1]} />)
                     }</div>
             )}
         </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;
 }

web/src/aggregator/SelectField.tsx

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

web/src/aggregator/SelectKey.tsx

@@ -1,24 +1,14 @@
 import { Accessor, Component, Setter } from "solid-js";
-import { aggregateKey, weatherField } from "../consts";
 
-export const SelectAggregator: Component<{
+import { aggregateKey } from "../consts";
-    getField: Accessor<string>,
+
-    setField: Setter<string>,
+export const SelectKey: Component<{
     getKey: Accessor<string>,
     setKey: Setter<string>,
 }> = (props) => {
     return (
         <div>
-            <h3>Select field</h3>
+            <h3>Select key</h3>
-            <select onChange={(e) => props.setField(e.target.value)}>
-                { weatherField.map(field =>
-                    <option
-                        value={field}
-                        selected={field === props.getField() ? true : false}
-                    >{field}</option>
-                )}
-            </select>
-            <h3>Select aggregator</h3>
             <ul>
                 { aggregateKey.map(key => 
                     <label><li><input