@techie_doubts/tui.chart.2026 4.6.1

package/dist/esm/brushes/exportMenu.js

@@ -0,0 +1,55 @@
+import { line, rect, pathRect } from "./basic";
+import { BUTTON_RECT_SIZE } from "../component/exportMenu";
+function drawXIcon(ctx, icon, rectSize) {
+    const { x: startX, y: startY, theme: { color: strokeStyle, lineWidth }, } = icon;
+    const offset = rectSize / 3;
+    const x = startX + offset;
+    const y = startY + offset;
+    const x2 = startX + offset * 2;
+    const y2 = startY + offset * 2;
+    const points = [
+        { x, y, x2, y2 },
+        { x, y: y2, x2, y2: y },
+    ];
+    points.forEach((p) => {
+        line(ctx, Object.assign(Object.assign({ type: 'line' }, p), { strokeStyle, lineWidth }));
+    });
+}
+function drawMoreIcon(ctx, icon, rectSize) {
+    const { x, y, theme: { color, width, height, gap }, } = icon;
+    const paddingX = (rectSize - width) / 2;
+    const paddingY = (rectSize - (height * 3 + gap * 2)) / 2;
+    const centerX = x + paddingX;
+    const points = [
+        { x: centerX, y: y + paddingY },
+        { x: centerX, y: y + paddingY + height + gap },
+        { x: centerX, y: y + paddingY + (height + gap) * 2 },
+    ];
+    points.forEach((p) => {
+        rect(ctx, Object.assign(Object.assign({ type: 'rect' }, p), { color, width: width, height: height }));
+    });
+}
+export function exportMenuButton(ctx, exportMenuButtonModel) {
+    const { opened, x: xPos, y: yPos, theme } = exportMenuButtonModel;
+    const { borderColor, backgroundColor, borderWidth, borderRadius, xIcon, dotIcon, } = theme;
+    const x = xPos + borderWidth;
+    const y = yPos + borderWidth;
+    const rectSize = BUTTON_RECT_SIZE - 2 * borderWidth;
+    pathRect(ctx, {
+        type: 'pathRect',
+        x,
+        y,
+        fill: backgroundColor,
+        stroke: borderColor,
+        width: rectSize,
+        height: rectSize,
+        radius: borderRadius,
+        lineWidth: borderWidth,
+    });
+    if (opened) {
+        drawXIcon(ctx, { x, y, theme: xIcon }, rectSize);
+    }
+    else {
+        drawMoreIcon(ctx, { x, y, theme: dotIcon }, rectSize);
+    }
+}

package/dist/esm/brushes/gauge.d.ts

@@ -0,0 +1,2 @@
+import { ClockHandModel } from "../../types/components/series";
+export declare function clockHand(ctx: CanvasRenderingContext2D, model: ClockHandModel): void;

package/dist/esm/brushes/gauge.js

@@ -0,0 +1,39 @@
+import { calculateDegreeToRadian, getRadialPosition, calculateValidAngle, DEGREE_90, } from "../helpers/sector";
+import { circle } from "./basic";
+import { polygon } from "./polygon";
+function getClockHandPoints(model) {
+    const { x, y, x2, y2, degree, baseLine } = model;
+    const halfBaseLine = baseLine / 2;
+    let startPoint, endPoint;
+    if (x === x2) {
+        startPoint = { x: x - halfBaseLine, y };
+        endPoint = { x: x + halfBaseLine, y };
+    }
+    else if (y === y2) {
+        startPoint = { x, y: y - halfBaseLine };
+        endPoint = { x, y: y + halfBaseLine };
+    }
+    else {
+        startPoint = getRadialPosition(x, y, halfBaseLine, calculateDegreeToRadian(calculateValidAngle(degree + DEGREE_90)));
+        endPoint = getRadialPosition(x, y, halfBaseLine, calculateDegreeToRadian(calculateValidAngle(degree - DEGREE_90)));
+    }
+    return [startPoint, { x: x2, y: y2 }, endPoint];
+}
+export function clockHand(ctx, model) {
+    const { color, x, y, pin: { color: pinColor, radius, style }, } = model;
+    circle(ctx, {
+        type: 'circle',
+        x,
+        y,
+        radius,
+        color: pinColor,
+        style,
+    });
+    polygon(ctx, {
+        type: 'polygon',
+        color,
+        lineWidth: 1,
+        fillColor: color,
+        points: getClockHandPoints(model),
+    });
+}

