diff --git a/source/Panel/Statistics/Statistics.scss b/source/Panel/Statistics/Statistics.scss index 9e2b23e..692925c 100644 --- a/source/Panel/Statistics/Statistics.scss +++ b/source/Panel/Statistics/Statistics.scss @@ -8,7 +8,7 @@ div.statistics-panel { div.statistics-chart { box-sizing: border-box; padding-top: 10px; - max-width: 300px; + max-width: 400px; min-height: 100%; height: 100%; width: 100%; diff --git a/source/Panel/Statistics/Statistics.tsx b/source/Panel/Statistics/Statistics.tsx index 230940f..3a132c1 100644 --- a/source/Panel/Statistics/Statistics.tsx +++ b/source/Panel/Statistics/Statistics.tsx @@ -9,7 +9,7 @@ import { import { Bar, Line } from 'react-chartjs-2'; import { Theme } from "@Component/Theme/Theme"; import { Icon } from "@fluentui/react"; -import { Model } from "@Model/Model"; +import { IAnyObject, Model } from "@Model/Model"; import { Group } from "@Model/Group"; import { ActuatorModel } from "@Model/Actuator"; import { Message } from "@Input/Message/Message"; @@ -147,13 +147,18 @@ class Statistics extends Component | undefined; + let lastProcess: number | undefined; // 收集数据 clip.frames.forEach((frame) => { - labels.push(frame.process); + + const frameData = new Map(); + frame.commands.forEach((command) => { if (command.type !== "points") return; @@ -165,27 +170,71 @@ class Statistics extends Component Math.floor(v * 255)).join(",")})`; - if (findKey) { - findKey.data.push((command.data?.length ?? 0) / 3); - } else { findKey = {} as any; - findKey!.data = [(command.data?.length ?? 0) / 3]; findKey!.label = command.name ?? ""; - findKey!.backgroundColor = `rgb(${command.parameter?.color.map((v: number) => Math.floor(v * 255)).join(",")})`; + findKey!.backgroundColor = color; + findKey!.borderColor = color; findKey!.id = command.id; + findKey!.pointRadius = 0; + findKey!.borderWidth = 1.5; + findKey!.borderCapStyle = "round"; + findKey!.borderJoinStyle = "round"; + findKey!.pointHitRadius = 8; + + // 补充数据 + findKey!.data = new Array(frameLen).fill(0); + datasets.push(findKey!); } - }) + }); + + // 与上一帧数据进行对比 + const isSameData = datasets.every((value: IDataSet) => { + if (value.data[frameLen - 1] === frameData.get(value.id)) { + return true; + } else { + return false; + } + }); + + lastDataSet = frameData; + lastProcess = frame.process; + + // 如果是不同数据 纪录 + if (!isSameData) { + datasets.forEach((value: IDataSet) => { + value.data.push(frameData.get(value.id) ?? 0); + }); + frameLen ++; + labels.push(frame.process); + } }); + // 记录最后一帧数据 + if (lastDataSet && lastProcess !== labels[labels.length - 1]) { + datasets.forEach((value: IDataSet) => { + value.data.push(lastDataSet!.get(value.id) ?? 0); + }); + frameLen ++; + labels.push(lastProcess!); + } + if (datasets.length <= 0) { return } return ; }