stz-chart-maker 1.4.4 → 1.5.0
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/dist/index.d.ts +232 -2
- package/dist/index.js +2312 -2141
- package/package.json +30 -3
package/dist/index.d.ts
CHANGED
|
@@ -462,6 +462,17 @@ interface ArcChartBuilder<TType extends ArcChartType> extends ChartBuilder<TType
|
|
|
462
462
|
setAllBorderColor(borderColor: string | string[]): this;
|
|
463
463
|
}
|
|
464
464
|
interface PieChartBuilder extends ArcChartBuilder<'pie'> {
|
|
465
|
+
setSegmentColors(colors: string[]): this;
|
|
466
|
+
setSegmentOffset(dataIndex: number, offset: number): this;
|
|
467
|
+
setHalfPieTop(): this;
|
|
468
|
+
setHalfPieBottom(): this;
|
|
469
|
+
setHalfPieLeft(): this;
|
|
470
|
+
setHalfPieRight(): this;
|
|
471
|
+
highlightMaxSegment(offset?: number): this;
|
|
472
|
+
highlightMinSegment(offset?: number): this;
|
|
473
|
+
setAllSegmentOffsets(offsets: number[] | number): this;
|
|
474
|
+
setGradientColors(startColor: string, endColor: string): this;
|
|
475
|
+
setSegmentColorWhere(filterFn: (value: number, index: number) => boolean, color: string): this;
|
|
465
476
|
}
|
|
466
477
|
interface DoughnutChartBuilder extends ArcChartBuilder<'doughnut'> {
|
|
467
478
|
convertToPie(): this;
|
|
@@ -1769,6 +1780,187 @@ declare class DoughnutChartWrapper extends ArcChartWrapper<'doughnut'> implement
|
|
|
1769
1780
|
}): this;
|
|
1770
1781
|
}
|
|
1771
1782
|
|
|
1783
|
+
declare class PieChartWrapper extends ArcChartWrapper<'pie'> implements PieChartBuilder {
|
|
1784
|
+
constructor(type: 'pie', labels: (string | number)[], datasets: ChartDataset<'pie', (number | null)[]>[], options?: CustomPieChartOptions, plugins?: any);
|
|
1785
|
+
protected requireLabels(): boolean;
|
|
1786
|
+
/**
|
|
1787
|
+
* @description 레거시 지원용 차트 설정 객체를 생성합니다.
|
|
1788
|
+
* @param {string} id
|
|
1789
|
+
* @returns {ChartConfig}
|
|
1790
|
+
* @Since 1.0.0
|
|
1791
|
+
* @category config
|
|
1792
|
+
* @beta
|
|
1793
|
+
*/
|
|
1794
|
+
makeConfig(id?: string): ChartConfig;
|
|
1795
|
+
/**
|
|
1796
|
+
* @description 모든 세그먼트의 색상을 설정합니다.
|
|
1797
|
+
* @param colors - 색상 배열
|
|
1798
|
+
* @returns {this}
|
|
1799
|
+
* @since 1.0.0
|
|
1800
|
+
* @category Dataset
|
|
1801
|
+
* @beta
|
|
1802
|
+
*/
|
|
1803
|
+
setSegmentColors(colors: string[]): this;
|
|
1804
|
+
/**
|
|
1805
|
+
* @description 특정 세그먼트만 분리해서 표시합니다.
|
|
1806
|
+
* @param dataIndex - 분리할 데이터 인덱스
|
|
1807
|
+
* @param offset - 분리 거리 (픽셀)
|
|
1808
|
+
* @returns {this}
|
|
1809
|
+
* @since 1.0.0
|
|
1810
|
+
* @category Dataset
|
|
1811
|
+
* @beta
|
|
1812
|
+
*/
|
|
1813
|
+
setSegmentOffset(dataIndex: number, offset: number): this;
|
|
1814
|
+
/**
|
|
1815
|
+
* @description 차트의 시작 각도를 설정합니다.
|
|
1816
|
+
* @param rotation - 회전 각도 (도 단위)
|
|
1817
|
+
* @returns {this}
|
|
1818
|
+
* @since 1.0.0
|
|
1819
|
+
* @category Options
|
|
1820
|
+
* @beta
|
|
1821
|
+
*/
|
|
1822
|
+
setRotation(rotation: number): this;
|
|
1823
|
+
/**
|
|
1824
|
+
* @description 차트의 원주각을 설정합니다.
|
|
1825
|
+
* @param circumference - 원주각 (도 단위, 360 = 완전한 원)
|
|
1826
|
+
* @returns {this}
|
|
1827
|
+
* @since 1.0.0
|
|
1828
|
+
* @category Options
|
|
1829
|
+
* @beta
|
|
1830
|
+
*/
|
|
1831
|
+
setCircumference(circumference: number): this;
|
|
1832
|
+
/**
|
|
1833
|
+
* @description 차트의 반지름을 설정합니다.
|
|
1834
|
+
* @param radius - 반지름 ('90%', '100%' 또는 픽셀값)
|
|
1835
|
+
* @returns {this}
|
|
1836
|
+
* @since 1.0.0
|
|
1837
|
+
* @category Options
|
|
1838
|
+
* @beta
|
|
1839
|
+
*/
|
|
1840
|
+
setRadius(radius: string | number): this;
|
|
1841
|
+
/**
|
|
1842
|
+
* @description 모든 데이터셋의 경계선 너비를 설정합니다.
|
|
1843
|
+
* @param borderWidth - 경계선 너비
|
|
1844
|
+
* @returns {this}
|
|
1845
|
+
* @since 1.0.0
|
|
1846
|
+
* @category Dataset
|
|
1847
|
+
* @beta
|
|
1848
|
+
*/
|
|
1849
|
+
setAllBorderWidth(borderWidth: number): this;
|
|
1850
|
+
/**
|
|
1851
|
+
* @description 모든 데이터셋의 경계선 색상을 설정합니다.
|
|
1852
|
+
* @param borderColor - 경계선 색상
|
|
1853
|
+
* @returns {this}
|
|
1854
|
+
* @since 1.0.0
|
|
1855
|
+
* @category Dataset
|
|
1856
|
+
* @beta
|
|
1857
|
+
*/
|
|
1858
|
+
setAllBorderColor(borderColor: string | string[]): this;
|
|
1859
|
+
/**
|
|
1860
|
+
* @description 상단 반원형 파이 차트를 생성합니다.
|
|
1861
|
+
* @returns {this}
|
|
1862
|
+
* @since 1.0.0
|
|
1863
|
+
* @category Options
|
|
1864
|
+
* @beta
|
|
1865
|
+
*/
|
|
1866
|
+
setHalfPieTop(): this;
|
|
1867
|
+
/**
|
|
1868
|
+
* @description 하단 반원형 파이 차트를 생성합니다.
|
|
1869
|
+
* @returns {this}
|
|
1870
|
+
* @since 1.0.0
|
|
1871
|
+
* @category Options
|
|
1872
|
+
* @beta
|
|
1873
|
+
*/
|
|
1874
|
+
setHalfPieBottom(): this;
|
|
1875
|
+
/**
|
|
1876
|
+
* @description 좌측 반원형 파이 차트를 생성합니다.
|
|
1877
|
+
* @returns {this}
|
|
1878
|
+
* @since 1.0.0
|
|
1879
|
+
* @category Options
|
|
1880
|
+
* @beta
|
|
1881
|
+
*/
|
|
1882
|
+
setHalfPieLeft(): this;
|
|
1883
|
+
/**
|
|
1884
|
+
* @description 우측 반원형 파이 차트를 생성합니다.
|
|
1885
|
+
* @returns {this}
|
|
1886
|
+
* @since 1.0.0
|
|
1887
|
+
* @category Options
|
|
1888
|
+
* @beta
|
|
1889
|
+
*/
|
|
1890
|
+
setHalfPieRight(): this;
|
|
1891
|
+
/**
|
|
1892
|
+
* @description 가장 큰 값을 가진 세그먼트를 자동으로 분리합니다.
|
|
1893
|
+
* @param offset - 분리 거리 (픽셀, 기본값: 10)
|
|
1894
|
+
* @returns {this}
|
|
1895
|
+
* @since 1.0.0
|
|
1896
|
+
* @category Dataset
|
|
1897
|
+
* @beta
|
|
1898
|
+
*/
|
|
1899
|
+
highlightMaxSegment(offset?: number): this;
|
|
1900
|
+
/**
|
|
1901
|
+
* @description 가장 작은 값을 가진 세그먼트를 자동으로 분리합니다.
|
|
1902
|
+
* @param offset - 분리 거리 (픽셀, 기본값: 10)
|
|
1903
|
+
* @returns {this}
|
|
1904
|
+
* @since 1.0.0
|
|
1905
|
+
* @category Dataset
|
|
1906
|
+
* @beta
|
|
1907
|
+
*/
|
|
1908
|
+
highlightMinSegment(offset?: number): this;
|
|
1909
|
+
/**
|
|
1910
|
+
* @description 여러 세그먼트를 한번에 분리합니다.
|
|
1911
|
+
* @param offsets - 각 세그먼트의 offset 배열 또는 모든 세그먼트에 적용할 단일 값
|
|
1912
|
+
* @returns {this}
|
|
1913
|
+
* @since 1.0.0
|
|
1914
|
+
* @category Dataset
|
|
1915
|
+
* @beta
|
|
1916
|
+
* @example
|
|
1917
|
+
* // 각 세그먼트마다 다른 offset
|
|
1918
|
+
* chart.setAllSegmentOffsets([10, 0, 5, 0]);
|
|
1919
|
+
*
|
|
1920
|
+
* // 모든 세그먼트에 동일한 offset (exploded pie chart)
|
|
1921
|
+
* chart.setAllSegmentOffsets(10);
|
|
1922
|
+
*/
|
|
1923
|
+
setAllSegmentOffsets(offsets: number[] | number): this;
|
|
1924
|
+
/**
|
|
1925
|
+
* @description 그라데이션 색상 팔레트를 자동으로 생성합니다.
|
|
1926
|
+
* @param startColor - 시작 색상 (hex 형식, 예: '#FF6384')
|
|
1927
|
+
* @param endColor - 종료 색상 (hex 형식, 예: '#36A2EB')
|
|
1928
|
+
* @returns {this}
|
|
1929
|
+
* @since 1.0.0
|
|
1930
|
+
* @category Dataset
|
|
1931
|
+
* @beta
|
|
1932
|
+
*/
|
|
1933
|
+
setGradientColors(startColor: string, endColor: string): this;
|
|
1934
|
+
/**
|
|
1935
|
+
* @description 특정 조건을 만족하는 세그먼트만 색상을 변경합니다.
|
|
1936
|
+
* @param filterFn - 조건 함수
|
|
1937
|
+
* @param color - 적용할 색상
|
|
1938
|
+
* @returns {this}
|
|
1939
|
+
* @since 1.0.0
|
|
1940
|
+
* @category Dataset
|
|
1941
|
+
* @beta
|
|
1942
|
+
* @example
|
|
1943
|
+
* // 값이 100 이상인 세그먼트만 빨간색으로
|
|
1944
|
+
* chart.setSegmentColorWhere((value) => value >= 100, '#FF0000');
|
|
1945
|
+
*/
|
|
1946
|
+
setSegmentColorWhere(filterFn: (value: number, index: number) => boolean, color: string): this;
|
|
1947
|
+
/**
|
|
1948
|
+
* @description hex 색상을 RGB로 변환합니다.
|
|
1949
|
+
* @private
|
|
1950
|
+
*/
|
|
1951
|
+
private hexToRgb;
|
|
1952
|
+
/**
|
|
1953
|
+
* @description RGB를 hex 색상으로 변환합니다.
|
|
1954
|
+
* @private
|
|
1955
|
+
*/
|
|
1956
|
+
private rgbToHex;
|
|
1957
|
+
/**
|
|
1958
|
+
* @description 그라데이션 색상 배열을 생성합니다.
|
|
1959
|
+
* @private
|
|
1960
|
+
*/
|
|
1961
|
+
private generateGradientColors;
|
|
1962
|
+
}
|
|
1963
|
+
|
|
1772
1964
|
declare const noDataPlugin: {
|
|
1773
1965
|
id: string;
|
|
1774
1966
|
beforeUpdate: (chart: any) => void;
|
|
@@ -2052,6 +2244,43 @@ declare enum ChartTypes {
|
|
|
2052
2244
|
TREE = "tree"
|
|
2053
2245
|
}
|
|
2054
2246
|
|
|
2247
|
+
interface StzConfig {
|
|
2248
|
+
errorLogging?: boolean;
|
|
2249
|
+
silentMode?: boolean;
|
|
2250
|
+
defaultColor?: string[];
|
|
2251
|
+
autoRegister?: boolean;
|
|
2252
|
+
registerTypes?: ChartType[];
|
|
2253
|
+
}
|
|
2254
|
+
/**
|
|
2255
|
+
* @description 브라우저 환경이나 Vite/Webpack 환경에서 직접 설정을 전달합니다.
|
|
2256
|
+
* @param config 설정 객체
|
|
2257
|
+
* @example
|
|
2258
|
+
* ```typescript
|
|
2259
|
+
* // React 앱의 main.tsx에서 호출
|
|
2260
|
+
* import { setChartConfig } from 'stz-chart-maker';
|
|
2261
|
+
*
|
|
2262
|
+
* setChartConfig({
|
|
2263
|
+
* errorLogging: true,
|
|
2264
|
+
* silentMode: false,
|
|
2265
|
+
* autoRegister: true,
|
|
2266
|
+
* registerTypes: ['line', 'bar']
|
|
2267
|
+
* });
|
|
2268
|
+
* ```
|
|
2269
|
+
*
|
|
2270
|
+
* @example
|
|
2271
|
+
* ```typescript
|
|
2272
|
+
* // Vite 플러그인과 함께 사용
|
|
2273
|
+
* import { setChartConfig } from 'stz-chart-maker';
|
|
2274
|
+
* import config from 'virtual:stz-config'; // Vite 플러그인이 주입
|
|
2275
|
+
*
|
|
2276
|
+
* if (config) {
|
|
2277
|
+
* setChartConfig(config);
|
|
2278
|
+
* }
|
|
2279
|
+
* ```
|
|
2280
|
+
* @since 1.4.5
|
|
2281
|
+
*/
|
|
2282
|
+
declare function setChartConfig(config: StzConfig): void;
|
|
2283
|
+
|
|
2055
2284
|
declare const ChartToolBox: {
|
|
2056
2285
|
setErrorLog(enabled?: boolean): void;
|
|
2057
2286
|
setErrorShield(enabled?: boolean): void;
|
|
@@ -2066,6 +2295,7 @@ declare const T$: {
|
|
|
2066
2295
|
readonly BubbleChartWrapper: typeof BubbleChartWrapper;
|
|
2067
2296
|
readonly ArcChartWrapper: typeof ArcChartWrapper;
|
|
2068
2297
|
readonly DoughnutChartWrapper: typeof DoughnutChartWrapper;
|
|
2298
|
+
readonly PieChartWrapper: typeof PieChartWrapper;
|
|
2069
2299
|
readonly defaultTypes: typeof Types;
|
|
2070
2300
|
readonly defaultsOptions: typeof LocalDefaults;
|
|
2071
2301
|
readonly toolBox: {
|
|
@@ -2074,5 +2304,5 @@ declare const T$: {
|
|
|
2074
2304
|
};
|
|
2075
2305
|
};
|
|
2076
2306
|
|
|
2077
|
-
export { ArcChartWrapper, BarChartWrapper, BubbleChartWrapper, CartesianChartWrapper, ChartFactory, ChartInstance, ChartToolBox, ChartTypes, ChartWrapper, CreateZoomRangeSlider, DoughnutChartWrapper, LineChartWrapper, T$, barScaleImgPlugin, blinkPlugin, changeSetting, chartMountPlugin, createDefaultBarOptions, createDefaultBubbleOptions, createDefaultLineOptions, customLegend, T$ as default, defaultBarScales, defaultBarTooltipCallback, defaultBubbleScales, defaultBubbleTooltipCallback, defaultLineScales, defaultLineTooltipCallback, doughnutCenterTextPlugin, loadingPlugin, makeCenterHtml, noDataPlugin, sparkBarOptions, sparkBubbleOptions, sparkLineOptions, zoomRangeSlider, zoomResetPlugin };
|
|
2078
|
-
export type { Align, AllChartTypes, ArcChartBuilder, ArcChartType, ArcDataset, AxisColors, BarChartBuilder, BubbleChartBuilder, CartesianChartBuilder, CartesianChartType, CartesianDataset, ChartBuilder, ChartWithFocus, Color, CommonAxes, CommonAxesSacels, CommonCartesian, CommonCartesianAxes, CommonCartesianLegendConfig, CommonCartesianTicks, CommonCartesianTitleConfig, CommonTicks, Constructor, CustomArcChartOptions, CustomBarChartOptions, CustomBubbleChartOptions, CustomCartesianDataset, CustomChartDatasets, CustomChartOptions, CustomDoughnutChartOptions, CustomLineChartOptions, CustomOptionPlugins, CustomPieChartOptions, CustomZoomType, DataLabels, DataLabelsContext, DatasetWithPrevColors, DeepPartial, DeepPartialCartesianAxes, DeepPartialPluginOptions, DeepPartialZoomType, DoughnutChartBuilder, FocusCallback, HtmlLegendOptions, LineChartBuilder, Mode, OriginalColors, Override, PartialDataLabels, PieChartBuilder, Position, RadarChartBuilder, RadialChartType, ScaleWithOriginalColors, SettingOptions, ZoomRangeSliderColors, ZoomRangeSliderPlugin, ZoomRangeSliderVar };
|
|
2307
|
+
export { ArcChartWrapper, BarChartWrapper, BubbleChartWrapper, CartesianChartWrapper, ChartFactory, ChartInstance, ChartToolBox, ChartTypes, ChartWrapper, CreateZoomRangeSlider, DoughnutChartWrapper, LineChartWrapper, PieChartWrapper, T$, barScaleImgPlugin, blinkPlugin, changeSetting, chartMountPlugin, createDefaultBarOptions, createDefaultBubbleOptions, createDefaultLineOptions, customLegend, T$ as default, defaultBarScales, defaultBarTooltipCallback, defaultBubbleScales, defaultBubbleTooltipCallback, defaultLineScales, defaultLineTooltipCallback, doughnutCenterTextPlugin, loadingPlugin, makeCenterHtml, noDataPlugin, setChartConfig, sparkBarOptions, sparkBubbleOptions, sparkLineOptions, zoomRangeSlider, zoomResetPlugin };
|
|
2308
|
+
export type { Align, AllChartTypes, ArcChartBuilder, ArcChartType, ArcDataset, AxisColors, BarChartBuilder, BubbleChartBuilder, CartesianChartBuilder, CartesianChartType, CartesianDataset, ChartBuilder, ChartWithFocus, Color, CommonAxes, CommonAxesSacels, CommonCartesian, CommonCartesianAxes, CommonCartesianLegendConfig, CommonCartesianTicks, CommonCartesianTitleConfig, CommonTicks, Constructor, CustomArcChartOptions, CustomBarChartOptions, CustomBubbleChartOptions, CustomCartesianDataset, CustomChartDatasets, CustomChartOptions, CustomDoughnutChartOptions, CustomLineChartOptions, CustomOptionPlugins, CustomPieChartOptions, CustomZoomType, DataLabels, DataLabelsContext, DatasetWithPrevColors, DeepPartial, DeepPartialCartesianAxes, DeepPartialPluginOptions, DeepPartialZoomType, DoughnutChartBuilder, FocusCallback, HtmlLegendOptions, LineChartBuilder, Mode, OriginalColors, Override, PartialDataLabels, PieChartBuilder, Position, RadarChartBuilder, RadialChartType, ScaleWithOriginalColors, SettingOptions, StzConfig, ZoomRangeSliderColors, ZoomRangeSliderPlugin, ZoomRangeSliderVar };
|