Chart

import type { ComponentProps } from 'react';
import { CHART_COLOR_PRESET, Chart, type ChartSpec } from '@mildang/design-system/Chart';
import { Box, Grid, Stack } from '@mildang/styled-system/jsx';

type Story = { args?: ComponentProps<typeof Chart> };

/* ─── 공용 샘플 데이터 (밀당 도메인, 전부 결정적) ─── */

const subjectScores = [
  { 과목: '국어', 평균점수: 82 },
  { 과목: '영어', 평균점수: 76 },
  { 과목: '수학', 평균점수: 68 },
  { 과목: '과학', 평균점수: 88 },
  { 과목: '사회', 평균점수: 74 },
];

const subjectClassScores = [
  { 과목: '국어', 반: '1반', 점수: 84 },
  { 과목: '국어', 반: '2반', 점수: 78 },
  { 과목: '영어', 반: '1반', 점수: 72 },
  { 과목: '영어', 반: '2반', 점수: 81 },
  { 과목: '수학', 반: '1반', 점수: 66 },
  { 과목: '수학', 반: '2반', 점수: 74 },
];

const monthlyMinutes = [
  { 월: '1월', 학습시간: 620 },
  { 월: '2월', 학습시간: 540 },
  { 월: '3월', 학습시간: 710 },
  { 월: '4월', 학습시간: 680 },
  { 월: '5월', 학습시간: 820 },
  { 월: '6월', 학습시간: 760 },
];

/** 월×과목 학습 시간 long 데이터 — 결정적 공식으로 생성 */
const monthlySubjectMinutes = ['1월', '2월', '3월', '4월', '5월', '6월'].flatMap((월, mi) =>
  ['국어', '영어', '수학'].map((과목, si) => ({
    월,
    과목,
    학습시간: 120 + ((mi * 53 + si * 91) % 180),
  })),
);

/** 반별 점수 분포 long 데이터 — 분포 계열(Box/Violin/Density/ECDF/Strip/Histogram) 공용 */
const scoreDistRows = ['1반', '2반', '3반'].flatMap((반, ci) =>
  Array.from({ length: 24 }, (_, i) => ({
    반,
    점수: 45 + ci * 5 + ((i * 7) % 29) + (i % 4) * 2,
  })),
);

const monthlyClassScores = [
  { 월: '3월', 반: '1반', 평균점수: 72 },
  { 월: '3월', 반: '2반', 평균점수: 68 },
  { 월: '4월', 반: '1반', 평균점수: 75 },
  { 월: '4월', 반: '2반', 평균점수: 71 },
  { 월: '5월', 반: '1반', 평균점수: 78 },
  { 월: '5월', 반: '2반', 평균점수: 76 },
  { 월: '6월', 반: '1반', 평균점수: 81 },
  { 월: '6월', 반: '2반', 평균점수: 74 },
];

/* ─── 막대 계열 ─── */

export const BarChart: Story = {
  args: {
    spec: {
      chartType: 'Bar Chart',
      data: { values: subjectScores },
      semanticTypes: { 평균점수: 'Score' },
      encodings: { x: '과목', y: { field: '평균점수', label: '평균 점수' } },
    },
  },
};

export const GroupedBarChart: Story = {
  args: {
    spec: {
      chartType: 'Grouped Bar Chart',
      data: { values: subjectClassScores },
      semanticTypes: { 점수: 'Score' },
      encodings: { x: '과목', y: '점수', color: '반' },
    },
  },
};

export const StackedBarChart: Story = {
  args: {
    spec: {
      chartType: 'Stacked Bar Chart',
      data: {
        values: [
          { 월: '3월', 유형: '객관식', 풀이수: 320 },
          { 월: '3월', 유형: '주관식', 풀이수: 180 },
          { 월: '3월', 유형: '서술형', 풀이수: 60 },
          { 월: '4월', 유형: '객관식', 풀이수: 410 },
          { 월: '4월', 유형: '주관식', 풀이수: 210 },
          { 월: '4월', 유형: '서술형', 풀이수: 90 },
          { 월: '5월', 유형: '객관식', 풀이수: 380 },
          { 월: '5월', 유형: '주관식', 풀이수: 240 },
          { 월: '5월', 유형: '서술형', 풀이수: 110 },
        ],
      },
      semanticTypes: { 월: 'Month', 풀이수: 'Count' },
      encodings: { x: '월', y: '풀이수', color: '유형' },
    },
  },
};

/* ─── 영역 계열 ─── */

export const AreaChart: Story = {
  args: {
    spec: {
      chartType: 'Area Chart',
      data: { values: monthlyMinutes },
      semanticTypes: { 월: 'Month', 학습시간: 'DurationMinutes' },
      encodings: { x: '월', y: { field: '학습시간', label: '학습 시간' } },
    },
  },
};

export const StackedAreaChart: Story = {
  args: {
    spec: {
      chartType: 'Stacked Area Chart',
      data: { values: monthlySubjectMinutes },
      semanticTypes: { 월: 'Month', 학습시간: 'DurationMinutes' },
      encodings: { x: '월', y: '학습시간', color: '과목' },
    },
  },
};

export const Streamgraph: Story = {
  args: {
    spec: {
      chartType: 'Streamgraph',
      data: { values: monthlySubjectMinutes },
      semanticTypes: { 월: 'Month', 학습시간: 'DurationMinutes' },
      encodings: { x: '월', y: '학습시간', color: '과목' },
    },
  },
};

export const RangeAreaChart: Story = {
  args: {
    spec: {
      chartType: 'Range Area Chart',
      data: {
        values: [
          { 월: '1월', 최저: 52, 최고: 94, 평균: 71 },
          { 월: '2월', 최저: 48, 최고: 90, 평균: 68 },
          { 월: '3월', 최저: 55, 최고: 96, 평균: 74 },
          { 월: '4월', 최저: 58, 최고: 93, 평균: 76 },
          { 월: '5월', 최저: 61, 최고: 98, 평균: 79 },
          { 월: '6월', 최저: 57, 최고: 95, 평균: 77 },
        ],
      },
      semanticTypes: { 월: 'Month', 최저: 'Score', 최고: 'Score', 평균: 'Score' },
      encodings: {
        x: '월',
        y0: { field: '최저', label: '최저 점수' },
        y1: { field: '최고', label: '최고 점수' },
        mid: { field: '평균', label: '평균 점수' },
      },
    },
  },
};

