feat(chart): add solid (thick) pie and donut charts

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.
This commit is contained in:
shkim4 committed 2026-11-06 17:44:49 +09:00
1 parent dc9258599c
commit db0bfe2d34
10 files changed
+332 -8

No files matched your search

+19
View File
@@ -18,6 +18,25 @@ export const chartLightColors = [
"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