Update improved legend labels for tablate curve to match opacity of the curve

src/components/settings.tsx

@@ -114,7 +114,7 @@ const Settings = ({
             increment={1}
             min={3}
             max={7}
-            unit={t('days')}
+            unit={t('unitDays')}
             required={true}
             errorMessage={t('errorNumberRequired')}
           />
@@ -128,7 +128,7 @@ const Settings = ({
             increment={1}
             min={1}
             max={parseInt(simulationDays, 10) || 3}
-            unit={t('days')}
+            unit={t('unitDays')}
             required={true}
             errorMessage={t('errorNumberRequired')}
           />

src/components/simulation-chart.tsx

@@ -183,6 +183,11 @@ const SimulationChart = ({
               align="left"
               height={36}
               wrapperStyle={{ paddingLeft: 0 }}
+              formatter={(value: string) => {
+                // Apply lighter color to template overlay entries in legend
+                const isTemplate = value.includes(t('regularPlanOverlay'));
+                return <span style={{ opacity: isTemplate ? 0.5 : 1 }}>{value}</span>;
+              }}
             />
             {/* Invisible lines just to show in legend */}
             {(chartView === 'damph' || chartView === 'both') && (
@@ -206,7 +211,7 @@ const SimulationChart = ({
                 strokeOpacity={0}
               />
             )}
-            {templateProfile && (chartView === 'damph' || chartView === 'both') && (
+            {templateProfile && daysWithDeviations.size > 0 && (chartView === 'damph' || chartView === 'both') && (
               <Line
                 dataKey="templateDamph"
                 name={`${t('dAmphetamine')} (${t('regularPlanOverlay')})`}
@@ -215,9 +220,10 @@ const SimulationChart = ({
                 strokeDasharray="3 3"
                 dot={false}
                 strokeOpacity={0}
+                opacity={0.5}
               />
             )}
-            {templateProfile && (chartView === 'ldx' || chartView === 'both') && (
+            {templateProfile && daysWithDeviations.size > 0 && (chartView === 'ldx' || chartView === 'both') && (
               <Line
                 dataKey="templateLdx"
                 name={`${t('lisdexamfetamine')} (${t('regularPlanOverlay')})`}
@@ -226,6 +232,7 @@ const SimulationChart = ({
                 strokeDasharray="3 3"
                 dot={false}
                 strokeOpacity={0}
+                opacity={0.5}
               />
             )}
           </LineChart>
@@ -294,11 +301,50 @@ const SimulationChart = ({
               tickCount={20}
             />
             <Tooltip
-              formatter={(value: any, name) => [`${typeof value === 'number' ? value.toFixed(1) : value} ${t('ngml')}`, name]}
-              labelFormatter={(label, payload) => {
+              content={({ active, payload, label }) => {
+                if (!active || !payload || payload.length === 0) return null;
+
                 // Extract timeHours from the payload data point
-                const timeHours = payload?.[0]?.payload?.timeHours ?? label;
-                return `${t('hour').replace('h', 'Hour')}: ${timeHours}${t('hour')}`;
+                const timeHours = payload[0]?.payload?.timeHours ?? label;
+                const h = typeof timeHours === 'number' ? timeHours : parseFloat(timeHours);
+
+                // Format time to match x-axis format
+                let timeLabel: string;
+                if (showDayTimeOnXAxis === '24h') {
+                  timeLabel = `${h % 24}${t('unitHour')}`;
+                } else if (showDayTimeOnXAxis === '12h') {
+                  const hour12 = h % 24;
+                  if (hour12 === 12) {
+                    timeLabel = t('tickNoon');
+                  } else {
+                    const displayHour = hour12 === 0 ? 12 : hour12 > 12 ? hour12 - 12 : hour12;
+                    const period = hour12 < 12 ? 'a' : 'p';
+                    timeLabel = `${displayHour}${period}`;
+                  }
+                } else {
+                  timeLabel = `${h}${t('unitHour')}`;
+                }
+
+                return (
+                  <div className="recharts-default-tooltip" style={{ margin: 0, padding: 10, backgroundColor: 'rgb(255, 255, 255)', border: '1px solid rgb(204, 204, 204)', whiteSpace: 'nowrap' }}>
+                    <p className="recharts-tooltip-label" style={{ margin: 0 }}>{t('time')}: {timeLabel}</p>
+                    <ul className="recharts-tooltip-item-list" style={{ padding: 0, margin: 0 }}>
+                      {payload.map((entry: any, index: number) => {
+                        const isTemplate = entry.name?.includes(t('regularPlanOverlay'));
+                        const opacity = isTemplate ? 0.5 : 1;
+                        const value = typeof entry.value === 'number' ? entry.value.toFixed(1) : entry.value;
+
+                        return (
+                          <li key={`item-${index}`} className="recharts-tooltip-item" style={{ display: 'block', paddingTop: 4, paddingBottom: 4, color: entry.color, opacity }}>
+                            <span className="recharts-tooltip-item-name">{entry.name}</span>
+                            <span className="recharts-tooltip-item-separator">: </span>
+                            <span className="recharts-tooltip-item-value">{value} {t('unitNgml')}</span>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </div>
+                );
               }}
               wrapperStyle={{ pointerEvents: 'none', zIndex: 200 }}
               allowEscapeViewBox={{ x: false, y: false }}
@@ -391,7 +437,7 @@ const SimulationChart = ({
               <Line
                 type="monotone"
                 dataKey="templateDamph"
-                name={`${t('dAmphetamine')} (${t('regularPlan')} ${t('continuation')})`}
+                name={`${t('dAmphetamine')} (${t('regularPlanOverlay')})`}
                 stroke={CHART_COLORS.idealDamph}
                 strokeWidth={2}
                 strokeDasharray="3 3"
@@ -406,7 +452,7 @@ const SimulationChart = ({
               <Line
                 type="monotone"
                 dataKey="templateLdx"
-                name={`${t('lisdexamfetamine')} (${t('regularPlan')} ${t('continuation')})`}
+                name={`${t('lisdexamfetamine')} (${t('regularPlanOverlay')})`}
                 stroke={CHART_COLORS.idealLdx}
                 strokeWidth={1.5}
                 strokeDasharray="3 3"

src/locales/de.ts

@@ -48,6 +48,7 @@ export const de = {
   refLineDayX: "Tag {{x}}",
   refLineMin: "Min",
   refLineMax: "Max",
+  tooltipHour: "Stunde",
 
   // Settings
   diagramSettings: "Diagramm-Einstellungen",
@@ -61,7 +62,6 @@ export const de = {
   showTemplateDayInChart: "Regulären Plan in abweichenden Tagen zusätzlich einblenden",
   showDayReferenceLines: "Tagestrenner anzeigen",
   simulationDuration: "Simulationsdauer",
-  days: "Tage",
   displayedDays: "Sichtbare Tage (im Fokus)",
   yAxisRange: "Y-Achsen-Bereich (Zoom)",
   yAxisRangeAutoButton: "A",
@@ -70,7 +70,6 @@ export const de = {
   therapeuticRange: "Therapeutischer Bereich (Referenzlinien)",
   dAmphetamineParameters: "d-Amphetamin Parameter",
   halfLife: "Halbwertszeit",
-  hours: "h",
   lisdexamfetamineParameters: "Lisdexamfetamin Parameter",
   conversionHalfLife: "Umwandlungs-Halbwertszeit",
   absorptionRate: "Absorptionsrate",
@@ -78,8 +77,10 @@ export const de = {
   resetAllSettings: "Alle Einstellungen zurücksetzen",
 
   // Units
-  mg: "mg",
-  ngml: "ng/ml",
+  unitMg: "mg",
+  unitNgml: "ng/ml",
+  unitHour: "h",
+  unitDays: "Tage",
 
   // Reset confirmation
   resetConfirmation: "Bist du sicher, dass du alle Einstellungen auf die Standardwerte zurücksetzen möchtest? Dies kann nicht rückgängig gemacht werden.",
@@ -97,7 +98,7 @@ export const de = {
   // Day-based schedule
   regularPlan: "Regulärer Plan",
   deviatingPlan: "Abweichung vom Plan",
-  regularPlanOverlay: "Regulär",
+  regularPlanOverlay: "nach Plan",
   dayNumber: "Tag {{number}}",
   cloneDay: "Tag klonen",
   addDay: "Tag hinzufügen",

src/locales/en.ts

@@ -61,7 +61,6 @@ export const en = {
   showTemplateDayInChart: "Overlay regular plan for deviating days",
   showDayReferenceLines: "Show day separators",
   simulationDuration: "Simulation Duration",
-  days: "Days",
   displayedDays: "Visible Days (in Focus)",
   yAxisRange: "Y-Axis Range (Zoom)",
   yAxisRangeAutoButton: "A",
@@ -70,7 +69,6 @@ export const en = {
   therapeuticRange: "Therapeutic Range (Reference Lines)",
   dAmphetamineParameters: "d-Amphetamine Parameters",
   halfLife: "Half-life",
-  hours: "h",
   lisdexamfetamineParameters: "Lisdexamfetamine Parameters",
   conversionHalfLife: "Conversion Half-life",
   absorptionRate: "Absorption Rate",
@@ -78,8 +76,10 @@ export const en = {
   resetAllSettings: "Reset All Settings",
 
   // Units
-  mg: "mg",
-  ngml: "ng/ml",
+  unitMg: "mg",
+  unitNgml: "ng/ml",
+  unitHour: "h",
+  unitDays: "Days",
 
   // Reset confirmation
   resetConfirmation: "Are you sure you want to reset all settings to default values? This cannot be undone.",
@@ -107,7 +107,7 @@ export const en = {
   // Day-based schedule
   regularPlan: "Regular Plan",
   deviatingPlan: "Deviation from Plan",
-  regularPlanOverlay: "Regular",
+  regularPlanOverlay: "as planned",
   dayNumber: "Day {{number}}",
   cloneDay: "Clone day",
   addDay: "Add day",