Chart as common component, accepts signals instead of pure values

web/src/cities/result/CityResult.tsx

@@ -1,5 +1,6 @@
 import { Component } from "solid-js";
-import { CityChart } from "./CityChart";
+
+import { CityChart } from "../../components/chart/CityChart";
 import { DataQuery } from "../helpers";
 
 export const CityResult: Component<{ city: string, query: DataQuery, result: any }> = ({ city, query, result }) => {
@@ -8,7 +9,7 @@ export const CityResult: Component<{ city: string, query: DataQuery, result: any
             <h4>{ city }</h4>
             {
                 isDateNumber(result)
-                    ? <CityChart city={city} data={result} query={query}/>
+                    ? <CityChart city={()=>city} data={()=>result} query={()=>query}/>
                     : result
             }
         </div>

web/src/cities/result/Result.tsx

@@ -3,7 +3,7 @@ import { Component, createSignal, Resource } from "solid-js";
 import "../../css/Result.css"
 import { ResultKeyVal, resultOrder, ResultOrderKeys } from "../../consts";
 import { SelectOrder } from "../SelectOrder";
-import { CityResult } from "../chart/CityResult";
+import { CityResult } from "./CityResult";
 import { QueryResult } from "../helpers";
 import { MapView } from "../map/MapView";
 

web/src/components/chart/CityChart.tsx

@@ -1,9 +1,9 @@
 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";
+import { DataQuery, formatDateString } from "../../cities/helpers";
 
 export const CityChart: Component<{
     city: () => string;

web/src/components/chart/CityLargeChart.tsx

@@ -1,9 +1,9 @@
 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";
+import { DataQuery, formatDateString } from "../../cities/helpers";
 
 export const CityLargeChart: Component<{
     city: () => string;

web/src/station/Result.tsx

@@ -1,10 +1,10 @@
 import { Accessor, Component, createResource } from "solid-js";
 import { apiHost } from "../consts";
 import moment from "moment";
-import { CityChart } from "../cities/chart/CityChart";
+import { CityChart } from "../components/chart/CityChart";
 
 export const Result: Component<{
-    getCity: Accessor<string|undefined>,
+    getCity: Accessor<string | undefined>,
     getField: Accessor<string>,
     getStart: Accessor<Date>,
     getEnd: Accessor<Date>,
@@ -12,10 +12,10 @@ export const Result: Component<{
     const queryStart = () => moment(props.getStart()).format("YYYYMMDD_HHmm");
     const queryEnd = () => moment(props.getEnd()).format("YYYYMMDD_HHmm");
 
-    const fetchList = async (city: string | undefined) => {
+    const fetchList = async ([city, field]: [string | undefined, string]) => {
         if (city === undefined) return undefined;
         await new Promise(resolve => setTimeout(resolve, 500));
-        const response = await fetch(`${apiHost}/api/query/city/${props.getCity()}/${queryStart()}-${queryEnd()}/hour/${props.getField()}/list`);
+        const response = await fetch(`${apiHost}/api/query/city/${city}/${queryStart()}-${queryEnd()}/hour/${field}/list`);
         const json = await response.json();
         return json;
     }
@@ -28,7 +28,8 @@ export const Result: Component<{
         return json;
     }
 
-    const [listResource] = createResource(props.getCity, fetchList);
+    const cityFieldSignal = (): [string | undefined, string] => [props.getCity(), props.getField()];
+    const [listResource] = createResource(cityFieldSignal, fetchList);
     const [meteoResource] = createResource(props.getCity, fetchMeteo);
 
     return (
@@ -50,7 +51,7 @@ export const Result: Component<{
             { listResource() && listResource() instanceof Error &&
                 <div>{ listResource().message }</div>
             }
-            { listResource() && props.getCity() &&
+            { listResource() && props.getCity() && !listResource.loading &&
                 <div>
                     <h3>{ props.getCity() }</h3>
                     <CityChart
@@ -74,15 +75,22 @@ export const Result: Component<{
             { meteoResource() && meteoResource() instanceof Error &&
                 <div>{ meteoResource().message }</div>
             }
-            { meteoResource() && props.getCity() &&
+            { meteoResource() && props.getCity() && !meteoResource.loading &&
                 <ul>
                     { Object.entries(meteoResource())
                     .sort((a, b) => a[0] > b[0] ? 1 : -1)
                     .map(([key, value]: any) =>
-                        <li>{key}: {value}</li>
+                        <li>{key}: {toStringFloat(value)}</li>
                     )}
                 </ul>
             }
         </div>
     );
 }
+
+function toStringFloat(val: any): string {
+    const numVal = parseFloat(val);
+    if (isNaN(numVal)) return "";
+
+    return (Math.round(numVal * 10) / 10) + "";
+}