shkim4
db0bfe2d34
Add HMSolidPieChart and HMSolidDonutChart: a tilted, SVG-drawn disc with an outer wall and, for the donut, an inner wall seen through the hole. Same data, slice angles, order, legend and tooltip as the 2D charts; the tooltip is the same on the top face and the walls and follows the pointer. The existing 2D charts and their props are unchanged. - Side walls use darker HM tokens (--hm-chart-1-side .. --hm-chart-5-side) and a color-mix darkening for custom colors; shared chart tokens are untouched. - Add a "입체형" example to the Pie Chart and Donut Chart stories (PieSolidExample, DonutSolidExample); ExampleCard description is now optional. - Document usage and constraints in the chart package README.
64 lines
2.4 KiB
TypeScript
64 lines
2.4 KiB
TypeScript
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
|
|
|
|
/** Darker tone of each HM series color, for the side walls of the solid (thick) pie and donut: the same palette family, the next step darker (see chart.css). */
|
|
export const chartSideColors = [
|
|
"var(--hm-chart-1-side)",
|
|
"var(--hm-chart-2-side)",
|
|
"var(--hm-chart-3-side)",
|
|
"var(--hm-chart-4-side)",
|
|
"var(--hm-chart-5-side)",
|
|
] as const
|
|
|
|
/**
|
|
* Side-wall color of a solid slice. An HM series color (default or passed explicitly) maps to its darker HM token; any other CSS
|
|
* color is darkened where it is drawn, so no shared token changes.
|
|
*/
|
|
export function seriesSideColor(index: number, color?: string) {
|
|
if (color === undefined) return chartSideColors[index % chartSideColors.length]
|
|
const known = (chartColors as readonly string[]).indexOf(color)
|
|
return known >= 0 ? chartSideColors[known] : `color-mix(in srgb, ${color} 68%, black)`
|
|
}
|
|
|
|
/** 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) }]),
|
|
)
|
|
}
|