Innovenergy
/
Innovenergy_trunk
2
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

working version with all the graphs with the same x axis

This commit is contained in:
Sina Blattmann 2023-05-10 10:40:08 +02:00
parent d722f42d99
commit 06bc9b6b2e
2 changed files with 100 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx
View File

@ -1,6 +1,11 @@
import Plot from "react-plotly.js"; import Plot from "react-plotly.js";
import { RecordSeries } from "../../../dataCache/data"; import { RecordSeries } from "../../../dataCache/data";
import { GraphData, mergeDeep, parseCsv } from "../../../util/graph.util"; import {
GraphCoordinates,
GraphData,
mergeDeep,
parseCsv,
} from "../../../util/graph.util";
import { TimeRange, TimeSpan, UnixTime } from "../../../dataCache/time"; import { TimeRange, TimeSpan, UnixTime } from "../../../dataCache/time";
import { useContext, useEffect, useMemo, useState } from "react"; import { useContext, useEffect, useMemo, useState } from "react";
import { BehaviorSubject, startWith, throttleTime, withLatestFrom } from "rxjs"; import { BehaviorSubject, startWith, throttleTime, withLatestFrom } from "rxjs";
@ -27,13 +32,14 @@ const NUMBER_OF_NODES = 100;
const ScalarGraph = () => { const ScalarGraph = () => {
const timeRange = createTimes( const timeRange = createTimes(
UnixTime.fromTicks(1682085650).rangeBefore(TimeSpan.fromDays(4)), UnixTime.now() /* .fromTicks(1682085650) */
.rangeBefore(TimeSpan.fromDays(4)),
NUMBER_OF_NODES NUMBER_OF_NODES
); );
const [timeSeries, setTimeSeries] = useState<RecordSeries>([]); const [timeSeries, setTimeSeries] = useState<RecordSeries>([]);
const [range, setRange] = useState([ const [range, setRange] = useState([
timeRange[0].toDate(), timeRange[0].toDate().getTime(),
timeRange[timeRange.length - 1].toDate(), timeRange[timeRange.length - 1].toDate().getTime(),
]); ]);
const [uiRevision, setUiRevision] = useState(Math.random()); const [uiRevision, setUiRevision] = useState(Math.random());
const [plotTitles, setPlotTitles] = useState<string[]>([]); const [plotTitles, setPlotTitles] = useState<string[]>([]);
@ -193,67 +199,95 @@ const ScalarGraph = () => {
}; };
const renderGraphs = () => { const renderGraphs = () => {
if (checkedToggles) { const coordinateTimeSeries = transformToGraphData(timeSeries);
const coordinateTimeSeries = transformToGraphData(timeSeries); const graphCoordinates: GraphCoordinates[] = Object.keys(
console.log("coordinateTimeSeries", coordinateTimeSeries, checkedToggles); coordinateTimeSeries
return Object.keys(coordinateTimeSeries) )
.filter((path) => { .filter((path) => {
return checkedToggles[path]; return checkedToggles?.[path];
}) })
.map((path) => { .map((path, i) => {
const data = coordinateTimeSeries[path] ?? { x: [], y: [] }; return {
return ( ...coordinateTimeSeries[path],
<Plot xaxis: "x",
key={path} yaxis: i === 0 ? "y" : "y" + (i + 1),
data={[ type: "scatter",
{ };
...data, });
type: "scatter", if (checkedToggles && graphCoordinates.length > 0) {
mode: "lines+markers", const subplots = graphCoordinates.map((coordinate) => [
marker: { color: "red" }, (coordinate?.xaxis || "") + (coordinate.yaxis || ""),
}, ]);
]} return (
layout={{ <Plot
width: 1000, data={graphCoordinates}
height: 500, layout={{
title: path, title: "Graphs",
uirevision: uiRevision, uirevision: uiRevision,
xaxis: { showlegend: false,
autorange: false, xaxis: {
range: range, autorange: false,
type: "date", range: range,
}, type: "date",
}} mirror: "allticks",
config={{ },
modeBarButtonsToRemove: [ grid: {
"lasso2d", subplots: subplots as any,
"select2d", xside: "top",
"pan2d", ygap: 0.1,
"autoScale2d", },
], height: graphCoordinates.length * 300,
}} annotations: [
onRelayout={(params) => { {
const xaxisRange0 = params["xaxis.range[0]"]; text: "X1/Y1 title",
const xaxisRange1 = params["xaxis.range[1]"]; showarrow: false,
x: 0,
y: 1,
yref: "paper",
yanchor: "bottom",
},
{
text: "X2/Y2 title",
showarrow: false,
x: 0,
y: 1,
yref: "paper",
yanchor: "bottom",
},
],
}}
config={{
modeBarButtonsToRemove: [
"lasso2d",
"select2d",
"pan2d",
"autoScale2d",
],
}}
onRelayout={(params) => {
const xaxisRange0 = params["xaxis.range[0]"];
const xaxisRange1 = params["xaxis.range[1]"];
if (xaxisRange0 && xaxisRange1) { if (xaxisRange0 && xaxisRange1) {
setRange([new Date(xaxisRange0), new Date(xaxisRange1)]); setRange([
setUiRevision(Math.random()); new Date(xaxisRange0).getTime(),
const times = createTimes( new Date(xaxisRange1).getTime(),
TimeRange.fromTimes( ]);
UnixTime.fromDate(new Date(xaxisRange0)), setUiRevision(Math.random());
UnixTime.fromDate(new Date(xaxisRange1)) const times = createTimes(
), TimeRange.fromTimes(
NUMBER_OF_NODES UnixTime.fromDate(new Date(xaxisRange0)),
); UnixTime.fromDate(new Date(xaxisRange1))
console.log("times", times); ),
cache.getSeries(times); NUMBER_OF_NODES
times$.next(times); );
} console.log("times", times);
}} cache.getSeries(times);
/> times$.next(times);
); }
}); }}
/>
);
} }
}; };
return <>{renderGraphs()}</>; return <>{renderGraphs()}</>;

2
typescript/Frontend/src/util/graph.util.tsx
View File

@ -25,6 +25,8 @@ export const mergeDeep = (...objects: any[]) => {
export interface GraphCoordinates { export interface GraphCoordinates {
x: Datum[] | Datum[][] | TypedArray; x: Datum[] | Datum[][] | TypedArray;
y: Datum[] | Datum[][] | TypedArray; y: Datum[] | Datum[][] | TypedArray;
xaxis?: string;
yaxis?: string;
} }
export interface GraphData { export interface GraphData {