@techie_doubts/tui.chart.2026 4.6.1

package/dist/esm/component/component.js

@@ -0,0 +1,170 @@
+import { getFirstValidValue, includes, isNumber } from "../helpers/utils";
+import { setSplineControlPoint } from "../helpers/calculator";
+import { isSameArray } from "../helpers/arrayUtil";
+export default class Component {
+    constructor({ store, eventBus }) {
+        this.name = 'Component';
+        this.type = 'component';
+        this.rect = {
+            x: 0,
+            y: 0,
+            height: 0,
+            width: 0,
+        };
+        this.isShow = true;
+        this.store = store;
+        this.eventBus = eventBus;
+    }
+    update(delta) {
+        if (!this.drawModels) {
+            return;
+        }
+        if (Array.isArray(this.models)) {
+            this.updateModels(this.drawModels, this.models, delta);
+        }
+        else {
+            Object.keys(this.models).forEach((type) => {
+                const currentModels = this.drawModels[type];
+                const targetModels = this.models[type];
+                this.updateModels(currentModels, targetModels, delta);
+            });
+        }
+    }
+    initUpdate(delta) {
+        this.update(delta);
+    }
+    updateModels(currentModels, targetModels, delta) {
+        currentModels.forEach((current, index) => {
+            const target = targetModels[index];
+            Object.keys(current).forEach((key) => {
+                var _a;
+                if (!current || !target) {
+                    return;
+                }
+                if (key[0] !== '_') {
+                    if (isNumber(current[key])) {
+                        current[key] = current[key] + (target[key] - current[key]) * delta;
+                    }
+                    else if (key === 'points') {
+                        const matchedModel = this.getCurrentModelToMatchTargetModel(current[key], current[key], target[key]);
+                        const newPoints = matchedModel.map((curPoint, idx) => {
+                            const next = target[key][idx];
+                            if (curPoint && next) {
+                                const { x, y } = curPoint;
+                                const { x: nextX, y: nextY } = next;
+                                return Object.assign(Object.assign({}, next), { x: x + (nextX - x) * delta, y: y + (nextY - y) * delta });
+                            }
+                            return next;
+                        });
+                        if ((_a = this.store.state.options.series) === null || _a === void 0 ? void 0 : _a.spline) {
+                            setSplineControlPoint(newPoints);
+                        }
+                        current[key] = newPoints;
+                    }
+                    else {
+                        current[key] = target[key];
+                    }
+                }
+            });
+        });
+    }
+    sync() {
+        if (!this.drawModels) {
+            return;
+        }
+        if (Array.isArray(this.models)) {
+            this.syncModels(this.drawModels, this.models);
+        }
+        else if (!Object.keys(this.models).length) {
+            this.drawModels = this.models;
+        }
+        else {
+            Object.keys(this.models).forEach((type) => {
+                const currentModels = this.drawModels[type];
+                const targetModels = this.models[type];
+                this.syncModels(currentModels, targetModels, type);
+            });
+        }
+    }
+    getCurrentModelToMatchTargetModel(models, currentModels, targetModels) {
+        var _a;
+        if (!models || !currentModels) {
+            return [...targetModels];
+        }
+        if ((_a = getFirstValidValue(targetModels)) === null || _a === void 0 ? void 0 : _a.name) {
+            const modelNames = [...new Set(models.map(({ name }) => name))];
+            const targetNames = [...new Set(targetModels.map(({ name }) => name))];
+            const same = isSameArray(modelNames, targetNames);
+            if (!same) {
+                return this.getCurrentModelWithDifferentModel(models, currentModels, targetModels, modelNames, targetNames);
+            }
+        }
+        const currentLength = currentModels.length;
+        const targetLength = targetModels.length;
+        if (currentLength < targetLength) {
+            return [...currentModels, ...targetModels.slice(currentLength, targetLength)];
+        }
+        if (currentLength > targetLength) {
+            return currentModels.slice(0, targetLength);
+        }
+        return models;
+    }
+    getCurrentModelWithDifferentModel(models, currentModels, targetModels, modelNames, targetNames) {
+        const currentLength = currentModels.length;
+        const targetLength = targetModels.length;
+        if (currentLength > targetLength) {
+            const newModels = models.filter(({ name }) => includes(targetNames, name));
+            return newModels.length !== targetModels.length ? targetModels : newModels;
+        }
+        if (currentLength < targetLength) {
+            const notIncludedModels = targetModels.reduce((acc, cur, idx) => {
+                const notIncluded = !includes(modelNames, cur.name);
+                return notIncluded
+                    ? {
+                        models: [...acc.models, cur],
+                        modelIdx: [...acc.modelIdx, idx],
+                    }
+                    : acc;
+            }, { models: [], modelIdx: [] });
+            if (models.length + notIncludedModels.models.length === targetLength) {
+                const newModels = [...models];
+                notIncludedModels.models.forEach((model, idx) => {
+                    newModels.splice(notIncludedModels.modelIdx[idx], 0, model);
+                });
+                return newModels;
+            }
+            return targetModels;
+        }
+        return models;
+    }
+    syncModels(currentModels, targetModels, type) {
+        const drawModels = type ? this.drawModels[type] : this.drawModels;
+        const model = this.getCurrentModelToMatchTargetModel(drawModels, currentModels, targetModels);
+        if (type) {
+            this.drawModels[type] = model;
+        }
+        else {
+            this.drawModels = model;
+        }
+    }
+    getSelectableOption(options) {
+        var _a, _b, _c;
+        return _c = (_b = (_a = options) === null || _a === void 0 ? void 0 : _a.series) === null || _b === void 0 ? void 0 : _b.selectable, (_c !== null && _c !== void 0 ? _c : false);
+    }
+    renderDataLabels(data, name) {
+        setTimeout(() => {
+            this.eventBus.emit('renderDataLabels', { data, name: (name !== null && name !== void 0 ? name : this.name) });
+        }, 0);
+    }
+    draw(painter) {
+        const models = this.drawModels ? this.drawModels : this.models;
+        if (Array.isArray(models)) {
+            painter.paintForEach(models);
+        }
+        else if (models) {
+            Object.keys(models).forEach((item) => {
+                painter.paintForEach(models[item]);
+            });
+        }
+    }
+}

package/dist/esm/component/componentManager.d.ts

@@ -0,0 +1,23 @@
+import { FunctionPropertyNames } from "../../types/store/store";
+import Store from "../store/store";
+import EventEmitter from "../eventEmitter";
+import Component from "./component";
+declare type ComponentConstructor<T> = new ({ store, eventBus, }: {
+    store: Store<T>;
+    eventBus: EventEmitter;
+}) => Component;
+export default class ComponentManager<T> {
+    components: Component[];
+    store: Store<T>;
+    eventBus: EventEmitter;
+    constructor({ store, eventBus }: {
+        store: Store<T>;
+        eventBus: EventEmitter;
+    });
+    add(ComponentCtor: ComponentConstructor<T>, initialParam?: any): void;
+    remove(ComponentCtor: ComponentConstructor<T>): void;
+    clear(): void;
+    invoke(method: FunctionPropertyNames<Component>, params: any): void;
+    forEach(iteratee: (component: Component, index: number) => void): void;
+}
+export {};

package/dist/esm/component/componentManager.js

@@ -0,0 +1,45 @@
+import { debounce } from "../helpers/utils";
+export default class ComponentManager {
+    constructor({ store, eventBus }) {
+        this.components = [];
+        this.store = store;
+        this.eventBus = eventBus;
+    }
+    add(ComponentCtor, initialParam) {
+        const component = new ComponentCtor({
+            store: this.store,
+            eventBus: this.eventBus,
+        });
+        if (component.initialize) {
+            component.initialize(initialParam);
+        }
+        let proc = (...args) => {
+            component.render(args[0], args[1]); // rest쓰면 에러남
+            component.sync();
+            this.eventBus.emit('needLoop');
+        };
+        this.store.observe((...args) => {
+            proc(...args);
+        });
+        proc = debounce(proc);
+        this.components.push(component);
+    }
+    remove(ComponentCtor) {
+        this.components = this.components.filter((component) => !(component instanceof ComponentCtor));
+    }
+    clear() {
+        this.components = [];
+        this.eventBus.emit('needDraw');
+    }
+    invoke(method, params) {
+        this.components.forEach((component) => {
+            const fn = component[method];
+            if (fn) {
+                fn.call(component, params);
+            }
+        });
+    }
+    forEach(iteratee) {
+        this.components.forEach(iteratee);
+    }
+}

