@techie_doubts/tui.chart.2026 4.6.1

package/dist/esm/component/title.js

@@ -0,0 +1,53 @@
+import Component from "./component";
+import { isString } from "../helpers/utils";
+import { getTextWidth } from "../helpers/calculator";
+import { getTitleFontString } from "../helpers/style";
+export default class Title extends Component {
+    initialize() {
+        this.type = 'title';
+        this.name = 'title';
+    }
+    renderTitle(options) {
+        var _a, _b, _c;
+        let text = '';
+        let x = 0;
+        let y = 0;
+        let align = 'left';
+        if (isString(options)) {
+            text = options;
+        }
+        else {
+            text = options.text;
+            align = (_a = options.align, (_a !== null && _a !== void 0 ? _a : 'left'));
+            x += (_b = options.offsetX, (_b !== null && _b !== void 0 ? _b : 0));
+            y += (_c = options.offsetY, (_c !== null && _c !== void 0 ? _c : 0));
+        }
+        const font = getTitleFontString(this.theme);
+        const textWidth = getTextWidth(text, font);
+        if (align === 'center') {
+            x += (this.rect.width - textWidth) / 2;
+        }
+        else if (align === 'right') {
+            x += this.rect.width - textWidth;
+        }
+        return [
+            {
+                type: 'label',
+                x,
+                y,
+                text,
+                style: ['title', { font, fillStyle: this.theme.color }],
+            },
+        ];
+    }
+    render({ options, layout, theme }) {
+        var _a;
+        this.isShow = !!((_a = options.chart) === null || _a === void 0 ? void 0 : _a.title);
+        if (!this.isShow) {
+            return;
+        }
+        this.theme = theme.title;
+        this.rect = layout.title;
+        this.models = this.renderTitle(options.chart.title);
+    }
+}

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

@@ -0,0 +1,41 @@
+import Component from "./component";
+import { ChartState, Options } from "../../types/store/store";
+import { TooltipInfo, TooltipModel, TooltipDataValue, TooltipModelName, TooltipData } from "../../types/components/tooltip";
+import { TooltipTemplateFunc, TooltipFormatter } from "../../types/options";
+import { TooltipTheme } from "../../types/theme";
+declare type TooltipInfoModels = {
+    [key in TooltipModelName]: TooltipInfo[];
+};
+export default class Tooltip extends Component {
+    chartEl: HTMLDivElement;
+    tooltipContainerEl: HTMLDivElement;
+    templateFunc: TooltipTemplateFunc;
+    theme: Required<TooltipTheme>;
+    offsetX: number;
+    offsetY: number;
+    formatter?: TooltipFormatter;
+    tooltipInfoModels: TooltipInfoModels;
+    onSeriesPointHovered: ({ models, name }: {
+        models: TooltipInfo[];
+        name: TooltipModelName;
+    }) => void;
+    isTooltipContainerOverflow(x: number, y: number): {
+        overflowX: boolean;
+        overflowY: boolean;
+    };
+    getPositionInRect(model: TooltipModel): {
+        x: number;
+        y: number;
+    };
+    setTooltipPosition(model: TooltipModel): void;
+    getTooltipInfoModels(): TooltipInfo[];
+    renderTooltip(): void;
+    initialize({ chartEl }: {
+        chartEl: any;
+    }): void;
+    removeTooltip(): void;
+    private setTooltipTransition;
+    render({ layout, options, theme }: ChartState<Options>): void;
+    getFormattedValue(value: TooltipDataValue, tooltipDataInfo: TooltipData): string;
+}
+export {};

package/dist/esm/component/tooltip.js

