@techie_doubts/tui.chart.2026 4.6.1

package/dist/esm/component/radialBarSeries.js

@@ -0,0 +1,349 @@
+import Component from "./component";
+import { isNumber, pick, isNull, calculateSizeWithPercentString, deepCopy, } from "../helpers/utils";
+import { message } from "../message";
+import { makeGroupedSectorResponderModel } from "../helpers/responders";
+import { getRadialAnchorPosition, makeAnchorPositionParam, withinRadian, getRadiusRanges, DEGREE_360, DEGREE_0, DEGREE_NEGATIVE_90, } from "../helpers/sector";
+import { getActiveSeriesMap } from "../helpers/legend";
+import { getDataLabelsOptions } from "../helpers/dataLabels";
+import { getRGBA } from "../helpers/color";
+import { getTotalAngle } from "../helpers/pieSeries";
+import { isAvailableShowTooltipInfo } from "../helpers/validation";
+export default class RadialBarSeries extends Component {
+    constructor() {
+        super(...arguments);
+        this.models = {};
+        this.activatedResponders = [];
+        this.eventDetectType = 'point';
+        this.onMouseoutComponent = () => {
+            this.eventBus.emit('seriesPointHovered', { models: [], name: this.name });
+            this.eventBus.emit('renderHoveredSeries', { models: [], name: this.name });
+            this.eventBus.emit('needDraw');
+        };
+        this.selectSeries = (info) => {
+            var _a;
+            const { index, seriesIndex } = info;
+            const isAvailable = isNumber(index) && (this.eventDetectType === 'grouped' || isNumber(seriesIndex));
+            if (!isAvailable) {
+                return;
+            }
+            const models = this.eventDetectType === 'grouped'
+                ? [
+                    ...this.getGroupedSector([this.responders[index]], 'select'),
+                    ...this.getRadialBarSectorModelsFromResponders([this.responders[index]]),
+                ]
+                : (_a = this.getResponderModelsWithTheme([this.tooltipSectorMap[index][seriesIndex]], 'select'), (_a !== null && _a !== void 0 ? _a : []));
+            if (!models.length) {
+                throw new Error(message.SELECT_SERIES_API_INDEX_ERROR);
+            }
+            this.eventBus.emit('renderSelectedSeries', {
+                models: models,
+                name: this.name,
+                eventDetectType: this.eventDetectType,
+            });
+            this.eventBus.emit('needDraw');
+        };
+        this.showTooltip = (info) => {
+            const { index, seriesIndex } = info;
+            if (!isAvailableShowTooltipInfo(info, this.eventDetectType, 'radialBar')) {
+                return;
+            }
+            const models = this.eventDetectType === 'grouped'
+                ? this.getGroupedSector([this.responders[index]], 'hover')
+                : this.getResponderModelsWithTheme([this.tooltipSectorMap[index][seriesIndex]], 'hover');
+            if (!models.length) {
+                return;
+            }
+            this.eventBus.emit('renderHoveredSeries', {
+                models,
+                name: this.name,
+                eventDetectType: this.eventDetectType,
+            });
+            this.activatedResponders =
+                this.eventDetectType === 'grouped' ? this.tooltipSectorMap[index] : models;
+            this.eventBus.emit('seriesPointHovered', { models: this.activatedResponders, name: this.name });
+            this.eventBus.emit('needDraw');
+        };
+    }
+    initUpdate(delta) {
+        if (!this.drawModels) {
+            return;
+        }
+        const { angle: { start: startAngle, total: totalAngle }, } = this.circularAxis;
+        let currentDegree;
+        Object.keys(this.models).forEach((category) => {
+            const index = this.models[category].findIndex(({ clockwise, degree: { start, end } }) => {
+                currentDegree = clockwise
+                    ? startAngle + totalAngle * delta
+                    : startAngle - totalAngle * delta;
+                return withinRadian(clockwise, start, end, currentDegree);
+            });
+            this.syncEndAngle(index < 0 ? this.models[category].length : index, category);
+            if (index !== -1) {
+                this.drawModels[category][index].degree.end = currentDegree;
+            }
+        });
+    }
+    syncEndAngle(index, category) {
+        if (index < 1) {
+            return;
+        }
+        for (let i = 0; i < index; i += 1) {
+            const prevTargetEndDegree = this.models[category][i].degree.end;
+            if (this.drawModels[category][i].degree.end !== prevTargetEndDegree) {
+                this.drawModels[category][i].degree.end = prevTargetEndDegree;
+            }
+        }
+    }
+    initialize() {
+        this.type = 'series';
+        this.name = 'radialBar';
+        this.eventBus.on('selectSeries', this.selectSeries);
+        this.eventBus.on('showTooltip', this.showTooltip);
+        this.eventBus.on('hideTooltip', this.onMouseoutComponent);
+    }
+    render(chartState) {
+        var _a, _b;
+        const { layout, series, legend, options, theme, stackSeries, scale, radialAxes } = chartState;
+        const categories = (_a = chartState.categories, (_a !== null && _a !== void 0 ? _a : []));
+        if (!series.radialBar || !stackSeries.radialBar) {
+            throw new Error(message.noDataError(this.name));
+        }
+        this.theme = theme.series.radialBar;
+        this.rect = layout.plot;
+        this.activeSeriesMap = getActiveSeriesMap(legend);
+        this.selectable = this.getSelectableOption(options);
+        this.setEventDetectType(options);
+        const initialCategoryMap = categories.reduce((acc, category) => {
+            if (!acc[category]) {
+                acc[category] = [];
+            }
+            return acc;
+        }, {});
+        const seriesData = series.radialBar.data;
+        this.circularAxis = radialAxes.circularAxis;
+        const verticalAxisData = radialAxes.verticalAxis;
+        const renderOptions = this.makeRenderOptions(verticalAxisData, scale.circularAxis, (_b = options) === null || _b === void 0 ? void 0 : _b.series);
+        const { categoryMap, seriesModels } = this.makeSeriesModelData(seriesData, stackSeries.radialBar.stackData, renderOptions, initialCategoryMap);
+        const tooltipData = this.makeTooltipData(seriesModels, categories);
+        this.models = categoryMap;
+        if (!this.drawModels) {
+            this.initDrawModels(categoryMap);
+        }
+        if (getDataLabelsOptions(options, this.name).visible) {
+            const dataLabelData = seriesModels.reduce((acc, data) => {
+                return [...acc, Object.assign(Object.assign({}, data), { type: 'sector', theme: this.theme.dataLabels })];
+            }, []);
+            this.renderDataLabels(dataLabelData);
+        }
+        this.tooltipSectorMap = this.makeTooltipSectorMap(seriesModels, tooltipData);
+        this.responders = this.makeResponders(verticalAxisData.radius.ranges, seriesModels, renderOptions, categories, tooltipData);
+    }
+    initDrawModels(categoryMap) {
+        this.drawModels = {};
+        Object.keys(categoryMap).forEach((category) => {
+            this.drawModels[category] = categoryMap[category].map((m) => (Object.assign(Object.assign({}, m), { degree: Object.assign(Object.assign({}, m.degree), { end: m.degree.start }) })));
+        });
+    }
+    makeResponders(radiusRanges, seriesModels, renderOptions, categories, tooltipData) {
+        return this.eventDetectType === 'grouped'
+            ? makeGroupedSectorResponderModel(radiusRanges, renderOptions, categories)
+            : seriesModels.map((m, index) => (Object.assign(Object.assign({}, m), { data: Object.assign({}, tooltipData[index]) })));
+    }
+    makeTooltipSectorMap(seriesModels, tooltipData) {
+        return seriesModels.reduce((acc, cur, index) => {
+            const categoryIndex = cur.index;
+            if (!acc[categoryIndex]) {
+                acc[categoryIndex] = [];
+            }
+            acc[categoryIndex].push(Object.assign(Object.assign({}, cur), { data: Object.assign({}, tooltipData[index]) }));
+            return acc;
+        }, {});
+    }
+    setEventDetectType(options) {
+        var _a, _b;
+        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;
+        }
+    }
+    getBarWidth(tickDistance, axisSize) {
+        const { barWidth } = this.theme;
+        const DEFAULT_PADDING = 5;
+        return barWidth
+            ? Math.min(tickDistance, calculateSizeWithPercentString(axisSize, barWidth))
+            : tickDistance - DEFAULT_PADDING * 2;
+    }
+    makeRenderOptions({ axisSize, centerX, centerY, tickDistance, radius: { ranges }, angle: { start, end }, }, scale, options) {
+        var _a, _b;
+        const { limit: { max }, stepSize, } = scale;
+        const clockwise = (_b = (_a = options) === null || _a === void 0 ? void 0 : _a.clockwise, (_b !== null && _b !== void 0 ? _b : true));
+        const totalAngle = getTotalAngle(clockwise, start, end);
+        const barWidth = this.getBarWidth(tickDistance, axisSize);
+        const padding = (tickDistance - barWidth) / 2;
+        const scaleMaxLimitValue = max + (totalAngle < DEGREE_360 ? DEGREE_0 : stepSize);
+        return {
+            clockwise,
+            centerX,
+            centerY,
+            radiusRanges: getRadiusRanges(ranges, padding),
+            angleRange: {
+                start,
+                end,
+            },
+            totalAngle,
+            scaleMaxLimitValue,
+            startAngle: start,
+        };
+    }
+    makeSeriesModelData(seriesData, stackSeriesData, renderOptions, initialCategoryMap) {
+        const { clockwise, centerX, centerY, radiusRanges, totalAngle, scaleMaxLimitValue, startAngle, } = renderOptions;
+        const defaultStartDegree = startAngle;
+        const { lineWidth, strokeStyle } = this.theme;
+        const sectorModels = [];
+        const categories = Object.keys(initialCategoryMap);
+        const categoryMap = deepCopy(initialCategoryMap);
+        stackSeriesData.forEach(({ values }, categoryIndex) => {
+            const { inner, outer } = radiusRanges[categoryIndex];
+            values.forEach((value, seriesIndex) => {
+                if (!isNull(value)) {
+                    const degree = Math.max((value / scaleMaxLimitValue) * totalAngle, 1) * (clockwise ? 1 : -1);
+                    const prevModel = sectorModels[sectorModels.length - 1];
+                    const startDegree = seriesIndex && prevModel ? prevModel.degree.end : defaultStartDegree;
+                    const endDegree = clockwise
+                        ? Math.min(startDegree + degree, DEGREE_360)
+                        : Math.max(startDegree + degree, DEGREE_0);
+                    const { name, color: seriesColor } = seriesData[seriesIndex];
+                    const color = this.getSeriesColor(name, seriesColor);
+                    const sectorModel = {
+                        type: 'sector',
+                        name,
+                        color: color,
+                        x: centerX,
+                        y: centerY,
+                        degree: {
+                            start: startDegree,
+                            end: endDegree,
+                        },
+                        radius: {
+                            inner,
+                            outer,
+                        },
+                        value,
+                        style: [{ strokeStyle }],
+                        lineWidth,
+                        clockwise,
+                        totalAngle,
+                        seriesColor,
+                        seriesIndex,
+                        index: categoryIndex,
+                        drawingStartAngle: DEGREE_NEGATIVE_90,
+                    };
+                    categoryMap[categories[categoryIndex]].push(sectorModel);
+                    sectorModels.push(sectorModel);
+                }
+            });
+        });
+        return { seriesModels: sectorModels, categoryMap };
+    }
+    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);
+    }
+    makeTooltipData(seriesModels, categories) {
+        const tooltipData = [];
+        seriesModels.forEach(({ seriesColor, name, value, index }) => {
+            if (!isNull(value)) {
+                tooltipData.push({
+                    label: name,
+                    color: seriesColor,
+                    value: value,
+                    category: isNumber(index) ? categories[index] : '',
+                });
+            }
+        });
+        return tooltipData;
+    }
+    makeTooltipResponder(responders) {
+        const categories = Object.keys(this.models);
+        return responders.map((responder) => (Object.assign(Object.assign({}, responder), getRadialAnchorPosition(makeAnchorPositionParam('center', this.models[categories[responder.index]].find(({ name }) => name === responder.name))))));
+    }
+    getRadialBarSectorModelsFromResponders(responders) {
+        var _a;
+        if (!responders.length) {
+            return [];
+        }
+        return _a = this.tooltipSectorMap[responders[0].index], (_a !== null && _a !== void 0 ? _a : []);
+    }
+    getGroupedSector(responders, type) {
+        const RadialBarSectorModels = this.getRadialBarSectorModelsFromResponders(responders);
+        const { color, opacity } = this.theme[type].groupedSector;
+        return RadialBarSectorModels.length
+            ? responders.map((m) => (Object.assign(Object.assign({}, m), { color: getRGBA(color, opacity) })))
+            : [];
+    }
+    onMousemoveGroupedType(responders) {
+        const RadialBarSectorModels = this.getRadialBarSectorModelsFromResponders(responders);
+        this.eventBus.emit('renderHoveredSeries', {
+            models: this.getGroupedSector(responders, 'hover'),
+            name: this.name,
+            eventDetectType: this.eventDetectType,
+        });
+        this.activatedResponders = RadialBarSectorModels;
+    }
+    onMousemove({ responders }) {
+        if (this.eventDetectType === 'grouped') {
+            this.onMousemoveGroupedType(responders);
+        }
+        else {
+            this.eventBus.emit('renderHoveredSeries', {
+                models: this.getResponderModelsWithTheme(responders, 'hover'),
+                name: this.name,
+            });
+            this.activatedResponders = this.makeTooltipResponder(responders);
+        }
+        this.eventBus.emit('seriesPointHovered', {
+            models: this.activatedResponders,
+            name: this.name,
+            eventDetectType: this.eventDetectType,
+        });
+        this.eventBus.emit('needDraw');
+    }
+    onClick({ responders }) {
+        if (this.selectable) {
+            let models;
+            if (this.eventDetectType === 'grouped') {
+                models = [
+                    ...this.getGroupedSector(responders, 'select'),
+                    ...this.getRadialBarSectorModelsFromResponders(responders),
+                ];
+            }
+            else {
+                models = this.getResponderModelsWithTheme(responders, 'select');
+            }
+            this.eventBus.emit('renderSelectedSeries', {
+                models,
+                name: this.name,
+                eventDetectType: this.eventDetectType,
+            });
+            this.eventBus.emit('needDraw');
+        }
+    }
+    getResponderModelsWithTheme(responders, type) {
+        const theme = this.theme[type];
+        const lineWidth = theme.lineWidth;
+        const isSameLineWidth = this.theme.lineWidth === lineWidth;
+        const thickness = isSameLineWidth ? 0 : lineWidth * 0.5;
+        return responders.map((m) => {
+            var _a, _b;
+            return (Object.assign(Object.assign({}, m), { color: (_b = (_a = theme) === null || _a === void 0 ? void 0 : _a.color, (_b !== null && _b !== void 0 ? _b : m.color)), lineWidth: lineWidth, style: [
+                    pick(theme, 'strokeStyle', 'shadowBlur', 'shadowColor', 'shadowOffsetX', 'shadowOffsetY'),
+                ], radius: {
+                    inner: Math.max(m.radius.inner - thickness, 0),
+                    outer: m.radius.outer + thickness,
+                } }));
+        });
+    }
+}

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

