stz-chart-maker 1.2.3 → 1.2.5

package/README.md

@@ -1,7 +1,8 @@
 <div>
-# stz-chart-maker
 
-Chart.js 기반의 차트 생성 도구
+
+<h1>stz-chart-maker</h1>
+<strong>Chart.js 기반의 차트 생성 도구</strong>
 
 ## using npm :
   ```bash

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import { ChartType, PluginOptionsByType, ChartOptions, GridLineOptions, FontSpec, Tick, Chart, ChartEvent, ActiveElement, ChartDataset, Plugin as Plugin$1, TooltipItem, ChartTypeRegistry } from 'chart.js';
+import * as chart_js from 'chart.js';
+import { ChartType, PluginOptionsByType, ChartOptions, GridLineOptions, FontSpec, Tick, Chart, ChartEvent, ActiveElement, LegendOptions, ChartDataset, Plugin as Plugin$1, TooltipItem, ChartTypeRegistry } from 'chart.js';
 import { ZoomPluginOptions } from 'chartjs-plugin-zoom/types/options';
 import { DeepPartial as DeepPartial$1 } from 'chart.js/dist/types/utils';
 
@@ -74,8 +75,11 @@ interface ChartBuilder<TType extends ChartType> {
         width: number;
         height: number;
     }) => void): this;
+    setTitle(titleOptions: CommonCartesianTitleConfig): this;
+    setLegend(legendOptions: DeepPartial<LegendOptions<TType>>): this;
 }
-type Position = 'start' | 'center' | 'end' | 'left' | 'right' | 'top' | 'bottom';
+type Align = 'start' | 'center' | 'end';
+type Position = Align | 'left' | 'right' | 'top' | 'bottom';
 type CartesianChartType = 'line' | 'bar' | 'scatter' | 'bubble';
 type ArcChartType = 'doughnut' | 'pie';
 type RadialChartType = 'radar' | 'polarArea';
@@ -114,16 +118,36 @@ interface SettingOptions {
 }
 interface CommonCartesianTitleConfig {
     display?: boolean;
-    align?: Position;
+    align?: Align;
     text?: string | string[];
     color?: string;
     font?: FontSpec;
-    padding?: {
-        top?: number;
-        bottom?: number;
-        left?: number;
-        right?: number;
+    padding?: number | {
+        top: number;
+        bottom: number;
+    };
+}
+
+interface CommonCartesianLegendConfig {
+    display?: boolean;
+    position?: 'top' | 'left' | 'bottom' | 'right' | 'center' | 'chartArea';
+    align?: Align;
+    labels?: {
+        boxWidth?: number;
+        boxHeight?: number;
+        color?: string;
+        font?: FontSpec;
+        padding?: number;
+        generateLabels?: (chart: any) => any[];
+        filter?: (item: any, data: any) => boolean;
+        sort?: (a: any, b: any, data: any) => number;
+        pointStyle?: string | boolean;
+        textAlign?: 'left' | 'center' | 'right';
+        usePointStyle?: boolean;
     };
+    onClick?: (e: any, legendItem: any, legend: any) => void;
+    onHover?: (e: any, legendItem: any, legend: any) => void;
+    onLeave?: (e: any, legendItem: any, legend: any) => void;
 }
 interface CommonCartesian {
     bounds: string;
@@ -293,6 +317,8 @@ interface CartesianChartBuilder<TType extends CartesianChartType> extends ChartB
     setDatasetParsing(datasetIndex: number, xAxisKey: string | false, yAxisKey: string | false): this;
     setAllDatasetsParsing(xAxisKey: string | false, yAxisKey: string | false): this;
     customLegend(obj: HtmlLegendOptions): this;
+    setBackgroundColor(color: Color): this;
+    setGrid(axis: string, gridOptions: GridLineOptions): this;
 }
 interface BarChartBuilder extends CartesianChartBuilder<'bar'> {
     setBarThickness(datasetIndex: number, thickness: number): this;
@@ -355,8 +381,20 @@ interface BubbleChartBuilder extends CartesianChartBuilder<'bubble'> {
 interface PieChartBuilder extends ArcChartBuilder<'pie'> {
 }
 interface DoughnutChartBuilder extends ArcChartBuilder<'doughnut'> {
+    convertToPie(): this;
+    setSegmentOffset(datasetIndex: number, offset: number): this;
+    setCutout(cutout: string | number): this;
+    setCenterText(config: {
+        text: string | string[];
+        color?: string;
+        fontStyle?: string;
+        sidePadding?: number;
+        minFontSize?: number;
+        maxFontSize?: number;
+    }): this;
 }
 
+type Types_Align = Align;
 type Types_ArcChartBuilder<TType extends ArcChartType> = ArcChartBuilder<TType>;
 type Types_ArcChartType = ArcChartType;
 type Types_BarChartBuilder = BarChartBuilder;
@@ -370,6 +408,7 @@ type Types_CommonAxes = CommonAxes;
 type Types_CommonAxesSacels = CommonAxesSacels;
 type Types_CommonCartesian = CommonCartesian;
 type Types_CommonCartesianAxes = CommonCartesianAxes;
+type Types_CommonCartesianLegendConfig = CommonCartesianLegendConfig;
 type Types_CommonCartesianTicks = CommonCartesianTicks;
 type Types_CommonCartesianTitleConfig = CommonCartesianTitleConfig;
 type Types_CommonTicks = CommonTicks;
@@ -396,7 +435,7 @@ type Types_RadarChartBuilder = RadarChartBuilder;
 type Types_RadialChartType = RadialChartType;
 type Types_SettingOptions = SettingOptions;
 declare namespace Types {
-  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 };
+  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 };
 }
 
 interface ChartConfig {
@@ -475,6 +514,45 @@ declare abstract class ChartWrapper<TType extends ChartType, TOptions extends Cu
         width: number;
         height: number;
     }) => void): this;
+    /**
+     * @description 차트의 제목을 설정합니다.
+     * @param {DeepPartial<CommonCartesianTitleConfig>} titleOptions
+     * @returns {this}
+     * @Since 1.0.0
+     * @category options
+     * @example
+     * chart.setTitle({
+     *   text: '차트 제목',
+     *   align: 'center'  // 'start' | 'center' | 'end'
+     * });
+     */
+    setTitle(titleOptions: DeepPartial<CommonCartesianTitleConfig>): this;
+    /**
+     * @description 차트의 범례를 설정합니다.
+     * @param {DeepPartial<LegendOptions<TType>>} legendOptions
+     * @returns {this}
+     * @Since 1.0.0
+     * @category options
+     * @example
+     * chart.setLegend({
+     * position: 'bottom',
+     *   align: 'center',
+     *   labels: {
+     *     boxWidth: 40,
+     *     padding: 15,
+     *     font: {
+     *       size: 14,
+     *       weight: 'bold'
+     *     },
+     *     color: '#333',
+     *     usePointStyle: true
+     *   }
+     *   onClick: (e, legendItem, legend) => {
+     *     console.log('Legend clicked:', legendItem);
+     *   }
+     * });
+     */
+    setLegend(legendOptions: DeepPartial<LegendOptions<TType>>): this;
 }
 
 interface AxisColors {
@@ -559,6 +637,7 @@ declare abstract class CartesianChartWrapper<TType extends CartesianChartType> e
     protected mustHavePlugins(): {
         id: string;
         afterDraw(chart: any, args: any, options: any): void;
+        afterDestroy(chart: chart_js.Chart): void;
     }[];
     protected isLine(): boolean;
     protected isScatter(): boolean;
@@ -805,6 +884,28 @@ declare abstract class CartesianChartWrapper<TType extends CartesianChartType> e
      * @category Dataset
      */
     addDataset(dataset: CustomCartesianDataset<TType>): string;
+    /**
+     * @description 축의 그리드 라인 옵션을 설정합니다.
+     * @param {string} axis
+     * @param {GridLineOptions} gridOptions
+     * @returns {this}
+     * @Since 1.0.0
+     * @category scales
+     * @example
+     * chart.setGrid('y', { color: 'rgba(0, 0, 0, 0.1)', lineWidth: 1 });
+     */
+    setGrid(axis: string, gridOptions: GridLineOptions): this;
+    /**
+     * @description 차트의 캔버스 배경색을 설정합니다.
+     * @param {string} color
+     * @returns {this}
+     * @Since 1.0.0
+     * @category options
+     * @example
+     * chart.setBackgroundColor('rgba(255, 255, 255, 0.5)');
+     * chart.setBackgroundColor('#f0f0f0');
+     */
+    setBackgroundColor(color: string): this;
 }
 
 declare class BarChartWrapper extends CartesianChartWrapper<'bar'> implements BarChartBuilder {
@@ -1274,23 +1375,6 @@ declare class BubbleChartWrapper extends CartesianChartWrapper<'bubble'> impleme
     setAllRotation(rotation: number): this;
 }
 
-/**
- * ═════════════════════════════════════════════════════════════
- * 📄 FILE     : ArcChartWrapper.ts
- * 📁 PACKAGE  : chart-toolbox
- * 👤 AUTHOR   : stz
- * 🕒 CREATED  : 25. 9. 28.
- * ═════════════════════════════════════════════════════════════
- * ═════════════════════════════════════════════════════════════
- * 📝 DESCRIPTION
- *   Arc Chart (Pie, Doughnut) 를 위한 추상 클래스
- * ═════════════════════════════════════════════════════════════
- * ═════════════════════════════════════════════════════════════
- * 🔄 CHANGE LOG
- *   - DATE : 2025/09/28 | Author : stz | 최초 생성
- * ═════════════════════════════════════════════════════════════
- */
-
 declare abstract class ArcChartWrapper<TType extends ArcChartType> extends ChartWrapper<TType> implements ArcChartBuilder<TType> {
     readonly type: TType;
     private _chartId?;
@@ -1312,6 +1396,7 @@ declare abstract class ArcChartWrapper<TType extends ArcChartType> extends Chart
     protected mustHavePlugins(): {
         id: string;
         afterDraw(chart: any, args: any, options: any): void;
+        afterDestroy(chart: chart_js.Chart): void;
     }[];
     protected normalize(): void;
     protected configAop(config: any): any;
@@ -1493,6 +1578,31 @@ declare class DoughnutChartWrapper extends ArcChartWrapper<'doughnut'> implement
      * @beta
      */
     setAllBorderColor(borderColor: string | string[]): this;
+    /**
+     * @description 도넛 중앙에 텍스트를 설정합니다.
+     * @param {{text: string | string[], color?: string, fontStyle?: string, sidePadding?: number, minFontSize?: number, maxFontSize?: number}} config
+     * @returns {this}
+     * @since 1.0.0
+     * @category plugin
+     * @example
+     * const chart = chartWrapper.create('doughnut', labels, datasets, options).setCenterText({
+     *   text: 'Center Text',
+     *   color: '#000',
+     *   fontStyle: 'Arial',
+     *   sidePadding: 20,
+     *   minFontSize: 12,
+     *   maxFontSize: 24
+     *   }).build('myDoughnutChart');
+     * @beta
+     */
+    setCenterText(config: {
+        text: string | string[];
+        color?: string;
+        fontStyle?: string;
+        sidePadding?: number;
+        minFontSize?: number;
+        maxFontSize?: number;
+    }): this;
 }
 
 declare const noDataPlugin: {
@@ -1506,9 +1616,17 @@ declare const zoomResetPlugin: {
     afterDraw(chart: any, args: any, options: any): void;
     afterEvent(chart: any, args: any): void;
 };
-declare const doughnutCenterTextPlugin: {
+declare function doughnutCenterTextPlugin(config: {
+    text: string | string[];
+    color?: string;
+    fontStyle?: string;
+    fontSize?: string;
+}): {
     id: string;
-    afterDraw(chart: any): void;
+    afterInit(chart: Chart): void;
+    afterUpdate(chart: Chart): void;
+    updatePosition(chart: Chart): void;
+    destroy(chart: Chart): void;
 };
 declare const loadingPlugin: {
     id: string;
@@ -1557,6 +1675,7 @@ declare const customLegend: {
 declare const chartMountPlugin: {
     id: string;
     afterDraw(chart: any, args: any, options: any): void;
+    afterDestroy(chart: Chart): void;
 };
 declare const blinkPlugin: Plugin$1;
 declare const makeCenterHtml: (percent: number, ok?: number, warn?: number, ng?: number) => string;
@@ -1705,4 +1824,4 @@ declare const T$: {
 };
 
 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 };
-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 };
+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 };