stz-chart-maker 1.2.5 → 1.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/dist/index.d.ts +148 -9
- package/dist/index.js +1993 -1754
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import * as chart_js from 'chart.js';
|
|
2
1
|
import { ChartType, PluginOptionsByType, ChartOptions, GridLineOptions, FontSpec, Tick, Chart, ChartEvent, ActiveElement, LegendOptions, ChartDataset, Plugin as Plugin$1, TooltipItem, ChartTypeRegistry } from 'chart.js';
|
|
3
2
|
import { ZoomPluginOptions } from 'chartjs-plugin-zoom/types/options';
|
|
4
3
|
import { DeepPartial as DeepPartial$1 } from 'chart.js/dist/types/utils';
|
|
@@ -264,14 +263,30 @@ type CustomLineChartOptions = CustomChartOptions<'line'>;
|
|
|
264
263
|
type CustomBubbleChartOptions = CustomChartOptions<'bubble'>;
|
|
265
264
|
type CustomPieChartOptions = CustomArcChartOptions<'pie'>;
|
|
266
265
|
type CustomDoughnutChartOptions = CustomArcChartOptions<'doughnut'>;
|
|
266
|
+
type ArcDataset<TType extends ArcChartType = ArcChartType> = ChartDataset<TType, (number | null)[]> & {
|
|
267
|
+
_aux?: boolean;
|
|
268
|
+
_group?: string | number;
|
|
269
|
+
_legendOrder?: number;
|
|
270
|
+
_visible?: boolean;
|
|
271
|
+
_tooltip?: string | ((context: any) => string);
|
|
272
|
+
_groupLabel?: string;
|
|
273
|
+
_toggleBehavior?: 'normal' | 'radio' | 'disabled';
|
|
274
|
+
};
|
|
267
275
|
type CartesianDataset<TType extends CartesianChartType = CartesianChartType> = ChartDataset<TType, (number | null)[]> & {
|
|
268
276
|
yAxisID?: string;
|
|
269
277
|
xAxisID?: string;
|
|
270
278
|
stack?: string;
|
|
271
279
|
order?: number;
|
|
272
280
|
DATASET_ID?: string;
|
|
281
|
+
_aux?: boolean;
|
|
282
|
+
_group?: string | number;
|
|
283
|
+
_legendOrder?: number;
|
|
284
|
+
_visible?: boolean;
|
|
285
|
+
_tooltip?: string | ((context: any) => string);
|
|
286
|
+
_groupLabel?: string;
|
|
287
|
+
_toggleBehavior?: 'normal' | 'radio' | 'disabled';
|
|
273
288
|
};
|
|
274
|
-
type Constructor<TType extends ChartType, TInstance> = new (type: TType, labels: (string | number)[], datasets:
|
|
289
|
+
type Constructor<TType extends ChartType, TInstance> = new (type: TType, labels: (string | number)[], datasets: ChartDataset<TType, (number | null)[]>[], options?: CustomChartOptions<TType>, plugins?: []) => TInstance;
|
|
275
290
|
type CustomCartesianDataset<TType extends CartesianChartType = CartesianChartType> = ChartDataset<TType, (number | null)[]> & {
|
|
276
291
|
yAxisID?: string;
|
|
277
292
|
xAxisID?: string;
|
|
@@ -280,6 +295,13 @@ type CustomCartesianDataset<TType extends CartesianChartType = CartesianChartTyp
|
|
|
280
295
|
_dskey?: string;
|
|
281
296
|
image?: string;
|
|
282
297
|
images?: string[];
|
|
298
|
+
_aux?: boolean;
|
|
299
|
+
_group?: string | number;
|
|
300
|
+
_legendOrder?: number;
|
|
301
|
+
_visible?: boolean;
|
|
302
|
+
_tooltip?: string | ((context: any) => string);
|
|
303
|
+
_groupLabel?: string;
|
|
304
|
+
_toggleBehavior?: 'normal' | 'radio' | 'disabled';
|
|
283
305
|
};
|
|
284
306
|
type HtmlLegendOptions = {
|
|
285
307
|
containerID: string;
|
|
@@ -397,6 +419,7 @@ interface DoughnutChartBuilder extends ArcChartBuilder<'doughnut'> {
|
|
|
397
419
|
type Types_Align = Align;
|
|
398
420
|
type Types_ArcChartBuilder<TType extends ArcChartType> = ArcChartBuilder<TType>;
|
|
399
421
|
type Types_ArcChartType = ArcChartType;
|
|
422
|
+
type Types_ArcDataset<TType extends ArcChartType = ArcChartType> = ArcDataset<TType>;
|
|
400
423
|
type Types_BarChartBuilder = BarChartBuilder;
|
|
401
424
|
type Types_BubbleChartBuilder = BubbleChartBuilder;
|
|
402
425
|
type Types_CartesianChartBuilder<TType extends CartesianChartType> = CartesianChartBuilder<TType>;
|
|
@@ -435,7 +458,7 @@ type Types_RadarChartBuilder = RadarChartBuilder;
|
|
|
435
458
|
type Types_RadialChartType = RadialChartType;
|
|
436
459
|
type Types_SettingOptions = SettingOptions;
|
|
437
460
|
declare namespace Types {
|
|
438
|
-
export type { Types_Align as Align, Types_ArcChartBuilder as ArcChartBuilder, Types_ArcChartType as ArcChartType, Types_BarChartBuilder as BarChartBuilder, Types_BubbleChartBuilder as BubbleChartBuilder, Types_CartesianChartBuilder as CartesianChartBuilder, Types_CartesianChartType as CartesianChartType, Types_CartesianDataset as CartesianDataset, Types_ChartBuilder as ChartBuilder, Types_Color as Color, Types_CommonAxes as CommonAxes, Types_CommonAxesSacels as CommonAxesSacels, Types_CommonCartesian as CommonCartesian, Types_CommonCartesianAxes as CommonCartesianAxes, Types_CommonCartesianLegendConfig as CommonCartesianLegendConfig, Types_CommonCartesianTicks as CommonCartesianTicks, Types_CommonCartesianTitleConfig as CommonCartesianTitleConfig, Types_CommonTicks as CommonTicks, Types_Constructor as Constructor, Types_CustomArcChartOptions as CustomArcChartOptions, Types_CustomBarChartOptions as CustomBarChartOptions, Types_CustomBubbleChartOptions as CustomBubbleChartOptions, Types_CustomCartesianDataset as CustomCartesianDataset, Types_CustomChartOptions as CustomChartOptions, Types_CustomDoughnutChartOptions as CustomDoughnutChartOptions, Types_CustomLineChartOptions as CustomLineChartOptions, Types_CustomOptionPlugins as CustomOptionPlugins, Types_CustomPieChartOptions as CustomPieChartOptions, Types_DeepPartial as DeepPartial, Types_DeepPartialCartesianAxes as DeepPartialCartesianAxes, Types_DeepPartialPluginOptions as DeepPartialPluginOptions, Types_DoughnutChartBuilder as DoughnutChartBuilder, Types_HtmlLegendOptions as HtmlLegendOptions, Types_LineChartBuilder as LineChartBuilder, Types_Mode as Mode, Types_PieChartBuilder as PieChartBuilder, Types_Position as Position, Types_RadarChartBuilder as RadarChartBuilder, Types_RadialChartType as RadialChartType, Types_SettingOptions as SettingOptions };
|
|
461
|
+
export type { Types_Align as Align, Types_ArcChartBuilder as ArcChartBuilder, Types_ArcChartType as ArcChartType, Types_ArcDataset as ArcDataset, Types_BarChartBuilder as BarChartBuilder, Types_BubbleChartBuilder as BubbleChartBuilder, Types_CartesianChartBuilder as CartesianChartBuilder, Types_CartesianChartType as CartesianChartType, Types_CartesianDataset as CartesianDataset, Types_ChartBuilder as ChartBuilder, Types_Color as Color, Types_CommonAxes as CommonAxes, Types_CommonAxesSacels as CommonAxesSacels, Types_CommonCartesian as CommonCartesian, Types_CommonCartesianAxes as CommonCartesianAxes, Types_CommonCartesianLegendConfig as CommonCartesianLegendConfig, Types_CommonCartesianTicks as CommonCartesianTicks, Types_CommonCartesianTitleConfig as CommonCartesianTitleConfig, Types_CommonTicks as CommonTicks, Types_Constructor as Constructor, Types_CustomArcChartOptions as CustomArcChartOptions, Types_CustomBarChartOptions as CustomBarChartOptions, Types_CustomBubbleChartOptions as CustomBubbleChartOptions, Types_CustomCartesianDataset as CustomCartesianDataset, Types_CustomChartOptions as CustomChartOptions, Types_CustomDoughnutChartOptions as CustomDoughnutChartOptions, Types_CustomLineChartOptions as CustomLineChartOptions, Types_CustomOptionPlugins as CustomOptionPlugins, Types_CustomPieChartOptions as CustomPieChartOptions, Types_DeepPartial as DeepPartial, Types_DeepPartialCartesianAxes as DeepPartialCartesianAxes, Types_DeepPartialPluginOptions as DeepPartialPluginOptions, Types_DoughnutChartBuilder as DoughnutChartBuilder, Types_HtmlLegendOptions as HtmlLegendOptions, Types_LineChartBuilder as LineChartBuilder, Types_Mode as Mode, Types_PieChartBuilder as PieChartBuilder, Types_Position as Position, Types_RadarChartBuilder as RadarChartBuilder, Types_RadialChartType as RadialChartType, Types_SettingOptions as SettingOptions };
|
|
439
462
|
}
|
|
440
463
|
|
|
441
464
|
interface ChartConfig {
|
|
@@ -637,7 +660,15 @@ declare abstract class CartesianChartWrapper<TType extends CartesianChartType> e
|
|
|
637
660
|
protected mustHavePlugins(): {
|
|
638
661
|
id: string;
|
|
639
662
|
afterDraw(chart: any, args: any, options: any): void;
|
|
640
|
-
|
|
663
|
+
afterInit(chart: any, args: any, options: any): void;
|
|
664
|
+
beforeUpdate(chart: any, args: any, options: any): void;
|
|
665
|
+
_handleGroupVisibility(chart: any, datasets: any[]): void;
|
|
666
|
+
_handleLegendClick(e: any, legendItem: any, legend: any, toggleBehavior: string): void;
|
|
667
|
+
_setupLegendTooltip(chart: any): void;
|
|
668
|
+
_hitTestLegend(chart: any, x: number, y: number): any;
|
|
669
|
+
_showTooltip(e: MouseEvent, tooltipContent: string | ((context: any) => string), legendItem: any): void;
|
|
670
|
+
_hideTooltip(): void;
|
|
671
|
+
afterDestroy(chart: any): void;
|
|
641
672
|
}[];
|
|
642
673
|
protected isLine(): boolean;
|
|
643
674
|
protected isScatter(): boolean;
|
|
@@ -1375,6 +1406,23 @@ declare class BubbleChartWrapper extends CartesianChartWrapper<'bubble'> impleme
|
|
|
1375
1406
|
setAllRotation(rotation: number): this;
|
|
1376
1407
|
}
|
|
1377
1408
|
|
|
1409
|
+
/**
|
|
1410
|
+
* ═════════════════════════════════════════════════════════════
|
|
1411
|
+
* 📄 FILE : ArcChartWrapper.ts
|
|
1412
|
+
* 📁 PACKAGE : chart-toolbox
|
|
1413
|
+
* 👤 AUTHOR : stz
|
|
1414
|
+
* 🕒 CREATED : 25. 9. 28.
|
|
1415
|
+
* ═════════════════════════════════════════════════════════════
|
|
1416
|
+
* ═════════════════════════════════════════════════════════════
|
|
1417
|
+
* 📝 DESCRIPTION
|
|
1418
|
+
* Arc Chart (Pie, Doughnut) 를 위한 추상 클래스
|
|
1419
|
+
* ═════════════════════════════════════════════════════════════
|
|
1420
|
+
* ═════════════════════════════════════════════════════════════
|
|
1421
|
+
* 🔄 CHANGE LOG
|
|
1422
|
+
* - DATE : 2025/09/28 | Author : stz | 최초 생성
|
|
1423
|
+
* ═════════════════════════════════════════════════════════════
|
|
1424
|
+
*/
|
|
1425
|
+
|
|
1378
1426
|
declare abstract class ArcChartWrapper<TType extends ArcChartType> extends ChartWrapper<TType> implements ArcChartBuilder<TType> {
|
|
1379
1427
|
readonly type: TType;
|
|
1380
1428
|
private _chartId?;
|
|
@@ -1396,7 +1444,15 @@ declare abstract class ArcChartWrapper<TType extends ArcChartType> extends Chart
|
|
|
1396
1444
|
protected mustHavePlugins(): {
|
|
1397
1445
|
id: string;
|
|
1398
1446
|
afterDraw(chart: any, args: any, options: any): void;
|
|
1399
|
-
|
|
1447
|
+
afterInit(chart: any, args: any, options: any): void;
|
|
1448
|
+
beforeUpdate(chart: any, args: any, options: any): void;
|
|
1449
|
+
_handleGroupVisibility(chart: any, datasets: any[]): void;
|
|
1450
|
+
_handleLegendClick(e: any, legendItem: any, legend: any, toggleBehavior: string): void;
|
|
1451
|
+
_setupLegendTooltip(chart: any): void;
|
|
1452
|
+
_hitTestLegend(chart: any, x: number, y: number): any;
|
|
1453
|
+
_showTooltip(e: MouseEvent, tooltipContent: string | ((context: any) => string), legendItem: any): void;
|
|
1454
|
+
_hideTooltip(): void;
|
|
1455
|
+
afterDestroy(chart: any): void;
|
|
1400
1456
|
}[];
|
|
1401
1457
|
protected normalize(): void;
|
|
1402
1458
|
protected configAop(config: any): any;
|
|
@@ -1672,10 +1728,91 @@ declare const customLegend: {
|
|
|
1672
1728
|
}) => HTMLDivElement | undefined;
|
|
1673
1729
|
afterUpdate(chart: any, args: any, options: any): void;
|
|
1674
1730
|
};
|
|
1731
|
+
/**
|
|
1732
|
+
* @description 차트가 마운트될 때 호출되는 플러그인입니다. 마운트 후 chartjs 인스턴스를 등록하고 _mount 콜백을 실행합니다. 데이터셋의 부가적인 키를 추가하여 범례 동작을 제어하거나 툴팁을 표시할 수 있습니다.
|
|
1733
|
+
*
|
|
1734
|
+
* **지원하는 커스텀 데이터셋 속성:**
|
|
1735
|
+
* - `_aux: boolean` - 차트에는 그려지지만 범례에서 제외
|
|
1736
|
+
* - `_group: string | number` - 같은 그룹의 데이터셋들이 함께 show/hide
|
|
1737
|
+
* - `_visible: boolean` - false면 범례에서 아예 제외하고 데이터셋도 숨김
|
|
1738
|
+
* - `_legendOrder: number` - 범례 표시 순서 제어 (작을수록 앞에 표시)
|
|
1739
|
+
* - `_groupLabel: string` - 같은 그룹을 하나의 범례 항목으로 통합
|
|
1740
|
+
* - `_toggleBehavior: 'normal' | 'radio' | 'disabled'` - 클릭 동작 방식
|
|
1741
|
+
* - `_tooltip: string | function` - 범례 항목 마우스 오버 시 툴팁 표시
|
|
1742
|
+
*
|
|
1743
|
+
* @since 1.3.0
|
|
1744
|
+
* @category plugin
|
|
1745
|
+
* @example
|
|
1746
|
+
* ```typescript
|
|
1747
|
+
* // 기본 사용법
|
|
1748
|
+
* const datasets = [
|
|
1749
|
+
* {
|
|
1750
|
+
* label: 'Revenue',
|
|
1751
|
+
* data: [100, 150, 200],
|
|
1752
|
+
* _legendOrder: 1,
|
|
1753
|
+
* _tooltip: 'Monthly revenue data'
|
|
1754
|
+
* },
|
|
1755
|
+
* {
|
|
1756
|
+
* label: 'Background Process',
|
|
1757
|
+
* data: [10, 15, 20],
|
|
1758
|
+
* _aux: true // 차트에는 보이지만 범례에서 제외
|
|
1759
|
+
* },
|
|
1760
|
+
* {
|
|
1761
|
+
* label: 'Team A',
|
|
1762
|
+
* data: [80, 85, 90],
|
|
1763
|
+
* _groupLabel: 'Team Performance',
|
|
1764
|
+
* _group: 'teams'
|
|
1765
|
+
* },
|
|
1766
|
+
* {
|
|
1767
|
+
* label: 'Team B',
|
|
1768
|
+
* data: [75, 80, 85],
|
|
1769
|
+
* _groupLabel: 'Team Performance',
|
|
1770
|
+
* _group: 'teams'
|
|
1771
|
+
* }
|
|
1772
|
+
* ];
|
|
1773
|
+
*
|
|
1774
|
+
* const chart = ChartWrapper
|
|
1775
|
+
* .create('bar', ['Jan', 'Feb', 'Mar'], datasets)
|
|
1776
|
+
* .build('advanced-chart');
|
|
1777
|
+
* ```
|
|
1778
|
+
*
|
|
1779
|
+
* @example
|
|
1780
|
+
* ```typescript
|
|
1781
|
+
* // 라디오 버튼 방식 (하나만 선택 가능)
|
|
1782
|
+
* const datasets = [
|
|
1783
|
+
* {
|
|
1784
|
+
* label: 'Option A',
|
|
1785
|
+
* data: [10, 20, 30],
|
|
1786
|
+
* _toggleBehavior: 'radio'
|
|
1787
|
+
* },
|
|
1788
|
+
* {
|
|
1789
|
+
* label: 'Option B',
|
|
1790
|
+
* data: [15, 25, 35],
|
|
1791
|
+
* _toggleBehavior: 'radio'
|
|
1792
|
+
* }
|
|
1793
|
+
* ];
|
|
1794
|
+
* ```
|
|
1795
|
+
*
|
|
1796
|
+
* @remarks
|
|
1797
|
+
* - customLegend 플러그인이 등록되어 있으면 자동으로 비활성화됩니다
|
|
1798
|
+
* - 범례가 비활성화된 경우에는 동작하지 않습니다
|
|
1799
|
+
* - 모든 차트 타입에서 사용 가능합니다
|
|
1800
|
+
* - 메모리 누수 방지를 위해 차트 파괴 시 자동으로 정리됩니다
|
|
1801
|
+
*
|
|
1802
|
+
* @beta (aux 정상동작 , _group : 에러 , groupLabel : 정상 , _tooltip : 에러 , _toggleBehavior : 정상 , _visible : 정상 , _legendOrder : 확인중)
|
|
1803
|
+
*/
|
|
1675
1804
|
declare const chartMountPlugin: {
|
|
1676
1805
|
id: string;
|
|
1677
1806
|
afterDraw(chart: any, args: any, options: any): void;
|
|
1678
|
-
|
|
1807
|
+
afterInit(chart: any, args: any, options: any): void;
|
|
1808
|
+
beforeUpdate(chart: any, args: any, options: any): void;
|
|
1809
|
+
_handleGroupVisibility(chart: any, datasets: any[]): void;
|
|
1810
|
+
_handleLegendClick(e: any, legendItem: any, legend: any, toggleBehavior: string): void;
|
|
1811
|
+
_setupLegendTooltip(chart: any): void;
|
|
1812
|
+
_hitTestLegend(chart: any, x: number, y: number): any;
|
|
1813
|
+
_showTooltip(e: MouseEvent, tooltipContent: string | ((context: any) => string), legendItem: any): void;
|
|
1814
|
+
_hideTooltip(): void;
|
|
1815
|
+
afterDestroy(chart: any): void;
|
|
1679
1816
|
};
|
|
1680
1817
|
declare const blinkPlugin: Plugin$1;
|
|
1681
1818
|
declare const makeCenterHtml: (percent: number, ok?: number, warn?: number, ng?: number) => string;
|
|
@@ -1804,7 +1941,8 @@ declare enum ChartTypes {
|
|
|
1804
1941
|
}
|
|
1805
1942
|
|
|
1806
1943
|
declare const ChartToolBox: {
|
|
1807
|
-
setErrorLog(enabled
|
|
1944
|
+
setErrorLog(enabled?: boolean): void;
|
|
1945
|
+
setErrorshield(enabled?: boolean): void;
|
|
1808
1946
|
};
|
|
1809
1947
|
declare const T$: {
|
|
1810
1948
|
readonly create: typeof ChartWrapper.create;
|
|
@@ -1819,9 +1957,10 @@ declare const T$: {
|
|
|
1819
1957
|
readonly defaultTypes: typeof Types;
|
|
1820
1958
|
readonly defaultsOptions: typeof LocalDefaults;
|
|
1821
1959
|
readonly toolBox: {
|
|
1822
|
-
setErrorLog(enabled
|
|
1960
|
+
setErrorLog(enabled?: boolean): void;
|
|
1961
|
+
setErrorshield(enabled?: boolean): void;
|
|
1823
1962
|
};
|
|
1824
1963
|
};
|
|
1825
1964
|
|
|
1826
1965
|
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 };
|
|
1827
|
-
export type { Align, AllChartTypes, ArcChartBuilder, ArcChartType, AxisColors, BarChartBuilder, BubbleChartBuilder, CartesianChartBuilder, CartesianChartType, CartesianDataset, ChartBuilder, ChartWithFocus, Color, CommonAxes, CommonAxesSacels, CommonCartesian, CommonCartesianAxes, CommonCartesianLegendConfig, CommonCartesianTicks, CommonCartesianTitleConfig, CommonTicks, Constructor, CustomArcChartOptions, CustomBarChartOptions, CustomBubbleChartOptions, CustomCartesianDataset, CustomChartOptions, CustomDoughnutChartOptions, CustomLineChartOptions, CustomOptionPlugins, CustomPieChartOptions, CustomZoomType, DataLabels, DataLabelsContext, DatasetWithPrevColors, DeepPartial, DeepPartialCartesianAxes, DeepPartialPluginOptions, DeepPartialZoomType, DoughnutChartBuilder, FocusCallback, HtmlLegendOptions, LineChartBuilder, Mode, OriginalColors, PartialDataLabels, PieChartBuilder, Position, RadarChartBuilder, RadialChartType, ScaleWithOriginalColors, SettingOptions, ZoomRangeSliderColors, ZoomRangeSliderPlugin, ZoomRangeSliderVar };
|
|
1966
|
+
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, CustomChartOptions, CustomDoughnutChartOptions, CustomLineChartOptions, CustomOptionPlugins, CustomPieChartOptions, CustomZoomType, DataLabels, DataLabelsContext, DatasetWithPrevColors, DeepPartial, DeepPartialCartesianAxes, DeepPartialPluginOptions, DeepPartialZoomType, DoughnutChartBuilder, FocusCallback, HtmlLegendOptions, LineChartBuilder, Mode, OriginalColors, PartialDataLabels, PieChartBuilder, Position, RadarChartBuilder, RadialChartType, ScaleWithOriginalColors, SettingOptions, ZoomRangeSliderColors, ZoomRangeSliderPlugin, ZoomRangeSliderVar };
|