@techie_doubts/tui.chart.2026 4.6.1

package/dist/esm/component/pieSeries.js

@@ -0,0 +1,390 @@
+import Component from "./component";
+import { getRGBA } from "../helpers/color";
+import { getRadialAnchorPosition, makeAnchorPositionParam, withinRadian, getDefaultRadius, DEGREE_360, DEGREE_0, DEGREE_90, } from "../helpers/sector";
+import { getActiveSeriesMap } from "../helpers/legend";
+import { getDataLabelsOptions, RADIUS_PADDING } from "../helpers/dataLabels";
+import { getTotalAngle, isSemiCircle, getSemiCircleCenterY, makePieTooltipData, pieTooltipLabelFormatter, } from "../helpers/pieSeries";
+import { calculateSizeWithPercentString, isNumber, isUndefined, last, } from "../helpers/utils";
+import { pick } from "../helpers/utils";
+import { message } from "../message";
+import { getMaxLabelSize } from "../helpers/axes";
+import { getFont } from "../helpers/style";
+function getCalculatedRadiusRange({ alias, renderOptions, radiusRangeMap, pieIndex, radiusRanges, totalPieAliasCount, }) {
+    var _a, _b, _c, _d, _e;
+    const radiusRangeLength = Object.keys(radiusRangeMap).length;
+    const { defaultRadius = 0 } = renderOptions;
+    let { inner, outer } = renderOptions.radiusRange;
+    if (!radiusRangeMap[alias]) {
+        if (!radiusRangeLength) {
+            const radius = defaultRadius / totalPieAliasCount;
+            inner = pieIndex * radius;
+            outer = (pieIndex + 1) * radius;
+        }
+        else {
+            if (pieIndex && radiusRanges[pieIndex - 1].outer) {
+                inner = radiusRanges[pieIndex - 1].outer;
+            }
+            if ((_a = radiusRanges[pieIndex + 1]) === null || _a === void 0 ? void 0 : _a.inner) {
+                outer = radiusRanges[pieIndex + 1].inner;
+            }
+            else if (pieIndex === totalPieAliasCount - 1) {
+                outer = defaultRadius;
+            }
+            else {
+                const radius = (defaultRadius -
+                    (_c = (_b = radiusRanges[pieIndex - 1]) === null || _b === void 0 ? void 0 : _b.outer, (_c !== null && _c !== void 0 ? _c : 0)) -
+                    (_e = (_d = radiusRanges[pieIndex + 1]) === null || _d === void 0 ? void 0 : _d.inner, (_e !== null && _e !== void 0 ? _e : 0))) /
+                    (totalPieAliasCount - radiusRangeLength);
+                outer = inner + radius;
+            }
+        }
+    }
+    return { inner, outer };
+}
+function getPieSeriesOpacityByDepth(originAlpha, depth, indexOfGroup, brightness = 0.85) {
+    const depthAlpha = Number((originAlpha * Math.pow(brightness, depth)).toFixed(2));
+    return Number((Math.pow(depthAlpha, (indexOfGroup + 1))).toFixed(2));
+}
+function getMaxDataLabelSize(seriesNameLabels, options, dataLabelTheme) {
+    var _a, _b;
+    const outerLabels = [
+        {
+            hasOuterLabel: options.visible && options.anchor === 'outer',
+            labels: ['00.00%'],
+            theme: dataLabelTheme,
+        },
+        {
+            hasOuterLabel: ((_a = options.pieSeriesName) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = options.pieSeriesName) === null || _b === void 0 ? void 0 : _b.anchor) === 'outer',
+            labels: seriesNameLabels,
+            theme: dataLabelTheme.pieSeriesName,
+        },
+    ];
+    return outerLabels.reduce((acc, cur) => {
+        const { width, height } = acc;
+        const { hasOuterLabel, labels, theme } = cur;
+        if (hasOuterLabel) {
+            const { maxLabelWidth, maxLabelHeight } = getMaxLabelSize(labels, 0, getFont(theme));
+            return {
+                width: Math.max(maxLabelWidth + RADIUS_PADDING, width),
+                height: Math.max(maxLabelHeight + RADIUS_PADDING, height),
+            };
+        }
+        return acc;
+    }, { width: 0, height: 0 });
+}
+export default class PieSeries extends Component {
+    constructor() {
+        super(...arguments);
+        this.models = { series: [] };
+        this.activatedResponders = [];
+        this.onMouseoutComponent = () => {
+            this.eventBus.emit('seriesPointHovered', { models: [], name: this.alias || this.name });
+            this.eventBus.emit('renderHoveredSeries', { models: [], name: this.alias || this.name });
+            this.eventBus.emit('needDraw');
+        };
+        this.selectSeries = ({ seriesIndex, name }) => {
+            if (!isNumber(seriesIndex) || (!isUndefined(name) && name !== this.alias)) {
+                return;
+            }
+            const model = this.responders[seriesIndex];
+            if (!model) {
+                throw new Error(message.SELECT_SERIES_API_INDEX_ERROR);
+            }
+            this.eventBus.emit('renderSelectedSeries', {
+                models: this.getResponderModelsWithTheme([model], 'select'),
+                name: this.name,
+                alias: this.alias,
+            });
+            this.eventBus.emit('needDraw');
+        };
+        this.showTooltip = ({ seriesIndex, name }) => {
+            if (!isNumber(seriesIndex) || (!isUndefined(name) && name !== this.alias)) {
+                return;
+            }
+            const models = [this.responders[seriesIndex]];
+            if (!models.length) {
+                return;
+            }
+            this.eventBus.emit('renderHoveredSeries', {
+                models: this.getResponderModelsWithTheme(models, 'hover'),
+                name: this.name,
+                alias: this.alias,
+            });
+            this.activatedResponders = this.makeTooltipResponder(models);
+            this.eventBus.emit('seriesPointHovered', {
+                models: this.activatedResponders,
+                name: this.alias || this.name,
+            });
+            this.eventBus.emit('needDraw');
+        };
+    }
+    initUpdate(delta) {
+        if (!this.drawModels) {
+            return;
+        }
+        let currentDegree;
+        const index = this.models.series.findIndex(({ clockwise, degree: { start, end }, totalAngle }) => {
+            currentDegree = clockwise ? totalAngle * delta : DEGREE_360 - totalAngle * delta;
+            return withinRadian(clockwise, start, end, currentDegree);
+        });
+        this.syncEndAngle(index < 0 ? this.models.series.length : index);
+        if (~index) {
+            this.drawModels.series[index].degree.end = currentDegree;
+        }
+    }
+    syncEndAngle(index) {
+        if (index < 1) {
+            return;
+        }
+        for (let i = 0; i < index; i += 1) {
+            const prevTargetEndDegree = this.models.series[i].degree.end;
+            if (this.drawModels.series[i].degree.end !== prevTargetEndDegree) {
+                this.drawModels.series[i].degree.end = prevTargetEndDegree;
+            }
+        }
+    }
+    initialize(param) {
+        var _a, _b;
+        this.type = 'series';
+        this.name = 'pie';
+        this.alias = (_b = (_a = param) === null || _a === void 0 ? void 0 : _a.alias, (_b !== null && _b !== void 0 ? _b : ''));
+        this.eventBus.on('selectSeries', this.selectSeries);
+        this.eventBus.on('showTooltip', this.showTooltip);
+        this.eventBus.on('hideTooltip', this.onMouseoutComponent);
+    }
+    render(chartState) {
+        var _a, _b, _c, _d;
+        const { layout, series, legend, options, nestedPieSeries, theme } = chartState;
+        const categories = (_a = chartState.categories, (_a !== null && _a !== void 0 ? _a : []));
+        if (!series.pie) {
+            throw new Error(message.noDataError(this.name));
+        }
+        const pieTheme = theme.series.pie;
+        this.theme = this.alias ? pieTheme[this.alias] : pieTheme;
+        this.rect = layout.plot;
+        this.activeSeriesMap = getActiveSeriesMap(legend);
+        this.selectable = this.getSelectableOption(options);
+        let seriesModel, tooltipDataModel;
+        const dataLabelsOptions = getDataLabelsOptions(options, this.alias);
+        if (nestedPieSeries) {
+            const { data } = nestedPieSeries[this.alias];
+            const pieAlias = Object.keys(nestedPieSeries);
+            const pieIndex = pieAlias.findIndex((alias) => alias === this.alias);
+            // check the data label of the last Pie series
+            const lastAlias = last(pieAlias);
+            const lastSeries = nestedPieSeries[lastAlias];
+            const maxPieDataLabelSize = getMaxDataLabelSize(lastSeries.data.map(({ name }) => name), getDataLabelsOptions(options, lastAlias), this.theme.dataLabels);
+            const renderOptionsMap = this.getRenderOptionsMap(options, pieAlias, maxPieDataLabelSize);
+            seriesModel = this.renderPieModel(data, renderOptionsMap[this.alias], pieIndex);
+            tooltipDataModel = makePieTooltipData(data, (_b = categories) === null || _b === void 0 ? void 0 : _b[pieIndex]);
+        }
+        else {
+            const pieData = (_c = series.pie) === null || _c === void 0 ? void 0 : _c.data;
+            const { width, height } = getMaxDataLabelSize(pieData.map(({ name }) => name), dataLabelsOptions, this.theme.dataLabels);
+            const renderOptions = this.makeRenderOptions(options, width, height);
+            seriesModel = this.renderPieModel(pieData, renderOptions);
+            tooltipDataModel = makePieTooltipData(pieData, (_d = categories) === null || _d === void 0 ? void 0 : _d[0]);
+        }
+        this.models.series = seriesModel;
+        if (!this.drawModels) {
+            this.drawModels = {
+                series: this.models.series.map((m) => (Object.assign(Object.assign({}, m), { degree: Object.assign(Object.assign({}, m.degree), { end: m.degree.start }) }))),
+            };
+        }
+        if (dataLabelsOptions.visible) {
+            const dataLabelData = seriesModel.map((m) => (Object.assign(Object.assign({}, m), { value: `${pieTooltipLabelFormatter(m.percentValue)}`, theme: this.theme.dataLabels })));
+            this.renderDataLabels(dataLabelData, this.alias);
+        }
+        this.responders = seriesModel.map((m, index) => (Object.assign(Object.assign({}, m), { type: 'sector', radius: m.radius, seriesIndex: index, data: Object.assign(Object.assign({}, tooltipDataModel[index]), { percentValue: m.percentValue }), color: getRGBA(m.color, 1) })));
+    }
+    getRadiusRangeMap(options, pieAlias) {
+        return pieAlias.reduce((acc, alias) => {
+            var _a, _b;
+            const seriesOptions = this.getOptions(options, alias).series;
+            if ((_a = seriesOptions) === null || _a === void 0 ? void 0 : _a.radiusRange) {
+                acc[alias] = (_b = seriesOptions) === null || _b === void 0 ? void 0 : _b.radiusRange;
+            }
+            return acc;
+        }, {});
+    }
+    getRenderOptionsMap(options, pieAlias, maxPieDataLabelSize) {
+        const renderOptionsMap = this.initRenderOptionsMap(options, pieAlias, maxPieDataLabelSize);
+        const radiusRangeMap = this.getRadiusRangeMap(options, pieAlias);
+        pieAlias.forEach((alias, pieIndex) => {
+            const radiusRanges = Object.values(renderOptionsMap).map(({ radiusRange }) => radiusRange);
+            renderOptionsMap[alias].radiusRange = getCalculatedRadiusRange({
+                alias,
+                renderOptions: renderOptionsMap[alias],
+                radiusRangeMap,
+                pieIndex,
+                radiusRanges,
+                totalPieAliasCount: pieAlias.length,
+            });
+        });
+        return renderOptionsMap;
+    }
+    initRenderOptionsMap(options, pieAlias, { width, height }) {
+        return pieAlias.reduce((acc, alias) => (Object.assign(Object.assign({}, acc), { [alias]: this.makeRenderOptions(this.getOptions(options, alias), width, height) })), {});
+    }
+    getOptions(chartOptions, alias) {
+        var _a;
+        const options = Object.assign({}, chartOptions);
+        if (((_a = options) === null || _a === void 0 ? void 0 : _a.series) && alias) {
+            options.series = Object.assign(Object.assign({}, options.series), options.series[alias]);
+        }
+        return options;
+    }
+    makeRenderOptions(options, maxDataLabelWidth = 0, maxDataLabelHeight = 0) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        const seriesOptions = options.series;
+        const clockwise = (_b = (_a = seriesOptions) === null || _a === void 0 ? void 0 : _a.clockwise, (_b !== null && _b !== void 0 ? _b : true));
+        const startAngle = (_e = (_d = (_c = seriesOptions) === null || _c === void 0 ? void 0 : _c.angleRange) === null || _d === void 0 ? void 0 : _d.start, (_e !== null && _e !== void 0 ? _e : DEGREE_0));
+        const endAngle = (_h = (_g = (_f = seriesOptions) === null || _f === void 0 ? void 0 : _f.angleRange) === null || _g === void 0 ? void 0 : _g.end, (_h !== null && _h !== void 0 ? _h : DEGREE_360));
+        const totalAngle = getTotalAngle(clockwise, startAngle, endAngle);
+        const isSemiCircular = isSemiCircle(clockwise, startAngle, endAngle);
+        const { width, height } = this.rect;
+        const defaultRadius = getDefaultRadius(this.rect, isSemiCircular, maxDataLabelWidth, maxDataLabelHeight);
+        const innerRadius = calculateSizeWithPercentString(defaultRadius, (_l = (_k = (_j = seriesOptions) === null || _j === void 0 ? void 0 : _j.radiusRange) === null || _k === void 0 ? void 0 : _k.inner, (_l !== null && _l !== void 0 ? _l : 0)));
+        const outerRadius = calculateSizeWithPercentString(defaultRadius, (_p = (_o = (_m = seriesOptions) === null || _m === void 0 ? void 0 : _m.radiusRange) === null || _o === void 0 ? void 0 : _o.outer, (_p !== null && _p !== void 0 ? _p : (this.alias ? 0 : defaultRadius))));
+        const cx = width / 2;
+        const cy = isSemiCircular ? getSemiCircleCenterY(this.rect.height, clockwise) : height / 2;
+        return {
+            clockwise,
+            cx,
+            cy,
+            drawingStartAngle: startAngle - DEGREE_90,
+            radiusRange: {
+                inner: innerRadius,
+                outer: outerRadius,
+            },
+            angleRange: {
+                start: startAngle,
+                end: endAngle,
+            },
+            totalAngle,
+            defaultRadius,
+        };
+    }
+    renderPieModel(seriesRawData, renderOptions, pieIndex) {
+        const sectorModels = [];
+        const total = seriesRawData.reduce((sum, { data }) => sum + ((data !== null && data !== void 0 ? data : 0)), 0);
+        const { clockwise, cx, cy, drawingStartAngle, radiusRange: { inner, outer }, totalAngle, } = renderOptions;
+        const defaultStartDegree = clockwise ? DEGREE_0 : DEGREE_360;
+        const { lineWidth, strokeStyle } = this.theme;
+        seriesRawData.forEach((rawData, seriesIndex) => {
+            const color = this.alias
+                ? this.getAliasSeriesColor(rawData, seriesRawData, pieIndex)
+                : this.getSeriesColor(rawData);
+            const { data, name } = rawData;
+            if (data) {
+                const degree = Math.max((data / total) * totalAngle, 1) * (clockwise ? 1 : -1);
+                const percentValue = (data / total) * 100;
+                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);
+                sectorModels.push({
+                    type: 'sector',
+                    name,
+                    color,
+                    x: cx,
+                    y: cy,
+                    degree: {
+                        start: startDegree,
+                        end: endDegree,
+                    },
+                    radius: {
+                        inner,
+                        outer,
+                    },
+                    value: data,
+                    style: [{ strokeStyle }],
+                    lineWidth,
+                    clockwise,
+                    drawingStartAngle,
+                    totalAngle,
+                    percentValue,
+                });
+            }
+        });
+        return sectorModels;
+    }
+    makeTooltipResponder(responders) {
+        return responders.map((responder) => (Object.assign(Object.assign({}, responder), getRadialAnchorPosition(makeAnchorPositionParam('center', this.models.series[responder.seriesIndex])))));
+    }
+    onMousemove({ responders }) {
+        this.eventBus.emit('renderHoveredSeries', {
+            models: this.getResponderModelsWithTheme(responders, 'hover'),
+            name: this.alias || this.name,
+        });
+        this.activatedResponders = this.makeTooltipResponder(responders);
+        this.eventBus.emit('seriesPointHovered', {
+            models: this.activatedResponders,
+            name: this.alias || this.name,
+        });
+        this.eventBus.emit('needDraw');
+    }
+    onClick({ responders }) {
+        if (this.selectable) {
+            this.eventBus.emit('renderSelectedSeries', {
+                models: this.getResponderModelsWithTheme(responders, 'select'),
+                name: this.name,
+                alias: this.alias,
+            });
+            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, style: [
+                    pick(theme, 'strokeStyle', 'shadowBlur', 'shadowColor', 'shadowOffsetX', 'shadowOffsetY'),
+                ], radius: {
+                    inner: Math.max(m.radius.inner - thickness, 0),
+                    outer: m.radius.outer + thickness,
+                } }));
+        });
+    }
+    getOpacity(active, selectedState) {
+        const { select, areaOpacity } = this.theme;
+        const { areaOpacity: selectedAreaOpacity, restSeries: { areaOpacity: restAreaOpacity }, } = select;
+        const selectThemeOpacity = active ? selectedAreaOpacity : restAreaOpacity;
+        return selectedState ? selectThemeOpacity : areaOpacity;
+    }
+    getIndexOfGroup(seriesRawData, parentName, name) {
+        return seriesRawData
+            .filter((datum) => parentName === datum.parentName)
+            .findIndex((datum) => name === datum.name);
+    }
+    getSeriesColor(rawData) {
+        const { color, name } = rawData;
+        const active = this.activeSeriesMap[name];
+        const opacity = this.getOpacity(active, this.hasActiveSeries());
+        return getRGBA(color, opacity);
+    }
+    getAliasSeriesColor(rawData, seriesRawData, pieIndex) {
+        const { color, name } = rawData;
+        const { select: { color: selectedColor }, } = this.theme;
+        const { rootParentName, parentName } = rawData;
+        const indexOfGroup = this.getIndexOfGroup(seriesRawData, parentName, name);
+        const opacity = this.getAliasSeriesOpacity(rootParentName, parentName, pieIndex, indexOfGroup, name);
+        const active = this.activeSeriesMap[(rootParentName !== null && rootParentName !== void 0 ? rootParentName : name)];
+        const seriesColor = active ? (selectedColor !== null && selectedColor !== void 0 ? selectedColor : color) : color;
+        return getRGBA(seriesColor, opacity);
+    }
+    getAliasSeriesOpacity(rootParentName, parentName, pieIndex, indexOfGroup, name) {
+        const active = this.activeSeriesMap[(rootParentName !== null && rootParentName !== void 0 ? rootParentName : name)];
+        const opacity = this.getOpacity(active, this.hasActiveSeries());
+        return pieIndex && parentName
+            ? getPieSeriesOpacityByDepth(opacity, pieIndex, indexOfGroup)
+            : opacity;
+    }
+    hasActiveSeries() {
+        return Object.values(this.activeSeriesMap).some((elem) => !elem);
+    }
+}

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

