Files
dyolink/frontend/src/components/today/chart-theme.ts

59 lines
2.0 KiB
TypeScript

import { CATALOG_PALETTE_COLORS } from '@/components/shared/catalog-type-colors';
/** Chart series colors — same palette as treatment / prosthesis catalog types. */
export const TODAY_CHART_COLORS = CATALOG_PALETTE_COLORS;
/**
* Rank-based charts (efficiency report, appointments by provider): same hex pool as
* CATALOG_PALETTE_COLORS, reordered so consecutive ranks are visually distinct.
*/
const CHART_RANK_COLOR_ORDER = [
'#fed7aa', // peach
'#93c5fd', // blue
'#86efac', // green
'#c4b5fd', // purple
'#f9a8d4', // pink
'#bae6fd', // sky
'#fde68a', // yellow
'#99f6e4', // teal
'#fca5a5', // salmon
'#ddd6fe', // lavender
'#fdba74', // orange — separated from peach
'#a5b4fc', // indigo
'#cbd5e1', // slate
'#d9f99d', // lime
'#fecaca', // light coral
'#fbcfe8', // pale pink
] as const;
const chartRankColorSet = new Set<string>(CHART_RANK_COLOR_ORDER);
export const TODAY_CHART_RANK_COLORS: readonly string[] = [
...CHART_RANK_COLOR_ORDER,
...CATALOG_PALETTE_COLORS.filter((color) => !chartRankColorSet.has(color)),
];
export function chartRankColor(index: number): string {
return TODAY_CHART_RANK_COLORS[index % TODAY_CHART_RANK_COLORS.length];
}
/** Primary accent for single-series charts (area, gauge). */
export const TODAY_CHART_PRIMARY_COLOR = CATALOG_PALETTE_COLORS[5] ?? '#c4b5fd';
/** Lab task activity series (completed / received). */
export const TODAY_CHART_COMPLETED_COLOR = CATALOG_PALETTE_COLORS[8] ?? '#86efac';
export const TODAY_CHART_RECEIVED_COLOR = CATALOG_PALETTE_COLORS[11] ?? '#bae6fd';
export const TODAY_CHART_AXIS_COLOR = '#8ea3bf';
export const TODAY_CHART_GRID_COLOR = 'rgba(41, 69, 106, 0.55)';
export const TODAY_CHART_TOOLTIP_BG = '#14253d';
export const TODAY_CHART_TOOLTIP_BORDER = '#29456a';
export const TODAY_CHART_TOOLTIP_STYLE = {
backgroundColor: TODAY_CHART_TOOLTIP_BG,
border: `1px solid ${TODAY_CHART_TOOLTIP_BORDER}`,
borderRadius: '6px',
color: '#f5f9ff',
fontSize: '12px',
} as const;