/* ─── 격자·달력 ─── */

export const Heatmap: Story = {
  args: {
    spec: {
      chartType: 'Heatmap',
      data: {
        values: ['1반', '2반', '3반'].flatMap((반, ci) =>
          ['1단원', '2단원', '3단원', '4단원', '5단원'].map((단원, ui) => ({
            반,
            단원,
            정답률: 55 + ((ci * 17 + ui * 13) % 40),
          })),
        ),
      },
      semanticTypes: { 정답률: 'Percent' },
      encodings: { x: '단원', y: '반', value: { field: '정답률', label: '정답률' } },
      chartProperties: { showValues: true, showLegend: true },
    },
  },
};

export const CalendarHeatmap: Story = {
  args: {
    spec: {
      chartType: 'Calendar Heatmap',
      data: {
        values: Array.from({ length: 112 }, (_, i) => ({
          날짜: new Date(Date.UTC(2026, 0, 5 + i)).toISOString().slice(0, 10),
          풀이수: i % 6 === 5 ? 0 : ((i * 7) % 19) + (i % 4),
        })),
      },
      semanticTypes: { 날짜: 'Date', 풀이수: 'Count' },
      encodings: { date: '날짜', value: { field: '풀이수', label: '풀이 수' } },
      chartProperties: { showLegend: true },
    },
  },
};

/* ─── 분포 계열 ─── */

export const Histogram: Story = {
  args: {
    spec: {
      chartType: 'Histogram',
      data: { values: scoreDistRows },
      semanticTypes: { 점수: 'Score' },
      encodings: { x: { field: '점수', label: '점수' } },
      chartProperties: { binCount: 8 },
    },
  },
};

export const BoxPlot: Story = {
  args: {
    spec: {
      chartType: 'Box Plot',
      data: { values: scoreDistRows },
      semanticTypes: { 점수: 'Score' },
      encodings: { y: { field: '점수', label: '점수' }, x: '반' },
    },
  },
};

export const ViolinPlot: Story = {
  args: {
    spec: {
      chartType: 'Violin Plot',
      data: { values: scoreDistRows },
      semanticTypes: { 점수: 'Score' },
      encodings: { y: { field: '점수', label: '점수' }, x: '반' },
    },
  },
};

export const DensityPlot: Story = {
  args: {
    spec: {
      chartType: 'Density Plot',
      data: { values: scoreDistRows },
      semanticTypes: { 점수: 'Score' },
      encodings: { x: { field: '점수', label: '점수' }, color: '반' },
    },
  },
};

export const EcdfPlot: Story = {
  args: {
    spec: {
      chartType: 'ECDF Plot',
      data: { values: scoreDistRows },
      semanticTypes: { 점수: 'Score' },
      encodings: { x: { field: '점수', label: '점수' }, color: '반' },
    },
  },
};

export const StripPlot: Story = {
  args: {
    spec: {
      chartType: 'Strip Plot',
      data: { values: scoreDistRows },
      semanticTypes: { 점수: 'Score' },
      encodings: { x: '반', y: { field: '점수', label: '점수' } },
    },
  },
};

/* ─── 카테고리 비교 ─── */

export const LollipopChart: Story = {
  args: {
    spec: {
      chartType: 'Lollipop Chart',
      data: { values: subjectScores },
      semanticTypes: { 평균점수: 'Score' },
      encodings: { x: '과목', y: { field: '평균점수', label: '평균 점수' } },
      chartProperties: { showValueText: true },
    },
  },
};

export const WaterfallChart: Story = {
  args: {
    spec: {
      chartType: 'Waterfall Chart',
      data: {
        values: [
          { 월: '3월', 순증감: 42 },
          { 월: '4월', 순증감: 18 },
          { 월: '5월', 순증감: -12 },
          { 월: '6월', 순증감: 25 },
          { 월: '7월', 순증감: -8 },
        ],
      },
      semanticTypes: { 월: 'Month', 순증감: 'Count' },
      encodings: { x: '월', y: { field: '순증감', label: '수강생 순증감' } },
      chartProperties: { totalLabel: '순증 합계' },
    },
  },
};

export const PyramidChart: Story = {
  args: {
    spec: {
      chartType: 'Pyramid Chart',
      data: {
        values: [
          { 학년: '중1', 남학생: 120, 여학생: 132 },
          { 학년: '중2', 남학생: 145, 여학생: 138 },
          { 학년: '중3', 남학생: 160, 여학생: 155 },
          { 학년: '고1', 남학생: 130, 여학생: 148 },
          { 학년: '고2', 남학생: 110, 여학생: 118 },
          { 학년: '고3', 남학생: 88, 여학생: 95 },
        ],
      },
      semanticTypes: { 학년: 'Grade', 남학생: 'Count', 여학생: 'Count' },
      encodings: { y: '학년', left: '남학생', right: '여학생' },
    },
  },
};

export const BulletChart: Story = {
  args: {
    spec: {
      chartType: 'Bullet Chart',
      data: {
        values: [
          { 과목: '국어', 진도율: 72, 목표: 80 },
          { 과목: '영어', 진도율: 91, 목표: 85 },
          { 과목: '수학', 진도율: 58, 목표: 75 },
          { 과목: '과학', 진도율: 83, 목표: 80 },
        ],
      },
      semanticTypes: { 진도율: 'Percent', 목표: 'Percent' },
      encodings: {
        y: '과목',
        value: { field: '진도율', label: '진도율' },
        target: { field: '목표', label: '목표' },
      },
      chartProperties: { ranges: [50, 75, 100] },
    },
  },
};

/* ─── 시간·흐름 ─── */

export const GanttChart: Story = {
  args: {
    spec: {
      chartType: 'Gantt Chart',
      data: {
        values: [
          { 작업: '교재 기획', 시작: '2026-03-02', 종료: '2026-03-13', 팀: '콘텐츠' },
          { 작업: '문항 집필', 시작: '2026-03-09', 종료: '2026-04-03', 팀: '콘텐츠' },
          { 작업: '검수', 시작: '2026-03-30', 종료: '2026-04-10', 팀: '편집' },
          { 작업: '조판·디자인', 시작: '2026-04-06', 종료: '2026-04-24', 팀: '편집' },
          { 작업: '베타 수업', 시작: '2026-04-20', 종료: '2026-05-08', 팀: '운영' },
        ],
      },
      semanticTypes: { 시작: 'Date', 종료: 'Date' },
      encodings: { y: '작업', start: '시작', end: '종료', color: '팀' },
    },
  },
};

