WIP

package.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "@nivo/bar": "^0.87.0",
     "@nivo/core": "^0.87.0",
+    "@nivo/line": "^0.87.0",
     "@nivo/pie": "^0.87.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
     "@react-spring/web": "^9.4.0",

src/modules/analysis/components/routes.js

@@ -8,6 +8,7 @@ import { Messages } from './Messages';
 import { PitStops } from './pitStops';
 import { SessionStats } from './sessionStats';
 import { StrategyOverview } from './strategy';
+import { TrackData } from './trackData';
 
 export const routes = [
   {
@@ -39,6 +40,11 @@ export const routes = [
     path: '/drive-time',
     name: 'Drive time',
     component: DriveTime
+  },
+  {
+    path: '/trackdata',
+    name: 'Track data',
+    component: TrackData
   }
 ];
 

src/modules/analysis/components/trackData/components/Chart.js

@@ -0,0 +1,42 @@
+import { ResponsiveLine } from "@nivo/line";
+import { dayjs } from '@timing71/common';
+import { theme as chartTheme } from '../../../charts';
+
+
+export const Chart = ({ series }) => {
+
+  const chartData = [{
+    id: series.label,
+    data: series.data.map(d => ({ x: d.timestamp, y: d.value }))
+  }];
+
+  const formatTime = (t) => dayjs(t).format('HH:mm');
+
+  const minValue = Math.min(...chartData[0].data.map(d => d.y));
+  const maxValue = Math.max(...chartData[0].data.map(d => d.y), minValue + 10);
+
+  return (
+    <div>
+      <h2>{series.label} ({series.unit.trim()})</h2>
+      <ResponsiveLine
+        axisBottom={{
+          tickRotation: -60,
+          format: formatTime
+        }}
+        colors={[ '#54ffff', '#ffa600', '#008000', '#a8dc5b', '#54f8cf', '#7cec96', '#d4c523' ]}
+        curve='stepAfter'
+        data={chartData}
+        enablePoints={false}
+        margin={{ top: 10, bottom: 80, left: 50, right: 10 }}
+        theme={chartTheme}
+        xFormat={formatTime}
+        xScale={{ type: 'time' }}
+        yScale={{
+          max: Math.ceil(maxValue / 10) * 10,
+          min: Math.floor(minValue / 10) * 10,
+          type: 'linear'
+        }}
+      />
+    </div>
+  );
+};

src/modules/analysis/components/trackData/components/TrackData.js

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import { useAnalysis } from "../../context";
+import { Chart } from "./Chart";
+
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-auto-rows: 33vh;
+`;
+
+export const TrackData = () => {
+
+  const analysis = useAnalysis();
+
+  return (
+    <Grid>
+      {
+        analysis.trackData.toArray.map(
+          s => (
+            <Chart
+              key={s.label}
+              series={s}
+            />
+          )
+        )
+      }
+    </Grid>
+  );
+};

src/modules/analysis/components/trackData/components/index.js

@@ -0,0 +1 @@
+export { TrackData } from './TrackData';

src/modules/analysis/components/trackData/index.js

@@ -0,0 +1 @@
+export * from './components';

src/pages/FileAnalysis.js

@@ -43,6 +43,11 @@ export const FileAnalysis = () => {
           const json = await rawFile.json();
 
           analyser.current = createAnalyser(json, false);
+
+          if (process.env.NODE_ENV === 'development') {
+            window._a = analyser.current;
+          }
+
           setData(json);
           setLoadState(LoadState.LOADED);
 

yarn.lock

@@ -2471,6 +2471,22 @@
     "@types/d3-scale" "^4.0.8"
     d3-scale "^4.0.2"
 
+"@nivo/line@^0.87.0":
+  version "0.87.0"
+  resolved "https://registry.yarnpkg.com/@nivo/line/-/line-0.87.0.tgz#ea59b285a54b90602a5f765bcbf13845b978e47a"
+  integrity sha512-Ki/WDd8ZU8VWScW4ZeKUFCXRdAEg8nrS+F+jdfJDPxyxUMHZJCAbrXrnsExcEQLOaDQ2aU/bijEMiDS8/dJzuA==
+  dependencies:
+    "@nivo/annotations" "0.87.0"
+    "@nivo/axes" "0.87.0"
+    "@nivo/colors" "0.87.0"
+    "@nivo/core" "0.87.0"
+    "@nivo/legends" "0.87.0"
+    "@nivo/scales" "0.87.0"
+    "@nivo/tooltip" "0.87.0"
+    "@nivo/voronoi" "0.87.0"
+    "@react-spring/web" "9.4.5 || ^9.7.2"
+    d3-shape "^3.2.0"
+
 "@nivo/pie@^0.87.0":
   version "0.87.0"
   resolved "https://registry.yarnpkg.com/@nivo/pie/-/pie-0.87.0.tgz#cb07171500167861cd0652f9a37e26131612ea05"
@@ -2505,6 +2521,18 @@
     "@nivo/core" "0.87.0"
     "@react-spring/web" "9.4.5 || ^9.7.2"
 
+"@nivo/[email protected]":
+  version "0.87.0"
+  resolved "https://registry.yarnpkg.com/@nivo/voronoi/-/voronoi-0.87.0.tgz#fca70edc315de474fadb9012171e34d3d074b0ed"
+  integrity sha512-Tg+9YnCX8LKsEwZMY1Q83mWiVFiyU2smxrO3JaC9vzjIh/2A/bkNPwC6BdmRaQMvY1jngKs+WKDnNxSQWFSOEg==
+  dependencies:
+    "@nivo/core" "0.87.0"
+    "@nivo/tooltip" "0.87.0"
+    "@types/d3-delaunay" "^6.0.4"
+    "@types/d3-scale" "^4.0.8"
+    d3-delaunay "^6.0.4"
+    d3-scale "^4.0.2"
+
 "@nodelib/[email protected]":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -4387,6 +4415,11 @@
   resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.3.tgz#368c961a18de721da8200e80bf3943fb53136af2"
   integrity sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==
 
+"@types/d3-delaunay@^6.0.4":
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz#185c1a80cc807fdda2a3fe960f7c11c4a27952e1"
+  integrity sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==
+
 "@types/d3-format@^1.4.1":
   version "1.4.5"
   resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-1.4.5.tgz#6392303c2ca3c287c3a1a2046455cd0a0bd50bbe"
@@ -7659,6 +7692,13 @@ d3-array@2:
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
   integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
 
+d3-delaunay@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-6.0.4.tgz#98169038733a0a5babbeda55054f795bb9e4a58b"
+  integrity sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==
+  dependencies:
+    delaunator "5"
+
 "d3-format@1 - 3":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
@@ -7975,6 +8015,13 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
+delaunator@5:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-5.0.1.tgz#39032b08053923e924d6094fe2cde1a99cc51278"
+  integrity sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==
+  dependencies:
+    robust-predicates "^3.0.2"
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -14532,6 +14579,11 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+robust-predicates@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.2.tgz#d5b28528c4824d20fc48df1928d41d9efa1ad771"
+  integrity sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==
+
 rollup-plugin-terser@^7.0.0:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"