add Graphs, simple version

This commit is contained in:
Sina Blattmann 2023-04-13 11:40:57 +02:00
parent cf883e97c3
commit e84c10607f
7 changed files with 615 additions and 173 deletions

Binary file not shown.

View File

@ -0,0 +1,492 @@
import { I_GraphData } from "../../util/types";
export type Datum = string | number | boolean | Array<string>;
type LogData = Record<string, Datum>;
export type TimeSeries = Record<number, LogData>;
export const timeSeries: TimeSeries = {
1673427378: {
"TruConvertAc/Ac/Current": 124,
"TruConvertAc/Ac/Voltage": 200,
"TruConvertAc/Ac/Phi": 2.89,
"TruConvertAc/Frequency": 2.89,
},
1674427380: {
"TruConvertAc/Ac/Current": 150,
"TruConvertAc/Ac/Voltage": 120,
"TruConvertAc/Ac/Phi": 3.21,
"TruConvertAc/Frequency": 2.41,
},
1675427382: {
"TruConvertAc/Ac/Current": 153,
"TruConvertAc/Ac/Voltage": 140,
"TruConvertAc/Ac/Phi": 3.9,
"TruConvertAc/Frequency": 4.41,
},
};
const exampleLogData: I_GraphData[] = [
{
TimeStamp: "1673427378",
Devices: [
{
Name: "TruConvertAc",
Type: "Inverter",
Ac: [
{
Current: 2.85,
Voltage: 236.2,
Phi: 2.896,
},
{
Current: 2.87,
Voltage: 234.5,
Phi: 2.793,
},
{
Current: 2.65,
Voltage: 240.6,
Phi: 2.941,
},
],
Frequency: 50.02,
Dc: {
Current: -2.254,
Voltage: 869,
},
Alarms: [],
MainState: "Operation",
},
{
Name: "TruConvertDc",
Type: "DcDc",
Dc: {
Current: -2.017,
Voltage: 868,
},
Dc48: {
Current: -31,
Voltage: 55.9,
},
Warnings: [],
Alarms: [],
"DC Power": -1751,
},
{
Name: "EmuMeter",
Type: "Grid",
Ac: [
{
Current: 15.658,
Voltage: 236.3,
Phi: 0.318,
},
{
Current: 14.052,
Voltage: 234.8,
Phi: 0.2,
},
{
Current: 9.046,
Voltage: 240.4,
Phi: 0.142,
},
],
Frequency: 50,
},
{
Name: "EmuMeter",
Type: "AcInToAcOut",
Ac: [
{
Current: 15.658,
Voltage: 236.3,
Phi: 0.318,
},
{
Current: 14.052,
Voltage: 234.8,
Phi: 0.2,
},
{
Current: 9.046,
Voltage: 240.4,
Phi: 0.142,
},
],
Frequency: 50,
},
{
Name: "AMPT",
Type: "PvOnDc",
Dc: {
Current: 0.229,
Voltage: 921.855,
},
},
{
Name: "48TL Battery",
Type: "Battery",
Dc48: {
Current: 38.56,
Voltage: 53.29,
},
Alarms: [],
Warnings: [],
Soc: 21.6,
HeaterOn: true,
EocReached: false,
BatteryCold: false,
Temperature: 265.3,
},
],
},
{
TimeStamp: "1673427380",
Devices: [
{
Name: "TruConvertAc",
Type: "Inverter",
Ac: [
{
Current: 3.01,
Voltage: 235.6,
Phi: 2.941,
},
{
Current: 3.04,
Voltage: 234.4,
Phi: 2.739,
},
{
Current: 2.48,
Voltage: 241.1,
Phi: 2.765,
},
],
Frequency: 50.02,
Dc: {
Current: -2.215,
Voltage: 868,
},
Alarms: [],
MainState: "Operation",
},
{
Name: "TruConvertDc",
Type: "DcDc",
Dc: {
Current: -1.953,
Voltage: 868,
},
Dc48: {
Current: -30,
Voltage: 55.9,
},
Warnings: [],
Alarms: [],
"DC Power": -1695,
},
{
Name: "EmuMeter",
Type: "Grid",
Ac: [
{
Current: 15.658,
Voltage: 236.3,
Phi: 0.318,
},
{
Current: 14.052,
Voltage: 234.8,
Phi: 0.2,
},
{
Current: 9.046,
Voltage: 240.4,
Phi: 0.142,
},
],
Frequency: 50,
},
{
Name: "EmuMeter",
Type: "AcInToAcOut",
Ac: [
{
Current: 15.658,
Voltage: 236.3,
Phi: 0.318,
},
{
Current: 14.052,
Voltage: 234.8,
Phi: 0.2,
},
{
Current: 9.046,
Voltage: 240.4,
Phi: 0.142,
},
],
Frequency: 50,
},
{
Name: "AMPT",
Type: "PvOnDc",
Dc: {
Current: 0.229,
Voltage: 921.855,
},
},
{
Name: "48TL Battery",
Type: "Battery",
Dc48: {
Current: 38.51,
Voltage: 53.29,
},
Alarms: [],
Warnings: [],
Soc: 21.6,
HeaterOn: true,
EocReached: false,
BatteryCold: false,
Temperature: 265.3,
},
],
},
{
TimeStamp: "1673427381",
Devices: [
{
Name: "TruConvertAc",
Type: "Inverter",
Ac: [
{
Current: 0.4,
Voltage: 237.2,
Phi: 1.4,
},
{
Current: 0.55,
Voltage: 235.6,
Phi: 1.551,
},
{
Current: 0.44,
Voltage: 241.7,
Phi: 1.501,
},
],
Frequency: 50.02,
Dc: {
Current: 0.007,
Voltage: 849,
},
Alarms: [],
MainState: "Operation",
},
{
Name: "TruConvertDc",
Type: "DcDc",
Dc: {
Current: 0.153,
Voltage: 849,
},
Dc48: {
Current: 3,
Voltage: 52.0,
},
Warnings: [],
Alarms: [],
"DC Power": 130,
},
{
Name: "EmuMeter",
Type: "Grid",
Ac: [
{
Current: 15.658,
Voltage: 236.3,
Phi: 0.318,
},
{
Current: 14.052,
Voltage: 234.8,
Phi: 0.2,
},
{
Current: 9.046,
Voltage: 240.4,
Phi: 0.142,
},
],
Frequency: 50,
},
{
Name: "EmuMeter",
Type: "AcInToAcOut",
Ac: [
{
Current: 15.658,
Voltage: 236.3,
Phi: 0.318,
},
{
Current: 14.052,
Voltage: 234.8,
Phi: 0.2,
},
{
Current: 9.046,
Voltage: 240.4,
Phi: 0.142,
},
],
Frequency: 50,
},
{
Name: "AMPT",
Type: "PvOnDc",
Dc: {
Current: 0.229,
Voltage: 921.855,
},
},
{
Name: "48TL Battery",
Type: "Battery",
Dc48: {
Current: 6.14,
Voltage: 51.96,
},
Alarms: [],
Warnings: [],
Soc: 21.6,
HeaterOn: true,
EocReached: false,
BatteryCold: false,
Temperature: 265.3,
},
],
},
{
TimeStamp: "1673427383",
Devices: [
{
Name: "TruConvertAc",
Type: "Inverter",
Ac: [
{
Current: 1.16,
Voltage: 237.7,
Phi: 0.376,
},
{
Current: 1.25,
Voltage: 236.0,
Phi: 0.707,
},
{
Current: 0.98,
Voltage: 242.1,
Phi: 0.246,
},
],
Frequency: 50.02,
Dc: {
Current: 0.847,
Voltage: 847,
},
Alarms: [],
MainState: "Operation",
},
{
Name: "TruConvertDc",
Type: "DcDc",
Dc: {
Current: 0.979,
Voltage: 846,
},
Dc48: {
Current: 18,
Voltage: 51.2,
},
Warnings: [],
Alarms: [],
"DC Power": 828,
},
{
Name: "EmuMeter",
Type: "Grid",
Ac: [
{
Current: 12.563,
Voltage: 237.2,
Phi: 0.376,
},
{
Current: 10.913,
Voltage: 235.6,
Phi: 0.246,
},
{
Current: 5.983,
Voltage: 241.2,
Phi: 0.142,
},
],
Frequency: 50,
},
{
Name: "EmuMeter",
Type: "AcInToAcOut",
Ac: [
{
Current: 12.563,
Voltage: 237.2,
Phi: 0.376,
},
{
Current: 10.913,
Voltage: 235.6,
Phi: 0.246,
},
{
Current: 5.983,
Voltage: 241.2,
Phi: 0.142,
},
],
Frequency: 50,
},
{
Name: "AMPT",
Type: "PvOnDc",
Dc: {
Current: 0.229,
Voltage: 921.855,
},
},
{
Name: "48TL Battery",
Type: "Battery",
Dc48: {
Current: -7.99,
Voltage: 51.31,
},
Alarms: [],
Warnings: [],
Soc: 21.6,
HeaterOn: true,
EocReached: false,
BatteryCold: false,
Temperature: 265.3,
},
],
},
];
export default exampleLogData;

