diff --git a/src/components/settings.tsx b/src/components/settings.tsx
index a51bfa8..61329cd 100644
--- 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')}
/>
diff --git a/src/components/simulation-chart.tsx b/src/components/simulation-chart.tsx
index 9787444..8a891b6 100644
--- 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 {value};
+ }}
/>
{/* 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') && (
)}
- {templateProfile && (chartView === 'ldx' || chartView === 'both') && (
+ {templateProfile && daysWithDeviations.size > 0 && (chartView === 'ldx' || chartView === 'both') && (
)}
@@ -294,11 +301,50 @@ const SimulationChart = ({
tickCount={20}
/>
[`${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 (
+
+
{t('time')}: {timeLabel}
+
+ {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 (
+ -
+ {entry.name}
+ :
+ {value} {t('unitNgml')}
+
+ );
+ })}
+
+
+ );
}}
wrapperStyle={{ pointerEvents: 'none', zIndex: 200 }}
allowEscapeViewBox={{ x: false, y: false }}
@@ -391,7 +437,7 @@ const SimulationChart = ({