@@ -0,0 +1,37 @@
+import Component from "./component";
+import { ChartState, Options, Axes, Scale } from "../../types/store/store";
+import Painter from "../painter";
+import { LineModel } from "../../types/components/axis";
+import { PlotModels } from "../../types/components/plot";
+import { RectModel } from "../../types/components/series";
+import { PlotLine, PlotBand } from "../../types/options";
+import { PlotTheme } from "../../types/theme";
+export default class Plot extends Component {
+    models: PlotModels;
+    startIndex: number;
+    theme: Required<PlotTheme>;
+    initialize(): void;
+    getPlotAxisSize(vertical: boolean): {
+        offsetSize: number;
+        anchorSize: number;
+    };
+    renderLines(axes: Axes, categories: string[], lines?: PlotLine[]): LineModel[];
+    renderBands(axes: Axes, categories: string[], bands?: PlotBand[]): RectModel[];
+    renderPlotLineModels(relativePositions: number[], vertical: boolean, options?: {
+        size?: number;
+        startPosition?: number;
+        axes?: Axes;
+    }): LineModel[];
+    renderPlotsForCenterYAxis(axes: Axes): LineModel[];
+    renderPlots(axes: Axes, scale?: Scale): LineModel[];
+    getVerticalTickPixelPositions(axes: Axes, scale?: Scale): number[];
+    getHorizontalTickPixelPositions(axes: Axes): number[];
+    renderPlotBackgroundRect(): RectModel;
+    render(state: ChartState<Options>): void;
+    makeLineModel(vertical: boolean, position: number, { color, dashSegments, lineWidth, }: {
+        color: string;
+        dashSegments?: number[];
+        lineWidth?: number;
+    }, sizeWidth?: number, xPos?: number): LineModel;
+    beforeDraw(painter: Painter): void;
+}

