@techie_doubts/tui.chart.2026 4.6.1

package/dist/esm/component/boxStackSeries.js

@@ -0,0 +1,447 @@
+import BoxSeries, { isLeftBottomSide, SeriesDirection } from "./boxSeries";
+import { deepCopyArray, includes, isNumber, hasNegative, calculateSizeWithPercentString, } from "../helpers/utils";
+import { getLimitOnAxis } from "../helpers/axes";
+import { isGroupStack, isPercentStack } from "../store/stackSeriesData";
+import { calibrateBoxStackDrawingValue, sumValuesBeforeIndex } from "../helpers/boxSeries";
+import { getDataLabelsOptions } from "../helpers/dataLabels";
+import { getRGBA } from "../helpers/color";
+import { getActiveSeriesMap } from "../helpers/legend";
+import { getBoxTypeSeriesPadding } from "../helpers/style";
+import { getDataInRange } from "../helpers/range";
+import { message } from "../message";
+import { makeLabelsFromLimit } from "../helpers/calculator";
+function calibrateDrawingValue(values, seriesIndex, renderOptions) {
+    const { stack, min, max } = renderOptions;
+    return isPercentStack(stack)
+        ? values[seriesIndex]
+        : calibrateBoxStackDrawingValue(values, seriesIndex, min, max);
+}
+function getDivisorForPercent(total, scaleType) {
+    const { positive, negative } = total;
+    let divisor = positive + Math.abs(negative);
+    if (includes(['dualPercentStack', 'divergingPercentStack'], scaleType)) {
+        divisor *= 2;
+    }
+    return divisor;
+}
+function getDirectionKeys(seriesDirection) {
+    let result = ['positive', 'negative'];
+    if (seriesDirection === SeriesDirection.POSITIVE) {
+        result = ['positive'];
+    }
+    else if (seriesDirection === SeriesDirection.NEGATIVE) {
+        result = ['negative'];
+    }
+    return result;
+}
+function getStackSeriesDataInViewRange(stackSeriesData, viewRange) {
+    if (!viewRange) {
+        return stackSeriesData;
+    }
+    const stackData = Array.isArray(stackSeriesData.stackData)
+        ? getDataInRange(stackSeriesData.stackData, viewRange)
+        : Object.assign({}, Object.keys(stackSeriesData.stackData).reduce((acc, name) => (Object.assign(Object.assign({}, acc), { [name]: getDataInRange(stackSeriesData.stackData[name], viewRange) })), {}));
+    const data = stackSeriesData.data.map((seriesDatum) => (Object.assign(Object.assign({}, seriesDatum), { data: getDataInRange(seriesDatum.data, viewRange) })));
+    return Object.assign(Object.assign({}, stackSeriesData), { data, stackData });
+}
+export default class BoxStackSeries extends BoxSeries {
+    constructor() {
+        super(...arguments);
+        this.selectSeries = ({ index, seriesIndex, state, }) => {
+            if (!isNumber(index) || !isNumber(seriesIndex)) {
+                return;
+            }
+            const { stackSeries } = state;
+            const stackSeriesData = stackSeries[this.name];
+            const { name } = stackSeriesData.data[seriesIndex];
+            const model = this.tooltipRectMap[index].find(({ name: seriesName }) => seriesName === name);
+            if (!model) {
+                throw new Error(message.SELECT_SERIES_API_INDEX_ERROR);
+            }
+            this.eventBus.emit('renderSelectedSeries', {
+                models: this.getRespondersWithTheme([model], 'select'),
+                name: this.name,
+                eventDetectType: this.eventDetectType,
+            });
+            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);
+        }
+    }
+    render(chartState, computed) {
+        var _a, _b;
+        const { layout, series: seriesData, axes, stackSeries, legend, theme, scale } = chartState;
+        const { viewRange } = computed;
+        this.isShow = !!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(seriesData, options);
+        this.theme = theme.series[this.name];
+        this.rect = layout.plot;
+        this.activeSeriesMap = getActiveSeriesMap(legend);
+        this.selectable = this.getSelectableOption(options);
+        const stackSeriesData = getStackSeriesDataInViewRange(stackSeries[this.name], viewRange);
+        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);
+        const { stack, scaleType } = stackSeriesData;
+        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 = {
+            stack,
+            scaleType,
+            tickDistance,
+            min,
+            max,
+            diverging,
+            hasNegativeValue: hasNegative(labels),
+            seriesDirection: this.getSeriesDirection(labels),
+            defaultPadding: getBoxTypeSeriesPadding(tickDistance),
+            offsetSize,
+            centerYAxis,
+        };
+        const { series, connector } = this.renderStackSeriesModel(stackSeriesData, renderOptions);
+        const clipRect = this.renderClipRectAreaModel();
+        const tooltipData = this.getTooltipData(stackSeriesData, categories);
+        this.models = {
+            clipRect: [clipRect],
+            series,
+            connector,
+        };
+        if (!this.drawModels) {
+            this.drawModels = {
+                clipRect: [this.initClipRect(clipRect)],
+                series: deepCopyArray(series),
+                connector: deepCopyArray(connector),
+            };
+        }
+        if (getDataLabelsOptions(options, this.name).visible) {
+            const dataLabelData = this.getDataLabels(series, renderOptions);
+            const stackTotalData = this.getTotalDataLabels(stackSeriesData, renderOptions);
+            this.renderDataLabels([...dataLabelData, ...stackTotalData]);
+        }
+        this.tooltipRectMap = this.makeTooltipRectMap(series, tooltipData);
+        this.responders = this.getBoxSeriesResponders(series, tooltipData, axes, categories);
+    }
+    renderStackSeriesModel(seriesData, renderOptions) {
+        const { stackData } = seriesData;
+        return isGroupStack(stackData)
+            ? this.makeStackGroupSeriesModel(seriesData, renderOptions)
+            : this.makeStackSeriesModel(stackData, renderOptions, seriesData.data);
+    }
+    makeStackSeriesModel(stackData, renderOptions, seriesRawData, stackGroupCount = 1, stackGroupIndex = 0) {
+        const seriesModels = [];
+        const columnWidth = this.getStackColumnWidth(renderOptions, stackGroupCount);
+        const { diverging } = renderOptions;
+        const isLBSideWithDiverging = diverging && isLeftBottomSide(stackGroupIndex);
+        stackData.forEach(({ values, total }, dataIndex) => {
+            const seriesPos = this.getSeriesPosition(renderOptions, columnWidth, dataIndex, stackGroupIndex, stackGroupCount);
+            const ratio = this.getStackValueRatio(total, renderOptions);
+            values.forEach((value, seriesIndex) => {
+                const { barLength, dataPosition } = this.getStackRectInfo(values, seriesIndex, ratio, renderOptions, isLBSideWithDiverging);
+                const { name, colorByCategories, color: rawColor } = seriesRawData[seriesIndex];
+                const active = this.activeSeriesMap[name];
+                const colorLength = rawColor.length || 1;
+                const hexColor = colorByCategories ? rawColor[dataIndex % colorLength] : rawColor;
+                const color = getRGBA(hexColor, active ? 1 : 0.2);
+                seriesModels.push(Object.assign(Object.assign({ type: 'rect', color,
+                    name,
+                    value }, this.getAdjustedRect(seriesPos, dataPosition, (barLength !== null && barLength !== void 0 ? barLength : 0), columnWidth)), { index: dataIndex }));
+            });
+        });
+        return {
+            series: seriesModels,
+            connector: this.makeConnectorSeriesModel(stackData, renderOptions, stackGroupCount, stackGroupIndex),
+        };
+    }
+    makeStackGroupSeriesModel(stackSeries, renderOptions) {
+        const { stack } = renderOptions;
+        const stackGroupData = stackSeries.stackData;
+        const seriesRawData = stackSeries.data;
+        const stackGroupIds = Object.keys(stackGroupData);
+        let seriesModels = [];
+        let connectorModels = [];
+        stackGroupIds.forEach((groupId, groupIndex) => {
+            const filtered = seriesRawData.filter(({ stackGroup }) => stackGroup === groupId);
+            const { series, connector } = this.makeStackSeriesModel(stackGroupData[groupId], renderOptions, filtered, stackGroupIds.length, groupIndex);
+            seriesModels = [...seriesModels, ...series];
+            if (stack.connector) {
+                connectorModels = [...connectorModels, ...connector];
+            }
+        });
+        return {
+            series: seriesModels,
+            connector: connectorModels,
+        };
+    }
+    makeConnectorSeriesModel(stackData, renderOptions, stackGroupCount = 1, stackGroupIndex = 0) {
+        const { diverging, stack: { connector }, } = renderOptions;
+        if (!connector) {
+            return [];
+        }
+        const columnWidth = this.getStackColumnWidth(renderOptions, stackGroupCount);
+        const isLBSideWithDiverging = diverging && isLeftBottomSide(stackGroupIndex);
+        const connectorPoints = [];
+        stackData.forEach(({ values, total }, index) => {
+            const seriesPos = this.getSeriesPosition(renderOptions, columnWidth, index, stackGroupIndex, stackGroupCount);
+            const points = [];
+            const ratio = this.getStackValueRatio(total, renderOptions);
+            values.forEach((value, seriesIndex) => {
+                const { barLength, dataPosition } = this.getStackRectInfo(values, seriesIndex, ratio, renderOptions, isLBSideWithDiverging);
+                const { x, y } = this.getAdjustedRect(seriesPos, dataPosition, barLength, columnWidth);
+                const xPos = !isLBSideWithDiverging && this.isBar ? x + barLength : x;
+                const yPos = isLBSideWithDiverging && !this.isBar ? y + barLength : y;
+                points.push({ x: xPos, y: yPos });
+            });
+            connectorPoints.push(points);
+        });
+        return this.makeConnectorModel(connectorPoints, connector, columnWidth);
+    }
+    getTooltipData(seriesData, categories) {
+        const seriesRawData = seriesData.data;
+        const { stackData } = seriesData;
+        const colors = seriesRawData.map(({ color }) => color);
+        return isGroupStack(stackData)
+            ? this.makeGroupStackTooltipData(seriesRawData, stackData, categories)
+            : this.makeStackTooltipData(seriesRawData, stackData, colors, categories);
+    }
+    makeGroupStackTooltipData(seriesRawData, stackData, categories) {
+        return Object.keys(stackData).flatMap((groupId) => {
+            const rawDataWithSameGroupId = seriesRawData.filter(({ stackGroup }) => stackGroup === groupId);
+            const colors = rawDataWithSameGroupId.map(({ color }) => color);
+            return this.makeStackTooltipData(rawDataWithSameGroupId, stackData[groupId], colors, categories);
+        });
+    }
+    makeStackTooltipData(seriesRawData, stackData, colors, categories) {
+        const tooltipData = [];
+        stackData.forEach(({ values }, dataIndex) => {
+            values.forEach((value, seriesIndex) => {
+                tooltipData.push({
+                    label: seriesRawData[seriesIndex].name,
+                    color: colors[seriesIndex],
+                    value,
+                    category: categories.length ? categories[dataIndex] : '',
+                });
+            });
+        });
+        return tooltipData;
+    }
+    makeConnectorModel(pointsForConnector, connector, columnWidth) {
+        if (!connector || !pointsForConnector.length) {
+            return [];
+        }
+        const { color, lineWidth, dashSegments } = this.theme.connector;
+        const connectorModels = [];
+        const seriesDataCount = pointsForConnector.length;
+        const seriesCount = pointsForConnector[0].length;
+        for (let seriesIndex = 0; seriesIndex < seriesCount; seriesIndex += 1) {
+            const points = [];
+            for (let dataIndex = 0; dataIndex < seriesDataCount; dataIndex += 1) {
+                points.push(pointsForConnector[dataIndex][seriesIndex]);
+            }
+            points.forEach((point, index) => {
+                const { x, y } = point;
+                if (index < points.length - 1) {
+                    const { x: nextX, y: nextY } = points[index + 1];
+                    connectorModels.push({
+                        type: 'line',
+                        x: this.isBar ? x : x + columnWidth,
+                        y: this.isBar ? y + columnWidth : y,
+                        x2: nextX,
+                        y2: nextY,
+                        dashSegments,
+                        strokeStyle: color,
+                        lineWidth,
+                    });
+                }
+            });
+        }
+        return connectorModels;
+    }
+    getStackValueRatio(total, renderOptions) {
+        const { stack: { type: stackType }, scaleType, min, max, offsetSize, } = renderOptions;
+        if (stackType === 'percent') {
+            return offsetSize / getDivisorForPercent(total, scaleType);
+        }
+        return this.getValueRatio(min, max, offsetSize);
+    }
+    getStackBarLength(values, seriesIndex, ratio, renderOptions) {
+        const value = calibrateDrawingValue(values, seriesIndex, renderOptions);
+        return isNumber(value) ? this.getBarLength(value, ratio) : null;
+    }
+    getStackColumnWidth(renderOptions, stackGroupCount) {
+        const { tickDistance, diverging, defaultPadding } = renderOptions;
+        const divisor = diverging ? 1 : stackGroupCount;
+        const themeBarWidth = this.theme.barWidth;
+        return themeBarWidth
+            ? calculateSizeWithPercentString(tickDistance, themeBarWidth)
+            : (tickDistance - defaultPadding * 2) / divisor;
+    }
+    getSeriesPosition(renderOptions, columnWidth, dataIndex, stackGroupIndex, stackGroupCount) {
+        const { tickDistance, diverging } = renderOptions;
+        const groupIndex = diverging ? 0 : stackGroupIndex;
+        const groupCount = diverging ? 1 : stackGroupCount;
+        const padding = (tickDistance - columnWidth * groupCount) / 2;
+        return dataIndex * tickDistance + padding + columnWidth * groupIndex;
+    }
+    getStackStartPosition(values, currentIndex, ratio, renderOptions, isLBSideWithDiverging) {
+        const { stack, diverging, seriesDirection } = renderOptions;
+        let startPos;
+        if (diverging) {
+            startPos = isLBSideWithDiverging
+                ? this.calcStartPosOnLeftBottomSide(values, currentIndex, renderOptions, ratio)
+                : this.calcStartPosOnRightTopSide(values, currentIndex, renderOptions, ratio);
+        }
+        else if (isPercentStack(stack)) {
+            startPos = this.calcStartPositionWithPercent(values, currentIndex, ratio);
+        }
+        else if (seriesDirection === SeriesDirection.POSITIVE) {
+            startPos = this.calcStartPosOnRightTopSide(values, currentIndex, renderOptions, ratio);
+        }
+        else if (seriesDirection === SeriesDirection.NEGATIVE) {
+            startPos = this.calcStartPosOnLeftBottomSide(values, currentIndex, renderOptions, ratio);
+        }
+        else {
+            startPos = this.calcStartPositionWithStack(values, currentIndex, renderOptions, ratio);
+        }
+        return startPos;
+    }
+    calcStartPosOnLeftBottomSide(values, currentIndex, renderOptions, ratio) {
+        const { min, max, diverging } = renderOptions;
+        const basePosition = diverging ? this.leftBasePosition : this.basePosition;
+        const totalOfIndexBefore = sumValuesBeforeIndex(values, currentIndex, false);
+        const totalOfValues = sumValuesBeforeIndex(values, currentIndex, true);
+        const collideEdge = totalOfValues < min;
+        const usingValue = this.isBar ? totalOfValues : totalOfIndexBefore;
+        const result = max < 0 ? Math.min(usingValue - max, 0) : usingValue;
+        let pos;
+        if (this.isBar) {
+            pos = collideEdge ? 0 : basePosition - Math.abs(result) * ratio;
+        }
+        else {
+            pos = basePosition + Math.abs(result) * ratio;
+        }
+        return pos;
+    }
+    calcStartPosOnRightTopSide(values, currentIndex, renderOptions, ratio) {
+        const { min, max, diverging } = renderOptions;
+        const basePosition = diverging ? this.rightBasePosition : this.basePosition;
+        const totalOfIndexBefore = sumValuesBeforeIndex(values, currentIndex, false);
+        const totalOfValues = sumValuesBeforeIndex(values, currentIndex, true);
+        const collideEdge = totalOfValues > max;
+        const usingValue = this.isBar ? totalOfIndexBefore : totalOfValues;
+        const result = min > 0 ? Math.max(usingValue - min, 0) : usingValue;
+        const barLength = result * ratio;
+        let pos;
+        if (this.isBar) {
+            pos = basePosition + barLength;
+        }
+        else {
+            pos = collideEdge ? 0 : basePosition - barLength;
+        }
+        return pos;
+    }
+    calcStartPositionWithStack(values, currentIndex, renderOptions, ratio) {
+        return values[currentIndex] < 0
+            ? this.calcStartPosOnLeftBottomSide(values, currentIndex, renderOptions, ratio)
+            : this.calcStartPosOnRightTopSide(values, currentIndex, renderOptions, ratio);
+    }
+    calcStartPositionWithPercent(values, currentIndex, ratio) {
+        const basePosition = this.basePosition;
+        const totalPrevValues = sumValuesBeforeIndex(values, currentIndex, this.isBar ? values[currentIndex] < 0 : values[currentIndex] > 0);
+        return this.isBar
+            ? totalPrevValues * ratio + basePosition
+            : basePosition - totalPrevValues * ratio;
+    }
+    getStackRectInfo(values, seriesIndex, ratio, renderOptions, isLBSideWithDiverging) {
+        const barLength = this.getStackBarLength(values, seriesIndex, ratio, renderOptions);
+        const dataPosition = this.getStackStartPosition(values, seriesIndex, ratio, renderOptions, isLBSideWithDiverging);
+        return {
+            barLength,
+            dataPosition,
+        };
+    }
+    getDataLabels(seriesModels, renderOptions) {
+        return seriesModels.map((data) => this.makeDataLabel(data, renderOptions.centerYAxis));
+    }
+    getTotalDataLabels(seriesData, renderOptions) {
+        const { stackData, stack } = seriesData;
+        if (isPercentStack(stack)) {
+            return [];
+        }
+        return isGroupStack(stackData)
+            ? this.makeGroupTotalDataLabels(seriesData, renderOptions)
+            : this.makeTotalDataLabels(stackData, renderOptions);
+    }
+    makeGroupTotalDataLabels(stackSeries, renderOptions) {
+        let dataLabels = [];
+        const stackGroupData = stackSeries.stackData;
+        const stackGroupIds = Object.keys(stackGroupData);
+        stackGroupIds.forEach((groupId, groupIndex) => {
+            const totalDataLabels = this.makeTotalDataLabels(stackGroupData[groupId], renderOptions, stackGroupIds.length, groupIndex);
+            dataLabels = [...dataLabels, ...totalDataLabels];
+        });
+        return dataLabels;
+    }
+    makeTotalDataLabels(stackData, renderOptions, stackGroupCount = 1, stackGroupIndex = 0) {
+        const dataLabels = [];
+        const { min, max, seriesDirection, diverging, centerYAxis } = renderOptions;
+        const columnWidth = this.getStackColumnWidth(renderOptions, stackGroupCount);
+        stackData.forEach((data, dataIndex) => {
+            const { total } = data;
+            const seriesPos = this.getSeriesPosition(renderOptions, columnWidth, dataIndex, stackGroupIndex, stackGroupCount);
+            const ratio = this.getStackValueRatio(total, renderOptions);
+            const directionKeys = getDirectionKeys(seriesDirection);
+            directionKeys.forEach((key) => {
+                const value = total[key];
+                if (!value) {
+                    return;
+                }
+                const barLength = this.makeBarLength(value, {
+                    min,
+                    max,
+                    ratio,
+                });
+                const dataPosition = this.getStartPosition(barLength, value, renderOptions, diverging && isLeftBottomSide(stackGroupIndex));
+                const stackTotal = Object.assign({ type: 'stackTotal', value, name: `totalLabel-${key}`, theme: this.theme.dataLabels.stackTotal }, this.getAdjustedRect(seriesPos, dataPosition, barLength, columnWidth));
+                dataLabels.push(this.makeTotalDataLabel(stackTotal, centerYAxis));
+            });
+        });
+        return dataLabels;
+    }
+    makeTotalDataLabel(totalLabel, centerYAxis) {
+        return Object.assign(Object.assign({}, totalLabel), { direction: this.getDataLabelDirection(totalLabel, centerYAxis), plot: {
+                x: 0,
+                y: 0,
+                size: this.getOffsetSize(),
+            } });
+    }
+    onMousemoveGroupedType(responders) {
+        const rectModels = this.getRectModelsFromRectResponders(responders);
+        this.eventBus.emit('renderHoveredSeries', {
+            models: [...rectModels, ...this.getGroupedRect(responders, 'hover')],
+            name: this.name,
+            eventDetectType: this.eventDetectType,
+        });
+        this.activatedResponders = rectModels;
+    }
+}

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

