stz-chart-maker 1.2.4 → 1.3.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 +271 -13
- package/dist/index.js +1936 -1674
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChartType, PluginOptionsByType, ChartOptions, GridLineOptions, FontSpec, Tick, Chart, ChartEvent, ActiveElement, ChartDataset, Plugin as Plugin$1, TooltipItem, ChartTypeRegistry } from 'chart.js';
|
|
1
|
+
import { ChartType, PluginOptionsByType, ChartOptions, GridLineOptions, FontSpec, Tick, Chart, ChartEvent, ActiveElement, LegendOptions, ChartDataset, Plugin as Plugin$1, TooltipItem, ChartTypeRegistry } from 'chart.js';
|
|
2
2
|
import { ZoomPluginOptions } from 'chartjs-plugin-zoom/types/options';
|
|
3
3
|
import { DeepPartial as DeepPartial$1 } from 'chart.js/dist/types/utils';
|
|
4
4
|
|
|
@@ -74,8 +74,11 @@ interface ChartBuilder<TType extends ChartType> {
|
|
|
74
74
|
width: number;
|
|
75
75
|
height: number;
|
|
76
76
|
}) => void): this;
|
|
77
|
+
setTitle(titleOptions: CommonCartesianTitleConfig): this;
|
|
78
|
+
setLegend(legendOptions: DeepPartial<LegendOptions<TType>>): this;
|
|
77
79
|
}
|
|
78
|
-
type
|
|
80
|
+
type Align = 'start' | 'center' | 'end';
|
|
81
|
+
type Position = Align | 'left' | 'right' | 'top' | 'bottom';
|
|
79
82
|
type CartesianChartType = 'line' | 'bar' | 'scatter' | 'bubble';
|
|
80
83
|
type ArcChartType = 'doughnut' | 'pie';
|
|
81
84
|
type RadialChartType = 'radar' | 'polarArea';
|
|
@@ -114,16 +117,36 @@ interface SettingOptions {
|
|
|
114
117
|
}
|
|
115
118
|
interface CommonCartesianTitleConfig {
|
|
116
119
|
display?: boolean;
|
|
117
|
-
align?:
|
|
120
|
+
align?: Align;
|
|
118
121
|
text?: string | string[];
|
|
119
122
|
color?: string;
|
|
120
123
|
font?: FontSpec;
|
|
121
|
-
padding?: {
|
|
122
|
-
top
|
|
123
|
-
bottom
|
|
124
|
-
|
|
125
|
-
|
|
124
|
+
padding?: number | {
|
|
125
|
+
top: number;
|
|
126
|
+
bottom: number;
|
|
127
|
+
};
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
interface CommonCartesianLegendConfig {
|
|
131
|
+
display?: boolean;
|
|
132
|
+
position?: 'top' | 'left' | 'bottom' | 'right' | 'center' | 'chartArea';
|
|
133
|
+
align?: Align;
|
|
134
|
+
labels?: {
|
|
135
|
+
boxWidth?: number;
|
|
136
|
+
boxHeight?: number;
|
|
137
|
+
color?: string;
|
|
138
|
+
font?: FontSpec;
|
|
139
|
+
padding?: number;
|
|
140
|
+
generateLabels?: (chart: any) => any[];
|
|
141
|
+
filter?: (item: any, data: any) => boolean;
|
|
142
|
+
sort?: (a: any, b: any, data: any) => number;
|
|
143
|
+
pointStyle?: string | boolean;
|
|
144
|
+
textAlign?: 'left' | 'center' | 'right';
|
|
145
|
+
usePointStyle?: boolean;
|
|
126
146
|
};
|
|
147
|
+
onClick?: (e: any, legendItem: any, legend: any) => void;
|
|
148
|
+
onHover?: (e: any, legendItem: any, legend: any) => void;
|
|
149
|
+
onLeave?: (e: any, legendItem: any, legend: any) => void;
|
|
127
150
|
}
|
|
128
151
|
interface CommonCartesian {
|
|
129
152
|
bounds: string;
|
|
@@ -240,14 +263,30 @@ type CustomLineChartOptions = CustomChartOptions<'line'>;
|
|
|
240
263
|
type CustomBubbleChartOptions = CustomChartOptions<'bubble'>;
|
|
241
264
|
type CustomPieChartOptions = CustomArcChartOptions<'pie'>;
|
|
242
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
|
+
};
|
|
243
275
|
type CartesianDataset<TType extends CartesianChartType = CartesianChartType> = ChartDataset<TType, (number | null)[]> & {
|
|
244
276
|
yAxisID?: string;
|
|
245
277
|
xAxisID?: string;
|
|
246
278
|
stack?: string;
|
|
247
279
|
order?: number;
|
|
248
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';
|
|
249
288
|
};
|
|
250
|
-
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;
|
|
251
290
|
type CustomCartesianDataset<TType extends CartesianChartType = CartesianChartType> = ChartDataset<TType, (number | null)[]> & {
|
|
252
291
|
yAxisID?: string;
|
|
253
292
|
xAxisID?: string;
|
|
@@ -256,6 +295,13 @@ type CustomCartesianDataset<TType extends CartesianChartType = CartesianChartTyp
|
|
|
256
295
|
_dskey?: string;
|
|
257
296
|
image?: string;
|
|
258
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';
|
|
259
305
|
};
|
|
260
306
|
type HtmlLegendOptions = {
|
|
261
307
|
containerID: string;
|
|
@@ -293,6 +339,8 @@ interface CartesianChartBuilder<TType extends CartesianChartType> extends ChartB
|
|
|
293
339
|
setDatasetParsing(datasetIndex: number, xAxisKey: string | false, yAxisKey: string | false): this;
|
|
294
340
|
setAllDatasetsParsing(xAxisKey: string | false, yAxisKey: string | false): this;
|
|
295
341
|
customLegend(obj: HtmlLegendOptions): this;
|
|
342
|
+
setBackgroundColor(color: Color): this;
|
|
343
|
+
setGrid(axis: string, gridOptions: GridLineOptions): this;
|
|
296
344
|
}
|
|
297
345
|
interface BarChartBuilder extends CartesianChartBuilder<'bar'> {
|
|
298
346
|
setBarThickness(datasetIndex: number, thickness: number): this;
|
|
@@ -355,10 +403,23 @@ interface BubbleChartBuilder extends CartesianChartBuilder<'bubble'> {
|
|
|
355
403
|
interface PieChartBuilder extends ArcChartBuilder<'pie'> {
|
|
356
404
|
}
|
|
357
405
|
interface DoughnutChartBuilder extends ArcChartBuilder<'doughnut'> {
|
|
406
|
+
convertToPie(): this;
|
|
407
|
+
setSegmentOffset(datasetIndex: number, offset: number): this;
|
|
408
|
+
setCutout(cutout: string | number): this;
|
|
409
|
+
setCenterText(config: {
|
|
410
|
+
text: string | string[];
|
|
411
|
+
color?: string;
|
|
412
|
+
fontStyle?: string;
|
|
413
|
+
sidePadding?: number;
|
|
414
|
+
minFontSize?: number;
|
|
415
|
+
maxFontSize?: number;
|
|
416
|
+
}): this;
|
|
358
417
|
}
|
|
359
418
|
|
|
419
|
+
type Types_Align = Align;
|
|
360
420
|
type Types_ArcChartBuilder<TType extends ArcChartType> = ArcChartBuilder<TType>;
|
|
361
421
|
type Types_ArcChartType = ArcChartType;
|
|
422
|
+
type Types_ArcDataset<TType extends ArcChartType = ArcChartType> = ArcDataset<TType>;
|
|
362
423
|
type Types_BarChartBuilder = BarChartBuilder;
|
|
363
424
|
type Types_BubbleChartBuilder = BubbleChartBuilder;
|
|
364
425
|
type Types_CartesianChartBuilder<TType extends CartesianChartType> = CartesianChartBuilder<TType>;
|
|
@@ -370,6 +431,7 @@ type Types_CommonAxes = CommonAxes;
|
|
|
370
431
|
type Types_CommonAxesSacels = CommonAxesSacels;
|
|
371
432
|
type Types_CommonCartesian = CommonCartesian;
|
|
372
433
|
type Types_CommonCartesianAxes = CommonCartesianAxes;
|
|
434
|
+
type Types_CommonCartesianLegendConfig = CommonCartesianLegendConfig;
|
|
373
435
|
type Types_CommonCartesianTicks = CommonCartesianTicks;
|
|
374
436
|
type Types_CommonCartesianTitleConfig = CommonCartesianTitleConfig;
|
|
375
437
|
type Types_CommonTicks = CommonTicks;
|
|
@@ -396,7 +458,7 @@ type Types_RadarChartBuilder = RadarChartBuilder;
|
|
|
396
458
|
type Types_RadialChartType = RadialChartType;
|
|
397
459
|
type Types_SettingOptions = SettingOptions;
|
|
398
460
|
declare namespace Types {
|
|
399
|
-
export type { 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_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 };
|
|
400
462
|
}
|
|
401
463
|
|
|
402
464
|
interface ChartConfig {
|
|
@@ -475,6 +537,45 @@ declare abstract class ChartWrapper<TType extends ChartType, TOptions extends Cu
|
|
|
475
537
|
width: number;
|
|
476
538
|
height: number;
|
|
477
539
|
}) => void): this;
|
|
540
|
+
/**
|
|
541
|
+
* @description 차트의 제목을 설정합니다.
|
|
542
|
+
* @param {DeepPartial<CommonCartesianTitleConfig>} titleOptions
|
|
543
|
+
* @returns {this}
|
|
544
|
+
* @Since 1.0.0
|
|
545
|
+
* @category options
|
|
546
|
+
* @example
|
|
547
|
+
* chart.setTitle({
|
|
548
|
+
* text: '차트 제목',
|
|
549
|
+
* align: 'center' // 'start' | 'center' | 'end'
|
|
550
|
+
* });
|
|
551
|
+
*/
|
|
552
|
+
setTitle(titleOptions: DeepPartial<CommonCartesianTitleConfig>): this;
|
|
553
|
+
/**
|
|
554
|
+
* @description 차트의 범례를 설정합니다.
|
|
555
|
+
* @param {DeepPartial<LegendOptions<TType>>} legendOptions
|
|
556
|
+
* @returns {this}
|
|
557
|
+
* @Since 1.0.0
|
|
558
|
+
* @category options
|
|
559
|
+
* @example
|
|
560
|
+
* chart.setLegend({
|
|
561
|
+
* position: 'bottom',
|
|
562
|
+
* align: 'center',
|
|
563
|
+
* labels: {
|
|
564
|
+
* boxWidth: 40,
|
|
565
|
+
* padding: 15,
|
|
566
|
+
* font: {
|
|
567
|
+
* size: 14,
|
|
568
|
+
* weight: 'bold'
|
|
569
|
+
* },
|
|
570
|
+
* color: '#333',
|
|
571
|
+
* usePointStyle: true
|
|
572
|
+
* }
|
|
573
|
+
* onClick: (e, legendItem, legend) => {
|
|
574
|
+
* console.log('Legend clicked:', legendItem);
|
|
575
|
+
* }
|
|
576
|
+
* });
|
|
577
|
+
*/
|
|
578
|
+
setLegend(legendOptions: DeepPartial<LegendOptions<TType>>): this;
|
|
478
579
|
}
|
|
479
580
|
|
|
480
581
|
interface AxisColors {
|
|
@@ -559,6 +660,15 @@ declare abstract class CartesianChartWrapper<TType extends CartesianChartType> e
|
|
|
559
660
|
protected mustHavePlugins(): {
|
|
560
661
|
id: string;
|
|
561
662
|
afterDraw(chart: any, args: any, options: any): void;
|
|
663
|
+
afterInit(chart: any, args: any, options: any): void;
|
|
664
|
+
beforeDatasetUpdate(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;
|
|
562
672
|
}[];
|
|
563
673
|
protected isLine(): boolean;
|
|
564
674
|
protected isScatter(): boolean;
|
|
@@ -805,6 +915,28 @@ declare abstract class CartesianChartWrapper<TType extends CartesianChartType> e
|
|
|
805
915
|
* @category Dataset
|
|
806
916
|
*/
|
|
807
917
|
addDataset(dataset: CustomCartesianDataset<TType>): string;
|
|
918
|
+
/**
|
|
919
|
+
* @description 축의 그리드 라인 옵션을 설정합니다.
|
|
920
|
+
* @param {string} axis
|
|
921
|
+
* @param {GridLineOptions} gridOptions
|
|
922
|
+
* @returns {this}
|
|
923
|
+
* @Since 1.0.0
|
|
924
|
+
* @category scales
|
|
925
|
+
* @example
|
|
926
|
+
* chart.setGrid('y', { color: 'rgba(0, 0, 0, 0.1)', lineWidth: 1 });
|
|
927
|
+
*/
|
|
928
|
+
setGrid(axis: string, gridOptions: GridLineOptions): this;
|
|
929
|
+
/**
|
|
930
|
+
* @description 차트의 캔버스 배경색을 설정합니다.
|
|
931
|
+
* @param {string} color
|
|
932
|
+
* @returns {this}
|
|
933
|
+
* @Since 1.0.0
|
|
934
|
+
* @category options
|
|
935
|
+
* @example
|
|
936
|
+
* chart.setBackgroundColor('rgba(255, 255, 255, 0.5)');
|
|
937
|
+
* chart.setBackgroundColor('#f0f0f0');
|
|
938
|
+
*/
|
|
939
|
+
setBackgroundColor(color: string): this;
|
|
808
940
|
}
|
|
809
941
|
|
|
810
942
|
declare class BarChartWrapper extends CartesianChartWrapper<'bar'> implements BarChartBuilder {
|
|
@@ -1312,6 +1444,15 @@ declare abstract class ArcChartWrapper<TType extends ArcChartType> extends Chart
|
|
|
1312
1444
|
protected mustHavePlugins(): {
|
|
1313
1445
|
id: string;
|
|
1314
1446
|
afterDraw(chart: any, args: any, options: any): void;
|
|
1447
|
+
afterInit(chart: any, args: any, options: any): void;
|
|
1448
|
+
beforeDatasetUpdate(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;
|
|
1315
1456
|
}[];
|
|
1316
1457
|
protected normalize(): void;
|
|
1317
1458
|
protected configAop(config: any): any;
|
|
@@ -1493,6 +1634,31 @@ declare class DoughnutChartWrapper extends ArcChartWrapper<'doughnut'> implement
|
|
|
1493
1634
|
* @beta
|
|
1494
1635
|
*/
|
|
1495
1636
|
setAllBorderColor(borderColor: string | string[]): this;
|
|
1637
|
+
/**
|
|
1638
|
+
* @description 도넛 중앙에 텍스트를 설정합니다.
|
|
1639
|
+
* @param {{text: string | string[], color?: string, fontStyle?: string, sidePadding?: number, minFontSize?: number, maxFontSize?: number}} config
|
|
1640
|
+
* @returns {this}
|
|
1641
|
+
* @since 1.0.0
|
|
1642
|
+
* @category plugin
|
|
1643
|
+
* @example
|
|
1644
|
+
* const chart = chartWrapper.create('doughnut', labels, datasets, options).setCenterText({
|
|
1645
|
+
* text: 'Center Text',
|
|
1646
|
+
* color: '#000',
|
|
1647
|
+
* fontStyle: 'Arial',
|
|
1648
|
+
* sidePadding: 20,
|
|
1649
|
+
* minFontSize: 12,
|
|
1650
|
+
* maxFontSize: 24
|
|
1651
|
+
* }).build('myDoughnutChart');
|
|
1652
|
+
* @beta
|
|
1653
|
+
*/
|
|
1654
|
+
setCenterText(config: {
|
|
1655
|
+
text: string | string[];
|
|
1656
|
+
color?: string;
|
|
1657
|
+
fontStyle?: string;
|
|
1658
|
+
sidePadding?: number;
|
|
1659
|
+
minFontSize?: number;
|
|
1660
|
+
maxFontSize?: number;
|
|
1661
|
+
}): this;
|
|
1496
1662
|
}
|
|
1497
1663
|
|
|
1498
1664
|
declare const noDataPlugin: {
|
|
@@ -1506,9 +1672,17 @@ declare const zoomResetPlugin: {
|
|
|
1506
1672
|
afterDraw(chart: any, args: any, options: any): void;
|
|
1507
1673
|
afterEvent(chart: any, args: any): void;
|
|
1508
1674
|
};
|
|
1509
|
-
declare
|
|
1675
|
+
declare function doughnutCenterTextPlugin(config: {
|
|
1676
|
+
text: string | string[];
|
|
1677
|
+
color?: string;
|
|
1678
|
+
fontStyle?: string;
|
|
1679
|
+
fontSize?: string;
|
|
1680
|
+
}): {
|
|
1510
1681
|
id: string;
|
|
1511
|
-
|
|
1682
|
+
afterInit(chart: Chart): void;
|
|
1683
|
+
afterUpdate(chart: Chart): void;
|
|
1684
|
+
updatePosition(chart: Chart): void;
|
|
1685
|
+
destroy(chart: Chart): void;
|
|
1512
1686
|
};
|
|
1513
1687
|
declare const loadingPlugin: {
|
|
1514
1688
|
id: string;
|
|
@@ -1554,9 +1728,91 @@ declare const customLegend: {
|
|
|
1554
1728
|
}) => HTMLDivElement | undefined;
|
|
1555
1729
|
afterUpdate(chart: any, args: any, options: any): void;
|
|
1556
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.0.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
|
|
1803
|
+
*/
|
|
1557
1804
|
declare const chartMountPlugin: {
|
|
1558
1805
|
id: string;
|
|
1559
1806
|
afterDraw(chart: any, args: any, options: any): void;
|
|
1807
|
+
afterInit(chart: any, args: any, options: any): void;
|
|
1808
|
+
beforeDatasetUpdate(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;
|
|
1560
1816
|
};
|
|
1561
1817
|
declare const blinkPlugin: Plugin$1;
|
|
1562
1818
|
declare const makeCenterHtml: (percent: number, ok?: number, warn?: number, ng?: number) => string;
|
|
@@ -1686,6 +1942,7 @@ declare enum ChartTypes {
|
|
|
1686
1942
|
|
|
1687
1943
|
declare const ChartToolBox: {
|
|
1688
1944
|
setErrorLog(enabled: boolean): void;
|
|
1945
|
+
setErrorshield(enabled: boolean): void;
|
|
1689
1946
|
};
|
|
1690
1947
|
declare const T$: {
|
|
1691
1948
|
readonly create: typeof ChartWrapper.create;
|
|
@@ -1701,8 +1958,9 @@ declare const T$: {
|
|
|
1701
1958
|
readonly defaultsOptions: typeof LocalDefaults;
|
|
1702
1959
|
readonly toolBox: {
|
|
1703
1960
|
setErrorLog(enabled: boolean): void;
|
|
1961
|
+
setErrorshield(enabled: boolean): void;
|
|
1704
1962
|
};
|
|
1705
1963
|
};
|
|
1706
1964
|
|
|
1707
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 };
|
|
1708
|
-
export type { AllChartTypes, ArcChartBuilder, ArcChartType, AxisColors, BarChartBuilder, BubbleChartBuilder, CartesianChartBuilder, CartesianChartType, CartesianDataset, ChartBuilder, ChartWithFocus, Color, CommonAxes, CommonAxesSacels, CommonCartesian, CommonCartesianAxes, 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 };
|