From 7ff852952ab6486554997baf7fd629d66ceddeab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=88=98=ED=98=84?= Date: Thu, 12 Nov 2026 17:12:09 +0900 Subject: [PATCH] style(chart): open chart pages and surface/track tokens - @hm-design/chart: add --hm-chart-track (radial tracks, horizontal bar hover band; warm neutral light) and --hm-chart-surface (slice / segment gaps, Dot rings, label halos, radial meter center; white by default) - --hm-chart-bar-name-halo stays an optional override and falls back to --hm-chart-surface; official chart.tsx unchanged - Storybook Chart pages (Bar / Line / Area / Donut / Pie / Radar / Radial): open layout without example cards, 2-4 responsive columns, one sample data notice per page, surface token set to the content background - Same sample data, props, tooltip and interaction as the example cards; examples entry and consumer example unchanged - README: surface / track token usage --- packages/chart/README.md | 4 +- packages/chart/src/chart.css | 26 ++++- packages/chart/src/components/donut-chart.tsx | 2 +- packages/chart/src/components/line-points.tsx | 2 +- packages/chart/src/components/pie-chart.tsx | 6 +- .../chart/src/components/radial-chart.tsx | 6 +- packages/chart/src/components/solid-chart.tsx | 2 +- src/chart/area-chart.stories.tsx | 77 +++++++-------- src/chart/bar-chart.stories.tsx | 48 +++++----- src/chart/chart-story.tsx | 76 +++++++++++++++ src/chart/donut-chart.stories.tsx | 96 ++++++++++++------- src/chart/line-chart.stories.tsx | 63 ++++++------ src/chart/pie-chart.stories.tsx | 44 +++++---- src/chart/radar-chart.stories.tsx | 40 ++++---- src/chart/radial-chart.stories.tsx | 59 ++++++------ 15 files changed, 337 insertions(+), 214 deletions(-) create mode 100644 src/chart/chart-story.tsx diff --git a/packages/chart/README.md b/packages/chart/README.md index b1a62cb..7135000 100644 --- a/packages/chart/README.md +++ b/packages/chart/README.md @@ -25,6 +25,7 @@ - `@hm-design/ui/theme.css`는 차트 색 별칭(`--hm-chart-*`)이 가리키는 `--hm-sem-*` 토큰과 Noto Sans KR 글꼴을 제공합니다. - 차트 스타일(`@hm-design/chart/style.css`)은 JS 진입점(`@hm-design/chart`, `@hm-design/chart/examples`)이 자동으로 불러오므로 따로 import하지 않습니다. - ``·``에 배경·글꼴을 정하는 것은 소비 앱의 몫입니다(차트는 전역 규칙을 넣지 않습니다). +- 흰색이 아닌 배경(카드 없이 콘텐츠 배경 위 등)에 차트를 바로 놓을 때는 차트를 감싼 요소에 `--hm-chart-surface`를 그 배경색으로 지정합니다. 예: CSS `.report-charts { --hm-chart-surface: var(--hm-sem-bg-content); }` 또는 Tailwind `[--hm-chart-surface:var(--hm-sem-bg-content)]`. 조각·세그먼트 사이 간격, 포인트 Dot 외곽선, Label halo, 래디얼 미터(`HMRadialMeterChart`) 중앙 원이 이 색을 써서 배경처럼 보입니다. 지정하지 않으면 기본값 흰색(`--hm-sem-bg-surface`)입니다. ## 2. 진입점과 차트 고르기 @@ -116,7 +117,7 @@ npm run storybook # Chart 그룹: Bar / Line / Donut / P ### 예제 컴포넌트 -소비 예제(`examples/chart/main.tsx`)와 Storybook은 `@hm-design/chart/examples`의 예제 카드를 사용합니다: Bar(`BarChartExample`, `StackedBarChartExample`, `HorizontalBarChartExample`, `SignedBarChartExample`), Line(`LineChartExample` 외 Curve·Straight·Step 변형), Donut(`DonutChartExample` 외 Plain·Center·Active·Interactive·`DonutSolidExample`(입체형)), Pie(`PiePlainExample`, `PieLabelExample`, `PieLabelListExample`, `PieStackedExample`, `PieSolidExample`(입체형)), Radar(`RadarPlainExample`, `RadarDotExample`, `RadarLinesOnlyExample`, `RadarCustomLabelExample`), Area(`AreaCurveExample` 외 Straight·Step·Stacked·Expanded), Radial(`RadialSimpleExample`, `RadialLabelExample`, `RadialGridExample`, `RadialTextExample`, `RadialShapeExample`, `RadialStackedExample`), 묶음 `ChartExamples`. 예시 데이터(`sampleBar`, `samplePie`, `sampleRadial` 등)는 같은 진입점에서 export됩니다. 예제 카드는 `ExampleCard`(내부 컴포넌트)로 감싸며 실제 업무 데이터가 아님을 표시합니다. +소비 예제(`examples/chart/main.tsx`)는 `@hm-design/chart/examples`의 예제 카드를 사용합니다. Storybook(`Chart` 그룹)은 같은 예시 데이터·props로 공개 차트 컴포넌트(`HM*Chart`)를 카드 없이 오픈형으로 전시합니다(Story 전용 레이아웃 `src/chart/chart-story.tsx`). 예제 카드: Bar(`BarChartExample`, `StackedBarChartExample`, `HorizontalBarChartExample`, `SignedBarChartExample`), Line(`LineChartExample` 외 Curve·Straight·Step 변형), Donut(`DonutChartExample` 외 Plain·Center·Active·Interactive·`DonutSolidExample`(입체형)), Pie(`PiePlainExample`, `PieLabelExample`, `PieLabelListExample`, `PieStackedExample`, `PieSolidExample`(입체형)), Radar(`RadarPlainExample`, `RadarDotExample`, `RadarLinesOnlyExample`, `RadarCustomLabelExample`), Area(`AreaCurveExample` 외 Straight·Step·Stacked·Expanded), Radial(`RadialSimpleExample`, `RadialLabelExample`, `RadialGridExample`, `RadialTextExample`, `RadialShapeExample`, `RadialStackedExample`), 묶음 `ChartExamples`. 예시 데이터(`sampleBar`, `samplePie`, `sampleRadial` 등)는 같은 진입점에서 export됩니다. 예제 카드는 `ExampleCard`(내부 컴포넌트)로 감싸며 실제 업무 데이터가 아님을 표시합니다. ## 공식 shadcn Chart와의 차이 @@ -125,6 +126,7 @@ npm run storybook # Chart 그룹: Bar / Line / Donut / P ## 제한 - 차트 전용 HM 디자인 규격은 아직 없습니다. 색은 기존 HM 팔레트 Semantic 토큰의 별칭이며(`src/chart.css`), 차트 Token은 이 패키지 안에서만 정의합니다. +- 배경 관련 차트 토큰(2026-11-12): `--hm-chart-track`(기본 `--hm-sem-palette-warm-neutral-light` #E0DACE)은 래디얼 비활성 트랙(`HMRadialBarChart` 배경 트랙, `HMRadialMeterChart` 링 트랙)과 가로 막대 Hover 띠입니다. 공식 shadcn 소스는 `muted`(#F4F1EA)인데, 콘텐츠 배경 #F5F0E5와 거의 같아 보이지 않으므로 `chart.css`에서 덮어씁니다(`chart.tsx`는 그대로). `--hm-chart-surface`(기본 `--hm-sem-bg-surface` 흰색)는 차트가 놓인 면의 색입니다(위 §1 참고). `--hm-chart-bar-name-halo`는 선택 override로 남았고, 지정하지 않으면 `--hm-chart-surface`를 씁니다. 흰 배경에서는 트랙·Hover 띠만 한 단계 진해지고 나머지는 이전과 같습니다. - 글자색은 Admin 텍스트 위계를 따릅니다: 툴팁 값·중앙값·막대 이름/값은 `--hm-sem-fg-primary`(#212121), 축 눈금(Cartesian·Radar 기본 축 이름)·범례·툴팁 이름·중앙 캡션은 `--hm-chart-axis-text` → `--hm-sem-fg-secondary`(#616161)입니다. - 접근성 후속 항목(2026-11-11 기록, 미수정): Line·Area 포인트 값 Label은 시리즈 색을 그대로 씁니다. 기본 시리즈 4 `#ECD4A2`(흰색 대비 1.45:1)·5 `#9A9284`(3.08:1)는 4.5:1 미만입니다. 시리즈 색은 유지하며 Label 색 정책은 별도 결정입니다. - `@hm-design/chart/examples`의 `ExampleCard`는 공개 Export가 아닙니다(예제 카드를 통해서만 사용). diff --git a/packages/chart/src/chart.css b/packages/chart/src/chart.css index c919b97..1d2cec6 100644 --- a/packages/chart/src/chart.css +++ b/packages/chart/src/chart.css @@ -34,6 +34,14 @@ --hm-chart-axis-text: var(--hm-sem-fg-secondary); --hm-chart-center-value: var(--hm-sem-fg-primary); --hm-chart-font-family: var(--hm-font-family-base); + + /* Inactive track of the radial charts and the hover band behind horizontal bars: a warm neutral one step darker than the + muted background, so it stays visible on white and on the warm content background (#F5F0E5) without competing with data. */ + --hm-chart-track: var(--hm-sem-palette-warm-neutral-light); + /* The surface the chart sits on. Gaps between slices / segments, the ring around point Dots, label halos and the circle that + cuts the radial meter track into a ring use it, so they read as background. White by default (charts on a card); a chart + placed directly on another background sets it on its container, e.g. --hm-chart-surface: var(--hm-sem-bg-content). */ + --hm-chart-surface: var(--hm-sem-bg-surface); } [data-slot="chart"] { @@ -53,6 +61,12 @@ stroke: var(--hm-chart-grid-color); stroke-opacity: 0.6; } +/* Track and hover band. The official chart.tsx paints both with `muted` (#F4F1EA), which disappears on the content background; + this unlayered rule wins over its layered utilities, so the official source stays unchanged. */ +[data-slot="chart"] .recharts-radial-bar-background-sector, +[data-slot="chart"] .recharts-rectangle.recharts-tooltip-cursor { + fill: var(--hm-chart-track); +} [data-slot="chart-tooltip-content"] { border: 1px solid var(--hm-chart-tooltip-border-color); @@ -87,10 +101,12 @@ } /* Horizontal bar chart labels. The item name sits on a gradient that starts at 30% of the series color, so the dark text gets - a light halo (the card surface) to stay readable from the faint left end to the opaque right end. */ + a light halo (the chart surface) to stay readable from the faint left end to the opaque right end. + --hm-chart-bar-name-halo stays an optional override, but it is no longer declared here: a value declared on :root would resolve + --hm-chart-surface there, so a container that sets --hm-chart-surface would not reach the halo. The rules below fall back to + --hm-chart-surface (white by default, the same color as before). */ :root, [data-hm-theme] { --hm-chart-bar-name-text: var(--hm-sem-fg-primary); - --hm-chart-bar-name-halo: var(--hm-sem-bg-surface); --hm-chart-bar-value-text: var(--hm-sem-fg-primary); } [data-slot="chart-bar-name"], @@ -101,7 +117,7 @@ } [data-slot="chart-bar-name"] { fill: var(--hm-chart-bar-name-text); - stroke: var(--hm-chart-bar-name-halo); + stroke: var(--hm-chart-bar-name-halo, var(--hm-chart-surface)); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; @@ -136,7 +152,7 @@ } [data-slot="chart-slice-label"] { fill: var(--hm-chart-bar-name-text); - stroke: var(--hm-chart-bar-name-halo); + stroke: var(--hm-chart-bar-name-halo, var(--hm-chart-surface)); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; @@ -153,7 +169,7 @@ /* Radial: item names curved along the start of each bar. The halo keeps the text readable on pale bar colors. */ .hm-radial-name { fill: var(--hm-chart-bar-name-text); - stroke: var(--hm-chart-bar-name-halo); + stroke: var(--hm-chart-bar-name-halo, var(--hm-chart-surface)); stroke-width: 2px; stroke-linejoin: round; paint-order: stroke; diff --git a/packages/chart/src/components/donut-chart.tsx b/packages/chart/src/components/donut-chart.tsx index eda5a9b..ae8b544 100644 --- a/packages/chart/src/components/donut-chart.tsx +++ b/packages/chart/src/components/donut-chart.tsx @@ -165,7 +165,7 @@ export function HMDonutChart({ data, totalLabel, activeId, onActiveChange, label // Room for the active slice to grow outwards without leaving the chart. outerRadius={ring.outer} paddingAngle={paddingAngle(selectable)} - stroke="var(--hm-sem-bg-surface)" + stroke="var(--hm-chart-surface)" strokeWidth={2} onClick={onActiveChange ? (_slice, index) => onActiveChange(data[index].id) : undefined} shape={(props: PieSectorShapeProps, index: number) => ( diff --git a/packages/chart/src/components/line-points.tsx b/packages/chart/src/components/line-points.tsx index d3a5c41..60e1f91 100644 --- a/packages/chart/src/components/line-points.tsx +++ b/packages/chart/src/components/line-points.tsx @@ -50,7 +50,7 @@ export function PointDot({ cy={y} r={radius} fill={pointColor(payload, colorKey, fallback)} - stroke="var(--hm-sem-bg-surface)" + stroke="var(--hm-chart-surface)" strokeWidth={2} /> ) diff --git a/packages/chart/src/components/pie-chart.tsx b/packages/chart/src/components/pie-chart.tsx index 3bbc5a9..4ee7831 100644 --- a/packages/chart/src/components/pie-chart.tsx +++ b/packages/chart/src/components/pie-chart.tsx @@ -126,7 +126,7 @@ export function HMPieChart({ data, labels, label, className }: HMPieChartProps) dataKey="value" nameKey="id" outerRadius={outside ? "58%" : "80%"} - stroke="var(--hm-sem-bg-surface)" + stroke="var(--hm-chart-surface)" strokeWidth={2} label={ outside ? : labels === "inside" ? : false @@ -185,8 +185,8 @@ export function HMStackedPieChart({ rings, label, className }: HMStackedPieChart } /> } /> - - + + ) diff --git a/packages/chart/src/components/radial-chart.tsx b/packages/chart/src/components/radial-chart.tsx index 268360a..e2ed5a7 100644 --- a/packages/chart/src/components/radial-chart.tsx +++ b/packages/chart/src/components/radial-chart.tsx @@ -193,12 +193,12 @@ export function HMRadialMeterChart({ return ( - {/* Official: the first circle is the muted track, the second (smaller) one is the surface color that cuts it into a ring. */} + {/* Official: the first circle is the track (official muted, HM --hm-chart-track), the second (smaller) one is the chart surface color that cuts it into a ring. */} @@ -269,7 +269,7 @@ export function HMRadialStackedChart({ stackId="a" fill={`var(--color-${item.key})`} cornerRadius={5} - stroke="var(--hm-sem-bg-surface)" + stroke="var(--hm-chart-surface)" strokeWidth={2} /> ))} diff --git a/packages/chart/src/components/solid-chart.tsx b/packages/chart/src/components/solid-chart.tsx index 1190ccc..84aa91d 100644 --- a/packages/chart/src/components/solid-chart.tsx +++ b/packages/chart/src/components/solid-chart.tsx @@ -89,7 +89,7 @@ function SolidSlice({ sector, hole, sideColor, topColor, center }: SolidSlicePro const frontTo = Math.min(to, 360) const backFrom = Math.max(from, 0) const backTo = Math.min(to, 180) - const seam = "var(--hm-sem-bg-surface)" + const seam = "var(--hm-chart-surface)" // The seam between slices is a surface-colored stroke; on a very thin slice it thins out so the slice stays visible. const arcPx = (to - from) * RAD * p.rx const seamTop = arcPx < 4 ? 0.5 : arcPx < 10 ? 1 : 2 diff --git a/src/chart/area-chart.stories.tsx b/src/chart/area-chart.stories.tsx index afe16a8..eae9803 100644 --- a/src/chart/area-chart.stories.tsx +++ b/src/chart/area-chart.stories.tsx @@ -1,18 +1,12 @@ 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, StorySectionGrid } from "@/components/story-page" +import { HMAreaChart } 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. 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%). +// Sample data only. The eight charts share the Line Chart data: connection styles as a plain area and with Dots and value +// Labels, then Stacked (running total) and Expanded (each month normalized to 100%). Same data and props as the +// @hm-design/chart/examples cards; open layout (no card): see chart-story.tsx. const meta = { title: "Chart/Area Chart", parameters: { layout: "fullscreen", controls: { disable: true } }, @@ -23,34 +17,37 @@ type Story = StoryObj export const Area: Story = { name: "Area Chart", render: () => ( - + - {/* Same grid and order as Line Chart, plus a Stacked | Expanded row. */} - - - - - - - - - - - - - - - - - - - - - - - - - + + {/* Same grid and order as Line Chart, then a Stacked | Expanded row. */} + + + + + + + + + + + + + + + + + + + + + + + + + + + ), diff --git a/src/chart/bar-chart.stories.tsx b/src/chart/bar-chart.stories.tsx index 6bd84ed..4178514 100644 --- a/src/chart/bar-chart.stories.tsx +++ b/src/chart/bar-chart.stories.tsx @@ -1,13 +1,11 @@ import type { Meta, StoryObj } from "@storybook/react-vite" -import { - BarChartExample, - HorizontalBarChartExample, - SignedBarChartExample, - StackedBarChartExample, -} from "@hm-design/chart/examples" -import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page" +import { HMBarChart, HMHorizontalBarChart, HMSignedBarChart } from "@hm-design/chart" +import { sampleBar, sampleHorizontalBar, sampleSignedBar } from "@hm-design/chart/examples" +import { StoryPage, StoryPageHeader, StorySectionGrid } from "@/components/story-page" +import { ChartSampleNotice, ChartSpecimen, chartGrid, chartPageClass } from "./chart-story" -// shadcn/ui Chart (Recharts) with HM tokens, from the public @hm-design/chart entries. All values are sample data. +// shadcn/ui Chart (Recharts) with HM tokens, from the public @hm-design/chart entry. All values are sample data; each chart has +// the same data and props as the matching @hm-design/chart/examples card. Open layout (no card): see chart-story.tsx. // Narrow widths: use the toolbar Viewport presets (HM Mobile · 390). The chart is fluid. const meta = { title: "Chart/Bar Chart", @@ -19,24 +17,24 @@ type Story = StoryObj export const Bar: Story = { name: "Bar Chart", render: () => ( - + - {/* Two sections per row from 1024px (HM desktop boundary), one below. Source order is the mobile order; on desktop it reads - row by row: Grouped | Horizontal, then Stacked | Positive / Negative. On desktop every row has the same height and each - card fills its section, so card tops, bottoms and chart areas line up. */} - - - - - - - - - - - - - + + {/* Two per row from 1024px, one below. Source order is the mobile order; desktop reads row by row: + Grouped | Horizontal, then Stacked | Positive / Negative. */} + + + + + + + + + + + + + ), diff --git a/src/chart/chart-story.tsx b/src/chart/chart-story.tsx new file mode 100644 index 0000000..92b90f8 --- /dev/null +++ b/src/chart/chart-story.tsx @@ -0,0 +1,76 @@ +import type { ReactNode } from "react" +import { sampleDataNotice } from "@hm-design/chart/examples" +import { StorySection } from "@/components/story-page" + +// Storybook presentation only (not part of @hm-design/chart): the open Chart page layout (2026-11-12, user request). +// Charts sit directly on the Storybook content background, without the example card (background, border, padding). Each chart +// is one StorySection: H2 variant name → description (what the example shows) → thin section divider → optional toolbar → chart. +// The charts themselves are the public @hm-design/chart components on the @hm-design/chart/examples sample data, with the same +// props as the matching *Example card, so data, legend, tooltip and interaction are unchanged. No common layout change; the page +// only sets the chart's own surface token (chartPageClass). + +/** + * className of every Chart page's StoryPage. The charts sit on the Storybook content background (--hm-sem-bg-content), so the page + * sets the chart's public surface token to it (2026-11-12): slice / segment gaps, Dot rings, label halos and the radial meter's + * center read as background instead of white. Only the token value is set, as a consumer would; no chart internals are overridden. + */ +export const chartPageClass = "[--hm-chart-surface:var(--hm-sem-bg-content)]" + +/** One sample-data notice per page, instead of a badge and a notice under every chart. */ +export function ChartSampleNotice() { + return ( +