@@ -0,0 +1,55 @@
+import Component from "./component";
+import { CircleModel, PolygonModel, SectorModel } from "../../types/components/series";
+import { ChartState, RadialAxes, ScaleData, CircularAxisData, Scale } from "../../types/store/store";
+import { RadarPlotType, RadarChartOptions, GaugePlotBand } from "../../types/options";
+import { RadialPlotModels, RadialPlotModelType } from "../../types/components/radialPlot";
+import { LineModel } from "../../types/components/axis";
+import { CircularAxisTheme } from "../../types/theme";
+import { ArcModel } from "../../types/components/radialAxis";
+declare type RenderOptions = {
+    type: RadarPlotType;
+    categories: string[];
+    centerX: number;
+    centerY: number;
+    centralAngle: number;
+    initialRadius: number;
+    radius: number;
+    radiusRanges: number[];
+    lineCount: number;
+    tickInterval: number;
+    usingArcPlot: boolean;
+    drawingStartAngle: number;
+    startAngle: number;
+    endAngle: number;
+    clockwise: boolean;
+};
+declare type GaugeRenderOptions = {
+    centerX: number;
+    centerY: number;
+    clockwise: boolean;
+    totalAngle: number;
+    scaleMaxLimitValue: number;
+    startAngle: number;
+    outerRadius: number;
+    bandWidth: number;
+    bandMargin: number;
+    hasCategoryAxis: boolean;
+};
+export declare function getScaleMaxLimitValue(scale: ScaleData, totalAngle: number): number;
+export default class RadarPlot extends Component {
+    models: RadialPlotModels;
+    circularAxisTheme: Required<CircularAxisTheme>;
+    initialize(initParam: {
+        name: 'radialPlot' | 'gauge';
+    }): void;
+    render(state: ChartState<RadarChartOptions>): void;
+    makeRenderOptionsOnGauge(hasCategoryAxis: boolean, circularAxis: CircularAxisData, categories: string[], scale: Scale): GaugeRenderOptions;
+    makeRenderOptions(radialAxes: RadialAxes, type: RadarPlotType, categories?: string[]): RenderOptions;
+    renderPlot(renderOptions: RenderOptions): RadialPlotModelType;
+    makeSpiderwebPlot(renderOptions: RenderOptions): PolygonModel[];
+    makeCirclePlot(renderOptions: RenderOptions): CircleModel[];
+    makeArc(renderOptions: RenderOptions): ArcModel[];
+    renderLine(renderOptions: RenderOptions): LineModel[];
+    renderBands(bands: GaugePlotBand[], renderOptions: GaugeRenderOptions, categories: string[]): SectorModel[];
+}
+export {};

