cbaoth/med-plan-assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update shorten day separator labels based on chart width

Browse Source
This commit is contained in:
Andreas Weyer
2026-01-16 14:08:36 +00:00
parent e1aaa24186
commit 678bd6c7b6
3 changed files with 46 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/simulation-chart.tsx
View File

@@ -184,24 +184,18 @@ const SimulationChart = ({
}, [combinedProfile, templateProfile, simulationDays]);
// Determine label for each day's reference line
const getDayLabel = React.useCallback((dayNumber: number) => {
if (dayNumber === 1) return t('refLineRegularPlan');
const getDayLabel = React.useCallback((dayNumber: number, useShort = false) => {
if (dayNumber === 1) return t(useShort ? 'refLineRegularPlanShort' : 'refLineRegularPlan');
// Check if this day has an actual schedule entry (not auto-filled)
const hasSchedule = days && days.length >= dayNumber;
// Check if this day deviates from template
const hasDeviation = daysWithDeviations.has(dayNumber);
if (!hasDeviation) {
// Matches template
return t('refLineNoDeviation');
return t(useShort ? 'refLineNoDeviationShort' : 'refLineNoDeviation');
} else if (!hasSchedule) {
// Deviates but no schedule = recovering
return t('refLineRecovering');
return t(useShort ? 'refLineRecoveringShort' : 'refLineRecovering');
} else {
// Has deviation and has schedule = actual irregular intake
return t('refLineIrregularIntake');
return t(useShort ? 'refLineIrregularIntakeShort' : 'refLineIrregularIntake');
}
}, [days, daysWithDeviations, t]);
@@ -424,25 +418,37 @@ const SimulationChart = ({
/>
<CartesianGrid strokeDasharray="1 1" xAxisId="hours" yAxisId="concentration" />
{showDayReferenceLines !== false && [...Array(dispDays+1).keys()].map(day => (
<ReferenceLine
key={`day-${day+1}`}
x={24 * (day+1)}
label={{
value: t('refLineDayX', { x: day+1 }) + ' ' + getDayLabel(day + 1),
position: 'insideTopRight',
style: {
fontSize: '0.75rem',
fontStyle: 'italic',
fill: day === 0 ? CHART_COLORS.regularPlanDivider : CHART_COLORS.deviationDayDivider
}
}}
stroke={day === 0 ? CHART_COLORS.regularPlanDivider : CHART_COLORS.deviationDayDivider}
//strokeDasharray="0 0"
xAxisId="hours"
yAxisId="concentration"
/>
))}
{showDayReferenceLines !== false && [...Array(dispDays + 1).keys()].map(day => {
// Determine whether to use compact day labels to avoid overlap on narrow screens
const pxPerDay = scrollableWidth / Math.max(1, dispDays);
let label = "";
if (pxPerDay < 75) { // tweakable threshold, minimal label
label = t('refLineDayShort', { x: day + 1 });
} else if (pxPerDay < 110) { // tweakable threshold, compact label
label = t('refLineDayShort', { x: day + 1 }) + ' ' + getDayLabel(day + 1, true);
} else { // full label
label = t('refLineDayX', { x: day + 1 }) + ' ' + getDayLabel(day + 1);
}
return (
<ReferenceLine
key={`day-${day + 1}`}
x={24 * (day + 1)}
label={{
value: `${label}`,
position: 'insideTopRight',
style: {
fontSize: '0.75rem',
fontStyle: 'italic',
fill: day === 0 ? CHART_COLORS.regularPlanDivider : CHART_COLORS.deviationDayDivider
}
}}
stroke={day === 0 ? CHART_COLORS.regularPlanDivider : CHART_COLORS.deviationDayDivider}
//strokeDasharray="0 0"
xAxisId="hours"
yAxisId="concentration"
/>
);
})}
{showTherapeuticRange && (chartView === 'damph' || chartView === 'both') && (
<ReferenceLine
y={parseFloat(therapeuticRange.min) || 0}