Chart Utils

## Source Code File: `src/utils/functions/chart-utils.ts` ```typescript export type ColorUtility = 'bg' | 'stroke' | 'fill' | 'text'; export const chartColors = { blue: { bg: 'bg-blue-500', stroke: 'stroke-blue-500', fill: 'fill-blue-500', text: 'text-blue-500', hex: '#3b82f6', }, emerald: { bg: 'bg-emerald-500', stroke: 'stroke-emerald-500', fill: 'fill-emerald-500', text: 'text-emerald-500', hex: '#10b981', }, violet: { bg: 'bg-violet-500', stroke: 'stroke-violet-500', fill: 'fill-violet-500', text: 'text-violet-500', hex: '#8b5cf6', }, amber: { bg: 'bg-amber-500', stroke: 'stroke-amber-500', fill: 'fill-amber-500', text: 'text-amber-500', hex: '#f59e0b', }, gray: { bg: 'bg-gray-500', stroke: 'stroke-gray-500', fill: 'fill-gray-500', text: 'text-gray-500', hex: '#6b7280', }, cyan: { bg: 'bg-cyan-500', stroke: 'stroke-cyan-500', fill: 'fill-cyan-500', text: 'text-cyan-500', hex: '#06b6d4', }, pink: { bg: 'bg-pink-500', stroke: 'stroke-pink-500', fill: 'fill-pink-500', text: 'text-pink-500', hex: '#ec4899', }, lime: { bg: 'bg-lime-500', stroke: 'stroke-lime-500', fill: 'fill-lime-500', text: 'text-lime-500', hex: '#84cc16', }, fuchsia: { bg: 'bg-fuchsia-500', stroke: 'stroke-fuchsia-500', fill: 'fill-fuchsia-500', text: 'text-fuchsia-500', hex: '#a855f7', }, red: { bg: 'bg-red-500', stroke: 'stroke-red-500', fill: 'fill-red-500', text: 'text-red-500', hex: '#ef4444', }, } as const satisfies { [color: string]: { [key in ColorUtility]: string; } & { hex: string; }; }; export type AvailableChartColorsKeys = keyof typeof chartColors; export const AvailableChartColors: AvailableChartColorsKeys[] = Object.keys( chartColors ) as Array; export const constructCategoryColors = ( categories: string[], colors: AvailableChartColorsKeys[] ): Map => { const categoryColors = new Map(); categories.forEach((category, index) => { categoryColors.set(category, colors[index % colors.length]); }); return categoryColors; }; export const getColorClassName = ( color: AvailableChartColorsKeys, type: ColorUtility | 'hex' ): string => { const fallbackColor = { bg: 'bg-gray-500', stroke: 'stroke-gray-500', fill: 'fill-gray-500', text: 'text-gray-500', hex: '#6b7280', }; return chartColors[color]?.[type] ?? fallbackColor[type]; }; ``` ## Description This module provides predefined color palettes optimized for chart visualizations. It includes: - **chartColors**: Constant object mapping color names to Tailwind CSS classes (bg, stroke, fill, text) and hex values - **AvailableChartColors**: Array of all available color keys for easy iteration - **constructCategoryColors()**: Creates a mapping between categories and colors, cycling through available colors - **getColorClassName()**: Returns the appropriate color class or hex value for a given color key and utility type