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

Update translations, special formating for x-axis tick label 'Noon'

Browse Source
This commit is contained in:
Andreas Weyer
2025-12-03 22:25:49 +00:00
parent 6fb6583ae3
commit e398b1cb29
3 changed files with 48 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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' } }}