shkim4
dc9258599c
- 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
58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import {
|
|
AreaCurveDotLabelExample,
|
|
AreaCurveExample,
|
|
AreaExpandedExample,
|
|
AreaStackedExample,
|
|
AreaStepDotLabelExample,
|
|
AreaStepExample,
|
|
AreaStraightColorLabelExample,
|
|
AreaStraightExample,
|
|
} from "@hm-design/chart/examples"
|
|
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
|
|
|
// Sample data only. The eight examples share the Line Chart data: connection styles as a plain area (left) and with Dots and
|
|
// value Labels (right), then Stacked (running total) and Expanded (each month normalized to 100%).
|
|
const meta = {
|
|
title: "Chart/Area Chart",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
} satisfies Meta
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Area: Story = {
|
|
name: "Area Chart",
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader title="Area Chart" />
|
|
{/* Same grid and order as Line Chart, plus a Stacked | Expanded row. */}
|
|
<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="Curve">
|
|
<AreaCurveExample />
|
|
</StorySection>
|
|
<StorySection title="Curve · Dot + Label">
|
|
<AreaCurveDotLabelExample />
|
|
</StorySection>
|
|
<StorySection title="Straight">
|
|
<AreaStraightExample />
|
|
</StorySection>
|
|
<StorySection title="Straight · Color Dot + Label">
|
|
<AreaStraightColorLabelExample />
|
|
</StorySection>
|
|
<StorySection title="Step">
|
|
<AreaStepExample />
|
|
</StorySection>
|
|
<StorySection title="Step · Dot + Label">
|
|
<AreaStepDotLabelExample />
|
|
</StorySection>
|
|
<StorySection title="Stacked">
|
|
<AreaStackedExample />
|
|
</StorySection>
|
|
<StorySection title="Expanded">
|
|
<AreaExpandedExample />
|
|
</StorySection>
|
|
</div>
|
|
</StoryPage>
|
|
),
|
|
}
|