@techie_doubts/tui.chart.2026 4.6.1

package/dist/esm/component/boxPlotSeries.js

@@ -0,0 +1,410 @@
+import Component from "./component";
+import { getActiveSeriesMap } from "../helpers/legend";
+import { getRGBA } from "../helpers/color";
+import { getBoxTypeSeriesPadding } from "../helpers/style";
+import { isNumber, calculateSizeWithPercentString, isNull } from "../helpers/utils";
+import { crispPixel } from "../helpers/calculator";
+import { message } from "../message";
+const MIN_BAR_WIDTH = 5;
+function getPadding(tickDistance, barWidth, seriesLength) {
+    return (tickDistance - barWidth * seriesLength) / (seriesLength + 1);
+}
+function getDefaultColor(defaultColor, color) {
+    return (color !== null && color !== void 0 ? color : defaultColor);
+}
+export default class BoxPlotSeries extends Component {
+    constructor() {
+        super(...arguments);
+        this.models = { rect: [], line: [], circle: [] };
+        this.activatedResponders = [];
+        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 = ({ index, seriesIndex, state, }) => {
+            if (!isNumber(index) || !isNumber(seriesIndex)) {
+                return;
+            }
+            const { name } = state.series.boxPlot[seriesIndex];
+            const models = this.getRespondersWithTheme(this.tooltipRectMap[`${name}-${index}`], 'select');
+            this.eventBus.emit('renderSelectedSeries', {
+                models,
+                name: this.name,
+                eventDetectType: this.eventDetectType,
+            });
+            this.eventBus.emit('needDraw');
+        };
+        this.showTooltip = ({ index, seriesIndex, state }) => {
+            if (!isNumber(index) || !isNumber(seriesIndex)) {
+                return;
+            }
+            const { name } = state.series.boxPlot[seriesIndex];
+            const models = this.getRespondersWithTheme(this.tooltipRectMap[`${name}-${index}`], 'hover');
+            this.eventBus.emit('renderHoveredSeries', {
+                models,
+                name: this.name,
+                eventDetectType: this.eventDetectType,
+            });
+            this.activatedResponders = models;
+            this.eventBus.emit('seriesPointHovered', { models: this.activatedResponders, name: this.name });
+            this.eventBus.emit('needDraw');
+        };
+    }
+    initialize() {
+        this.type = 'series';
+        this.name = 'boxPlot';
+        this.eventBus.on('selectSeries', this.selectSeries);
+        this.eventBus.on('showTooltip', this.showTooltip);
+        this.eventBus.on('hideTooltip', this.onMouseoutComponent);
+    }
+    render(state) {
+        var _a, _b;
+        const { layout, axes, series, scale, legend, options, theme } = state;
+        if (!series.boxPlot) {
+            throw new Error(message.noDataError(this.name));
+        }
+        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;
+        }
+        this.theme = theme.series.boxPlot;
+        this.rect = layout.plot;
+        this.activeSeriesMap = getActiveSeriesMap(legend);
+        this.selectable = this.getSelectableOption(options);
+        const categories = state.categories;
+        const { tickDistance } = axes.xAxis;
+        const { min, max } = scale.yAxis.limit;
+        const boxPlotData = series.boxPlot.data;
+        const seriesLength = boxPlotData.length;
+        const renderOptions = Object.assign({ ratio: this.rect.height / (max - min), tickDistance }, this.getBarWidths(tickDistance, seriesLength));
+        const boxPlotModelData = this.makeBoxPlots(boxPlotData, renderOptions);
+        const seriesModels = this.renderSeriesModels(boxPlotModelData);
+        this.models = seriesModels;
+        if (!this.drawModels) {
+            this.drawModels = {
+                rect: seriesModels.rect.map((m) => (Object.assign(Object.assign({}, m), { y: m.y + m.height, height: 0 }))),
+                line: seriesModels.line,
+                circle: seriesModels.circle,
+            };
+        }
+        const tooltipData = this.makeTooltipModel(boxPlotData, categories);
+        this.tooltipRectMap = this.makeTooltipRectMap(boxPlotModelData, tooltipData);
+        this.responders =
+            this.eventDetectType === 'grouped'
+                ? this.makeGroupedResponderModel(boxPlotModelData)
+                : this.makeDefaultResponderModel(boxPlotModelData, tooltipData);
+    }
+    makeTooltipRectMap(boxPlotModelData, tooltipData) {
+        const result = {};
+        boxPlotModelData.forEach((m, tooltipIndex) => {
+            if (!isNull(m)) {
+                const propName = `${m.name}-${m.index}`;
+                if (!result[propName]) {
+                    result[propName] = [];
+                }
+                result[propName].push(Object.assign(Object.assign({}, this.makeHoveredModel(m)), { data: tooltipData[tooltipIndex] }));
+            }
+        });
+        return result;
+    }
+    makeGroupedResponderModel(boxPlotModelData) {
+        const result = [];
+        boxPlotModelData.forEach((m) => {
+            const { type, index, name } = m;
+            const propName = `${name}-${index}`;
+            if (type === 'boxPlot' && !result[propName]) {
+                const { boxPlotDetection } = m;
+                result.push(Object.assign(Object.assign({ type: 'rect', name: propName }, boxPlotDetection), { y: 0, height: this.rect.height }));
+            }
+        });
+        return result;
+    }
+    makeDefaultResponderModel(boxPlotModelData, tooltipDataArr) {
+        return boxPlotModelData.map((m, index) => (Object.assign(Object.assign({}, this.makeHoveredModel(m)), { data: tooltipDataArr[index], color: getRGBA(m.color, 1) })));
+    }
+    makeHoveredModel(model) {
+        const point = model.type === 'boxPlot' && model.rect
+            ? { x: model.rect.x, y: model.rect.y }
+            : { x: model.x, y: model.y };
+        const hoveredModel = Object.assign({}, model);
+        if (model.type === 'boxPlot') {
+            ['lowerWhisker', 'upperWhisker', 'maximum', 'minimum', 'median'].forEach((prop) => {
+                if (model[prop]) {
+                    model[prop].detectionSize = 3;
+                }
+            });
+            model.color = getRGBA(hoveredModel.color, 1);
+        }
+        return Object.assign(Object.assign({}, hoveredModel), point);
+    }
+    getResponderModelFromMap(responders) {
+        if (!responders.length) {
+            return [];
+        }
+        const propName = responders[0].name;
+        return this.tooltipRectMap[propName];
+    }
+    onMousemove({ responders }) {
+        if (this.eventDetectType === 'grouped') {
+            const models = this.getResponderModelFromMap(responders);
+            this.eventBus.emit('renderHoveredSeries', {
+                models: this.getRespondersWithTheme(models, 'select'),
+                name: this.name,
+                eventDetectType: this.eventDetectType,
+            });
+            this.activatedResponders = models;
+        }
+        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');
+    }
+    onClick({ responders }) {
+        if (this.selectable) {
+            let models;
+            if (this.eventDetectType === 'grouped') {
+                models = this.getRespondersWithTheme(this.getResponderModelFromMap(responders), 'select');
+            }
+            else {
+                models = this.getRespondersWithTheme(responders, 'select');
+            }
+            this.eventBus.emit('renderSelectedSeries', {
+                models,
+                name: this.name,
+                eventDetectType: this.eventDetectType,
+            });
+            this.eventBus.emit('needDraw');
+        }
+    }
+    renderSeriesModels(boxPlots) {
+        return boxPlots.reduce((acc, cur) => {
+            const { type, name } = cur;
+            if (type === 'boxPlot') {
+                acc.rect.push(Object.assign({ name }, cur.rect));
+                ['maximum', 'minimum', 'median', 'upperWhisker', 'lowerWhisker'].forEach((prop) => {
+                    acc.line.push(Object.assign({ name }, cur[prop]));
+                });
+            }
+            else {
+                acc.circle.push(Object.assign({}, cur));
+            }
+            return acc;
+        }, { rect: [], line: [], circle: [] });
+    }
+    makeBoxPlots(seriesData, renderOptions) {
+        const { ratio, barWidth } = renderOptions;
+        const boxPlotModels = [];
+        const seriesLength = seriesData.length;
+        const { dot } = this.theme;
+        seriesData.forEach(({ outliers, data, name, color }, seriesIndex) => {
+            const seriesColor = this.getSeriesColor(name, color);
+            ((data !== null && data !== void 0 ? data : [])).forEach((datum, dataIndex) => {
+                if (!isNull(datum)) {
+                    const startX = this.getStartX(seriesIndex, dataIndex, renderOptions, seriesLength);
+                    const rect = this.getRect(datum, startX, seriesColor, renderOptions);
+                    boxPlotModels.push(Object.assign(Object.assign({ type: 'boxPlot', color: seriesColor, name,
+                        rect, median: this.getMedian(datum, startX, seriesColor, renderOptions), minimum: this.getMinimum(datum, startX, seriesColor, renderOptions), maximum: this.getMaximum(datum, startX, seriesColor, renderOptions) }, this.getWhisker(datum, startX, seriesColor, renderOptions, rect)), { index: dataIndex, boxPlotDetection: {
+                            x: startX,
+                            width: barWidth,
+                        } }));
+                }
+            });
+            const { color: dotColor, radius, borderColor, borderWidth, useSeriesColor, } = dot;
+            ((outliers !== null && outliers !== void 0 ? outliers : [])).forEach((datum) => {
+                const [dataIndex, value] = datum;
+                const startX = this.getStartX(seriesIndex, dataIndex, renderOptions, seriesLength);
+                boxPlotModels.push({
+                    type: 'circle',
+                    name,
+                    x: startX + barWidth / 2,
+                    y: this.getYPos(value, ratio),
+                    radius: radius,
+                    style: [{ strokeStyle: (borderColor !== null && borderColor !== void 0 ? borderColor : seriesColor), lineWidth: borderWidth }],
+                    color: useSeriesColor ? seriesColor : dotColor,
+                    index: dataIndex,
+                });
+            });
+        });
+        return boxPlotModels;
+    }
+    makeTooltipModel(seriesData, categories) {
+        const tooltipData = [];
+        seriesData.forEach(({ outliers, data, name, color }) => {
+            ((data !== null && data !== void 0 ? data : [])).forEach((datum, dataIndex) => {
+                if (!isNull(datum)) {
+                    const boxPlotData = [...datum].reverse();
+                    tooltipData.push({
+                        label: name,
+                        color: color,
+                        value: [
+                            'Maximum',
+                            'Upper Quartile',
+                            'Median',
+                            'Lower Quartile',
+                            'Minimum',
+                        ].reduce((acc, title, index) => {
+                            const value = boxPlotData[index];
+                            return isNull(value) ? acc : [...acc, { title, value }];
+                        }, []),
+                        category: categories[dataIndex],
+                        templateType: 'boxPlot',
+                    });
+                }
+            });
+            ((outliers !== null && outliers !== void 0 ? outliers : [])).forEach((datum) => {
+                if (!isNull(datum)) {
+                    const [dataIndex, dataValue] = datum;
+                    tooltipData.push({
+                        label: name,
+                        color: color,
+                        value: [{ title: 'Outlier', value: dataValue }],
+                        category: categories[dataIndex],
+                        templateType: 'boxPlot',
+                    });
+                }
+            });
+        });
+        return tooltipData;
+    }
+    getStartX(seriesIndex, dataIndex, renderOptions, seriesLength) {
+        const { tickDistance, barWidth } = renderOptions;
+        const padding = getPadding(tickDistance, barWidth, seriesLength);
+        return dataIndex * tickDistance + (seriesIndex + 1) * padding + barWidth * seriesIndex;
+    }
+    getYPos(value, ratio, lineWidth) {
+        return isNumber(lineWidth)
+            ? crispPixel(this.rect.height - value * ratio, lineWidth)
+            : this.rect.height - value * ratio;
+    }
+    getBarWidths(tickDistance, seriesLength) {
+        const { barWidth: barThemeWidth, barWidthRatios } = this.theme;
+        const { barRatio, minMaxBarRatio } = barWidthRatios;
+        const defaultBarWidth = Math.max((tickDistance - getBoxTypeSeriesPadding(tickDistance) * (2 + (seriesLength - 1))) /
+            seriesLength, MIN_BAR_WIDTH);
+        const barWidth = barThemeWidth
+            ? calculateSizeWithPercentString(tickDistance / seriesLength, barThemeWidth)
+            : defaultBarWidth;
+        return {
+            barWidth: barWidth * barRatio,
+            minMaxBarWidth: barWidth * minMaxBarRatio,
+        };
+    }
+    getRespondersWithTheme(responders, type) {
+        const { color, rect, dot, line, shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur, } = this.theme[type];
+        const { whisker, median, maximum, minimum } = line;
+        const { color: dotColor, radius, borderColor, borderWidth, useSeriesColor, } = dot;
+        return responders.map((m) => {
+            const { type: modelType, data } = m;
+            let seriesColor = m.color;
+            let model;
+            if (modelType === 'circle') {
+                seriesColor = data.color;
+                model = Object.assign(Object.assign({}, m), { radius, color: useSeriesColor ? seriesColor : dotColor, style: [
+                        { strokeStyle: getDefaultColor(seriesColor, borderColor), lineWidth: borderWidth },
+                    ] });
+            }
+            else {
+                const { rect: seriesRect, upperWhisker, lowerWhisker, median: seriesMedian, maximum: seriesMaximum, minimum: seriesMinimum, } = m;
+                model = Object.assign(Object.assign({}, m), { rect: Object.assign(Object.assign({}, seriesRect), { color: (color !== null && color !== void 0 ? color : getRGBA(seriesColor, 1)), thickness: rect.borderWidth, borderColor: rect.borderColor, style: [{ shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur }] }), upperWhisker: Object.assign(Object.assign({}, upperWhisker), { strokeStyle: getDefaultColor(seriesColor, whisker.color), lineWidth: whisker.lineWidth }), lowerWhisker: Object.assign(Object.assign({}, lowerWhisker), { strokeStyle: getDefaultColor(seriesColor, whisker.color), lineWidth: whisker.lineWidth }), median: Object.assign(Object.assign({}, seriesMedian), { strokeStyle: getDefaultColor(seriesColor, median.color), lineWidth: median.lineWidth }), maximum: Object.assign(Object.assign({}, seriesMaximum), { strokeStyle: getDefaultColor(seriesColor, maximum.color), lineWidth: maximum.lineWidth }), minimum: Object.assign(Object.assign({}, seriesMinimum), { strokeStyle: getDefaultColor(seriesColor, minimum.color), lineWidth: minimum.lineWidth }) });
+            }
+            return model;
+        });
+    }
+    getRect(datum, startX, seriesColor, { barWidth, ratio }) {
+        const { rect } = this.theme;
+        const [, lowerQuartile, , highQuartile] = datum;
+        return {
+            type: 'rect',
+            x: startX,
+            y: this.getYPos(highQuartile, ratio),
+            width: barWidth,
+            height: (highQuartile - lowerQuartile) * ratio,
+            thickness: rect.borderWidth,
+            borderColor: rect.borderColor,
+            color: seriesColor,
+        };
+    }
+    getWhisker(datum, startX, seriesColor, { barWidth, ratio }, rect) {
+        const [minimum, , , , maximum] = datum;
+        const { lineWidth, color } = this.theme.line.whisker;
+        const x = crispPixel(startX + barWidth / 2, lineWidth);
+        return {
+            upperWhisker: {
+                type: 'line',
+                x,
+                y: this.getYPos(maximum, ratio, lineWidth),
+                x2: x,
+                y2: rect.y,
+                strokeStyle: (color !== null && color !== void 0 ? color : seriesColor),
+                lineWidth,
+            },
+            lowerWhisker: {
+                type: 'line',
+                x,
+                y: this.getYPos(minimum, ratio, lineWidth),
+                x2: x,
+                y2: crispPixel(rect.y + rect.height, lineWidth),
+                strokeStyle: (color !== null && color !== void 0 ? color : seriesColor),
+                lineWidth,
+            },
+        };
+    }
+    getMedian(datum, startX, seriesColor, { barWidth, ratio }) {
+        const median = datum[2];
+        const { lineWidth, color } = this.theme.line.median;
+        return {
+            type: 'line',
+            x: crispPixel(startX, lineWidth),
+            y: this.getYPos(median, ratio, lineWidth),
+            x2: crispPixel(startX + barWidth, lineWidth),
+            y2: this.getYPos(median, ratio, lineWidth),
+            strokeStyle: (color !== null && color !== void 0 ? color : seriesColor),
+            lineWidth: lineWidth,
+        };
+    }
+    getMinimum(datum, startX, seriesColor, { barWidth, ratio, minMaxBarWidth }) {
+        const minimum = datum[0];
+        const { lineWidth, color } = this.theme.line.minimum;
+        return {
+            type: 'line',
+            x: crispPixel(startX + (barWidth - minMaxBarWidth) / 2, lineWidth),
+            y: this.getYPos(minimum, ratio, lineWidth),
+            x2: crispPixel(startX + (barWidth - minMaxBarWidth) / 2 + minMaxBarWidth, lineWidth),
+            y2: this.getYPos(minimum, ratio, lineWidth),
+            strokeStyle: (color !== null && color !== void 0 ? color : seriesColor),
+            lineWidth: lineWidth,
+        };
+    }
+    getMaximum(datum, startX, seriesColor, { barWidth, ratio, minMaxBarWidth }) {
+        const maximum = datum[4];
+        const { lineWidth, color } = this.theme.line.maximum;
+        return {
+            type: 'line',
+            x: crispPixel(startX + (barWidth - minMaxBarWidth) / 2, lineWidth),
+            y: this.getYPos(maximum, ratio, lineWidth),
+            x2: crispPixel(startX + (barWidth - minMaxBarWidth) / 2 + minMaxBarWidth, lineWidth),
+            y2: this.getYPos(maximum, ratio, lineWidth),
+            strokeStyle: (color !== null && color !== void 0 ? color : seriesColor),
+            lineWidth: lineWidth,
+        };
+    }
+    getSeriesColor(seriesName, seriesColor) {
+        const { select, areaOpacity } = this.theme;
+        const active = this.activeSeriesMap[seriesName];
+        const selected = Object.values(this.activeSeriesMap).some((elem) => !elem);
+        const selectedOpacity = active ? select.areaOpacity : select.restSeries.areaOpacity;
+        const opacity = selected ? selectedOpacity : areaOpacity;
+        return getRGBA(seriesColor, opacity);
+    }
+}

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

