diff --git a/package.json b/package.json
index 372d635..bfb6745 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
"scripts": {
"start": "craco start",
"build": "craco build",
+ "build:stats": "craco build --stats",
"test": "craco test",
"lint": "tsc && eslint --max-warnings=0 src",
"lint:fix": "eslint --fix src"
diff --git a/src/App.less b/src/App.less
index 41d8133..4eeab7e 100644
--- a/src/App.less
+++ b/src/App.less
@@ -104,5 +104,5 @@ html, body {
.log-canvas {
color: @text;
- --background-overlay: transparent;
+ --background-overlay: rgba(34, 38, 41, 0.9);
}
diff --git a/src/components/Log.tsx b/src/components/Log.tsx
index 035d674..7b55a3d 100644
--- a/src/components/Log.tsx
+++ b/src/components/Log.tsx
@@ -215,9 +215,6 @@ const Log = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loadedLo
Files
- } key="gauges">
- Gauges
-
}
@@ -229,7 +226,7 @@ const Log = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loadedLo
:
diff --git a/src/components/Log/LogCanvas.tsx b/src/components/Log/LogCanvas.tsx
index a3bdf58..d727382 100644
--- a/src/components/Log/LogCanvas.tsx
+++ b/src/components/Log/LogCanvas.tsx
@@ -8,8 +8,16 @@ import {
Logs,
LogEntry,
} from '@speedy-tuner/types';
+import {
+ Popover,
+ Space,
+ Typography,
+ Grid,
+} from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
import TimeChart from 'timechart';
import { colorHsl } from '../../utils/number';
+import LandscapeNotice from '../Dialog/LandscapeNotice';
// enum Colors {
// RED = '#f32450',
@@ -23,6 +31,9 @@ import { colorHsl } from '../../utils/number';
// BG = '#222629',
// }
+const { Text } = Typography;
+const { useBreakpoint } = Grid;
+
export interface SelectedField {
name: string;
label: string;
@@ -49,8 +60,8 @@ export interface PlottableField {
};
const LogCanvas = ({ data, width, height, selectedFields }: Props) => {
+ const { sm } = useBreakpoint();
const canvasRef = useRef(null);
-
const hsl = useCallback((fieldIndex: number, allFields: number) => {
const [hue] = colorHsl(0, allFields - 1, fieldIndex);
return `hsl(${hue}, 90%, 50%)`;
@@ -60,8 +71,6 @@ const LogCanvas = ({ data, width, height, selectedFields }: Props) => {
const filtered = useMemo(() => data.filter(fieldsOnly), [data]);
- // find max values for each selected field so we can calculate scale
- // TODO: unused
const fieldsToPlot = useMemo(() => {
const temp: { [index: string]: PlottableField } = {};
@@ -94,35 +103,60 @@ const LogCanvas = ({ data, width, height, selectedFields }: Props) => {
}, [filtered, selectedFields]);
useEffect(() => {
- const series = selectedFields.map((field) => ({
- name: field.label,
- color: hsl(selectedFields.indexOf(field), selectedFields.length),
+ const series = Object.keys(fieldsToPlot).map((label, index) => ({
+ name: fieldsToPlot[label].units ? `${label} (${fieldsToPlot[label].units})` : label,
+ color: hsl(index, selectedFields.length),
data: data.map((entry) => ({
x: entry.Time as number,
- y: entry[field.label] as number,
+ y: entry[label] as number,
})).filter((entry) => entry.x !== undefined || entry.y !== undefined),
}));
+ let chart: TimeChart;
- const chart = new TimeChart(canvasRef.current!, {
- series,
- lineWidth: 2,
- tooltip: true,
- legend: false,
- zoom: {
- x: { autoRange: true },
- y: { autoRange: true },
- },
- });
+ if (canvasRef.current) {
+ chart = new TimeChart(canvasRef.current, {
+ series,
+ lineWidth: 2,
+ tooltip: true,
+ legend: false,
+ zoom: {
+ x: { autoRange: true },
+ },
+ tooltipXLabel: 'Time (s)',
+ });
+ }
- return () => chart.dispose();
+ return () => chart && chart.dispose();
}, [data, fieldsToPlot, filtered, hsl, selectedFields, width, height]);
+ if (!sm) {
+ return ;
+ }
+
return (
-
+ <>
+
+
+ Navigation
+ Pinch to zoom
+ Drag to pan
+ Ctrl + wheel scroll to zoom X axis
+ Hold Shift to speed up zoom 5 times
+
+ }
+ >
+
+
+
+
+ >
);
};