diff --git a/src/components/simulation-chart.tsx b/src/components/simulation-chart.tsx index 83c9c92..106be9f 100644 --- a/src/components/simulation-chart.tsx +++ b/src/components/simulation-chart.tsx @@ -169,7 +169,7 @@ const SimulationChart = ({ {templateProfile && (chartView === 'damph' || chartView === 'both') && ( - { + {/** 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 ( + + {label} + + ); + } 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 ( + + {label} + + ); + }; + return } + />; + })()} +