export const FunnelChart: Story = {
  args: {
    spec: {
      chartType: 'Funnel Chart',
      data: {
        values: [
          { 단계: '상담 신청', 인원: 1200 },
          { 단계: '레벨 테스트', 인원: 860 },
          { 단계: '체험 수업', 인원: 540 },
          { 단계: '정규 등록', 인원: 310 },
        ],
      },
      semanticTypes: { 인원: 'Count' },
      encodings: { x: '단계', y: { field: '인원', label: '인원' } },
    },
  },
};

export const ConnectedScatter: Story = {
  args: {
    spec: {
      chartType: 'Connected Scatter',
      data: {
        values: [
          { 월: '1월', 학습시간: 480, 평균점수: 62 },
          { 월: '2월', 학습시간: 540, 평균점수: 66 },
          { 월: '3월', 학습시간: 620, 평균점수: 71 },
          { 월: '4월', 학습시간: 590, 평균점수: 74 },
          { 월: '5월', 학습시간: 720, 평균점수: 79 },
          { 월: '6월', 학습시간: 680, 평균점수: 83 },
        ],
      },
      semanticTypes: { 학습시간: 'DurationMinutes', 평균점수: 'Score' },
      encodings: {
        x: { field: '학습시간', label: '월 학습 시간' },
        y: { field: '평균점수', label: '평균 점수' },
        detail: '월',
      },
    },
  },
};

export const RangedDotPlot: Story = {
  args: {
    spec: {
      chartType: 'Ranged Dot Plot',
      data: {
        values: [
          { 과목: '국어', 중간: 74, 기말: 82 },
          { 과목: '영어', 중간: 68, 기말: 79 },
          { 과목: '수학', 중간: 61, 기말: 73 },
          { 과목: '과학', 중간: 85, 기말: 81 },
          { 과목: '사회', 중간: 70, 기말: 76 },
        ],
      },
      semanticTypes: { 중간: 'Score', 기말: 'Score' },
      encodings: {
        y: '과목',
        start: { field: '중간', label: '중간고사' },
        end: { field: '기말', label: '기말고사' },
      },
    },
  },
};

/* ─── 계층·관계 ─── */

const studyTimeByUnit = [
  { 과목군: '언어', 과목: '국어', 학습시간: 320 },
  { 과목군: '언어', 과목: '영어', 학습시간: 410 },
  { 과목군: '수리', 과목: '수학', 학습시간: 520 },
  { 과목군: '수리', 과목: '과학', 학습시간: 180 },
  { 과목군: '탐구', 과목: '사회', 학습시간: 150 },
  { 과목군: '탐구', 과목: '한국사', 학습시간: 120 },
];

export const Treemap: Story = {
  args: {
    spec: {
      chartType: 'Treemap',
      data: { values: studyTimeByUnit },
      semanticTypes: { 학습시간: 'DurationMinutes' },
      encodings: {
        category: '과목',
        value: { field: '학습시간', label: '학습 시간' },
        group: '과목군',
      },
      chartProperties: { showLegend: true },
    },
  },
};

export const Sunburst: Story = {
  args: {
    spec: {
      chartType: 'Sunburst',
      data: { values: studyTimeByUnit },
      semanticTypes: { 학습시간: 'DurationMinutes' },
      encodings: {
        category: '과목',
        value: { field: '학습시간', label: '학습 시간' },
        group: '과목군',
      },
      chartProperties: { innerRadius: 40 },
    },
  },
};

export const Tree: Story = {
  args: {
    spec: {
      chartType: 'Tree',
      data: {
        values: [
          { 이름: '중등 수학', 상위: null },
          { 이름: '수와 연산', 상위: '중등 수학' },
          { 이름: '문자와 식', 상위: '중등 수학' },
          { 이름: '함수', 상위: '중등 수학' },
          { 이름: '소인수분해', 상위: '수와 연산' },
          { 이름: '정수와 유리수', 상위: '수와 연산' },
          { 이름: '일차방정식', 상위: '문자와 식' },
          { 이름: '좌표평면과 그래프', 상위: '함수' },
        ],
      },
      encodings: { category: '이름', parent: '상위' },
    },
  },
};

export const Sankey: Story = {
  args: {
    spec: {
      chartType: 'Sankey',
      data: {
        values: [
          { 출발: '중3', 도착: '고등 내신반', 인원: 120 },
          { 출발: '중3', 도착: '고등 수능반', 인원: 80 },
          { 출발: '고등 내신반', 도착: '이과', 인원: 70 },
          { 출발: '고등 내신반', 도착: '문과', 인원: 50 },
          { 출발: '고등 수능반', 도착: '이과', 인원: 45 },
          { 출발: '고등 수능반', 도착: '문과', 인원: 35 },
        ],
      },
      semanticTypes: { 인원: 'Count' },
      encodings: { source: '출발', target: '도착', value: { field: '인원', label: '인원' } },
    },
  },
};

export const Graph: Story = {
  args: {
    spec: {
      chartType: 'Graph',
      data: {
        values: [
          { 개념A: '일차방정식', 개념B: '연립방정식', 연관도: 5 },
          { 개념A: '일차방정식', 개념B: '일차함수', 연관도: 4 },
          { 개념A: '일차함수', 개념B: '이차함수', 연관도: 3 },
          { 개념A: '연립방정식', 개념B: '일차함수', 연관도: 2 },
          { 개념A: '이차함수', 개념B: '이차방정식', 연관도: 4 },
          { 개념A: '이차방정식', 개념B: '인수분해', 연관도: 5 },
        ],
      },
      encodings: { source: '개념A', target: '개념B', value: '연관도' },
      chartProperties: { sizeByDegree: true },
    },
  },
};

/* ─── 극좌표·게이지 ─── */

export const RoseChart: Story = {
  args: {
    spec: {
      chartType: 'Rose Chart',
      data: {
        values: [
          { 요일: '월', 학습시간: 95 },
          { 요일: '화', 학습시간: 110 },
          { 요일: '수', 학습시간: 85 },
          { 요일: '목', 학습시간: 120 },
          { 요일: '금', 학습시간: 70 },
          { 요일: '토', 학습시간: 140 },
          { 요일: '일', 학습시간: 60 },
        ],
      },
      semanticTypes: { 학습시간: 'DurationMinutes' },
      encodings: {
        category: { field: '요일', type: 'ordinal' },
        value: { field: '학습시간', label: '학습 시간' },
      },
    },
  },
};

