shkim4
ed7e8790ec
- CENTER plain page layout and shorter reference demo notes (spec values moved to the CENTER README); chart specimen descriptions trimmed - Org chart page names and previews; SW width rows follow the 30px frame margin (1980 / 1065 / 727px) and the SW tests match the current layout - Story inventory regenerated and WORKING_CONTEXT updated
48 lines
2.6 KiB
TypeScript
48 lines
2.6 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { HMLineChart } from "@hm-design/chart"
|
|
import { sampleLineCompare, sampleLinePointColors } from "@hm-design/chart/examples"
|
|
import { StoryPage, StoryPageHeader, StorySectionGrid } from "@/components/story-page"
|
|
import { ChartSampleNotice, ChartSpecimen, chartGrid, chartPageClass } from "./chart-story"
|
|
|
|
// Sample data only. All six charts share one data set and axis range, so connection styles compare directly: curve, straight
|
|
// and step, each as a plain line and with Dots and value labels. Same data and props as the @hm-design/chart/examples cards;
|
|
// open layout (no card): see chart-story.tsx.
|
|
const meta = {
|
|
title: "Chart/Line Chart",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
} satisfies Meta
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Line: Story = {
|
|
name: "Line Chart",
|
|
render: () => (
|
|
<StoryPage className={chartPageClass}>
|
|
<StoryPageHeader title="Line Chart" />
|
|
<ChartSampleNotice />
|
|
{/* Source order is the mobile order. 1024px: Curve | Curve + labels per row. 1200px: three columns, plain styles in the
|
|
first row and their Dot + Label versions below. */}
|
|
<StorySectionGrid className={chartGrid.pairs}>
|
|
<ChartSpecimen title="Curve">
|
|
<HMLineChart {...sampleLineCompare} curve="monotone" dots={false} label="월별 접수·완료 곡선형 선 차트(예시 데이터)" />
|
|
</ChartSpecimen>
|
|
<ChartSpecimen title="Curve · Dot + Label">
|
|
<HMLineChart {...sampleLineCompare} curve="monotone" pointLabels label="월별 접수·완료 곡선형 Dot·값 라벨 선 차트(예시 데이터)" />
|
|
</ChartSpecimen>
|
|
<ChartSpecimen title="Straight">
|
|
<HMLineChart {...sampleLineCompare} curve="linear" dots={false} label="월별 접수·완료 직선형 선 차트(예시 데이터)" />
|
|
</ChartSpecimen>
|
|
<ChartSpecimen title="Straight · Color Dot + Label">
|
|
<HMLineChart {...sampleLinePointColors} curve="linear" pointLabels label="월별 접수·완료 직선형 포인트별 색상 선 차트(예시 데이터)" />
|
|
</ChartSpecimen>
|
|
<ChartSpecimen title="Step">
|
|
<HMLineChart {...sampleLineCompare} curve="step" dots={false} label="월별 접수·완료 계단형 선 차트(예시 데이터)" />
|
|
</ChartSpecimen>
|
|
<ChartSpecimen title="Step · Dot + Label">
|
|
<HMLineChart {...sampleLineCompare} curve="step" pointLabels label="월별 접수·완료 계단형 Dot·값 라벨 선 차트(예시 데이터)" />
|
|
</ChartSpecimen>
|
|
</StorySectionGrid>
|
|
</StoryPage>
|
|
),
|
|
}
|