@@ -0,0 +1,131 @@
+import Component from "./component";
+import { getValueString } from "../helpers/tooltip";
+import { getBodyTemplate, tooltipTemplates } from "../helpers/tooltipTemplate";
+import { isBoolean, isNumber, isString } from "../helpers/utils";
+import { getTranslateString } from "../helpers/style";
+import { sanitizeHTML } from "../helpers/htmlSanitizer";
+const DEFAULT_TOOLTIP_TRANSITION = 'transform 0.2s ease';
+export default class Tooltip extends Component {
+    constructor() {
+        super(...arguments);
+        this.tooltipInfoModels = {};
+        this.onSeriesPointHovered = ({ models, name }) => {
+            var _a;
+            this.tooltipInfoModels[name] = ((_a = models) === null || _a === void 0 ? void 0 : _a.length) ? [...models] : [];
+            const isShow = !!this.getTooltipInfoModels().length;
+            if (isShow) {
+                this.renderTooltip();
+            }
+            else {
+                this.removeTooltip();
+            }
+        };
+    }
+    isTooltipContainerOverflow(x, y) {
+        const { width, height } = this.tooltipContainerEl.getBoundingClientRect();
+        const { x: rectX, y: rectY, width: rectWidth, height: rectHeight } = this.rect;
+        return {
+            overflowX: x > rectX + rectWidth || x + width > rectX + rectWidth,
+            overflowY: y > rectY + rectHeight || y + height > rectY + rectHeight,
+        };
+    }
+    getPositionInRect(model) {
+        const { target } = model;
+        const startX = this.rect.x + model.x;
+        const startY = this.rect.y + model.y;
+        let x = startX + target.radius + target.width + this.offsetX;
+        let y = startY + this.offsetY;
+        const { overflowX, overflowY } = this.isTooltipContainerOverflow(x, y);
+        const { width, height } = this.tooltipContainerEl.getBoundingClientRect();
+        if (overflowX) {
+            x =
+                startX - (width + target.radius + this.offsetX) > 0
+                    ? startX - (width + target.radius + this.offsetX)
+                    : startX + this.offsetX;
+        }
+        if (overflowY) {
+            y =
+                startY + target.height - (height + this.offsetY) > 0
+                    ? startY + target.height - (height + this.offsetY)
+                    : y;
+        }
+        return { x, y };
+    }
+    setTooltipPosition(model) {
+        const { x, y } = this.getPositionInRect(model);
+        this.tooltipContainerEl.style.transform = getTranslateString(x, y);
+    }
+    getTooltipInfoModels() {
+        return Object.values(this.tooltipInfoModels).flatMap((item) => item);
+    }
+    renderTooltip() {
+        const model = this.getTooltipInfoModels().reduce((acc, item) => {
+            const { data, x, y, radius, width, height } = item;
+            acc.x = acc.x ? (acc.x + x) / 2 : x;
+            acc.y = acc.y ? (acc.y + y) / 2 : y;
+            if (isNumber(radius)) {
+                acc.target.radius = radius;
+            }
+            if (width) {
+                acc.target.width = width;
+            }
+            if (height) {
+                acc.target.height = height;
+            }
+            acc.data.push(Object.assign(Object.assign({}, data), { value: Array.isArray(data.value)
+                    ? data.value.map((titleValue) => (Object.assign(Object.assign({}, titleValue), { formattedValue: this.getFormattedValue(titleValue.value, data) })))
+                    : data.value, formattedValue: this.getFormattedValue(data.value, data) }));
+            if (!acc.category && data.category) {
+                acc.category = data.category;
+            }
+            if (data.templateType) {
+                acc.templateType = data.templateType;
+            }
+            return acc;
+        }, { type: 'tooltip', x: 0, y: 0, data: [], target: { radius: 0, width: 0, height: 0 } });
+        this.tooltipContainerEl.innerHTML = sanitizeHTML(this.templateFunc(model, {
+            header: tooltipTemplates.defaultHeader(model, this.theme),
+            body: getBodyTemplate(model.templateType)(model, this.theme),
+        }, this.theme));
+        this.setTooltipPosition(model);
+    }
+    initialize({ chartEl }) {
+        this.type = 'tooltip';
+        this.name = 'tooltip';
+        this.chartEl = chartEl;
+        this.tooltipContainerEl = document.createElement('div');
+        this.tooltipContainerEl.classList.add('td-chart-tooltip-container');
+        const { width, height, top, left } = this.chartEl.getBoundingClientRect();
+        this.tooltipContainerEl.style.transform = getTranslateString(left + width / 2, top + height / 2);
+        this.chartEl.appendChild(this.tooltipContainerEl);
+        this.eventBus.on('seriesPointHovered', this.onSeriesPointHovered);
+    }
+    removeTooltip() {
+        this.tooltipContainerEl.innerHTML = '';
+    }
+    setTooltipTransition(options) {
+        var _a;
+        const transition = (_a = options.tooltip) === null || _a === void 0 ? void 0 : _a.transition;
+        if (isBoolean(transition) && transition) {
+            this.tooltipContainerEl.style.transition = DEFAULT_TOOLTIP_TRANSITION;
+        }
+        else if (isString(transition)) {
+            this.tooltipContainerEl.style.transition = transition;
+        }
+    }
+    render({ layout, options, theme }) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        this.setTooltipTransition(options);
+        this.rect = layout.plot;
+        this.theme = theme.tooltip;
+        this.templateFunc = (_c = (_b = (_a = options) === null || _a === void 0 ? void 0 : _a.tooltip) === null || _b === void 0 ? void 0 : _b.template, (_c !== null && _c !== void 0 ? _c : tooltipTemplates['default']));
+        this.offsetX = (_f = (_e = (_d = options) === null || _d === void 0 ? void 0 : _d.tooltip) === null || _e === void 0 ? void 0 : _e.offsetX, (_f !== null && _f !== void 0 ? _f : 10));
+        this.offsetY = (_j = (_h = (_g = options) === null || _g === void 0 ? void 0 : _g.tooltip) === null || _h === void 0 ? void 0 : _h.offsetY, (_j !== null && _j !== void 0 ? _j : 0));
+        this.formatter = (_l = (_k = options) === null || _k === void 0 ? void 0 : _k.tooltip) === null || _l === void 0 ? void 0 : _l.formatter;
+    }
+    getFormattedValue(value, tooltipDataInfo) {
+        return this.formatter
+            ? this.formatter(value, tooltipDataInfo)
+            : getValueString(value);
+    }
+}

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

