apps/khata-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes for toggles

Browse Source
This commit is contained in:
Vishesh 'ironeagle' Bangotra
2026-04-07 13:32:16 +05:30
parent e4abe61781
commit b1db439dda
1 changed files with 58 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/HistoryChart.tsx
View File

@@ -103,7 +103,12 @@ export default function HistoryChart({
: 1; : 1;
const [startIndex, setStartIndex] = React.useState(0); const [startIndex, setStartIndex] = React.useState(0);
const visibleCount = activeDataKey == 'daily' ? 7 : 6; const visibleCountDataTabMapping = {
daily: 7,
weekly: 6,
monthly: 4,
}
const visibleCount = visibleCountDataTabMapping[activeDataKey];
const total = currentData.length; const total = currentData.length;
// clamp startIndex so we always show full 5 (when possible) // clamp startIndex so we always show full 5 (when possible)
@@ -163,29 +168,60 @@ export default function HistoryChart({
))} ))}
</ToggleButtonGroup> </ToggleButtonGroup>
<ToggleButtonGroup <Box
value={period} sx={{
exclusive display: "flex",
onChange={(_, v) => v && onPeriodChange(v)} alignItems: "center",
size="small" justifyContent: "space-between",
sx={{ mb: 2 }} mb: 3
}}
> >
<ToggleButton value="rolling">Rolling</ToggleButton> {/* Rolling / Calendar */}
<ToggleButton value="calendar" disabled={activeDataKey === "daily"}> <ToggleButtonGroup
Calendar value={period}
</ToggleButton> exclusive
</ToggleButtonGroup> onChange={(_, v) => v && onPeriodChange(v)}
size="small"
>
<ToggleButton value="rolling">Rolling</ToggleButton>
<ToggleButton
value="calendar"
disabled={activeDataKey === "daily"}
>
Calendar
</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup {/* Compare toggle */}
value={comparison ? "on" : "off"} <ToggleButton
exclusive value="compare"
onChange={(_, v) => setComparison(v === "on")} selected={comparison}
size="small" onChange={() => setComparison(!comparison)}
sx={{ mb: 2 }} size="small"
> sx={{
<ToggleButton value="off">Single</ToggleButton> textTransform: "none",
<ToggleButton value="on">Compare</ToggleButton> borderRadius: 2,
</ToggleButtonGroup> px: 2,
// OFF
color: "text.secondary",
border: "1px solid",
borderColor: "divider",
// ON
"&.Mui-selected": {
color: "white",
bgcolor: "success.main",
borderColor: "success.main"
},
"&.Mui-selected:hover": {
bgcolor: "success.dark"
}
}}
>
Compare
</ToggleButton>
</Box>
{currentData.length > 0 ? ( {currentData.length > 0 ? (
<Box sx={{ position: "relative", mt: 4 }}> <Box sx={{ position: "relative", mt: 4 }}>