export const Gauge: Story = {
  args: {
    spec: {
      chartType: 'Gauge',
      data: { values: [{ 진도율: 72 }] },
      semanticTypes: { 진도율: 'Percent' },
      encodings: { value: { field: '진도율', label: '전체 진도율' } },
    },
  },
};

/* ─── 변동·순위 ─── */

export const CandlestickChart: Story = {
  args: {
    spec: {
      chartType: 'Candlestick Chart',
      data: {
        values: [
          { 주차: '1주', 시가: 68, 고가: 75, 저가: 64, 종가: 72 },
          { 주차: '2주', 시가: 72, 고가: 78, 저가: 69, 종가: 70 },
          { 주차: '3주', 시가: 70, 고가: 82, 저가: 70, 종가: 80 },
          { 주차: '4주', 시가: 80, 고가: 85, 저가: 74, 종가: 76 },
          { 주차: '5주', 시가: 76, 고가: 88, 저가: 75, 종가: 86 },
        ],
      },
      semanticTypes: { 시가: 'Score', 고가: 'Score', 저가: 'Score', 종가: 'Score' },
      encodings: {
        x: { field: '주차', type: 'ordinal' },
        open: '시가',
        high: '고가',
        low: '저가',
        close: '종가',
      },
    },
  },
};

export const BumpChart: Story = {
  args: {
    spec: {
      chartType: 'Bump Chart',
      data: {
        values: [
          { 월: '3월', 학생: '김민준', 순위: 1 },
          { 월: '3월', 학생: '이서연', 순위: 2 },
          { 월: '3월', 학생: '박지호', 순위: 3 },
          { 월: '4월', 학생: '김민준', 순위: 2 },
          { 월: '4월', 학생: '이서연', 순위: 1 },
          { 월: '4월', 학생: '박지호', 순위: 3 },
          { 월: '5월', 학생: '김민준', 순위: 3 },
          { 월: '5월', 학생: '이서연', 순위: 1 },
          { 월: '5월', 학생: '박지호', 순위: 2 },
          { 월: '6월', 학생: '김민준', 순위: 2 },
          { 월: '6월', 학생: '이서연', 순위: 3 },
          { 월: '6월', 학생: '박지호', 순위: 1 },
        ],
      },
      semanticTypes: { 월: 'Month', 순위: 'Rank' },
      encodings: { x: '월', y: '순위', color: '학생' },
    },
  },
};

export const SlopeChart: Story = {
  args: {
    spec: {
      chartType: 'Slope Chart',
      data: {
        values: [
          { 시험: '중간고사', 학생: '김민준', 점수: 72 },
          { 시험: '기말고사', 학생: '김민준', 점수: 84 },
          { 시험: '중간고사', 학생: '이서연', 점수: 88 },
          { 시험: '기말고사', 학생: '이서연', 점수: 82 },
          { 시험: '중간고사', 학생: '박지호', 점수: 65 },
          { 시험: '기말고사', 학생: '박지호', 점수: 78 },
        ],
      },
      semanticTypes: { 점수: 'Score' },
      encodings: { x: '시험', y: '점수', color: '학생' },
    },
  },
};

/* ─── KPI·미니 차트 ─── */

export const KpiCard: Story = {
  args: {
    spec: {
      chartType: 'KPI Card',
      data: {
        values: [
          { 월: '2026-01-01', 활성학습자: 1180 },
          { 월: '2026-02-01', 활성학습자: 1240 },
          { 월: '2026-03-01', 활성학습자: 1315 },
          { 월: '2026-04-01', 활성학습자: 1290 },
          { 월: '2026-05-01', 활성학습자: 1402 },
          { 월: '2026-06-01', 활성학습자: 1476 },
        ],
      },
      semanticTypes: { 월: 'Date', 활성학습자: 'Count' },
      encodings: { value: { field: '활성학습자', label: '월간 활성 학습자' }, x: '월' },
      chartProperties: { deltaLabel: '전월 대비', unit: '명' },
    },
  },
};

export const Sparkline: Story = {
  args: {
    spec: {
      chartType: 'Sparkline',
      data: { values: monthlyMinutes },
      semanticTypes: { 학습시간: 'DurationMinutes' },
      encodings: { y: { field: '학습시간', label: '학습 시간' } },
      chartProperties: { variant: 'area' },
    },
    height: 60,
  },
};

/* ─── 다차원 ─── */

export const ParallelCoordinates: Story = {
  args: {
    spec: {
      chartType: 'Parallel Coordinates',
      data: {
        values: [
          { 학생: '김민준', 반: '1반', 국어: 82, 영어: 74, 수학: 91, 과학: 68 },
          { 학생: '이서연', 반: '1반', 국어: 76, 영어: 88, 수학: 72, 과학: 80 },
          { 학생: '박지호', 반: '2반', 국어: 64, 영어: 70, 수학: 85, 과학: 77 },
          { 학생: '최수아', 반: '2반', 국어: 90, 영어: 82, 수학: 66, 과학: 85 },
          { 학생: '정도윤', 반: '3반', 국어: 71, 영어: 65, 수학: 78, 과학: 72 },
          { 학생: '한지우', 반: '3반', 국어: 85, 영어: 79, 수학: 88, 과학: 90 },
        ],
      },
      encodings: { color: '반' },
      chartProperties: { dimensions: ['국어', '영어', '수학', '과학'] },
    },
  },
};

/* ─── 기본 차트 ─── */

export const LineChart: Story = {
  args: {
    spec: {
      chartType: 'Line Chart',
      data: { values: monthlyClassScores },
      semanticTypes: { 월: 'Month', 평균점수: 'Score' },
      encodings: { x: '월', y: '평균점수', color: '반' },
    },
  },
};

const questionTypes = [
  { 유형: '객관식', 문항수: 420 },
  { 유형: '주관식', 문항수: 260 },
  { 유형: '서술형', 문항수: 120 },
  { 유형: 'OX', 문항수: 90 },
];

export const PieChart: Story = {
  args: {
    spec: {
      chartType: 'Pie Chart',
      data: { values: questionTypes },
      semanticTypes: { 문항수: 'Count' },
      encodings: { category: '유형', value: { field: '문항수', label: '문항 수' } },
    },
  },
};

