feat: addData API

src/charts/areaChart.ts

@@ -29,7 +29,7 @@ import * as exportMenuBrush from '@src/brushes/exportMenu';
 import * as dataLabelBrush from '@src/brushes/dataLabel';
 import * as resetButtonBrush from '@src/brushes/resetButton';
 
-import { AreaChartOptions, AreaSeriesData, AreaSeriesType } from '@t/options';
+import { AreaChartOptions, AreaSeriesData, AreaSeriesDataType, AreaSeriesType } from '@t/options';
 
 export interface AreaChartProps {
   el: Element;
@@ -83,4 +83,8 @@ export default class AreaChart extends Chart<AreaChartOptions> {
       resetButtonBrush,
     ]);
   }
+
+  public addData = (data: AreaSeriesDataType[], category: string) => {
+    this.store.dispatch('addData', { data, category });
+  };
 }

src/charts/barChart.ts

@@ -85,4 +85,8 @@ export default class BarChart extends Chart<BarChartOptions> {
       dataLabelBrush,
     ]);
   }
+
+  public addData = (data: BoxSeriesDataType[], category: string) => {
+    this.store.dispatch('addData', { data, category });
+  };
 }

src/charts/boxPlotChart.ts

@@ -69,4 +69,8 @@ export default class BoxPlotChart extends Chart<BoxPlotChartOptions> {
       exportMenuBrush,
     ]);
   }
+
+  public addData = (data: number[][], category: string) => {
+    this.store.dispatch('addData', { data, category });
+  };
 }

src/charts/bubbleChart.ts

@@ -24,7 +24,7 @@ import * as legendBrush from '@src/brushes/legend';
 import * as labelBrush from '@src/brushes/label';
 import * as exportMenuBrush from '@src/brushes/exportMenu';
 
-import { BubbleSeriesData, BaseOptions, BubbleSeriesType } from '@t/options';
+import { BubbleSeriesData, BaseOptions, BubbleSeriesType, BubbleSeriesDataType } from '@t/options';
 
 export interface BubbleChartProps {
   el: Element;
@@ -71,4 +71,8 @@ export default class BubbleChart extends Chart<BaseOptions> {
       exportMenuBrush,
     ]);
   }
+
+  public addData = (data: BubbleSeriesDataType[]) => {
+    this.store.dispatch('addData', { data });
+  };
 }

src/charts/columnChart.ts

@@ -27,7 +27,7 @@ import * as labelBrush from '@src/brushes/label';
 import * as exportMenuBrush from '@src/brushes/exportMenu';
 import * as dataLabelBrush from '@src/brushes/dataLabel';
 
-import { ColumnChartOptions, BoxSeriesData } from '@t/options';
+import { ColumnChartOptions, BoxSeriesData, BoxSeriesDataType } from '@t/options';
 
 export interface ColumnChartProps {
   el: HTMLElement;
@@ -77,4 +77,8 @@ export default class ColumnChart extends Chart<ColumnChartOptions> {
       dataLabelBrush,
     ]);
   }
+
+  public addData = (data: BoxSeriesDataType[], category: string) => {
+    this.store.dispatch('addData', { data, category });
+  };
 }

src/charts/columnLineChart.ts

@@ -1,5 +1,11 @@
 import Chart from './chart';
-import { ColumnLineData, ColumnLineChartOptions, Point } from '@t/options';
+import {
+  ColumnLineData,
+  ColumnLineChartOptions,
+  Point,
+  LineSeriesDataType,
+  BoxSeriesDataType,
+} from '@t/options';
 import { RawSeries } from '@t/store/store';
 import stackSeriesData from '@src/store/stackSeriesData';
 import plot from '@src/store/plot';
@@ -109,4 +115,12 @@ export default class ColumnLineChart extends Chart<ColumnLineChartOptions> {
       columnSeries.component[delegationMethod]({ mousePosition, responders: [] }, event);
     }
   }
+
+  public addData = (
+    data: BoxSeriesDataType[] | LineSeriesDataType[],
+    category: string,
+    chartType: 'line' | 'column'
+  ) => {
+    this.store.dispatch('addData', { data, category, chartType });
+  };
 }

