stz-chart-maker 2.4.0 → 2.4.2
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/CHANGELOG.md +12 -0
- package/dist/index.d.ts +234 -8
- package/dist/index.mjs +3815 -3574
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
3
|
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### [2.4.2] (2026-06-27)
|
|
7
|
+
-feat : doughnut gauge method 추가
|
|
8
|
+
-fix : Line Chart onClick 함수
|
|
9
|
+
|
|
10
|
+
### [2.4.1] (2026-06-25)
|
|
11
|
+
-feat : doughnut gauge method 추가
|
|
12
|
+
|
|
13
|
+
### [2.4.0] (2026-06-25)
|
|
14
|
+
-feat : Scatter setPointByValue , crosshair, plugins 추가
|
|
15
|
+
|
|
4
16
|
### [2.3.10] (2026-06-24)
|
|
5
17
|
- feat : stzOnClick 함수를 만들어서 사용자가 기본 chartjs options.onClick 함수를 사용 시 세번째 인자로 차트 값도 사용 할 수 있도록 제공
|
|
6
18
|
|
package/dist/index.d.ts
CHANGED
|
@@ -592,6 +592,76 @@ interface SegmentImageConfig {
|
|
|
592
592
|
backgroundColor?: string;
|
|
593
593
|
borderRadius?: number;
|
|
594
594
|
}
|
|
595
|
+
/**
|
|
596
|
+
* 게이지 구간 한 칸을 설명하는 설정입니다.
|
|
597
|
+
*/
|
|
598
|
+
interface GaugeSegment {
|
|
599
|
+
/** 구간 시작값입니다. */
|
|
600
|
+
from: number;
|
|
601
|
+
/** 구간 종료값입니다. */
|
|
602
|
+
to: number;
|
|
603
|
+
/** 구간 색상입니다. */
|
|
604
|
+
color: string;
|
|
605
|
+
/** 선택 라벨입니다. */
|
|
606
|
+
label?: string;
|
|
607
|
+
}
|
|
608
|
+
/**
|
|
609
|
+
* 게이지 바늘 렌더링 설정입니다.
|
|
610
|
+
*/
|
|
611
|
+
interface GaugeNeedleOptions {
|
|
612
|
+
/** 바늘 표시 여부입니다. 기본값은 `true` 입니다. */
|
|
613
|
+
display?: boolean;
|
|
614
|
+
/** 바늘 색상입니다. */
|
|
615
|
+
color?: string;
|
|
616
|
+
/** 바늘 두께입니다. */
|
|
617
|
+
width?: number;
|
|
618
|
+
/** 바늘 길이 비율입니다. `1`이면 outerRadius와 동일합니다. */
|
|
619
|
+
lengthRatio?: number;
|
|
620
|
+
/** 중심 원 반지름입니다. */
|
|
621
|
+
knobRadius?: number;
|
|
622
|
+
/** 중심 원 색상입니다. */
|
|
623
|
+
knobColor?: string;
|
|
624
|
+
}
|
|
625
|
+
/**
|
|
626
|
+
* 게이지 중앙 값 텍스트 설정입니다.
|
|
627
|
+
*/
|
|
628
|
+
interface GaugeValueTextOptions {
|
|
629
|
+
/** 텍스트 표시 여부입니다. 기본값은 `true` 입니다. */
|
|
630
|
+
display?: boolean;
|
|
631
|
+
/** 표시할 텍스트입니다. 생략 시 현재 값이 사용됩니다. */
|
|
632
|
+
text?: string | string[];
|
|
633
|
+
/** 값 기반 텍스트 포맷터입니다. */
|
|
634
|
+
formatter?: (value: number, min: number, max: number) => string | string[];
|
|
635
|
+
/** 글자 색상입니다. */
|
|
636
|
+
color?: string;
|
|
637
|
+
/** 글꼴 패밀리입니다. */
|
|
638
|
+
fontFamily?: string;
|
|
639
|
+
/** 글꼴 크기입니다. */
|
|
640
|
+
fontSize?: number;
|
|
641
|
+
/** 글꼴 굵기입니다. */
|
|
642
|
+
fontWeight?: string;
|
|
643
|
+
/** 세로 위치 보정값입니다. */
|
|
644
|
+
offsetY?: number;
|
|
645
|
+
}
|
|
646
|
+
/**
|
|
647
|
+
* 게이지 차트 내부 설정입니다.
|
|
648
|
+
*/
|
|
649
|
+
interface GaugeInternalOptions {
|
|
650
|
+
/** 최소값입니다. */
|
|
651
|
+
min?: number;
|
|
652
|
+
/** 최대값입니다. */
|
|
653
|
+
max?: number;
|
|
654
|
+
/** 현재 값입니다. */
|
|
655
|
+
value?: number;
|
|
656
|
+
/** 비어 있는 트랙 구간 색상입니다. */
|
|
657
|
+
trackColor?: string;
|
|
658
|
+
/** 사용자 정의 구간 설정입니다. */
|
|
659
|
+
segments?: GaugeSegment[];
|
|
660
|
+
/** 바늘 설정입니다. */
|
|
661
|
+
needle?: GaugeNeedleOptions;
|
|
662
|
+
/** 값 텍스트 설정입니다. */
|
|
663
|
+
valueText?: GaugeValueTextOptions;
|
|
664
|
+
}
|
|
595
665
|
interface SettingOptions {
|
|
596
666
|
img: string;
|
|
597
667
|
iconSize: {
|
|
@@ -697,7 +767,10 @@ type CustomLineChartOptions = CustomChartOptions<'line'>;
|
|
|
697
767
|
type CustomScatterChartOptions = CustomChartOptions<'scatter'>;
|
|
698
768
|
type CustomBubbleChartOptions = CustomChartOptions<'bubble'>;
|
|
699
769
|
type CustomPieChartOptions = CustomArcChartOptions<'pie'>;
|
|
700
|
-
type CustomDoughnutChartOptions = CustomArcChartOptions<'doughnut'
|
|
770
|
+
type CustomDoughnutChartOptions = CustomArcChartOptions<'doughnut'> & {
|
|
771
|
+
/** 도넛을 게이지처럼 사용할 때의 내부 설정입니다. */
|
|
772
|
+
_gauge?: GaugeInternalOptions;
|
|
773
|
+
};
|
|
701
774
|
type CustomTreemapChartOptions = CustomChartOptions<'treemap'> & {
|
|
702
775
|
scales?: never;
|
|
703
776
|
};
|
|
@@ -887,9 +960,17 @@ interface PieChartBuilder extends ArcChartBuilder<'pie'> {
|
|
|
887
960
|
setSegmentColorWhere(filterFn: (value: number, index: number) => boolean, color: string): this;
|
|
888
961
|
}
|
|
889
962
|
interface DoughnutChartBuilder extends ArcChartBuilder<'doughnut'> {
|
|
963
|
+
asGauge(): this;
|
|
890
964
|
convertToPie(): this;
|
|
891
965
|
setSegmentOffset(datasetIndex: number, offset: number): this;
|
|
892
966
|
setCutout(cutout: string | number): this;
|
|
967
|
+
setGaugeRange(min: number, max: number): this;
|
|
968
|
+
setGaugeValue(value: number): this;
|
|
969
|
+
setGaugeSegments(segments: GaugeSegment[]): this;
|
|
970
|
+
setGaugeAngle(startDegree: number, endDegree: number): this;
|
|
971
|
+
setGaugeNeedle(options: GaugeNeedleOptions | boolean): this;
|
|
972
|
+
setGaugeValueText(config: GaugeValueTextOptions | ((value: number, min: number, max: number) => string | string[])): this;
|
|
973
|
+
setGaugeTrackColor(color: string): this;
|
|
893
974
|
setCenterText(config: {
|
|
894
975
|
text: string | string[];
|
|
895
976
|
color?: string;
|
|
@@ -964,6 +1045,10 @@ type Types_DeepPartial<T> = DeepPartial<T>;
|
|
|
964
1045
|
type Types_DeepPartialCartesianAxes = DeepPartialCartesianAxes;
|
|
965
1046
|
type Types_DeepPartialPluginOptions<T extends ChartType> = DeepPartialPluginOptions<T>;
|
|
966
1047
|
type Types_DoughnutChartBuilder = DoughnutChartBuilder;
|
|
1048
|
+
type Types_GaugeInternalOptions = GaugeInternalOptions;
|
|
1049
|
+
type Types_GaugeNeedleOptions = GaugeNeedleOptions;
|
|
1050
|
+
type Types_GaugeSegment = GaugeSegment;
|
|
1051
|
+
type Types_GaugeValueTextOptions = GaugeValueTextOptions;
|
|
967
1052
|
type Types_HierarchicalChartType = HierarchicalChartType;
|
|
968
1053
|
type Types_HtmlLegendOptions = HtmlLegendOptions;
|
|
969
1054
|
type Types_LineChartBuilder = LineChartBuilder;
|
|
@@ -997,7 +1082,7 @@ type Types_TimeUnit = TimeUnit;
|
|
|
997
1082
|
type Types_TreemapChartBuilder = TreemapChartBuilder;
|
|
998
1083
|
type Types_UidImageMapping = UidImageMapping;
|
|
999
1084
|
declare namespace Types {
|
|
1000
|
-
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_CustomChartDatasets as CustomChartDatasets, Types_CustomChartOptions as CustomChartOptions, Types_CustomDoughnutChartOptions as CustomDoughnutChartOptions, Types_CustomLineChartOptions as CustomLineChartOptions, Types_CustomOptionPlugins as CustomOptionPlugins, Types_CustomPieChartOptions as CustomPieChartOptions, Types_CustomScatterChartOptions as CustomScatterChartOptions, Types_CustomTreemapChartOptions as CustomTreemapChartOptions, Types_CustomTreemapDataset as CustomTreemapDataset, Types_DeepPartial as DeepPartial, Types_DeepPartialCartesianAxes as DeepPartialCartesianAxes, Types_DeepPartialPluginOptions as DeepPartialPluginOptions, Types_DoughnutChartBuilder as DoughnutChartBuilder, Types_HierarchicalChartType as HierarchicalChartType, Types_HtmlLegendOptions as HtmlLegendOptions, Types_LineChartBuilder as LineChartBuilder, Types_Mode as Mode, Types_Override as Override, Types_PieChartBuilder as PieChartBuilder, Types_Position as Position, Types_RadarChartBuilder as RadarChartBuilder, Types_RadialChartType as RadialChartType, Types_ScatterAxisRangePadding as ScatterAxisRangePadding, Types_ScatterChartBuilder as ScatterChartBuilder, Types_ScatterCrosshairOptions as ScatterCrosshairOptions, Types_ScatterDataset as ScatterDataset, Types_ScatterPointContext as ScatterPointContext, Types_ScatterPointHighlightStyle as ScatterPointHighlightStyle, Types_ScatterQuadrantOptions as ScatterQuadrantOptions, Types_ScatterTrendLineOptions as ScatterTrendLineOptions, Types_SegmentImageConfig as SegmentImageConfig, Types_SettingOptions as SettingOptions, Types_SpinnerOverlayConfig as SpinnerOverlayConfig, Types_SpinnerOverlayOption as SpinnerOverlayOption, Types_SpinnerOverlayRenderContext as SpinnerOverlayRenderContext, Types_SpinnerOverlaySpinnerContent as SpinnerOverlaySpinnerContent, Types_SpinnerOverlayStyle as SpinnerOverlayStyle, Types_StzClickContext as StzClickContext, Types_StzClickHandler as StzClickHandler, Types_StzClickItem as StzClickItem, Types_TimeScaleConfig as TimeScaleConfig, Types_TimeScaleType as TimeScaleType, Types_TimeUnit as TimeUnit, Types_TreemapChartBuilder as TreemapChartBuilder, Types_UidImageMapping as UidImageMapping };
|
|
1085
|
+
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_CustomChartDatasets as CustomChartDatasets, Types_CustomChartOptions as CustomChartOptions, Types_CustomDoughnutChartOptions as CustomDoughnutChartOptions, Types_CustomLineChartOptions as CustomLineChartOptions, Types_CustomOptionPlugins as CustomOptionPlugins, Types_CustomPieChartOptions as CustomPieChartOptions, Types_CustomScatterChartOptions as CustomScatterChartOptions, Types_CustomTreemapChartOptions as CustomTreemapChartOptions, Types_CustomTreemapDataset as CustomTreemapDataset, Types_DeepPartial as DeepPartial, Types_DeepPartialCartesianAxes as DeepPartialCartesianAxes, Types_DeepPartialPluginOptions as DeepPartialPluginOptions, Types_DoughnutChartBuilder as DoughnutChartBuilder, Types_GaugeInternalOptions as GaugeInternalOptions, Types_GaugeNeedleOptions as GaugeNeedleOptions, Types_GaugeSegment as GaugeSegment, Types_GaugeValueTextOptions as GaugeValueTextOptions, Types_HierarchicalChartType as HierarchicalChartType, Types_HtmlLegendOptions as HtmlLegendOptions, Types_LineChartBuilder as LineChartBuilder, Types_Mode as Mode, Types_Override as Override, Types_PieChartBuilder as PieChartBuilder, Types_Position as Position, Types_RadarChartBuilder as RadarChartBuilder, Types_RadialChartType as RadialChartType, Types_ScatterAxisRangePadding as ScatterAxisRangePadding, Types_ScatterChartBuilder as ScatterChartBuilder, Types_ScatterCrosshairOptions as ScatterCrosshairOptions, Types_ScatterDataset as ScatterDataset, Types_ScatterPointContext as ScatterPointContext, Types_ScatterPointHighlightStyle as ScatterPointHighlightStyle, Types_ScatterQuadrantOptions as ScatterQuadrantOptions, Types_ScatterTrendLineOptions as ScatterTrendLineOptions, Types_SegmentImageConfig as SegmentImageConfig, Types_SettingOptions as SettingOptions, Types_SpinnerOverlayConfig as SpinnerOverlayConfig, Types_SpinnerOverlayOption as SpinnerOverlayOption, Types_SpinnerOverlayRenderContext as SpinnerOverlayRenderContext, Types_SpinnerOverlaySpinnerContent as SpinnerOverlaySpinnerContent, Types_SpinnerOverlayStyle as SpinnerOverlayStyle, Types_StzClickContext as StzClickContext, Types_StzClickHandler as StzClickHandler, Types_StzClickItem as StzClickItem, Types_TimeScaleConfig as TimeScaleConfig, Types_TimeScaleType as TimeScaleType, Types_TimeUnit as TimeUnit, Types_TreemapChartBuilder as TreemapChartBuilder, Types_UidImageMapping as UidImageMapping };
|
|
1001
1086
|
}
|
|
1002
1087
|
|
|
1003
1088
|
interface ChartConfig {
|
|
@@ -2421,10 +2506,10 @@ declare class BubbleChart extends CartesianChart<'bubble'> implements BubbleChar
|
|
|
2421
2506
|
* ═════════════════════════════════════════════════════════════
|
|
2422
2507
|
*/
|
|
2423
2508
|
|
|
2424
|
-
declare abstract class ArcChart<TType extends ArcChartType> extends Chart<TType> implements ArcChartBuilder<TType> {
|
|
2509
|
+
declare abstract class ArcChart<TType extends ArcChartType, TOptions extends CustomArcChartOptions<TType> = CustomArcChartOptions<TType>> extends Chart<TType, TOptions> implements ArcChartBuilder<TType> {
|
|
2425
2510
|
readonly type: TType;
|
|
2426
2511
|
private _chartId?;
|
|
2427
|
-
protected constructor(type: TType, labels: (string | number)[], datasets: ChartDataset<TType, (number | null)[]>[], options?:
|
|
2512
|
+
protected constructor(type: TType, labels: (string | number)[], datasets: ChartDataset<TType, (number | null)[]>[], options?: TOptions, plugins?: Plugin);
|
|
2428
2513
|
get chartId(): string;
|
|
2429
2514
|
set chartId(value: string);
|
|
2430
2515
|
protected requireLabels(): boolean;
|
|
@@ -2444,7 +2529,7 @@ declare abstract class ArcChart<TType extends ArcChartType> extends Chart<TType>
|
|
|
2444
2529
|
afterDraw(chart: any, args: any, options: any): void;
|
|
2445
2530
|
afterDestroy(chart: any): void;
|
|
2446
2531
|
}[];
|
|
2447
|
-
protected resolveMustHavePlugins(options?:
|
|
2532
|
+
protected resolveMustHavePlugins(options?: TOptions): any[];
|
|
2448
2533
|
protected normalize(): void;
|
|
2449
2534
|
protected configAop(config: any): any;
|
|
2450
2535
|
/**
|
|
@@ -2550,9 +2635,15 @@ declare abstract class ArcChart<TType extends ArcChartType> extends Chart<TType>
|
|
|
2550
2635
|
setSegmentImages(images: string[] | UidImageMapping[], config?: Partial<Omit<SegmentImageConfig, 'images'>>): this;
|
|
2551
2636
|
}
|
|
2552
2637
|
|
|
2553
|
-
declare class DoughnutChart extends ArcChart<'doughnut'> implements DoughnutChartBuilder {
|
|
2638
|
+
declare class DoughnutChart extends ArcChart<'doughnut', CustomDoughnutChartOptions> implements DoughnutChartBuilder {
|
|
2554
2639
|
constructor(type: 'doughnut', labels: (string | number)[], datasets: ChartDataset<'doughnut', (number | null)[]>[], options?: CustomDoughnutChartOptions, plugins?: any);
|
|
2555
2640
|
protected requireLabels(): boolean;
|
|
2641
|
+
private isGaugeMode;
|
|
2642
|
+
private get gaugeOptions();
|
|
2643
|
+
private ensureGaugePlugin;
|
|
2644
|
+
private get primaryDataset();
|
|
2645
|
+
private normalizeGaugeSegments;
|
|
2646
|
+
private syncGaugeDataset;
|
|
2556
2647
|
/**
|
|
2557
2648
|
* @description 레거시 지원용 차트 설정 객체를 생성합니다.
|
|
2558
2649
|
* @param {string} id
|
|
@@ -2561,6 +2652,7 @@ declare class DoughnutChart extends ArcChart<'doughnut'> implements DoughnutChar
|
|
|
2561
2652
|
* @beta
|
|
2562
2653
|
*/
|
|
2563
2654
|
makeConfig(id?: string): ChartConfig;
|
|
2655
|
+
build(id?: string): ChartConfig;
|
|
2564
2656
|
/**
|
|
2565
2657
|
* @description 도넛 구멍 크기를 설정합니다.
|
|
2566
2658
|
* @param cutout - 구멍 크기 ('50%', '60%' 또는 픽셀값)
|
|
@@ -2576,6 +2668,19 @@ declare class DoughnutChart extends ArcChart<'doughnut'> implements DoughnutChar
|
|
|
2576
2668
|
* @beta
|
|
2577
2669
|
*/
|
|
2578
2670
|
convertToPie(): this;
|
|
2671
|
+
/**
|
|
2672
|
+
* @description 도넛 차트를 반원 게이지 기본 설정으로 전환합니다.
|
|
2673
|
+
* @returns {this}
|
|
2674
|
+
* @since 2.4.1
|
|
2675
|
+
* @example
|
|
2676
|
+
* const chart = ChartWrapper
|
|
2677
|
+
* .create('doughnut', [], [{ data: [] }])
|
|
2678
|
+
* .asGauge()
|
|
2679
|
+
* .setGaugeRange(0, 100)
|
|
2680
|
+
* .setGaugeValue(68)
|
|
2681
|
+
* .build('gaugeChart');
|
|
2682
|
+
*/
|
|
2683
|
+
asGauge(): this;
|
|
2579
2684
|
/**
|
|
2580
2685
|
* @description 모든 세그먼트의 색상을 설정합니다.
|
|
2581
2686
|
* @param colors - 색상 배열
|
|
@@ -2657,6 +2762,119 @@ declare class DoughnutChart extends ArcChart<'doughnut'> implements DoughnutChar
|
|
|
2657
2762
|
minFontSize?: number;
|
|
2658
2763
|
maxFontSize?: number;
|
|
2659
2764
|
}): this;
|
|
2765
|
+
/**
|
|
2766
|
+
* @description 게이지 최소값과 최대값을 설정합니다.
|
|
2767
|
+
* @param {number} min - 게이지 최소값
|
|
2768
|
+
* @param {number} max - 게이지 최대값
|
|
2769
|
+
* @returns {this}
|
|
2770
|
+
* @since 2.4.1
|
|
2771
|
+
* @example
|
|
2772
|
+
* const chart = ChartWrapper
|
|
2773
|
+
* .create('doughnut', [], [{ data: [] }])
|
|
2774
|
+
* .asGauge()
|
|
2775
|
+
* .setGaugeRange(0, 100);
|
|
2776
|
+
*/
|
|
2777
|
+
setGaugeRange(min: number, max: number): this;
|
|
2778
|
+
/**
|
|
2779
|
+
* @description 게이지 현재 값을 설정합니다.
|
|
2780
|
+
* @param {number} value - 게이지에 표시할 현재 값
|
|
2781
|
+
* @returns {this}
|
|
2782
|
+
* @since 2.4.1
|
|
2783
|
+
* @example
|
|
2784
|
+
* const chart = ChartWrapper
|
|
2785
|
+
* .create('doughnut', [], [{ data: [] }])
|
|
2786
|
+
* .asGauge()
|
|
2787
|
+
* .setGaugeValue(72);
|
|
2788
|
+
*/
|
|
2789
|
+
setGaugeValue(value: number): this;
|
|
2790
|
+
/**
|
|
2791
|
+
* @description 게이지 구간 목록을 설정합니다.
|
|
2792
|
+
* @param {GaugeSegment[]} segments - 게이지를 구성할 구간 배열
|
|
2793
|
+
* @returns {this}
|
|
2794
|
+
* @since 2.4.1
|
|
2795
|
+
* @example
|
|
2796
|
+
* const chart = ChartWrapper
|
|
2797
|
+
* .create('doughnut', [], [{ data: [] }])
|
|
2798
|
+
* .asGauge()
|
|
2799
|
+
* .setGaugeSegments([
|
|
2800
|
+
* { from: 0, to: 55, color: '#22c55e', label: 'safe' },
|
|
2801
|
+
* { from: 55, to: 80, color: '#f59e0b', label: 'warn' },
|
|
2802
|
+
* { from: 80, to: 100, color: '#ef4444', label: 'critical' },
|
|
2803
|
+
* ]);
|
|
2804
|
+
*/
|
|
2805
|
+
setGaugeSegments(segments: GaugeSegment[]): this;
|
|
2806
|
+
/**
|
|
2807
|
+
* @description 게이지 시작/종료 각도를 도 단위로 설정합니다.
|
|
2808
|
+
* @param {number} startDegree - 시작 각도
|
|
2809
|
+
* @param {number} endDegree - 종료 각도
|
|
2810
|
+
* @returns {this}
|
|
2811
|
+
* @since 2.4.1
|
|
2812
|
+
* @example
|
|
2813
|
+
* const chart = ChartWrapper
|
|
2814
|
+
* .create('doughnut', [], [{ data: [] }])
|
|
2815
|
+
* .asGauge()
|
|
2816
|
+
* .setGaugeAngle(-90, 90);
|
|
2817
|
+
*/
|
|
2818
|
+
setGaugeAngle(startDegree: number, endDegree: number): this;
|
|
2819
|
+
/**
|
|
2820
|
+
* @description 게이지 바늘 설정을 갱신합니다.
|
|
2821
|
+
* @param {GaugeNeedleOptions | boolean} options - 바늘 표시 여부 또는 상세 설정
|
|
2822
|
+
* @returns {this}
|
|
2823
|
+
* @since 2.4.1
|
|
2824
|
+
* @example
|
|
2825
|
+
* const chart = ChartWrapper
|
|
2826
|
+
* .create('doughnut', [], [{ data: [] }])
|
|
2827
|
+
* .asGauge()
|
|
2828
|
+
* .setGaugeNeedle({
|
|
2829
|
+
* color: '#0f172a',
|
|
2830
|
+
* width: 4,
|
|
2831
|
+
* knobRadius: 7,
|
|
2832
|
+
* knobColor: '#0f172a',
|
|
2833
|
+
* lengthRatio: 0.9,
|
|
2834
|
+
* });
|
|
2835
|
+
*
|
|
2836
|
+
* @example
|
|
2837
|
+
* const chart = ChartWrapper
|
|
2838
|
+
* .create('doughnut', [], [{ data: [] }])
|
|
2839
|
+
* .asGauge()
|
|
2840
|
+
* .setGaugeNeedle(false);
|
|
2841
|
+
*/
|
|
2842
|
+
setGaugeNeedle(options: GaugeNeedleOptions | boolean): this;
|
|
2843
|
+
/**
|
|
2844
|
+
* @description 게이지 중앙 값 텍스트를 설정합니다.
|
|
2845
|
+
* @param {GaugeValueTextOptions | ((value: number, min: number, max: number) => string | string[])} config - 텍스트 설정 또는 포맷터 함수
|
|
2846
|
+
* @returns {this}
|
|
2847
|
+
* @since 2.4.1
|
|
2848
|
+
* @example
|
|
2849
|
+
* const chart = ChartWrapper
|
|
2850
|
+
* .create('doughnut', [], [{ data: [] }])
|
|
2851
|
+
* .asGauge()
|
|
2852
|
+
* .setGaugeValueText({
|
|
2853
|
+
* text: ['72%', 'requests'],
|
|
2854
|
+
* color: '#111827',
|
|
2855
|
+
* fontSize: 22,
|
|
2856
|
+
* fontWeight: '800',
|
|
2857
|
+
* });
|
|
2858
|
+
*
|
|
2859
|
+
* @example
|
|
2860
|
+
* const chart = ChartWrapper
|
|
2861
|
+
* .create('doughnut', [], [{ data: [] }])
|
|
2862
|
+
* .asGauge()
|
|
2863
|
+
* .setGaugeValueText((value, min, max) => [`${value}%`, `${max - min} scale`]);
|
|
2864
|
+
*/
|
|
2865
|
+
setGaugeValueText(config: GaugeValueTextOptions | ((value: number, min: number, max: number) => string | string[])): this;
|
|
2866
|
+
/**
|
|
2867
|
+
* @description 게이지 비활성 트랙 색상을 설정합니다.
|
|
2868
|
+
* @param {string} color - 비활성 트랙에 사용할 색상
|
|
2869
|
+
* @returns {this}
|
|
2870
|
+
* @since 2.4.1
|
|
2871
|
+
* @example
|
|
2872
|
+
* const chart = ChartWrapper
|
|
2873
|
+
* .create('doughnut', [], [{ data: [] }])
|
|
2874
|
+
* .asGauge()
|
|
2875
|
+
* .setGaugeTrackColor('rgba(148, 163, 184, 0.24)');
|
|
2876
|
+
*/
|
|
2877
|
+
setGaugeTrackColor(color: string): this;
|
|
2660
2878
|
}
|
|
2661
2879
|
|
|
2662
2880
|
declare class PieChart extends ArcChart<'pie'> implements PieChartBuilder {
|
|
@@ -2912,6 +3130,11 @@ declare class TreemapChart extends Chart<'treemap', CustomTreemapChartOptions> i
|
|
|
2912
3130
|
setBorderColor(borderColor: string): this;
|
|
2913
3131
|
}
|
|
2914
3132
|
|
|
3133
|
+
/**
|
|
3134
|
+
* 게이지 차트의 바늘과 중앙 텍스트를 그리는 플러그인입니다.
|
|
3135
|
+
*/
|
|
3136
|
+
declare const gaugeOverlayPlugin: Plugin<'doughnut'>;
|
|
3137
|
+
|
|
2915
3138
|
/**
|
|
2916
3139
|
* @description Cartesian 차트에서 사용할 수 있는 플러그인들을 제공합니다.
|
|
2917
3140
|
* @since 1.6.6
|
|
@@ -3085,6 +3308,7 @@ declare const loadingPlugin: {
|
|
|
3085
3308
|
drawLoadingPlaceholder(chart: any): void;
|
|
3086
3309
|
afterDestroy(chart: any): void;
|
|
3087
3310
|
};
|
|
3311
|
+
|
|
3088
3312
|
/**
|
|
3089
3313
|
* @description 외부 HTML 컨테이너에 커스텀 범례를 렌더링하는 플러그인입니다.
|
|
3090
3314
|
* containerID 옵션으로 렌더링 대상 엘리먼트를 지정합니다.
|
|
@@ -3546,6 +3770,7 @@ declare const LocalDefaults_defaultScatterScales: typeof defaultScatterScales;
|
|
|
3546
3770
|
declare const LocalDefaults_defaultScatterTooltipCallback: typeof defaultScatterTooltipCallback;
|
|
3547
3771
|
declare const LocalDefaults_defaultTreemapTooltipCallback: typeof defaultTreemapTooltipCallback;
|
|
3548
3772
|
declare const LocalDefaults_doughnutCenterTextPlugin: typeof doughnutCenterTextPlugin;
|
|
3773
|
+
declare const LocalDefaults_gaugeOverlayPlugin: typeof gaugeOverlayPlugin;
|
|
3549
3774
|
declare const LocalDefaults_loadingPlugin: typeof loadingPlugin;
|
|
3550
3775
|
declare const LocalDefaults_makeCenterHtml: typeof makeCenterHtml;
|
|
3551
3776
|
declare const LocalDefaults_noDataPlugin: typeof noDataPlugin;
|
|
@@ -3600,6 +3825,7 @@ declare namespace LocalDefaults {
|
|
|
3600
3825
|
LocalDefaults_defaultScatterTooltipCallback as defaultScatterTooltipCallback,
|
|
3601
3826
|
LocalDefaults_defaultTreemapTooltipCallback as defaultTreemapTooltipCallback,
|
|
3602
3827
|
LocalDefaults_doughnutCenterTextPlugin as doughnutCenterTextPlugin,
|
|
3828
|
+
LocalDefaults_gaugeOverlayPlugin as gaugeOverlayPlugin,
|
|
3603
3829
|
LocalDefaults_loadingPlugin as loadingPlugin,
|
|
3604
3830
|
LocalDefaults_makeCenterHtml as makeCenterHtml,
|
|
3605
3831
|
LocalDefaults_noDataPlugin as noDataPlugin,
|
|
@@ -3984,5 +4210,5 @@ declare const T$: {
|
|
|
3984
4210
|
};
|
|
3985
4211
|
};
|
|
3986
4212
|
|
|
3987
|
-
export { ArcChart, ArcChart as ArcChartWrapper, BarChart, BarChart as BarChartWrapper, BubbleChart, BubbleChart as BubbleChartWrapper, CartesianChart, CartesianChart as CartesianChartWrapper, Chart, ChartFactory, ChartInstance, ChartToolBox, ChartTypes, Chart as ChartWrapper, CreateZoomRangeSlider, DefaultArcRadius, DefaultDataLabelsOptions, DefaultHiddenLegendTopOptions, DefaultHiddenSparkScales, DefaultResponsiveChartOptions, DefaultSparkPluginOptions, DefaultTimeScaleOptions, DefaultTopLegendOptions, DefaultZoomOptions, DoughnutChart, DoughnutChart as DoughnutChartWrapper, LineChart, LineChart as LineChartWrapper, PieChart, PieChart as PieChartWrapper, ScatterChart, ScatterChart as ScatterChartWrapper, T$, TreemapChart, TreemapChart as TreemapChartWrapper, barScaleImgPlugin, blinkPlugin, changeSetting, chartMountPlugin, clearChartActiveElements, createAssignedTasksPlugin, createDefaultBarOptions, createDefaultBubbleOptions, createDefaultCartesianScales, createDefaultDoughnutOptions, createDefaultLineOptions, createDefaultPieOptions, createDefaultScatterOptions, createDefaultTreemapOptions, createScatterCrosshairPlugin, createScatterQuadrantPlugin, createScatterTrendLinePlugin, createStatusPlugin, createTodayLinePlugin, createWeekendPlugin, customDatasetPlugins, customLegend, T$ as default, defaultBarScales, defaultBarTooltipCallback, defaultBubbleScales, defaultBubbleTooltipCallback, defaultDoughnutTooltipCallback, defaultLineScales, defaultLineTooltipCallback, defaultPieTooltipCallback, defaultScatterScales, defaultScatterTooltipCallback, defaultTreemapTooltipCallback, doughnutCenterTextPlugin, downloadChartAsImage, downloadChartAsImageByInstance, getChartAsBase64, getChartAsBase64ByInstance, getChartAsBlob, getChartAsBlobByInstance, getChartDatasetMeta, getChartInstance, hideChartTooltip, isChartDatasetVisible, loadingPlugin, makeCenterHtml, mountChart, noDataPlugin, resetChartZoom, resizeChart, segmentImagePlugin, setChartActiveElements, setChartConfig, setChartDatasetVisibility, showChartTooltip, sparkBarOptions, sparkBubbleOptions, sparkLineOptions, toggleChartDatasetVisibility, updateChart, zoomRangeSlider, zoomResetPlugin };
|
|
3988
|
-
export type { Align, AllChartTypes, ArcChartBuilder, ArcChartType, ArcDataset, AutoZoomLimitMode, AutoZoomLimits, AxisColors, BarChartBuilder, BubbleChartBuilder, CartesianChartBuilder, CartesianChartType, CartesianDataset, ChartBuilder, ChartImageExportOptions, ChartTarget, ChartWithFocus, Color, CommonAxes, CommonAxesSacels, CommonCartesian, CommonCartesianAxes, CommonCartesianLegendConfig, CommonCartesianTicks, CommonCartesianTitleConfig, CommonTicks, Constructor, CustomArcChartOptions, CustomBarChartOptions, CustomBubbleChartOptions, CustomCartesianDataset, CustomChartDatasets, CustomChartOptions, CustomDoughnutChartOptions, CustomLineChartOptions, CustomOptionPlugins, CustomPieChartOptions, CustomScatterChartOptions, CustomTreemapChartOptions, CustomTreemapDataset, CustomZoomType, DataLabels, DataLabelsContext, DatasetWithPrevColors, DeepPartial, DeepPartialCartesianAxes, DeepPartialPluginOptions, DeepPartialZoomType, DoughnutChartBuilder, FocusCallback, HierarchicalChartType, HtmlLegendOptions, LineChartBuilder, Mode, MountChartHandle, OriginalColors, Override, PartialDataLabels, PieChartBuilder, Position, RadarChartBuilder, RadialChartType, ScaleWithOriginalColors, ScatterAxisRangePadding, ScatterChartBuilder, ScatterCrosshairOptions, ScatterDataset, ScatterPointContext, ScatterPointHighlightStyle, ScatterQuadrantOptions, ScatterTrendLineOptions, SegmentImageConfig, SettingOptions, SpinnerOverlayConfig, SpinnerOverlayOption, SpinnerOverlayRenderContext, SpinnerOverlaySpinnerContent, SpinnerOverlayStyle, StzClickContext, StzClickHandler, StzClickItem, StzConfig, TimeScaleConfig, TimeScaleType, TimeUnit, TreemapChartBuilder, UidImageMapping, ZoomLimitOptions, ZoomRangeSliderColors, ZoomRangeSliderPlugin, ZoomRangeSliderVar, ZoomScaleLimits };
|
|
4213
|
+
export { ArcChart, ArcChart as ArcChartWrapper, BarChart, BarChart as BarChartWrapper, BubbleChart, BubbleChart as BubbleChartWrapper, CartesianChart, CartesianChart as CartesianChartWrapper, Chart, ChartFactory, ChartInstance, ChartToolBox, ChartTypes, Chart as ChartWrapper, CreateZoomRangeSlider, DefaultArcRadius, DefaultDataLabelsOptions, DefaultHiddenLegendTopOptions, DefaultHiddenSparkScales, DefaultResponsiveChartOptions, DefaultSparkPluginOptions, DefaultTimeScaleOptions, DefaultTopLegendOptions, DefaultZoomOptions, DoughnutChart, DoughnutChart as DoughnutChartWrapper, LineChart, LineChart as LineChartWrapper, PieChart, PieChart as PieChartWrapper, ScatterChart, ScatterChart as ScatterChartWrapper, T$, TreemapChart, TreemapChart as TreemapChartWrapper, barScaleImgPlugin, blinkPlugin, changeSetting, chartMountPlugin, clearChartActiveElements, createAssignedTasksPlugin, createDefaultBarOptions, createDefaultBubbleOptions, createDefaultCartesianScales, createDefaultDoughnutOptions, createDefaultLineOptions, createDefaultPieOptions, createDefaultScatterOptions, createDefaultTreemapOptions, createScatterCrosshairPlugin, createScatterQuadrantPlugin, createScatterTrendLinePlugin, createStatusPlugin, createTodayLinePlugin, createWeekendPlugin, customDatasetPlugins, customLegend, T$ as default, defaultBarScales, defaultBarTooltipCallback, defaultBubbleScales, defaultBubbleTooltipCallback, defaultDoughnutTooltipCallback, defaultLineScales, defaultLineTooltipCallback, defaultPieTooltipCallback, defaultScatterScales, defaultScatterTooltipCallback, defaultTreemapTooltipCallback, doughnutCenterTextPlugin, downloadChartAsImage, downloadChartAsImageByInstance, gaugeOverlayPlugin, getChartAsBase64, getChartAsBase64ByInstance, getChartAsBlob, getChartAsBlobByInstance, getChartDatasetMeta, getChartInstance, hideChartTooltip, isChartDatasetVisible, loadingPlugin, makeCenterHtml, mountChart, noDataPlugin, resetChartZoom, resizeChart, segmentImagePlugin, setChartActiveElements, setChartConfig, setChartDatasetVisibility, showChartTooltip, sparkBarOptions, sparkBubbleOptions, sparkLineOptions, toggleChartDatasetVisibility, updateChart, zoomRangeSlider, zoomResetPlugin };
|
|
4214
|
+
export type { Align, AllChartTypes, ArcChartBuilder, ArcChartType, ArcDataset, AutoZoomLimitMode, AutoZoomLimits, AxisColors, BarChartBuilder, BubbleChartBuilder, CartesianChartBuilder, CartesianChartType, CartesianDataset, ChartBuilder, ChartImageExportOptions, ChartTarget, ChartWithFocus, Color, CommonAxes, CommonAxesSacels, CommonCartesian, CommonCartesianAxes, CommonCartesianLegendConfig, CommonCartesianTicks, CommonCartesianTitleConfig, CommonTicks, Constructor, CustomArcChartOptions, CustomBarChartOptions, CustomBubbleChartOptions, CustomCartesianDataset, CustomChartDatasets, CustomChartOptions, CustomDoughnutChartOptions, CustomLineChartOptions, CustomOptionPlugins, CustomPieChartOptions, CustomScatterChartOptions, CustomTreemapChartOptions, CustomTreemapDataset, CustomZoomType, DataLabels, DataLabelsContext, DatasetWithPrevColors, DeepPartial, DeepPartialCartesianAxes, DeepPartialPluginOptions, DeepPartialZoomType, DoughnutChartBuilder, FocusCallback, GaugeInternalOptions, GaugeNeedleOptions, GaugeSegment, GaugeValueTextOptions, HierarchicalChartType, HtmlLegendOptions, LineChartBuilder, Mode, MountChartHandle, OriginalColors, Override, PartialDataLabels, PieChartBuilder, Position, RadarChartBuilder, RadialChartType, ScaleWithOriginalColors, ScatterAxisRangePadding, ScatterChartBuilder, ScatterCrosshairOptions, ScatterDataset, ScatterPointContext, ScatterPointHighlightStyle, ScatterQuadrantOptions, ScatterTrendLineOptions, SegmentImageConfig, SettingOptions, SpinnerOverlayConfig, SpinnerOverlayOption, SpinnerOverlayRenderContext, SpinnerOverlaySpinnerContent, SpinnerOverlayStyle, StzClickContext, StzClickHandler, StzClickItem, StzConfig, TimeScaleConfig, TimeScaleType, TimeUnit, TreemapChartBuilder, UidImageMapping, ZoomLimitOptions, ZoomRangeSliderColors, ZoomRangeSliderPlugin, ZoomRangeSliderVar, ZoomScaleLimits };
|