cardosofelipe/fast-next-template
Template
1
0
Fork 1
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Refactor charts to use centralized color palette configuration

Browse Source 
- 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.
This commit is contained in:
Felipe Cardoso
2025-11-07 12:41:53 +01:00
parent b749f62abd
commit 51ef4632e6
5 changed files with 119 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/charts/OrganizationDistributionChart.tsx
View File

@@ -7,6 +7,7 @@
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
import { ChartCard } from './ChartCard';
import { CHART_PALETTES } from '@/lib/chart-colors';
export interface OrganizationDistributionData {
name: string;
@@ -51,18 +52,21 @@ export function OrganizationDistributionChart({
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
<XAxis
dataKey="name"
className="text-xs"
tick={{ fill: 'hsl(var(--muted-foreground))' }}
stroke="hsl(var(--border))"
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
tickLine={{ stroke: 'hsl(var(--border))' }}
/>
<YAxis
className="text-xs"
tick={{ fill: 'hsl(var(--muted-foreground))' }}
stroke="hsl(var(--border))"
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
tickLine={{ stroke: 'hsl(var(--border))' }}
/>
<Tooltip
contentStyle={{
backgroundColor: 'hsl(var(--popover))',
border: '1px solid hsl(var(--border))',
borderRadius: '6px',
color: 'hsl(var(--popover-foreground))',
}}
labelStyle={{ color: 'hsl(var(--popover-foreground))' }}
/>
@@ -74,13 +78,13 @@ export function OrganizationDistributionChart({
<Bar
dataKey="members"
name="Total Members"
fill="hsl(var(--primary))"
fill={CHART_PALETTES.bar[0]}
radius={[4, 4, 0, 0]}
/>
<Bar
dataKey="activeMembers"
name="Active Members"
fill="hsl(var(--chart-2))"
fill={CHART_PALETTES.bar[1]}
radius={[4, 4, 0, 0]}
/>
</BarChart>

24
frontend/src/components/charts/SessionActivityChart.tsx
View File

@@ -8,6 +8,7 @@
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
import { ChartCard } from './ChartCard';
import { format, subDays } from 'date-fns';
import { CHART_PALETTES } from '@/lib/chart-colors';
export interface SessionActivityData {
date: string;
@@ -52,29 +53,32 @@ export function SessionActivityChart({ data, loading, error }: SessionActivityCh
<AreaChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
<defs>
<linearGradient id="colorActive" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="hsl(var(--primary))" stopOpacity={0.8} />
<stop offset="95%" stopColor="hsl(var(--primary))" stopOpacity={0.1} />
<stop offset="5%" stopColor={CHART_PALETTES.area[0]} stopOpacity={0.8} />
<stop offset="95%" stopColor={CHART_PALETTES.area[0]} stopOpacity={0.1} />
</linearGradient>
<linearGradient id="colorNew" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="hsl(var(--chart-2))" stopOpacity={0.8} />
<stop offset="95%" stopColor="hsl(var(--chart-2))" stopOpacity={0.1} />
<stop offset="5%" stopColor={CHART_PALETTES.area[1]} stopOpacity={0.8} />
<stop offset="95%" stopColor={CHART_PALETTES.area[1]} stopOpacity={0.1} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
<XAxis
dataKey="date"
className="text-xs"
tick={{ fill: 'hsl(var(--muted-foreground))' }}
stroke="hsl(var(--border))"
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
tickLine={{ stroke: 'hsl(var(--border))' }}
/>
<YAxis
className="text-xs"
tick={{ fill: 'hsl(var(--muted-foreground))' }}
stroke="hsl(var(--border))"
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
tickLine={{ stroke: 'hsl(var(--border))' }}
/>
<Tooltip
contentStyle={{
backgroundColor: 'hsl(var(--popover))',
border: '1px solid hsl(var(--border))',
borderRadius: '6px',
color: 'hsl(var(--popover-foreground))',
}}
labelStyle={{ color: 'hsl(var(--popover-foreground))' }}
/>
@@ -87,7 +91,7 @@ export function SessionActivityChart({ data, loading, error }: SessionActivityCh
type="monotone"
dataKey="activeSessions"
name="Active Sessions"
stroke="hsl(var(--primary))"
stroke={CHART_PALETTES.area[0]}
strokeWidth={2}
fillOpacity={1}
fill="url(#colorActive)"
@@ -96,7 +100,7 @@ export function SessionActivityChart({ data, loading, error }: SessionActivityCh
type="monotone"
dataKey="newSessions"
name="New Sessions"
stroke="hsl(var(--chart-2))"
stroke={CHART_PALETTES.area[1]}
strokeWidth={2}
fillOpacity={1}
fill="url(#colorNew)"

16
frontend/src/components/charts/UserGrowthChart.tsx
View File

@@ -8,6 +8,7 @@
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
import { ChartCard } from './ChartCard';
import { format, subDays } from 'date-fns';
import { CHART_PALETTES } from '@/lib/chart-colors';
export interface UserGrowthData {
date: string;
@@ -54,18 +55,21 @@ export function UserGrowthChart({ data, loading, error }: UserGrowthChartProps)
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
<XAxis
dataKey="date"
className="text-xs"
tick={{ fill: 'hsl(var(--muted-foreground))' }}
stroke="hsl(var(--border))"
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
tickLine={{ stroke: 'hsl(var(--border))' }}
/>
<YAxis
className="text-xs"
tick={{ fill: 'hsl(var(--muted-foreground))' }}
stroke="hsl(var(--border))"
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
tickLine={{ stroke: 'hsl(var(--border))' }}
/>
<Tooltip
contentStyle={{
backgroundColor: 'hsl(var(--popover))',
border: '1px solid hsl(var(--border))',
borderRadius: '6px',
color: 'hsl(var(--popover-foreground))',
}}
labelStyle={{ color: 'hsl(var(--popover-foreground))' }}
/>
@@ -78,7 +82,7 @@ export function UserGrowthChart({ data, loading, error }: UserGrowthChartProps)
type="monotone"
dataKey="totalUsers"
name="Total Users"
stroke="hsl(var(--primary))"
stroke={CHART_PALETTES.line[0]}
strokeWidth={2}
dot={false}
activeDot={{ r: 6 }}
@@ -87,7 +91,7 @@ export function UserGrowthChart({ data, loading, error }: UserGrowthChartProps)
type="monotone"
dataKey="activeUsers"
name="Active Users"
stroke="hsl(var(--chart-2))"
stroke={CHART_PALETTES.line[1]}
strokeWidth={2}
dot={false}
activeDot={{ r: 6 }}

11
frontend/src/components/charts/UserStatusChart.tsx
View File

@@ -7,6 +7,7 @@
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
import { ChartCard } from './ChartCard';
import { CHART_PALETTES } from '@/lib/chart-colors';
export interface UserStatusData {
name: string;
@@ -23,10 +24,10 @@ interface UserStatusChartProps {
// Generate mock data for development/demo
function generateMockData(): UserStatusData[] {
return [
{ name: 'Active', value: 142, color: 'hsl(var(--chart-1))' },
{ name: 'Inactive', value: 28, color: 'hsl(var(--chart-2))' },
{ name: 'Pending', value: 15, color: 'hsl(var(--chart-3))' },
{ name: 'Suspended', value: 5, color: 'hsl(var(--chart-4))' },
{ name: 'Active', value: 142, color: CHART_PALETTES.pie[0] },
{ name: 'Inactive', value: 28, color: CHART_PALETTES.pie[1] },
{ name: 'Pending', value: 15, color: CHART_PALETTES.pie[2] },
{ name: 'Suspended', value: 5, color: CHART_PALETTES.pie[3] },
];
}
@@ -67,6 +68,7 @@ export function UserStatusChart({ data, loading, error }: UserStatusChartProps)
backgroundColor: 'hsl(var(--popover))',
border: '1px solid hsl(var(--border))',
borderRadius: '6px',
color: 'hsl(var(--popover-foreground))',
}}
labelStyle={{ color: 'hsl(var(--popover-foreground))' }}
/>
@@ -75,6 +77,7 @@ export function UserStatusChart({ data, loading, error }: UserStatusChartProps)
height={36}
wrapperStyle={{
paddingTop: '20px',
color: 'hsl(var(--foreground))',
}}
/>
</PieChart>

78
frontend/src/lib/chart-colors.ts Normal file
View File

@@ -0,0 +1,78 @@
/**
* 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}`;
}