@techie_doubts/tui.chart.2026 4.6.1

package/dist/esm/component/radarSeries.js

@@ -0,0 +1,222 @@
+import Component from "./component";
+import { getActiveSeriesMap } from "../helpers/legend";
+import { getRadialPosition, calculateDegreeToRadian, DEGREE_360 } from "../helpers/sector";
+import { getRGBA } from "../helpers/color";
+import { getLimitOnAxis } from "../helpers/axes";
+import { radarDefault } from "../helpers/theme";
+import { isNumber, isNull } from "../helpers/utils";
+import { message } from "../message";
+import { makeLabelsFromLimit } from "../helpers/calculator";
+const NONE_AREA_OPACITY = 0;
+const seriesOpacity = {
+    INACTIVE: 0.2,
+    ACTIVE: 1,
+};
+export default class RadarSeries extends Component {
+    constructor() {
+        super(...arguments);
+        this.models = { area: [], line: [], dot: [] };
+        this.activatedResponders = [];
+        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.radar.data[seriesIndex];
+            const model = this.responders.filter(({ name: dataName }) => dataName === name)[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 = ({ index, seriesIndex, state }) => {
+            if (!isNumber(index) || !isNumber(seriesIndex)) {
+                return;
+            }
+            const { name } = state.series.radar.data[seriesIndex];
+            const models = [this.responders.filter(({ name: dataName }) => dataName === name)[index]];
+            if (!models.length) {
+                return;
+            }
+            this.eventBus.emit('renderHoveredSeries', {
+                models: this.getRespondersWithTheme(models, 'hover'),
+                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 = 'radar';
+        this.eventBus.on('selectSeries', this.selectSeries);
+        this.eventBus.on('showTooltip', this.showTooltip);
+        this.eventBus.on('hideTooltip', this.onMouseoutComponent);
+    }
+    render(state) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const { layout, radialAxes, series, legend, options, theme, scale } = state;
+        if (!series.radar) {
+            throw new Error(message.noDataError(this.name));
+        }
+        this.theme = theme.series.radar;
+        this.rect = layout.plot;
+        this.activeSeriesMap = getActiveSeriesMap(legend);
+        this.selectable = this.getSelectableOption(options);
+        const categories = state.categories;
+        const { axisSize, centerX, centerY } = radialAxes.verticalAxis;
+        const { limit, stepSize } = scale.verticalAxis;
+        const labels = makeLabelsFromLimit(limit, stepSize);
+        const { min, max } = getLimitOnAxis(labels);
+        const renderOptions = {
+            categories,
+            degree: DEGREE_360 / categories.length,
+            centerX,
+            centerY,
+            showArea: (_c = (_b = (_a = options) === null || _a === void 0 ? void 0 : _a.series) === null || _b === void 0 ? void 0 : _b.showArea, (_c !== null && _c !== void 0 ? _c : false)),
+            ratio: axisSize / (max - min),
+        };
+        const radarData = (_d = series.radar) === null || _d === void 0 ? void 0 : _d.data;
+        const radarPointsData = this.makeRadarPointsData(radarData, renderOptions);
+        const circleModel = this.renderDotModels(radarPointsData);
+        this.models.area = ((_f = (_e = options) === null || _e === void 0 ? void 0 : _e.series) === null || _f === void 0 ? void 0 : _f.showArea) ? this.renderAreaModels(radarPointsData) : [];
+        this.models.line = this.renderLineModels(radarPointsData);
+        this.models.dot = ((_h = (_g = options) === null || _g === void 0 ? void 0 : _g.series) === null || _h === void 0 ? void 0 : _h.showDot) ? circleModel : [];
+        if (!this.drawModels) {
+            this.drawModels = {
+                area: this.initDrawModels('area', centerX, centerY),
+                line: this.initDrawModels('line', centerX, centerY),
+                dot: this.models.dot.map((m) => (Object.assign(Object.assign({}, m), { x: centerX, y: centerY }))),
+            };
+        }
+        const tooltipDataArr = this.makeTooltipModel(circleModel, categories);
+        this.responders = circleModel.map((m, index) => (Object.assign(Object.assign({}, m), { data: tooltipDataArr[index], color: getRGBA(m.color, 1) })));
+    }
+    initDrawModels(modelName, centerX, centerY) {
+        return this.models[modelName].map((m) => {
+            var _a;
+            return (Object.assign(Object.assign({}, m), { distances: (_a = m.distances) === null || _a === void 0 ? void 0 : _a.map(() => 0), points: m.points.map(() => ({ x: centerX, y: centerY })) }));
+        });
+    }
+    makeTooltipModel(circleModel, categories) {
+        return circleModel.map(({ name, color, value, index }) => ({
+            label: name,
+            color,
+            value,
+            category: categories[index],
+        }));
+    }
+    getRespondersWithTheme(responders, type) {
+        const { radius, borderWidth, borderColor, color } = this.theme[type].dot;
+        return responders.map((responder) => {
+            const modelColor = (color !== null && color !== void 0 ? color : responder.color);
+            return Object.assign(Object.assign({}, responder), { radius, color: modelColor, borderColor: (borderColor !== null && borderColor !== void 0 ? borderColor : getRGBA(modelColor, 0.5)), borderWidth });
+        });
+    }
+    onClick({ responders }) {
+        if (this.selectable) {
+            this.eventBus.emit('renderSelectedSeries', {
+                models: this.getRespondersWithTheme(responders, 'select'),
+                name: this.name,
+            });
+            this.eventBus.emit('needDraw');
+        }
+    }
+    onMousemove({ responders }) {
+        this.eventBus.emit('renderHoveredSeries', {
+            models: this.getRespondersWithTheme(responders, 'hover'),
+            name: this.name,
+        });
+        this.activatedResponders = responders;
+        this.eventBus.emit('seriesPointHovered', { models: this.activatedResponders, name: this.name });
+        this.eventBus.emit('needDraw');
+    }
+    makeRadarPointsData(seriesData, renderOptions) {
+        const { centerX, centerY, degree, ratio, showArea } = renderOptions;
+        return seriesData.map(({ data, color: seriesColor, name }) => {
+            const radarPoints = data.reduce((acc, value, index) => {
+                if (isNull(value)) {
+                    return {
+                        distances: [...acc.distances, 0],
+                        linePoints: [...acc.linePoints, null],
+                        areaPoints: [...acc.areaPoints, { x: centerX, y: centerY }],
+                    };
+                }
+                const distance = value * ratio;
+                const point = getRadialPosition(centerX, centerY, distance, calculateDegreeToRadian(degree * index));
+                return {
+                    distances: [...acc.distances, distance],
+                    linePoints: [...acc.linePoints, point],
+                    areaPoints: [...acc.areaPoints, point],
+                };
+            }, { linePoints: [], distances: [], areaPoints: [] });
+            if (!isNull(data[0]) && !isNull(data[data.length - 1])) {
+                radarPoints.linePoints.push(radarPoints.linePoints[0]);
+                radarPoints.areaPoints.push(radarPoints.areaPoints[0]);
+            }
+            return Object.assign(Object.assign({ name,
+                seriesColor,
+                data }, radarPoints), this.getSeriesColor(showArea, seriesColor, name));
+        });
+    }
+    renderAreaModels(radarPointsData) {
+        return radarPointsData.map(({ distances, areaPoints, name, fillColor, seriesColor }) => ({
+            type: 'areaPoints',
+            name,
+            distances,
+            points: areaPoints,
+            fillColor,
+            color: getRGBA(seriesColor, 0),
+            lineWidth: 0,
+        }));
+    }
+    renderLineModels(radarPointsData) {
+        const { lineWidth, dashSegments } = this.theme;
+        return radarPointsData.map(({ distances, linePoints, name, lineColor }) => ({
+            type: 'linePoints',
+            lineWidth: (lineWidth !== null && lineWidth !== void 0 ? lineWidth : radarDefault.LINE_WIDTH),
+            name,
+            distances,
+            points: linePoints,
+            color: lineColor,
+            dashSegments,
+        }));
+    }
+    renderDotModels(radarPointsData) {
+        const { radius, color: dotColor } = this.theme.dot;
+        const result = [];
+        radarPointsData.forEach(({ linePoints, lineColor, name, data }, seriesIndex) => linePoints.slice(0, linePoints.length - 1).forEach((point, index) => {
+            var _a;
+            if (!isNull(point)) {
+                result.push(Object.assign(Object.assign({ type: 'circle' }, point), { radius, color: (dotColor !== null && dotColor !== void 0 ? dotColor : lineColor), style: [{ strokeStyle: 'rgba(0, 0, 0, 0)' }], name,
+                    seriesIndex,
+                    index, value: (_a = data) === null || _a === void 0 ? void 0 : _a[index] }));
+            }
+        }));
+        return result;
+    }
+    getSeriesColor(showArea, seriesColor, name) {
+        const active = this.activeSeriesMap[name];
+        const { select, areaOpacity } = this.theme;
+        const selected = Object.values(this.activeSeriesMap).some((elem) => !elem);
+        const color = getRGBA(seriesColor, active ? seriesOpacity.ACTIVE : seriesOpacity.INACTIVE);
+        let fillOpacity = NONE_AREA_OPACITY;
+        if (showArea) {
+            const selectedAreaOpacity = active ? select.areaOpacity : select.restSeries.areaOpacity;
+            fillOpacity = selected ? selectedAreaOpacity : areaOpacity;
+        }
+        return { lineColor: color, fillColor: getRGBA(color, fillOpacity) };
+    }
+}

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

@@ -0,0 +1,26 @@
+import Component from "./component";
+import { ChartState, Options, CircularAxisData, VerticalAxisData } from "../../types/store/store";
+import { RadialAxisModels, ArcModel } from "../../types/components/radialAxis";
+import { RectModel, CircleModel } from "../../types/components/series";
+import { CircularAxisTheme, VerticalAxisTheme } from "../../types/theme";
+import { BubbleLabelModel, LabelModel, LineModel } from "../../types/components/axis";
+export default class RadialAxis extends Component {
+    models: RadialAxisModels;
+    verticalAxisTheme: Required<VerticalAxisTheme>;
+    circularAxisTheme: Required<CircularAxisTheme>;
+    initialize(initParam?: {
+        name: 'radial' | 'gauge';
+    }): void;
+    render({ layout, radialAxes, theme, series }: ChartState<Options>): void;
+    getBubbleShadowStyle(): {
+        shadowColor: string;
+        shadowOffsetX: number | undefined;
+        shadowOffsetY: number | undefined;
+        shadowBlur: number | undefined;
+    }[] | null;
+    renderVerticalAxisLabel(verticalAxis: VerticalAxisData): BubbleLabelModel[];
+    renderDotModel(circularAxis: CircularAxisData): RectModel[];
+    renderCircularAxisLabel(circularAxis: CircularAxisData): LabelModel[];
+    renderTick(circularAxis: CircularAxisData): LineModel[];
+    renderArcLine(circularAxis: CircularAxisData): ArcModel[] | CircleModel[];
+}

package/dist/esm/component/radialAxis.js

@@ -0,0 +1,210 @@
+import Component from "./component";
+import { calculateDegreeToRadian, getRadialPosition, DEGREE_360, DEGREE_NEGATIVE_90, calculateValidAngle, } from "../helpers/sector";
+import { getTitleFontString } from "../helpers/style";
+import { includes } from "../helpers/utils";
+import { isNoData } from "../helpers/validation";
+const RECT_SIZE = 4;
+const HALF_TICK = 5;
+function hasNeedRender(index, pointOnColumn, labelInterval, innerRadius, outerRadius) {
+    return !pointOnColumn && index === 0
+        ? false
+        : !(index % labelInterval) &&
+            ((pointOnColumn && innerRadius <= outerRadius) ||
+                (!pointOnColumn && innerRadius < outerRadius));
+}
+export default class RadialAxis extends Component {
+    constructor() {
+        super(...arguments);
+        this.models = {
+            verticalAxisLabel: [],
+            circularAxisLabel: [],
+            dot: [],
+            line: [],
+            tick: [],
+        };
+    }
+    initialize(initParam) {
+        var _a, _b;
+        this.type = 'axis';
+        this.name = (_b = (_a = initParam) === null || _a === void 0 ? void 0 : _a.name, (_b !== null && _b !== void 0 ? _b : 'radial'));
+    }
+    render({ layout, radialAxes, theme, series }) {
+        this.isShow = !isNoData(series);
+        this.rect = layout.plot;
+        if (!radialAxes) {
+            return;
+        }
+        this.circularAxisTheme = theme.circularAxis;
+        const { circularAxis, verticalAxis } = radialAxes;
+        if (verticalAxis) {
+            this.verticalAxisTheme = theme.verticalAxis;
+            this.models.verticalAxisLabel = this.renderVerticalAxisLabel(verticalAxis);
+        }
+        this.models.circularAxisLabel = this.renderCircularAxisLabel(circularAxis);
+        if (this.name === 'gauge') {
+            this.models.line = this.renderArcLine(circularAxis);
+            this.models.tick = this.renderTick(circularAxis);
+        }
+        else {
+            this.models.dot = this.renderDotModel(circularAxis);
+        }
+    }
+    getBubbleShadowStyle() {
+        const { visible, shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur, } = this.verticalAxisTheme.label.textBubble;
+        return visible && shadowColor
+            ? [
+                {
+                    shadowColor,
+                    shadowOffsetX,
+                    shadowOffsetY,
+                    shadowBlur,
+                },
+            ]
+            : null;
+    }
+    renderVerticalAxisLabel(verticalAxis) {
+        const { radius: { ranges, outer }, label: { labels, interval, maxWidth, maxHeight, margin, align }, angle: { start }, pointOnColumn, centerX, centerY, tickDistance, } = verticalAxis;
+        const labelAdjustment = pointOnColumn ? tickDistance / 2 : 0;
+        const font = getTitleFontString(this.verticalAxisTheme.label);
+        const { visible: textBubbleVisible, backgroundColor, borderRadius, borderColor, borderWidth, paddingX, paddingY, } = this.verticalAxisTheme.label.textBubble;
+        const labelPaddingX = textBubbleVisible ? paddingX : 0;
+        const labelPaddingY = textBubbleVisible ? paddingY : 0;
+        const width = maxWidth + labelPaddingX * 2 - margin;
+        const height = maxHeight + labelPaddingY * 2;
+        const fontColor = this.verticalAxisTheme.label.color;
+        return ranges.reduce((acc, radius, index) => {
+            const { x, y } = getRadialPosition(centerX, centerY, radius - labelAdjustment, calculateDegreeToRadian(start));
+            const needRender = hasNeedRender(index, pointOnColumn, interval, radius, outer);
+            let posX = x + margin;
+            let labelPosX = x + margin + labelPaddingX;
+            if (align === 'center') {
+                posX = x - margin - width / 2;
+                labelPosX = x - margin;
+            }
+            else if (includes(['right', 'end'], align)) {
+                posX = x - margin - width;
+                labelPosX = x - margin - labelPaddingX;
+            }
+            return needRender
+                ? [
+                    ...acc,
+                    {
+                        type: 'bubbleLabel',
+                        rotationPosition: { x, y },
+                        radian: calculateDegreeToRadian(start, 0),
+                        bubble: {
+                            x: posX,
+                            y: y - height / 2,
+                            width,
+                            height,
+                            align,
+                            radius: borderRadius,
+                            fill: backgroundColor,
+                            lineWidth: borderWidth,
+                            strokeStyle: borderColor,
+                            style: this.getBubbleShadowStyle(),
+                        },
+                        label: {
+                            text: labels[index],
+                            x: labelPosX,
+                            y,
+                            style: [{ font, fillStyle: fontColor, textAlign: align, textBaseline: 'middle' }],
+                        },
+                    },
+                ]
+                : acc;
+        }, []);
+    }
+    renderDotModel(circularAxis) {
+        const { angle: { central, drawingStart }, label: { labels, interval }, radius: { outer }, centerX, centerY, clockwise, } = circularAxis;
+        const { dotColor } = this.circularAxisTheme;
+        return labels.reduce((acc, cur, index) => {
+            const startDegree = drawingStart + central * index * (clockwise ? 1 : -1);
+            const { x, y } = getRadialPosition(centerX, centerY, outer, calculateDegreeToRadian(calculateValidAngle(startDegree)));
+            return index % interval === 0
+                ? [
+                    ...acc,
+                    {
+                        type: 'rect',
+                        color: dotColor,
+                        width: RECT_SIZE,
+                        height: RECT_SIZE,
+                        x: x - RECT_SIZE / 2,
+                        y: y - RECT_SIZE / 2,
+                    },
+                ]
+                : acc;
+        }, []);
+    }
+    renderCircularAxisLabel(circularAxis) {
+        const { centerX, centerY, clockwise, label: { labels, interval, margin, maxHeight }, angle: { drawingStart, central }, radius: { outer }, } = circularAxis;
+        const radius = outer + (margin + maxHeight / 2) * (this.name === 'gauge' ? -1 : 1);
+        const labelTheme = this.circularAxisTheme.label;
+        const font = getTitleFontString(labelTheme);
+        const degree = central * (clockwise ? 1 : -1);
+        return labels.reduce((acc, text, index) => {
+            const startDegree = drawingStart + degree * index;
+            const validStartAngle = calculateValidAngle(startDegree);
+            return index % interval === 0
+                ? [
+                    ...acc,
+                    Object.assign({ type: 'label', style: [
+                            { textAlign: 'center', textBaseline: 'middle', font, fillStyle: labelTheme.color },
+                        ], text }, getRadialPosition(centerX, centerY, radius, calculateDegreeToRadian(validStartAngle))),
+                ]
+                : acc;
+        }, []);
+    }
+    renderTick(circularAxis) {
+        const { centerX, centerY, tickInterval, clockwise, angle: { central, drawingStart }, label: { labels }, radius: { outer }, } = circularAxis;
+        const { strokeStyle, lineWidth } = this.circularAxisTheme.tick;
+        return labels.reduce((acc, cur, index) => {
+            const startDegree = drawingStart + central * index * (clockwise ? 1 : -1);
+            const { x, y } = getRadialPosition(centerX, centerY, outer - HALF_TICK, calculateDegreeToRadian(calculateValidAngle(startDegree)));
+            const { x: x2, y: y2 } = getRadialPosition(centerX, centerY, outer + HALF_TICK, calculateDegreeToRadian(calculateValidAngle(startDegree)));
+            return index % tickInterval === 0
+                ? [
+                    ...acc,
+                    {
+                        type: 'line',
+                        lineWidth,
+                        strokeStyle,
+                        x,
+                        y,
+                        x2,
+                        y2,
+                    },
+                ]
+                : acc;
+        }, []);
+    }
+    renderArcLine(circularAxis) {
+        const { centerX, centerY, clockwise, angle: { start, end, total }, radius: { outer }, } = circularAxis;
+        const { strokeStyle, lineWidth } = this.circularAxisTheme;
+        return total === DEGREE_360
+            ? [
+                {
+                    type: 'circle',
+                    x: centerX,
+                    y: centerY,
+                    radius: outer,
+                    borderWidth: lineWidth,
+                    borderColor: strokeStyle,
+                    color: 'rgba(0, 0, 0, 0)',
+                },
+            ]
+            : [
+                {
+                    type: 'arc',
+                    borderWidth: lineWidth,
+                    borderColor: strokeStyle,
+                    x: centerX,
+                    y: centerY,
+                    angle: { start, end },
+                    drawingStartAngle: DEGREE_NEGATIVE_90,
+                    radius: outer,
+                    clockwise,
+                },
+            ];
+    }
+}

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

@@ -0,0 +1,111 @@
+import Component from "./component";
+import { SectorResponderModel, RadialBarResponderModel, RadialBarSectorModel, RadialBarSeriesModels } from "../../types/components/series";
+import { RadialBarChartSeriesTheme, GroupedSector } from "../../types/theme";
+import { ChartState, CircularAxisData } from "../../types/store/store";
+import { RadialBarChartOptions, CircleTypeEventDetectType } from "../../types/options";
+import { SelectSeriesHandlerParams } from "../charts/chart";
+import { RespondersThemeType } from "../helpers/responders";
+import { TooltipData } from "../../types/components/tooltip";
+import { SelectSeriesInfo } from "../../types/charts";
+export default class RadialBarSeries extends Component {
+    models: RadialBarSeriesModels;
+    drawModels: RadialBarSeriesModels;
+    responders: RadialBarResponderModel[];
+    activatedResponders: RadialBarResponderModel[];
+    eventDetectType: CircleTypeEventDetectType;
+    tooltipSectorMap: Record<number, SectorResponderModel[]>;
+    theme: Required<RadialBarChartSeriesTheme>;
+    circularAxis: CircularAxisData;
+    initUpdate(delta: number): void;
+    syncEndAngle(index: number, category: string): void;
+    initialize(): void;
+    render(chartState: ChartState<RadialBarChartOptions>): void;
+    private initDrawModels;
+    private makeResponders;
+    private makeTooltipSectorMap;
+    private setEventDetectType;
+    private getBarWidth;
+    private makeRenderOptions;
+    private makeSeriesModelData;
+    getSeriesColor(name: string, color: string): string;
+    makeTooltipData(seriesModels: RadialBarSectorModel[], categories: string[]): TooltipData[];
+    makeTooltipResponder(responders: SectorResponderModel[]): {
+        x: number;
+        y: number;
+        data: TooltipData;
+        type: "sector";
+        color: string;
+        degree: {
+            start: number;
+            end: number;
+        };
+        radius: {
+            inner: number;
+            outer: number;
+        };
+        name?: string | undefined;
+        value?: number | undefined;
+        style?: import("../../types/components/series").StyleProp<import("../../types/brushes").SectorStyle, import("../../types/brushes").SectorStyleName> | undefined;
+        clockwise: boolean;
+        drawingStartAngle?: number | undefined;
+        index?: number | undefined;
+        seriesColor?: string | undefined;
+        seriesIndex?: number | undefined;
+        lineWidth?: number | undefined;
+        animationDegree?: {
+            start: number;
+            end: number;
+        } | undefined;
+    }[];
+    private getRadialBarSectorModelsFromResponders;
+    private getGroupedSector;
+    onMousemoveGroupedType(responders: RadialBarResponderModel[]): void;
+    onMousemove({ responders }: {
+        responders: any;
+    }): void;
+    onClick({ responders }: {
+        responders: any;
+    }): void;
+    getResponderModelsWithTheme(responders: SectorResponderModel[], type: RespondersThemeType): {
+        color: string;
+        lineWidth: number;
+        style: Pick<(import("../../types/brushes").SectorStyle & {
+            color?: string | undefined;
+            groupedSector?: GroupedSector | undefined;
+        }) | (import("../../types/brushes").SectorStyle & {
+            color?: string | undefined;
+            restSeries?: {
+                areaOpacity?: number | undefined;
+            } | undefined;
+            areaOpacity?: number | undefined;
+        } & {
+            groupedSector?: GroupedSector | undefined;
+        }), "shadowColor" | "shadowBlur" | "strokeStyle" | "shadowOffsetX" | "shadowOffsetY">[];
+        radius: {
+            inner: number;
+            outer: number;
+        };
+        data: TooltipData;
+        type: "sector";
+        degree: {
+            start: number;
+            end: number;
+        };
+        name?: string | undefined;
+        value?: number | undefined;
+        clockwise: boolean;
+        drawingStartAngle?: number | undefined;
+        index?: number | undefined;
+        seriesColor?: string | undefined;
+        seriesIndex?: number | undefined;
+        animationDegree?: {
+            start: number;
+            end: number;
+        } | undefined;
+        x: number;
+        y: number;
+    }[];
+    onMouseoutComponent: () => void;
+    selectSeries: (info: SelectSeriesHandlerParams<RadialBarChartOptions>) => void;
+    showTooltip: (info: SelectSeriesInfo) => void;
+}