package/dist/esm/brushes/label.d.ts

@@ -0,0 +1,34 @@
+import { LabelModel, BubbleLabelModel } from "../../types/components/axis";
+export declare const DEFAULT_LABEL_TEXT = "normal 11px Arial";
+export declare const labelStyle: {
+    default: {
+        font: string;
+        fillStyle: string;
+        textAlign: string;
+        textBaseline: string;
+    };
+    title: {
+        textBaseline: string;
+    };
+    axisTitle: {
+        textBaseline: string;
+    };
+    rectLabel: {
+        font: string;
+        fillStyle: string;
+        textAlign: string;
+        textBaseline: string;
+    };
+};
+export declare const strokeLabelStyle: {
+    none: {
+        lineWidth: number;
+        strokeStyle: string;
+    };
+    stroke: {
+        lineWidth: number;
+        strokeStyle: string;
+    };
+};
+export declare function label(ctx: CanvasRenderingContext2D, labelModel: LabelModel): void;
+export declare function bubbleLabel(ctx: CanvasRenderingContext2D, model: BubbleLabelModel): void;

package/dist/esm/brushes/label.js

@@ -0,0 +1,165 @@
+import { makeStyleObj, fillStyle, strokeWithOptions } from "../helpers/style";
+import { isNumber } from "../helpers/utils";
+import { rgba } from "../helpers/color";
+export const DEFAULT_LABEL_TEXT = 'normal 11px Arial';
+export const labelStyle = {
+    default: {
+        font: DEFAULT_LABEL_TEXT,
+        fillStyle: '#333333',
+        textAlign: 'left',
+        textBaseline: 'middle',
+    },
+    title: {
+        textBaseline: 'top',
+    },
+    axisTitle: {
+        textBaseline: 'top',
+    },
+    rectLabel: {
+        font: DEFAULT_LABEL_TEXT,
+        fillStyle: 'rgba(0, 0, 0, 0.3)',
+        textAlign: 'center',
+        textBaseline: 'middle',
+    },
+};
+export const strokeLabelStyle = {
+    none: {
+        lineWidth: 1,
+        strokeStyle: 'rgba(255, 255, 255, 0)',
+    },
+    stroke: {
+        lineWidth: 4,
+        strokeStyle: 'rgba(255, 255, 255, 0.5)',
+    },
+};
+export function label(ctx, labelModel) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { x, y, text, style, stroke, opacity, radian, rotationPosition } = labelModel;
+    if (style) {
+        const styleObj = makeStyleObj(style, labelStyle);
+        Object.keys(styleObj).forEach((key) => {
+            ctx[key] =
+                key === 'fillStyle' && isNumber(opacity) ? rgba(styleObj[key], opacity) : styleObj[key];
+        });
+    }
+    ctx.save();
+    if (radian) {
+        ctx.translate((_b = (_a = rotationPosition) === null || _a === void 0 ? void 0 : _a.x, (_b !== null && _b !== void 0 ? _b : x)), (_d = (_c = rotationPosition) === null || _c === void 0 ? void 0 : _c.y, (_d !== null && _d !== void 0 ? _d : y)));
+        ctx.rotate(radian);
+        ctx.translate(-(_f = (_e = rotationPosition) === null || _e === void 0 ? void 0 : _e.x, (_f !== null && _f !== void 0 ? _f : x)), -(_h = (_g = rotationPosition) === null || _g === void 0 ? void 0 : _g.y, (_h !== null && _h !== void 0 ? _h : y)));
+    }
+    if (stroke) {
+        const strokeStyleObj = makeStyleObj(stroke, strokeLabelStyle);
+        const strokeStyleKeys = Object.keys(strokeStyleObj);
+        strokeStyleKeys.forEach((key) => {
+            ctx[key] =
+                key === 'strokeStyle' && isNumber(opacity)
+                    ? rgba(strokeStyleObj[key], opacity)
+                    : strokeStyleObj[key];
+        });
+        if (strokeStyleKeys.length) {
+            ctx.strokeText(text, x, y);
+        }
+    }
+    ctx.fillText(text, x, y);
+    ctx.restore();
+}
+const textBubbleStyle = {
+    shadow: {
+        shadowColor: 'rgba(0, 0, 0, 0.3)',
+        shadowOffsetY: 2,
+        shadowBlur: 4,
+    },
+};
+export function bubbleLabel(ctx, model) {
+    var _a, _b, _c, _d;
+    const { radian = 0, rotationPosition, bubble: { x, y, width, height, radius = 0, lineWidth = 1, direction, points = [], fill = '#fff', strokeStyle = 'rgba(0, 0, 0, 0)', style: bubbleStyle = null, }, } = model;
+    if (width > 0 && height > 0) {
+        drawBubble(ctx, {
+            x,
+            y,
+            radius,
+            width,
+            height,
+            style: bubbleStyle,
+            fill,
+            strokeStyle,
+            lineWidth,
+            direction,
+            points,
+            radian,
+            rotationPosition: {
+                x: (_b = (_a = rotationPosition) === null || _a === void 0 ? void 0 : _a.x, (_b !== null && _b !== void 0 ? _b : x)),
+                y: (_d = (_c = rotationPosition) === null || _c === void 0 ? void 0 : _c.y, (_d !== null && _d !== void 0 ? _d : y)),
+            },
+        });
+    }
+    if (model.label.text) {
+        const { x: labelX, y: labelY, text, strokeStyle: labelStrokeColor = 'rgba(0, 0, 0, 0)', style, } = model.label;
+        ctx.shadowColor = 'rgba(0, 0, 0, 0)';
+        label(ctx, {
+            type: 'label',
+            x: labelX,
+            y: labelY,
+            text,
+            style,
+            stroke: [{ strokeStyle: labelStrokeColor }],
+            radian,
+            rotationPosition,
+        });
+    }
+}
+function drawBubbleArrow(ctx, points) {
+    if (!points.length) {
+        return;
+    }
+    ctx.lineTo(points[0].x, points[0].y);
+    ctx.lineTo(points[1].x, points[1].y);
+    ctx.lineTo(points[2].x, points[2].y);
+}
+function drawBubble(ctx, model) {
+    const { x, y, width, height, style, radius = 0, strokeStyle, fill, lineWidth = 1, points = [], direction = '', radian, rotationPosition, } = model;
+    const right = x + width;
+    const bottom = y + height;
+    ctx.beginPath();
+    ctx.save();
+    if (radian && rotationPosition) {
+        ctx.translate(rotationPosition.x, rotationPosition.y);
+        ctx.rotate(radian);
+        ctx.translate(-rotationPosition.x, -rotationPosition.y);
+    }
+    ctx.moveTo(x + radius, y);
+    if (direction === 'top') {
+        drawBubbleArrow(ctx, points);
+    }
+    ctx.lineTo(right - radius, y);
+    ctx.quadraticCurveTo(right, y, right, y + radius);
+    if (direction === 'right') {
+        drawBubbleArrow(ctx, points);
+    }
+    ctx.lineTo(right, y + height - radius);
+    ctx.quadraticCurveTo(right, bottom, right - radius, bottom);
+    if (direction === 'bottom') {
+        drawBubbleArrow(ctx, points);
+    }
+    ctx.lineTo(x + radius, bottom);
+    ctx.quadraticCurveTo(x, bottom, x, bottom - radius);
+    if (direction === 'left') {
+        drawBubbleArrow(ctx, points);
+    }
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    if (style) {
+        const styleObj = makeStyleObj(style, textBubbleStyle);
+        Object.keys(styleObj).forEach((key) => {
+            ctx[key] = styleObj[key];
+        });
+    }
+    if (fill) {
+        fillStyle(ctx, fill);
+    }
+    if (strokeStyle) {
+        strokeWithOptions(ctx, { strokeStyle, lineWidth });
+    }
+    ctx.restore();
+}

package/dist/esm/brushes/legend.d.ts

@@ -0,0 +1,7 @@
+import { LegendModel } from "../../types/components/legend";
+export declare const LEGEND_ITEM_MARGIN_X = 40;
+export declare const LEGEND_MARGIN_X = 5;
+export declare const LEGEND_CHECKBOX_SIZE = 12;
+export declare const LEGEND_ICON_SIZE = 12;
+export declare function getLegendItemHeight(fontSize: number): number;
+export declare function legend(ctx: CanvasRenderingContext2D, model: LegendModel): void;

package/dist/esm/brushes/legend.js

@@ -0,0 +1,162 @@
+import { line, circle, rect } from "./basic";
+import { label } from "./label";
+import { getRGBA } from "../helpers/color";
+import { scatterSeries } from "./scatterSeries";
+import { getTitleFontString } from "../helpers/style";
+import { getTextHeight } from "../helpers/calculator";
+import { padding } from "../store/layout";
+export const LEGEND_ITEM_MARGIN_X = 40;
+export const LEGEND_MARGIN_X = 5;
+export const LEGEND_CHECKBOX_SIZE = 12;
+export const LEGEND_ICON_SIZE = 12;
+const ICON_BORDER_WIDTH = 1.5;
+const INACTIVE_OPACITY = 0.3;
+const RECT_SIZE = 10;
+const LINE_ICON_PADDING = 2;
+const CIRCLE_ICON_RADIUS = 6;
+export function getLegendItemHeight(fontSize) {
+    return fontSize + padding.Y;
+}
+function drawLineIcon(ctx, x, y, color) {
+    const xCurveOffset = [2, 2, 6, 6, 10, 10];
+    const yCurveOffset = [8, 0, 0, 8, 8, 0];
+    xCurveOffset.forEach((xOffset, idx) => {
+        if (idx === 5) {
+            return;
+        }
+        line(ctx, {
+            type: 'line',
+            x: x + xOffset,
+            y: y + yCurveOffset[idx],
+            x2: x + xCurveOffset[idx + 1],
+            y2: y + yCurveOffset[idx + 1],
+            lineWidth: 2,
+            strokeStyle: color,
+        });
+    });
+}
+function drawCheckIcon(ctx, x, y, active) {
+    const color = '#555555';
+    const strokeStyle = active ? color : getRGBA(color, INACTIVE_OPACITY);
+    line(ctx, {
+        type: 'line',
+        x: x + 2,
+        y: y + 5,
+        x2: x + 5,
+        y2: y + 8,
+        strokeStyle,
+        lineWidth: 2,
+    });
+    line(ctx, {
+        type: 'line',
+        x: x + 5,
+        y: y + 9,
+        x2: x + 10,
+        y2: y + 3,
+        strokeStyle,
+        lineWidth: 2,
+    });
+}
+function drawCheckbox(ctx, x, y, renderOptions) {
+    const { active, checked } = renderOptions;
+    const borderColor = active ? '#bbb' : getRGBA('#bbbbbb', INACTIVE_OPACITY);
+    rect(ctx, {
+        type: 'rect',
+        x,
+        y,
+        width: LEGEND_CHECKBOX_SIZE,
+        height: LEGEND_CHECKBOX_SIZE,
+        color: '#fff',
+        borderColor,
+        thickness: 1,
+    });
+    if (checked) {
+        drawCheckIcon(ctx, x, y, active);
+    }
+}
+function drawIcon(ctx, x, y, renderOptions) {
+    const { iconType, active, color, showCheckbox } = renderOptions;
+    const iconX = x + (showCheckbox ? LEGEND_CHECKBOX_SIZE + LEGEND_MARGIN_X : 0);
+    const iconColor = active ? color : getRGBA(color, INACTIVE_OPACITY);
+    if (iconType === 'rect') {
+        rect(ctx, {
+            type: 'rect',
+            x: iconX,
+            y: y + (LEGEND_CHECKBOX_SIZE - RECT_SIZE) / 2,
+            width: RECT_SIZE,
+            height: RECT_SIZE,
+            color: iconColor,
+        });
+    }
+    else if (iconType === 'line') {
+        drawLineIcon(ctx, iconX, y + LINE_ICON_PADDING, iconColor);
+    }
+    else if (iconType === 'circle') {
+        circle(ctx, {
+            type: 'circle',
+            x: iconX + CIRCLE_ICON_RADIUS,
+            y: y + CIRCLE_ICON_RADIUS,
+            radius: CIRCLE_ICON_RADIUS,
+            color: iconColor,
+            style: ['default'],
+        });
+    }
+}
+function drawScatterIcon(ctx, x, y, renderOptions) {
+    const { iconType, active, color, showCheckbox } = renderOptions;
+    const iconX = x + (showCheckbox ? LEGEND_CHECKBOX_SIZE + LEGEND_MARGIN_X : 0);
+    const iconColor = active ? color : getRGBA(color, INACTIVE_OPACITY);
+    scatterSeries(ctx, {
+        type: 'scatterSeries',
+        iconType: iconType,
+        x: iconX + CIRCLE_ICON_RADIUS,
+        y: y + CIRCLE_ICON_RADIUS,
+        borderColor: iconColor,
+        size: CIRCLE_ICON_RADIUS * 2,
+        fillColor: 'rgba(255, 255, 255, 0)',
+        borderWidth: ICON_BORDER_WIDTH,
+    });
+}
+function drawLabel(ctx, x, y, text, renderOptions) {
+    const { active, showCheckbox, font, fontColor } = renderOptions;
+    const fillStyle = active ? fontColor : getRGBA(fontColor, INACTIVE_OPACITY);
+    label(ctx, {
+        type: 'label',
+        x: x +
+            LEGEND_ICON_SIZE +
+            LEGEND_MARGIN_X +
+            (showCheckbox ? LEGEND_CHECKBOX_SIZE + LEGEND_MARGIN_X : 0),
+        y,
+        text,
+        style: ['default', { font, textBaseline: 'top', fillStyle }],
+    });
+}
+export function legend(ctx, model) {
+    const { data, showCheckbox, align, fontSize, fontFamily, fontWeight } = model;
+    const font = getTitleFontString({ fontSize, fontFamily, fontWeight });
+    const fontColor = model.color;
+    data.forEach((datum) => {
+        const { x, y, checked, active, color, iconType, useScatterChartIcon, viewLabel: legendLabel, } = datum;
+        const iconY = y - 1 + (getTextHeight(legendLabel, font) - 11) / 4;
+        const renderOptions = {
+            iconType,
+            checked,
+            active,
+            color,
+            showCheckbox,
+            align,
+            font,
+            fontColor,
+        };
+        if (showCheckbox) {
+            drawCheckbox(ctx, x, iconY, renderOptions);
+        }
+        if (useScatterChartIcon && iconType !== 'line') {
+            drawScatterIcon(ctx, x, iconY, renderOptions);
+        }
+        else {
+            drawIcon(ctx, x, iconY, renderOptions);
+        }
+        drawLabel(ctx, x, y, legendLabel, renderOptions);
+    });
+}

package/dist/esm/brushes/lineSeries.d.ts

@@ -0,0 +1,5 @@
+import { AreaPointsModel, LinePointsModel } from "../../types/components/series";
+declare type PointsModel = LinePointsModel | AreaPointsModel;
+export declare function linePoints(ctx: CanvasRenderingContext2D, pointsModel: PointsModel): void;
+export declare function areaPoints(ctx: CanvasRenderingContext2D, areaPointsModel: AreaPointsModel): void;
+export {};

package/dist/esm/brushes/lineSeries.js

@@ -0,0 +1,41 @@
+import { setLineDash, fillStyle, strokeWithOptions } from "../helpers/style";
+import { isNull } from "../helpers/utils";
+export function linePoints(ctx, pointsModel) {
+    const { color: strokeStyle, lineWidth, points, dashSegments = [] } = pointsModel;
+    ctx.lineCap = 'round';
+    ctx.beginPath();
+    if (dashSegments) {
+        setLineDash(ctx, dashSegments);
+    }
+    let start = false;
+    points.forEach((point, idx) => {
+        var _a, _b;
+        if (isNull(point)) {
+            start = false;
+            return;
+        }
+        if (!start) {
+            ctx.moveTo(point.x, point.y);
+            start = true;
+            return;
+        }
+        if (point.controlPoint && ((_b = (_a = points[idx - 1]) === null || _a === void 0 ? void 0 : _a.controlPoint) === null || _b === void 0 ? void 0 : _b.next)) {
+            const { x: prevX, y: prevY } = points[idx - 1].controlPoint.next;
+            const { controlPoint, x, y } = point;
+            ctx.bezierCurveTo(prevX, prevY, controlPoint.prev.x, controlPoint.prev.y, x, y);
+        }
+        else {
+            ctx.lineTo(point.x, point.y);
+        }
+    });
+    strokeWithOptions(ctx, { lineWidth, strokeStyle });
+    ctx.closePath();
+    setLineDash(ctx, []);
+}
+export function areaPoints(ctx, areaPointsModel) {
+    const { fillColor } = areaPointsModel;
+    ctx.beginPath();
+    linePoints(ctx, areaPointsModel);
+    fillStyle(ctx, fillColor);
+    ctx.closePath();
+}

