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

Update shorten line names (legend, tooltip, buttons) based on window width

Browse Source
This commit is contained in:
Andreas Weyer
2026-01-16 15:49:43 +00:00
parent dbfaf26591
commit 966006db6a
4 changed files with 175 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/App.tsx
View File

@@ -49,6 +49,19 @@ const MedPlanAssistant = () => {
setShowDisclaimer(true);
};
// Use shorter button labels on narrow screens to keep the pin control visible
const [useCompactButtons, setUseCompactButtons] = React.useState(false);
React.useEffect(() => {
const updateCompact = () => {
setUseCompactButtons(window.innerWidth < 520); // tweakable threshold
};
updateCompact();
window.addEventListener('resize', updateCompact);
return () => window.removeEventListener('resize', updateCompact);
}, []);
const {
appState,
updateNestedState,
@@ -113,19 +126,19 @@ const MedPlanAssistant = () => {
{/* Both Columns - Chart */}
<div className={`xl:col-span-2 bg-card p-6 rounded-lg border min-h-[600px] flex flex-col ${uiSettings.stickyChart ? 'sticky top-2 z-30 shadow-lg' : ''}`}
style={uiSettings.stickyChart ? { borderColor: 'hsl(var(--primary))' } : {}}>
<div className="flex justify-between items-center mb-4">
<div className="flex justify-center gap-2">
<div className="flex flex-wrap items-center gap-3 justify-between mb-4">
<div className="flex flex-wrap justify-center gap-2">
<Button
onClick={() => updateUiSetting('chartView', 'damph')}
variant={chartView === 'damph' ? 'default' : 'secondary'}
>
{t('dAmphetamine')}
{t(useCompactButtons ? 'dAmphetamineShort' : 'dAmphetamine')}
</Button>
<Button
onClick={() => updateUiSetting('chartView', 'ldx')}
variant={chartView === 'ldx' ? 'default' : 'secondary'}
>
{t('lisdexamfetamine')}
{t(useCompactButtons ? 'lisdexamfetamineShort' : 'lisdexamfetamine')}
</Button>
<Button
onClick={() => updateUiSetting('chartView', 'both')}
@@ -138,6 +151,7 @@ const MedPlanAssistant = () => {
onClick={() => updateUiSetting('stickyChart', !uiSettings.stickyChart)}
variant={uiSettings.stickyChart ? 'default' : 'outline'}
size="sm"
className="shrink-0"
title={uiSettings.stickyChart ? t('unpinChart') : t('pinChart')}
>
{uiSettings.stickyChart ? <Pin size={16} /> : <PinOff size={16} />}

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

@@ -10,7 +10,23 @@
*/
import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ReferenceLine, ResponsiveContainer } from 'recharts';
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip as RechartsTooltip,
Legend,
ReferenceLine,
ResponsiveContainer,
} from 'recharts';
import {
Tooltip as UiTooltip,
TooltipTrigger as UiTooltipTrigger,
TooltipContent as UiTooltipContent,
TooltipProvider as UiTooltipProvider,
} from './ui/tooltip';
// Chart color scheme
const CHART_COLORS = {
@@ -69,6 +85,43 @@ const SimulationChart = ({
return () => window.removeEventListener('resize', updateWidth);
}, []);
// Use shorter captions on narrow containers to reduce wrapping
const isCompactLabels = containerWidth < 640; // tweakable threshold for mobile
const seriesLabels = React.useMemo<Record<string, { full: string; short: string; display: string }>>(() => {
const damphFull = t('dAmphetamine');
const damphShort = t('dAmphetamineShort', { defaultValue: damphFull });
const ldxFull = t('lisdexamfetamine');
const ldxShort = t('lisdexamfetamineShort', { defaultValue: ldxFull });
const overlayFull = t('regularPlanOverlay');
const overlayShort = t('regularPlanOverlayShort', { defaultValue: overlayFull });
const useShort = isCompactLabels;
return {
combinedDamph: {
full: damphFull,
short: damphShort,
display: useShort ? damphShort : damphFull,
},
combinedLdx: {
full: ldxFull,
short: ldxShort,
display: useShort ? ldxShort : ldxFull,
},
templateDamph: {
full: `${damphFull} (${overlayFull})`,
short: `${damphShort} (${overlayShort})`,
display: useShort ? `${damphShort} (${overlayShort})` : `${damphFull} (${overlayFull})`,
},
templateLdx: {
full: `${ldxFull} (${overlayFull})`,
short: `${ldxShort} (${overlayShort})`,
display: useShort ? `${ldxShort} (${overlayShort})` : `${ldxFull} (${overlayFull})`,
},
};
}, [isCompactLabels, t]);
const simDays = parseInt(simulationDays, 10) || 3;
// Y-axis takes ~80px, scrollable area gets the rest
@@ -236,71 +289,92 @@ const SimulationChart = ({
? scrollableWidth
: Math.ceil((scrollableWidth / dispDays) * simDays);
const renderLegend = React.useCallback((props: any) => {
const { payload } = props;
if (!payload) return null;
return (
<UiTooltipProvider>
<ul className="flex flex-wrap gap-2 text-xs leading-tight">
{payload.map((item: any) => {
const labelInfo = seriesLabels[item.dataKey] || { display: item.value, full: item.value };
const opacity = item.payload?.opacity ?? 1;
return (
<li key={item.dataKey} className="flex items-center gap-1 max-w-[140px]">
<span
className="inline-block w-3 h-3 rounded-sm"
style={{ backgroundColor: item.color, opacity }}
/>
<UiTooltip>
<UiTooltipTrigger asChild>
<span
className="px-1 py-0.5 rounded-sm bg-white text-black shadow-sm border border-muted truncate inline-block max-w-[100px]"
title={labelInfo.full}
>
{labelInfo.display}
</span>
</UiTooltipTrigger>
<UiTooltipContent className="bg-white text-black shadow-md border max-w-xs">
<span className="font-medium">{labelInfo.full}</span>
</UiTooltipContent>
</UiTooltip>
</li>
);
})}
</ul>
</UiTooltipProvider>
);
}, [seriesLabels]);
return (
<div ref={containerRef} className="flex-grow w-full flex flex-col overflow-y-hidden">
{/* Fixed Legend at top */}
<div style={{ height: 40, marginBottom: 8, paddingLeft: yAxisWidth + 10 }}>
<ResponsiveContainer width="100%" height="100%">
<LineChart data={mergedData} margin={{ top: 0, right: 20, left: 0, bottom: 0 }}>
<Legend
verticalAlign="top"
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') && (
<Line
dataKey="combinedDamph"
name={`${t('dAmphetamine')}`}
stroke={CHART_COLORS.idealDamph}
strokeWidth={2.5}
dot={false}
strokeOpacity={0}
/>
)}
{(chartView === 'ldx' || chartView === 'both') && (
<Line
dataKey="combinedLdx"
name={`${t('lisdexamfetamine')}`}
stroke={CHART_COLORS.idealLdx}
strokeWidth={2}
strokeDasharray="3 3"
dot={false}
strokeOpacity={0}
/>
)}
{templateProfile && daysWithDeviations.size > 0 && (chartView === 'damph' || chartView === 'both') && (
<Line
dataKey="templateDamph"
name={`${t('dAmphetamine')} (${t('regularPlanOverlay')})`}
stroke={CHART_COLORS.idealDamph}
strokeWidth={2}
strokeDasharray="3 3"
dot={false}
strokeOpacity={0}
opacity={0.5}
/>
)}
{templateProfile && daysWithDeviations.size > 0 && (chartView === 'ldx' || chartView === 'both') && (
<Line
dataKey="templateLdx"
name={`${t('lisdexamfetamine')} (${t('regularPlanOverlay')})`}
stroke={CHART_COLORS.idealLdx}
strokeWidth={1.5}
strokeDasharray="3 3"
dot={false}
strokeOpacity={0}
opacity={0.5}
/>
)}
</LineChart>
</ResponsiveContainer>
<div style={{ marginBottom: 8, paddingLeft: yAxisWidth + 10 }}>
{renderLegend({
payload: [
...(chartView === 'damph' || chartView === 'both'
? [
{
dataKey: 'combinedDamph',
value: seriesLabels.combinedDamph.display,
color: CHART_COLORS.idealDamph,
payload: { opacity: 1 },
},
]
: []),
...(chartView === 'ldx' || chartView === 'both'
? [
{
dataKey: 'combinedLdx',
value: seriesLabels.combinedLdx.display,
color: CHART_COLORS.idealLdx,
payload: { opacity: 1 },
},
]
: []),
...(templateProfile && daysWithDeviations.size > 0 && (chartView === 'damph' || chartView === 'both')
? [
{
dataKey: 'templateDamph',
value: seriesLabels.templateDamph.display,
color: CHART_COLORS.idealDamph,
payload: { opacity: 0.5 },
},
]
: []),
...(templateProfile && daysWithDeviations.size > 0 && (chartView === 'ldx' || chartView === 'both')
? [
{
dataKey: 'templateLdx',
value: seriesLabels.templateLdx.display,
color: CHART_COLORS.idealLdx,
payload: { opacity: 0.5 },
},
]
: []),
],
})}
</div>
{/* Chart */}
@@ -321,7 +395,7 @@ const SimulationChart = ({
const h = payload.value as number;
let label: string;
if (showDayTimeOnXAxis === '24h') {
label = `${h % 24}h`;
label = `${h % 24}${t('unitHour')}`;
} else if (showDayTimeOnXAxis === '12h') {
const hour12 = h % 24;
if (hour12 === 12) {
@@ -365,7 +439,7 @@ const SimulationChart = ({
allowDecimals={false}
tickCount={20}
/>
<Tooltip
<RechartsTooltip
content={({ active, payload, label }) => {
if (!active || !payload || payload.length === 0) return null;
@@ -395,13 +469,18 @@ const SimulationChart = ({
<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 labelInfo = seriesLabels[entry.dataKey] || { display: entry.name, full: entry.name };
const isTemplate = entry.dataKey?.toString().includes('template');
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>
<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" title={labelInfo.full}>{labelInfo.display}</span>
<span className="recharts-tooltip-item-separator">: </span>
<span className="recharts-tooltip-item-value">{value} {t('unitNgml')}</span>
</li>
@@ -486,7 +565,7 @@ const SimulationChart = ({
<Line
type="monotone"
dataKey="combinedDamph"
name={`${t('dAmphetamine')}`}
name={seriesLabels.combinedDamph.display}
stroke={CHART_COLORS.idealDamph}
strokeWidth={2.5}
dot={false}
@@ -499,7 +578,7 @@ const SimulationChart = ({
<Line
type="monotone"
dataKey="combinedLdx"
name={`${t('lisdexamfetamine')}`}
name={seriesLabels.combinedLdx.display}
stroke={CHART_COLORS.idealLdx}
strokeWidth={2}
dot={false}
@@ -514,7 +593,7 @@ const SimulationChart = ({
<Line
type="monotone"
dataKey="templateDamph"
name={`${t('dAmphetamine')} (${t('regularPlanOverlay')})`}
name={seriesLabels.templateDamph.display}
stroke={CHART_COLORS.idealDamph}
strokeWidth={2}
strokeDasharray="3 3"
@@ -529,7 +608,7 @@ const SimulationChart = ({
<Line
type="monotone"
dataKey="templateLdx"
name={`${t('lisdexamfetamine')} (${t('regularPlanOverlay')})`}
name={seriesLabels.templateLdx.display}
stroke={CHART_COLORS.idealLdx}
strokeWidth={1.5}
strokeDasharray="3 3"

3
src/locales/de.ts
View File

@@ -6,8 +6,11 @@ export const de = {
// Chart view buttons
dAmphetamine: "d-Amphetamin",
dAmphetamineShort: "d-Amph",
lisdexamfetamine: "Lisdexamfetamin",
lisdexamfetamineShort: "LDX",
both: "Beide",
regularPlanOverlayShort: "Reg.",
// Language selector
languageSelectorLabel: "Sprache",

3
src/locales/en.ts
View File

@@ -6,8 +6,11 @@ export const en = {
// Chart view buttons
dAmphetamine: "d-Amphetamine",
dAmphetamineShort: "d-Amph",
lisdexamfetamine: "Lisdexamfetamine",
lisdexamfetamineShort: "LDX",
both: "Both",
regularPlanOverlayShort: "Reg.",
// Language selector
languageSelectorLabel: "Language",