Calculate real values, support markers
This commit is contained in:
parent
0c7662708f
commit
848e0b5d07
|
@ -4,10 +4,7 @@ import {
|
||||||
useMemo,
|
useMemo,
|
||||||
useRef,
|
useRef,
|
||||||
} from 'react';
|
} from 'react';
|
||||||
import {
|
import { Logs } from '@speedy-tuner/types';
|
||||||
Logs,
|
|
||||||
LogEntry,
|
|
||||||
} from '@speedy-tuner/types';
|
|
||||||
import {
|
import {
|
||||||
Popover,
|
Popover,
|
||||||
Space,
|
Space,
|
||||||
|
@ -16,6 +13,7 @@ import {
|
||||||
} from 'antd';
|
} from 'antd';
|
||||||
import { QuestionCircleOutlined } from '@ant-design/icons';
|
import { QuestionCircleOutlined } from '@ant-design/icons';
|
||||||
import TimeChart from 'timechart';
|
import TimeChart from 'timechart';
|
||||||
|
import { EventsPlugin } from 'timechart/dist/lib/plugins_extra/events';
|
||||||
import { colorHsl } from '../../utils/number';
|
import { colorHsl } from '../../utils/number';
|
||||||
import LandscapeNotice from '../Dialog/LandscapeNotice';
|
import LandscapeNotice from '../Dialog/LandscapeNotice';
|
||||||
|
|
||||||
|
@ -67,15 +65,11 @@ const LogCanvas = ({ data, width, height, selectedFields }: Props) => {
|
||||||
return `hsl(${hue}, 90%, 50%)`;
|
return `hsl(${hue}, 90%, 50%)`;
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const fieldsOnly = (entry: LogEntry) => entry.type === 'field';
|
|
||||||
|
|
||||||
const filtered = useMemo(() => data.filter(fieldsOnly), [data]);
|
|
||||||
|
|
||||||
const fieldsToPlot = useMemo(() => {
|
const fieldsToPlot = useMemo(() => {
|
||||||
const temp: { [index: string]: PlottableField } = {};
|
const temp: { [index: string]: PlottableField } = {};
|
||||||
|
|
||||||
filtered.forEach((entry) => {
|
data.forEach((entry) => {
|
||||||
selectedFields.forEach(({ label, scale, transform, units, format }, index) => {
|
selectedFields.forEach(({ label, scale, transform, units, format }) => {
|
||||||
const value = entry[label];
|
const value = entry[label];
|
||||||
|
|
||||||
if (!temp[label]) {
|
if (!temp[label]) {
|
||||||
|
@ -100,17 +94,40 @@ const LogCanvas = ({ data, width, height, selectedFields }: Props) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
return temp;
|
return temp;
|
||||||
}, [filtered, selectedFields]);
|
}, [data, selectedFields]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const series = Object.keys(fieldsToPlot).map((label, index) => ({
|
const markers: { x: number, name: string }[] = [];
|
||||||
name: fieldsToPlot[label].units ? `${label} (${fieldsToPlot[label].units})` : label,
|
const series = Object.keys(fieldsToPlot).map((label, index) => {
|
||||||
|
const field = fieldsToPlot[label];
|
||||||
|
|
||||||
|
return {
|
||||||
|
name: field.units ? `${label} (${field.units})` : label,
|
||||||
color: hsl(index, selectedFields.length),
|
color: hsl(index, selectedFields.length),
|
||||||
data: data.map((entry) => ({
|
data: data.map((entry, entryIndex) => {
|
||||||
x: entry.Time as number,
|
let value = entry[label];
|
||||||
y: entry[label] as number,
|
|
||||||
})).filter((entry) => entry.x !== undefined || entry.y !== undefined),
|
if (value !== undefined) {
|
||||||
}));
|
value = (value as number * field.scale) + field.transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (entry.type === 'marker') {
|
||||||
|
const previousEntry = data[entryIndex - 1];
|
||||||
|
if (previousEntry && previousEntry.Time !== undefined) {
|
||||||
|
markers.push({
|
||||||
|
x: previousEntry.Time as number,
|
||||||
|
name: '',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
x: entry.Time,
|
||||||
|
y: value,
|
||||||
|
} as { x: number, y: number };
|
||||||
|
}).filter((entry) => entry.x !== undefined && entry.y !== undefined),
|
||||||
|
};
|
||||||
|
});
|
||||||
let chart: TimeChart;
|
let chart: TimeChart;
|
||||||
|
|
||||||
if (canvasRef.current) {
|
if (canvasRef.current) {
|
||||||
|
@ -121,13 +138,17 @@ const LogCanvas = ({ data, width, height, selectedFields }: Props) => {
|
||||||
legend: false,
|
legend: false,
|
||||||
zoom: {
|
zoom: {
|
||||||
x: { autoRange: true },
|
x: { autoRange: true },
|
||||||
|
y: { autoRange: true },
|
||||||
},
|
},
|
||||||
tooltipXLabel: 'Time (s)',
|
tooltipXLabel: 'Time (s)',
|
||||||
|
plugins: {
|
||||||
|
events: new EventsPlugin(markers),
|
||||||
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => chart && chart.dispose();
|
return () => chart && chart.dispose();
|
||||||
}, [data, fieldsToPlot, filtered, hsl, selectedFields, width, height]);
|
}, [data, fieldsToPlot, hsl, selectedFields, width, height]);
|
||||||
|
|
||||||
if (!sm) {
|
if (!sm) {
|
||||||
return <LandscapeNotice />;
|
return <LandscapeNotice />;
|
||||||
|
|
|
@ -83,6 +83,7 @@ export const loadLogs = (onProgress?: onProgressType, signal?: AbortSignal) =>
|
||||||
// 'https://speedytuner-cloud.s3.eu-west-2.amazonaws.com/logs/longest.mlg.gz',
|
// 'https://speedytuner-cloud.s3.eu-west-2.amazonaws.com/logs/longest.mlg.gz',
|
||||||
// 'https://d29mjpbgm6k6md.cloudfront.net/logs/longest.mlg.gz',
|
// 'https://d29mjpbgm6k6md.cloudfront.net/logs/longest.mlg.gz',
|
||||||
'https://d29mjpbgm6k6md.cloudfront.net/logs/middle.mlg.gz',
|
'https://d29mjpbgm6k6md.cloudfront.net/logs/middle.mlg.gz',
|
||||||
|
// 'https://d29mjpbgm6k6md.cloudfront.net/logs/markers.mlg.gz',
|
||||||
onProgress,
|
onProgress,
|
||||||
signal,
|
signal,
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue