@techie_doubts/tui.chart.2026 4.6.1

package/dist/esm/store/seriesData.js

@@ -0,0 +1,299 @@
+import { deepCopy, getFirstValidValue, includes, isBoolean, isNumber, isUndefined, range, } from "../helpers/utils";
+import { makeRawCategories } from "./category";
+import { getCoordinateXValue, isCoordinateSeries } from "../helpers/coordinate";
+import { isZooming } from "../helpers/range";
+import { message } from "../message";
+import { hasNestedPieSeries } from "../helpers/pieSeries";
+import { extend } from "./store";
+function initRange(series, categories) {
+    let rawCategoriesLength;
+    if (categories) {
+        rawCategoriesLength = Array.isArray(categories) ? categories.length : categories.x.length;
+    }
+    else {
+        rawCategoriesLength = Object.keys(makeRawCategories(series, categories)).length;
+    }
+    return [0, rawCategoriesLength - 1];
+}
+function initSelectionRange(series, options, categories) {
+    var _a;
+    if (!(series.line || series.area || series.column) ||
+        !((_a = options.series) === null || _a === void 0 ? void 0 : _a.rangeSelectable)) {
+        return;
+    }
+    return initRange(series, categories);
+}
+function initZoomRange(series, options, categories) {
+    var _a;
+    if (!(series.line || series.area) || !((_a = options.series) === null || _a === void 0 ? void 0 : _a.zoomable)) {
+        return;
+    }
+    return initRange(series, categories);
+}
+function initShiftRange(series, options, categories) {
+    var _a;
+    if (!(series.line || series.area || series.column || series.heatmap) ||
+        !((_a = options.series) === null || _a === void 0 ? void 0 : _a.shift)) {
+        return;
+    }
+    return initRange(series, categories);
+}
+function getCoordinateDataRange(data, rawCategories, zoomRange) {
+    const [zoomStart, zoomEnd] = zoomRange;
+    let start, end;
+    range(zoomStart, zoomEnd + 1).forEach((i) => {
+        const idx = data.findIndex((datum) => getCoordinateXValue(datum).toString() === rawCategories[i]);
+        if (idx !== -1) {
+            if (isUndefined(start)) {
+                start = idx;
+            }
+            if (!isUndefined(start)) {
+                end = Math.max(idx, (end !== null && end !== void 0 ? end : 0));
+            }
+        }
+    });
+    return [start, end];
+}
+function getSeriesColors(colors, colorIndex, size, isColorByCategories) {
+    return isColorByCategories ? colors.slice(0, size + 1) : colors[colorIndex % colors.length];
+}
+function getSeriesDataInRange(data, rawCategories, chartType, zoomRange) {
+    if (!zoomRange) {
+        return data;
+    }
+    let [startIdx, endIdx] = zoomRange;
+    const firstValidValue = getFirstValidValue(data);
+    const isCoordinateChart = chartType !== 'area' && !isUndefined(firstValidValue) && !isNumber(firstValidValue);
+    if (isCoordinateChart) {
+        [startIdx, endIdx] = getCoordinateDataRange(data, rawCategories, zoomRange);
+    }
+    else {
+        startIdx = startIdx > 1 ? startIdx - 1 : startIdx;
+        endIdx = endIdx < rawCategories.length - 1 ? endIdx + 1 : endIdx;
+    }
+    return data.slice(startIdx, endIdx + 1);
+}
+function isCoordinateTypeSeries(series, chartType) {
+    return (isCoordinateSeries(series) &&
+        (isUndefined(chartType) || chartType === 'line' || chartType === 'scatter'));
+}
+function isSeriesAlreadyExist(series, seriesName, data) {
+    return series[seriesName].some(({ label }) => label === data.name);
+}
+function isTreemapSeriesAlreadyExist(series, data) {
+    return series.treemap.some(({ label }) => label === data.label);
+}
+function isHeatmapSeriesAlreadyExist(categories, category) {
+    return includes(categories.y, category);
+}
+function initDisabledSeries(series) {
+    const nestedPieChart = hasNestedPieSeries(series);
+    const disabledSeries = [];
+    if (nestedPieChart) {
+        series.pie.forEach(({ data }) => {
+            data.forEach((datum) => {
+                if (isBoolean(datum.visible) && !datum.visible) {
+                    disabledSeries.push(datum.name);
+                }
+            });
+        });
+    }
+    else {
+        Object.keys(series).forEach((type) => {
+            series[type].forEach(({ name, visible }) => {
+                if (isBoolean(visible) && !visible) {
+                    disabledSeries.push(name);
+                }
+            });
+        });
+    }
+    return disabledSeries;
+}
+const seriesData = {
+    name: 'seriesData',
+    state: ({ series, categories, options }) => ({
+        rawCategories: makeRawCategories(series, categories),
+        series: Object.assign({}, series),
+        selectionRange: initSelectionRange(series, options, categories),
+        zoomRange: initZoomRange(series, options, categories),
+        shiftRange: initShiftRange(series, options, categories),
+        disabledSeries: initDisabledSeries(series),
+    }),
+    action: {
+        setSeriesData({ state, initStoreState }) {
+            const rawSeries = deepCopy(initStoreState.series);
+            const { disabledSeries, theme, zoomRange, rawCategories } = state;
+            const newSeriesData = {};
+            let colorIndex = 0;
+            Object.keys(rawSeries).forEach((seriesName) => {
+                var _a, _b, _c;
+                const { colors, iconTypes } = theme.series[seriesName];
+                let originSeriesData = rawSeries[seriesName].map((series) => {
+                    const isColorByCategories = !!series.colorByCategories;
+                    const size = isColorByCategories ? rawCategories.length : 1;
+                    const color = colors
+                        ? getSeriesColors(colors, colorIndex, size, isColorByCategories)
+                        : '';
+                    colorIndex += size;
+                    return Object.assign(Object.assign({}, series), { rawData: series.data, data: getSeriesDataInRange(series.data, rawCategories, seriesName, zoomRange), color });
+                });
+                if (seriesName === 'scatter') {
+                    originSeriesData = originSeriesData.map((series, idx) => (Object.assign(Object.assign({}, series), { iconType: iconTypes ? iconTypes[idx] : 'circle' })));
+                }
+                const seriesCount = originSeriesData.length;
+                const seriesGroupCount = (_c = (_b = (_a = originSeriesData[0]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length, (_c !== null && _c !== void 0 ? _c : 0));
+                const data = originSeriesData.filter(({ name }) => !disabledSeries.includes(name));
+                newSeriesData[seriesName] = {
+                    seriesCount,
+                    seriesGroupCount,
+                    data,
+                    colors,
+                };
+            });
+            extend(state.series, newSeriesData);
+        },
+        disableSeries({ state }, name) {
+            state.disabledSeries.push(name);
+            this.notify(state, 'disabledSeries');
+            if (state.series.bullet) {
+                this.dispatch('removeCategoryByName', name);
+            }
+        },
+        enableSeries({ state }, name) {
+            const index = state.disabledSeries.findIndex((disabled) => disabled === name);
+            state.disabledSeries.splice(index, 1);
+            this.notify(state, 'disabledSeries');
+            if (state.series.bullet) {
+                state.categories = state.series.bullet.data.map(({ name: seriesName }) => seriesName);
+                this.notify(state, 'axes');
+            }
+        },
+        selection({ state }, rangeCategories) {
+            const rawCategories = state.rawCategories;
+            state.selectionRange = rangeCategories.map((rangeCategory) => rawCategories.findIndex((category) => category === rangeCategory));
+            this.notify(state, 'selectionRange');
+        },
+        zoom({ state }, rangeCategories) {
+            const rawCategories = state.rawCategories;
+            state.zoomRange = rangeCategories.map((rangeCategory) => rawCategories.findIndex((category) => category === rangeCategory));
+            this.notify(state, 'zoomRange');
+        },
+        resetZoom({ state, initStoreState }) {
+            const { series, options } = initStoreState;
+            const rawCategories = state.rawCategories;
+            state.zoomRange = initZoomRange(series, options, rawCategories);
+            this.notify(state, 'zoomRange');
+        },
+        addData({ state, initStoreState }, { data, category, chartType }) {
+            const { series } = initStoreState;
+            const coordinateChart = isCoordinateTypeSeries(state.series, chartType);
+            let { categories } = initStoreState;
+            categories = series.heatmap ? categories.x : categories;
+            if (category && Array.isArray(categories)) {
+                const isExist = categories.some((c) => c === category);
+                if (!isExist) {
+                    categories.push(category);
+                    if (Array.isArray(state.shiftRange)) {
+                        const [start, end] = state.shiftRange;
+                        state.shiftRange = [start + 1, end + 1];
+                    }
+                }
+            }
+            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('initCategory');
+            }
+        },
+        addSeries({ state, initStoreState }, { data, chartType, category, }) {
+            const { series, categories } = initStoreState;
+            const coordinateChart = isCoordinateTypeSeries(state.series, chartType);
+            const seriesName = chartType || Object.keys(series)[0];
+            const isExist = isSeriesAlreadyExist(series, seriesName, data);
+            if (!isExist) {
+                series[seriesName].push(data);
+                if (Array.isArray(categories) && category) {
+                    categories.push(category);
+                }
+            }
+            this.dispatch('initThemeState');
+            this.dispatch('initLegendState');
+            this.notify(state, 'series');
+            if (coordinateChart || seriesName === 'bullet') {
+                this.dispatch('initCategory');
+            }
+        },
+        addHeatmapSeries({ state, initStoreState }, { data, category }) {
+            const { series, categories } = initStoreState;
+            const isExist = isHeatmapSeriesAlreadyExist(categories, category);
+            if (!isExist) {
+                series.heatmap.push({ data, yCategory: category });
+            }
+            if (!isExist && category) {
+                categories.y.push(category);
+                this.notify(state, 'rawCategories');
+            }
+            this.notify(state, 'series');
+            this.dispatch('initThemeState');
+            this.dispatch('initLegendState');
+        },
+        addTreemapSeries({ state, initStoreState }, { data }) {
+            const { series } = initStoreState;
+            const isExist = isTreemapSeriesAlreadyExist(series, data);
+            if (!isExist) {
+                series.treemap.push(data);
+            }
+            this.notify(state, 'series');
+            this.notify(state, 'treemapSeries');
+            this.dispatch('initThemeState');
+            this.dispatch('initLegendState');
+        },
+        setData({ state, initStoreState }, { series, categories }) {
+            initStoreState.series = series;
+            const isNestedPieChart = hasNestedPieSeries(series);
+            if (!isNestedPieChart) {
+                state.rawCategories = makeRawCategories(series, categories);
+            }
+            this.dispatch('initThemeState');
+            this.dispatch('initLegendState');
+        },
+        addOutlier({ state, initStoreState }, { seriesIndex, outliers }) {
+            var _a;
+            const { series } = initStoreState;
+            const seriesRawData = series.boxPlot[seriesIndex];
+            if (!seriesRawData) {
+                throw new Error(message.SERIES_INDEX_ERROR);
+            }
+            seriesRawData.outliers = [...(_a = seriesRawData.outliers, (_a !== null && _a !== void 0 ? _a : [])), ...outliers];
+            this.notify(state, 'series');
+        },
+    },
+    observe: {
+        updateSeriesData() {
+            this.dispatch('setSeriesData');
+        },
+    },
+    computed: {
+        isLineTypeSeriesZooming: ({ zoomRange, rawCategories }) => {
+            return isZooming(rawCategories, zoomRange);
+        },
+        viewRange: ({ zoomRange, shiftRange }) => {
+            return zoomRange || shiftRange;
+        },
+    },
+};
+export default seriesData;

package/dist/esm/store/stackSeriesData.d.ts

@@ -0,0 +1,8 @@
+import { StoreModule, StackDataType, StackGroupData, Options, Stack, StackSeries } from "../../types/store/store";
+import { StackOptionType } from "../../types/options";
+export declare function isPercentStack(stack?: Stack): boolean;
+export declare function isGroupStack(rawData: StackDataType): rawData is StackGroupData;
+export declare function hasPercentStackSeries(stackSeries: StackSeries): boolean;
+export declare function pickStackOption(options: Options): StackOptionType;
+declare const stackSeriesData: StoreModule;
+export default stackSeriesData;

package/dist/esm/store/stackSeriesData.js

@@ -0,0 +1,192 @@
+import { extend } from "./store";
+import { pickProperty, isObject, sum } from "../helpers/utils";
+export function isPercentStack(stack) {
+    var _a;
+    return !!(((_a = stack) === null || _a === void 0 ? void 0 : _a.type) === 'percent');
+}
+export function isGroupStack(rawData) {
+    return !Array.isArray(rawData);
+}
+export function hasPercentStackSeries(stackSeries) {
+    if (!stackSeries) {
+        return false;
+    }
+    return Object.keys(stackSeries).some((seriesName) => isPercentStack(stackSeries[seriesName].stack));
+}
+export function pickStackOption(options) {
+    return (pickProperty(options, ['series', 'stack']) ||
+        pickProperty(options, ['series', 'column', 'stack']) ||
+        pickProperty(options, ['series', 'area', 'stack']));
+}
+function makeStackData(seriesData) {
+    const seriesCount = seriesData.length;
+    const groupCountLengths = seriesData.map(({ rawData }) => rawData.length);
+    const seriesGroupCount = Math.max(...groupCountLengths);
+    const stackData = [];
+    for (let i = 0; i < seriesGroupCount; i += 1) {
+        const stackValues = [];
+        for (let j = 0; j < seriesCount; j += 1) {
+            stackValues.push(seriesData[j].rawData[i]);
+        }
+        stackData[i] = {
+            values: stackValues,
+            sum: sum(stackValues),
+            total: {
+                positive: sum(stackValues.filter((value) => value >= 0)),
+                negative: sum(stackValues.filter((value) => value < 0)),
+            },
+        };
+    }
+    return stackData;
+}
+function makeStackGroupData(seriesData) {
+    const stackData = {};
+    const stackGroupIds = [...new Set(seriesData.map(({ stackGroup }) => stackGroup))];
+    stackGroupIds.forEach((groupId) => {
+        const filtered = seriesData.filter(({ stackGroup }) => groupId === stackGroup);
+        stackData[groupId] = makeStackData(filtered);
+    });
+    return stackData;
+}
+function initializeStack(stackOption) {
+    if (!stackOption) {
+        return;
+    }
+    const defaultStackOption = {
+        type: 'normal',
+        connector: false,
+    };
+    if (isStackObject(stackOption)) {
+        return Object.assign(Object.assign({}, defaultStackOption), stackOption);
+    }
+    return defaultStackOption;
+}
+function isStackObject(stackOption) {
+    return isObject(stackOption);
+}
+function hasStackGrouped(seriesRawData) {
+    return seriesRawData.some((rawData) => rawData.hasOwnProperty('stackGroup'));
+}
+function getStackDataRangeValues(stackData) {
+    let values = [];
+    if (Array.isArray(stackData)) {
+        values = [0, ...getSumValues(stackData)];
+    }
+    else {
+        for (const groupId in stackData) {
+            if (Object.prototype.hasOwnProperty.call(stackData, groupId)) {
+                values = [0, ...values, ...getSumValues(stackData[groupId])];
+            }
+        }
+    }
+    return values;
+}
+function getSumValues(stackData) {
+    const positiveSum = stackData.map(({ total }) => total.positive);
+    const negativeSum = stackData.map(({ total }) => total.negative);
+    return [...negativeSum, ...positiveSum];
+}
+function getStackDataValues(stackData) {
+    if (!isGroupStack(stackData)) {
+        return stackData;
+    }
+    let stackDataValues = [];
+    if (isGroupStack(stackData)) {
+        Object.keys(stackData).forEach((groupId) => {
+            stackDataValues = [...stackDataValues, ...stackData[groupId]];
+        });
+    }
+    return stackDataValues;
+}
+function checkIfNegativeAndPositiveValues(stackData) {
+    return {
+        hasNegative: stackData.map(({ total }) => total.negative).some((total) => total < 0),
+        hasPositive: stackData.map(({ total }) => total.positive).some((total) => total >= 0),
+    };
+}
+function getScaleType(stackData, stackType, diverging) {
+    const { hasPositive, hasNegative } = checkIfNegativeAndPositiveValues(stackData);
+    if (stackType === 'percent') {
+        if (diverging) {
+            return 'divergingPercentStack';
+        }
+        if (hasNegative && hasPositive) {
+            return 'dualPercentStack';
+        }
+        if (!hasNegative && hasPositive) {
+            return 'percentStack';
+        }
+        if (hasNegative && !hasPositive) {
+            return 'minusPercentStack';
+        }
+    }
+}
+function initStackSeries(series, options) {
+    const stackSeries = {};
+    Object.keys(series).forEach((seriesName) => {
+        const chartType = seriesName;
+        const stackOption = pickStackOption(options);
+        if (stackOption) {
+            if (!stackSeries[chartType]) {
+                stackSeries[chartType] = {};
+            }
+            stackSeries[chartType].stack = initializeStack(stackOption);
+        }
+        else if (seriesName === 'radialBar') {
+            stackSeries[seriesName] = { stack: true };
+        }
+    });
+    return stackSeries;
+}
+const stackSeriesData = {
+    name: 'stackSeriesData',
+    state: ({ series, options }) => ({
+        stackSeries: initStackSeries(series, options),
+    }),
+    action: {
+        setStackSeriesData({ state }) {
+            const { series, stackSeries, options } = state;
+            const stackOption = pickStackOption(options);
+            const newStackSeries = {};
+            Object.keys(series).forEach((seriesName) => {
+                var _a, _b;
+                const seriesData = series[seriesName];
+                const { data, seriesCount, seriesGroupCount } = seriesData;
+                const isRadialBar = seriesName === 'radialBar';
+                if (stackOption) {
+                    if (!stackSeries[seriesName]) {
+                        stackSeries[seriesName] = {};
+                    }
+                    stackSeries[seriesName].stack = initializeStack(stackOption);
+                }
+                else if (!isRadialBar) {
+                    stackSeries[seriesName] = null;
+                    delete stackSeries[seriesName];
+                }
+                const { stack } = stackSeries[seriesName] || {};
+                const diverging = !!((_a = options.series) === null || _a === void 0 ? void 0 : _a.diverging);
+                if (stack) {
+                    const stackData = hasStackGrouped(data) ? makeStackGroupData(data) : makeStackData(data);
+                    const stackType = (_b = stack.type, (_b !== null && _b !== void 0 ? _b : 'normal'));
+                    const dataRangeValues = getStackDataRangeValues(stackData);
+                    newStackSeries[seriesName] = {
+                        data,
+                        seriesCount,
+                        seriesGroupCount,
+                        stackData,
+                        dataRangeValues,
+                        scaleType: getScaleType(getStackDataValues(stackData), stackType, diverging),
+                    };
+                    state.stackSeries[seriesName].stackData = stackData;
+                }
+                extend(state.stackSeries, newStackSeries);
+            });
+        },
+    },
+    observe: {
+        updateStackSeriesData() {
+            this.dispatch('setStackSeriesData');
+        },
+    },
+};
+export default stackSeriesData;

package/dist/esm/store/store.d.ts

@@ -0,0 +1,20 @@
+import { ChartState, InitStoreState, ActionFunc, StoreOptions, ComputedFunc, WatchFunc, StoreModule, ObserveFunc, Options } from "../../types/store/store";
+export default class Store<T extends Options> {
+    state: ChartState<T>;
+    initStoreState: InitStoreState<T>;
+    computed: Record<string, any>;
+    actions: Record<string, ActionFunc>;
+    constructor(initStoreState: InitStoreState<T>);
+    setRootState(state: Partial<ChartState<T>>): void;
+    setComputed(namePath: string, fn: ComputedFunc, holder?: any): void;
+    setWatch(namePath: string, fn: WatchFunc): Function | null;
+    setAction(name: string, fn: ActionFunc): void;
+    dispatch(name: string, payload?: any, isInvisible?: boolean): void;
+    observe(fn: ObserveFunc): Function;
+    observable(target: Record<string, any>): Record<string, any>;
+    notifyByPath(namePath: string): void;
+    notify<T extends Record<string, any>, K extends keyof T>(target: T, key: K): void;
+    setModule(name: string | StoreModule, param?: StoreOptions | StoreModule): void;
+    setValue(target: Record<string, any>, key: string, source: Record<string, any>): void;
+}
+export declare function extend<T extends Record<string, any>>(target: T, source: Partial<T>): void;

package/dist/esm/store/store.js

@@ -0,0 +1,112 @@
+import { observable, observe, notify, notifyByPath, computed, watch, extend as reactiveExtend, invisibleWork, } from "./reactive";
+import { isUndefined, forEach, pickPropertyWithMakeup, deepCopy } from "../helpers/utils";
+export default class Store {
+    constructor(initStoreState) {
+        this.computed = {};
+        this.actions = {};
+        this.initStoreState = deepCopy(initStoreState);
+        this.setRootState({});
+    }
+    setRootState(state) {
+        observable(state);
+        this.state = state;
+    }
+    setComputed(namePath, fn, holder = this.computed) {
+        const splited = namePath.split('.');
+        const key = splited.splice(splited.length - 1, 1)[0];
+        const target = pickPropertyWithMakeup(holder, splited);
+        computed(target, key, fn.bind(null, this.state, this.computed));
+    }
+    setWatch(namePath, fn) {
+        return watch(this, namePath, fn);
+    }
+    setAction(name, fn) {
+        this.actions[name] = fn;
+    }
+    dispatch(name, payload, isInvisible) {
+        // observe.setlayout 안에서 setLayout 액션이 실행되니까 여기서 state.layout getter가 실행되고
+        // state.layout의 옵져버로 observe.setLayout이 등록된다. 여기서 무한루프
+        // 즉 observe하고 안에서 특정 대상을 쓸때
+        // extend(state.layout, layouts); 이런식으로 하게되면 layout의 getter실행되어
+        // layout을 업데이트하려고 만든 observe를 옵저버로 등록해서 무한루프
+        if (isInvisible) {
+            invisibleWork(() => {
+                // console.log('dispatch', name, ...args);
+                this.actions[name].call(this, this, payload);
+                // console.log('dispatch end', name);
+            });
+        }
+        else {
+            this.actions[name].call(this, this, payload);
+        }
+    }
+    observe(fn) {
+        return observe(fn.bind(this, this.state, this.computed));
+    }
+    observable(target) {
+        return observable(target);
+    }
+    notifyByPath(namePath) {
+        notifyByPath(this, namePath);
+    }
+    notify(target, key) {
+        notify(target, key);
+    }
+    setModule(name, param) {
+        if (!param) {
+            param = name;
+            name = param.name;
+        }
+        if (param.state) {
+            const moduleState = typeof param.state === 'function' ? param.state(this.initStoreState) : param.state;
+            extend(this.state, moduleState);
+        }
+        if (param.computed) {
+            forEach(param.computed, (item, key) => {
+                this.setComputed(key, item);
+            });
+        }
+        if (param.watch) {
+            forEach(param.watch, (item, key) => {
+                this.setWatch(key, item);
+            });
+        }
+        if (param.action) {
+            forEach(param.action, (item, key) => {
+                this.setAction(key, item);
+            });
+        }
+        if (param.observe) {
+            forEach(param.observe, (item) => {
+                this.observe(item);
+            });
+        }
+    }
+    setValue(target, key, source) {
+        extend(target, {
+            [key]: source,
+        });
+    }
+}
+export function extend(target, source) {
+    const newItems = {};
+    for (const k in source) {
+        if (!source.hasOwnProperty(k)) {
+            continue;
+        }
+        if (!isUndefined(target[k])) {
+            if (typeof source[k] === 'object' && !Array.isArray(source[k])) {
+                extend(target[k], source[k]);
+            }
+            else {
+                target[k] = source[k];
+            }
+        }
+        else {
+            newItems[k] = source[k];
+        }
+    }
+    if (Object.keys(newItems).length) {
+        reactiveExtend(target, newItems);
+    }
+}

package/dist/esm/store/theme.d.ts

@@ -0,0 +1,3 @@
+import { StoreModule } from "../../types/store/store";
+declare const theme: StoreModule;
+export default theme;