export const DonutChart: Story = {
  args: {
    spec: {
      chartType: 'Donut Chart',
      data: { values: questionTypes },
      semanticTypes: { 문항수: 'Count' },
      encodings: { category: '유형', value: { field: '문항수', label: '문항 수' } },
    },
  },
};

export const ScatterPlot: Story = {
  args: {
    spec: {
      chartType: 'Scatter Plot',
      data: {
        values: Array.from({ length: 30 }, (_, i) => ({
          반: ['1반', '2반', '3반'][i % 3],
          학습시간: 120 + ((i * 37) % 480),
          점수: 40 + ((i * 23) % 55),
          풀이수: 20 + ((i * 11) % 80),
        })),
      },
      semanticTypes: { 학습시간: 'DurationMinutes', 점수: 'Score', 풀이수: 'Count' },
      encodings: {
        x: { field: '학습시간', label: '주간 학습 시간' },
        y: { field: '점수', label: '점수' },
        color: '반',
        size: '풀이수',
      },
    },
  },
};

export const RadarChart: Story = {
  args: {
    spec: {
      chartType: 'Radar Chart',
      data: {
        values: [
          { 영역: '어휘', 학생: '김민준', 점수: 78 },
          { 영역: '문법', 학생: '김민준', 점수: 65 },
          { 영역: '독해', 학생: '김민준', 점수: 88 },
          { 영역: '듣기', 학생: '김민준', 점수: 72 },
          { 영역: '쓰기', 학생: '김민준', 점수: 60 },
          { 영역: '어휘', 학생: '이서연', 점수: 85 },
          { 영역: '문법', 학생: '이서연', 점수: 80 },
          { 영역: '독해', 학생: '이서연', 점수: 70 },
          { 영역: '듣기', 학생: '이서연', 점수: 90 },
          { 영역: '쓰기', 학생: '이서연', 점수: 76 },
        ],
      },
      semanticTypes: { 점수: 'Score' },
      encodings: { x: '영역', y: '점수', color: '학생' },
    },
  },
};

const chartCatalog = [
  { title: 'Bar Chart', story: BarChart },
  { title: 'Grouped Bar Chart', story: GroupedBarChart },
  { title: 'Stacked Bar Chart', story: StackedBarChart },
  { title: 'Area Chart', story: AreaChart },
  { title: 'Stacked Area Chart', story: StackedAreaChart },
  { title: 'Streamgraph', story: Streamgraph },
  { title: 'Range Area Chart', story: RangeAreaChart },
  { title: 'Heatmap', story: Heatmap },
  { title: 'Calendar Heatmap', story: CalendarHeatmap },
  { title: 'Histogram', story: Histogram },
  { title: 'Box Plot', story: BoxPlot },
  { title: 'Violin Plot', story: ViolinPlot },
  { title: 'Density Plot', story: DensityPlot },
  { title: 'ECDF Plot', story: EcdfPlot },
  { title: 'Strip Plot', story: StripPlot },
  { title: 'Lollipop Chart', story: LollipopChart },
  { title: 'Waterfall Chart', story: WaterfallChart },
  { title: 'Pyramid Chart', story: PyramidChart },
  { title: 'Bullet Chart', story: BulletChart },
  { title: 'Gantt Chart', story: GanttChart },
  { title: 'Funnel Chart', story: FunnelChart },
  { title: 'Connected Scatter', story: ConnectedScatter },
  { title: 'Ranged Dot Plot', story: RangedDotPlot },
  { title: 'Treemap', story: Treemap },
  { title: 'Sunburst', story: Sunburst },
  { title: 'Tree', story: Tree },
  { title: 'Sankey', story: Sankey },
  { title: 'Graph', story: Graph },
  { title: 'Rose Chart', story: RoseChart },
  { title: 'Gauge', story: Gauge, height: 220 },
  { title: 'Candlestick Chart', story: CandlestickChart },
  { title: 'Bump Chart', story: BumpChart },
  { title: 'Slope Chart', story: SlopeChart },
  { title: 'KPI Card', story: KpiCard, height: 180 },
  { title: 'Sparkline', story: Sparkline, height: 96 },
  { title: 'Parallel Coordinates', story: ParallelCoordinates },
  { title: 'Line Chart', story: LineChart },
  { title: 'Pie Chart', story: PieChart },
  { title: 'Donut Chart', story: DonutChart },
  { title: 'Scatter Plot', story: ScatterPlot },
  { title: 'Radar Chart', story: RadarChart },
] satisfies Array<{ title: string; story: Story; height?: number }>;

function CatalogGrid({
  heading,
  description,
  mapSpec = (spec) => spec,
}: {
  heading: string;
  description: string;
  mapSpec?: (spec: ChartSpec) => ChartSpec;
}) {
  return (
    <Stack gap="24" padding="24" width="100%">
      <Box>
        <Box as="h2" textStyle="title-2xl" color="neutral.text.base">
          {heading}
        </Box>
        <Box mt="4" textStyle="body-sm" color="neutral.text.low">
          {description}
        </Box>
      </Box>

      <Grid gridTemplateColumns={{ base: '1fr', xl: 'repeat(2, minmax(0, 1fr))' }} gap="24">
        {chartCatalog.map(({ title, story, height }) => {
          const spec = story.args?.spec as ChartSpec | undefined;

          if (!spec) {
            return null;
          }

          return (
            <Stack
              key={title}
              as="article"
              gap="12"
              padding="16"
              borderWidth="1px"
              borderColor="neutral.border.low"
              borderRadius="12"
              bg="neutral.surface.low"
            >
              <Box>
                <Box as="h3" textStyle="title-md" color="neutral.text.base">
                  {title}
                </Box>
                <Box mt="2" textStyle="caption-lg" color="neutral.text.low">
                  chartType: {spec.chartType}
                </Box>
              </Box>

              <Chart spec={mapSpec(spec)} height={height ?? 280} />
            </Stack>
          );
        })}
      </Grid>
    </Stack>
  );
}

const ChartAllChartsExample = () => (
    <CatalogGrid
      heading="Chart Catalog"
      description={`ChartSpec 샘플 ${chartCatalog.length}개를 한 번에 렌더링합니다.`}
    />
);

export const ChartAllChartsTremorExample = () => (
  <CatalogGrid
    heading="Chart Catalog — Tremor"
    description={`chartProperties.colors에 TREMOR_9를 주입해 ${chartCatalog.length}개 차트를 렌더링합니다. colors prop이 없는 차트는 기본 색을 유지합니다.`}
    mapSpec={(spec) => ({
      ...spec,
      chartProperties: { ...spec.chartProperties, colors: CHART_COLOR_PRESET },
    })}
  />
);

