Fix styling of home component (focus on responsiveness)

Fix global-context environment loading Increase max history data default to 34560 data points, i.e. 12h (w/ default settings at client) Pump version to 1.1.2
DarwinsBuddy · Nov 10, 2021 · 73bed46 · 73bed46
1 parent e1acfa5
commit 73bed46
Show file tree

Hide file tree

Showing 14 changed files with 126 additions and 89 deletions.
diff --git a/setup.py b/setup.py
@@ -59,7 +59,7 @@ def run(self):
     author="Christoph Spörk",
     author_email="christoph.spoerk@gmail.com",
     platforms="any",
-    version='1.1.1',
+    version='1.1.2',
     packages=find_packages(
         include=[f'{MODULE}', f'{MODULE}.*']
     ),

diff --git a/tank/data/tank.conf b/tank/data/tank.conf
@@ -9,4 +9,4 @@ broadcasting_interval: 5
 namespace: /data
 
 [Storage]
-max_history_data: 720
+max_history_data: 34560
diff --git a/tank/data/web/.env b/tank/data/web/.env
@@ -1 +1,3 @@
-VITE_BACKEND="http://localhost:8080"
+VITE_BACKEND="http://localhost:8080"
+VITE_MAX_HEIGHT=2
+VITE_MIN_HEIGHT=0
diff --git a/tank/data/web/.env.development b/tank/data/web/.env.development
@@ -1,3 +1,3 @@
 VITE_BACKEND=http://localhost:8080
-MAX_HEIGHT=1.7
-MIN_HEIGHT=0.3
+VITE_MAX_HEIGHT=1.65
+VITE_MIN_HEIGHT=0.1
diff --git a/tank/data/web/.env.production b/tank/data/web/.env.production
@@ -1,3 +1,3 @@
 VITE_BACKEND=
-MAX_HEIGHT=1.7
-MIN_HEIGHT=0.3
+VITE_MAX_HEIGHT=1.65
+VITE_MIN_HEIGHT=0.1
diff --git a/tank/data/web/src/app.tsx b/tank/data/web/src/app.tsx
@@ -3,6 +3,7 @@ import { Route, Router } from 'preact-router';
 
 import Home from './routes/home';
 import NotFoundPage from './routes/notfound';
+import { jsx } from '@emotion/react';
 import Header from './components/header';
 import { ConfigContext, config, SocketContext, socket } from './components/context/global-context';
 

diff --git a/tank/data/web/src/components/context/global-context.ts b/tank/data/web/src/components/context/global-context.ts
@@ -7,19 +7,11 @@ export type Config = {
     HISTORY_LIMIT: number;
     OUTDATED_THRESHOLD: number;
     NAMESPACE: string;
-    MAX_HEIGHT: number;
-    MIN_HEIGHT: number;
+    MAX_HEIGHT: () => number;
+    MIN_HEIGHT: () => number;
     LOCALE: string;
 }
 
