stz-chart-maker 2.3.0 → 2.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -7
- package/dist/index.js +2941 -3291
- package/package.json +2 -3
package/README.md
CHANGED
|
@@ -29,19 +29,28 @@
|
|
|
29
29
|
|
|
30
30
|
## Quick Start
|
|
31
31
|
|
|
32
|
-
```
|
|
32
|
+
```tsx
|
|
33
|
+
import { useMemo, useState } from 'react';
|
|
33
34
|
import { ChartWrapper } from 'stz-chart-maker';
|
|
34
35
|
import { Chart } from 'react-chartjs-2';
|
|
35
36
|
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
.
|
|
37
|
+
const labels = ['A', 'B', 'C'];
|
|
38
|
+
const datasets = [{ label: 'Sales', data: [10, 20, 30] }];
|
|
39
|
+
|
|
40
|
+
const [chart] = useState(() =>
|
|
41
|
+
ChartWrapper.create('line', labels, datasets)
|
|
42
|
+
.addZoom(true)
|
|
43
|
+
.addDataLabels(true)
|
|
44
|
+
);
|
|
41
45
|
|
|
42
|
-
|
|
46
|
+
const config = useMemo(() => chart.build('sales'), [chart]);
|
|
47
|
+
|
|
48
|
+
return <Chart {...config} />;
|
|
43
49
|
```
|
|
44
50
|
|
|
51
|
+
`build()`는 호출할 때마다 새 설정 객체를 만들고, `id`를 생략하면 내부적으로 랜덤 `_chartId`를 생성합니다.
|
|
52
|
+
그래서 React에서는 `return <Chart {...chart.build()} />;`보다 `useMemo(() => chart.build('sales'), [chart])`처럼 안정적인 `id`와 함께 메모이즈해서 쓰는 편이 안전합니다.
|
|
53
|
+
|
|
45
54
|
## Configuration (Browser)
|
|
46
55
|
|
|
47
56
|
`stz-chart-maker`는 런타임에 설정 파일을 직접 읽지 않습니다.
|