shkim4
7ff852952a
- @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
40 lines
1.9 KiB
TypeScript
40 lines
1.9 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
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. 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 } },
|
|
} satisfies Meta
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Radar: Story = {
|
|
name: "Radar Chart",
|
|
render: () => (
|
|
<StoryPage className={chartPageClass}>
|
|
<StoryPageHeader title="Radar Chart" />
|
|
<ChartSampleNotice />
|
|
{/* Two per row from 1024px, all four in one row from 1600px, one below. */}
|
|
<StorySectionGrid className={chartGrid.quad}>
|
|
<ChartSpecimen title="Basic" description="영역">
|
|
<HMRadarChart {...sampleRadar} label="단계별 처리 수준 방사형 차트(예시 데이터)" />
|
|
</ChartSpecimen>
|
|
<ChartSpecimen title="Dot" description="축별 Dot">
|
|
<HMRadarChart {...sampleRadar} dots label="단계별 처리 수준 방사형 차트, Dot(예시 데이터)" />
|
|
</ChartSpecimen>
|
|
<ChartSpecimen title="Lines Only" description="선만">
|
|
<HMRadarChart {...sampleRadar} filled={false} label="단계별 처리 수준 방사형 차트, 선만(예시 데이터)" />
|
|
</ChartSpecimen>
|
|
<ChartSpecimen title="Custom Label" description="축 Label">
|
|
<HMRadarChart {...sampleRadar} customLabels label="단계별 처리 수준 방사형 차트, 축 Label(예시 데이터)" />
|
|
</ChartSpecimen>
|
|
</StorySectionGrid>
|
|
</StoryPage>
|
|
),
|
|
}
|