export default ChartAllChartsExample;

import type { ComponentProps } from 'react';
import { Chart } from '@mildang/design-system/Chart';

/* ─── 공용 샘플 데이터 (밀당 도메인, 전부 결정적) ─── */

const subjectScores = [
  { 과목: '국어', 평균점수: 82 },
  { 과목: '영어', 평균점수: 76 },
  { 과목: '수학', 평균점수: 68 },
  { 과목: '과학', 평균점수: 88 },
  { 과목: '사회', 평균점수: 74 },
];

const STORY_DEFAULT_ARGS = { ...({}), ...({
    spec: {
      chartType: 'Bar Chart',
      data: { values: subjectScores },
      semanticTypes: { 평균점수: 'Score' },
      encodings: { x: '과목', y: { field: '평균점수', label: '평균 점수' } },
    },
  }) } as ComponentProps<typeof Chart>;

export default function ChartBarChartExample(props: Partial<ComponentProps<typeof Chart>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Chart>;
  return <Chart {...mergedProps} />;
}

import type { ComponentProps } from 'react';
import { Chart } from '@mildang/design-system/Chart';

const subjectClassScores = [
  { 과목: '국어', 반: '1반', 점수: 84 },
  { 과목: '국어', 반: '2반', 점수: 78 },
  { 과목: '영어', 반: '1반', 점수: 72 },
  { 과목: '영어', 반: '2반', 점수: 81 },
  { 과목: '수학', 반: '1반', 점수: 66 },
  { 과목: '수학', 반: '2반', 점수: 74 },
];

const STORY_DEFAULT_ARGS = { ...({}), ...({
    spec: {
      chartType: 'Grouped Bar Chart',
      data: { values: subjectClassScores },
      semanticTypes: { 점수: 'Score' },
      encodings: { x: '과목', y: '점수', color: '반' },
    },
  }) } as ComponentProps<typeof Chart>;

export default function ChartGroupedBarChartExample(props: Partial<ComponentProps<typeof Chart>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Chart>;
  return <Chart {...mergedProps} />;
}

import type { ComponentProps } from 'react';
import { Chart } from '@mildang/design-system/Chart';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    spec: {
      chartType: 'Stacked Bar Chart',
      data: {
        values: [
          { 월: '3월', 유형: '객관식', 풀이수: 320 },
          { 월: '3월', 유형: '주관식', 풀이수: 180 },
          { 월: '3월', 유형: '서술형', 풀이수: 60 },
          { 월: '4월', 유형: '객관식', 풀이수: 410 },
          { 월: '4월', 유형: '주관식', 풀이수: 210 },
          { 월: '4월', 유형: '서술형', 풀이수: 90 },
          { 월: '5월', 유형: '객관식', 풀이수: 380 },
          { 월: '5월', 유형: '주관식', 풀이수: 240 },
          { 월: '5월', 유형: '서술형', 풀이수: 110 },
        ],
      },
      semanticTypes: { 월: 'Month', 풀이수: 'Count' },
      encodings: { x: '월', y: '풀이수', color: '유형' },
    },
  }) } as ComponentProps<typeof Chart>;

export default function ChartStackedBarChartExample(props: Partial<ComponentProps<typeof Chart>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Chart>;
  return <Chart {...mergedProps} />;
}

import type { ComponentProps } from 'react';
import { Chart } from '@mildang/design-system/Chart';

const monthlyMinutes = [
  { 월: '1월', 학습시간: 620 },
  { 월: '2월', 학습시간: 540 },
  { 월: '3월', 학습시간: 710 },
  { 월: '4월', 학습시간: 680 },
  { 월: '5월', 학습시간: 820 },
  { 월: '6월', 학습시간: 760 },
];

const STORY_DEFAULT_ARGS = { ...({}), ...({
    spec: {
      chartType: 'Area Chart',
      data: { values: monthlyMinutes },
      semanticTypes: { 월: 'Month', 학습시간: 'DurationMinutes' },
      encodings: { x: '월', y: { field: '학습시간', label: '학습 시간' } },
    },
  }) } as ComponentProps<typeof Chart>;

export default function ChartAreaChartExample(props: Partial<ComponentProps<typeof Chart>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Chart>;
  return <Chart {...mergedProps} />;
}

import type { ComponentProps } from 'react';
import { Chart } from '@mildang/design-system/Chart';

/** 월×과목 학습 시간 long 데이터 — 결정적 공식으로 생성 */
const monthlySubjectMinutes = ['1월', '2월', '3월', '4월', '5월', '6월'].flatMap((월, mi) =>
  ['국어', '영어', '수학'].map((과목, si) => ({
    월,
    과목,
    학습시간: 120 + ((mi * 53 + si * 91) % 180),
  })),
);

const STORY_DEFAULT_ARGS = { ...({}), ...({
    spec: {
      chartType: 'Stacked Area Chart',
      data: { values: monthlySubjectMinutes },
      semanticTypes: { 월: 'Month', 학습시간: 'DurationMinutes' },
      encodings: { x: '월', y: '학습시간', color: '과목' },
    },
  }) } as ComponentProps<typeof Chart>;

export default function ChartStackedAreaChartExample(props: Partial<ComponentProps<typeof Chart>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Chart>;
  return <Chart {...mergedProps} />;
}

import type { ComponentProps } from 'react';
import { Chart } from '@mildang/design-system/Chart';

/** 월×과목 학습 시간 long 데이터 — 결정적 공식으로 생성 */
const monthlySubjectMinutes = ['1월', '2월', '3월', '4월', '5월', '6월'].flatMap((월, mi) =>
  ['국어', '영어', '수학'].map((과목, si) => ({
    월,
    과목,
    학습시간: 120 + ((mi * 53 + si * 91) % 180),
  })),
);

const STORY_DEFAULT_ARGS = { ...({}), ...({
    spec: {
      chartType: 'Streamgraph',
      data: { values: monthlySubjectMinutes },
      semanticTypes: { 월: 'Month', 학습시간: 'DurationMinutes' },
      encodings: { x: '월', y: '학습시간', color: '과목' },
    },
  }) } as ComponentProps<typeof Chart>;

export default function ChartStreamgraphExample(props: Partial<ComponentProps<typeof Chart>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Chart>;
  return <Chart {...mergedProps} />;
}

