style(storybook): tidy CENTER, chart, org chart and SW story pages
- 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
This commit is contained in:
1 parent
bad2acfc49
commit
ed7e8790ec
40 files changed
+1525
-333
No files matched your search
@@ -22,22 +22,22 @@ export const Area: Story = {
|
||||
<ChartSampleNotice />
|
||||
{/* Same grid and order as Line Chart, then a Stacked | Expanded row. */}
|
||||
<StorySectionGrid className={chartGrid.pairs}>
|
||||
<ChartSpecimen title="Curve" description="monotone">
|
||||
<ChartSpecimen title="Curve">
|
||||
<HMAreaChart {...sampleLineCompare} curve="monotone" label="월별 접수·완료 곡선형 영역 차트(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Curve · Dot + Label" description="monotone · Dot과 값 Label">
|
||||
<ChartSpecimen title="Curve · Dot + Label">
|
||||
<HMAreaChart {...sampleLineCompare} curve="monotone" pointLabels label="월별 접수·완료 곡선형 Dot·값 Label 영역 차트(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Straight" description="linear">
|
||||
<ChartSpecimen title="Straight">
|
||||
<HMAreaChart {...sampleLineCompare} curve="linear" label="월별 접수·완료 직선형 영역 차트(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Straight · Color Dot + Label" description="linear · Dot 개별 색상 + 값 Label">
|
||||
<ChartSpecimen title="Straight · Color Dot + Label">
|
||||
<HMAreaChart {...sampleLinePointColors} curve="linear" pointLabels label="월별 접수·완료 직선형 포인트별 색상 영역 차트(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Step" description="step">
|
||||
<ChartSpecimen title="Step">
|
||||
<HMAreaChart {...sampleLineCompare} curve="step" label="월별 접수·완료 계단형 영역 차트(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Step · Dot + Label" description="step · Dot과 값 Label">
|
||||
<ChartSpecimen title="Step · Dot + Label">
|
||||
<HMAreaChart {...sampleLineCompare} curve="step" pointLabels label="월별 접수·완료 계단형 Dot·값 Label 영역 차트(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
</StorySectionGrid>
|
||||
|
||||
@@ -26,7 +26,7 @@ export const Bar: Story = {
|
||||
<ChartSpecimen title="Grouped" description="월별 접수·완료 현황 · 상반기 월별 건수">
|
||||
<HMBarChart {...sampleBar} label="월별 접수·완료 건수 막대 차트(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Horizontal" description="항목별 처리 건수 · 가로 막대">
|
||||
<ChartSpecimen title="Horizontal" description="항목별 처리 건수">
|
||||
<HMHorizontalBarChart {...sampleHorizontalBar} label="항목별 처리 건수 가로 막대 차트(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Stacked" description="월별 접수·완료 현황(누적)">
|
||||
|
||||
@@ -4,7 +4,7 @@ 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.
|
||||
// is one StorySection: H2 variant name → optional description (what the example shows) → 12px → 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).
|
||||
|
||||
@@ -56,17 +56,17 @@ export const Donut: Story = {
|
||||
<ChartSampleNotice />
|
||||
{/* Two per row from 1024px, three from 1200px, one below; source order is the mobile order. */}
|
||||
<StorySectionGrid className={chartGrid.compact}>
|
||||
<ChartSpecimen title="Basic" description="기본" toolbar="중앙 표시 없음">
|
||||
<ChartSpecimen title="Basic" toolbar="중앙 표시 없음">
|
||||
<HMDonutChart data={sampleDonutStates.data} label="업무 상태 도넛 차트, 가운데 값 없음(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Basic · Center Text" description="전체 합계" toolbar="중앙 표시: 전체 합계">
|
||||
<ChartSpecimen title="Basic · Center Text" toolbar="중앙 표시: 전체 합계">
|
||||
<HMDonutChart data={sampleDonutStates.data} totalLabel={sampleDonutStates.totalLabel} label="업무 상태 도넛 차트, 가운데 전체 합계(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Active" description="선택된 항목" toolbar={`선택 항목: ${selected?.label ?? ""}`}>
|
||||
<ChartSpecimen title="Active" toolbar={`선택 항목: ${selected?.label ?? ""}`}>
|
||||
<HMDonutChart data={sampleDonutStates.data} activeId={sampleDonutStates.activeId} label="업무 상태 도넛 차트, 선택된 항목 강조(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<DonutInteractive />
|
||||
<ChartSpecimen title="Solid" description="입체형" toolbar={null}>
|
||||
<ChartSpecimen title="Solid" toolbar={null}>
|
||||
<HMSolidDonutChart data={sampleDonutStates.data} totalLabel={sampleDonutStates.totalLabel} label="업무 상태 입체형 도넛 차트, 가운데 전체 합계(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
</StorySectionGrid>
|
||||
|
||||
@@ -23,22 +23,22 @@ export const Line: Story = {
|
||||
{/* 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" description="monotone · Dot 없음">
|
||||
<ChartSpecimen title="Curve">
|
||||
<HMLineChart {...sampleLineCompare} curve="monotone" dots={false} label="월별 접수·완료 곡선형 선 차트(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Curve · Dot + Label" description="monotone · Dot과 값 Label">
|
||||
<ChartSpecimen title="Curve · Dot + Label">
|
||||
<HMLineChart {...sampleLineCompare} curve="monotone" pointLabels label="월별 접수·완료 곡선형 Dot·값 라벨 선 차트(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Straight" description="linear · Dot 없음">
|
||||
<ChartSpecimen title="Straight">
|
||||
<HMLineChart {...sampleLineCompare} curve="linear" dots={false} label="월별 접수·완료 직선형 선 차트(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Straight · Color Dot + Label" description="linear · Dot 개별 색상 + 값 Label">
|
||||
<ChartSpecimen title="Straight · Color Dot + Label">
|
||||
<HMLineChart {...sampleLinePointColors} curve="linear" pointLabels label="월별 접수·완료 직선형 포인트별 색상 선 차트(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Step" description="step · Dot 없음">
|
||||
<ChartSpecimen title="Step">
|
||||
<HMLineChart {...sampleLineCompare} curve="step" dots={false} label="월별 접수·완료 계단형 선 차트(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Step · Dot + Label" description="step · Dot과 값 Label">
|
||||
<ChartSpecimen title="Step · Dot + Label">
|
||||
<HMLineChart {...sampleLineCompare} curve="step" pointLabels label="월별 접수·완료 계단형 Dot·값 라벨 선 차트(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
</StorySectionGrid>
|
||||
|
||||
@@ -21,16 +21,16 @@ export const Radar: Story = {
|
||||
<ChartSampleNotice />
|
||||
{/* Two per row from 1024px, all four in one row from 1600px, one below. */}
|
||||
<StorySectionGrid className={chartGrid.quad}>
|
||||
<ChartSpecimen title="Basic" description="영역">
|
||||
<ChartSpecimen title="Basic">
|
||||
<HMRadarChart {...sampleRadar} label="단계별 처리 수준 방사형 차트(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Dot" description="축별 Dot">
|
||||
<ChartSpecimen title="Dot">
|
||||
<HMRadarChart {...sampleRadar} dots label="단계별 처리 수준 방사형 차트, Dot(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Lines Only" description="선만">
|
||||
<ChartSpecimen title="Lines Only">
|
||||
<HMRadarChart {...sampleRadar} filled={false} label="단계별 처리 수준 방사형 차트, 선만(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Custom Label" description="축 Label">
|
||||
<ChartSpecimen title="Custom Label">
|
||||
<HMRadarChart {...sampleRadar} customLabels label="단계별 처리 수준 방사형 차트, 축 Label(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
</StorySectionGrid>
|
||||
|
||||
@@ -21,22 +21,22 @@ export const Radial: Story = {
|
||||
<ChartSampleNotice />
|
||||
{/* Two per row from 1024px, three from 1200px, one below; source order is the mobile order. */}
|
||||
<StorySectionGrid className={chartGrid.compact}>
|
||||
<ChartSpecimen title="Basic" description="radial-simple · 항목별 막대">
|
||||
<ChartSpecimen title="Basic" description="항목별 막대">
|
||||
<HMRadialBarChart {...sampleRadial} label="업무 상태 방사형 막대 차트(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Label" description="radial-label · 막대 안 항목명">
|
||||
<ChartSpecimen title="Label" description="막대 안 항목명">
|
||||
<HMRadialBarChart {...sampleRadial} labels startAngle={-90} endAngle={380} label="업무 상태 방사형 막대 차트, 항목명 Label(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Grid" description="radial-grid · 원형 Grid">
|
||||
<ChartSpecimen title="Grid" description="원형 Grid">
|
||||
<HMRadialBarChart {...sampleRadial} grid label="업무 상태 방사형 막대 차트, Grid(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Text" description="radial-text · 중앙 Text">
|
||||
<ChartSpecimen title="Text" description="중앙 Text">
|
||||
<HMRadialMeterChart {...sampleRadialText} startAngle={0} endAngle={250} innerRadius={75} outerRadius={90} trackRadii={[88.5, 76.5]} cornerRadius={10} label="진행 중 건수 방사형 차트, 중앙 Text(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Shape" description="radial-shape · 링 트랙">
|
||||
<ChartSpecimen title="Shape" description="링 트랙">
|
||||
<HMRadialMeterChart {...sampleRadialShape} startAngle={0} endAngle={100} innerRadius={50} outerRadius={95} trackRadii={[90.5, 54.5]} label="진행 중 건수 방사형 차트, Shape(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
<ChartSpecimen title="Stacked" description="radial-stacked · 반원 누적">
|
||||
<ChartSpecimen title="Stacked" description="반원 누적">
|
||||
<HMRadialStackedChart {...sampleRadialStacked} label="업무 상태 방사형 Stacked 차트(예시 데이터)" />
|
||||
</ChartSpecimen>
|
||||
</StorySectionGrid>
|
||||
|
||||
Reference in new issue
Block a user