@@ -0,0 +1,57 @@
+import Component from "./component";
+import { Rect, TreemapChartOptions } from "../../types/options";
+import { ChartState, ScaleData, TreemapSeriesData } from "../../types/store/store";
+import { TreemapRectModel, TreemapRectResponderModel, TreemapSeriesModels } from "../../types/components/series";
+import { BoundMap } from "../helpers/squarifier";
+import { TooltipData } from "../../types/components/tooltip";
+import { RespondersThemeType } from "../helpers/responders";
+import { RectDataLabel } from "../../types/components/dataLabels";
+import { TreemapChartSeriesTheme } from "../../types/theme";
+import { SelectSeriesHandlerParams } from "../charts/chart";
+export default class TreemapSeries extends Component {
+    models: TreemapSeriesModels;
+    responders: TreemapRectResponderModel[];
+    theme: Required<TreemapChartSeriesTheme>;
+    activatedResponders: TreemapRectResponderModel[];
+    zoomable: boolean;
+    initialize(): void;
+    private getAllChildSeries;
+    render(chartState: ChartState<TreemapChartOptions>): void;
+    makeTreemapSeriesResponder(treemapCurrentDepthParentId: string): TreemapRectResponderModel[];
+    private makeTooltipData;
+    makeBoundMap(series: TreemapSeriesData[], parentId: string, layout: Rect, boundMap?: BoundMap): BoundMap;
+    makeDataLabel(useTreemapLeaf: boolean, treemapCurrentDepthParentId: string): RectDataLabel[];
+    getColor(treemapSeries: TreemapSeriesData, colors: string[]): string;
+    getOpacity(treemapSeries: TreemapSeriesData): number;
+    renderTreemapSeries(seriesData: TreemapSeriesData[], options: TreemapChartOptions, colorValueScale: ScaleData, treemapCurrentDepthParentId: string): {
+        series: TreemapRectModel[];
+        layer: TreemapRectModel[];
+    };
+    getRespondersWithTheme(responders: TreemapRectResponderModel[], type: RespondersThemeType): ((Pick<TreemapRectModel, "width" | "height" | "color" | "label" | "style" | "x" | "y" | "opacity" | "type" | "thickness" | "colorRatio" | "id" | "parentId" | "hasChild" | "indexes" | "depth" | "ratio" | "colorValue"> & {
+        index?: number | undefined;
+        data?: Partial<TooltipData> | undefined;
+    } & import("../../types/options").Point & import("../../types/options").Size & {
+        style: string[];
+        color?: string | undefined;
+        borderColor?: string | undefined;
+        borderWidth?: number | undefined;
+    }) | (Pick<TreemapRectModel, "width" | "height" | "color" | "label" | "style" | "x" | "y" | "opacity" | "type" | "thickness" | "colorRatio" | "id" | "parentId" | "hasChild" | "indexes" | "depth" | "ratio" | "colorValue"> & {
+        index?: number | undefined;
+        data?: Partial<TooltipData> | undefined;
+    } & import("../../types/options").Point & import("../../types/options").Size & {
+        style: string[];
+        color?: string | undefined;
+        borderColor?: string | undefined;
+        borderWidth?: number | undefined;
+    }))[];
+    onClick({ responders }: {
+        responders: any;
+    }): void;
+    onMouseoutComponent: () => void;
+    onMousemove({ responders }: {
+        responders: any;
+    }): void;
+    emitMouseEvent(responders: TreemapRectResponderModel[]): void;
+    selectSeries: ({ seriesIndex }: SelectSeriesHandlerParams<TreemapChartOptions>) => void;
+    showTooltip: ({ seriesIndex }: SelectSeriesHandlerParams<TreemapChartOptions>) => void;
+}

