@@ -222,11 +249,12 @@ const Log = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loadedLo
{logs || !!loadedLogs.length
?
-
:
{
+ const { sm } = useBreakpoint();
+ const hsl = useCallback((fieldIndex: number, allFields: number) => {
+ const [hue] = colorHsl(0, allFields - 1, fieldIndex);
+ return `hsl(${hue}, 90%, 50%)`;
+ }, []);
+ const [options1, setOptions1] = useState();
+ const [plotData1, setPlotData1] = useState();
+ const [options2, setOptions2] = useState();
+ const [plotData2, setPlotData2] = useState();
+
+ const generateFieldsToPlot = useCallback((selectedFields: SelectedField[]) => {
+ const temp: { [index: string]: PlottableField } = {};
+
+ data.forEach((entry) => {
+ selectedFields.forEach(({ label, scale, transform, units, format }) => {
+ const value = entry[label];
+
+ if (!temp[label]) {
+ temp[label] = {
+ min: 0,
+ max: 0,
+ scale: (scale || 1) as number,
+ transform: (transform || 0) as number,
+ units: units || '',
+ format: format || '',
+ };
+ }
+
+ if (value > temp[label].max) {
+ temp[label].max = entry[label] as number;
+ }
+
+ if (value < temp[label].min) {
+ temp[label].min = entry[label] as number;
+ }
+ });
+ });
+
+ return temp;
+ }, [data]);
+
+ const generatePlotConfig = useCallback((fieldsToPlot: { [index: string]: PlottableField }, selectedFieldsLength: number, plotSyncKey: string) => {
+ const dataSeries: uPlot.Series[] = [];
+ const xData: number[] = [];
+ const yData: (number | null)[][] = [];
+
+ Object.keys(fieldsToPlot).forEach((label, index) => {
+ const field = fieldsToPlot[label];
+
+ dataSeries.push({
+ label: field.units ? `${label} (${field.units})` : label,
+ points: { show: false },
+ stroke: hsl(index, selectedFieldsLength),
+ scale: field.units,
+ width: 2,
+ value: (_self, val) => isNumber(val) ? val.toFixed(2) : 0,
+ });
+
+ data.forEach((entry) => {
+ if (entry.type !== 'marker') {
+ xData.push(entry.Time as number);
+
+ let value = entry[label];
+
+ if (value !== undefined) {
+ value = (value as number * field.scale) + field.transform;
+ }
+
+ if (!yData[index]) {
+ yData[index] = [];
+ }
+
+ yData[index].push(value);
+ }
+ });
+ });
+
+ return {
+ xData,
+ yData,
+ options: {
+ width,
+ height,
+ scales: { x: { time: false } },
+ series: [
+ { label: 'Time (s)' },
+ ...dataSeries,
+ ],
+ axes: [
+ {
+ stroke: Colors.TEXT,
+ grid: { stroke: Colors.MAIN_LIGHT },
+ },
+ ],
+ cursor: {
+ drag: { y: false },
+ sync: {
+ key: plotSyncKey,
+ },
+ },
+ plugins: [touchZoomPlugin()],
+ },
+ };
+ }, [data, height, hsl, width]);
+
+ useEffect(() => {
+ const plotSync = uPlot.sync('logs');
+
+ const result1 = generatePlotConfig(generateFieldsToPlot(selectedFields1), selectedFields1.length, plotSync.key);
+ setOptions1(result1.options);
+ setPlotData1([result1.xData, ...result1.yData]);
+
+ const result2 = generatePlotConfig(generateFieldsToPlot(selectedFields2), selectedFields2.length, plotSync.key);
+ setOptions2(result2.options);
+ setPlotData2([result2.xData, ...result2.yData]);
+
+ }, [data, hsl, width, height, sm, generatePlotConfig, generateFieldsToPlot, selectedFields1, selectedFields2]);
+
+ if (!sm) {
+ return ;
+ }
+
+ return (
+
+
+
+
+ );
+};
+
+export default LogCanvas2;
diff --git a/src/components/TriggerLog/ToothCanvas.tsx b/src/components/TriggerLog/ToothCanvas.tsx
index dd4ec4f..51d7c3f 100644
--- a/src/components/TriggerLog/ToothCanvas.tsx
+++ b/src/components/TriggerLog/ToothCanvas.tsx
@@ -5,6 +5,7 @@ import {
import { Grid } from 'antd';
import UplotReact from 'uplot-react';
import uPlot from 'uplot';
+import touchZoomPlugin from '../../utils/uPlot/touchZoomPlugin';
import LandscapeNotice from '../Dialog/LandscapeNotice';
import {
ToothLogEntry,
@@ -12,7 +13,6 @@ import {
} from '../../utils/logs/TriggerLogsParser';
import CanvasHelp from '../CanvasHelp';
import { Colors } from '../../utils/colors';
-import touchZoomPlugin from '../../utils/uPlot/touchZoomPlugin';
import 'uplot/dist/uPlot.min.css';
@@ -63,7 +63,7 @@ const ToothCanvas = ({ data, width, height }: Props) => {
stroke: Colors.ACCENT,
fill: Colors.ACCENT,
scale: 'toothTime',
- value: (self, rawValue) => `${rawValue.toLocaleString()}μs`,
+ value: (_self, rawValue) => `${rawValue.toLocaleString()}μs`,
paths: bars!({ size: [0.6, 100] }),
},
],
diff --git a/src/utils/uPlot/touchZoomPlugin.ts b/src/utils/uPlot/touchZoomPlugin.ts
index a017170..7301132 100644
--- a/src/utils/uPlot/touchZoomPlugin.ts
+++ b/src/utils/uPlot/touchZoomPlugin.ts
@@ -47,8 +47,8 @@ const touchZoomPlugin = () => {
const yMax = Math.max(t0y, t1y);
// mid points
- t.y = (yMin+yMax)/2;
- t.x = (xMin+xMax)/2;
+ t.y = (yMin + yMax) / 2;
+ t.x = (xMin + xMax) / 2;
t.dx = xMax - xMin;
t.dy = yMax - yMin;
@@ -74,8 +74,8 @@ const touchZoomPlugin = () => {
const xFactor = fr.d! / to.d!;
const yFactor = fr.d! / to.d!;
- const leftPct = left/rect.width;
- const btmPct = 1 - top/rect.height;
+ const leftPct = left / rect.width;
+ const btmPct = 1 - top / rect.height;
const nxRange = oxRange * xFactor;
const nxMin = xVal - leftPct * nxRange;