src/charts/heatmapChart.ts

@@ -88,4 +88,8 @@ export default class HeatmapChart extends Chart<HeatmapChartOptions> {
       spectrumLegendBrush,
     ]);
   }
+
+  public addData = (data: HeatmapSeriesDataType, category: string) => {
+    this.store.dispatch('addData', { data, category });
+  };
 }

src/charts/lineAreaChart.ts

@@ -29,7 +29,12 @@ import * as exportMenuBrush from '@src/brushes/exportMenu';
 import * as dataLabelBrush from '@src/brushes/dataLabel';
 import * as resetButtonBrush from '@src/brushes/resetButton';
 
-import { LineAreaChartOptions, LineAreaData } from '@t/options';
+import {
+  AreaSeriesDataType,
+  LineAreaChartOptions,
+  LineAreaData,
+  LineSeriesDataType,
+} from '@t/options';
 import { RawSeries } from '@t/store/store';
 
 export interface LineAreaChartProps {
@@ -82,4 +87,12 @@ export default class LineAreaChart extends Chart<LineAreaChartOptions> {
       resetButtonBrush,
     ]);
   }
+
+  public addData = (
+    data: LineSeriesDataType[] | AreaSeriesDataType[],
+    category: string,
+    chartType: 'line' | 'area'
+  ) => {
+    this.store.dispatch('addData', { data, category, chartType });
+  };
 }

src/charts/lineChart.ts

@@ -28,7 +28,7 @@ import * as exportMenuBrush from '@src/brushes/exportMenu';
 import * as dataLabelBrush from '@src/brushes/dataLabel';
 import * as resetButtonBrush from '@src/brushes/resetButton';
 
-import { LineChartOptions, LineSeriesData, LineSeriesType } from '@t/options';
+import { LineChartOptions, LineSeriesData, LineSeriesDataType, LineSeriesType } from '@t/options';
 
 export interface LineChartProps {
   el: Element;
@@ -82,4 +82,8 @@ export default class LineChart extends Chart<LineChartOptions> {
       resetButtonBrush,
     ]);
   }
+
+  public addData = (data: LineSeriesDataType[], category?: string) => {
+    this.store.dispatch('addData', { data, category });
+  };
 }

src/charts/lineScatterChart.ts

@@ -29,7 +29,7 @@ import * as dataLabelBrush from '@src/brushes/dataLabel';
 import * as resetButtonBrush from '@src/brushes/resetButton';
 import * as scatterSeriesBrush from '@src/brushes/scatterSeries';
 
-import { LineScatterChartOptions, LineScatterData } from '@t/options';
+import { CoordinateDataType, LineScatterChartOptions, LineScatterData } from '@t/options';
 import { RawSeries } from '@t/store/store';
 
 export interface LineScatterChartProps {
@@ -82,4 +82,8 @@ export default class LineScatterChart extends Chart<LineScatterChartOptions> {
       scatterSeriesBrush,
     ]);
   }
+
+  public addData = (data: CoordinateDataType[], chartType: 'line' | 'scatter') => {
+    this.store.dispatch('addData', { data, chartType });
+  };
 }

src/charts/radarChart.ts

@@ -65,4 +65,8 @@ export default class RadarChart extends Chart<RadarChartOptions> {
       axisBrush,
     ]);
   }
+
+  public addData = (data: number[], category: string) => {
+    this.store.dispatch('addData', { data, category });
+  };
 }

src/charts/scatterChart.ts

@@ -23,7 +23,12 @@ import * as labelBrush from '@src/brushes/label';
 import * as exportMenuBrush from '@src/brushes/exportMenu';
 import * as scatterSeriesBrush from '@src/brushes/scatterSeries';
 
-import { ScatterChartOptions, ScatterSeriesData, ScatterSeriesType } from '@t/options';
+import {
+  CoordinateDataType,
+  ScatterChartOptions,
+  ScatterSeriesData,
+  ScatterSeriesType,
+} from '@t/options';
 
 export interface ScatterChartProps {
   el: Element;
@@ -70,4 +75,8 @@ export default class ScatterChart extends Chart<ScatterChartOptions> {
       scatterSeriesBrush,
     ]);
   }
