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.
39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
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.
|
|
const meta = {
|
|
title: "Chart/Pie Chart",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
} satisfies Meta
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Pie: Story = {
|
|
name: "Pie Chart",
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader title="Pie Chart" />
|
|
{/* Same grid as Bar, Line and Donut Chart: two per row from 1024px, one below; source order is the mobile order. */}
|
|
<div className="grid grid-cols-1 gap-x-6 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
|
|
<StorySection title="기본 Pie">
|
|
<PiePlainExample />
|
|
</StorySection>
|
|
<StorySection title="Pie + Label">
|
|
<PieLabelExample />
|
|
</StorySection>
|
|
<StorySection title="Pie + Label List">
|
|
<PieLabelListExample />
|
|
</StorySection>
|
|
<StorySection title="Pie + Stacked">
|
|
<PieStackedExample />
|
|
</StorySection>
|
|
<StorySection title="입체형">
|
|
<PieSolidExample />
|
|
</StorySection>
|
|
</div>
|
|
</StoryPage>
|
|
),
|
|
}
|