package/dist/esm/component/treemapSeries.js

@@ -0,0 +1,191 @@
+import Component from "./component";
+import { squarify } from "../helpers/squarifier";
+import { getRGBA, hexToRGB } from "../helpers/color";
+import { getDeepestNode } from "../helpers/responders";
+import { getDataLabelsOptions } from "../helpers/dataLabels";
+import { deepMergedCopy, first, isNumber, last } from "../helpers/utils";
+import { getColorRatio, getSpectrumColor, makeDistances } from "../helpers/colorSpectrum";
+import { boxDefault } from "../helpers/theme";
+import { message } from "../message";
+export default class TreemapSeries extends Component {
+    constructor() {
+        super(...arguments);
+        this.models = { series: [], layer: [] };
+        this.activatedResponders = [];
+        this.onMouseoutComponent = () => {
+            this.emitMouseEvent([]);
+        };
+        this.selectSeries = ({ seriesIndex }) => {
+            if (!isNumber(seriesIndex)) {
+                return;
+            }
+            const model = this.responders.find(({ indexes }) => last(indexes) === seriesIndex);
+            if (!model) {
+                throw new Error(message.SELECT_SERIES_API_INDEX_ERROR);
+            }
+            const models = this.getRespondersWithTheme([model], 'select');
+            this.eventBus.emit('renderSelectedSeries', { models, name: this.name });
+            this.eventBus.emit('needDraw');
+        };
+        this.showTooltip = ({ seriesIndex }) => {
+            if (!isNumber(seriesIndex)) {
+                return;
+            }
+            const model = this.responders.find(({ indexes }) => last(indexes) === seriesIndex);
+            if (model) {
+                this.emitMouseEvent([model]);
+            }
+        };
+    }
+    initialize() {
+        this.type = 'series';
+        this.name = 'treemap';
+        this.eventBus.on('selectSeries', this.selectSeries);
+        this.eventBus.on('showTooltip', this.showTooltip);
+        this.eventBus.on('hideTooltip', this.onMouseoutComponent);
+    }
+    getAllChildSeries(series, parentId) {
+        const allChildSeries = [];
+        series.forEach((data) => {
+            if (data.parentId === parentId) {
+                allChildSeries.push(data);
+                if (data.hasChild) {
+                    const res = this.getAllChildSeries(series, data.id);
+                    allChildSeries.push(...res);
+                }
+            }
+        });
+        return allChildSeries;
+    }
+    render(chartState) {
+        var _a, _b, _c, _d, _e;
+        const { layout, treemapSeries, colorValueScale, options, theme, treemapZoomId } = chartState;
+        if (!treemapSeries) {
+            throw new Error(message.noDataError(this.name));
+        }
+        const currentTreemapZoomId = treemapZoomId.cur;
+        const series = this.getAllChildSeries(treemapSeries, currentTreemapZoomId);
+        this.theme = theme.series.treemap;
+        this.rect = layout.plot;
+        this.selectable = this.getSelectableOption(options);
+        this.models = this.renderTreemapSeries(series, options, colorValueScale, currentTreemapZoomId);
+        this.zoomable = (_b = (_a = options.series) === null || _a === void 0 ? void 0 : _a.zoomable, (_b !== null && _b !== void 0 ? _b : false));
+        if (getDataLabelsOptions(options, this.name).visible) {
+            const useTreemapLeaf = (_e = (_d = (_c = options.series) === null || _c === void 0 ? void 0 : _c.dataLabels) === null || _d === void 0 ? void 0 : _d.useTreemapLeaf, (_e !== null && _e !== void 0 ? _e : false));
+            const dataLabelModel = this.makeDataLabel(useTreemapLeaf, currentTreemapZoomId);
+            this.renderDataLabels(dataLabelModel);
+        }
+        this.responders = this.makeTreemapSeriesResponder(currentTreemapZoomId);
+    }
+    makeTreemapSeriesResponder(treemapCurrentDepthParentId) {
+        const tooltipData = this.makeTooltipData();
+        let { series } = this.models;
+        if (this.zoomable) {
+            series = series.filter(({ parentId }) => parentId === treemapCurrentDepthParentId);
+        }
+        return series.map((m, idx) => (Object.assign(Object.assign({}, m), { data: tooltipData[idx], thickness: boxDefault.HOVER_THICKNESS, style: ['shadow'] })));
+    }
+    makeTooltipData() {
+        return this.models.series.map(({ label, data, color }) => ({
+            label: label,
+            color,
+            value: data,
+        }));
+    }
+    makeBoundMap(series, parentId, layout, boundMap = {}) {
+        const seriesItems = series.filter((item) => item.parentId === parentId);
+        boundMap = Object.assign(Object.assign({}, boundMap), squarify(Object.assign({}, layout), seriesItems));
+        seriesItems.forEach((seriesItem) => {
+            boundMap = this.makeBoundMap(series, seriesItem.id, boundMap[seriesItem.id], boundMap);
+        });
+        return boundMap;
+    }
+    makeDataLabel(useTreemapLeaf, treemapCurrentDepthParentId) {
+        const series = useTreemapLeaf
+            ? this.models.series.filter(({ hasChild }) => !hasChild)
+            : this.models.series.filter(({ parentId }) => parentId === treemapCurrentDepthParentId);
+        const dataLabelTheme = this.theme.dataLabels;
+        return series.map((m) => (Object.assign(Object.assign({}, m), { type: 'treemapSeriesName', value: m.label, direction: 'left', plot: { x: 0, y: 0, size: 0 }, theme: Object.assign(Object.assign({}, dataLabelTheme), { color: dataLabelTheme.useSeriesColor ? m.color : dataLabelTheme.color }) })));
+    }
+    getColor(treemapSeries, colors) {
+        const { indexes } = treemapSeries;
+        const colorIdx = first(indexes);
+        return colors[colorIdx];
+    }
+    getOpacity(treemapSeries) {
+        const { indexes, depth } = treemapSeries;
+        const idx = last(indexes);
+        return indexes.length === 1 ? 0 : Number((0.1 * depth + 0.05 * idx).toFixed(2));
+    }
+    renderTreemapSeries(seriesData, options, colorValueScale, treemapCurrentDepthParentId) {
+        var _a, _b, _c;
+        let layer = [];
+        const boundMap = this.makeBoundMap(seriesData, treemapCurrentDepthParentId, Object.assign(Object.assign({}, this.rect), { x: 0, y: 0 }));
+        const { colors, startColor, endColor, borderWidth, borderColor } = this.theme;
+        let startRGB, distances;
+        const useColorValue = (_b = (_a = options.series) === null || _a === void 0 ? void 0 : _a.useColorValue, (_b !== null && _b !== void 0 ? _b : false));
+        if (useColorValue && startColor && endColor) {
+            startRGB = hexToRGB(startColor);
+            distances = makeDistances(startRGB, hexToRGB(endColor));
+        }
+        const series = Object.keys(boundMap).map((id) => {
+            const treemapSeries = seriesData.find((item) => item.id === id);
+            let colorRatio;
+            if (useColorValue) {
+                colorRatio = getColorRatio(colorValueScale.limit, treemapSeries.colorValue);
+            }
+            return Object.assign(Object.assign(Object.assign({}, treemapSeries), boundMap[id]), { type: 'rect', colorRatio, color: useColorValue
+                    ? getSpectrumColor(colorRatio, distances, startRGB)
+                    : this.getColor(treemapSeries, colors), opacity: useColorValue ? 0 : this.getOpacity(treemapSeries), thickness: borderWidth, borderColor: borderColor });
+        });
+        if (!((_c = options.series) === null || _c === void 0 ? void 0 : _c.useColorValue)) {
+            layer = series.map((m) => (Object.assign(Object.assign({}, m), { color: getRGBA('#000000', m.opacity) })));
+        }
+        return { series, layer };
+    }
+    getRespondersWithTheme(responders, type) {
+        return responders.map((responder) => deepMergedCopy(responder, Object.assign(Object.assign({}, this.theme[type]), { style: ['shadow'] })));
+    }
+    onClick({ responders }) {
+        if (responders.length) {
+            if (this.zoomable) {
+                const { id, hasChild } = responders[0];
+                if (hasChild) {
+                    this.emitMouseEvent([]);
+                    this.store.dispatch('setTreemapZoomId', id);
+                    this.eventBus.emit('resetSelectedSeries');
+                }
+                else if (this.selectable) {
+                    this.eventBus.emit('renderSelectedSeries', {
+                        models: this.getRespondersWithTheme(responders, 'select'),
+                        name: this.name,
+                    });
+                }
+            }
+            else if (this.selectable) {
+                const deepestNode = getDeepestNode(responders);
+                this.eventBus.emit('renderSelectedSeries', {
+                    models: this.getRespondersWithTheme(deepestNode, 'select'),
+                    name: this.name,
+                });
+            }
+        }
+    }
+    onMousemove({ responders }) {
+        const deepestNode = getDeepestNode(responders);
+        this.activatedResponders = deepestNode;
+        this.emitMouseEvent(deepestNode);
+    }
+    emitMouseEvent(responders) {
+        this.eventBus.emit('renderHoveredSeries', {
+            models: this.getRespondersWithTheme(responders, 'hover'),
+            name: this.name,
+        });
+        this.eventBus.emit('seriesPointHovered', {
+            models: responders,
+            name: this.name,
+        });
+        this.eventBus.emit('renderSpectrumTooltip', responders);
+        this.eventBus.emit('needDraw');
+    }
+}

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