package/dist/esm/component/dataLabels.d.ts

@@ -0,0 +1,23 @@
+import Component from "./component";
+import { ChartState, Options, OptionsWithDataLabels, Series, NestedPieSeriesDataType } from "../../types/store/store";
+import { DataLabelModels, DataLabel, DataLabelsMap, SeriesDataLabels, DataLabelSeriesType } from "../../types/components/dataLabels";
+declare type SeriesDataLabel = {
+    data: SeriesDataLabels;
+    name: DataLabelSeriesType;
+};
+export default class DataLabels extends Component {
+    models: DataLabelModels;
+    drawModels: DataLabelModels;
+    options: OptionsWithDataLabels;
+    dataLabelsMap: DataLabelsMap;
+    initialize(): void;
+    initUpdate(delta: number): void;
+    render({ layout, options, series, nestedPieSeries }: ChartState<Options>): void;
+    visibleDataLabels(series: Series, nestedPieSeries?: Record<string, NestedPieSeriesDataType>): boolean;
+    renderSeriesDataLabels: (seriesDataLabel: SeriesDataLabel) => void;
+    appendDataLabels({ name, data }: SeriesDataLabel): void;
+    private getDrawModelsAppliedOpacity;
+    renderLabelModel(): DataLabelModels;
+    makeLabelModel(dataLabels: DataLabel[]): DataLabelModels;
+}
+export {};

package/dist/esm/component/dataLabels.js

