stz-chart-maker 1.7.1 → 2.0.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ChartTypeRegistry, ChartType, ChartDataset, GridLineOptions, FontSpec, Tick, PluginOptionsByType, ChartOptions, Chart, ChartEvent, ActiveElement, LegendOptions, Plugin as Plugin$1, TooltipItem } from 'chart.js';
+import { ChartTypeRegistry, ChartType, ChartDataset, GridLineOptions, FontSpec, Tick, PluginOptionsByType, Chart, ChartOptions, ChartEvent, ActiveElement, LegendOptions, Plugin as Plugin$1, TooltipItem } from 'chart.js';
 import { TreemapControllerDatasetOptions } from 'chartjs-chart-treemap';
 import { ZoomPluginOptions } from 'chartjs-plugin-zoom/types/options';
 
@@ -189,7 +189,7 @@ interface CommonAxes {
     weight: number;
 }
 interface CommonCartesianAxes extends Omit<CommonAxes, 'ticks'>, Partial<CommonCartesian> {
-    type: 'category' | 'linear' | 'logarithmic' | 'time' | 'timeseries';
+    type: 'category' | 'linear' | 'logarithmic' | 'time' | 'timeseries' | 'realtime';
     ticks?: CommonCartesianTicks;
 }
 type DeepPartialCartesianAxes = DeepPartial<CommonCartesianAxes>;
@@ -257,6 +257,54 @@ interface DataLabels {
 }
 type PartialDataLabels = Partial<DataLabels>;
 
+/**
+ * `chartjs-plugin-streaming`의 옵션을 정의합니다.
+ * `addStreaming` 메서드에 이 타입의 객체를 전달하여 스트리밍 동작을 설정합니다.
+ * @see https://github.com/nagix/chartjs-plugin-streaming
+ */
+interface StreamingOptions {
+    /**
+     * 차트에 데이터가 표시되는 시간 (밀리초 단위).
+     */
+    duration?: number;
+    /**
+     * 차트가 업데이트되는 간격 (밀리초 단위).
+     */
+    refresh?: number;
+    /**
+     * 데이터 추가 시 발생하는 지연 시간 (밀리초 단위).
+     */
+    delay?: number;
+    /**
+     * 애니메이션 프레임당 업데이트 여부.
+     */
+    frame?: boolean;
+    /**
+     * 차트 업데이트를 일시 중지할지 여부.
+     */
+    pause?: boolean;
+    /**
+     * 데이터가 차트에 머무는 시간 (Time to Live). `duration`과 유사합니다.
+     */
+    ttl?: number;
+    /**
+     * 차트가 새로고침될 때 호출되는 콜백 함수.
+     * 이 함수 안에서 데이터 소스(WebSocket, API 등)로부터 받은 데이터를
+     * 차트의 데이터셋에 추가해야 합니다.
+     *
+     * @example
+     * onRefresh: (chart) => {
+     *   chart.data.datasets.forEach(dataset => {
+     *     dataset.data.push({
+     *       x: Date.now(),
+     *       y: Math.random()
+     *     });
+     *   });
+     * }
+     */
+    onRefresh?: (chart: Chart) => void;
+}
+
 /**
  * ═════════════════════════════════════════════════════════════
  * 📄 FILE     : options.ts
@@ -328,6 +376,7 @@ type HtmlLegendOptions = {
 type CustomOptionPlugins<TType extends ChartType = ChartType> = DeepPartial<PluginOptionsByType<TType>> & {
     zoom?: DeepPartialZoomType;
     datalabels?: PartialDataLabels;
+    streaming?: StreamingOptions;
     settingsIcon?: {
         iconSize?: Record<'w' | 'h', number>;
         img?: string;
@@ -743,6 +792,34 @@ declare abstract class ChartWrapper<TType extends ChartType, TOptions extends Cu
      * @beta
      */
     setChartData(uid: string, newDataset: CustomChartDatasets<TType>): void;
+    /**
+     * @description 실시간 스트리밍 옵션을 설정합니다.
+     * 이 메서드를 사용하기 전에, 사용자는 'chartjs-plugin-streaming'을 설치하고 Chart.js에 직접 등록해야 합니다.
+     * @param {StreamingOptions} streamingOptions - `chartjs-plugin-streaming` 플러그인에 전달할 옵션 객체.
+     * @returns {this}
+     * @since 1.8.0
+     * @category plugin
+     * @example
+     * // 1. 사용자 측에서 웹소켓 등 데이터 소스 설정
+     * const myWebSocket = new WebSocket('wss://my-data-source');
+     *
+     * // 2. ChartWrapper에 스트리밍 옵션 적용
+     * chart.addStreaming({
+     *   duration: 20000, // 20초 분량의 데이터를 차트에 표시
+     *   refresh: 1000,    // 1초마다 차트 업데이트
+     *   onRefresh: (chart) => {
+     *     // 3. 데이터 소스로부터 받은 데이터를 차트에 추가
+     *     myWebSocket.onmessage = (event) => {
+     *       const data = JSON.parse(event.data);
+     *       chart.data.datasets[0].data.push({
+     *         x: data.timestamp,
+     *         y: data.value
+     *       });
+     *     };
+     *   }
+     * });
+     */
+    addStreaming(streamingOptions: StreamingOptions): this;
 }
 
 interface AxisColors {