+
+  public addData = (data: CoordinateDataType[]) => {
+    this.store.dispatch('addData', { data });
+  };
 }

src/store/category.ts

@@ -40,9 +40,20 @@ const category: StoreModule = {
   }),
   action: {
     setCategory({ state }) {
-      const { rawCategories, zoomRange } = state;
-      let categories = rawCategories;
+      const { zoomRange } = state;
+      let categories = state.rawCategories;
+      if (zoomRange && Array.isArray(categories)) {
+        const [start, end] = zoomRange;
+        categories = categories.slice(start, end + 1);
+      }
 
+      state.categories = categories;
+
+      this.notify(state, 'categories');
+    },
+    updateCategoryForCoordinateData({ initStoreState, state }) {
+      const { zoomRange } = state;
+      let categories = makeRawCategories(initStoreState.series);
       if (zoomRange && Array.isArray(categories)) {
         const [start, end] = zoomRange;
         categories = categories.slice(start, end + 1);

src/store/seriesData.ts

@@ -1,9 +1,9 @@
-import { StoreModule, RawSeries, Series, Options, Categories } from '@t/store/store';
+import { StoreModule, RawSeries, Series, Options, Categories, ChartType } from '@t/store/store';
 import { extend } from '@src/store/store';
 import { deepCopy, getFirstValidValue, isNumber, isUndefined, range } from '@src/helpers/utils';
-import { LineTypeSeriesOptions, RangeDataType } from '@t/options';
+import { HeatmapCategoriesType, LineTypeSeriesOptions, RangeDataType } from '@t/options';
 import { makeRawCategories } from '@src/store/category';
-import { getCoordinateXValue } from '@src/helpers/coordinate';
+import { getCoordinateXValue, isCoordinateSeries } from '@src/helpers/coordinate';
 import { isZooming } from '@src/helpers/range';
 
 function initZoomRange(
@@ -68,6 +68,13 @@ function getDataInRange(
   return data.slice(startIdx, endIdx + 1);
 }
 
+function isCoordinateTypeSeries(series: Series, chartType?: ChartType) {
+  return (
+    isCoordinateSeries(series) &&
+    (isUndefined(chartType) || chartType === 'line' || chartType === 'scatter')
+  );
+}
+
 const seriesData: StoreModule = {
   name: 'seriesData',
   state: ({ series, categories, options }) => ({
@@ -152,6 +159,40 @@ const seriesData: StoreModule = {
 
       this.notify(state, 'zoomRange');
     },
+    addData({ state, initStoreState }, { data, category, chartType }) {
+      const { series } = initStoreState;
+      let { categories } = initStoreState;
+      categories = series.heatmap ? (categories as HeatmapCategoriesType).x : categories;
+      const coordinateChart = isCoordinateTypeSeries(state.series, chartType);
+
+      if (category && Array.isArray(categories)) {
+        const isExist = categories.some((c) => c === category);
+        if (!isExist) {
+          categories.push(category);
+        }
+      }
+
+      if (chartType) {
+        series[chartType].forEach((datum, idx) => {
+          datum.data.push(data[idx]);
+        });
+      } else {
+        const [seriesName] = Object.keys(initStoreState.series);
+
+        series[seriesName].forEach((datum, idx) => {
+          datum.data.push(data[idx]);
+        });
+      }
+
+      this.notify(state, 'series');
+      this.notify(state, 'rawCategories');
+      if (Array.isArray(state.zoomRange)) {
+        this.dispatch('resetZoom');
+      }
+      if (coordinateChart) {
+        this.dispatch('updateCategoryForCoordinateData');
+      }
+    },
   },
   observe: {
     updateSeriesData() {

types/index.d.ts

@@ -52,6 +52,8 @@ declare namespace tui {
 
 declare class BaseChart {
   public getCheckedLegend(): CheckedLegendType;
+
+  public addData(): void;
 }
 
 export class LineChart extends BaseChart {