package/dist/esm/brushes/polygon.d.ts

@@ -0,0 +1,2 @@
+import { PolygonModel } from "../../types/components/series";
+export declare function polygon(ctx: CanvasRenderingContext2D, polygonModel: PolygonModel): void;

package/dist/esm/brushes/polygon.js

@@ -0,0 +1,24 @@
+import { setLineDash, fillStyle, strokeWithOptions } from "../helpers/style";
+export function polygon(ctx, polygonModel) {
+    const { color: strokeStyle, points, lineWidth, fillColor, dashSegments = [] } = polygonModel;
+    if (!points.length) {
+        return;
+    }
+    ctx.beginPath();
+    if (dashSegments) {
+        setLineDash(ctx, dashSegments);
+    }
+    points.forEach(({ x, y }, idx) => {
+        if (idx === 0) {
+            ctx.moveTo(x, y);
+            return;
+        }
+        ctx.lineTo(x, y);
+    });
+    ctx.lineTo(points[0].x, points[0].y);
+    if (fillColor) {
+        fillStyle(ctx, fillColor);
+    }
+    strokeWithOptions(ctx, { lineWidth, strokeStyle });
+    ctx.closePath();
+}

package/dist/esm/brushes/resetButton.d.ts

@@ -0,0 +1,3 @@
+import { BackButtonModel, ResetButtonModel } from "../../types/components/resetButton";
+export declare function backButton(ctx: CanvasRenderingContext2D, backButtonModel: BackButtonModel): void;
+export declare function resetButton(ctx: CanvasRenderingContext2D, resetButtonModel: ResetButtonModel): void;