@@ -0,0 +1,134 @@
+import Component from "./component";
+import { isUndefined } from "../helpers/utils";
+import { isModelExistingInRect } from "../helpers/coordinate";
+import { getDataLabelsOptions, getDefaultDataLabelsOptions, makePointLabelInfo, makeSectorLabelInfo, makePieSeriesNameLabelInfo, makeRectLabelInfo, makeLineLabelInfo, makeSectorBarLabelInfo, } from "../helpers/dataLabels";
+import { pickStackOption } from "../store/stackSeriesData";
+function getLabelInfo(model, labelOptions, rect, name) {
+    var _a;
+    const { type } = model;
+    const dataLabel = [];
+    if (type === 'point') {
+        dataLabel.push(makePointLabelInfo(model, labelOptions, rect));
+    }
+    else if (type === 'sector') {
+        if (name === 'radialBar') {
+            dataLabel.push(makeSectorBarLabelInfo(model, labelOptions));
+        }
+        else {
+            dataLabel.push(makeSectorLabelInfo(model, labelOptions));
+            if ((_a = labelOptions.pieSeriesName) === null || _a === void 0 ? void 0 : _a.visible) {
+                const seriesNameLabel = makePieSeriesNameLabelInfo(model, labelOptions);
+                dataLabel.push(seriesNameLabel);
+            }
+        }
+    }
+    else if (type === 'line') {
+        dataLabel.push(makeLineLabelInfo(model, labelOptions));
+    }
+    else {
+        dataLabel.push(makeRectLabelInfo(model, labelOptions));
+    }
+    return dataLabel;
+}
+export default class DataLabels extends Component {
+    constructor() {
+        super(...arguments);
+        this.dataLabelsMap = {};
+        this.renderSeriesDataLabels = (seriesDataLabel) => {
+            this.appendDataLabels(seriesDataLabel);
+            this.models = this.renderLabelModel();
+            if (!this.drawModels) {
+                this.drawModels = this.getDrawModelsAppliedOpacity(0);
+            }
+            else {
+                this.sync();
+            }
+        };
+    }
+    initialize() {
+        this.type = 'dataLabels';
+        this.name = 'dataLabels';
+        this.eventBus.on('renderDataLabels', this.renderSeriesDataLabels);
+    }
+    initUpdate(delta) {
+        if (!this.drawModels) {
+            return;
+        }
+        this.drawModels = this.getDrawModelsAppliedOpacity(delta);
+    }
+    render({ layout, options, series, nestedPieSeries }) {
+        this.rect = layout.plot;
+        this.options = options;
+        this.isShow = this.visibleDataLabels(series, nestedPieSeries);
+    }
+    visibleDataLabels(series, nestedPieSeries) {
+        var _a, _b;
+        const visibleCommonSeriesDataLabels = !!((_b = (_a = this.options.series) === null || _a === void 0 ? void 0 : _a.dataLabels) === null || _b === void 0 ? void 0 : _b.visible);
+        const visibleComboSeriesDataLabels = Object.keys(series).some((seriesName) => { var _a, _b, _c; return !!((_c = (_b = (_a = this.options.series) === null || _a === void 0 ? void 0 : _a[seriesName]) === null || _b === void 0 ? void 0 : _b.dataLabels) === null || _c === void 0 ? void 0 : _c.visible); });
+        const visibleNestedPieSeriesDataLabels = !!(nestedPieSeries &&
+            Object.keys(nestedPieSeries).some((alias) => {
+                var _a, _b, _c;
+                return !!((_c = (_b = (_a = this.options.series) === null || _a === void 0 ? void 0 : _a[alias]) === null || _b === void 0 ? void 0 : _b.dataLabels) === null || _c === void 0 ? void 0 : _c.visible);
+            }));
+        return (visibleCommonSeriesDataLabels ||
+            visibleComboSeriesDataLabels ||
+            visibleNestedPieSeriesDataLabels);
+    }
+    appendDataLabels({ name, data }) {
+        const dataLabelOptions = getDataLabelsOptions(this.options, name);
+        const withStack = !!pickStackOption(this.options);
+        const labels = [];
+        data.forEach((model) => {
+            var _a;
+            const { type, value } = model;
+            const labelOptions = getDefaultDataLabelsOptions(dataLabelOptions, type, withStack);
+            const disableStackTotal = type === 'stackTotal' && !((_a = labelOptions.stackTotal) === null || _a === void 0 ? void 0 : _a.visible);
+            if (disableStackTotal || isUndefined(value)) {
+                return;
+            }
+            labels.splice(labels.length, 0, ...getLabelInfo(model, labelOptions, this.rect, name));
+        });
+        this.dataLabelsMap[name] = { data: labels, options: dataLabelOptions };
+    }
+    getDrawModelsAppliedOpacity(opacity) {
+        return Object.keys(this.models).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: this.models[key].map((m) => (Object.assign(Object.assign({}, m), { opacity }))) })), { series: [], total: [] });
+    }
+    renderLabelModel() {
+        return Object.keys(this.dataLabelsMap)
+            .map((seriesName) => {
+            const { data } = this.dataLabelsMap[seriesName];
+            return this.makeLabelModel(data);
+        })
+            .reduce((acc, cur) => ({
+            series: [...acc.series, ...cur.series],
+            total: [...acc.total, ...cur.total],
+        }), { series: [], total: [] });
+    }
+    makeLabelModel(dataLabels) {
+        return dataLabels.reduce((acc, dataLabel) => {
+            var _a;
+            const { type, x, y, text, textAlign, textBaseline, name, callout, theme, radian, } = dataLabel;
+            if (!isModelExistingInRect(this.rect, { x, y })) {
+                return acc;
+            }
+            const modelName = type === 'stackTotal' ? 'total' : 'series';
+            return Object.assign(Object.assign({}, acc), { [modelName]: [
+                    ...(_a = acc[modelName], (_a !== null && _a !== void 0 ? _a : [])),
+                    {
+                        type: 'dataLabel',
+                        dataLabelType: type,
+                        text,
+                        x,
+                        y,
+                        textAlign,
+                        textBaseline,
+                        opacity: 1,
+                        name,
+                        callout,
+                        theme,
+                        radian,
+                    },
+                ] });
+        }, { series: [], total: [] });
+    }
+}

