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

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

Browse Source
This commit is contained in:
Andreas Weyer
2025-12-04 01:15:30 +00:00
parent 8bd69516c4
commit 509cb33422
4 changed files with 67 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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"