Add tracker graph to tracker settings page

gui/package.json

@@ -26,13 +26,15 @@
     "@tweenjs/tween.js": "^25.0.0",
     "@twemoji/svg": "^15.0.0",
     "browser-fs-access": "^0.35.0",
+    "chart.js": "^4.5.0",
     "classnames": "^2.5.1",
     "flatbuffers": "22.10.26",
     "intl-pluralrules": "^2.0.1",
     "ip-num": "^1.5.1",
     "jotai": "^2.12.2",
     "prompts": "^2.4.2",
     "react": "^18.3.1",
+    "react-chartjs-2": "^5.3.0",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-helmet": "^6.1.0",

gui/public/i18n/en/translation.ftl

@@ -390,6 +390,10 @@ tracker-settings-update-blocked = Update not available. No other releases availa
 tracker-settings-update-available = { $versionName } is now available
 tracker-settings-update = Update now
 tracker-settings-update-title = Firmware version
+tracker-settings-graph-acceleration-title = Tracker Acceleration
+tracker-settings-graph-position-title = Tracker Position
+tracker-settings-graph-show-title = Show Tracker Graph
+tracker-settings-graph-hide-title = Hide Tracker Graph
 
 ## Tracker part card info
 tracker-part_card-no_name = No name

gui/src/App.tsx

@@ -61,6 +61,16 @@ import { FirmwareUpdate } from './components/firmware-update/FirmwareUpdate';
 import { ConnectionLost } from './components/onboarding/pages/ConnectionLost';
 import { VRCWarningsPage } from './components/vrc/VRCWarningsPage';
 import { StayAlignedSetup } from './components/onboarding/pages/stay-aligned/StayAlignedSetup';
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+} from 'chart.js';
 
 export const GH_REPO = 'SlimeVR/SlimeVR-Server';
 export const VersionContext = createContext('');
@@ -73,6 +83,16 @@ function Layout() {
   const { isMobile } = useBreakpoint('mobile');
   useDiscordPresence();
 
+  ChartJS.register(
+    Title,
+    Tooltip,
+    Legend,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement
+  );
+
   return (
     <>
       <SerialDetectionModal></SerialDetectionModal>

gui/src/components/tracker/TrackerGraph.tsx

@@ -0,0 +1,177 @@
+import { useLocalization } from '@fluent/react';
+import { useEffect, useState } from 'react';
+import { Line } from 'react-chartjs-2';
+import { TrackerDataT } from 'solarxr-protocol';
+import { Button } from '@/components/commons/Button';
+import { useConfig } from '@/hooks/config';
+
+export function TrackerGraph({ tracker }: { tracker: TrackerDataT }) {
+  const { l10n } = useLocalization();
+  const { config } = useConfig();
+
+  type AxisData = {
+    x: number;
+    y: number;
+    time: number;
+  };
+
+  type ChartData = {
+    x: AxisData[];
+    y: AxisData[];
+    z: AxisData[];
+  };
+
+  const [chartData, setChartData] = useState<ChartData>({
+    x: [],
+    y: [],
+    z: [],
+  });
+
+  const [showTrackerGraph, setShowTrackerGraph] = useState(false);
+
+  const secondDuration = 60;
+
+  useEffect(() => {
+    if (!showTrackerGraph) {
+      return;
+    }
+
+    const newValue = tracker.info?.isImu
+      ? tracker.linearAcceleration
+      : tracker.position;
+    if (!newValue) {
+      return;
+    }
+
+    const currentTime = new Date().getTime() / 1000;
+    const startTime = currentTime - secondDuration;
+
+    const updateData = (data: AxisData[], newSample: number) => {
+      const remapped = data
+        .filter((value) => value.time >= startTime)
+        .map((value) => ({ ...value, x: value.time - startTime }));
+      remapped.push({
+        time: currentTime,
+        x: secondDuration,
+        y: newSample,
+      });
+      return remapped;
+    };
+
+    const newData = {
+      x: updateData(chartData.x, newValue.x),
+      y: updateData(chartData.y, newValue.y),
+      z: updateData(chartData.z, newValue.z),
+    };
+    setChartData(newData);
+  }, [tracker]);
+
+  useEffect(() => {
+    if (!showTrackerGraph) {
+      setChartData({ x: [], y: [], z: [] });
+    }
+  }, [showTrackerGraph]);
+
+  return (
+    <>
+      <Button
+        variant="tertiary"
+        className="self-start"
+        onClick={() => setShowTrackerGraph(!showTrackerGraph)}
+      >
+        {l10n.getString(
+          showTrackerGraph
+            ? 'tracker-settings-graph-hide-title'
+            : 'tracker-settings-graph-show-title'
+        )}
+      </Button>
+      {showTrackerGraph && (
+        <div className="h-96">
+          <Line
+            options={{
+              responsive: true,
+              animation: false,
+              font: {
+                family: config?.fonts.map((font) => `"${font}"`).join(','),
+                size: config?.textSize,
+              },
+              plugins: {
+                title: {
+                  display: true,
+                  text: l10n.getString(
+                    tracker?.info?.isImu
+                      ? 'tracker-settings-graph-acceleration-title'
+                      : 'tracker-settings-graph-position-title'
+                  ),
+                  color: 'white',
+                },
+                tooltip: {
+                  mode: 'index',
+                  intersect: false,
+                  animation: false,
+                  callbacks: {
+                    title: () => '',
+                  },
+                },
+                legend: {
+                  labels: {
+                    color: 'white',
+                  },
+                },
+              },
+              scales: {
+                x: {
+                  type: 'linear',
+                  min: 0,
+                  max: secondDuration,
+                  ticks: {
+                    color: 'white',
+                  },
+                },
+                y: {
+                  min: -4,
+                  max: 4,
+                  ticks: {
+                    color: 'white',
+                  },
+                },
+              },
+              elements: {
+                point: {
+                  radius: 0,
+                },
+              },
+              parsing: false,
+              normalized: true,
+              maintainAspectRatio: false,
+            }}
+            data={{
+              labels: ['X', 'Y', 'Z'],
+              datasets: [
+                {
+                  label: 'X',
+                  data: chartData.x,
+                  borderColor: 'rgb(200, 50, 50)',
+                  backgroundColor: 'rgb(200, 100, 100)',
+                },
+                {
+                  label: 'Y',
+                  data: chartData.y,
+                  borderColor: 'rgb(50, 200, 50)',
+                  backgroundColor: 'rgb(100, 200, 100)',
+                },
+                {
+                  label: 'Z',
+                  data: chartData.z,
+                  borderColor: 'rgb(50, 50, 200)',
+                  backgroundColor: 'rgb(100, 100, 200)',
+                },
+              ],
+            }}
+            id="tracker-graph"
+          />
+        </div>
+      )}
+    </>
+  );
+}

gui/src/components/tracker/TrackerSettings.tsx

@@ -40,6 +40,7 @@ import semver from 'semver';
 import { useSetAtom } from 'jotai';
 import { ignoredTrackersAtom } from '@/store/app-store';
 import { checkForUpdate } from '@/hooks/firmware-update';
+import { TrackerGraph } from './TrackerGraph';
 
 const rotationsLabels: [Quaternion, string][] = [
   [rotationToQuatMap.BACK, 'tracker-rotation-back'],
@@ -505,6 +506,7 @@ export function TrackerSettingsPage() {
               </Button>
             </div>
           )}
+          {tracker && <TrackerGraph tracker={tracker.tracker} />}
         </div>
       </div>
     </form>