From 0964d568b183c631e20d4adec0b25539a8842519 Mon Sep 17 00:00:00 2001 From: jung-han Date: Tue, 24 Nov 2020 12:30:39 +0900 Subject: [PATCH] feat: addData API --- src/charts/areaChart.ts | 6 ++++- src/charts/barChart.ts | 4 +++ src/charts/boxPlotChart.ts | 4 +++ src/charts/bubbleChart.ts | 6 ++++- src/charts/columnChart.ts | 6 ++++- src/charts/columnLineChart.ts | 16 +++++++++++- src/charts/heatmapChart.ts | 4 +++ src/charts/lineAreaChart.ts | 15 ++++++++++- src/charts/lineChart.ts | 6 ++++- src/charts/lineScatterChart.ts | 6 ++++- src/charts/radarChart.ts | 4 +++ src/charts/scatterChart.ts | 11 +++++++- src/store/category.ts | 15 +++++++++-- src/store/seriesData.ts | 47 +++++++++++++++++++++++++++++++--- types/index.d.ts | 2 ++ 15 files changed, 139 insertions(+), 13 deletions(-) diff --git a/src/charts/areaChart.ts b/src/charts/areaChart.ts index 2084391e0..7f08bd52e 100644 --- a/src/charts/areaChart.ts +++ b/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 { resetButtonBrush, ]); } + + public addData = (data: AreaSeriesDataType[], category: string) => { + this.store.dispatch('addData', { data, category }); + }; } diff --git a/src/charts/barChart.ts b/src/charts/barChart.ts index 4b3b6e13d..b79f210c5 100644 --- a/src/charts/barChart.ts +++ b/src/charts/barChart.ts @@ -85,4 +85,8 @@ export default class BarChart extends Chart { dataLabelBrush, ]); } + + public addData = (data: BoxSeriesDataType[], category: string) => { + this.store.dispatch('addData', { data, category }); + }; } diff --git a/src/charts/boxPlotChart.ts b/src/charts/boxPlotChart.ts index aef6e9561..e64e265f2 100644 --- a/src/charts/boxPlotChart.ts +++ b/src/charts/boxPlotChart.ts @@ -69,4 +69,8 @@ export default class BoxPlotChart extends Chart { exportMenuBrush, ]); } + + public addData = (data: number[][], category: string) => { + this.store.dispatch('addData', { data, category }); + }; } diff --git a/src/charts/bubbleChart.ts b/src/charts/bubbleChart.ts index b877ed119..8fb7cafc5 100644 --- a/src/charts/bubbleChart.ts +++ b/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 { exportMenuBrush, ]); } + + public addData = (data: BubbleSeriesDataType[]) => { + this.store.dispatch('addData', { data }); + }; } diff --git a/src/charts/columnChart.ts b/src/charts/columnChart.ts index e0e73e4d1..2ed155234 100644 --- a/src/charts/columnChart.ts +++ b/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 { dataLabelBrush, ]); } + + public addData = (data: BoxSeriesDataType[], category: string) => { + this.store.dispatch('addData', { data, category }); + }; } diff --git a/src/charts/columnLineChart.ts b/src/charts/columnLineChart.ts index 6a6ea15fa..c08cb0fcb 100644 --- a/src/charts/columnLineChart.ts +++ b/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 { columnSeries.component[delegationMethod]({ mousePosition, responders: [] }, event); } } + + public addData = ( + data: BoxSeriesDataType[] | LineSeriesDataType[], + category: string, + chartType: 'line' | 'column' + ) => { + this.store.dispatch('addData', { data, category, chartType }); + }; } diff --git a/src/charts/heatmapChart.ts b/src/charts/heatmapChart.ts index 3efb82c6b..a7db26e72 100644 --- a/src/charts/heatmapChart.ts +++ b/src/charts/heatmapChart.ts @@ -88,4 +88,8 @@ export default class HeatmapChart extends Chart { spectrumLegendBrush, ]); } + + public addData = (data: HeatmapSeriesDataType, category: string) => { + this.store.dispatch('addData', { data, category }); + }; } diff --git a/src/charts/lineAreaChart.ts b/src/charts/lineAreaChart.ts index 0ff56ef5d..98d2f7409 100644 --- a/src/charts/lineAreaChart.ts +++ b/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 { resetButtonBrush, ]); } + + public addData = ( + data: LineSeriesDataType[] | AreaSeriesDataType[], + category: string, + chartType: 'line' | 'area' + ) => { + this.store.dispatch('addData', { data, category, chartType }); + }; } diff --git a/src/charts/lineChart.ts b/src/charts/lineChart.ts index ee99a8c3d..2c325726d 100644 --- a/src/charts/lineChart.ts +++ b/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 { resetButtonBrush, ]); } + + public addData = (data: LineSeriesDataType[], category?: string) => { + this.store.dispatch('addData', { data, category }); + }; } diff --git a/src/charts/lineScatterChart.ts b/src/charts/lineScatterChart.ts index ab0ac5f17..d58ad057a 100644 --- a/src/charts/lineScatterChart.ts +++ b/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 { scatterSeriesBrush, ]); } + + public addData = (data: CoordinateDataType[], chartType: 'line' | 'scatter') => { + this.store.dispatch('addData', { data, chartType }); + }; } diff --git a/src/charts/radarChart.ts b/src/charts/radarChart.ts index c88b03d48..1e3aa1bc0 100644 --- a/src/charts/radarChart.ts +++ b/src/charts/radarChart.ts @@ -65,4 +65,8 @@ export default class RadarChart extends Chart { axisBrush, ]); } + + public addData = (data: number[], category: string) => { + this.store.dispatch('addData', { data, category }); + }; } diff --git a/src/charts/scatterChart.ts b/src/charts/scatterChart.ts index 184af87bc..cf84835e1 100644 --- a/src/charts/scatterChart.ts +++ b/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 { scatterSeriesBrush, ]); } + + public addData = (data: CoordinateDataType[]) => { + this.store.dispatch('addData', { data }); + }; } diff --git a/src/store/category.ts b/src/store/category.ts index 8561ee933..a5c8ecef1 100644 --- a/src/store/category.ts +++ b/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); diff --git a/src/store/seriesData.ts b/src/store/seriesData.ts index f83fa88a9..4908988f0 100644 --- a/src/store/seriesData.ts +++ b/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() { diff --git a/types/index.d.ts b/types/index.d.ts index a42f8f677..be5bb1e29 100644 --- a/types/index.d.ts +++ b/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 {