From e398b1cb297dd3b196edd0dc4f9ac02906fdff11 Mon Sep 17 00:00:00 2001
From: Andreas Weyer <dev@cbaoth.de>
Date: Wed, 3 Dec 2025 22:25:49 +0000
Subject: [PATCH] Update translations, special formating for x-axis tick label
 'Noon'

---
 src/components/simulation-chart.tsx | 59 +++++++++++++++++++----------
 src/locales/de.ts                   | 10 ++---
 src/locales/en.ts                   | 10 ++---
 3 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/src/components/simulation-chart.tsx b/src/components/simulation-chart.tsx
index 83c9c92..106be9f 100644
--- a/src/components/simulation-chart.tsx
+++ b/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,32 +203,49 @@ const SimulationChart = ({
                 margin={{ top: 0, right: 20, left: 0, bottom: 5 }}
                 syncId="medPlanChart"
               >
-            <XAxis
-              xAxisId="hours"
-              label={{ value: showDayTimeOnXAxis === 'continuous' ? t('axisLabelHours') : t('axisLabelTimeOfDay'), position: 'insideBottom', offset: -10, style: { fontStyle: 'italic', color: '#666' } }}
-              dataKey="timeHours"
-              type="number"
-              domain={[0, totalHours]}
-              ticks={chartTicks}
-              tickCount={chartTicks.length}
-              interval={0}
-              tickFormatter={(h) => {
+            {/** 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') {
-                  // Show 24h repeating format (0-23h)
-                  return `${h % 24}${t('hour')}`;
+                  label = `${h % 24}h`;
                 } else if (showDayTimeOnXAxis === '12h') {
-                  // Show 12h AM/PM format
                   const hour12 = h % 24;
-                  if (hour12 === 12) return t('tickNoon');
+                  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';
-                  return `${displayHour}${period}`;
+                  label = `${displayHour}${period}`;
                 } else {
-                  // Show continuous time (0, 6, 12, 18, 24, 30, 36, ...)
-                  return `${h}`;
+                  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"
+                type="number"
+                domain={[0, totalHours]}
+                ticks={chartTicks}
+                tickCount={chartTicks.length}
+                interval={0}
+                tick={<CustomTick />}
+              />;
+            })()}
+
             <YAxis
               yAxisId="concentration"
               label={{ value: t('axisLabelConcentration'), angle: -90, position: 'insideLeft', offset: '0 -10', style: { fontStyle: 'italic', color: '#666' } }}
diff --git a/src/locales/de.ts b/src/locales/de.ts
index 2a2efa7..50f34e3 100644
--- a/src/locales/de.ts
+++ b/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",
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 1e05af6..3ba9af8 100644
--- a/src/locales/en.ts
+++ b/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",