Update types, simplify LogCanvas code

This commit is contained in:
Piotr Rogowski 2021-12-14 23:17:14 +01:00
parent 6e616cd85d
commit 5efa4a6c31
No known key found for this signature in database
GPG Key ID: F40F61D5587F5673
3 changed files with 27 additions and 35 deletions

14
package-lock.json generated
View File

@ -30,7 +30,7 @@
"@craco/craco": "^6.4.3", "@craco/craco": "^6.4.3",
"@speedy-tuner/eslint-config": "^0.1.3", "@speedy-tuner/eslint-config": "^0.1.3",
"@types/d3": "^7.0.0", "@types/d3": "^7.0.0",
"@types/node": "^16.11.12", "@types/node": "^16.11.13",
"@types/pako": "^1.0.2", "@types/pako": "^1.0.2",
"@types/react": "^17.0.37", "@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11", "@types/react-dom": "^17.0.11",
@ -3757,9 +3757,9 @@
"integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==" "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "16.11.12", "version": "16.11.13",
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.12.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.13.tgz",
"integrity": "sha512-+2Iggwg7PxoO5Kyhvsq9VarmPbIelXP070HMImEpbtGCoyWNINQj4wzjbQCXzdHTRXnqufutJb5KAURZANNBAw==" "integrity": "sha512-eUXZzHLHoZqj1frtUetNkUetYoJ6X55UmrVnFD4DMhVeAmwLjniZhtBmsRiemQh4uq4G3vUra/Ws/hs9vEvL3Q=="
}, },
"node_modules/@types/normalize-package-data": { "node_modules/@types/normalize-package-data": {
"version": "2.4.1", "version": "2.4.1",
@ -26375,9 +26375,9 @@
"integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==" "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
}, },
"@types/node": { "@types/node": {
"version": "16.11.12", "version": "16.11.13",
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.12.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.13.tgz",
"integrity": "sha512-+2Iggwg7PxoO5Kyhvsq9VarmPbIelXP070HMImEpbtGCoyWNINQj4wzjbQCXzdHTRXnqufutJb5KAURZANNBAw==" "integrity": "sha512-eUXZzHLHoZqj1frtUetNkUetYoJ6X55UmrVnFD4DMhVeAmwLjniZhtBmsRiemQh4uq4G3vUra/Ws/hs9vEvL3Q=="
}, },
"@types/normalize-package-data": { "@types/normalize-package-data": {
"version": "2.4.1", "version": "2.4.1",

View File

@ -50,7 +50,7 @@
"@craco/craco": "^6.4.3", "@craco/craco": "^6.4.3",
"@speedy-tuner/eslint-config": "^0.1.3", "@speedy-tuner/eslint-config": "^0.1.3",
"@types/d3": "^7.0.0", "@types/d3": "^7.0.0",
"@types/node": "^16.11.12", "@types/node": "^16.11.13",
"@types/pako": "^1.0.2", "@types/pako": "^1.0.2",
"@types/react": "^17.0.37", "@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11", "@types/react-dom": "^17.0.11",

View File

@ -94,35 +94,27 @@ const LogCanvas = ({ data, width, height, selectedFields }: Props) => {
}, [filtered, selectedFields]); }, [filtered, selectedFields]);
useEffect(() => { 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 chart = new TimeChart(canvasRef.current!, {
const series = selectedFields.map((field) => ({ series,
name: field.label, lineWidth: 2,
color: hsl(selectedFields.indexOf(field), selectedFields.length), tooltip: true,
data: data.map((entry) => ({ legend: false,
x: entry.Time as number, zoom: {
y: entry[field.label] as number, x: { autoRange: true },
})).filter((entry) => entry.x !== undefined || entry.y !== undefined), y: { autoRange: true },
})); },
});
chart = new TimeChart(canvasRef.current as HTMLDivElement, { return () => chart.dispose();
series,
lineWidth: 2,
tooltip: true,
legend: false,
zoom: {
x: { autoRange: true },
y: { autoRange: true },
},
});
}
return () => {
if (chart) {
chart.dispose();
}
};
}, [data, fieldsToPlot, filtered, hsl, selectedFields, width, height]); }, [data, fieldsToPlot, filtered, hsl, selectedFields, width, height]);
return ( return (