-function configGet<T>(name: string, def: T): T {
-    if(!!import.meta.env[name]) {
-        return import.meta.env[name] as unknown as T;
-    } else {
-        return def;
-    }
-}
-
 export const config: Config = {
     backend: () => {
         if(!!import.meta.env.VITE_BACKEND && !import.meta.env.PROD) {
@@ -32,8 +24,20 @@ export const config: Config = {
     HISTORY_LIMIT: 100,
     OUTDATED_THRESHOLD: 60,
     NAMESPACE: 'data',
-    MAX_HEIGHT: configGet<number>('MAX_HEIGHT', 1.8),
-    MIN_HEIGHT: configGet<number>('MIN_HEIGHT', 0.3),
+    MAX_HEIGHT: () => {
+        if(!!import.meta.env.VITE_MAX_HEIGHT) {
+            return +import.meta.env.VITE_MAX_HEIGHT;
+        } else {
+            return 1.8;
+        }
+    },
+    MIN_HEIGHT: () => {
+        if(!!import.meta.env.VITE_MIN_HEIGHT) {
+            return +import.meta.env.VITE_MIN_HEIGHT;
+        } else {
+            return 0.2;
+        }
+    },
     LOCALE: 'de-AT'
 };
 

diff --git a/tank/data/web/src/components/header/style.ts b/tank/data/web/src/components/header/style.ts
@@ -1,12 +1,13 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react'
+import { g } from '../../style/global'
 
 export const header = css`
 	position: fixed;
 	left: 0;
 	top: 0;
 	width: 100%;
-	height: 56px;
+	height: ${g.header.height};
 	padding: 0;
 	background: #673AB7;
 	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
@@ -16,8 +17,8 @@ export const header = css`
 		float: left;
 		margin: 0;
 		padding: 0 15px;
-		font-size: 24px;
-		line-height: 56px;
+		font-size: ${g.header.font};
+		line-height: ${g.header.height};
 		font-weight: 400;
 		color: #FFF;
 	}
@@ -29,8 +30,8 @@ export const header = css`
 
 	nav a {
 		display: inline-block;
-		height: 56px;
-		line-height: 56px;
+		height: ${g.header.height};
+		line-height: ${g.header.height};
 		padding: 0 15px;
 		min-width: 50px;
 		text-align: center;

diff --git a/tank/data/web/src/components/history-chart/index.tsx b/tank/data/web/src/components/history-chart/index.tsx
@@ -5,10 +5,9 @@ import { DepthMeasurement, initialDepthMeasurement } from '../../model/depth-mea
 import { Config, ConfigContext, SocketContext } from '../context/global-context';
 import { Series, toSeriesPoint } from './model';
 import { jsx } from '@emotion/react';
-import { centered, chart, chartContainer } from './style';
+import { centered, chart } from './style';
 import { FunctionalComponent, h } from 'preact';
 import { Socket } from 'socket.io-client';
-import { SVGProps } from 'react';
 
 interface HistoryChartProperties {
     showChart?: boolean;
@@ -23,7 +22,7 @@ const HistoryChart: FunctionalComponent<HistoryChartProperties> = (props: Histor
     const [chartData, setChartData] = useState<Series>(
         {
             label: null,
-            data: [toSeriesPoint(initialDepthMeasurement, config.LOCALE, config.MAX_HEIGHT)]
+            data: [toSeriesPoint(initialDepthMeasurement, config.LOCALE, config.MAX_HEIGHT())]
         }
     );
 
@@ -46,23 +45,18 @@ const HistoryChart: FunctionalComponent<HistoryChartProperties> = (props: Histor
 
     function renderChart(series: Series) {
 
-        return (
-            <div css={chartContainer}>
-                <div css={chart}>
-                    <ResponsiveContainer width="90%" height="80%">
-                        <LineChart data={series.data} margin={{ top: 5, right: 0, bottom: 150, left: 0 }}>
-                            <Line type="monotone" dataKey="depth" stroke="#8884d8" dot={{r: 1}} animationDuration={50} />
-                            <ReferenceLine y={config.MAX_HEIGHT} label="Full" stroke="red" strokeDasharray="4 3" />
-                            <ReferenceLine y={config.MIN_HEIGHT} label="Empty" stroke="green" strokeDasharray="4 3" />
-                            <CartesianGrid stroke="#ccc" strokeDasharray="1 1" />
-                            <XAxis dataKey="date" textAnchor="end" angle={-45} tickFormatter={formatXAxis}/>
-                            <YAxis dataKey="depth" textAnchor="end" domain={[0, config.MAX_HEIGHT+0.2]} label={(<Text x={0} y={0} dx={20}dy={150} offset={0} angle={-90}>Water level (m)</Text>)} />
-                            <Tooltip/>
-                        </LineChart>
-                    </ResponsiveContainer>
-                </div>
-            </div>
-        );
+        return <ResponsiveContainer>
+                    <LineChart data={series.data} margin={{ top: 0, right: 15, bottom: 35, left: -20 }}>
+                        <Line type="monotone" dataKey="depth" stroke="#8884d8" dot={{r: 1}} animationDuration={50} />
+                        <ReferenceLine y={config.MAX_HEIGHT()} label={`Full ${config.MAX_HEIGHT()}m`} stroke="red" strokeDasharray="4 3" />
+                        <ReferenceLine y={config.MIN_HEIGHT()} label={`Empty ${config.MIN_HEIGHT()}m`} stroke="green" strokeDasharray="4 3" />
+                        <CartesianGrid stroke="#ccc" strokeDasharray="1 1" />
+                        <XAxis dataKey="date" textAnchor="end" angle={-45} tickFormatter={formatXAxis}/>
+                        <YAxis dataKey="depth" textAnchor="end" domain={[0, config.MAX_HEIGHT()+0.4]} label={(<Text x={0} y={0} dx={45} dy={15} offset={0} angle={0}>water level [m]</Text>)} />
+                        <Tooltip/>
+                    </LineChart>
+                </ResponsiveContainer>
+        ;
     }
 
     useEffect(() => {
@@ -77,7 +71,7 @@ const HistoryChart: FunctionalComponent<HistoryChartProperties> = (props: Histor
             setHistory(response.history);
             setChartData({
                 label: DEPTH_SERIES_LABEL,
-                data: response.history.map(m => toSeriesPoint(m, config.LOCALE, config.MAX_HEIGHT))
+                data: response.history.map(m => toSeriesPoint(m, config.LOCALE, config.MAX_HEIGHT()))
             });
             console.log(`Got ${response.history.length} entries`);
         });
@@ -91,17 +85,17 @@ const HistoryChart: FunctionalComponent<HistoryChartProperties> = (props: Histor
         }
         // subscribe to socket events
         socket.on("depth", (measurement: DepthMeasurement) => {
-            const currentMeasurement = toSeriesPoint(measurement, config.LOCALE, config.MAX_HEIGHT);
+            const currentMeasurement = toSeriesPoint(measurement, config.LOCALE, config.MAX_HEIGHT());
             setChartData({
                 label: DEPTH_SERIES_LABEL,
                 data: [...chartData.data, currentMeasurement]
             })
         }); 
         return onDismount;
-      }, [chartData.data, config.LOCALE, config.MAX_HEIGHT, socket]);
+      }, [chartData.data, config.LOCALE, config.MAX_HEIGHT(), socket]);
 
     return (
-        <div>
+        <div css={chart}>
             {!props.showChart && renderHistoryEvents(history)}
             {props.showChart && chartData.label !== null && renderChart(chartData)}
             {props.showChart && chartData.label == null && 

diff --git a/tank/data/web/src/components/history-chart/style.ts b/tank/data/web/src/components/history-chart/style.ts
@@ -1,14 +1,8 @@
 import { css } from "@emotion/react";
 
-export const chartContainer = css`
-    position: absolute;
-    width: 90%;
-    height: 75%;
-`;
 export const chart = css`
     width: 100%;
     height: 100%;
-    position: relative;
 `;
 
 export const centered = css`

diff --git a/tank/data/web/src/routes/home/index.tsx b/tank/data/web/src/routes/home/index.tsx
@@ -7,13 +7,16 @@ import {
   SocketContext,
 } from "../../components/context/global-context";
 import HistoryChart from "../../components/history-chart";
-import { toSeriesPoint, utcStringToLocalString } from "../../components/history-chart/model";
+import {
+  toSeriesPoint,
+  utcStringToLocalString,
+} from "../../components/history-chart/model";
 import {
   DepthMeasurement,
+  initialMeasurements,
   MeasurementState,
-  initialMeasurements
 } from "../../model/depth-measurement";
-import { home, title, currently, px1, warning } from "./style";
+import { currently, home, info, warning, ws } from "./style";
 
 const Home: FunctionalComponent = () => {
   const socket = useContext(SocketContext);
@@ -23,7 +26,9 @@ const Home: FunctionalComponent = () => {
   function getDiff(current: DepthMeasurement | null) {
     if (!!current?.date) {
       const now = new Date();
-      var nowUtc = new Date(now.getTime() + now.getTimezoneOffset() * 60000).getTime();
+      var nowUtc = new Date(
+        now.getTime() + now.getTimezoneOffset() * 60000
+      ).getTime();
       return nowUtc - Date.parse(current.date);
     }
     return 0;
@@ -40,7 +45,9 @@ const Home: FunctionalComponent = () => {
     const hours = Math.floor(minutes / 60);
     const h = hours % 24;
     const days = Math.floor(hours / 24);
-    return `${days > 0 ? days+" d" : ''} ${h > 0 ? h+" h" : ''} ${min > 0 ? min+" min" : ''} ${sec > 0 ? sec+" sec" : ''}`;
+    return `${days > 0 ? days + " d" : ""} ${h > 0 ? h + " h" : ""} ${
+      min > 0 ? min + " min" : ""
+    } ${sec > 0 ? sec + " sec" : ""}`;
   }
 
   useEffect(() => {
@@ -57,10 +64,11 @@ const Home: FunctionalComponent = () => {
 
     // subscribe to socket events
     socket.on("depth", (measurement: DepthMeasurement) => {
-      setMsrmt({...msrmt,
+      setMsrmt({
+        ...msrmt,
         last: msrmt.current,
         current: measurement,
-        diff: getDiff(measurement) / 1000
+        diff: getDiff(measurement) / 1000,
       });
     });
 
@@ -69,39 +77,42 @@ const Home: FunctionalComponent = () => {
 
   return (
     <div css={home}>
-      <div css={currently}>
+      <div css={info}>
+        <div css={currently}>
           {!!msrmt.current?.depth && (
-              <div>
-                {utcStringToLocalString(config.LOCALE, msrmt.current?.date) || "N/A"}
-              </div>
+            <div>
+              {utcStringToLocalString(config.LOCALE, msrmt.current?.date) ||
+                "N/A"}
+            </div>
           )}
-          {renderDepth(msrmt)}
-      </div>
-      <div css={warning}>
-        {signalMsg(msrmt)}
+          {!msrmt.current?.depth && <div>n/a</div>}
+        </div>
+        <div css={currently}>{renderDepth(msrmt)}</div>
+        <div css={warning}>{signalMsg(msrmt)}</div>
       </div>
-      <div css={title}>History</div>
       <HistoryChart showChart />
     </div>
   );
 
   function renderDepth(m: MeasurementState): JSX.Element {
-    if(m.current?.depth) {
-      var d = toSeriesPoint(m.current, config.LOCALE, config.MAX_HEIGHT)?.depth;
+    if (m.current?.depth) {
+      var d = toSeriesPoint(m.current, config.LOCALE, config.MAX_HEIGHT())?.depth;
       var roundedD = Math.round((d + Number.EPSILON) * 100) / 100;
-      return <div css={px1}>{roundedD+" m"}</div>;
+      return <div css={ws.nowrap}>{roundedD + " m"}</div>;
     }
-    return <div>no data</div>;
+    return <div css={ws.nowrap}>n/a</div>;
   }
 
   function signalMsg(m: MeasurementState): JSX.Element {
     if (m?.current?.depth) {
       if (isOutDated(msrmt)) {
-          return <div>Last signal {toTimeString(msrmt.diff)} ago</div>;
+        return (
+          <div css={ws.nowrap}>Last signal {toTimeString(msrmt.diff)} ago</div>
+        );
       }
-      return <div>LIVE</div>;
+      return <div css={ws.nowrap}>• LIVE</div>;
     }
-    return <div>no data</div>;
+    return <div css={ws.nowrap}>Loading</div>;
   }
 };