cameleer/design-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add recharts dependency, move CHART_COLORS to rechartsTheme

Browse Source 
Also fixes duplicate CHART_COLORS export in index.ts by switching from
export * to a named export of rechartsTheme only.
This commit is contained in:
hsiegeln
2026-04-12 19:33:28 +02:00
parent e07afe37f2
commit 3fc5fb8267
4 changed files with 420 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/design-system/index.ts
View File

@@ -11,4 +11,4 @@ export { BreadcrumbProvider, useBreadcrumb } from './providers/BreadcrumbProvide
export type { BreadcrumbItem } from './providers/BreadcrumbProvider'
export * from './utils/hashColor'
export * from './utils/timePresets'
export * from './utils/rechartsTheme'
export { rechartsTheme } from './utils/rechartsTheme'

28
src/design-system/utils/rechartsTheme.ts
View File

@@ -1,22 +1,18 @@
import { CHART_COLORS } from '../composites/_chart-utils'
export const CHART_COLORS = [
'var(--chart-1)',
'var(--chart-2)',
'var(--chart-3)',
'var(--chart-4)',
'var(--chart-5)',
'var(--chart-6)',
'var(--chart-7)',
'var(--chart-8)',
]
/**
* Pre-configured Recharts prop objects that match the design system's
* chart styling. Spread these onto Recharts sub-components:
*
* ```tsx
* import { rechartsTheme, CHART_COLORS } from '@cameleer/design-system'
* import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip, Legend } from 'recharts'
*
* <LineChart data={data}>
* <CartesianGrid {...rechartsTheme.cartesianGrid} />
* <XAxis dataKey="name" {...rechartsTheme.xAxis} />
* <YAxis {...rechartsTheme.yAxis} />
* <Tooltip {...rechartsTheme.tooltip} />
* <Legend {...rechartsTheme.legend} />
* <Line stroke={CHART_COLORS[0]} strokeWidth={2} dot={false} />
* </LineChart>
* ```
* chart styling. Used internally by ThemedChart and available for
* consumers composing Recharts directly.
*/
export const rechartsTheme = {
colors: CHART_COLORS,