@@ -0,0 +1,35 @@
+import { CircleModel, CircleResponderModel, CircleSeriesModels } from "../../types/components/series";
+import { BaseOptions, BubbleChartOptions, BubbleSeriesType, Rect } from "../../types/options";
+import { ChartState, Scale } from "../../types/store/store";
+import { TooltipData } from "../../types/components/tooltip";
+import Component from "./component";
+import { BubbleChartSeriesTheme } from "../../types/theme";
+import { SelectSeriesHandlerParams } from "../charts/chart";
+export declare function getMaxRadius(bubbleData: BubbleSeriesType[]): number;
+export default class BubbleSeries extends Component {
+    models: CircleSeriesModels;
+    drawModels: CircleSeriesModels;
+    responders: CircleResponderModel[];
+    activatedResponders: CircleResponderModel[];
+    theme: Required<BubbleChartSeriesTheme>;
+    rect: Rect;
+    maxRadius: number;
+    maxValue: number;
+    initialize(): void;
+    initUpdate(delta: number): void;
+    render(chartState: ChartState<BaseOptions>): void;
+    renderBubblePointsModel(seriesRawData: BubbleSeriesType[], scale: Scale): CircleModel[];
+    makeTooltipModel(circleData: BubbleSeriesType[]): TooltipData[];
+    private getResponderAppliedTheme;
+    onMouseoutComponent: () => void;
+    onMousemove({ responders, mousePosition }: {
+        responders: any;
+        mousePosition: any;
+    }): void;
+    onClick({ responders, mousePosition }: {
+        responders: any;
+        mousePosition: any;
+    }): void;
+    selectSeries: ({ index, seriesIndex, state }: SelectSeriesHandlerParams<BubbleChartOptions>) => void;
+    showTooltip: (info: SelectSeriesHandlerParams<BubbleChartOptions>) => void;
+}

