working version with all the graphs with the same x axis
This commit is contained in:
Sina Blattmann
parent
d722f42d99
commit
06bc9b6b2e
|
|
@ -1,6 +1,11 @@
|
|||
import Plot from "react-plotly.js";
|
||||
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 { useContext, useEffect, useMemo, useState } from "react";
|
||||
import { BehaviorSubject, startWith, throttleTime, withLatestFrom } from "rxjs";
|
||||
|
|
@ -27,13 +32,14 @@ const NUMBER_OF_NODES = 100;
|
|||
|
||||
const ScalarGraph = () => {
|
||||
const timeRange = createTimes(
|
||||
UnixTime.fromTicks(1682085650).rangeBefore(TimeSpan.fromDays(4)),
|
||||
UnixTime.now() /* .fromTicks(1682085650) */
|
||||
.rangeBefore(TimeSpan.fromDays(4)),
|
||||
NUMBER_OF_NODES
|
||||
);
|
||||
const [timeSeries, setTimeSeries] = useState<RecordSeries>([]);
|
||||
const [range, setRange] = useState([
|
||||
timeRange[0].toDate(),
|
||||
timeRange[timeRange.length - 1].toDate(),
|
||||
timeRange[0].toDate().getTime(),
|
||||
timeRange[timeRange.length - 1].toDate().getTime(),
|
||||
]);
|
||||
const [uiRevision, setUiRevision] = useState(Math.random());
|
||||
const [plotTitles, setPlotTitles] = useState<string[]>([]);
|
||||
|
|
@ -193,67 +199,95 @@ const ScalarGraph = () => {
|
|||
};
|
||||
|
||||
const renderGraphs = () => {
|
||||
if (checkedToggles) {
|
||||
const coordinateTimeSeries = transformToGraphData(timeSeries);
|
||||
console.log("coordinateTimeSeries", coordinateTimeSeries, checkedToggles);
|
||||
return Object.keys(coordinateTimeSeries)
|
||||
.filter((path) => {
|
||||
return checkedToggles[path];
|
||||
})
|
||||
.map((path) => {
|
||||
const data = coordinateTimeSeries[path] ?? { x: [], y: [] };
|
||||
return (
|
||||
<Plot
|
||||
key={path}
|
||||
data={[
|
||||
{
|
||||
...data,
|
||||
type: "scatter",
|
||||
mode: "lines+markers",
|
||||
marker: { color: "red" },
|
||||
},
|
||||
]}
|
||||
layout={{
|
||||
width: 1000,
|
||||
height: 500,
|
||||
title: path,
|
||||
uirevision: uiRevision,
|
||||
xaxis: {
|
||||
autorange: false,
|
||||
range: range,
|
||||
type: "date",
|
||||
},
|
||||
}}
|
||||
config={{
|
||||
modeBarButtonsToRemove: [
|
||||
"lasso2d",
|
||||
"select2d",
|
||||
"pan2d",
|
||||
"autoScale2d",
|
||||
],
|
||||
}}
|
||||
onRelayout={(params) => {
|
||||
const xaxisRange0 = params["xaxis.range[0]"];
|
||||
const xaxisRange1 = params["xaxis.range[1]"];
|
||||
const coordinateTimeSeries = transformToGraphData(timeSeries);
|
||||
const graphCoordinates: GraphCoordinates[] = Object.keys(
|
||||
coordinateTimeSeries
|
||||
)
|
||||
.filter((path) => {
|
||||
return checkedToggles?.[path];
|
||||
})
|
||||
.map((path, i) => {
|
||||
return {
|
||||
...coordinateTimeSeries[path],
|
||||
xaxis: "x",
|
||||
yaxis: i === 0 ? "y" : "y" + (i + 1),
|
||||
type: "scatter",
|
||||
};
|
||||
});
|
||||
if (checkedToggles && graphCoordinates.length > 0) {
|
||||
const subplots = graphCoordinates.map((coordinate) => [
|
||||
(coordinate?.xaxis || "") + (coordinate.yaxis || ""),
|
||||
]);
|
||||
return (
|
||||
<Plot
|
||||
data={graphCoordinates}
|
||||
layout={{
|
||||
title: "Graphs",
|
||||
uirevision: uiRevision,
|
||||
showlegend: false,
|
||||
xaxis: {
|
||||
autorange: false,
|
||||
range: range,
|
||||
type: "date",
|
||||
mirror: "allticks",
|
||||
},
|
||||
grid: {
|
||||
subplots: subplots as any,
|
||||
xside: "top",
|
||||
ygap: 0.1,
|
||||
},
|
||||
height: graphCoordinates.length * 300,
|
||||
annotations: [
|
||||
{
|
||||
text: "X1/Y1 title",
|
||||
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) {
|
||||
setRange([new Date(xaxisRange0), new Date(xaxisRange1)]);
|
||||
setUiRevision(Math.random());
|
||||
const times = createTimes(
|
||||
TimeRange.fromTimes(
|
||||
UnixTime.fromDate(new Date(xaxisRange0)),
|
||||
UnixTime.fromDate(new Date(xaxisRange1))
|
||||
),
|
||||
NUMBER_OF_NODES
|
||||
);
|
||||
console.log("times", times);
|
||||
cache.getSeries(times);
|
||||
times$.next(times);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
if (xaxisRange0 && xaxisRange1) {
|
||||
setRange([
|
||||
new Date(xaxisRange0).getTime(),
|
||||
new Date(xaxisRange1).getTime(),
|
||||
]);
|
||||
setUiRevision(Math.random());
|
||||
const times = createTimes(
|
||||
TimeRange.fromTimes(
|
||||
UnixTime.fromDate(new Date(xaxisRange0)),
|
||||
UnixTime.fromDate(new Date(xaxisRange1))
|
||||
),
|
||||
NUMBER_OF_NODES
|
||||
);
|
||||
console.log("times", times);
|
||||
cache.getSeries(times);
|
||||
times$.next(times);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
return <>{renderGraphs()}</>;
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ export const mergeDeep = (...objects: any[]) => {
|
|||
export interface GraphCoordinates {
|
||||
x: Datum[] | Datum[][] | TypedArray;
|
||||
y: Datum[] | Datum[][] | TypedArray;
|
||||
xaxis?: string;
|
||||
yaxis?: string;
|
||||
}
|
||||
|
||||
export interface GraphData {
|
||||
|
|
|
|||
Loading…
Reference in New Issue