cardosofelipe/syndarix
1
0
Fork 0
forked from cardosofelipe/fast-next-template
Code Issues 18 Pull Requests 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>