package/dist/esm/component/plot.js

@@ -0,0 +1,163 @@
+import Component from "./component";
+import { crispPixel, makeTickPixelPositions, getXPosition } from "../helpers/calculator";
+import { pick } from "../helpers/utils";
+function getValidIndex(index, startIndex = 0) {
+    return ~~index ? index - startIndex : index;
+}
+function validXPosition({ axisData, offsetSize, value, startIndex = 0 }) {
+    const dataIndex = getValidIndex(value, startIndex);
+    const x = getXPosition(axisData, offsetSize, value, dataIndex);
+    return x > 0 ? Math.min(offsetSize, x) : 0;
+}
+function getPlotAxisData(vertical, axes) {
+    return vertical ? axes.xAxis : axes.yAxis;
+}
+export default class Plot extends Component {
+    constructor() {
+        super(...arguments);
+        this.models = { plot: [], line: [], band: [] };
+        this.startIndex = 0;
+    }
+    initialize() {
+        this.type = 'plot';
+    }
+    getPlotAxisSize(vertical) {
+        return {
+            offsetSize: vertical ? this.rect.width : this.rect.height,
+            anchorSize: vertical ? this.rect.height : this.rect.width,
+        };
+    }
+    renderLines(axes, categories, lines = []) {
+        return lines.map(({ value, color }) => {
+            const { offsetSize } = this.getPlotAxisSize(true);
+            const position = validXPosition({
+                axisData: getPlotAxisData(true, axes),
+                offsetSize,
+                value,
+                categories,
+                startIndex: this.startIndex,
+            });
+            return this.makeLineModel(true, position, { color });
+        });
+    }
+    renderBands(axes, categories, bands = []) {
+        const { offsetSize, anchorSize } = this.getPlotAxisSize(true);
+        return bands.map(({ range, color }) => {
+            const [start, end] = range.map((value) => validXPosition({
+                axisData: getPlotAxisData(true, axes),
+                offsetSize,
+                value,
+                categories,
+                startIndex: this.startIndex,
+            }));
+            return {
+                type: 'rect',
+                x: crispPixel(start),
+                y: crispPixel(0),
+                width: end - start,
+                height: anchorSize,
+                color,
+            };
+        });
+    }
+    renderPlotLineModels(relativePositions, vertical, options = {}) {
+        var _a, _b, _c;
+        const { size, startPosition, axes } = options;
+        const { lineColor: color, lineWidth, dashSegments } = this.theme[vertical ? 'vertical' : 'horizontal'];
+        const tickInterval = ((_c = (vertical ? (_a = axes) === null || _a === void 0 ? void 0 : _a.xAxis : (_b = axes) === null || _b === void 0 ? void 0 : _b.yAxis)) === null || _c === void 0 ? void 0 : _c.tickInterval) || 1;
+        return relativePositions
+            .filter((_, idx) => !(idx % tickInterval))
+            .map((position) => this.makeLineModel(vertical, position, { color, lineWidth, dashSegments }, (size !== null && size !== void 0 ? size : this.rect.width), (startPosition !== null && startPosition !== void 0 ? startPosition : 0)));
+    }
+    renderPlotsForCenterYAxis(axes) {
+        const { xAxisHalfSize, secondStartX, yAxisHeight } = axes.centerYAxis;
+        // vertical
+        const xAxisTickCount = axes.xAxis.tickCount;
+        const verticalLines = [
+            ...this.renderPlotLineModels(makeTickPixelPositions(xAxisHalfSize, xAxisTickCount), true),
+            ...this.renderPlotLineModels(makeTickPixelPositions(xAxisHalfSize, xAxisTickCount, secondStartX), true),
+        ];
+        // horizontal
+        const yAxisTickCount = axes.yAxis.tickCount;
+        const yAxisTickPixelPositions = makeTickPixelPositions(yAxisHeight, yAxisTickCount);
+        const horizontalLines = [
+            ...this.renderPlotLineModels(yAxisTickPixelPositions, false, { size: xAxisHalfSize }),
+            ...this.renderPlotLineModels(yAxisTickPixelPositions, false, {
+                size: xAxisHalfSize,
+                startPosition: secondStartX,
+            }),
+        ];
+        return [...verticalLines, ...horizontalLines];
+    }
+    renderPlots(axes, scale) {
+        const vertical = true;
+        return axes.centerYAxis
+            ? this.renderPlotsForCenterYAxis(axes)
+            : [
+                ...this.renderPlotLineModels(this.getHorizontalTickPixelPositions(axes), !vertical, {
+                    axes,
+                }),
+                ...this.renderPlotLineModels(this.getVerticalTickPixelPositions(axes, scale), vertical, {
+                    axes,
+                }),
+            ];
+    }
+    getVerticalTickPixelPositions(axes, scale) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const { offsetSize } = this.getPlotAxisSize(true);
+        const axisData = getPlotAxisData(true, axes);
+        if ((_a = axisData) === null || _a === void 0 ? void 0 : _a.labelRange) {
+            const sizeRatio = (_d = (_c = (_b = scale) === null || _b === void 0 ? void 0 : _b.xAxis) === null || _c === void 0 ? void 0 : _c.sizeRatio, (_d !== null && _d !== void 0 ? _d : 1));
+            const positionRatio = (_g = (_f = (_e = scale) === null || _e === void 0 ? void 0 : _e.xAxis) === null || _f === void 0 ? void 0 : _f.positionRatio, (_g !== null && _g !== void 0 ? _g : 0));
+            const axisSizeAppliedRatio = offsetSize * sizeRatio;
+            const additional = offsetSize * positionRatio;
+            return makeTickPixelPositions(axisSizeAppliedRatio, axisData.tickCount, additional);
+        }
+        return makeTickPixelPositions(offsetSize, axisData.tickCount);
+    }
+    getHorizontalTickPixelPositions(axes) {
+        const { offsetSize } = this.getPlotAxisSize(false);
+        const axisData = getPlotAxisData(false, axes);
+        return makeTickPixelPositions(offsetSize, axisData.tickCount);
+    }
+    renderPlotBackgroundRect() {
+        return Object.assign(Object.assign({ type: 'rect', x: 0, y: 0 }, pick(this.rect, 'width', 'height')), { color: this.theme.backgroundColor });
+    }
+    render(state) {
+        var _a, _b, _c;
+        const { layout, axes, plot, zoomRange, theme, scale } = state;
+        if (!plot) {
+            return;
+        }
+        this.rect = layout.plot;
+        this.startIndex = (_b = (_a = zoomRange) === null || _a === void 0 ? void 0 : _a[0], (_b !== null && _b !== void 0 ? _b : 0));
+        this.theme = theme.plot;
+        const categories = (_c = state.categories, (_c !== null && _c !== void 0 ? _c : []));
+        const { lines, bands, visible } = plot;
+        this.models.line = this.renderLines(axes, categories, lines);
+        this.models.band = this.renderBands(axes, categories, bands);
+        if (visible) {
+            this.models.plot = [this.renderPlotBackgroundRect(), ...this.renderPlots(axes, scale)];
+        }
+    }
+    makeLineModel(vertical, position, { color, dashSegments = [], lineWidth = 1, }, sizeWidth, xPos = 0) {
+        const x = vertical ? crispPixel(position) : crispPixel(xPos);
+        const y = vertical ? crispPixel(0) : crispPixel(position);
+        const width = vertical ? 0 : (sizeWidth !== null && sizeWidth !== void 0 ? sizeWidth : this.rect.width);
+        const height = vertical ? this.rect.height : 0;
+        return {
+            type: 'line',
+            x,
+            y,
+            x2: x + width,
+            y2: y + height,
+            strokeStyle: color,
+            lineWidth,
+            dashSegments,
+        };
+    }
+    beforeDraw(painter) {
+        painter.ctx.strokeStyle = 'rgba(0, 0, 0, 0.05)';
+        painter.ctx.lineWidth = 1;
+    }
+}

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

