Update translations, special formating for x-axis tick label 'Noon'

src/components/simulation-chart.tsx

@@ -169,7 +169,7 @@ const SimulationChart = ({
             {templateProfile && (chartView === 'damph' || chartView === 'both') && (
               <Line
                 dataKey="templateDamph"
-                name={`${t('dAmphetamine')} (${t('regularPlan')} ${t('continuation')})`}
+                name={`${t('dAmphetamine')} (${t('regularPlanOverlay')})`}
                 stroke={CHART_COLORS.idealDamph}
                 strokeWidth={2}
                 strokeDasharray="3 3"
@@ -180,7 +180,7 @@ const SimulationChart = ({
             {templateProfile && (chartView === 'ldx' || chartView === 'both') && (
               <Line
                 dataKey="templateLdx"
-                name={`${t('lisdexamfetamine')} (${t('regularPlan')} ${t('continuation')})`}
+                name={`${t('lisdexamfetamine')} (${t('regularPlanOverlay')})`}
                 stroke={CHART_COLORS.idealLdx}
                 strokeWidth={1.5}
                 strokeDasharray="3 3"
@@ -203,7 +203,37 @@ const SimulationChart = ({
                 margin={{ top: 0, right: 20, left: 0, bottom: 5 }}
                 syncId="medPlanChart"
               >
-            <XAxis
+            {/** Custom tick renderer to italicize 'Noon' only in 12h mode */}
+            {(() => {
+              const CustomTick = (props: any) => {
+                const { x, y, payload } = props;
+                const h = payload.value as number;
+                let label: string;
+                if (showDayTimeOnXAxis === '24h') {
+                  label = `${h % 24}h`;
+                } else if (showDayTimeOnXAxis === '12h') {
+                  const hour12 = h % 24;
+                  if (hour12 === 12) {
+                    label = t('tickNoon');
+                    return (
+                      <text x={x} y={y + 12} textAnchor="middle" fontStyle="italic" fill="#666">
+                        {label}
+                      </text>
+                    );
+                  }
+                  const displayHour = hour12 === 0 ? 12 : hour12 > 12 ? hour12 - 12 : hour12;
+                  const period = hour12 < 12 ? 'a' : 'p';
+                  label = `${displayHour}${period}`;
+                } else {
+                  label = `${h}`;
+                }
+                return (
+                  <text x={x} y={y + 12} textAnchor="middle" fill="#666">
+                    {label}
+                  </text>
+                );
+              };
+              return <XAxis
                 xAxisId="hours"
                 label={{ value: showDayTimeOnXAxis === 'continuous' ? t('axisLabelHours') : t('axisLabelTimeOfDay'), position: 'insideBottom', offset: -10, style: { fontStyle: 'italic', color: '#666' } }}
                 dataKey="timeHours"
@@ -212,23 +242,10 @@ const SimulationChart = ({
                 ticks={chartTicks}
                 tickCount={chartTicks.length}
                 interval={0}
-              tickFormatter={(h) => {
-                if (showDayTimeOnXAxis === '24h') {
-                  // Show 24h repeating format (0-23h)
-                  return `${h % 24}${t('hour')}`;
-                } else if (showDayTimeOnXAxis === '12h') {
-                  // Show 12h AM/PM format
-                  const hour12 = h % 24;
-                  if (hour12 === 12) return t('tickNoon');
-                  const displayHour = hour12 === 0 ? 12 : hour12 > 12 ? hour12 - 12 : hour12;
-                  const period = hour12 < 12 ? 'a' : 'p';
-                  return `${displayHour}${period}`;
-                } else {
-                  // Show continuous time (0, 6, 12, 18, 24, 30, 36, ...)
-                  return `${h}`;
-                }
-              }}
-            />
+                tick={<CustomTick />}
+              />;
+            })()}
+
             <YAxis
               yAxisId="concentration"
               label={{ value: t('axisLabelConcentration'), angle: -90, position: 'insideLeft', offset: '0 -10', style: { fontStyle: 'italic', color: '#666' } }}

src/locales/de.ts

@@ -54,10 +54,10 @@ export const de = {
   xAxisTimeFormat: "Zeitformat",
   xAxisFormatContinuous: "Fortlaufend",
   xAxisFormatContinuousDesc: "Endlose Sequenz (0h, 6h, 12h...)",
-  xAxisFormat24h: "24h",
+  xAxisFormat24h: "Tageszeit (24h)",
   xAxisFormat24hDesc: "Wiederholender 0-24h Zyklus",
-  xAxisFormat12h: "12h AM/PM",
-  xAxisFormat12hDesc: "Wiederholend 12h mit AM/PM",
+  xAxisFormat12h: "Tageszeit (12h AM/PM)",
+  xAxisFormat12hDesc: "Wiederholend 12h Zyklus im AM/PM Format",
   showTemplateDayInChart: "Regulären Plan kontinuierlich im Diagramm anzeigen",
   showDayReferenceLines: "Tagestrenner anzeigen",
   simulationDuration: "Simulationsdauer",
@@ -95,8 +95,8 @@ export const de = {
 
   // Day-based schedule
   regularPlan: "Regulärer Plan",
-  deviatingPlan: "Abweichender Plan",
-  continuation: "Fortsetzung",
+  deviatingPlan: "Abweichung vom Plan",
+  regularPlanOverlay: "Regulär",
   dayNumber: "Tag {{number}}",
   cloneDay: "Tag klonen",
   addDay: "Tag hinzufügen",

src/locales/en.ts

@@ -54,10 +54,10 @@ export const en = {
   xAxisTimeFormat: "Time Format",
   xAxisFormatContinuous: "Continuous",
   xAxisFormatContinuousDesc: "Endless sequence (0h, 6h, 12h...)",
-  xAxisFormat24h: "24h",
+  xAxisFormat24h: "Time of Day (24h)",
   xAxisFormat24hDesc: "Repeating 0-24h cycle",
-  xAxisFormat12h: "12h AM/PM",
-  xAxisFormat12hDesc: "Repeating 12h with AM/PM",
+  xAxisFormat12h: "Time of Day (12h AM/PM)",
+  xAxisFormat12hDesc: "Repeating 12h cycle in AM/PM format",
   showTemplateDayInChart: "Overlay regular plan in chart",
   showDayReferenceLines: "Show day separators",
   simulationDuration: "Simulation Duration",
@@ -95,8 +95,8 @@ export const en = {
 
   // Day-based schedule
   regularPlan: "Regular Plan",
-  deviatingPlan: "Deviating Plan",
-  continuation: "continuation",
+  deviatingPlan: "Deviation from Plan",
+  regularPlanOverlay: "Regular",
   dayNumber: "Day {{number}}",
   cloneDay: "Clone day",
   addDay: "Add day",