package/dist/esm/component/bubbleSeries.js

@@ -0,0 +1,174 @@
+import { getCoordinateXValue, getCoordinateYValue } from "../helpers/coordinate";
+import { getRGBA } from "../helpers/color";
+import { getValueRatio } from "../helpers/calculator";
+import { deepCopy, deepMergedCopy, isNull, isNumber, isString } from "../helpers/utils";
+import { getActiveSeriesMap } from "../helpers/legend";
+import { getNearestResponder } from "../helpers/responders";
+import Component from "./component";
+import { message } from "../message";
+const MINIMUM_RADIUS = 0.5;
+const MINIMUM_DETECTING_AREA_RADIUS = 1;
+export function getMaxRadius(bubbleData) {
+    return bubbleData.reduce((acc, cur) => {
+        const NonNullData = cur.data.filter((datum) => !isNull(datum));
+        return Math.max(acc, ...NonNullData.map(({ r }) => r));
+    }, 0);
+}
+export default class BubbleSeries extends Component {
+    constructor() {
+        super(...arguments);
+        this.models = { series: [] };
+        this.activatedResponders = [];
+        this.maxRadius = -1;
+        this.maxValue = -1;
+        this.onMouseoutComponent = () => {
+            this.eventBus.emit('seriesPointHovered', { models: [], name: this.name });
+            this.eventBus.emit('renderHoveredSeries', {
+                models: [],
+                name: this.name,
+            });
+            this.eventBus.emit('needDraw');
+        };
+        this.selectSeries = ({ index, seriesIndex, state }) => {
+            if (!isNumber(index) || !isNumber(seriesIndex)) {
+                return;
+            }
+            const { name } = state.series.bubble.data[index];
+            const model = this.responders.filter(({ name: dataName }) => dataName === name)[seriesIndex];
+            if (!model) {
+                throw new Error(message.SELECT_SERIES_API_INDEX_ERROR);
+            }
+            const models = this.getResponderAppliedTheme([model], 'select');
+            this.eventBus.emit('renderSelectedSeries', { models, name: this.name });
+            this.eventBus.emit('needDraw');
+        };
+        this.showTooltip = (info) => {
+            const { index, seriesIndex, state } = info;
+            if (!isNumber(index) || !isNumber(seriesIndex)) {
+                return;
+            }
+            const { name } = state.series.bubble.data[seriesIndex];
+            const models = [this.responders.filter(({ name: dataName }) => dataName === name)[index]];
+            if (!models.length) {
+                return;
+            }
+            this.eventBus.emit('renderHoveredSeries', { models, name: this.name });
+            this.activatedResponders = models;
+            this.eventBus.emit('seriesPointHovered', { models: this.activatedResponders, name: this.name });
+            this.eventBus.emit('needDraw');
+        };
+    }
+    initialize() {
+        this.type = 'series';
+        this.name = 'bubble';
+        this.eventBus.on('selectSeries', this.selectSeries);
+        this.eventBus.on('showTooltip', this.showTooltip);
+        this.eventBus.on('hideTooltip', this.onMouseoutComponent);
+    }
+    initUpdate(delta) {
+        this.drawModels.series.forEach((model, index) => {
+            model.radius = this.models.series[index].radius * delta;
+        });
+    }
+    render(chartState) {
+        const { layout, series, scale, axes, circleLegend, legend, options, theme } = chartState;
+        const { plot } = layout;
+        if (!series.bubble) {
+            throw new Error(message.noDataError(this.name));
+        }
+        const { xAxis, yAxis } = axes;
+        const bubbleData = series.bubble.data;
+        this.theme = theme.series.bubble;
+        this.rect = plot;
+        this.activeSeriesMap = getActiveSeriesMap(legend);
+        this.selectable = this.getSelectableOption(options);
+        const xAxisTickSize = this.rect.width / xAxis.tickCount;
+        const yAxisTickSize = this.rect.height / yAxis.tickCount;
+        this.maxRadius = circleLegend.radius
+            ? circleLegend.radius
+            : Math.min(xAxisTickSize, yAxisTickSize);
+        this.maxValue = getMaxRadius(bubbleData);
+        const seriesModel = this.renderBubblePointsModel(bubbleData, scale);
+        const tooltipModel = this.makeTooltipModel(bubbleData);
+        this.models.series = seriesModel;
+        if (!this.drawModels) {
+            this.drawModels = deepCopy(this.models);
+        }
+        this.responders = seriesModel.map((m, index) => (Object.assign(Object.assign({}, m), { type: 'circle', detectionSize: 0, radius: m.radius + MINIMUM_DETECTING_AREA_RADIUS, color: getRGBA(m.color, 0.85), data: tooltipModel[index], index })));
+    }
+    renderBubblePointsModel(seriesRawData, scale) {
+        const xAxisLimit = scale.xAxis.limit;
+        const yAxisLimit = scale.yAxis.limit;
+        const { borderWidth, borderColor } = this.theme;
+        return seriesRawData.flatMap(({ data, name, color: seriesColor }, seriesIndex) => {
+            const circleModels = [];
+            const active = this.activeSeriesMap[name];
+            const color = getRGBA(seriesColor, active ? 0.8 : 0.1);
+            const nonNullData = data.filter((datum) => !isNull(datum));
+            nonNullData.forEach((datum) => {
+                const rawXValue = getCoordinateXValue(datum);
+                const xValue = isString(rawXValue) ? Number(new Date(rawXValue)) : Number(rawXValue);
+                const yValue = getCoordinateYValue(datum);
+                const xValueRatio = getValueRatio(xValue, xAxisLimit);
+                const yValueRatio = getValueRatio(yValue, yAxisLimit);
+                const x = xValueRatio * this.rect.width;
+                const y = (1 - yValueRatio) * this.rect.height;
+                const radius = Math.max(MINIMUM_RADIUS, (datum.r / this.maxValue) * this.maxRadius);
+                circleModels.push({
+                    x,
+                    y,
+                    type: 'circle',
+                    radius,
+                    color,
+                    style: ['default'],
+                    seriesIndex,
+                    name,
+                    borderWidth,
+                    borderColor,
+                });
+            });
+            return circleModels;
+        });
+    }
+    makeTooltipModel(circleData) {
+        return [...circleData].flatMap(({ data, name, color }) => {
+            const tooltipData = [];
+            const nonNullData = data.filter((datum) => !isNull(datum));
+            nonNullData.forEach((datum) => {
+                const { r, label } = datum;
+                tooltipData.push({
+                    label: `${name}/${label}`,
+                    color,
+                    value: {
+                        x: getCoordinateXValue(datum),
+                        y: getCoordinateYValue(datum),
+                        r,
+                    },
+                });
+            });
+            return tooltipData;
+        });
+    }
+    getResponderAppliedTheme(responders, type) {
+        return responders.map((responder) => deepMergedCopy(responder, this.theme[type]));
+    }
+    onMousemove({ responders, mousePosition }) {
+        const closestResponder = getNearestResponder(responders, mousePosition, this.rect);
+        const responderWithTheme = this.getResponderAppliedTheme(closestResponder, 'hover');
+        this.eventBus.emit('renderHoveredSeries', { models: responderWithTheme, name: this.name });
+        this.activatedResponders = closestResponder;
+        this.eventBus.emit('seriesPointHovered', { models: this.activatedResponders, name: this.name });
+        this.eventBus.emit('needDraw');
+    }
+    onClick({ responders, mousePosition }) {
+        if (this.selectable) {
+            const closestResponder = getNearestResponder(responders, mousePosition, this.rect);
+            const responderWithTheme = this.getResponderAppliedTheme(closestResponder, 'select');
+            this.eventBus.emit('renderSelectedSeries', {
+                models: responderWithTheme,
+                name: this.name,
+            });
+            this.eventBus.emit('needDraw');
+        }
+    }
+}