@@ -0,0 +1,211 @@
+import Component from "./component";
+import { RectModel, ClipRectAreaModel, BoxSeriesModels, StackTotalModel, RectResponderModel, MouseEventType } from "../../types/components/series";
+import { ChartState, BoxType, ValueAxisData, CenterYAxisData, Series, Axes, Scale } from "../../types/store/store";
+import { BoxSeriesType, BoxSeriesDataType, BarChartOptions, ColumnChartOptions, Rect, RangeDataType, BoxTypeEventDetectType, ColumnLineChartOptions, ColumnLineChartSeriesOptions, BoxSeriesOptions } from "../../types/options";
+import { TooltipData } from "../../types/components/tooltip";
+import { RespondersThemeType } from "../helpers/responders";
+import { RectDirection, RectDataLabel } from "../../types/components/dataLabels";
+import { BoxChartSeriesTheme } from "../../types/theme";
+import { SelectSeriesHandlerParams } from "../charts/chart";
+import { SelectSeriesInfo } from "../../types/charts";
+export declare enum SeriesDirection {
+    POSITIVE = 0,
+    NEGATIVE = 1,
+    BOTH = 2
+}
+declare type RenderOptions = {
+    tickDistance: number;
+    min: number;
+    max: number;
+    diverging: boolean;
+    ratio?: number;
+    hasNegativeValue: boolean;
+    seriesDirection: SeriesDirection;
+    defaultPadding: number;
+};
+export declare function isLeftBottomSide(seriesIndex: number): boolean;
+export default class BoxSeries extends Component {
+    models: BoxSeriesModels;
+    drawModels: BoxSeriesModels;
+    responders: RectResponderModel[];
+    activatedResponders: RectResponderModel[];
+    isBar: boolean;
+    valueAxis: string;
+    labelAxis: string;
+    anchorSizeKey: string;
+    offsetSizeKey: string;
+    basePosition: number;
+    leftBasePosition: number;
+    rightBasePosition: number;
+    isRangeData: boolean;
+    offsetKey: string;
+    eventDetectType: BoxTypeEventDetectType;
+    tooltipRectMap: RectResponderModel[][];
+    theme: Required<BoxChartSeriesTheme>;
+    initialize({ name, stackChart }: {
+        name: BoxType;
+        stackChart: boolean;
+    }): void;
+    initializeFields(name: BoxType): void;
+    initUpdate(delta: number): void;
+    initUpdateRangeData(delta: number): void;
+    initUpdateClipRect(delta: number): void;
+    initUpdateConnector(delta: number): void;
+    protected setEventDetectType(series: Series, options?: BarChartOptions | ColumnChartOptions): void;
+    protected getOptions(chartOptions: BarChartOptions | ColumnChartOptions | ColumnLineChartOptions): {
+        series?: BoxSeriesOptions | undefined;
+        yAxis?: import("../../types/options").BarTypeYAxisOption | import("../../types/options").BarTypeYAxisOption[] | undefined;
+        plot?: import("../../types/options").PlotOptions | undefined;
+        legend?: import("../../types/options").NormalLegendOptions | undefined;
+        theme?: import("../../types/theme").BoxChartThemeOptions | undefined;
+        chart?: import("../../types/options").BaseChartOptions | undefined;
+        lang?: import("../../types/options").LangOptions | undefined;
+        xAxis?: import("../../types/options").BaseXAxisOptions | undefined;
+        exportMenu?: import("../../types/options").ExportMenuOptions | undefined;
+        tooltip?: import("../../types/options").BaseTooltipOptions | undefined;
+        responsive?: import("../../types/options").ResponsiveOptions | undefined;
+        usageStatistics?: boolean | undefined;
+    } | {
+        series?: import("../../types/options").ColumnChartBoxSeriesOptions | undefined;
+        yAxis?: import("../../types/options").YAxisOptions | import("../../types/options").YAxisOptions[] | undefined;
+        plot?: import("../../types/options").PlotOptions | undefined;
+        legend?: import("../../types/options").NormalLegendOptions | undefined;
+        theme?: import("../../types/theme").BoxChartThemeOptions | undefined;
+        chart?: import("../../types/options").BaseChartOptions | undefined;
+        lang?: import("../../types/options").LangOptions | undefined;
+        xAxis?: import("../../types/options").BaseXAxisOptions | undefined;
+        exportMenu?: import("../../types/options").ExportMenuOptions | undefined;
+        tooltip?: import("../../types/options").BaseTooltipOptions | undefined;
+        responsive?: import("../../types/options").ResponsiveOptions | undefined;
+        usageStatistics?: boolean | undefined;
+    } | {
+        series?: ColumnLineChartSeriesOptions | undefined;
+        plot?: import("../../types/options").LineTypePlotOptions | undefined;
+        yAxis?: import("../../types/options").YAxisOptions | import("../../types/options").YAxisOptions[] | undefined;
+        legend?: import("../../types/options").NormalLegendOptions | undefined;
+        theme?: import("../../types/theme").ColumnLineChartThemeOptions | undefined;
+        chart?: import("../../types/options").BaseChartOptions | undefined;
+        lang?: import("../../types/options").LangOptions | undefined;
+        xAxis?: import("../../types/options").BaseXAxisOptions | undefined;
+        exportMenu?: import("../../types/options").ExportMenuOptions | undefined;
+        tooltip?: import("../../types/options").BaseTooltipOptions | undefined;
+        responsive?: import("../../types/options").ResponsiveOptions | undefined;
+        usageStatistics?: boolean | undefined;
+    };
+    render<T extends BarChartOptions | ColumnChartOptions | ColumnLineChartOptions>(chartState: ChartState<T>, computed: any): void;
+    protected getScaleData(scale: Scale): any;
+    protected getBoxSeriesResponders(seriesModels: RectModel[], tooltipData: TooltipData[], axes: Axes, categories: string[]): RectResponderModel[] | {
+        data: TooltipData;
+        type: "rect";
+        color: string;
+        borderColor?: string | undefined;
+        style?: import("../../types/components/series").StyleProp<import("../../types/components/series").RectStyle, "shadow"> | undefined;
+        thickness?: number | undefined;
+        value?: number | RangeDataType<number> | null | undefined;
+        name?: string | undefined;
+        index?: number | undefined;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }[];
+    protected makeTooltipRectMap(seriesModels: RectModel[], tooltipDataArr: TooltipData[]): RectResponderModel[][];
+    protected renderClipRectAreaModel(): ClipRectAreaModel;
+    protected initClipRect(clipRect: ClipRectAreaModel): ClipRectAreaModel;
+    renderSeriesModel(seriesData: BoxSeriesType<number | (RangeDataType<number> & number)>[], renderOptions: RenderOptions): RectModel[];
+    protected renderHoveredSeriesModel(seriesModel: RectModel[]): RectModel[];
+    makeHoveredSeriesModel(data: RectModel): RectModel;
+    getRectModelsFromRectResponders(responders: RectResponderModel[]): RectResponderModel[];
+    protected getGroupedRect(responders: RectResponderModel[], type: 'hover' | 'select'): {
+        color: string;
+        type: "rect";
+        borderColor?: string | undefined;
+        style?: import("../../types/components/series").StyleProp<import("../../types/components/series").RectStyle, "shadow"> | undefined;
+        thickness?: number | undefined;
+        value?: number | RangeDataType<number> | null | undefined;
+        name?: string | undefined;
+        index?: number | undefined;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        data?: ({
+            name?: string | undefined;
+        } & Partial<TooltipData>) | undefined;
+        label?: string | undefined;
+        viewLabel?: string | undefined;
+        checked?: boolean | undefined;
+        active?: boolean | undefined;
+        chartType?: "line" | "bar" | "column" | "area" | "bubble" | "radar" | "pie" | "boxPlot" | "bullet" | "scatter" | "heatmap" | "radialBar" | "gauge" | "treemap" | undefined;
+        iconType?: "line" | "rect" | "spectrum" | "circle" | "triangle" | "pentagon" | "star" | "diamond" | "cross" | "hexagon" | undefined;
+        useScatterChartIcon?: boolean | undefined;
+        rowIndex?: number | undefined;
+        columnIndex?: number | undefined;
+        colorIndex?: number | undefined;
+        colorByCategories?: boolean | undefined;
+    }[];
+    onMousemoveGroupedType(responders: RectResponderModel[]): void;
+    onMousemove({ responders }: {
+        responders: RectModel[];
+    }): void;
+    private makeTooltipData;
+    private getTooltipValue;
+    protected getBasePosition({ labels, tickCount, zeroPosition }: ValueAxisData): number;
+    getDivergingBasePosition(centerYAxis: CenterYAxisData): number[];
+    protected getOffsetSize(): number;
+    getValueRatio(min: number, max: number, size: number): number;
+    makeBarLength(value: BoxSeriesDataType, renderOptions: Pick<RenderOptions, 'min' | 'max' | 'ratio'>): number | null;
+    protected getBarLength(value: number, ratio: number): number;
+    getStartPositionWithRangeValue(value: RangeDataType<number>, barLength: number, renderOptions: RenderOptions): number;
+    getStartPosition(barLength: number, value: Exclude<BoxSeriesDataType, null>, renderOptions: RenderOptions, isLBSideWithDiverging: boolean): number;
+    private getStartPosOnRightTopSide;
+    private getStartPosOnLeftBottomSide;
+    protected getAdjustedRect(seriesPosition: number, dataPosition: number, barLength: number, columnWidth: number): Rect;
+    getColumnWidth(renderOptions: RenderOptions, seriesLength: number, validDiverging?: boolean): number;
+    protected getSeriesDirection(labels: string[]): SeriesDirection;
+    protected getTickPositionIfNotZero(tickPositions: number[], direction: SeriesDirection): number;
+    makeDataLabel(rect: RectModel, centerYAxis?: CenterYAxisData): RectDataLabel;
+    makeDataLabelRangeData(rect: RectModel): RectDataLabel[];
+    getDataLabelRangeDataDirection(isEven: boolean): import("../../types/components/axis").ArrowDirection;
+    getDataLabelDirection(rect: RectModel | StackTotalModel, centerYAxis?: CenterYAxisData): RectDirection;
+    getOffsetSizeWithDiverging(centerYAxis: CenterYAxisData): number;
+    onClick({ responders }: MouseEventType): void;
+    onMouseoutComponent: () => void;
+    getRespondersWithTheme(responders: RectResponderModel[], type: RespondersThemeType): {
+        color: string | undefined;
+        thickness: number | undefined;
+        borderColor: string | undefined;
+        style: {
+            shadowBlur: number | undefined;
+            shadowColor: string | undefined;
+            shadowOffsetX: number | undefined;
+            shadowOffsetY: number | undefined;
+        }[];
+        type: "rect";
+        value?: number | RangeDataType<number> | null | undefined;
+        name?: string | undefined;
+        index?: number | undefined;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        data?: ({
+            name?: string | undefined;
+        } & Partial<TooltipData>) | undefined;
+        label?: string | undefined;
+        viewLabel?: string | undefined;
+        checked?: boolean | undefined;
+        active?: boolean | undefined;
+        chartType?: "line" | "bar" | "column" | "area" | "bubble" | "radar" | "pie" | "boxPlot" | "bullet" | "scatter" | "heatmap" | "radialBar" | "gauge" | "treemap" | undefined;
+        iconType?: "line" | "rect" | "spectrum" | "circle" | "triangle" | "pentagon" | "star" | "diamond" | "cross" | "hexagon" | undefined;
+        useScatterChartIcon?: boolean | undefined;
+        rowIndex?: number | undefined;
+        columnIndex?: number | undefined;
+        colorIndex?: number | undefined;
+        colorByCategories?: boolean | undefined;
+    }[];
+    getSeriesColor(name: string, color: string): string;
+    selectSeries: (info: SelectSeriesHandlerParams<BarChartOptions | ColumnChartOptions>) => void;
+    showTooltip: (info: SelectSeriesInfo) => void;
+}
+export {};