87 lines
2.8 KiB
JavaScript
87 lines
2.8 KiB
JavaScript
/**
|
|
* KROW styling for MUI X Charts.
|
|
*
|
|
* MUI X is the drawing layer only — the surfaces, spacing and typography around
|
|
* a chart stay KROW's. This module is what stops the two from disagreeing: the
|
|
* palette is the same one the Recharts components already use (`CHART_TONES`),
|
|
* and the `sx` block restyles MUI's axes, grid and tooltip to the design
|
|
* system's hairlines and type scale rather than Material's defaults.
|
|
*
|
|
* Everything here is presentation. No chart in this folder computes a value.
|
|
*/
|
|
|
|
import { CHART_TONES } from '@/components/ds/ChartContainer';
|
|
|
|
export const TONES = {
|
|
brand: CHART_TONES.brand,
|
|
brandSoft: 'rgba(10, 57, 223, 0.14)',
|
|
warning: '#D97706',
|
|
warningSoft: 'rgba(217, 119, 6, 0.16)',
|
|
success: '#16A34A',
|
|
grid: CHART_TONES.grid,
|
|
axis: CHART_TONES.axis,
|
|
ink: '#0F172A',
|
|
muted: '#64748B',
|
|
};
|
|
|
|
/** Type scale for chart text — matches the caption/overline sizes around it. */
|
|
const LABEL_FONT = {
|
|
fontSize: 11,
|
|
fontFamily: 'var(--font-body)',
|
|
};
|
|
|
|
/**
|
|
* Shared `sx` for every KROW chart.
|
|
*
|
|
* Axis lines and ticks are removed rather than restyled: on a compact chart the
|
|
* value labels carry the reading, and a full axis frame is the "chart junk" the
|
|
* design language avoids. The grid stays as a hairline in the same colour the
|
|
* rest of the product uses for rules.
|
|
*/
|
|
export const chartSx = {
|
|
'& .MuiChartsAxis-line': { display: 'none' },
|
|
'& .MuiChartsAxis-tick': { display: 'none' },
|
|
'& .MuiChartsAxis-tickLabel': {
|
|
...LABEL_FONT,
|
|
fill: `${TONES.muted} !important`,
|
|
},
|
|
'& .MuiChartsGrid-line': {
|
|
stroke: TONES.grid,
|
|
strokeDasharray: '3 3',
|
|
},
|
|
'& .MuiChartsLegend-root': { display: 'none' },
|
|
'& .MuiBarLabel-root': {
|
|
...LABEL_FONT,
|
|
fontWeight: 600,
|
|
fill: `${TONES.ink} !important`,
|
|
},
|
|
};
|
|
|
|
/**
|
|
* Tooltip chrome matching `Surface`.
|
|
*
|
|
* Passed through `slotProps.tooltip` so MUI's popper carries the design
|
|
* system's radius, hairline border and shadow instead of Material elevation.
|
|
*/
|
|
export const tooltipSx = {
|
|
'& .MuiChartsTooltip-root, & .MuiPopper-root .MuiPaper-root': {
|
|
borderRadius: '10px',
|
|
border: `1px solid ${TONES.grid}`,
|
|
boxShadow: '0 8px 24px -12px rgba(15, 23, 42, 0.25)',
|
|
fontFamily: 'var(--font-body)',
|
|
fontSize: 12,
|
|
},
|
|
'& .MuiChartsTooltip-table': { fontSize: 12 },
|
|
'& .MuiChartsTooltip-labelCell, & .MuiChartsTooltip-valueCell': {
|
|
fontFamily: 'var(--font-body)',
|
|
},
|
|
};
|
|
|
|
/*
|
|
* Entry animation is switched off at every call site rather than gated on
|
|
* `prefers-reduced-motion`. Two reasons: a chart that grows out of the floor is
|
|
* the decorative motion this product avoids, and MUI's bar transition leaves
|
|
* every bar at zero height if the frame loop never advances — which is exactly
|
|
* what happens in an inactive tab or an automated browser.
|
|
*/
|