Clean up chart labels and unify pain chart colours

Remove redundant (km) from Weekly Distance title, capitalise all
Y-axis labels, and use consistent colours across pain charts
(red for During, blue for After).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/Charts.js

@@ -4,18 +4,19 @@ import {
 } from 'recharts';
 import './Charts.css';
 
+const PAIN_DURING_COLOR = '#ef4444';
+const PAIN_AFTER_COLOR = '#3b82f6';
+
 const PAIN_CHARTS = [
   {
     location: 'left_knee',
     title: 'Left Knee Pain',
-    color: '#ef4444',
     duringKey: 'left_knee_during',
     afterKey: 'left_knee_after',
   },
   {
     location: 'right_knee',
     title: 'Right Knee Pain',
-    color: '#8b5cf6',
     duringKey: 'right_knee_during',
     afterKey: 'right_knee_after',
   },
@@ -46,13 +47,13 @@ function Charts({ data, painData }) {
   return (
     <div className="charts">
       <div className="chart-container card">
-        <h2>Weekly Distance (km)</h2>
+        <h2>Weekly Distance</h2>
         <ResponsiveContainer width="100%" height={300}>
           <BarChart data={chartData}>
             <CartesianGrid strokeDasharray="3 3" />
             <XAxis dataKey="label" />
             <YAxis>
-              <Label value="km" angle={-90} position="insideLeft" style={{ textAnchor: 'middle', fill: '#6b7280' }} />
+              <Label value="Km" angle={-90} position="insideLeft" style={{ textAnchor: 'middle', fill: '#6b7280' }} />
             </YAxis>
             <Tooltip />
             <Bar dataKey="distance" fill="var(--color-primary)" radius={[4, 4, 0, 0]} />
@@ -66,7 +67,7 @@ function Charts({ data, painData }) {
             <CartesianGrid strokeDasharray="3 3" />
             <XAxis dataKey="label" />
             <YAxis>
-              <Label value="load" angle={-90} position="insideLeft" style={{ textAnchor: 'middle', fill: '#6b7280' }} />
+              <Label value="Load" angle={-90} position="insideLeft" style={{ textAnchor: 'middle', fill: '#6b7280' }} />
             </YAxis>
             <Tooltip />
             <Line
@@ -87,7 +88,7 @@ function Charts({ data, painData }) {
               <CartesianGrid strokeDasharray="3 3" />
               <XAxis dataKey="label" />
               <YAxis domain={[0, 10]}>
-                <Label value="pain" angle={-90} position="insideLeft" style={{ textAnchor: 'middle', fill: '#6b7280' }} />
+                <Label value="Pain" angle={-90} position="insideLeft" style={{ textAnchor: 'middle', fill: '#6b7280' }} />
               </YAxis>
               <Tooltip />
               <Legend />
@@ -95,7 +96,7 @@ function Charts({ data, painData }) {
                 type="monotone"
                 dataKey={chart.duringKey}
                 name="During"
-                stroke={chart.color}
+                stroke={PAIN_DURING_COLOR}
                 strokeWidth={2}
                 dot={{ r: 4 }}
                 connectNulls
@@ -104,7 +105,7 @@ function Charts({ data, painData }) {
                 type="monotone"
                 dataKey={chart.afterKey}
                 name="After"
-                stroke={chart.color}
+                stroke={PAIN_AFTER_COLOR}
                 strokeWidth={2}
                 strokeDasharray="5 3"
                 dot={{ r: 4 }}