@@ -0,0 +1,9 @@
+import Component from "./component";
+import { LineModel } from "../../types/components/axis";
+import { ChartState, Options } from "../../types/store/store";
+export default class ZeroAxis extends Component {
+    models: LineModel[];
+    initialize(): void;
+    render({ layout, axes, series, options }: ChartState<Options>): void;
+    renderZeroModel(zeroPosition: number, vertical: boolean): LineModel[];
+}

package/dist/esm/component/zeroAxis.js

@@ -0,0 +1,49 @@
+import Component from "./component";
+import { isLabelAxisOnYAxis } from "../helpers/axes";
+import { crispPixel } from "../helpers/calculator";
+import { isNumber } from "../helpers/utils";
+export default class ZeroAxis extends Component {
+    constructor() {
+        super(...arguments);
+        this.models = [];
+    }
+    initialize() {
+        this.type = 'zeroAxis';
+        this.name = 'zeroAxis';
+    }
+    render({ layout, axes, series, options }) {
+        this.rect = layout.plot;
+        const labelAxisOnYAxis = isLabelAxisOnYAxis({ series, options });
+        const valueAxisName = labelAxisOnYAxis ? 'xAxis' : 'yAxis';
+        const { zeroPosition } = axes[valueAxisName];
+        if (isNumber(zeroPosition)) {
+            this.models = this.renderZeroModel(zeroPosition, labelAxisOnYAxis);
+        }
+    }
+    renderZeroModel(zeroPosition, vertical) {
+        const zeroPixel = crispPixel(0);
+        const position = crispPixel(zeroPosition);
+        let model;
+        if (vertical) {
+            model = {
+                type: 'line',
+                x: position,
+                y: zeroPixel,
+                x2: position,
+                y2: crispPixel(this.rect.height),
+                strokeStyle: 'rgba(0, 0, 0, 0.5)',
+            };
+        }
+        else {
+            model = {
+                type: 'line',
+                x: zeroPixel,
+                y: position,
+                x2: crispPixel(this.rect.width),
+                y2: position,
+                strokeStyle: 'rgba(0, 0, 0, 0.5)',
+            };
+        }
+        return [model];
+    }
+}