View File

@ -2,7 +2,7 @@ import { Grid } from "@mui/material";
import { Routes, Route } from "react-router";
import Alarms from "./Alarms";
import InstallationTabs from "./InstallationTabs";
import Log from "./Log";
import Log from "./Log/Log";
import routes from "../../routes.json";
import InstallationContextProvider from "../Context/InstallationContextProvider";
import SearchSidebar from "../Layout/Search";

View File

@ -1,172 +0,0 @@
import React from "react";
import Plot from "react-plotly.js";
const Log = () => {
const foo = {
TimeStamp: "1676643900",
Devices: [
{
"TruConvertAc 205330741": {
Ac: {
L1: {
Current: 2.49,
Voltage: 239.4,
Phi: 0.200334842323119592691046359,
},
L2: {
Current: 2.65,
Voltage: 239.6,
Phi: 0.200334842323119592691046359,
},
L3: {
Current: 2.63,
Voltage: 239.8,
Phi: 0,
},
Frequency: 49.98,
},
Dc: {
Current: 2.249388753056234718826405868,
Voltage: 818,
Power: 1840.0,
},
Alarms: [],
},
},
{
"TruConvertDc 3214": {
Dc: {
Current: -2.1173594132029339853300733496,
Voltage: 818,
Power: -1732.0,
},
Dc48: {
Current: -30,
Voltage: 56.0,
Power: -1680.0,
},
Warnings: [],
Alarms: [],
},
},
{
"EmuMeter 123": {
Ac: {
L1: {
Current: 3.212,
Voltage: 239.4,
Phi: 1.1483422646081408626645746948,
},
L2: {
Current: -2.462,
Voltage: 238.9,
Phi: 1.8441893582623698418074097834,
},
L3: {
Current: 2.995,
Voltage: 238.8,
Phi: 0.1415394733244272187457893568,
},
Frequency: 49.9,
},
},
},
{
"EmuMeter 123": {
Ac: {
L1: {
Current: 3.212,
Voltage: 239.4,
Phi: 1.1483422646081408626645746948,
},
L2: {
Current: -2.462,
Voltage: 238.9,
Phi: 1.8441893582623698418074097834,
},
L3: {
Current: 2.995,
Voltage: 238.8,
Phi: 0.1415394733244272187457893568,
},
Frequency: 49.9,
},
},
},
{
Name: "AMPT",
Type: "PvOnDc",
"Current 1": 2.098,
"Current 2": 2.575,
"Voltage 1": 822.989,
"Voltage 2": 823.169,
"Power 1": 1726.630922,
"Power 2": 2119.660175,
},
{
Name: "48TL Battery",
Type: "Battery",
Dc48: {
Current: 14.17,
Voltage: 53.41,
Power: 756.8197,
},
Alarms: [],
Warnings: [],
Soc: 77.4,
HeaterOn: true,
EocReached: false,
BatteryCold: false,
Temperature: 265.4,
},
{
Name: "48TL Battery",
Type: "Battery",
Dc48: {
Current: 11.3,
Voltage: 53.4,
Power: 603.42,
},
Alarms: [],
Warnings: ["bit44:"],
Soc: 77.6,
HeaterOn: true,
EocReached: false,
BatteryCold: false,
Temperature: 264.9,
},
],
};
const flattenObject = (obj: any, prefix = "") =>
Object.keys(obj).reduce((previous: any, current: any) => {
const pre = prefix.length ? prefix + "/" : "";
if (Array.isArray(obj) || typeof obj === "string") {
return previous;
}
if (typeof obj[current] === "object") {
Object.assign(previous, flattenObject(obj[current], pre + current));
} else {
previous[pre + current] = obj[current];
}
return previous;
}, {});
return (
<Plot
data={[
{
x: [1, 2, 3],
y: [2, 6, 3],
type: "scatter",
mode: "lines+markers",
marker: { color: "red" },
},
{ type: "bar", x: [1, 2, 3], y: [2, 5, 3] },
]}
layout={{ width: 320, height: 240, title: "A Fancy Plot" }}
/>
);
};
export default Log;

