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:
1 parent
dc9258599c
commit
db0bfe2d34
10 files changed
+332
-8
No files matched your search
@@ -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>
|
||||
),
|
||||
|
||||
@@ -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>
|
||||
),
|
||||
|
||||
Reference in new issue
Block a user