reading reportData instead of customized data. self massaging data for needed format
This commit is contained in:
@@ -14,7 +14,7 @@ import {
|
||||
ChartDataPoint,
|
||||
HistoryChartProps,
|
||||
} from "./HistoryChart.models";
|
||||
import { formatDisplay, formatLabel } from "./HistoryChart.utils";
|
||||
import { formatDisplay } from "./HistoryChart.utils";
|
||||
|
||||
interface ViewProps extends HistoryChartProps {
|
||||
activeTab: string;
|
||||
@@ -35,7 +35,6 @@ export default function HistoryChartView(props: ViewProps) {
|
||||
tabs,
|
||||
colorScheme,
|
||||
|
||||
// State management
|
||||
mode,
|
||||
periodType,
|
||||
selectedPeriodId,
|
||||
@@ -45,7 +44,6 @@ export default function HistoryChartView(props: ViewProps) {
|
||||
setSelectedPeriodId,
|
||||
toggleComparison,
|
||||
|
||||
// HistoryChart state management
|
||||
activeTab,
|
||||
setActiveTab,
|
||||
currentData,
|
||||
@@ -85,10 +83,9 @@ export default function HistoryChartView(props: ViewProps) {
|
||||
border: "1px solid",
|
||||
borderColor: "divider",
|
||||
bgcolor: isDark ? "background.paper" : colorScheme.light,
|
||||
transition: 'background-color 0.3s ease, border-color 0.3s ease'
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" fontWeight={700} gutterBottom sx={{ color: isDark ? 'text.primary' : colorScheme.text }}>
|
||||
<Typography variant="h6" fontWeight={700} gutterBottom>
|
||||
{header}
|
||||
</Typography>
|
||||
|
||||
@@ -106,12 +103,10 @@ export default function HistoryChartView(props: ViewProps) {
|
||||
))}
|
||||
</ToggleButtonGroup>
|
||||
|
||||
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", mb: 3 }}>
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", mb: 3 }}>
|
||||
<ToggleButtonGroup value={periodType} exclusive onChange={togglePeriodType} size="small">
|
||||
<ToggleButton value="rolling">Rolling</ToggleButton>
|
||||
<ToggleButton value="calendar" disabled={activeDataKey === "daily"}>
|
||||
Calendar
|
||||
</ToggleButton>
|
||||
<ToggleButton value="calendar">Calendar</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
|
||||
<ToggleButton
|
||||
@@ -119,22 +114,6 @@ export default function HistoryChartView(props: ViewProps) {
|
||||
selected={comparison}
|
||||
onChange={toggleComparison}
|
||||
size="small"
|
||||
sx={{
|
||||
textTransform: "none",
|
||||
borderRadius: 2,
|
||||
px: 2,
|
||||
color: "text.secondary",
|
||||
border: "1px solid",
|
||||
borderColor: "divider",
|
||||
"&.Mui-selected": {
|
||||
color: "white",
|
||||
bgcolor: "success.main",
|
||||
borderColor: "success.main"
|
||||
},
|
||||
"&.Mui-selected:hover": {
|
||||
bgcolor: "success.dark"
|
||||
}
|
||||
}}
|
||||
>
|
||||
Compare
|
||||
</ToggleButton>
|
||||
@@ -143,19 +122,7 @@ export default function HistoryChartView(props: ViewProps) {
|
||||
{currentData.length > 0 ? (
|
||||
<Box sx={{ position: "relative", mt: 4 }}>
|
||||
{canGoLeft && (
|
||||
<IconButton
|
||||
onClick={handlePrev}
|
||||
size="small"
|
||||
sx={{
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
top: "50%",
|
||||
transform: "translateY(-50%)",
|
||||
zIndex: 2,
|
||||
bgcolor: "background.paper",
|
||||
boxShadow: 1
|
||||
}}
|
||||
>
|
||||
<IconButton onClick={handlePrev} size="small" sx={{ position: "absolute", left: 0, top: "50%" }}>
|
||||
<ChevronLeftIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
@@ -166,92 +133,66 @@ export default function HistoryChartView(props: ViewProps) {
|
||||
const compareHeight = comparison
|
||||
? ((point.compare?.amount ?? 0) / maxAmount) * 100
|
||||
: 0;
|
||||
const labelHeight = Math.max(currentHeight, compareHeight);
|
||||
|
||||
const isSelected = selectedPeriodId === point.id;
|
||||
const display = formatDisplay(point, activeTab.toLowerCase(), comparison);
|
||||
const display = formatDisplay(point, activeDataKey, comparison);
|
||||
|
||||
return (
|
||||
<Box
|
||||
key={point.id}
|
||||
onClick={() => setSelectedPeriodId(isSelected ? null : point.id)}
|
||||
onClick={() =>
|
||||
setSelectedPeriodId(isSelected ? null : point.id)
|
||||
}
|
||||
sx={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
height: "100%",
|
||||
cursor: "pointer"
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "flex-end", gap: comparison ? 1 : 0.5, height: "100%", position: "relative" }}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: `${labelHeight}%`,
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -6px)",
|
||||
fontSize: "0.65rem",
|
||||
whiteSpace: "nowrap",
|
||||
pointerEvents: "none",
|
||||
color: 'text.secondary',
|
||||
fontWeight: 600
|
||||
}}
|
||||
>
|
||||
{isSelected ? `SELECTED: ${display}` : display}
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: "flex", alignItems: "flex-end", gap: 1, height: "100%" }}>
|
||||
{comparison && (
|
||||
<Box sx={{ width: 8, height: `${compareHeight}%`, bgcolor: isDark ? alpha(colorScheme.primary, 0.3) : alpha(colorScheme.primary, 0.4), borderRadius: '4px 4px 0 0' }} />
|
||||
<Box
|
||||
sx={{
|
||||
width: 8,
|
||||
height: `${compareHeight}%`,
|
||||
bgcolor: alpha(colorScheme.primary, 0.4),
|
||||
borderRadius: "4px 4px 0 0"
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
width: comparison ? 10 : 16,
|
||||
width: 12,
|
||||
height: `${currentHeight}%`,
|
||||
bgcolor: point.highlighted ? colorScheme.primary : isDark ? alpha(colorScheme.primary, 0.8) : alpha(colorScheme.primary, 0.9),
|
||||
borderRadius: '4px 4px 0 0',
|
||||
boxShadow: point.highlighted ? `0 0 10px ${alpha(colorScheme.primary, 0.5)}` : 'none'
|
||||
bgcolor: isSelected ? "warning.main" : colorScheme.primary,
|
||||
borderRadius: "4px 4px 0 0"
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 1.5, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", lineHeight: 1.1 }}>
|
||||
<Typography variant="caption" sx={{ fontSize: "0.7rem", opacity: 0.8, color: 'text.primary', fontWeight: 500 }}>
|
||||
{formatLabel(point.id, activeDataKey)}
|
||||
</Typography>
|
||||
<Typography variant="caption">
|
||||
{point.label}
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
fontSize: "0.65rem",
|
||||
color: "text.disabled",
|
||||
visibility: comparison && point.compare && activeDataKey !== "daily" ? "visible" : "hidden"
|
||||
}}
|
||||
>
|
||||
{point.compare ? formatLabel(point.compare.id, activeDataKey) : "placeholder"}
|
||||
{comparison && point.compare && (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{point.compare.label}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Typography variant="caption">
|
||||
{display}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
|
||||
{canGoRight && (
|
||||
<IconButton
|
||||
onClick={handleNext}
|
||||
size="small"
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
top: "50%",
|
||||
transform: "translateY(-50%)",
|
||||
zIndex: 2,
|
||||
bgcolor: "background.paper",
|
||||
boxShadow: 1
|
||||
}}
|
||||
>
|
||||
<IconButton onClick={handleNext} size="small" sx={{ position: "absolute", right: 0, top: "50%" }}>
|
||||
<ChevronRightIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user