import type { ComponentProps } from 'react';
import { Chart } from '@mildang/design-system/Chart';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    spec: {
      chartType: 'Range Area Chart',
      data: {
        values: [
          { 월: '1월', 최저: 52, 최고: 94, 평균: 71 },
          { 월: '2월', 최저: 48, 최고: 90, 평균: 68 },
          { 월: '3월', 최저: 55, 최고: 96, 평균: 74 },
          { 월: '4월', 최저: 58, 최고: 93, 평균: 76 },
          { 월: '5월', 최저: 61, 최고: 98, 평균: 79 },
          { 월: '6월', 최저: 57, 최고: 95, 평균: 77 },
        ],
      },
      semanticTypes: { 월: 'Month', 최저: 'Score', 최고: 'Score', 평균: 'Score' },
      encodings: {
        x: '월',
        y0: { field: '최저', label: '최저 점수' },
        y1: { field: '최고', label: '최고 점수' },
        mid: { field: '평균', label: '평균 점수' },
      },
    },
  }) } as ComponentProps<typeof Chart>;

export default function ChartRangeAreaChartExample(props: Partial<ComponentProps<typeof Chart>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Chart>;
  return <Chart {...mergedProps} />;
}

import type { ComponentProps } from 'react';
import { Chart } from '@mildang/design-system/Chart';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    spec: {
      chartType: 'Heatmap',
      data: {
        values: ['1반', '2반', '3반'].flatMap((반, ci) =>
          ['1단원', '2단원', '3단원', '4단원', '5단원'].map((단원, ui) => ({
            반,
            단원,
            정답률: 55 + ((ci * 17 + ui * 13) % 40),
          })),
        ),
      },
      semanticTypes: { 정답률: 'Percent' },
      encodings: { x: '단원', y: '반', value: { field: '정답률', label: '정답률' } },
      chartProperties: { showValues: true, showLegend: true },
    },
  }) } as ComponentProps<typeof Chart>;

export default function ChartHeatmapExample(props: Partial<ComponentProps<typeof Chart>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Chart>;
  return <Chart {...mergedProps} />;
}

import type { ComponentProps } from 'react';
import { Chart } from '@mildang/design-system/Chart';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    spec: {
      chartType: 'Calendar Heatmap',
      data: {
        values: Array.from({ length: 112 }, (_, i) => ({
          날짜: new Date(Date.UTC(2026, 0, 5 + i)).toISOString().slice(0, 10),
          풀이수: i % 6 === 5 ? 0 : ((i * 7) % 19) + (i % 4),
        })),
      },
      semanticTypes: { 날짜: 'Date', 풀이수: 'Count' },
      encodings: { date: '날짜', value: { field: '풀이수', label: '풀이 수' } },
      chartProperties: { showLegend: true },
    },
  }) } as ComponentProps<typeof Chart>;

export default function ChartCalendarHeatmapExample(props: Partial<ComponentProps<typeof Chart>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Chart>;
  return <Chart {...mergedProps} />;
}

import type { ComponentProps } from 'react';
import { Chart } from '@mildang/design-system/Chart';

/** 반별 점수 분포 long 데이터 — 분포 계열(Box/Violin/Density/ECDF/Strip/Histogram) 공용 */
const scoreDistRows = ['1반', '2반', '3반'].flatMap((반, ci) =>
  Array.from({ length: 24 }, (_, i) => ({
    반,
    점수: 45 + ci * 5 + ((i * 7) % 29) + (i % 4) * 2,
  })),
);

const STORY_DEFAULT_ARGS = { ...({}), ...({
    spec: {
      chartType: 'Histogram',
      data: { values: scoreDistRows },
      semanticTypes: { 점수: 'Score' },
      encodings: { x: { field: '점수', label: '점수' } },
      chartProperties: { binCount: 8 },
    },
  }) } as ComponentProps<typeof Chart>;

export default function ChartHistogramExample(props: Partial<ComponentProps<typeof Chart>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Chart>;
  return <Chart {...mergedProps} />;
}

import type { ComponentProps } from 'react';
import { Chart } from '@mildang/design-system/Chart';

/** 반별 점수 분포 long 데이터 — 분포 계열(Box/Violin/Density/ECDF/Strip/Histogram) 공용 */
const scoreDistRows = ['1반', '2반', '3반'].flatMap((반, ci) =>
  Array.from({ length: 24 }, (_, i) => ({
    반,
    점수: 45 + ci * 5 + ((i * 7) % 29) + (i % 4) * 2,
  })),
);

const STORY_DEFAULT_ARGS = { ...({}), ...({
    spec: {
      chartType: 'Box Plot',
      data: { values: scoreDistRows },
      semanticTypes: { 점수: 'Score' },
      encodings: { y: { field: '점수', label: '점수' }, x: '반' },
    },
  }) } as ComponentProps<typeof Chart>;

export default function ChartBoxPlotExample(props: Partial<ComponentProps<typeof Chart>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Chart>;
  return <Chart {...mergedProps} />;
}

import type { ComponentProps } from 'react';
import { Chart } from '@mildang/design-system/Chart';

/** 반별 점수 분포 long 데이터 — 분포 계열(Box/Violin/Density/ECDF/Strip/Histogram) 공용 */
const scoreDistRows = ['1반', '2반', '3반'].flatMap((반, ci) =>
  Array.from({ length: 24 }, (_, i) => ({
    반,
    점수: 45 + ci * 5 + ((i * 7) % 29) + (i % 4) * 2,
  })),
);

const STORY_DEFAULT_ARGS = { ...({}), ...({
    spec: {
      chartType: 'Violin Plot',
      data: { values: scoreDistRows },
      semanticTypes: { 점수: 'Score' },
      encodings: { y: { field: '점수', label: '점수' }, x: '반' },
    },
  }) } as ComponentProps<typeof Chart>;

export default function ChartViolinPlotExample(props: Partial<ComponentProps<typeof Chart>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Chart>;
  return <Chart {...mergedProps} />;
}

import type { ComponentProps } from 'react';
import { Chart } from '@mildang/design-system/Chart';

/** 반별 점수 분포 long 데이터 — 분포 계열(Box/Violin/Density/ECDF/Strip/Histogram) 공용 */
const scoreDistRows = ['1반', '2반', '3반'].flatMap((반, ci) =>
  Array.from({ length: 24 }, (_, i) => ({
    반,
    점수: 45 + ci * 5 + ((i * 7) % 29) + (i % 4) * 2,
  })),
);