package/dist/esm/brushes/resetButton.js

@@ -0,0 +1,112 @@
+import { BUTTON_RECT_SIZE } from "../component/exportMenu";
+import { circle, line, pathRect } from "./basic";
+import { areaPoints } from "./lineSeries";
+const ARROW_HEIGHT = 3;
+const ARROW_WIDTH = 6;
+function drawResetIcon(ctx, point) {
+    const { x, y } = point;
+    const centerX = x + BUTTON_RECT_SIZE / 2;
+    const centerY = y + BUTTON_RECT_SIZE / 2;
+    const tickSize = BUTTON_RECT_SIZE / 10;
+    const color = '#545454';
+    circle(ctx, {
+        type: 'circle',
+        x: centerX,
+        y: centerY,
+        radius: tickSize * 2,
+        angle: { start: 0, end: Math.PI / 2 },
+        color: 'transparent',
+        style: [{ lineWidth: 2, strokeStyle: color }],
+    });
+    const pointStartX = centerX + tickSize * 2;
+    const pointStartY = centerY;
+    const points = [
+        { x: pointStartX - ARROW_WIDTH / 2, y: pointStartY },
+        { x: pointStartX + ARROW_WIDTH / 2, y: pointStartY },
+        { x: pointStartX, y: pointStartY + ARROW_HEIGHT },
+    ];
+    areaPoints(ctx, {
+        type: 'areaPoints',
+        points,
+        lineWidth: 1,
+        color,
+        fillColor: color,
+    });
+}
+function drawBackIcon(ctx, point) {
+    const barWidth = 4;
+    const radius = BUTTON_RECT_SIZE / 7;
+    const { x, y } = point;
+    const centerX = x + BUTTON_RECT_SIZE / 2;
+    const centerY = y + BUTTON_RECT_SIZE / 2;
+    const color = '#545454';
+    line(ctx, {
+        type: 'line',
+        lineWidth: 2,
+        x: centerX - barWidth / 2,
+        y: centerY + radius,
+        x2: centerX + barWidth / 2,
+        y2: centerY + radius,
+        strokeStyle: color,
+    });
+    line(ctx, {
+        type: 'line',
+        lineWidth: 2,
+        x: centerX - barWidth / 2,
+        y: centerY - radius,
+        x2: centerX + barWidth / 2,
+        y2: centerY - radius,
+        strokeStyle: color,
+    });
+    circle(ctx, {
+        type: 'circle',
+        x: centerX + barWidth / 2,
+        y: centerY,
+        radius,
+        angle: { start: Math.PI / 2, end: (Math.PI * 3) / 2 },
+        color: 'transparent',
+        style: [{ lineWidth: 2, strokeStyle: color }],
+    });
+    const pointStartX = centerX - barWidth / 2;
+    const pointStartY = centerY - radius;
+    const points = [
+        { x: pointStartX - ARROW_HEIGHT, y: pointStartY },
+        { x: pointStartX, y: pointStartY - ARROW_WIDTH / 2 },
+        { x: pointStartX, y: pointStartY + ARROW_WIDTH / 2 },
+    ];
+    areaPoints(ctx, {
+        type: 'areaPoints',
+        points,
+        lineWidth: 1,
+        color,
+        fillColor: color,
+    });
+}
+export function backButton(ctx, backButtonModel) {
+    const { x, y } = backButtonModel;
+    pathRect(ctx, {
+        type: 'pathRect',
+        x,
+        y,
+        fill: '#f4f4f4',
+        stroke: '#f4f4f4',
+        width: BUTTON_RECT_SIZE,
+        height: BUTTON_RECT_SIZE,
+        radius: 5,
+    });
+    drawBackIcon(ctx, { x, y });
+}
+export function resetButton(ctx, resetButtonModel) {
+    const { x, y } = resetButtonModel;
+    pathRect(ctx, {
+        type: 'pathRect',
+        x,
+        y,
+        fill: '#f4f4f4',
+        stroke: '#f4f4f4',
+        width: BUTTON_RECT_SIZE,
+        height: BUTTON_RECT_SIZE,
+        radius: 5,
+    });
+    drawResetIcon(ctx, { x, y });
+}

package/dist/esm/brushes/scatterSeries.d.ts

@@ -0,0 +1,2 @@
+import { ScatterSeriesModel } from "../../types/components/series";
+export declare function scatterSeries(ctx: CanvasRenderingContext2D, model: ScatterSeriesModel): void;