website

commit 4a29c8c91bad7bd788117a8e0084e576e159080e
parent 75c195ba2af70d9262d86570a865a0745f4519d3
Author: hrryt <harry@mayesfield.uk>
Date:   Fri, 14 Aug 2026 16:03:00 +0100

Add axis labels

Diffstat:
M
src/components/graphing/Graph.jsx
 | 
28
+++++++++++++++++-----------
M
src/components/graphing/Label.jsx
 | 
3
++-

2 files changed, 19 insertions(+), 12 deletions(-)
diff --git a/src/components/graphing/Graph.jsx b/src/components/graphing/Graph.jsx
@@ -22,20 +22,26 @@ function AxisTicks({ every = 1, viewBox }) {
   return (
     <g>
       <g>
-        {Array.from({ length: width - 1 }).map((_, i) => {
-          const x = i + minX + 1;
-          if (x == 0 || x % every) { return; }
-          return <Label point={[x, 0]} position="bottom">{x}</Label>;
-        })}
+        <g>
+          {Array.from({ length: width - 1 }).map((_, i) => {
+            const x = i + minX + 1;
+            if (x == 0 || x % every) { return; }
+            return <Label point={[x, 0]} position="bottom">{x}</Label>;
+          })}
+        </g>
+        <g>
+          {Array.from({ length: height - 1 }).map((_, i) => {
+            const y = i + minY + 1;
+            if (y == 0 || y % every) { return; }
+            return <Label point={[0, y]} position="left">{y}</Label>;
+          })}
+        </g>
+        <Label point={[0, 0]} position="bottom-left">0</Label>
       </g>
       <g>
-        {Array.from({ length: height - 1 }).map((_, i) => {
-          const y = i + minY + 1;
-          if (y == 0 || y % every) { return; }
-          return <Label point={[0, y]} position="left">{y}</Label>;
-        })}
+        <Label weight="bold" point={[minX + width, 0]} position="bottom-left" spacing={7}>x</Label>
+        <Label weight="bold" point={[0, minY + height]} position="bottom-left" spacing={7}>y</Label>
       </g>
-      <Label point={[0, 0]} position="bottom-left">0</Label>
     </g>
   )
 }
diff --git a/src/components/graphing/Label.jsx b/src/components/graphing/Label.jsx
@@ -19,7 +19,7 @@ function getPosition(position) {
   }
 }
 
-export default function Label({ point, position='central', spacing=3, colour='auto', children }) {
+export default function Label({ point, position='central', spacing=3, weight="normal", colour='auto', children }) {
   const [x, y] = point;
   const [dominantBaseline, textAnchor, dx, dy] = getPosition(position);
   const scaledSpacing = spacing * useContext(ScaleFactorContext);
@@ -29,6 +29,7 @@ export default function Label({ point, position='central', spacing=3, colour='au
       dominant-baseline={dominantBaseline}
       text-anchor={textAnchor}
       class={getColourClass(colour)}
+      font-weight={weight}
     >
       {children}
     </text>