51ef4632e6
- Introduced `chart-colors.ts` utility to manage reusable color configurations across all chart components (`UserGrowthChart`, `OrganizationDistributionChart`, `SessionActivityChart`, `UserStatusChart`). - Updated chart components to replace inline color definitions with `CHART_PALETTES` for improved consistency and maintainability. - Enhanced tooltip, legend, and axis styles to align with updated project theming.
79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
/**
|
|
* Chart Color Configuration
|
|
* Provides vibrant, accessible colors for data visualization
|
|
* Converts design system colors to recharts-compatible formats
|
|
*/
|
|
|
|
export const CHART_COLORS = {
|
|
// Primary blue palette - vibrant and professional
|
|
primary: '#3b82f6', // Blue 500
|
|
primaryLight: '#60a5fa', // Blue 400
|
|
primaryDark: '#2563eb', // Blue 600
|
|
|
|
// Secondary accent colors - complementary palette
|
|
accent1: '#8b5cf6', // Violet 500
|
|
accent2: '#ec4899', // Pink 500
|
|
accent3: '#f59e0b', // Amber 500
|
|
accent4: '#10b981', // Emerald 500
|
|
accent5: '#06b6d4', // Cyan 500
|
|
|
|
// Status colors
|
|
success: '#10b981', // Emerald 500
|
|
warning: '#f59e0b', // Amber 500
|
|
error: '#ef4444', // Red 500
|
|
info: '#3b82f6', // Blue 500
|
|
|
|
// Neutral colors for supporting elements
|
|
muted: '#94a3b8', // Slate 400
|
|
mutedDark: '#64748b', // Slate 500
|
|
};
|
|
|
|
// Chart-specific color palettes for different chart types
|
|
export const CHART_PALETTES = {
|
|
// Line chart palette - 2 contrasting colors
|
|
line: [CHART_COLORS.primary, CHART_COLORS.accent1],
|
|
|
|
// Bar chart palette - 2 complementary colors
|
|
bar: [CHART_COLORS.primary, CHART_COLORS.accent2],
|
|
|
|
// Area chart palette - 2 harmonious colors with gradients
|
|
area: [CHART_COLORS.primary, CHART_COLORS.accent5],
|
|
|
|
// Pie chart palette - 4-5 distinct colors
|
|
pie: [
|
|
CHART_COLORS.primary,
|
|
CHART_COLORS.accent1,
|
|
CHART_COLORS.accent3,
|
|
CHART_COLORS.accent4,
|
|
],
|
|
|
|
// Multi-series palette - for charts with many data series
|
|
multi: [
|
|
CHART_COLORS.primary,
|
|
CHART_COLORS.accent1,
|
|
CHART_COLORS.accent2,
|
|
CHART_COLORS.accent3,
|
|
CHART_COLORS.accent4,
|
|
CHART_COLORS.accent5,
|
|
],
|
|
};
|
|
|
|
// Gradient definitions for area charts
|
|
export const CHART_GRADIENTS = {
|
|
primary: {
|
|
start: CHART_COLORS.primary,
|
|
end: `${CHART_COLORS.primary}20`, // 20% opacity
|
|
},
|
|
accent: {
|
|
start: CHART_COLORS.accent1,
|
|
end: `${CHART_COLORS.accent1}20`, // 20% opacity
|
|
},
|
|
};
|
|
|
|
// Helper function to get color with opacity
|
|
export function withOpacity(color: string, opacity: number): string {
|
|
// Convert opacity (0-1) to hex (00-FF)
|
|
const hex = Math.round(opacity * 255).toString(16).padStart(2, '0');
|
|
return `${color}${hex}`;
|
|
}
|