From f94eded413e0146a8eabf02295e8e870f826f377 Mon Sep 17 00:00:00 2001 From: Piotr Rogowski Date: Tue, 21 Dec 2021 23:39:38 +0100 Subject: [PATCH] Move Composite logs to uPlot (#334) --- package-lock.json | 231 +----------------- package.json | 3 +- src/components/CanvasHelp.tsx | 29 --- src/components/Diagnose.tsx | 26 +- src/components/TriggerLog/CompositeCanvas.tsx | 183 ++++++-------- src/components/TriggerLog/ToothCanvas.tsx | 13 +- 6 files changed, 109 insertions(+), 376 deletions(-) delete mode 100644 src/components/CanvasHelp.tsx diff --git a/package-lock.json b/package-lock.json index 1c9ba67..d602170 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,6 @@ "react-scripts": "^4.0.3", "react-table-drag-select": "^0.3.1", "recharts": "^2.1.8", - "timechart": "^1.0.0-beta.4", "uplot": "^1.6.18", "uplot-react": "^1.1.1" }, @@ -32,7 +31,7 @@ "@craco/craco": "^6.4.3", "@speedy-tuner/eslint-config": "^0.1.3", "@types/d3": "^7.0.0", - "@types/node": "^17.0.1", + "@types/node": "^17.0.2", "@types/pako": "^1.0.2", "@types/react": "^17.0.37", "@types/react-dom": "^17.0.11", @@ -3759,9 +3758,9 @@ "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==" }, "node_modules/@types/node": { - "version": "17.0.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.1.tgz", - "integrity": "sha512-NXKvBVUzIbs6ylBwmOwHFkZS2EXCcjnqr8ZCRNaXBkHAf+3mn/rPcJxwrzuc6movh8fxQAsUUfYklJ/EG+hZqQ==" + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.2.tgz", + "integrity": "sha512-JepeIUPFDARgIs0zD/SKPgFsJEAF0X5/qO80llx59gOxFTboS9Amv3S+QfB7lqBId5sFXJ99BN0J6zFRvL9dDA==" }, "node_modules/@types/normalize-package-data": { "version": "2.4.1", @@ -7068,97 +7067,6 @@ "type": "^1.0.1" } }, - "node_modules/d3-array": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.1.1.tgz", - "integrity": "sha512-33qQ+ZoZlli19IFiQx4QEpf2CBEayMRzhlisJHSCsSUbDXv6ZishqS1x7uFVClKG4Wr7rZVHvaAttoLow6GqdQ==", - "dependencies": { - "internmap": "1 - 2" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-axis": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz", - "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==", - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-color": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.0.1.tgz", - "integrity": "sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw==", - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-format": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz", - "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==", - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-interpolate": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", - "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", - "dependencies": { - "d3-color": "1 - 3" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-scale": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", - "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", - "dependencies": { - "d3-array": "2.10.0 - 3", - "d3-format": "1 - 3", - "d3-interpolate": "1.2.0 - 3", - "d3-time": "2.1.1 - 3", - "d3-time-format": "2 - 4" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-selection": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", - "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==", - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-time": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.0.0.tgz", - "integrity": "sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==", - "dependencies": { - "d3-array": "2 - 3" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-time-format": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz", - "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==", - "dependencies": { - "d3-time": "1 - 3" - }, - "engines": { - "node": ">=12" - } - }, "node_modules/damerau-levenshtein": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz", @@ -10008,11 +9916,6 @@ "node": ">=0.10.0" } }, - "node_modules/gl-matrix": { - "version": "3.4.3", - "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz", - "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==" - }, "node_modules/glob": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", @@ -11001,14 +10904,6 @@ "node": ">= 0.4" } }, - "node_modules/internmap": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", - "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==", - "engines": { - "node": ">=12" - } - }, "node_modules/ip": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz", @@ -20920,24 +20815,6 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, - "node_modules/timechart": { - "version": "1.0.0-beta.4", - "resolved": "https://registry.npmjs.org/timechart/-/timechart-1.0.0-beta.4.tgz", - "integrity": "sha512-mWziioRsw9ClrqGV4UhqbXTCYTSHkQLWNn77P4LSLI1jKw/UN/RR/jwE8TerjcWOWz/rHVgZsKbu01UKTCmWQQ==", - "dependencies": { - "d3-axis": "^3.0.0", - "d3-color": "^3.0.1", - "d3-scale": "^4.0.2", - "d3-selection": "^3.0.0", - "gl-matrix": "^3.3.0", - "tslib": "^2.2.0" - } - }, - "node_modules/timechart/node_modules/tslib": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", - "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" - }, "node_modules/timers-browserify": { "version": "2.0.12", "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz", @@ -26394,9 +26271,9 @@ "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==" }, "@types/node": { - "version": "17.0.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.1.tgz", - "integrity": "sha512-NXKvBVUzIbs6ylBwmOwHFkZS2EXCcjnqr8ZCRNaXBkHAf+3mn/rPcJxwrzuc6movh8fxQAsUUfYklJ/EG+hZqQ==" + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.2.tgz", + "integrity": "sha512-JepeIUPFDARgIs0zD/SKPgFsJEAF0X5/qO80llx59gOxFTboS9Amv3S+QfB7lqBId5sFXJ99BN0J6zFRvL9dDA==" }, "@types/normalize-package-data": { "version": "2.4.1", @@ -29071,70 +28948,6 @@ "type": "^1.0.1" } }, - "d3-array": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.1.1.tgz", - "integrity": "sha512-33qQ+ZoZlli19IFiQx4QEpf2CBEayMRzhlisJHSCsSUbDXv6ZishqS1x7uFVClKG4Wr7rZVHvaAttoLow6GqdQ==", - "requires": { - "internmap": "1 - 2" - } - }, - "d3-axis": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz", - "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==" - }, - "d3-color": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.0.1.tgz", - "integrity": "sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw==" - }, - "d3-format": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz", - "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==" - }, - "d3-interpolate": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", - "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", - "requires": { - "d3-color": "1 - 3" - } - }, - "d3-scale": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", - "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", - "requires": { - "d3-array": "2.10.0 - 3", - "d3-format": "1 - 3", - "d3-interpolate": "1.2.0 - 3", - "d3-time": "2.1.1 - 3", - "d3-time-format": "2 - 4" - } - }, - "d3-selection": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", - "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==" - }, - "d3-time": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.0.0.tgz", - "integrity": "sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==", - "requires": { - "d3-array": "2 - 3" - } - }, - "d3-time-format": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz", - "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==", - "requires": { - "d3-time": "1 - 3" - } - }, "damerau-levenshtein": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz", @@ -31292,11 +31105,6 @@ "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz", "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=" }, - "gl-matrix": { - "version": "3.4.3", - "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz", - "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==" - }, "glob": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", @@ -32050,11 +31858,6 @@ "side-channel": "^1.0.4" } }, - "internmap": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", - "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==" - }, "ip": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz", @@ -39727,26 +39530,6 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, - "timechart": { - "version": "1.0.0-beta.4", - "resolved": "https://registry.npmjs.org/timechart/-/timechart-1.0.0-beta.4.tgz", - "integrity": "sha512-mWziioRsw9ClrqGV4UhqbXTCYTSHkQLWNn77P4LSLI1jKw/UN/RR/jwE8TerjcWOWz/rHVgZsKbu01UKTCmWQQ==", - "requires": { - "d3-axis": "^3.0.0", - "d3-color": "^3.0.1", - "d3-scale": "^4.0.2", - "d3-selection": "^3.0.0", - "gl-matrix": "^3.3.0", - "tslib": "^2.2.0" - }, - "dependencies": { - "tslib": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", - "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" - } - } - }, "timers-browserify": { "version": "2.0.12", "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz", diff --git a/package.json b/package.json index 68c704c..ac6143b 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,6 @@ "react-scripts": "^4.0.3", "react-table-drag-select": "^0.3.1", "recharts": "^2.1.8", - "timechart": "^1.0.0-beta.4", "uplot": "^1.6.18", "uplot-react": "^1.1.1" }, @@ -53,7 +52,7 @@ "@craco/craco": "^6.4.3", "@speedy-tuner/eslint-config": "^0.1.3", "@types/d3": "^7.0.0", - "@types/node": "^17.0.1", + "@types/node": "^17.0.2", "@types/pako": "^1.0.2", "@types/react": "^17.0.37", "@types/react-dom": "^17.0.11", diff --git a/src/components/CanvasHelp.tsx b/src/components/CanvasHelp.tsx deleted file mode 100644 index da12439..0000000 --- a/src/components/CanvasHelp.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { - Popover, - Space, - Typography, -} from 'antd'; -import { QuestionCircleOutlined } from '@ant-design/icons'; - -const { Text, Title } = Typography; - -const CanvasHelp = () => ( -
- - Navigation - Pinch to zoom - Drag to pan - Ctrl + wheel scroll to zoom X axis - Hold Shift to speed up zoom 5 times - - } - > - - -
-); - -export default CanvasHelp; diff --git a/src/components/Diagnose.tsx b/src/components/Diagnose.tsx index d96d7ca..5f8c1fd 100644 --- a/src/components/Diagnose.tsx +++ b/src/components/Diagnose.tsx @@ -66,8 +66,15 @@ const Diagnose = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loa const contentRef = useRef(null); const margin = 30; const [canvasWidth, setCanvasWidth] = useState(0); + const [canvasHeight, setCanvasHeight] = useState(0); const sidebarWidth = 250; - const calculateCanvasWidth = useCallback(() => setCanvasWidth((contentRef.current?.clientWidth || 0) - margin), []); + const calculateCanvasSize = useCallback(() => { + setCanvasWidth((contentRef.current?.clientWidth || 0) - margin); + + if (window.innerHeight > 600) { + setCanvasHeight(Math.round((window.innerHeight - 250) / 2)); + } + }, []); const siderProps = { width: sidebarWidth, collapsible: true, @@ -75,7 +82,6 @@ const Diagnose = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loa collapsed: ui.sidebarCollapsed, onCollapse: (collapsed: boolean) => { store.dispatch({ type: 'ui/sidebarCollapsed', payload: collapsed }); - setTimeout(calculateCanvasWidth, 1); }, }; const [logs, setLogs] = useState(); @@ -113,15 +119,15 @@ const Diagnose = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loa }; loadData(); - calculateCanvasWidth(); + calculateCanvasSize(); - window.addEventListener('resize', calculateCanvasWidth); + window.addEventListener('resize', calculateCanvasSize); return () => { controller.abort(); - window.removeEventListener('resize', calculateCanvasWidth); + window.removeEventListener('resize', calculateCanvasSize); }; - }, [calculateCanvasWidth, loadedLogs]); + }, [calculateCanvasSize, loadedLogs, ui.sidebarCollapsed]); return ( <> @@ -146,18 +152,18 @@ const Diagnose = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loa {toothLogs && logs ? ( - <> + - + ) : { const { sm } = useBreakpoint(); - const canvasRef = useRef(null); + const [options, setOptions] = useState(); + const [plotData, setPlotData] = useState(); useEffect(() => { - let chart: TimeChart; - const markers: { x: number, name: string }[] = []; - const primary: DataPoint[] = []; - const secondary: DataPoint[] = []; - const sync: DataPoint[] = []; + const xData: number[] = []; + const secondary: (number | null)[] = []; + const primary: (number | null)[] = []; + const sync: (number | null)[] = []; data.forEach((entry, index) => { - if (entry.type === EntryType.MARKER) { - markers.push({ - x: index, - name: '', - }); - } + const prevSecondary = data[index - 1] ? data[index - 1].secondaryLevel : 0; + const currentSecondary = (entry.secondaryLevel + 3) * 2; // apply scale - if (entry.type === EntryType.TRIGGER) { - const prevSecondary = data[index - 1] ? data[index - 1].secondaryLevel : 0; - const currentSecondary = (entry.secondaryLevel + 3) * 2; // apply scale + const prevPrimary = data[index - 1] ? data[index - 1].primaryLevel : 0; + const currentPrimary = (entry.primaryLevel + 1) * 2; - const prevPrimary = data[index - 1] ? data[index - 1].primaryLevel : 0; - const currentPrimary = (entry.primaryLevel + 1) * 2; // apply scale + const prevSync = data[index - 1] ? data[index - 1].sync : 0; + const currentSync = entry.sync; - const prevSync = data[index - 1] ? data[index - 1].sync : 0; - const currentSync = entry.sync; + // base data + xData.push(index); + secondary.push(currentSecondary); + primary.push(currentPrimary); + sync.push(currentSync); - // make it square - if (prevSecondary !== currentSecondary) { - secondary.push({ - x: index - 1, - y: currentSecondary, - }); - } - secondary.push({ - x: index, - y: currentSecondary, - }); - - if (prevPrimary !== currentPrimary) { - primary.push({ - x: index - 1, - y: currentPrimary, - }); - } - primary.push({ - x: index, - y: currentPrimary, - }); - - if (prevSync !== currentSync) { - sync.push({ - x: index - 1, - y: currentSync, - }); - } - sync.push({ - x: index, - y: currentSync, - }); + // make it square + if (prevSecondary !== currentSecondary || prevPrimary !== currentPrimary || prevSync !== currentSync) { + secondary.push(currentSecondary); + primary.push(currentPrimary); + sync.push(currentSync); + xData.push(index + 1); } }); - const series = [{ - name: 'Secondary', - color: Colors.GREEN, - data: secondary, - }, { - name: 'Primary', - color: Colors.BLUE, - data: primary, - }, { - name: 'Sync', - color: Colors.RED, - data: sync, - }]; + setPlotData([ + xData, + [...secondary], + [...primary], + [...sync], + ]); - if (canvasRef.current && sm) { - chart = new TimeChart(canvasRef.current, { - series, - lineWidth: 2, - tooltip: true, - legend: false, - zoom: { - x: { autoRange: true }, + setOptions({ + width, + height, + scales: { + x: { time: false }, + }, + series: [ + { + label: 'Event', }, - yRange: { min: -1, max: 9 }, - tooltipXLabel: 'Event', - plugins: { - events: new EventsPlugin(markers), + { + label: 'Secondary', + points: { show: false }, + stroke: Colors.GREEN, + scale: '', + value: (_self, rawValue) => (rawValue / 2) - 3, + width: 2, }, - }); - } - - return () => chart && chart.dispose(); + { + label: 'Primary', + points: { show: false }, + stroke: Colors.ACCENT, + scale: '', + value: (_self, rawValue) => (rawValue / 2) - 1, + width: 2, + }, + { + label: 'Sync', + points: { show: false }, + stroke: Colors.RED, + scale: '', + width: 2, + }, + ], + axes: [ + { + stroke: Colors.TEXT, + grid: { stroke: Colors.MAIN_LIGHT }, + }, + ], + cursor: { + drag: { y: false }, + }, + plugins: [touchZoomPlugin()], + }); }, [data, width, height, sm]); if (!sm) { @@ -130,14 +113,10 @@ const CompositeCanvas = ({ data, width, height }: Props) => { } return ( - <> - -
- + ); }; diff --git a/src/components/TriggerLog/ToothCanvas.tsx b/src/components/TriggerLog/ToothCanvas.tsx index 51d7c3f..c85622d 100644 --- a/src/components/TriggerLog/ToothCanvas.tsx +++ b/src/components/TriggerLog/ToothCanvas.tsx @@ -11,7 +11,6 @@ import { ToothLogEntry, EntryType, } from '../../utils/logs/TriggerLogsParser'; -import CanvasHelp from '../CanvasHelp'; import { Colors } from '../../utils/colors'; import 'uplot/dist/uPlot.min.css'; @@ -47,7 +46,6 @@ const ToothCanvas = ({ data, width, height }: Props) => { ]); setOptions({ - title: 'Tooth logs', width, height, scales: { @@ -91,13 +89,10 @@ const ToothCanvas = ({ data, width, height }: Props) => { } return ( - <> - - - + ); };