package/dist/esm/component/radialPlot.js

@@ -0,0 +1,188 @@
+import Component from "./component";
+import { getRadialPosition, calculateDegreeToRadian, DEGREE_NEGATIVE_90, DEGREE_360, calculateValidAngle, DEGREE_0, } from "../helpers/sector";
+import { range } from "../helpers/utils";
+import { isLabelAxisOnYAxis } from "../helpers/axes";
+export function getScaleMaxLimitValue(scale, totalAngle) {
+    const { limit: { max }, stepSize, } = scale;
+    return max + (totalAngle < DEGREE_360 ? DEGREE_0 : stepSize);
+}
+function findCategoryIndex(categories, value) {
+    return categories.findIndex((category) => category === value);
+}
+export default class RadarPlot extends Component {
+    constructor() {
+        super(...arguments);
+        this.models = { plot: [], line: [], band: [] };
+    }
+    initialize(initParam) {
+        var _a, _b;
+        this.type = 'plot';
+        this.name = (_b = (_a = initParam) === null || _a === void 0 ? void 0 : _a.name, (_b !== null && _b !== void 0 ? _b : 'radialPlot'));
+    }
+    render(state) {
+        var _a, _b, _c, _d, _e, _f;
+        const { layout, radialAxes, options, series, theme, scale } = state;
+        this.rect = layout.plot;
+        this.circularAxisTheme = theme.circularAxis;
+        const categories = (_a = state.categories, (_a !== null && _a !== void 0 ? _a : []));
+        if (this.name === 'gauge') {
+            const bandData = (_d = (_c = (_b = options) === null || _b === void 0 ? void 0 : _b.plot) === null || _c === void 0 ? void 0 : _c.bands, (_d !== null && _d !== void 0 ? _d : []));
+            const hasCategoryAxis = !isLabelAxisOnYAxis({ series, categories });
+            const renderOptions = this.makeRenderOptionsOnGauge(hasCategoryAxis, radialAxes.circularAxis, categories, scale);
+            this.models.band = this.renderBands(bandData, renderOptions, categories);
+        }
+        else {
+            const isRadarChart = !!series.radar;
+            const plotType = (_f = (_e = options.plot) === null || _e === void 0 ? void 0 : _e.type, (_f !== null && _f !== void 0 ? _f : (isRadarChart ? 'spiderweb' : 'circle')));
+            const renderOptions = this.makeRenderOptions(radialAxes, plotType, categories);
+            this.models.plot = this.renderPlot(renderOptions);
+            this.models.line = series.radialBar ? this.renderLine(renderOptions) : [];
+        }
+    }
+    makeRenderOptionsOnGauge(hasCategoryAxis, circularAxis, categories, scale) {
+        const { angle: { total, start }, radius: { outer }, clockwise, centerX, centerY, } = circularAxis;
+        const { width: bandWidth, margin: bandMargin } = circularAxis.band;
+        return {
+            centerX,
+            centerY,
+            clockwise,
+            totalAngle: total,
+            scaleMaxLimitValue: hasCategoryAxis
+                ? categories.length
+                : getScaleMaxLimitValue(scale.circularAxis, total),
+            startAngle: start,
+            outerRadius: outer,
+            bandWidth,
+            bandMargin,
+            hasCategoryAxis,
+        };
+    }
+    makeRenderOptions(radialAxes, type, categories = []) {
+        const { centerX, centerY, radius: { ranges, inner, outer }, } = radialAxes.verticalAxis;
+        const { angle: { central, total, start, end, drawingStart }, label: { labels }, tickInterval, clockwise, } = radialAxes.circularAxis;
+        const usingArcPlot = total !== DEGREE_360;
+        const lineCount = labels.length;
+        return {
+            type,
+            categories,
+            centralAngle: central,
+            centerX,
+            centerY,
+            initialRadius: inner,
+            radius: outer,
+            radiusRanges: ranges,
+            lineCount,
+            tickInterval,
+            drawingStartAngle: drawingStart,
+            usingArcPlot,
+            startAngle: start,
+            endAngle: end,
+            clockwise,
+        };
+    }
+    renderPlot(renderOptions) {
+        const { type, usingArcPlot } = renderOptions;
+        if (usingArcPlot) {
+            return this.makeArc(renderOptions);
+        }
+        if (type === 'spiderweb') {
+            return this.makeSpiderwebPlot(renderOptions);
+        }
+        return this.makeCirclePlot(renderOptions);
+    }
+    makeSpiderwebPlot(renderOptions) {
+        const { centralAngle, centerX, centerY, categories, radiusRanges } = renderOptions;
+        const { strokeStyle, lineWidth } = this.circularAxisTheme;
+        return radiusRanges.map((radius) => {
+            const points = categories.map((_, index) => getRadialPosition(centerX, centerY, radius, calculateDegreeToRadian(centralAngle * index)));
+            return {
+                type: 'polygon',
+                color: strokeStyle,
+                lineWidth,
+                points,
+            };
+        });
+    }
+    makeCirclePlot(renderOptions) {
+        const { centerX, centerY, radiusRanges } = renderOptions;
+        const { strokeStyle, lineWidth } = this.circularAxisTheme;
+        return radiusRanges.map((radius) => ({
+            type: 'circle',
+            color: 'rgba(0, 0, 0, 0)',
+            radius,
+            x: centerX,
+            y: centerY,
+            borderColor: strokeStyle,
+            borderWidth: lineWidth,
+        }));
+    }
+    makeArc(renderOptions) {
+        const { centerX, centerY, radiusRanges, startAngle, endAngle, clockwise } = renderOptions;
+        const { strokeStyle, lineWidth } = this.circularAxisTheme;
+        return radiusRanges.map((radius) => ({
+            type: 'arc',
+            borderWidth: lineWidth,
+            borderColor: strokeStyle,
+            x: centerX,
+            y: centerY,
+            angle: { start: startAngle, end: endAngle },
+            drawingStartAngle: DEGREE_NEGATIVE_90,
+            radius,
+            clockwise,
+        }));
+    }
+    renderLine(renderOptions) {
+        const { centerX, centerY, initialRadius, radius, lineCount, centralAngle, tickInterval, drawingStartAngle, clockwise, } = renderOptions;
+        const { strokeStyle, lineWidth } = this.circularAxisTheme;
+        return range(0, lineCount).reduce((acc, cur, index) => {
+            const startDegree = drawingStartAngle + centralAngle * index * (clockwise ? 1 : -1);
+            const { x, y } = getRadialPosition(centerX, centerY, initialRadius, calculateDegreeToRadian(startDegree));
+            const { x: x2, y: y2 } = getRadialPosition(centerX, centerY, radius, calculateDegreeToRadian(startDegree));
+            return index % tickInterval === 0
+                ? [
+                    ...acc,
+                    {
+                        type: 'line',
+                        x,
+                        y,
+                        x2,
+                        y2,
+                        strokeStyle,
+                        lineWidth,
+                    },
+                ]
+                : acc;
+        }, []);
+    }
+    renderBands(bands, renderOptions, categories) {
+        const sectors = [];
+        const { centerX, centerY, clockwise, totalAngle, scaleMaxLimitValue, startAngle, outerRadius, bandWidth, bandMargin, hasCategoryAxis, } = renderOptions;
+        bands.forEach(({ range: rangeData, color }, index) => {
+            const value = hasCategoryAxis
+                ? findCategoryIndex(categories, rangeData[1].toString()) -
+                    findCategoryIndex(categories, rangeData[0].toString())
+                : Number(rangeData[1]) - Number(rangeData[0]);
+            const degree = (value / scaleMaxLimitValue) * totalAngle * (clockwise ? 1 : -1);
+            const validDegree = calculateValidAngle(degree);
+            const prevModel = sectors[sectors.length - 1];
+            const startDegree = index && prevModel ? prevModel.degree.end : startAngle;
+            const endDegree = calculateValidAngle(startDegree + validDegree);
+            sectors.push({
+                type: 'sector',
+                color,
+                x: centerX,
+                y: centerY,
+                clockwise,
+                degree: {
+                    start: startDegree,
+                    end: endDegree,
+                },
+                radius: {
+                    inner: outerRadius + bandMargin,
+                    outer: outerRadius + bandWidth,
+                },
+            });
+        });
+        return sectors;
+    }
+}

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