@@ -0,0 +1,85 @@
+import Component from "./component";
+import { RadarSeriesModels, CircleModel, CircleResponderModel, LinePointsModel, AreaPointsModel } from "../../types/components/series";
+import { ChartState } from "../../types/store/store";
+import { RadarSeriesType, Point, RadarChartOptions } from "../../types/options";
+import { TooltipData } from "../../types/components/tooltip";
+import { RadarChartSeriesTheme } from "../../types/theme";
+import { RespondersThemeType } from "../helpers/responders";
+import { SelectSeriesHandlerParams } from "../charts/chart";
+declare type RenderOptions = {
+    categories: string[];
+    centerX: number;
+    centerY: number;
+    degree: number;
+    showArea: boolean;
+    ratio: number;
+};
+declare type RadarPointsData = {
+    distances: number[];
+    linePoints: (Point | null)[];
+    areaPoints: Point[];
+    seriesColor: string;
+    fillColor: string;
+    lineColor: string;
+    name: string;
+    data: number[];
+};
+interface RadarCircleModel extends CircleModel {
+    name: string;
+    value: number;
+    index: number;
+}
+export default class RadarSeries extends Component {
+    models: RadarSeriesModels;
+    drawModels: RadarSeriesModels;
+    responders: CircleResponderModel[];
+    activatedResponders: CircleResponderModel[];
+    theme: Required<RadarChartSeriesTheme>;
+    initialize(): void;
+    render(state: ChartState<RadarChartOptions>): void;
+    initDrawModels<T extends AreaPointsModel | LinePointsModel>(modelName: 'area' | 'line', centerX: number, centerY: number): (T & {
+        distances: number[] | undefined;
+        points: {
+            x: number;
+            y: number;
+        }[];
+    })[];
+    onMouseoutComponent: () => void;
+    makeTooltipModel(circleModel: RadarCircleModel[], categories: string[]): TooltipData[];
+    getRespondersWithTheme(responders: CircleResponderModel[], type: RespondersThemeType): {
+        radius: number | undefined;
+        color: string;
+        borderColor: string;
+        borderWidth: number | undefined;
+        detectionSize?: number | undefined;
+        data: TooltipData;
+        type: "circle";
+        style?: import("../../types/components/series").StyleProp<import("../../types/components/series").CircleStyle, import("../../types/brushes").CircleStyleName> | undefined;
+        seriesIndex?: number | undefined;
+        index?: number | undefined;
+        angle?: {
+            start: number;
+            end: number;
+        } | undefined;
+        name?: string | undefined;
+        x: number;
+        y: number;
+    }[];
+    onClick({ responders }: {
+        responders: any;
+    }): void;
+    onMousemove({ responders }: {
+        responders: CircleResponderModel[];
+    }): void;
+    makeRadarPointsData(seriesData: RadarSeriesType[], renderOptions: RenderOptions): RadarPointsData[];
+    renderAreaModels(radarPointsData: RadarPointsData[]): AreaPointsModel[];
+    renderLineModels(radarPointsData: RadarPointsData[]): LinePointsModel[];
+    renderDotModels(radarPointsData: RadarPointsData[]): RadarCircleModel[];
+    getSeriesColor(showArea: boolean, seriesColor: string, name: string): {
+        lineColor: string;
+        fillColor: string;
+    };
+    selectSeries: ({ index, seriesIndex, state }: SelectSeriesHandlerParams<RadarChartOptions>) => void;
+    showTooltip: ({ index, seriesIndex, state }: SelectSeriesHandlerParams<RadarChartOptions>) => void;
+}
+export {};