+ {sampleDataNotice} +

+ ) +} + +/** + * One chart of a Chart page. `toolbar` keeps the example card's control row (Select height, so the charts of a row start at the + * same height); pass `null` for an empty row of that height next to charts that have one. + */ +export function ChartSpecimen({ + title, + description, + toolbar, + children, +}: { + title: string + description?: ReactNode + toolbar?: ReactNode + children: ReactNode +}) { + return ( + + {toolbar !== undefined ? ( +
+ {toolbar} +
+ ) : null} + {children} + + ) +} + +// Grid columns (className of StorySectionGrid). Widths are the preview iframe width, which already excludes the Storybook sidebar. +// A third column only from 1200px, where each column keeps about 340px (Radial needs 320px). Rows align at the top; every +// chart keeps its own height. Source order is the one-column (mobile) order. All breakpoints are px (min-[…]): Tailwind does not +// order a rem breakpoint (lg) against a px one, so `lg:grid-cols-2` would win over `min-[1200px]:grid-cols-3`. +const base = "grid-cols-1 items-start *:min-w-0" +export const chartGrid = { + /** Wide charts (Bar): two per row from 1024px. */ + pair: `${base} min-[1024px]:grid-cols-2`, + /** Compact round charts (Donut, Pie, Radial): two per row from 1024px, three from 1200px. */ + compact: `${base} min-[1024px]:grid-cols-2 min-[1200px]:grid-cols-3`, + /** Radar (four charts): two per row from 1024px, four in one row from 1600px. */ + quad: `${base} min-[1024px]:grid-cols-2 min-[1600px]:grid-cols-4`, + /** + * Plain / labelled pairs (Line, Area): two per row from 1024px (each pair in one row); from 1200px three columns that fill + * top to bottom, so the plain styles form the first row and their Dot + Label versions the second. + */ + pairs: `${base} min-[1024px]:grid-cols-2 min-[1200px]:grid-flow-col min-[1200px]:grid-cols-3 min-[1200px]:grid-rows-2`, +} as const diff --git a/src/chart/donut-chart.stories.tsx b/src/chart/donut-chart.stories.tsx index 9f0abea..7c45c63 100644 --- a/src/chart/donut-chart.stories.tsx +++ b/src/chart/donut-chart.stories.tsx @@ -1,14 +1,14 @@ +import { useState } from "react" import type { Meta, StoryObj } from "@storybook/react-vite" -import { - DonutActiveExample, - DonutCenterExample, - DonutInteractiveExample, - DonutPlainExample, - DonutSolidExample, -} from "@hm-design/chart/examples" -import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page" +import { HMDonutChart, HMSolidDonutChart } from "@hm-design/chart" +import { sampleDonutStates } from "@hm-design/chart/examples" +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@hm-design/ui" +import { StoryPage, StoryPageHeader, StorySectionGrid } from "@/components/story-page" +import { ChartSampleNotice, ChartSpecimen, chartGrid, chartPageClass } from "./chart-story" -// Sample data only. The four examples share one data set, color mapping and item order. +// Sample data only. The five charts share one data set, color mapping and item order. Same data, props and toolbar text as the +// @hm-design/chart/examples cards; open layout (no card): see chart-story.tsx. Every chart has a toolbar row (Select height), +// so the donuts of a row start at the same height. const meta = { title: "Chart/Donut Chart", parameters: { layout: "fullscreen", controls: { disable: true } }, @@ -16,29 +16,61 @@ const meta = { export default meta type Story = StoryObj +// Interactive: Select and slice click share one active item (same as DonutInteractiveExample). +function DonutInteractive() { + const [activeId, setActiveId] = useState(sampleDonutStates.activeId) + return ( + + + + + + {sampleDonutStates.data.map(item => ( + {item.label} + ))} + + + } + > + + + ) +} + export const Donut: Story = { name: "Donut Chart", - render: () => ( - - - {/* Same grid as Bar and Line Chart: two per row from 1024px, one below; source order is the mobile order. */} - - - - - - - - - - - - - - - - - - - ), + render: () => { + const selected = sampleDonutStates.data.find(item => item.id === sampleDonutStates.activeId) + return ( + + + + {/* Two per row from 1024px, three from 1200px, one below; source order is the mobile order. */} + + + + + + + + + + + + + + + + + ) + }, } diff --git a/src/chart/line-chart.stories.tsx b/src/chart/line-chart.stories.tsx index ef8cfc3..50a96fa 100644 --- a/src/chart/line-chart.stories.tsx +++ b/src/chart/line-chart.stories.tsx @@ -1,16 +1,12 @@ import type { Meta, StoryObj } from "@storybook/react-vite" -import { - LineCurveDotLabelExample, - LineCurveExample, - LineStepDotLabelExample, - LineStepExample, - LineStraightColorLabelExample, - LineStraightExample, -} from "@hm-design/chart/examples" -import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page" +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 examples share one data set and axis range, so connection styles compare directly: curve, straight -// and step, each as a plain line (left) and with Dots and value labels (right). +// 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 } }, @@ -21,29 +17,30 @@ type Story = StoryObj export const Line: Story = { name: "Line Chart", render: () => ( - + - {/* Same grid as Bar Chart: two per row from 1024px, one below. Source order is the mobile order; desktop reads row by row: - Curve | Curve + labels, Straight | Straight + colored labels, Step | Step + labels. */} - - - - - - - - - - - - - - - - - - - + + {/* 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. */} + + + + + + + + + + + + + + + + + + + ), diff --git a/src/chart/pie-chart.stories.tsx b/src/chart/pie-chart.stories.tsx index b115cf1..fa66566 100644 --- a/src/chart/pie-chart.stories.tsx +++ b/src/chart/pie-chart.stories.tsx @@ -1,8 +1,11 @@ import type { Meta, StoryObj } from "@storybook/react-vite" -import { PieLabelExample, PieLabelListExample, PiePlainExample, PieSolidExample, PieStackedExample } from "@hm-design/chart/examples" -import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page" +import { HMPieChart, HMSolidPieChart, HMStackedPieChart } from "@hm-design/chart" +import { samplePie, sampleStackedPie } 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 pies share one item list and color mapping; the stacked pie draws two series as concentric rings. +// Same data and props as the @hm-design/chart/examples cards; open layout (no card): see chart-story.tsx. const meta = { title: "Chart/Pie Chart", parameters: { layout: "fullscreen", controls: { disable: true } }, @@ -13,25 +16,26 @@ type Story = StoryObj export const Pie: Story = { name: "Pie Chart", render: () => ( - + - {/* Same grid as Bar, Line and Donut Chart: two per row from 1024px, one below; source order is the mobile order. */} - - - - - - - - - - - - - - - - + + {/* Two per row from 1024px, three from 1200px, one below; source order is the mobile order. */} + + + + + + + + + + + + + + + + ), diff --git a/src/chart/radar-chart.stories.tsx b/src/chart/radar-chart.stories.tsx index 0a41151..0f5b425 100644 --- a/src/chart/radar-chart.stories.tsx +++ b/src/chart/radar-chart.stories.tsx @@ -1,8 +1,11 @@ import type { Meta, StoryObj } from "@storybook/react-vite" -import { RadarCustomLabelExample, RadarDotExample, RadarLinesOnlyExample, RadarPlainExample } from "@hm-design/chart/examples" -import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page" +import { HMRadarChart } from "@hm-design/chart" +import { sampleRadar } 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 radars share one data set (six axes, two series) and the 0-100 axis range. +// Sample data only. All radars share one data set (six axes, two series) and the 0-100 axis range. Same data and props as the +// @hm-design/chart/examples cards; open layout (no card): see chart-story.tsx. const meta = { title: "Chart/Radar Chart", parameters: { layout: "fullscreen", controls: { disable: true } }, @@ -13,22 +16,23 @@ type Story = StoryObj export const Radar: Story = { name: "Radar Chart", render: () => ( - + - {/* Same grid as the other Chart pages: two per row from 1024px, one below. */} - - - - - - - - - - - - - + + {/* Two per row from 1024px, all four in one row from 1600px, one below. */} + + + + + + + + + + + + + ), diff --git a/src/chart/radial-chart.stories.tsx b/src/chart/radial-chart.stories.tsx index d545062..fe91301 100644 --- a/src/chart/radial-chart.stories.tsx +++ b/src/chart/radial-chart.stories.tsx @@ -1,15 +1,11 @@ import type { Meta, StoryObj } from "@storybook/react-vite" -import { - RadialGridExample, - RadialLabelExample, - RadialShapeExample, - RadialSimpleExample, - RadialStackedExample, - RadialTextExample, -} from "@hm-design/chart/examples" -import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page" +import { HMRadialBarChart, HMRadialMeterChart, HMRadialStackedChart } from "@hm-design/chart" +import { sampleRadial, sampleRadialShape, sampleRadialStacked, sampleRadialText } from "@hm-design/chart/examples" +import { StoryPage, StoryPageHeader, StorySectionGrid } from "@/components/story-page" +import { ChartSampleNotice, ChartSpecimen, chartGrid, chartPageClass } from "./chart-story" -// Sample data only. One example per official shadcn/ui radial chart (radial-simple, -label, -grid, -text, -shape, -stacked). +// Sample data only. One chart per official shadcn/ui radial chart (radial-simple, -label, -grid, -text, -shape, -stacked). +// Same data and props (angles, radii, tracks) as the @hm-design/chart/examples cards; open layout (no card): see chart-story.tsx. const meta = { title: "Chart/Radial Chart", parameters: { layout: "fullscreen", controls: { disable: true } }, @@ -20,28 +16,29 @@ type Story = StoryObj export const Radial: Story = { name: "Radial Chart", render: () => ( - + - {/* Same grid as the other Chart pages: two per row from 1024px, one below; source order is the mobile order. */} - - - - - - - - - - - - - - - - - - - + + {/* Two per row from 1024px, three from 1200px, one below; source order is the mobile order. */} + + + + + + + + + + + + + + + + + + + ),