From 3a4c76807446c3dbc5fb0c29c9ffab431d7ecaa8 Mon Sep 17 00:00:00 2001 From: Sina Blattmann Date: Tue, 13 Jun 2023 09:27:56 +0200 Subject: [PATCH] [WIP] adjustments to topology --- .../Installations/Log/DateRangePicker.tsx | 1 - .../src/components/Installations/Log/Log.tsx | 103 ++------------- .../Installations/Log/ScalarGraph.tsx | 3 +- .../Installations/Log/ToplogyBox.tsx | 22 +++- .../Installations/Log/TopologyColumn.tsx | 15 ++- .../Installations/Log/TopologyFlow.scss | 4 +- .../Installations/Log/TopologyFlow.tsx | 25 ++-- .../Installations/Log/TopologyView.tsx | 122 ++++++++++++++++++ typescript/Frontend/src/dataCache/data.ts | 34 +++-- typescript/Frontend/src/util/graph.util.tsx | 12 +- 10 files changed, 206 insertions(+), 135 deletions(-) create mode 100644 typescript/Frontend/src/components/Installations/Log/TopologyView.tsx diff --git a/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx b/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx index 0b46feb0d..1bdb2b9b2 100644 --- a/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx +++ b/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx @@ -4,7 +4,6 @@ import { UnixTime, TimeSpan } from "../../../dataCache/time"; import { createTimes } from "../../../util/graph.util"; import { DatePicker, - DateTimePicker, DateTimeValidationError, LocalizationProvider, } from "@mui/x-date-pickers"; diff --git a/typescript/Frontend/src/components/Installations/Log/Log.tsx b/typescript/Frontend/src/components/Installations/Log/Log.tsx index 63a924432..93517caab 100644 --- a/typescript/Frontend/src/components/Installations/Log/Log.tsx +++ b/typescript/Frontend/src/components/Installations/Log/Log.tsx @@ -1,101 +1,14 @@ import React from "react"; -import ScalarGraph, { testData } from "./ScalarGraph"; -import TopologyColumn from "./TopologyColumn"; -import { Box } from "@mui/material"; -import { extractTopologyValues, parseCsv } from "../../../util/graph.util"; -import { UnixTime } from "../../../dataCache/time"; +import ScalarGraph from "./ScalarGraph"; +import TopologyView from "./TopologyView"; const Log = () => { - const values = extractTopologyValues({ - time: UnixTime.fromTicks(192384239), - value: parseCsv(testData), - }); - - if (values) { - return ( - <> - -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- - - - ); - } - return null; + return ( + <> + + + + ); }; export default Log; diff --git a/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx b/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx index 15558d69b..0e1b888bd 100644 --- a/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx +++ b/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx @@ -641,6 +641,7 @@ const ScalarGraph = () => { layout={{ width: 1000, height: 500, + autosize: true, title: visibleGraphs[index], uirevision: uiRevision, xaxis: { @@ -781,7 +782,7 @@ const ScalarGraph = () => { .length } itemSize={() => 500} - width={1000} + width="100%" itemData={coordinateTimeSeries} > {Row} diff --git a/typescript/Frontend/src/components/Installations/Log/ToplogyBox.tsx b/typescript/Frontend/src/components/Installations/Log/ToplogyBox.tsx index 0e4fcf50d..bf506e71d 100644 --- a/typescript/Frontend/src/components/Installations/Log/ToplogyBox.tsx +++ b/typescript/Frontend/src/components/Installations/Log/ToplogyBox.tsx @@ -9,12 +9,14 @@ export type BoxData = { export type TopologyBoxProps = { title?: string; data?: BoxData[]; - connectionData?: BoxData[]; +}; + +const isInt = (value: number) => { + return value % 1 === 0; }; export const BOX_SIZE = 150; const TopologyBox = (props: TopologyBoxProps) => { - console.log("boxdata", props.data); return ( { }} > - {props.title} +

{props.title}

{props.data && props.data.map((el) => ( -

{`${el.label} ${el.values} ${el.unit}`}

+
+ {el.label} + {el.values.map((value) => { + return ( +

{`${ + !isInt(Number(value)) ? Number(value).toPrecision(8) : value + }${el.unit}`}

+ ); + })} +
))} diff --git a/typescript/Frontend/src/components/Installations/Log/TopologyColumn.tsx b/typescript/Frontend/src/components/Installations/Log/TopologyColumn.tsx index aa8e10a32..f1e36e13b 100644 --- a/typescript/Frontend/src/components/Installations/Log/TopologyColumn.tsx +++ b/typescript/Frontend/src/components/Installations/Log/TopologyColumn.tsx @@ -1,12 +1,16 @@ import { Box } from "@mui/material"; import TopologyBox, { TopologyBoxProps } from "./ToplogyBox"; -import TopologyFlow from "./TopologyFlow"; +import TopologyFlow, { TopologyFlowProps } from "./TopologyFlow"; type TopologyColumnProps = { topBox?: TopologyBoxProps; + topConnection?: TopologyFlowProps; centerBox?: TopologyBoxProps; + centerConnection?: TopologyFlowProps; bottomBox?: TopologyBoxProps; + bottomConnection?: TopologyFlowProps; }; + const TopologyColumn = (props: TopologyColumnProps) => { return ( {
diff --git a/typescript/Frontend/src/components/Installations/Log/TopologyFlow.scss b/typescript/Frontend/src/components/Installations/Log/TopologyFlow.scss index 150964dc3..f4eb526d9 100644 --- a/typescript/Frontend/src/components/Installations/Log/TopologyFlow.scss +++ b/typescript/Frontend/src/components/Installations/Log/TopologyFlow.scss @@ -9,8 +9,8 @@ .container { position: relative; - width: 150px; - height: 150px; + width: 130px; + height: 130px; overflow: hidden; } diff --git a/typescript/Frontend/src/components/Installations/Log/TopologyFlow.tsx b/typescript/Frontend/src/components/Installations/Log/TopologyFlow.tsx index 64e057a04..c186393f1 100644 --- a/typescript/Frontend/src/components/Installations/Log/TopologyFlow.tsx +++ b/typescript/Frontend/src/components/Installations/Log/TopologyFlow.tsx @@ -2,30 +2,35 @@ import { Box } from "@mui/material"; import { BOX_SIZE, BoxData } from "./ToplogyBox"; import "./TopologyFlow.scss"; -type TopologyFlowProps = { - orientation: "vertical" | "horizontal"; - amount: number; +export type TopologyFlowProps = { + orientation?: "vertical" | "horizontal"; + amount?: number; + direction?: "leftToRight" | "rightToLeft"; data?: BoxData[]; hidden?: boolean; }; const TopologyFlow = (props: TopologyFlowProps) => { - const length = Math.abs(props.amount * BOX_SIZE); - console.log("props", props.data); + const length = Math.abs((props.amount ?? 1) * (BOX_SIZE - 20)); return ( <> - {props.data?.map((value) => value.values)} + {props.data?.map((value) => value.values)}
diff --git a/typescript/Frontend/src/components/Installations/Log/TopologyView.tsx b/typescript/Frontend/src/components/Installations/Log/TopologyView.tsx new file mode 100644 index 000000000..174b26cf5 --- /dev/null +++ b/typescript/Frontend/src/components/Installations/Log/TopologyView.tsx @@ -0,0 +1,122 @@ +import { Box } from "@mui/material"; +import TopologyColumn from "./TopologyColumn"; +import { UnixTime } from "../../../dataCache/time"; +import { extractTopologyValues, parseCsv } from "../../../util/graph.util"; +import { testData } from "./ScalarGraph"; + +const TopologyView = () => { + const values = extractTopologyValues({ + time: UnixTime.fromTicks(192384239), + value: parseCsv(testData), + }); + console.log("csvValue", parseCsv(testData)); + if (values) { + return ( + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + ); + } + return null; +}; + +export default TopologyView; diff --git a/typescript/Frontend/src/dataCache/data.ts b/typescript/Frontend/src/dataCache/data.ts index ffe3f8a44..74ffdd1a4 100644 --- a/typescript/Frontend/src/dataCache/data.ts +++ b/typescript/Frontend/src/dataCache/data.ts @@ -1,21 +1,29 @@ import { Maybe } from "yup"; -import {Timestamped} from "./types"; +import { Timestamped } from "./types"; import { isDefined } from "./utils/maybe"; -export type DataRecord = Record +export type DataRecord = Record; -export type DataPoint = Timestamped> -export type RecordSeries = Array -export type PointSeries = Array>> -export type DataSeries = Array> +export type DataPoint = Timestamped>; +export type RecordSeries = Array; +export type PointSeries = Array>>; +export type DataSeries = Array>; -export function getPoints(recordSeries: RecordSeries, series: keyof DataRecord): PointSeries -{ - return recordSeries.map(p => ({time: p.time, value: isDefined(p.value) ? p.value[series] : undefined})) +export function getPoints( + recordSeries: RecordSeries, + series: keyof DataRecord +): PointSeries { + return recordSeries.map((p) => ({ + time: p.time, + value: isDefined(p.value) ? p.value[series] : undefined, + })); } -export function getData(recordSeries: RecordSeries, series: keyof DataRecord): DataSeries -{ - return recordSeries.map(p => (isDefined(p.value) ? p.value[series] : undefined)) +export function getData( + recordSeries: RecordSeries, + series: keyof DataRecord +): DataSeries { + return recordSeries.map((p) => + isDefined(p.value) ? p.value[series] : undefined + ); } - diff --git a/typescript/Frontend/src/util/graph.util.tsx b/typescript/Frontend/src/util/graph.util.tsx index 6a4e2882b..8a9686483 100644 --- a/typescript/Frontend/src/util/graph.util.tsx +++ b/typescript/Frontend/src/util/graph.util.tsx @@ -55,7 +55,7 @@ export const extractTopologyValues = ( const values = topologyValues[topologyKey].map( (topologyPath) => timeSeriesValue[topologyPath] ); - console.log("values", values); + console.log("values", topologyValues); return { ...acc, [topologyKey]: [ @@ -64,7 +64,7 @@ export const extractTopologyValues = ( topologyKey === "gridToAcIn" ? [values.reduce((acc, curr) => Number(acc) + Number(curr))] : values, - label: topologyKey.split("/").pop(), + label: topologyValues[topologyKey][0].split("/").pop(), unit: "V", } as BoxData, ], @@ -93,6 +93,14 @@ export const topologyValues: { [key: string]: string[] } = { battery: ["/Battery/Soc", "/Battery/Dc/Voltage"], }; +export interface CsvEntry { + value: string | number; + unit: string; +} +export interface Csv { + [key: string]: CsvEntry; +} + export const parseCsv = (text: string) => { console.log("split", text.split(/\r?\n/)); const y = text