@techie_doubts/tui.chart.2026 4.6.1

package/dist/esm/component/boxSeries.js

@@ -0,0 +1,603 @@
+import Component from "./component";
+import { first, hasNegative, deepCopyArray, last, hasNegativeOnly, hasPositiveOnly, isNull, isNumber, calculateSizeWithPercentString, omit, } from "../helpers/utils";
+import { makeTickPixelPositions, makeLabelsFromLimit } from "../helpers/calculator";
+import { getRGBA, getAlpha } from "../helpers/color";
+import { getDataInRange, isRangeData, isRangeValue } from "../helpers/range";
+import { getLimitOnAxis, getValueAxisName } from "../helpers/axes";
+import { calibrateDrawingValue } from "../helpers/boxSeries";
+import { getDataLabelsOptions } from "../helpers/dataLabels";
+import { getActiveSeriesMap } from "../helpers/legend";
+import { getBoxTypeSeriesPadding } from "../helpers/style";
+import { makeRectResponderModel } from "../helpers/responders";
+import { message } from "../message";
+import { isAvailableSelectSeries, isAvailableShowTooltipInfo } from "../helpers/validation";
+export var SeriesDirection;
+(function (SeriesDirection) {
+    SeriesDirection[SeriesDirection["POSITIVE"] = 0] = "POSITIVE";
+    SeriesDirection[SeriesDirection["NEGATIVE"] = 1] = "NEGATIVE";
+    SeriesDirection[SeriesDirection["BOTH"] = 2] = "BOTH";
+})(SeriesDirection || (SeriesDirection = {}));
+const BOX = {
+    BAR: 'bar',
+    COLUMN: 'column',
+};
+export function isLeftBottomSide(seriesIndex) {
+    return !!(seriesIndex % 2);
+}
+function calculateBarLength(value, min, max) {
+    if (isRangeValue(value)) {
+        let [start, end] = value;
+        if (start < min) {
+            start = min;
+        }
+        if (end > max) {
+            end = max;
+        }
+        return end - start;
+    }
+    return calibrateDrawingValue(value, min, max);
+}
+export default class BoxSeries extends Component {
+    constructor() {
+        super(...arguments);
+        this.models = { series: [] };
+        this.activatedResponders = [];
+        this.isBar = true;
+        this.valueAxis = 'xAxis';
+        this.labelAxis = 'yAxis';
+        this.anchorSizeKey = 'height';
+        this.offsetSizeKey = 'width';
+        this.basePosition = 0;
+        this.leftBasePosition = 0;
+        this.rightBasePosition = 0;
+        this.isRangeData = false;
+        this.offsetKey = 'x';
+        this.eventDetectType = 'point';
+        this.onMouseoutComponent = () => {
+            this.eventBus.emit('seriesPointHovered', { models: [], name: this.name });
+            this.eventBus.emit('renderHoveredSeries', {
+                models: [],
+                name: this.name,
+                eventDetectType: this.eventDetectType,
+            });
+            this.eventBus.emit('needDraw');
+        };
+        this.selectSeries = (info) => {
+            const { index, seriesIndex } = info;
+            if (!isAvailableSelectSeries(info, 'column')) {
+                return;
+            }
+            const model = this.tooltipRectMap[seriesIndex][index];
+            if (!model) {
+                throw new Error(message.SELECT_SERIES_API_INDEX_ERROR);
+            }
+            this.eventBus.emit('renderSelectedSeries', {
+                models: this.getRespondersWithTheme([model], 'select'),
+                name: this.name,
+            });
+            this.eventBus.emit('needDraw');
+        };
+        this.showTooltip = (info) => {
+            const { index, seriesIndex } = info;
+            if (!isAvailableShowTooltipInfo(info, this.eventDetectType, 'column')) {
+                return;
+            }
+            const models = this.eventDetectType === 'grouped'
+                ? this.getGroupedRect([this.responders[index]], 'hover')
+                : this.getRespondersWithTheme([this.tooltipRectMap[index][seriesIndex]], 'hover');
+            if (!models.length) {
+                return;
+            }
+            this.eventBus.emit('renderHoveredSeries', {
+                models,
+                name: this.name,
+                eventDetectType: this.eventDetectType,
+            });
+            this.activatedResponders =
+                this.eventDetectType === 'grouped' ? this.tooltipRectMap[index] : models;
+            this.eventBus.emit('seriesPointHovered', { models: this.activatedResponders, name: this.name });
+            this.eventBus.emit('needDraw');
+        };
+    }
+    initialize({ name, stackChart }) {
+        this.initializeFields(name);
+        if (!stackChart) {
+            this.eventBus.on('selectSeries', this.selectSeries);
+            this.eventBus.on('showTooltip', this.showTooltip);
+            this.eventBus.on('hideTooltip', this.onMouseoutComponent);
+        }
+    }
+    initializeFields(name) {
+        this.type = 'series';
+        this.name = name;
+        this.isBar = name === BOX.BAR;
+        this.offsetKey = this.isBar ? 'x' : 'y';
+        this.valueAxis = this.isBar ? 'xAxis' : 'yAxis';
+        this.labelAxis = this.isBar ? 'yAxis' : 'xAxis';
+        this.anchorSizeKey = this.isBar ? 'height' : 'width';
+        this.offsetSizeKey = this.isBar ? 'width' : 'height';
+    }
+    initUpdate(delta) {
+        if (!this.drawModels) {
+            return;
+        }
+        if (this.isRangeData) {
+            this.initUpdateRangeData(delta);
+            return;
+        }
+        this.initUpdateClipRect(delta);
+        this.initUpdateConnector(delta);
+    }
+    initUpdateRangeData(delta) {
+        const { series } = this.drawModels;
+        this.drawModels.clipRect = this.models.clipRect;
+        const target = this.models.series;
+        series.forEach((current, index) => {
+            const targetModel = target[index];
+            if (delta === 0) {
+                current[this.offsetSizeKey] = 0;
+            }
+            const offsetSize = current[this.offsetSizeKey] +
+                (targetModel[this.offsetSizeKey] - current[this.offsetSizeKey]) * delta;
+            current[this.offsetSizeKey] = offsetSize;
+            if (!this.isBar) {
+                current[this.offsetKey] =
+                    targetModel[this.offsetKey] + targetModel[this.offsetSizeKey] - offsetSize;
+            }
+        });
+    }
+    initUpdateClipRect(delta) {
+        const { clipRect } = this.drawModels;
+        if (!clipRect) {
+            return;
+        }
+        const current = clipRect[0];
+        const key = this.offsetSizeKey;
+        const target = this.models.clipRect[0];
+        const offsetSize = current[key] + (target[key] - current[key]) * delta;
+        current[key] = offsetSize;
+        current[this.offsetKey] = Math.max(this.basePosition - (offsetSize * this.basePosition) / target[key], 0);
+    }
+    initUpdateConnector(delta) {
+        const { connector } = this.drawModels;
+        if (!connector) {
+            return;
+        }
+        const target = this.models.connector;
+        connector.forEach((current, index) => {
+            const alpha = getAlpha(target[index].strokeStyle) * delta;
+            current.strokeStyle = getRGBA(current.strokeStyle, alpha);
+        });
+    }
+    setEventDetectType(series, options) {
+        var _a, _b;
+        if (series.line) {
+            this.eventDetectType = 'grouped';
+        }
+        if ((_b = (_a = options) === null || _a === void 0 ? void 0 : _a.series) === null || _b === void 0 ? void 0 : _b.eventDetectType) {
+            this.eventDetectType = options.series.eventDetectType;
+        }
+    }
+    getOptions(chartOptions) {
+        var _a;
+        const options = Object.assign({}, chartOptions);
+        if (((_a = options) === null || _a === void 0 ? void 0 : _a.series) && options.series.column) {
+            options.series = Object.assign(Object.assign({}, options.series), options.series.column);
+        }
+        return options;
+    }
+    render(chartState, computed) {
+        var _a, _b;
+        const { layout, series, axes, stackSeries, legend, theme, scale } = chartState;
+        this.isShow = !(stackSeries && stackSeries[this.name]);
+        if (!this.isShow) {
+            return;
+        }
+        const categories = (_a = chartState.categories, (_a !== null && _a !== void 0 ? _a : []));
+        const options = this.getOptions(chartState.options);
+        this.setEventDetectType(series, options);
+        this.theme = theme.series[this.name];
+        this.rect = layout.plot;
+        this.activeSeriesMap = getActiveSeriesMap(legend);
+        this.selectable = this.getSelectableOption(options);
+        this.valueAxis = getValueAxisName(options, this.name, this.isBar ? 'xAxis' : 'yAxis');
+        const seriesData = series[this.name].data.map((seriesDatum) => (Object.assign(Object.assign({}, seriesDatum), { data: getDataInRange(seriesDatum.data, computed.viewRange) })));
+        if (axes.centerYAxis) {
+            this.valueAxis = 'centerYAxis';
+        }
+        const { tickDistance } = axes[this.labelAxis];
+        const diverging = !!((_b = options.series) === null || _b === void 0 ? void 0 : _b.diverging);
+        const { limit, stepSize } = this.getScaleData(scale);
+        const labels = makeLabelsFromLimit(limit, stepSize);
+        const { min, max } = getLimitOnAxis(labels);
+        this.basePosition = this.getBasePosition(axes[this.valueAxis]);
+        let offsetSize = this.getOffsetSize();
+        const { centerYAxis } = axes;
+        if (diverging) {
+            const [left, right] = this.getDivergingBasePosition(centerYAxis);
+            this.basePosition = this.getOffsetSize() / 2;
+            this.leftBasePosition = left;
+            this.rightBasePosition = right;
+            offsetSize = this.getOffsetSizeWithDiverging(centerYAxis);
+        }
+        const renderOptions = {
+            min,
+            max,
+            tickDistance,
+            diverging,
+            ratio: this.getValueRatio(min, max, offsetSize),
+            hasNegativeValue: hasNegative(labels),
+            seriesDirection: this.getSeriesDirection(labels),
+            defaultPadding: getBoxTypeSeriesPadding(tickDistance),
+        };
+        const seriesModels = this.renderSeriesModel(seriesData, renderOptions);
+        const tooltipData = this.makeTooltipData(seriesData, renderOptions, categories);
+        const clipRect = this.renderClipRectAreaModel();
+        this.models = {
+            clipRect: [clipRect],
+            series: seriesModels,
+        };
+        if (!this.drawModels) {
+            this.drawModels = {
+                clipRect: [this.initClipRect(clipRect)],
+                series: deepCopyArray(seriesModels),
+            };
+        }
+        if (getDataLabelsOptions(options, this.name).visible) {
+            const dataLabelData = seriesModels.reduce((acc, data) => {
+                return isRangeValue(data.value)
+                    ? [...acc, ...this.makeDataLabelRangeData(data)]
+                    : [...acc, this.makeDataLabel(data, centerYAxis)];
+            }, []);
+            this.renderDataLabels(dataLabelData);
+        }
+        this.tooltipRectMap = this.makeTooltipRectMap(seriesModels, tooltipData);
+        this.responders = this.getBoxSeriesResponders(seriesModels, tooltipData, axes, categories);
+    }
+    getScaleData(scale) {
+        return scale[this.valueAxis === 'centerYAxis' ? 'xAxis' : this.valueAxis];
+    }
+    getBoxSeriesResponders(seriesModels, tooltipData, axes, categories) {
+        const hoveredSeries = this.renderHoveredSeriesModel(seriesModels);
+        return this.eventDetectType === 'grouped'
+            ? makeRectResponderModel(this.rect, (this.isBar ? axes.yAxis : axes.xAxis), categories, !this.isBar)
+            : hoveredSeries.map((m, index) => (Object.assign(Object.assign({}, m), { data: tooltipData[index] })));
+    }
+    makeTooltipRectMap(seriesModels, tooltipDataArr) {
+        return seriesModels.reduce((acc, cur, dataIndex) => {
+            const index = cur.index;
+            const tooltipModel = Object.assign(Object.assign({}, cur), { data: tooltipDataArr[dataIndex] });
+            if (!acc[index]) {
+                acc[index] = [];
+            }
+            acc[index].push(tooltipModel);
+            return acc;
+        }, []);
+    }
+    renderClipRectAreaModel() {
+        return {
+            type: 'clipRectArea',
+            x: 0,
+            y: 0,
+            width: this.rect.width,
+            height: this.rect.height,
+        };
+    }
+    initClipRect(clipRect) {
+        return {
+            type: 'clipRectArea',
+            width: this.isBar ? 0 : clipRect.width,
+            height: this.isBar ? clipRect.height : 0,
+            x: this.isBar ? 0 : clipRect.x,
+            y: this.isBar ? clipRect.y : 0,
+        };
+    }
+    renderSeriesModel(seriesData, renderOptions) {
+        const { tickDistance, diverging } = renderOptions;
+        const seriesLength = seriesData.length;
+        const validDiverging = diverging && seriesData.length === 2;
+        const columnWidth = this.getColumnWidth(renderOptions, seriesLength, validDiverging);
+        const seriesModels = [];
+        const padding = (tickDistance - columnWidth * (validDiverging ? 1 : seriesLength)) / 2;
+        seriesData.forEach(({ data, color: seriesColor, name, colorByCategories }, seriesIndex) => {
+            const seriesPos = (diverging ? 0 : seriesIndex) * columnWidth + padding;
+            const isLBSideWithDiverging = diverging && isLeftBottomSide(seriesIndex);
+            const colorLength = colorByCategories ? seriesColor.length : 1;
+            this.isRangeData = isRangeData(data);
+            data.forEach((value, index) => {
+                const dataStart = seriesPos + index * tickDistance;
+                const barLength = this.makeBarLength(value, renderOptions);
+                const color = this.getSeriesColor(name, colorByCategories ? seriesColor[index % colorLength] : seriesColor);
+                if (isNumber(barLength)) {
+                    const startPosition = this.getStartPosition(barLength, value, renderOptions, isLBSideWithDiverging);
+                    seriesModels.push(Object.assign(Object.assign({ type: 'rect', color,
+                        value }, this.getAdjustedRect(dataStart, startPosition, barLength, columnWidth)), { name,
+                        index }));
+                }
+            });
+        });
+        return seriesModels;
+    }
+    renderHoveredSeriesModel(seriesModel) {
+        return seriesModel.map((data) => {
+            return this.makeHoveredSeriesModel(data);
+        });
+    }
+    makeHoveredSeriesModel(data) {
+        const { x, y, width, height, color, index } = data;
+        return {
+            type: 'rect',
+            color: getRGBA(color, 1),
+            x,
+            y,
+            width,
+            height,
+            index,
+        };
+    }
+    getRectModelsFromRectResponders(responders) {
+        var _a;
+        if (!responders.length) {
+            return [];
+        }
+        return _a = this.tooltipRectMap[responders[0].index], (_a !== null && _a !== void 0 ? _a : []);
+    }
+    getGroupedRect(responders, type) {
+        const rectModels = this.getRectModelsFromRectResponders(responders);
+        const { color, opacity } = this.theme[type].groupedRect;
+        return rectModels.length
+            ? responders.map((m) => (Object.assign(Object.assign({}, m), { color: getRGBA(color, opacity) })))
+            : [];
+    }
+    onMousemoveGroupedType(responders) {
+        const rectModels = this.getRectModelsFromRectResponders(responders);
+        this.eventBus.emit('renderHoveredSeries', {
+            models: this.getGroupedRect(responders, 'hover'),
+            name: this.name,
+            eventDetectType: this.eventDetectType,
+        });
+        this.activatedResponders = rectModels;
+    }
+    onMousemove({ responders }) {
+        if (this.eventDetectType === 'grouped') {
+            this.onMousemoveGroupedType(responders);
+        }
+        else {
+            this.eventBus.emit('renderHoveredSeries', {
+                models: this.getRespondersWithTheme(responders, 'hover'),
+                name: this.name,
+                eventDetectType: this.eventDetectType,
+            });
+            this.activatedResponders = responders;
+        }
+        this.eventBus.emit('seriesPointHovered', { models: this.activatedResponders, name: this.name });
+        this.eventBus.emit('needDraw');
+    }
+    makeTooltipData(seriesData, renderOptions, categories) {
+        const tooltipData = [];
+        seriesData.forEach(({ data, name, color, colorByCategories }) => {
+            data.forEach((value, dataIndex) => {
+                if (!isNull(value)) {
+                    const barLength = this.makeBarLength(value, renderOptions);
+                    if (isNumber(barLength)) {
+                        tooltipData.push({
+                            label: name,
+                            color: colorByCategories ? color[dataIndex] : color,
+                            value: this.getTooltipValue(value),
+                            category: categories.length ? categories[dataIndex] : '',
+                        });
+                    }
+                }
+            });
+        });
+        return tooltipData;
+    }
+    getTooltipValue(value) {
+        return isRangeValue(value) ? `${value[0]} ~ ${value[1]}` : value;
+    }
+    getBasePosition({ labels, tickCount, zeroPosition }) {
+        const valueLabels = this.isBar ? labels : [...labels].reverse();
+        const tickPositions = makeTickPixelPositions(this.getOffsetSize(), tickCount);
+        const seriesDirection = this.getSeriesDirection(valueLabels);
+        return zeroPosition
+            ? zeroPosition
+            : this.getTickPositionIfNotZero(tickPositions, seriesDirection);
+    }
+    getDivergingBasePosition(centerYAxis) {
+        let leftZeroPosition, rightZeroPosition;
+        if (centerYAxis) {
+            leftZeroPosition = centerYAxis.xAxisHalfSize;
+            rightZeroPosition = centerYAxis.secondStartX;
+        }
+        else {
+            const divergingZeroPosition = this.getOffsetSize() / 2;
+            leftZeroPosition = rightZeroPosition = divergingZeroPosition;
+        }
+        return [leftZeroPosition, rightZeroPosition];
+    }
+    getOffsetSize() {
+        return this.rect[this.offsetSizeKey];
+    }
+    getValueRatio(min, max, size) {
+        return size / (max - min);
+    }
+    makeBarLength(value, renderOptions) {
+        if (isNull(value)) {
+            return null;
+        }
+        const { min, max, ratio } = renderOptions;
+        const calculatedValue = calculateBarLength(value, min, max);
+        return Math.max(this.getBarLength(calculatedValue, ratio), 2);
+    }
+    getBarLength(value, ratio) {
+        return value < 0 ? Math.abs(value) * ratio : value * ratio;
+    }
+    getStartPositionWithRangeValue(value, barLength, renderOptions) {
+        const { min, ratio } = renderOptions;
+        let [start] = value;
+        if (start < min) {
+            start = min;
+        }
+        const startPosition = (start - min) * ratio;
+        return this.isBar ? startPosition : this.getOffsetSize() - startPosition - barLength;
+    }
+    getStartPosition(barLength, value, renderOptions, isLBSideWithDiverging) {
+        const { diverging, seriesDirection } = renderOptions;
+        let startPos;
+        if (isRangeValue(value)) {
+            startPos = this.getStartPositionWithRangeValue(value, barLength, renderOptions);
+        }
+        else if (diverging) {
+            startPos = isLBSideWithDiverging
+                ? this.getStartPosOnLeftBottomSide(barLength, diverging)
+                : this.getStartPosOnRightTopSide(barLength, diverging);
+        }
+        else if (seriesDirection === SeriesDirection.POSITIVE) {
+            startPos = this.getStartPosOnRightTopSide(barLength);
+        }
+        else if (seriesDirection === SeriesDirection.NEGATIVE) {
+            startPos = this.getStartPosOnLeftBottomSide(barLength);
+        }
+        else {
+            startPos =
+                value < 0
+                    ? this.getStartPosOnLeftBottomSide(barLength)
+                    : this.getStartPosOnRightTopSide(barLength);
+        }
+        return startPos;
+    }
+    getStartPosOnRightTopSide(barLength, diverging = false) {
+        let pos;
+        if (diverging) {
+            pos = this.isBar ? this.rightBasePosition : this.rightBasePosition - barLength;
+        }
+        else {
+            pos = this.isBar ? this.basePosition : this.basePosition - barLength;
+        }
+        return pos;
+    }
+    getStartPosOnLeftBottomSide(barLength, diverging = false) {
+        let pos;
+        if (diverging) {
+            pos = this.isBar ? this.leftBasePosition - barLength : this.leftBasePosition;
+        }
+        else {
+            pos = this.isBar ? this.basePosition - barLength : this.basePosition;
+        }
+        return pos;
+    }
+    getAdjustedRect(seriesPosition, dataPosition, barLength, columnWidth) {
+        return {
+            x: this.isBar ? dataPosition : seriesPosition,
+            y: this.isBar ? seriesPosition : dataPosition,
+            width: this.isBar ? barLength : columnWidth,
+            height: this.isBar ? columnWidth : barLength,
+        };
+    }
+    getColumnWidth(renderOptions, seriesLength, validDiverging = false) {
+        const { tickDistance, defaultPadding } = renderOptions;
+        seriesLength = validDiverging ? 1 : seriesLength;
+        const themeBarWidth = this.theme.barWidth;
+        return themeBarWidth
+            ? calculateSizeWithPercentString(tickDistance, themeBarWidth)
+            : (tickDistance - defaultPadding * 2) / seriesLength;
+    }
+    getSeriesDirection(labels) {
+        let result = SeriesDirection.BOTH;
+        if (hasPositiveOnly(labels)) {
+            result = SeriesDirection.POSITIVE;
+        }
+        else if (hasNegativeOnly(labels)) {
+            result = SeriesDirection.NEGATIVE;
+        }
+        return result;
+    }
+    getTickPositionIfNotZero(tickPositions, direction) {
+        if (!tickPositions.length) {
+            return 0;
+        }
+        const firstTickPosition = Number(first(tickPositions));
+        const lastTickPosition = Number(last(tickPositions));
+        if (direction === SeriesDirection.POSITIVE) {
+            return this.isBar ? firstTickPosition : lastTickPosition;
+        }
+        if (direction === SeriesDirection.NEGATIVE) {
+            return this.isBar ? lastTickPosition : firstTickPosition;
+        }
+        return 0;
+    }
+    makeDataLabel(rect, centerYAxis) {
+        const { dataLabels } = this.theme;
+        return Object.assign(Object.assign({}, rect), { direction: this.getDataLabelDirection(rect, centerYAxis), plot: { x: 0, y: 0, size: this.getOffsetSize() }, theme: Object.assign(Object.assign({}, omit(dataLabels, 'stackTotal')), { color: dataLabels.useSeriesColor ? rect.color : dataLabels.color }) });
+    }
+    makeDataLabelRangeData(rect) {
+        const { dataLabels } = this.theme;
+        return rect.value.reduce((acc, value, index) => [
+            ...acc,
+            Object.assign(Object.assign({}, rect), { value, direction: this.getDataLabelRangeDataDirection(index % 2 === 0), plot: { x: 0, y: 0, size: this.getOffsetSize() }, theme: Object.assign(Object.assign({}, omit(dataLabels, 'stackTotal')), { color: dataLabels.useSeriesColor ? rect.color : dataLabels.color }) }),
+        ], []);
+    }
+    getDataLabelRangeDataDirection(isEven) {
+        let direction;
+        if (this.isBar) {
+            direction = isEven ? 'left' : 'right';
+        }
+        else {
+            direction = isEven ? 'bottom' : 'top';
+        }
+        return direction;
+    }
+    getDataLabelDirection(rect, centerYAxis) {
+        let direction;
+        if (this.isBar) {
+            const basePos = centerYAxis ? this.leftBasePosition : this.basePosition;
+            direction = rect.x < basePos ? 'left' : 'right';
+        }
+        else {
+            direction = rect.y >= this.basePosition ? 'bottom' : 'top';
+        }
+        return direction;
+    }
+    getOffsetSizeWithDiverging(centerYAxis) {
+        return centerYAxis ? centerYAxis.xAxisHalfSize : this.getOffsetSize() / 2;
+    }
+    onClick({ responders }) {
+        if (this.selectable) {
+            let models;
+            if (this.eventDetectType === 'grouped') {
+                models = [
+                    ...this.getGroupedRect(responders, 'select'),
+                    ...this.getRectModelsFromRectResponders(responders),
+                ];
+            }
+            else {
+                models = this.getRespondersWithTheme(responders, 'select');
+            }
+            this.eventBus.emit('renderSelectedSeries', {
+                models,
+                name: this.name,
+                eventDetectType: this.eventDetectType,
+            });
+            this.eventBus.emit('needDraw');
+        }
+    }
+    getRespondersWithTheme(responders, type) {
+        const { color, borderColor, borderWidth, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, } = this.theme[type];
+        return responders.map((model) => (Object.assign(Object.assign({}, model), { color: (color !== null && color !== void 0 ? color : model.color), thickness: borderWidth, borderColor, style: [
+                {
+                    shadowBlur,
+                    shadowColor,
+                    shadowOffsetX,
+                    shadowOffsetY,
+                },
+            ] })));
+    }
+    getSeriesColor(name, color) {
+        const { select, areaOpacity } = this.theme;
+        const active = this.activeSeriesMap[name];
+        const selected = Object.values(this.activeSeriesMap).some((elem) => !elem);
+        return selected
+            ? getRGBA(color, active ? select.areaOpacity : select.restSeries.areaOpacity)
+            : getRGBA(color, areaOpacity);
+    }
+}

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

