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

+4
View File
@@ -4,6 +4,7 @@ import {
DonutCenterExample,
DonutInteractiveExample,
DonutPlainExample,
DonutSolidExample,
} from "@hm-design/chart/examples"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
@@ -34,6 +35,9 @@ export const Donut: Story = {
<StorySection title="Interactive">
<DonutInteractiveExample />
</StorySection>
<StorySection title="입체형">
<DonutSolidExample />
</StorySection>
</div>
</StoryPage>
),
+4 -1
View File
@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from "@storybook/react-vite"
import { PieLabelExample, PieLabelListExample, PiePlainExample, PieStackedExample } from "@hm-design/chart/examples"
import { PieLabelExample, PieLabelListExample, PiePlainExample, PieSolidExample, PieStackedExample } from "@hm-design/chart/examples"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
// Sample data only. All pies share one item list and color mapping; the stacked pie draws two series as concentric rings.
@@ -29,6 +29,9 @@ export const Pie: Story = {
<StorySection title="Pie + Stacked">
<PieStackedExample />
</StorySection>
<StorySection title="입체형">
<PieSolidExample />
</StorySection>
</div>
</StoryPage>
),