feat(chart): add @hm-design/chart package with Bar, Line, Donut, Pie, Radar, Area and Radial charts
- new workspace package packages/chart (shadcn/ui Chart + Recharts, HM Theme tokens), examples entry with sample data - Storybook Chart group (src/chart), consumer example (examples/chart), build:chart / build:chart-example scripts - README rewritten as the AI usage guide (install, CSS wiring, chart selection, data rules, verification) - docs: package count/list, Submodule guide (chart workspace, React dedupe), shared AI_GUIDE row, MAINTAINING, story inventory
This commit is contained in:
1 parent
228944a06b
commit
dc9258599c
56 files changed
+3979
-28
No files matched your search
@@ -0,0 +1,40 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite"
|
||||
import {
|
||||
DonutActiveExample,
|
||||
DonutCenterExample,
|
||||
DonutInteractiveExample,
|
||||
DonutPlainExample,
|
||||
} from "@hm-design/chart/examples"
|
||||
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
||||
|
||||
// Sample data only. The four examples share one data set, color mapping and item order.
|
||||
const meta = {
|
||||
title: "Chart/Donut Chart",
|
||||
parameters: { layout: "fullscreen", controls: { disable: true } },
|
||||
} satisfies Meta
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Donut: Story = {
|
||||
name: "Donut Chart",
|
||||
render: () => (
|
||||
<StoryPage>
|
||||
<StoryPageHeader title="Donut Chart" />
|
||||
{/* Same grid as Bar and Line 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="기본형">
|
||||
<DonutPlainExample />
|
||||
</StorySection>
|
||||
<StorySection title="기본형 + 텍스트">
|
||||
<DonutCenterExample />
|
||||
</StorySection>
|
||||
<StorySection title="Active">
|
||||
<DonutActiveExample />
|
||||
</StorySection>
|
||||
<StorySection title="Interactive">
|
||||
<DonutInteractiveExample />
|
||||
</StorySection>
|
||||
</div>
|
||||
</StoryPage>
|
||||
),
|
||||
}
|
||||
Reference in new issue
Block a user