package/dist/esm/eventEmitter.d.ts

@@ -0,0 +1,8 @@
+import { CustomEventType, EventListener } from "../types/eventEmitter";
+declare type EventType = 'needSubLoop' | 'needDraw' | 'needLoop' | 'loopStart' | 'loopComplete' | 'animationCompleted' | 'renderSpectrumTooltip' | 'renderDataLabels' | 'resetHoveredSeries' | 'resetSelectedSeries' | 'renderSelectedSeries' | 'renderHoveredSeries' | 'seriesPointHovered' | 'showTooltip' | 'hideTooltip' | CustomEventType;
+export default class EventEmitter {
+    handlers: EventListener[];
+    on(type: EventType, handler: EventListener): void;
+    emit(type: EventType, ...args: any[]): void;
+}
+export {};

package/dist/esm/eventEmitter.js

@@ -0,0 +1,15 @@
+export default class EventEmitter {
+    constructor() {
+        this.handlers = [];
+    }
+    on(type, handler) {
+        if (!this.handlers[type]) {
+            this.handlers[type] = [];
+        }
+        this.handlers[type].push(handler);
+    }
+    emit(type, ...args) {
+        var _a;
+        (_a = this.handlers[type]) === null || _a === void 0 ? void 0 : _a.forEach((handler) => handler(...args));
+    }
+}