View File

@ -0,0 +1,8 @@
import React from "react";
import ScalarGraph from "./ScalarGraph";
const Log = () => {
return <ScalarGraph />;
};
export default Log;

View File

@ -0,0 +1,80 @@
import Plot from "react-plotly.js";
import exampleLogData, {
Datum,
TimeSeries,
timeSeries,
} from "../ExampleLogData";
import { I_GraphData } from "../../../util/types";
const ScalarGraph = () => {
const transformToGraphData = (timeStampData: TimeSeries) => {
return Object.keys(timeSeries).reduce(
(timeSeriesAcc, timeSeriesKey) => {
const logData = timeStampData[parseInt(timeSeriesKey)];
const transformedTimeSeries = Object.keys(logData).reduce(
(logAcc, logDataKey) => {
return {
...logAcc,
[logDataKey]: {
[timeSeriesKey]: logData[logDataKey],
},
};
},
{} as any
);
Object.keys(transformedTimeSeries).forEach(
(transformedTimeSeriesKey) => {
const date = new Date(parseInt(timeSeriesKey));
if (timeSeriesAcc[transformedTimeSeriesKey]) {
timeSeriesAcc[transformedTimeSeriesKey] = {
x: [...timeSeriesAcc[transformedTimeSeriesKey].x, date],
y: [
...timeSeriesAcc[transformedTimeSeriesKey].y,
transformedTimeSeries[transformedTimeSeriesKey][
timeSeriesKey
],
],
};
} else {
timeSeriesAcc[transformedTimeSeriesKey] = {
x: [date],
y: [
transformedTimeSeries[transformedTimeSeriesKey][
timeSeriesKey
],
],
};
}
}
);
return timeSeriesAcc;
},
{} as {
[path: string]: { x: Date[]; y: number[] };
}
);
};
const renderGraphs = () => {
const coordinateTimeSeries = transformToGraphData(timeSeries);
return Object.keys(coordinateTimeSeries).map((path) => {
console.log(timeSeries[parseInt(path)]);
return (
<Plot
data={[
{
...coordinateTimeSeries[path],
type: "scatter",
mode: "lines+markers",
marker: { color: "red" },
},
]}
layout={{ width: 1000, height: 500, title: path }}
/>
);
});
};
return <>{renderGraphs()}</>;
};
export default ScalarGraph;

View File

@ -27,3 +27,37 @@ export interface I_Folder {
type: string;
children?: (I_Installation | I_Folder)[];
}
interface I_Ac {
Current: number;
Voltage: number;
Phi?: number;
}
interface I_Dc {
Current: number;
Voltage: number;
}
export interface I_Device {
Name: string;
Type: string;
Ac?: I_Ac[];
Dc?: I_Dc;
Dc48?: I_Dc;
Frequency?: number;
Alarms?: any[];
Warnings?: any[];
MainState?: string;
"DC Power"?: number;
Soc?: number;
HeaterOn?: boolean;
EocReached?: boolean;
BatteryCold?: boolean;
Temperature?: number;
}
export interface I_GraphData {
TimeStamp: string;
Devices: I_Device[];
}