Format, use theme font

Author: microbit-matt-hillsdon

src/components/LiveGraph.tsx

@@ -4,7 +4,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Box } from "@chakra-ui/react";
+import { Box, useTheme } from "@chakra-ui/react";
 import { useSize } from "@chakra-ui/react-use-size";
 import { AccelerometerDataEvent } from "@microbit/microbit-connection";
 import { useCallback, useEffect, useRef } from "react";
@@ -31,7 +31,7 @@ const recordingFill = "rgba(0, 0, 255, 0.03)";
 const recordingStroke = "rgba(64, 64, 255, 0.27)";
 const recordingLineWidth = 2;
 const labelAreaWidth = 38;
-const labelFont = "20px sans-serif";
+const labelFontSize = "20px";
 const labelMinSpacing = 24;
 
 interface RecordingRegion {
@@ -84,11 +84,7 @@ function valueToY(value: number, height: number): number {
   return height * (1 - (value + maxAccelerationScaleForGraphs) / range);
 }
 
-function timeToX(
-  t: number,
-  now: number,
-  width: number
-): number {
+function timeToX(t: number, now: number, width: number): number {
   return width - (now - t) / millisPerPixel;
 }
 
@@ -131,7 +127,8 @@ function drawLabels(
   buf: RingBuffer,
   width: number,
   height: number,
-  colors: { x: string; y: string; z: string }
+  colors: { x: string; y: string; z: string },
+  fontFamily: string
 ) {
   if (buf.count === 0) return;
 
@@ -159,7 +156,7 @@ function drawLabels(
   fixOverlappingLabels(labels);
 
   const graphWidth = width - labelAreaWidth;
-  ctx.font = labelFont;
+  ctx.font = `${labelFontSize} ${fontFamily}`;
   ctx.textBaseline = "middle";
 
   const arrowWidth = 9;
@@ -201,7 +198,8 @@ function render(
   regions: RecordingRegion[],
   axes: AxisConfig[],
   colors: { x: string; y: string; z: string },
-  prevFirstVisible: number
+  prevFirstVisible: number,
+  fontFamily: string
 ) {
   // Clear.
   ctx.clearRect(0, 0, width, height);
@@ -226,7 +224,9 @@ function render(
       const dx = (buf.timestamps[idxB] - buf.timestamps[idxA]) / millisPerPixel;
       for (const axis of axes) {
         if (!axis.lineDash) continue;
-        const dy = valueToY(axis.values[idxB], height) - valueToY(axis.values[idxA], height);
+        const dy =
+          valueToY(axis.values[idxB], height) -
+          valueToY(axis.values[idxA], height);
         const segLen = Math.sqrt(dx * dx + dy * dy);
         const totalDash = axis.lineDash[0] + axis.lineDash[1];
         axis.dashOffset = (axis.dashOffset + segLen) % totalDash;
@@ -335,7 +335,7 @@ function render(
   ctx.restore();
 
   // Labels in the reserved right area.
-  drawLabels(ctx, buf, width, height, colors);
+  drawLabels(ctx, buf, width, height, colors, fontFamily);
 
   return firstVisible;
 }
@@ -345,6 +345,8 @@ const LiveGraph = () => {
   const [{ graphColorScheme, graphLineScheme, graphLineWeight }] =
     useSettings();
 
+  const theme = useTheme();
+  const fontFamily: string = theme.fonts?.body ?? "sans-serif";
   const colors = useGraphColors(graphColorScheme);
   const lineStyles = useGraphLineStyles(graphLineScheme);
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -365,6 +367,8 @@ const LiveGraph = () => {
   lineStylesRef.current = lineStyles;
   const lineWidthRef = useRef(lineWidth);
   lineWidthRef.current = lineWidth;
+  const fontFamilyRef = useRef(fontFamily);
+  fontFamilyRef.current = fontFamily;
 
   // Recording region tracking.
   const isRecording = useStore((s) => s.isRecording);
@@ -407,9 +411,27 @@ const LiveGraph = () => {
     let lastRenderTime = 0;
     let prevFirstVisible = -1;
     const axisConfigs: AxisConfig[] = [
-      { values: null!, color: "", lineWidth: 0, lineDash: undefined, dashOffset: 0 },
-      { values: null!, color: "", lineWidth: 0, lineDash: undefined, dashOffset: 0 },
-      { values: null!, color: "", lineWidth: 0, lineDash: undefined, dashOffset: 0 },
+      {
+        values: null!,
+        color: "",
+        lineWidth: 0,
+        lineDash: undefined,
+        dashOffset: 0,
+      },
+      {
+        values: null!,
+        color: "",
+        lineWidth: 0,
+        lineDash: undefined,
+        dashOffset: 0,
+      },
+      {
+        values: null!,
+        color: "",
+        lineWidth: 0,
+        lineDash: undefined,
+        dashOffset: 0,
+      },
     ];
 
     const animate = () => {
@@ -458,7 +480,8 @@ const LiveGraph = () => {
         regionsRef.current,
         axisConfigs,
         c,
-        prevFirstVisible
+        prevFirstVisible,
+        fontFamilyRef.current
       );
     };
 
@@ -467,12 +490,7 @@ const LiveGraph = () => {
   }, [isConnected]);
 
   return (
-    <Box
-      ref={containerRef}
-      width="100%"
-      height="100%"
-      overflow="hidden"
-    >
+    <Box ref={containerRef} width="100%" height="100%" overflow="hidden">
       <canvas
         ref={canvasRef}
         width={width}