const STORY_DEFAULT_ARGS = { ...({}), ...({
    spec: {
      chartType: 'Density Plot',
      data: { values: scoreDistRows },
      semanticTypes: { 점수: 'Score' },
      encodings: { x: { field: '점수', label: '점수' }, color: '반' },
    },
  }) } as ComponentProps<typeof Chart>;

export default function ChartDensityPlotExample(props: Partial<ComponentProps<typeof Chart>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Chart>;
  return <Chart {...mergedProps} />;
}

import type { ComponentProps } from 'react';
import { Chart } from '@mildang/design-system/Chart';

/** 반별 점수 분포 long 데이터 — 분포 계열(Box/Violin/Density/ECDF/Strip/Histogram) 공용 */
const scoreDistRows = ['1반', '2반', '3반'].flatMap((반, ci) =>
  Array.from({ length: 24 }, (_, i) => ({
    반,
    점수: 45 + ci * 5 + ((i * 7) % 29) + (i % 4) * 2,
  })),
);

const STORY_DEFAULT_ARGS = { ...({}), ...({
    spec: {
      chartType: 'ECDF Plot',
      data: { values: scoreDistRows },
      semanticTypes: { 점수: 'Score' },
      encodings: { x: { field: '점수', label: '점수' }, color: '반' },
    },
  }) } as ComponentProps<typeof Chart>;

export default function ChartEcdfPlotExample(props: Partial<ComponentProps<typeof Chart>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Chart>;
  return <Chart {...mergedProps} />;
}

import type { ComponentProps } from 'react';
import { Chart } from '@mildang/design-system/Chart';

/** 반별 점수 분포 long 데이터 — 분포 계열(Box/Violin/Density/ECDF/Strip/Histogram) 공용 */
const scoreDistRows = ['1반', '2반', '3반'].flatMap((반, ci) =>
  Array.from({ length: 24 }, (_, i) => ({
    반,
    점수: 45 + ci * 5 + ((i * 7) % 29) + (i % 4) * 2,
  })),
);

const STORY_DEFAULT_ARGS = { ...({}), ...({
    spec: {
      chartType: 'Strip Plot',
      data: { values: scoreDistRows },
      semanticTypes: { 점수: 'Score' },
      encodings: { x: '반', y: { field: '점수', label: '점수' } },
    },
  }) } as ComponentProps<typeof Chart>;

export default function ChartStripPlotExample(props: Partial<ComponentProps<typeof Chart>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Chart>;
  return <Chart {...mergedProps} />;
}

import type { ComponentProps } from 'react';
import { Chart } from '@mildang/design-system/Chart';

/* ─── 공용 샘플 데이터 (밀당 도메인, 전부 결정적) ─── */

const subjectScores = [
  { 과목: '국어', 평균점수: 82 },
  { 과목: '영어', 평균점수: 76 },
  { 과목: '수학', 평균점수: 68 },
  { 과목: '과학', 평균점수: 88 },
  { 과목: '사회', 평균점수: 74 },
];

const STORY_DEFAULT_ARGS = { ...({}), ...({
    spec: {
      chartType: 'Lollipop Chart',
      data: { values: subjectScores },
      semanticTypes: { 평균점수: 'Score' },
      encodings: { x: '과목', y: { field: '평균점수', label: '평균 점수' } },
      chartProperties: { showValueText: true },
    },
  }) } as ComponentProps<typeof Chart>;

export default function ChartLollipopChartExample(props: Partial<ComponentProps<typeof Chart>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Chart>;
  return <Chart {...mergedProps} />;
}

import type { ComponentProps } from 'react';
import { Chart } from '@mildang/design-system/Chart';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    spec: {
      chartType: 'Waterfall Chart',
      data: {
        values: [
          { 월: '3월', 순증감: 42 },
          { 월: '4월', 순증감: 18 },
          { 월: '5월', 순증감: -12 },
          { 월: '6월', 순증감: 25 },
          { 월: '7월', 순증감: -8 },
        ],
      },
      semanticTypes: { 월: 'Month', 순증감: 'Count' },
      encodings: { x: '월', y: { field: '순증감', label: '수강생 순증감' } },
      chartProperties: { totalLabel: '순증 합계' },
    },
  }) } as ComponentProps<typeof Chart>;

export default function ChartWaterfallChartExample(props: Partial<ComponentProps<typeof Chart>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Chart>;
  return <Chart {...mergedProps} />;
}

import type { ComponentProps } from 'react';
import { Chart } from '@mildang/design-system/Chart';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    spec: {
      chartType: 'Pyramid Chart',
      data: {
        values: [
          { 학년: '중1', 남학생: 120, 여학생: 132 },
          { 학년: '중2', 남학생: 145, 여학생: 138 },
          { 학년: '중3', 남학생: 160, 여학생: 155 },
          { 학년: '고1', 남학생: 130, 여학생: 148 },
          { 학년: '고2', 남학생: 110, 여학생: 118 },
          { 학년: '고3', 남학생: 88, 여학생: 95 },
        ],
      },
      semanticTypes: { 학년: 'Grade', 남학생: 'Count', 여학생: 'Count' },
      encodings: { y: '학년', left: '남학생', right: '여학생' },
    },
  }) } as ComponentProps<typeof Chart>;

export default function ChartPyramidChartExample(props: Partial<ComponentProps<typeof Chart>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Chart>;
  return <Chart {...mergedProps} />;
}

import type { ComponentProps } from 'react';
import { Chart } from '@mildang/design-system/Chart';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    spec: {
      chartType: 'Bullet Chart',
      data: {
        values: [
          { 과목: '국어', 진도율: 72, 목표: 80 },
          { 과목: '영어', 진도율: 91, 목표: 85 },
          { 과목: '수학', 진도율: 58, 목표: 75 },
          { 과목: '과학', 진도율: 83, 목표: 80 },
        ],
      },
      semanticTypes: { 진도율: 'Percent', 목표: 'Percent' },
      encodings: {
        y: '과목',
        value: { field: '진도율', label: '진도율' },
        target: { field: '목표', label: '목표' },
      },
      chartProperties: { ranges: [50, 75, 100] },
    },
  }) } as ComponentProps<typeof Chart>;

export default function ChartBulletChartExample(props: Partial<ComponentProps<typeof Chart>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Chart>;
  return <Chart {...mergedProps} />;
}