RadarChart

Data Visualization

visx 기반 방사형 차트.

Usage

한 항목의 여러 역량이나 여러 항목의 다축 프로파일을 방사형으로 비교할 때 사용한다.

import

import { RadarChart } from '@mildang/design-system/Chart';

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

RadarChart Props

Prop

Type

Default

axisKeys

필수

string[]

지정 안 함

data

필수

RadarSeriesDatum[]

지정 안 함

axisLabelFormat

(key: string) => string

(key) => key

children

ReactNode

지정 안 함

className

string

지정 안 함

colors

string[]

지정 안 함

legendPosition

"bottom" | "left" | "right" | "top"

bottom

levels

number

margin

Partial<ChartMargin>

지정 안 함

showAxis

boolean

true

showGrid

boolean

true

showLegend

boolean

false

예제

단일 시리즈

코드

Open in Playground

import { RadarChart } from '@mildang/design-system/Chart';
import { css } from '@mildang/styled-system/css';

const AXIS_KEYS = ['학습의욕', '자신감', '흥미', '가치', '자기효능감'];

const singleSeriesData = [
  {
    label: '학생 A',
    values: { 학습의욕: 75, 자신감: 60, 흥미: 85, 가치: 70, 자기효능감: 65 },
  },
];

const defaultChartWrapperClass = css({
  w: '[400px]',
  h: '[400px]',
});

const RadarChartSingleExample = () => (
    <div className={defaultChartWrapperClass}>
      <RadarChart
        data={singleSeriesData}
        axisKeys={AXIS_KEYS}
      />
    </div>
  );

export default RadarChartSingleExample;

다중 시리즈 오버레이

코드

Open in Playground

import { RadarChart } from '@mildang/design-system/Chart';
import { css } from '@mildang/styled-system/css';

const AXIS_KEYS = ['학습의욕', '자신감', '흥미', '가치', '자기효능감'];

const multiSeriesData = [
  {
    label: '학생 A',
    values: { 학습의욕: 75, 자신감: 60, 흥미: 85, 가치: 70, 자기효능감: 65 },
  },
  {
    label: '반 평균',
    values: { 학습의욕: 68, 자신감: 72, 흥미: 70, 가치: 75, 자기효능감: 71 },
  },
];

const defaultChartWrapperClass = css({
  w: '[400px]',
  h: '[400px]',
});

const RadarChartMultiSeriesExample = () => (
    <div className={defaultChartWrapperClass}>
      <RadarChart
        data={multiSeriesData}
        axisKeys={AXIS_KEYS}
        showLegend
      />
    </div>
  );

export default RadarChartMultiSeriesExample;

5단계 눈금

코드

Open in Playground

import { RadarChart } from '@mildang/design-system/Chart';
import { css } from '@mildang/styled-system/css';

const AXIS_KEYS = ['학습의욕', '자신감', '흥미', '가치', '자기효능감'];

const singleSeriesData = [
  {
    label: '학생 A',
    values: { 학습의욕: 75, 자신감: 60, 흥미: 85, 가치: 70, 자기효능감: 65 },
  },
];

const defaultChartWrapperClass = css({
  w: '[400px]',
  h: '[400px]',
});

const RadarChartFiveLevelsExample = () => (
    <div className={defaultChartWrapperClass}>
      <RadarChart
        data={singleSeriesData}
        axisKeys={AXIS_KEYS}
        levels={5}
      />
    </div>
  );

export default RadarChartFiveLevelsExample;

축 라벨 커스텀

코드

Open in Playground

import { RadarChart } from '@mildang/design-system/Chart';
import { css } from '@mildang/styled-system/css';

const AXIS_KEYS = ['학습의욕', '자신감', '흥미', '가치', '자기효능감'];

const singleSeriesData = [
  {
    label: '학생 A',
    values: { 학습의욕: 75, 자신감: 60, 흥미: 85, 가치: 70, 자기효능감: 65 },
  },
];

const defaultChartWrapperClass = css({
  w: '[400px]',
  h: '[400px]',
});

const RadarChartCustomAxisLabelExample = () => (
    <div className={defaultChartWrapperClass}>
      <RadarChart
        data={singleSeriesData}
        axisKeys={AXIS_KEYS}
        axisLabelFormat={(key) => key.slice(0, 2)}
      />
    </div>
  );

export default RadarChartCustomAxisLabelExample;

Compound 패턴

코드

Open in Playground

import { RadarChart } from '@mildang/design-system/Chart';
import { css } from '@mildang/styled-system/css';

const AXIS_KEYS = ['학습의욕', '자신감', '흥미', '가치', '자기효능감'];

const multiSeriesData = [
  {
    label: '학생 A',
    values: { 학습의욕: 75, 자신감: 60, 흥미: 85, 가치: 70, 자기효능감: 65 },
  },
  {
    label: '반 평균',
    values: { 학습의욕: 68, 자신감: 72, 흥미: 70, 가치: 75, 자기효능감: 71 },
  },
];

const defaultChartWrapperClass = css({
  w: '[400px]',
  h: '[400px]',
});

const RadarChartCompoundUsageExample = () => (
    <div className={defaultChartWrapperClass}>
      <RadarChart data={multiSeriesData} axisKeys={AXIS_KEYS}>
        <RadarChart.Grid />
        <RadarChart.Area />
      </RadarChart>
    </div>
  );

export default RadarChartCompoundUsageExample;

부모 컨테이너 크기 지정

코드

Open in Playground

import { RadarChart } from '@mildang/design-system/Chart';
import { css } from '@mildang/styled-system/css';

const AXIS_KEYS = ['학습의욕', '자신감', '흥미', '가치', '자기효능감'];

const singleSeriesData = [
  {
    label: '학생 A',
    values: { 학습의욕: 75, 자신감: 60, 흥미: 85, 가치: 70, 자기효능감: 65 },
  },
];

const multiSeriesData = [
  {
    label: '학생 A',
    values: { 학습의욕: 75, 자신감: 60, 흥미: 85, 가치: 70, 자기효능감: 65 },
  },
  {
    label: '반 평균',
    values: { 학습의욕: 68, 자신감: 72, 흥미: 70, 가치: 75, 자기효능감: 71 },
  },
];

const containerSizeDemoClass = css({
  display: 'flex',
  gap: '24',
  alignItems: 'flex-start',
  flexWrap: 'wrap',
});

const smallChartWrapperClass = css({
  w: '[280px]',
  h: '[240px]',
});

const largeChartWrapperClass = css({
  w: '[520px]',
  h: '[360px]',
});

const sizeLabelClass = css({
  mb: '8',
  textStyle: 'caption-md-medium',
  color: 'neutral.text.lowest',
});

const RadarChartContainerSizeExample = () => (
    <div className={containerSizeDemoClass}>
      <div>
        <div className={sizeLabelClass}>280 x 240</div>
        <div className={smallChartWrapperClass}>
          <RadarChart data={singleSeriesData} axisKeys={AXIS_KEYS} />
        </div>
      </div>
      <div>
        <div className={sizeLabelClass}>520 x 360</div>
        <div className={largeChartWrapperClass}>
          <RadarChart data={multiSeriesData} axisKeys={AXIS_KEYS} showLegend />
        </div>
      </div>
    </div>
  );

export default RadarChartContainerSizeExample;