diff --git a/package-lock.json b/package-lock.json index f016bfc..aa443ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,7 +30,7 @@ "@craco/craco": "^6.4.3", "@speedy-tuner/eslint-config": "^0.1.3", "@types/d3": "^7.0.0", - "@types/node": "^16.11.12", + "@types/node": "^16.11.13", "@types/pako": "^1.0.2", "@types/react": "^17.0.37", "@types/react-dom": "^17.0.11", @@ -3757,9 +3757,9 @@ "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==" }, "node_modules/@types/node": { - "version": "16.11.12", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.12.tgz", - "integrity": "sha512-+2Iggwg7PxoO5Kyhvsq9VarmPbIelXP070HMImEpbtGCoyWNINQj4wzjbQCXzdHTRXnqufutJb5KAURZANNBAw==" + "version": "16.11.13", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.13.tgz", + "integrity": "sha512-eUXZzHLHoZqj1frtUetNkUetYoJ6X55UmrVnFD4DMhVeAmwLjniZhtBmsRiemQh4uq4G3vUra/Ws/hs9vEvL3Q==" }, "node_modules/@types/normalize-package-data": { "version": "2.4.1", @@ -26375,9 +26375,9 @@ "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==" }, "@types/node": { - "version": "16.11.12", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.12.tgz", - "integrity": "sha512-+2Iggwg7PxoO5Kyhvsq9VarmPbIelXP070HMImEpbtGCoyWNINQj4wzjbQCXzdHTRXnqufutJb5KAURZANNBAw==" + "version": "16.11.13", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.13.tgz", + "integrity": "sha512-eUXZzHLHoZqj1frtUetNkUetYoJ6X55UmrVnFD4DMhVeAmwLjniZhtBmsRiemQh4uq4G3vUra/Ws/hs9vEvL3Q==" }, "@types/normalize-package-data": { "version": "2.4.1", diff --git a/package.json b/package.json index 8935aa7..372d635 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "@craco/craco": "^6.4.3", "@speedy-tuner/eslint-config": "^0.1.3", "@types/d3": "^7.0.0", - "@types/node": "^16.11.12", + "@types/node": "^16.11.13", "@types/pako": "^1.0.2", "@types/react": "^17.0.37", "@types/react-dom": "^17.0.11", diff --git a/src/components/Log/LogCanvas.tsx b/src/components/Log/LogCanvas.tsx index 891d401..a3bdf58 100644 --- a/src/components/Log/LogCanvas.tsx +++ b/src/components/Log/LogCanvas.tsx @@ -94,35 +94,27 @@ const LogCanvas = ({ data, width, height, selectedFields }: Props) => { }, [filtered, selectedFields]); useEffect(() => { - let chart: TimeChart; + const series = selectedFields.map((field) => ({ + name: field.label, + color: hsl(selectedFields.indexOf(field), selectedFields.length), + data: data.map((entry) => ({ + x: entry.Time as number, + y: entry[field.label] as number, + })).filter((entry) => entry.x !== undefined || entry.y !== undefined), + })); - if (canvasRef.current) { - const series = selectedFields.map((field) => ({ - name: field.label, - color: hsl(selectedFields.indexOf(field), selectedFields.length), - data: data.map((entry) => ({ - x: entry.Time as number, - y: entry[field.label] as number, - })).filter((entry) => entry.x !== undefined || entry.y !== undefined), - })); + const chart = new TimeChart(canvasRef.current!, { + series, + lineWidth: 2, + tooltip: true, + legend: false, + zoom: { + x: { autoRange: true }, + y: { autoRange: true }, + }, + }); - chart = new TimeChart(canvasRef.current as HTMLDivElement, { - series, - lineWidth: 2, - tooltip: true, - legend: false, - zoom: { - x: { autoRange: true }, - y: { autoRange: true }, - }, - }); - } - - return () => { - if (chart) { - chart.dispose(); - } - }; + return () => chart.dispose(); }, [data, fieldsToPlot, filtered, hsl, selectedFields, width, height]); return (