@@ -0,0 +1,62 @@
+import BoxSeries, { SeriesDirection } from "./boxSeries";
+import { BoxSeriesType, BoxSeriesDataType, ColumnChartOptions, BarChartOptions, ColumnLineChartOptions } from "../../types/options";
+import { ChartState, StackSeriesData, BoxType, Stack, StackDataValues, PercentScaleType, CenterYAxisData } from "../../types/store/store";
+import { RectModel, StackTotalModel, RectResponderModel } from "../../types/components/series";
+import { LineModel } from "../../types/components/axis";
+import { RectDataLabel } from "../../types/components/dataLabels";
+import { SelectSeriesHandlerParams } from "../charts/chart";
+declare type RenderOptions = {
+    stack: Stack;
+    scaleType: PercentScaleType;
+    tickDistance: number;
+    min: number;
+    max: number;
+    diverging: boolean;
+    hasNegativeValue: boolean;
+    seriesDirection: SeriesDirection;
+    defaultPadding: number;
+    offsetSize: number;
+    centerYAxis?: CenterYAxisData;
+};
+export default class BoxStackSeries extends BoxSeries {
+    initialize({ name, stackChart }: {
+        name: BoxType;
+        stackChart: boolean;
+    }): void;
+    render<T extends BarChartOptions | ColumnChartOptions | ColumnLineChartOptions>(chartState: ChartState<T>, computed: any): void;
+    renderStackSeriesModel(seriesData: StackSeriesData<BoxType>, renderOptions: RenderOptions): {
+        series: RectModel[];
+        connector: LineModel[];
+    };
+    makeStackSeriesModel(stackData: StackDataValues, renderOptions: RenderOptions, seriesRawData: BoxSeriesType<BoxSeriesDataType>[], stackGroupCount?: number, stackGroupIndex?: number): {
+        series: RectModel[];
+        connector: LineModel[];
+    };
+    makeStackGroupSeriesModel(stackSeries: StackSeriesData<BoxType>, renderOptions: RenderOptions): {
+        series: RectModel[];
+        connector: LineModel[];
+    };
+    makeConnectorSeriesModel(stackData: StackDataValues, renderOptions: RenderOptions, stackGroupCount?: number, stackGroupIndex?: number): LineModel[];
+    private getTooltipData;
+    private makeGroupStackTooltipData;
+    private makeStackTooltipData;
+    private makeConnectorModel;
+    private getStackValueRatio;
+    private getStackBarLength;
+    private getStackColumnWidth;
+    private getSeriesPosition;
+    private getStackStartPosition;
+    private calcStartPosOnLeftBottomSide;
+    private calcStartPosOnRightTopSide;
+    private calcStartPositionWithStack;
+    private calcStartPositionWithPercent;
+    private getStackRectInfo;
+    getDataLabels(seriesModels: RectModel[], renderOptions: RenderOptions): RectDataLabel[];
+    getTotalDataLabels(seriesData: StackSeriesData<BoxType>, renderOptions: RenderOptions): RectDataLabel[];
+    makeGroupTotalDataLabels(stackSeries: StackSeriesData<BoxType>, renderOptions: RenderOptions): RectDataLabel[];
+    makeTotalDataLabels(stackData: StackDataValues, renderOptions: RenderOptions, stackGroupCount?: number, stackGroupIndex?: number): RectDataLabel[];
+    makeTotalDataLabel(totalLabel: StackTotalModel, centerYAxis?: CenterYAxisData): RectDataLabel;
+    onMousemoveGroupedType(responders: RectResponderModel[]): void;
+    selectSeries: ({ index, seriesIndex, state, }: SelectSeriesHandlerParams<BarChartOptions | ColumnChartOptions>) => void;
+}
+export {};