package/dist/esm/component/exportMenu.d.ts

@@ -0,0 +1,38 @@
+import Component from "./component";
+import { Categories, ChartState, Options, Series } from "../../types/store/store";
+import { ExportMenuModels } from "../../types/components/exportMenu";
+import { TitleOption } from "../../types/options";
+import { RectResponderModel } from "../../types/components/series";
+import { ExportMenuTheme } from "../../types/theme";
+export declare const BUTTON_RECT_SIZE = 24;
+export interface DataToExport {
+    series: Series;
+    categories?: Categories;
+}
+export default class ExportMenu extends Component {
+    responders: RectResponderModel[];
+    models: ExportMenuModels;
+    opened: boolean;
+    fileName: string;
+    data: DataToExport;
+    chartEl: HTMLDivElement;
+    exportMenuEl: HTMLDivElement;
+    theme: Required<ExportMenuTheme>;
+    chartBackgroundColor: string;
+    chartWidth: number;
+    toggleExportMenu: () => void;
+    getCanvasExportBtnRemoved: () => HTMLCanvasElement;
+    onClickExportButton: (ev: any) => void;
+    applyExportButtonPanelStyle(): void;
+    makeExportMenuButton(): HTMLDivElement;
+    initialize({ chartEl }: {
+        chartEl: any;
+    }): void;
+    onClick({ responders }: {
+        responders: RectResponderModel[];
+    }): void;
+    getFileName(title?: string | TitleOption): string;
+    render({ options, layout, chart, series, rawCategories, theme }: ChartState<Options>): void;
+    applyPanelWrapperStyle(): void;
+    makePanelStyle(type: 'header' | 'body'): string;
+}

package/dist/esm/component/exportMenu.js