@@ -0,0 +1,61 @@
+import Component from "./component";
+import { AxisData, ChartState, LabelAxisData, Options, Scale, Series } from "../../types/store/store";
+import { RectResponderModel } from "../../types/components/series";
+import { RangeSelectionModels } from "../../types/components/rangeSelection";
+import { RectResponderInfoForCoordinateType } from "../helpers/responders";
+declare type RangeSelectableSeries = Pick<Series, 'line' | 'area' | 'column'>;
+export default class RangeSelection extends Component {
+    models: RangeSelectionModels;
+    responders: RectResponderModel[];
+    startIndex: number;
+    private dragStartPosition;
+    private dragStartPoint;
+    private isDragging;
+    initialize(): void;
+    render(state: ChartState<Options>, computed: any): void;
+    getRectResponderInfoForCoordinateType(series: RangeSelectableSeries, scale: Scale, axisData: LabelAxisData, categories: string[]): RectResponderInfoForCoordinateType[];
+    resetSelectionArea(): void;
+    onMousedown({ responders, mousePosition }: {
+        responders: any;
+        mousePosition: any;
+    }): void;
+    onMouseup({ responders }: {
+        responders: RectResponderModel[];
+    }): void;
+    makeRectResponderModel(categories: string[], axisData: AxisData): RectResponderModel[];
+    makeRectResponderModelForCoordinateType(responderInfo: RectResponderInfoForCoordinateType[], categories: string[]): {
+        data: {
+            name: string;
+            value: string;
+        };
+        type: "rect";
+        color?: string | undefined;
+        borderColor?: string | undefined;
+        style?: import("../../types/components/series").StyleProp<import("../../types/components/series").RectStyle, "shadow"> | undefined;
+        thickness?: number | undefined;
+        value?: number | import("../../types/options").RangeDataType<number> | null | undefined;
+        name?: string | undefined;
+        index?: number | undefined;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        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;
+    }[];
+    onMousemove({ responders, mousePosition }: {
+        responders: any;
+        mousePosition: any;
+    }): void;
+    onMouseoutComponent(): void;
+}
+export {};