website

commit 4e804bcfd383e5cb94746bd5645857f3b6fa11ae
parent c239a3998e2a80e0694dcc0fef868ff878c11454
Author: hrryt <harry@mayesfield.uk>
Date:   Sat,  8 Aug 2026 15:59:42 +0100

Add Quadratic,CoordinateLabel graphing components

Diffstat:
A
src/components/graphing/CoordinateLabel.jsx
 | 
5
+++++
M
src/components/graphing/Graph.jsx
 | 
10
+++++-----
M
src/components/graphing/Quadratic.jsx
 | 
22
++++++++++++++++++++--
M
src/pages/Home.jsx
 | 
11
++++++-----
M
src/styles/svg.css
 | 
2
+-

5 files changed, 37 insertions(+), 13 deletions(-)
diff --git a/src/components/graphing/CoordinateLabel.jsx b/src/components/graphing/CoordinateLabel.jsx
@@ -0,0 +1,5 @@
+import Label from './Label.jsx';
+
+export default function CoordinateLabel({x, y, position}) {
+  return <Label x={x} y={y} position={position}>{`(${x},${y})`}</Label>;
+}
diff --git a/src/components/graphing/Graph.jsx b/src/components/graphing/Graph.jsx
@@ -2,7 +2,7 @@ import Label from './Label.jsx';
 
 function Grid({ viewBox }) {
   const [ minX, minY, width, height ] = viewBox;
-  const d = `M ${minX} ${minY} h ${width} ${`m -${width} 1 h ${width}`.repeat(height)} v -${height} ${`m -1 ${height} v -${height}`.repeat(width)}`;
+  const d = `M ${minX},${minY} h ${width} ${`m -${width},1 h ${width}`.repeat(height)} v -${height} ${`m -1,${height} v -${height}`.repeat(width)}`;
   return <path id="grid" d={d} />;
 }
 
@@ -10,8 +10,8 @@ function Axes({ viewBox }) {
   const [ minX, minY, width, height ] = viewBox;
   return (
     <g>
-      <path id="axes" d={`M ${minX} 0 h ${width-.1}`} marker-end="url(#arrow)"/>
-      <path id="axes" d={`M 0 ${minY} v ${height-.1}`} marker-end="url(#arrow)"/>
+      <path id="axes" d={`M ${minX},0 h ${width-.1}`} marker-end="url(#arrow)"/>
+      <path id="axes" d={`M 0,${minY} v ${height-.1}`} marker-end="url(#arrow)"/>
     </g>
   );
 }
@@ -39,7 +39,7 @@ function AxisTicks({ viewBox }) {
   )
 }
 
-export default function Graph({ children, width="500", height="500", viewBox=[-5, -5, 10, 10] }) {
+export default function Graph({ children, viewBox, width="500", height="500" }) {
   return (
     <svg
       width={width} height={height} viewBox={viewBox.join(' ')}
@@ -54,7 +54,7 @@ export default function Graph({ children, width="500", height="500", viewBox=[-5
           markerUnits="strokeWidth"
           orient="auto"
         >
-          <path d="M 0 0 L 4 2 L 0 4 z" id='arrowhead' />
+          <path d="M 0,0 L 4,2 L 0,4 z" id='arrowhead' />
         </marker>
       </defs>
       <Grid viewBox={viewBox} />
diff --git a/src/components/graphing/Quadratic.jsx b/src/components/graphing/Quadratic.jsx
@@ -1,3 +1,21 @@
-export default function Quadratic() {
-  return <path d="M -3 9 Q 0 -9 3 9" />;
+export default function Quadratic({ a, b, c, viewBox }) {
+  const [ minX, minY, width, height ] = viewBox;
+  function f(x) { return a*x*x + b*x + c; }
+
+  const turnX = -b / (2*a);
+
+  const maxX = minX + width;
+  // Assumes turnX within viewBox!
+  const halfWidth = Math.max(
+    turnX -  minX,
+     maxX - turnX
+  );
+
+  const startX = turnX - halfWidth;
+  const   endX = turnX + halfWidth;
+
+  const endY = f(endX);
+  const controlY = 2*f(turnX) - endY;
+
+  return <path d={`M ${startX},${endY} Q ${turnX},${controlY} ${endX},${endY}`} />;
 }
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -1,19 +1,20 @@
 import Window from '../components/Window.jsx';
 import Graph from '../components/graphing/Graph.jsx';
 import Quadratic from '../components/graphing/Quadratic.jsx';
-import Label from '../components/graphing/Label.jsx';
+import CoordinateLabel from '../components/graphing/CoordinateLabel.jsx';
 
 export default function Home() {
+  const viewBox = [-5, -4, 7, 8];
   return (
     <main>
       <Window title="Home">
         <p>Hello World!</p>
         <div class="field-border kern">
-          <Graph viewBox={[-5, -1, 7, 6]}>
-            <Quadratic />
-            <Label x="-2" y="4" position="left">x²</Label>
+          <Graph viewBox={viewBox}>
+            <Quadratic a={2} b={1} c={-3} viewBox={viewBox} />
+            <CoordinateLabel x={-.25} y={-3.125} position="bottom" />
             <polygon points="1,2 -1,1, -4,3" />
-            <Label x="-4" y="3" position="top">(-4, 3)</Label>
+            <CoordinateLabel x={-4} y={3} position="top" />
           </Graph>
         </div>
       </Window>
diff --git a/src/styles/svg.css b/src/styles/svg.css
@@ -29,6 +29,6 @@ path#arrowhead {
 text {
   font-size: 0.02em;
   stroke: white;
-  stroke-width: 0.02;
+  stroke-width: 0.03;
   paint-order: stroke;
 }