Calculate real values, support markers

src/components/Log/LogCanvas.tsx

@@ -4,10 +4,7 @@ import {
   useMemo,
   useRef,
 } from 'react';
-import {
-  Logs,
-  LogEntry,
-} from '@speedy-tuner/types';
+import { Logs } from '@speedy-tuner/types';
 import {
   Popover,
   Space,
@@ -16,6 +13,7 @@ import {
 } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import TimeChart from 'timechart';
+import { EventsPlugin } from 'timechart/dist/lib/plugins_extra/events';
 import { colorHsl } from '../../utils/number';
 import LandscapeNotice from '../Dialog/LandscapeNotice';
 
@@ -67,15 +65,11 @@ const LogCanvas = ({ data, width, height, selectedFields }: Props) => {
     return `hsl(${hue}, 90%, 50%)`;
   }, []);
 
-  const fieldsOnly = (entry: LogEntry) => entry.type === 'field';
-
-  const filtered = useMemo(() => data.filter(fieldsOnly), [data]);
-
   const fieldsToPlot = useMemo(() => {
     const temp: { [index: string]: PlottableField } = {};
 
-    filtered.forEach((entry) => {
-      selectedFields.forEach(({ label, scale, transform, units, format }, index) => {
+    data.forEach((entry) => {
+      selectedFields.forEach(({ label, scale, transform, units, format }) => {
         const value = entry[label];
 
         if (!temp[label]) {
@@ -100,17 +94,40 @@ const LogCanvas = ({ data, width, height, selectedFields }: Props) => {
     });
 
     return temp;
-  }, [filtered, selectedFields]);
+  }, [data, selectedFields]);
 
   useEffect(() => {
-    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[label] as number,
-      })).filter((entry) => entry.x !== undefined || entry.y !== undefined),
-    }));
+    const markers: { x: number, name: string }[] = [];
+    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),
+        data: data.map((entry, entryIndex) => {
+          let value = entry[label];
+
+          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;
 
     if (canvasRef.current) {
@@ -121,13 +138,17 @@ const LogCanvas = ({ data, width, height, selectedFields }: Props) => {
         legend: false,
         zoom: {
           x: { autoRange: true },
+          y: { autoRange: true },
         },
         tooltipXLabel: 'Time (s)',
+        plugins: {
+          events: new EventsPlugin(markers),
+        },
       });
     }
 
     return () => chart && chart.dispose();
-  }, [data, fieldsToPlot, filtered, hsl, selectedFields, width, height]);
+  }, [data, fieldsToPlot, hsl, selectedFields, width, height]);
 
   if (!sm) {
     return <LandscapeNotice />;

src/utils/api.ts

@@ -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://d29mjpbgm6k6md.cloudfront.net/logs/longest.mlg.gz',
     'https://d29mjpbgm6k6md.cloudfront.net/logs/middle.mlg.gz',
+    // 'https://d29mjpbgm6k6md.cloudfront.net/logs/markers.mlg.gz',
     onProgress,
     signal,
   )