@@ -0,0 +1,147 @@
+import Component from "./component";
+import { isExportMenuVisible, padding } from "../store/layout";
+import { execDownload, downloadSpreadSheet } from "../helpers/downloader";
+import { isString } from "../helpers/utils";
+import { getFontStyleString, getTranslateString } from "../helpers/style";
+const EXPORT_MENU_WIDTH = 140;
+const exportExtensions = {
+    IMAGES: ['png', 'jpeg'],
+    SPREAD_SHEETS: ['xls', 'csv'],
+};
+export const BUTTON_RECT_SIZE = 24;
+export default class ExportMenu extends Component {
+    constructor() {
+        super(...arguments);
+        this.models = { exportMenuButton: [] };
+        this.opened = false;
+        this.chartWidth = 0;
+        this.toggleExportMenu = () => {
+            this.opened = !this.opened;
+            this.models.exportMenuButton[0].opened = this.opened;
+            this.eventBus.emit('needDraw');
+            if (this.opened) {
+                this.applyPanelWrapperStyle();
+                this.chartEl.appendChild(this.exportMenuEl);
+            }
+            else {
+                this.chartEl.removeChild(this.exportMenuEl);
+            }
+        };
+        this.getCanvasExportBtnRemoved = () => {
+            const canvas = this.chartEl.getElementsByTagName('canvas')[0];
+            const ctx = canvas.getContext('2d');
+            const { x, y, height: h, width: w } = this.rect;
+            ctx.clearRect(x, y, w, h);
+            ctx.fillStyle = this.chartBackgroundColor;
+            ctx.fillRect(x, y, w, h);
+            return canvas;
+        };
+        this.onClickExportButton = (ev) => {
+            const { id } = ev.target;
+            const isImageExtension = exportExtensions.IMAGES.includes(id);
+            const isSpreadSheetExtension = exportExtensions.SPREAD_SHEETS.includes(id);
+            if (isImageExtension) {
+                const canvas = this.getCanvasExportBtnRemoved();
+                execDownload(this.fileName, id, canvas.toDataURL(`image/${id}`, 1));
+            }
+            else if (isSpreadSheetExtension) {
+                downloadSpreadSheet(this.fileName, id, this.data);
+            }
+            if (isImageExtension || isSpreadSheetExtension) {
+                this.toggleExportMenu();
+            }
+        };
+    }
+    applyExportButtonPanelStyle() {
+        const exportMenuTitle = this.exportMenuEl.querySelector('.td-chart-export-menu-title');
+        const menuBtnWrapper = this.exportMenuEl.querySelector('.td-chart-export-menu-btn-wrapper');
+        exportMenuTitle.setAttribute('style', this.makePanelStyle('header'));
+        menuBtnWrapper.setAttribute('style', this.makePanelStyle('body'));
+    }
+    makeExportMenuButton() {
+        const el = document.createElement('div');
+        el.onclick = this.onClickExportButton;
+        el.innerHTML = `
+        <div class="td-chart-export-menu">
+          <p class="td-chart-export-menu-title">Export to</p>
+          <div class="td-chart-export-menu-btn-wrapper">
+            <button class="td-chart-export-menu-btn" id="xls">xls</button>
+            <button class="td-chart-export-menu-btn" id="csv">csv</button>
+            <button class="td-chart-export-menu-btn" id="png">png</button>
+            <button class="td-chart-export-menu-btn" id="jpeg">jpeg</button>
+          </div>
+        </div>
+      `;
+        return el;
+    }
+    initialize({ chartEl }) {
+        this.chartEl = chartEl;
+        this.type = 'exportMenu';
+        this.name = 'exportMenu';
+        this.exportMenuEl = this.makeExportMenuButton();
+    }
+    onClick({ responders }) {
+        if (responders.length) {
+            this.toggleExportMenu();
+        }
+    }
+    getFileName(title) {
+        var _a, _b;
+        return isString(title) ? title : (_b = (_a = title) === null || _a === void 0 ? void 0 : _a.text, (_b !== null && _b !== void 0 ? _b : 'toast-ui-chart'));
+    }
+    render({ options, layout, chart, series, rawCategories, theme }) {
+        var _a, _b;
+        this.isShow = isExportMenuVisible(options);
+        this.chartWidth = chart.width;
+        if (!this.isShow) {
+            return;
+        }
+        this.chartBackgroundColor = theme.chart.backgroundColor;
+        this.theme = theme.exportMenu;
+        this.data = { series, categories: rawCategories };
+        this.fileName = this.getFileName(((_b = (_a = options) === null || _a === void 0 ? void 0 : _a.exportMenu) === null || _b === void 0 ? void 0 : _b.filename) || chart.title);
+        this.applyExportButtonPanelStyle();
+        this.rect = layout.exportMenu;
+        this.models.exportMenuButton = [
+            {
+                type: 'exportMenuButton',
+                x: 0,
+                y: 0,
+                opened: this.opened,
+                theme: this.theme.button,
+            },
+        ];
+        this.responders = [
+            {
+                type: 'rect',
+                width: BUTTON_RECT_SIZE,
+                height: BUTTON_RECT_SIZE,
+                x: 0,
+                y: 0,
+            },
+        ];
+    }
+    applyPanelWrapperStyle() {
+        const exportMenu = this.exportMenuEl.querySelector('.td-chart-export-menu');
+        const x = this.chartWidth - EXPORT_MENU_WIDTH - padding.X;
+        const y = padding.Y + BUTTON_RECT_SIZE + 5;
+        const { borderRadius, borderWidth, borderColor } = this.theme.panel;
+        const style = `
+      transform: ${getTranslateString(x, y)};
+      border: ${borderWidth}px solid ${borderColor};
+      border-radius: ${borderRadius}px;`;
+        exportMenu.setAttribute('style', style);
+    }
+    makePanelStyle(type) {
+        const sectionTheme = this.theme.panel[type];
+        const direction = type === 'header' ? 'top' : 'bottom';
+        const { borderRadius, borderWidth } = this.theme.panel;
+        const borderRadiusPx = `${borderRadius - borderWidth}px`;
+        return [
+            `${getFontStyleString(sectionTheme)}`,
+            `border-${direction}-left-radius: ${borderRadiusPx};`,
+            `border-${direction}-right-radius: ${borderRadiusPx};`,
+            `background-color: ${sectionTheme.backgroundColor};`,
+        ].join('');
+    }
+}