package/dist/esm/helpers/arrayUtil.d.ts

@@ -0,0 +1,10 @@
+export declare function max(arr: number[], condition?: Function, context?: any): number;
+/**
+ * Array pivot.
+ * @memberOf module:arrayUtil
+ * @param {Array.<Array>} arr2d target 2d array
+ * @returns {Array.<Array>} pivoted 2d array
+ */
+export declare function pivot(arr2d: any[][]): any[][];
+export declare function isSameArray(arr1: unknown[], arr2: unknown[]): boolean;
+export declare function pluck(arr: any[], property: string | number): any;

package/dist/esm/helpers/arrayUtil.js

@@ -0,0 +1,54 @@
+export function max(arr, condition, context) {
+    let result;
+    if (!condition) {
+        result = Math.max(...arr);
+    }
+    else {
+        [result] = arr;
+        const rest = arr.slice(1);
+        let maxValue = condition.call(context, result, 0);
+        rest.forEach((item, index) => {
+            const compareValue = condition.call(context, item, index + 1);
+            if (compareValue > maxValue) {
+                maxValue = compareValue;
+                result = item;
+            }
+        });
+    }
+    return result;
+}
+/**
+ * Array pivot.
+ * @memberOf module:arrayUtil
+ * @param {Array.<Array>} arr2d target 2d array
+ * @returns {Array.<Array>} pivoted 2d array
+ */
+export function pivot(arr2d) {
+    const result = [];
+    const len = max(arr2d.map((arr) => arr.length));
+    arr2d.forEach((arr) => {
+        for (let index = 0; index < len; index += 1) {
+            if (!result[index]) {
+                result[index] = [];
+            }
+            result[index].push(arr[index]);
+        }
+    });
+    return result;
+}
+export function isSameArray(arr1, arr2) {
+    if (arr1.length !== arr2.length) {
+        return false;
+    }
+    for (let i = 0; i < arr1.length; i += 1) {
+        if (arr1[i] !== arr2[i]) {
+            return false;
+        }
+    }
+    return true;
+}
+export function pluck(arr, property) {
+    return arr.reduce((acc, cur) => {
+        return [...acc, cur[property]];
+    }, []);
+}