feat(chart): add @hm-design/chart package with Bar, Line, Donut, Pie, Radar, Area and Radial charts
- new workspace package packages/chart (shadcn/ui Chart + Recharts, HM Theme tokens), examples entry with sample data - Storybook Chart group (src/chart), consumer example (examples/chart), build:chart / build:chart-example scripts - README rewritten as the AI usage guide (install, CSS wiring, chart selection, data rules, verification) - docs: package count/list, Submodule guide (chart workspace, React dedupe), shared AI_GUIDE row, MAINTAINING, story inventory
This commit is contained in:
1 parent
228944a06b
commit
dc9258599c
56 files changed
+3979
-28
No files matched your search
@@ -0,0 +1,44 @@
|
||||
import type { ChartConfig } from "./chart"
|
||||
|
||||
/** HM series colors. They resolve to existing HM palette tokens (see chart.css), never to HEX values. */
|
||||
export const chartColors = [
|
||||
"var(--hm-chart-1)",
|
||||
"var(--hm-chart-2)",
|
||||
"var(--hm-chart-3)",
|
||||
"var(--hm-chart-4)",
|
||||
"var(--hm-chart-5)",
|
||||
] as const
|
||||
|
||||
/** Light end of each HM series color (stacked bar segments): the same palette family, lighter (see chart.css). */
|
||||
export const chartLightColors = [
|
||||
"var(--hm-chart-1-light)",
|
||||
"var(--hm-chart-2-light)",
|
||||
"var(--hm-chart-3-light)",
|
||||
"var(--hm-chart-4-light)",
|
||||
"var(--hm-chart-5-light)",
|
||||
] as const
|
||||
|
||||
/** One data series. `key` becomes a CSS variable name (`--color-<key>`), so use letters, digits, `-` or `_` only. */
|
||||
export type ChartSeries = {
|
||||
key: string
|
||||
label: string
|
||||
/** Any CSS color. Defaults to the HM series color for the series position. */
|
||||
color?: string
|
||||
/** Light end of a stacked bar segment (any CSS color). Defaults to the HM light color of the series position.
|
||||
* A series with a custom `color` and no `lightColor` is drawn as a flat segment. */
|
||||
lightColor?: string
|
||||
}
|
||||
|
||||
export function seriesColor(index: number, color?: string) {
|
||||
return color ?? chartColors[index % chartColors.length]
|
||||
}
|
||||
|
||||
export function seriesLightColor(index: number, color?: string, lightColor?: string) {
|
||||
return lightColor ?? color ?? chartLightColors[index % chartLightColors.length]
|
||||
}
|
||||
|
||||
export function seriesToConfig(series: readonly ChartSeries[]): ChartConfig {
|
||||
return Object.fromEntries(
|
||||
series.map((item, index) => [item.key, { label: item.label, color: seriesColor(index, item.color) }]),
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user