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

2025-12-04 01:15:30 +00:00
parent 8bd69516c4
commit 509cb33422
4 changed files with 67 additions and 20 deletions
--- a/src/components/settings.tsx
+++ b/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')}
          />
--- a/src/components/simulation-chart.tsx
+++ b/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"
--- a/src/locales/de.ts
+++ b/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",
--- a/src/locales/en.ts
+++ b/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",