using npm :

npm install stz-chart-maker
npm install -D stz-chart-maker

api Docs

📚 API 문서

example

const chartConfig = ChartWrapper
                    .create('bar', data.labels , data.datasets, {})
                    .addDataLabels(true)
                    .addZoom(true)
                    .build('mixed-chart');

return (
<div>
  <Chart type={chartConfig.type} data={chartConfig.data} options={chartConfig.options} />
</div>
);

Quick Start

import { useMemo, useState } from 'react';
import { ChartWrapper } from 'stz-chart-maker';
import { Chart } from 'react-chartjs-2';

const labels = ['A', 'B', 'C'];
const datasets = [{ label: 'Sales', data: [10, 20, 30] }];

const [chart] = useState(() =>
  ChartWrapper.create('line', labels, datasets)
    .addZoom(true)
    .addDataLabels(true)
);

const config = useMemo(() => chart.build('sales'), [chart]);

return <Chart {...config} />;

build()는 호출할 때마다 새 설정 객체를 만들고, id를 생략하면 내부적으로 랜덤 _chartId를 생성합니다.
그래서 React에서는 return <Chart {...chart.build()} />;보다 useMemo(() => chart.build('sales'), [chart])처럼 안정적인 id와 함께 메모이즈해서 쓰는 편이 안전합니다.

Configuration (Browser)

stz-chart-maker는 런타임에 설정 파일을 직접 읽지 않습니다.
브라우저 환경에서는 setChartConfig()로 전역 설정을 전달하세요.

1) 앱 코드에서 직접 전역 설정 (권장)

import { setChartConfig } from 'stz-chart-maker';

setChartConfig({
  errorLogging: true,
  silentMode: false,
  defaultColor: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F'],
  zoom: true,
  loading: true,
  legend: {
    position: 'top'
  },
  tooltip: {
    enabled: true
  }
});

2) 번들러 플러그인으로 설정 주입

.stzrc.js를 사용할 경우, 번들러 플러그인이 빌드 시점에 설정을 읽어 setChartConfig(...)를 주입합니다.

// .stzrc.js
module.exports = {
  defaultColor: ['#111111', '#22c55e', '#3b82f6']
};

설정 옵션

| 옵션 | 타입 | 기본값 | 설명 | |------|------|--------|------| | errorLogging | boolean | true | 에러 로그 출력 여부 | | silentMode | boolean | true | 에러 발생 시 예외를 던지지 않고 처리 | | defaultColor | string[] | 내부 기본 팔레트 | 차트 전역 기본 색상 배열 | | zoom | boolean \| object | false | line, bar, bubble 차트에 전역 zoom 기본값 적용 | | loading | boolean | false | Cartesian 차트에 전역 loading 기본값 적용 | | spinnerOverlay | boolean \| object | false | _chartId 기반 mountChart(...) 사용 시 DOM spinner overlay 기본값 적용 | | legend | object | 차트 기본값 사용 | 차트 전역 legend 기본 옵션 적용 | | tooltip | object | 차트 기본값 사용 | 차트 전역 tooltip 기본 옵션 적용 |

Export / Empty State

import { ChartWrapper, downloadChartAsImage, setChartConfig } from 'stz-chart-maker';

setChartConfig({ loading: true });

const chartConfig = ChartWrapper
  .create('bar', [], [{ data: [] }], {
    _noDataText: '데이터 없음',
  })
  .build('sales-chart');

downloadChartAsImage('sales-chart');

import {
  hideChartTooltip,
  isChartDatasetVisible,
  setChartDatasetVisibility,
  showChartTooltip,
  toggleChartDatasetVisibility,
} from 'stz-chart-maker';

setChartDatasetVisibility('sales-chart', 1, false);
const visible = toggleChartDatasetVisibility('sales-chart', 0);
console.log(isChartDatasetVisible('sales-chart', 0), visible);

showChartTooltip('sales-chart', [{ datasetIndex: 0, index: 2 }]);
hideChartTooltip('sales-chart');

변경기록

CHANGELOG.md 파일을 참조하세요.

주의사항

setChartConfig()는 첫 번째 ChartWrapper.create(...) 호출 전에 실행해야 합니다.