@techie_doubts/tui.chart.2026 4.6.1

package/dist/esm/painter.d.ts

@@ -0,0 +1,27 @@
+import Chart from "./charts/chart";
+import { CircleModel, ClipRectAreaModel, LinePointsModel, PathRectModel } from "../types/components/series";
+import { TooltipModel } from "../types/components/tooltip";
+import { Options } from "../types/store/store";
+declare type BrushModel = ClipRectAreaModel | LinePointsModel | PathRectModel | CircleModel | TooltipModel;
+declare type Brush = (ctx: CanvasRenderingContext2D, brushModel: BrushModel) => void;
+export default class Painter {
+    width: number;
+    height: number;
+    brushes: Record<string, Brush>;
+    chart: Chart<Options>;
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    constructor(chart: Chart<Options>);
+    showUnsupportedCanvasFeatureError(): void;
+    setup(): void;
+    setSize(width: number, height: number): void;
+    scaleCanvasRatio(ratio: number): void;
+    add(name: string, brush: Brush): void;
+    addGroups(groups: any[]): void;
+    paint(name: string, brushModel: any): void;
+    paintForEach(brushModels: any[]): void;
+    beforeFrame(): void;
+    beforeDraw(transX: number, transY: number): void;
+    afterDraw(): void;
+}
+export {};

package/dist/esm/painter.js

@@ -0,0 +1,88 @@
+import { message } from "./message";
+export default class Painter {
+    constructor(chart) {
+        this.width = 0;
+        this.height = 0;
+        this.brushes = {};
+        this.chart = chart;
+    }
+    showUnsupportedCanvasFeatureError() {
+        if (!this.ctx.setLineDash) {
+            console.warn(message.DASH_SEGMENTS_UNAVAILABLE_ERROR);
+        }
+    }
+    setup() {
+        const { height, width } = this.chart.store.state.chart;
+        if (!this.canvas) {
+            const canvas = document.createElement('canvas');
+            this.canvas = canvas;
+            this.chart.el.appendChild(canvas);
+            canvas.addEventListener('click', this.chart);
+            canvas.addEventListener('mousemove', this.chart);
+            canvas.addEventListener('mousedown', this.chart);
+            canvas.addEventListener('mouseup', this.chart);
+            canvas.addEventListener('mouseout', this.chart);
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                this.ctx = ctx;
+            }
+        }
+        this.setSize(width, height);
+        this.showUnsupportedCanvasFeatureError();
+    }
+    setSize(width, height) {
+        this.canvas.style.width = `${width}px`;
+        this.canvas.style.height = `${height}px`;
+        let ratio = 1;
+        if ('deviceXDPI' in window.screen) {
+            // IE mobile or IE
+            ratio =
+                window.screen.deviceXDPI /
+                    window.screen.logicalXDPI;
+        }
+        else if (window.hasOwnProperty('devicePixelRatio')) {
+            ratio = window.devicePixelRatio;
+        }
+        this.width = width * ratio || 0;
+        this.height = height * ratio || 0;
+        this.scaleCanvasRatio(ratio);
+    }
+    scaleCanvasRatio(ratio) {
+        this.canvas.width = this.width;
+        this.canvas.height = this.height;
+        this.ctx.scale(ratio, ratio);
+    }
+    add(name, brush) {
+        this.brushes[name] = brush;
+    }
+    addGroups(groups) {
+        groups.forEach((group) => {
+            Object.keys(group).forEach((key) => {
+                this.add(key, group[key]);
+            });
+        });
+    }
+    paint(name, brushModel) {
+        if (this.brushes[name]) {
+            this.brushes[name](this.ctx, brushModel);
+        }
+        else {
+            throw new Error(message.noBrushError(name));
+        }
+    }
+    paintForEach(brushModels) {
+        brushModels.forEach((m) => this.paint(m.type, m));
+    }
+    beforeFrame() {
+        this.ctx.clearRect(0, 0, this.width, this.height);
+        this.ctx.fillStyle = 'transparent';
+        this.ctx.fillRect(0, 0, this.width, this.height);
+    }
+    beforeDraw(transX, transY) {
+        this.ctx.save();
+        this.ctx.translate(transX, transY);
+    }
+    afterDraw() {
+        this.ctx.restore();
+    }
+}

package/dist/esm/responderDetectors.d.ts

@@ -0,0 +1,6 @@
+declare type DetectorType = 'circle' | 'rect' | 'sector' | 'boxPlot' | 'line' | 'clockHand';
+declare type ResponderDetectors = {
+    [key in DetectorType]: Function;
+};
+export declare const responderDetectors: ResponderDetectors;
+export {};

package/dist/esm/responderDetectors.js

@@ -0,0 +1,124 @@
+import { isUndefined } from "./helpers/utils";
+import { calculateRadianToDegree, withinRadian } from "./helpers/sector";
+function withinRotationRect({ slope, yIntercept, mouseX, mouseY, modelXPositions, compX, compY, detectionSize = 0, }) {
+    const [x1, x2] = modelXPositions;
+    const posY = slope * (mouseX - compX) + yIntercept;
+    const withinRadius = (x1 > x2 && mouseX >= compX + x2 && mouseX <= compX + x1) ||
+        (x1 < x2 && mouseX <= compX + x2 && mouseX >= compX + x1);
+    const withinDetectionSize = posY - detectionSize + compY <= mouseY && mouseY <= posY + detectionSize + compY;
+    return withinRadius && withinDetectionSize;
+}
+export const responderDetectors = {
+    circle: (mousePosition, model, componentRect) => {
+        const { x, y } = mousePosition;
+        const { x: modelX, y: modelY, radius, detectionSize } = model;
+        const { x: compX, y: compY } = componentRect;
+        const radiusAdjustment = isUndefined(detectionSize) ? 10 : detectionSize;
+        return (Math.pow((x - (modelX + compX)), 2) + Math.pow((y - (modelY + compY)), 2) < Math.pow((radius + radiusAdjustment), 2));
+    },
+    rect: (mousePosition, model, componentRect = { x: 0, y: 0, width: 0, height: 0 }) => {
+        const { x, y } = mousePosition;
+        const { x: modelX, y: modelY, width, height } = model;
+        const { x: compX, y: compY } = componentRect;
+        return (x >= modelX + compX &&
+            x <= modelX + compX + width &&
+            y >= modelY + compY &&
+            y <= modelY + compY + height);
+    },
+    sector: (mousePosition, model, componentRect = { x: 0, y: 0, width: 0, height: 0 }) => {
+        const { x, y } = mousePosition;
+        const { x: modelX, y: modelY, radius: { outer, inner }, degree: { start, end }, drawingStartAngle, clockwise, } = model;
+        const { x: compX, y: compY } = componentRect;
+        const xPos = x - (modelX + compX);
+        const yPos = y - (modelY + compY);
+        const insideOuterRadius = Math.pow(xPos, 2) + Math.pow(yPos, 2) < Math.pow(outer, 2);
+        const outsideInnerRadius = Math.pow(xPos, 2) + Math.pow(yPos, 2) > Math.pow(inner, 2);
+        const withinRadius = insideOuterRadius && outsideInnerRadius;
+        const detectionDegree = calculateRadianToDegree(Math.atan2(yPos, xPos), drawingStartAngle);
+        return withinRadius && withinRadian(clockwise, start, end, detectionDegree);
+    },
+    line: (mousePosition, model, componentRect = { x: 0, y: 0, width: 0, height: 0 }) => {
+        const { x, y } = mousePosition;
+        const { x: compX, y: compY } = componentRect;
+        const { x: modelX, y: modelY, x2, y2, detectionSize = 3 } = model;
+        const numerator = y2 - modelY;
+        const denominator = x2 - modelX;
+        let withinLine = false;
+        if (numerator === 0) {
+            const minX = Math.min(modelX, x2);
+            const maxX = Math.max(modelX, x2);
+            withinLine =
+                x - compX >= minX &&
+                    x - compX <= maxX &&
+                    y >= modelY + compY - detectionSize &&
+                    y <= modelY + compY + detectionSize;
+        }
+        else if (denominator === 0) {
+            const minY = Math.min(modelY, y2);
+            const maxY = Math.max(modelY, y2);
+            withinLine =
+                y - compY >= minY &&
+                    y - compY <= maxY &&
+                    x >= modelX + compX - detectionSize &&
+                    x <= modelX + compX + detectionSize;
+        }
+        else {
+            const slope = numerator / denominator;
+            const xPos = x - (modelX + compX);
+            const yPos = y - (modelY + compY);
+            withinLine = slope * xPos === yPos;
+        }
+        return withinLine;
+    },
+    boxPlot: (mousePosition, model, componentRect = { x: 0, y: 0, width: 0, height: 0 }) => {
+        return ['rect', 'median', 'minimum', 'maximum', 'upperWhisker', 'lowerWhisker'].some((prop) => {
+            if (!model[prop]) {
+                return false;
+            }
+            return prop === 'rect'
+                ? responderDetectors.rect(mousePosition, model[prop], componentRect)
+                : responderDetectors.line(mousePosition, model[prop], componentRect);
+        });
+    },
+    clockHand: (mousePosition, model, componentRect = { x: 0, y: 0, width: 0, height: 0 }) => {
+        const { x, y } = mousePosition;
+        const { x: compX, y: compY } = componentRect;
+        const { x: centerX, y: centerY, x2, y2, detectionSize = 5 } = model;
+        const numerator = y2 - centerY;
+        const denominator = x2 - centerX;
+        let withinClockHand = false;
+        if (numerator === 0) {
+            const minX = Math.min(centerX, x2);
+            const maxX = Math.max(centerX, x2);
+            withinClockHand =
+                x - compX >= minX &&
+                    x - compX <= maxX &&
+                    y >= centerY + compY - detectionSize &&
+                    y <= centerY + compY + detectionSize;
+        }
+        else if (denominator === 0) {
+            const minY = Math.min(centerY, y2);
+            const maxY = Math.max(centerY, y2);
+            withinClockHand =
+                y - compY >= minY &&
+                    y - compY <= maxY &&
+                    x >= centerX + compX - detectionSize &&
+                    x <= centerX + compX + detectionSize;
+        }
+        else {
+            const slope = numerator / denominator;
+            const yIntercept = centerY - slope * centerX;
+            withinClockHand = withinRotationRect({
+                slope,
+                yIntercept,
+                mouseX: x,
+                mouseY: y,
+                modelXPositions: [centerX, x2],
+                compX,
+                compY,
+                detectionSize,
+            });
+        }
+        return withinClockHand;
+    },
+};

package/dist/esm/scale/coordinateScaleCalculator.d.ts

@@ -0,0 +1,24 @@
+import { ValueEdge, ScaleData } from "../../types/store/store";
+import { LineChartOptions, Scale } from "../../types/options";
+declare type stackScaleType = 'percentStack' | 'minusPercentStack' | 'dualPercentStack' | 'divergingPercentStack';
+export declare function getNormalizedStepCount(limitSize: number, stepSize: number): number;
+export declare function makeScaleOption(dataRange: ValueEdge, scaleOptions?: Scale): Required<Scale>;
+export declare function calculateCoordinateScale(options: {
+    dataRange: ValueEdge;
+    offsetSize: number;
+    useSpectrumLegend?: boolean;
+    scaleOption?: Scale;
+    minStepSize?: number;
+}): ScaleData;
+export declare function getStackScaleData(type: stackScaleType): ScaleData;
+export declare function calculateXAxisScaleForCoordinateLineType(scale: ScaleData, options: LineChartOptions, categories: string[]): {
+    limit: {
+        max: number;
+        min: number;
+    };
+    stepCount: number;
+    stepSize: number;
+    positionRatio: number;
+    sizeRatio: number;
+};
+export {};

package/dist/esm/scale/coordinateScaleCalculator.js

@@ -0,0 +1,174 @@
+import { isNumber } from "../helpers/utils";
+import { isDateType } from "../helpers/axes";
+import { AxisType } from "../component/axis";
+const SNAP_VALUES = [1, 2, 5, 10];
+const DEFAULT_PIXELS_PER_STEP = 88;
+function adjustLimitForOverflow({ min, max }, stepSize, overflowed) {
+    return {
+        min: overflowed.min ? min - stepSize : min,
+        max: overflowed.max ? max + stepSize : max,
+    };
+}
+function isSeriesOverflowed(scaleData, { min, max }, scaleOption) {
+    var _a, _b;
+    const scaleDataLimit = scaleData.limit;
+    const hasMinOption = isNumber((_a = scaleOption) === null || _a === void 0 ? void 0 : _a.min);
+    const hasMaxOption = isNumber((_b = scaleOption) === null || _b === void 0 ? void 0 : _b.max);
+    const isOverflowedMin = !hasMinOption && scaleDataLimit.min === min && scaleDataLimit.min !== 0;
+    const isOverflowedMax = !hasMaxOption && scaleDataLimit.max === max && scaleDataLimit.max !== 0;
+    if (!isOverflowedMin && !isOverflowedMax) {
+        return null;
+    }
+    return {
+        min: isOverflowedMin,
+        max: isOverflowedMax,
+    };
+}
+function getDigits(num) {
+    const logNumberDividedLN10 = num === 0 ? 1 : Math.log(Math.abs(num)) / Math.LN10;
+    return Math.pow(10, Math.floor(logNumberDividedLN10));
+}
+function getSnappedNumber(num) {
+    let snapNumber = 0;
+    for (let i = 0, t = SNAP_VALUES.length; i < t; i += 1) {
+        snapNumber = SNAP_VALUES[i];
+        const guideValue = (snapNumber + (SNAP_VALUES[i + 1] || snapNumber)) / 2;
+        if (num <= guideValue) {
+            break;
+        }
+    }
+    return snapNumber;
+}
+function getNormalizedStep(stepSize) {
+    const placeNumber = getDigits(stepSize);
+    const simplifiedStepValue = stepSize / placeNumber;
+    return getSnappedNumber(simplifiedStepValue) * placeNumber;
+}
+/**
+ * Get normalized limit values
+ * max = 155 and step = 10 ---> max = 160
+ */
+function getNormalizedLimit(limit, stepSize) {
+    let { min, max } = limit;
+    const minNumber = Math.min(getDigits(max), getDigits(stepSize));
+    const placeNumber = minNumber > 1 ? 1 : 1 / minNumber;
+    const fixedStep = stepSize * placeNumber;
+    // ceil max value step digits
+    max = (Math.ceil((max * placeNumber) / fixedStep) * fixedStep) / placeNumber;
+    if (min > stepSize) {
+        // floor min value to multiples of step
+        min = (Math.floor((min * placeNumber) / fixedStep) * fixedStep) / placeNumber;
+    }
+    else if (min < 0) {
+        min = -(Math.ceil((Math.abs(min) * placeNumber) / fixedStep) * fixedStep) / placeNumber;
+    }
+    else {
+        min = 0;
+    }
+    return { min, max };
+}
+export function getNormalizedStepCount(limitSize, stepSize) {
+    const multiplier = 1 / Math.min(getDigits(limitSize), getDigits(stepSize));
+    return Math.ceil((limitSize * multiplier) / (stepSize * multiplier));
+}
+function hasStepSize(stepSize) {
+    return isNumber(stepSize);
+}
+function getNormalizedScale(scaleData, scale) {
+    const stepSize = hasStepSize(scale.stepSize)
+        ? scaleData.stepSize
+        : getNormalizedStep(scaleData.stepSize);
+    const edge = getNormalizedLimit(scaleData.limit, stepSize);
+    const limitSize = Math.abs(edge.max - edge.min);
+    const stepCount = getNormalizedStepCount(limitSize, stepSize);
+    return {
+        limit: {
+            min: edge.min,
+            max: edge.max,
+        },
+        stepSize,
+        stepCount,
+    };
+}
+function getRoughScale(scale, offsetSize, minStepSize = 1) {
+    const { min, max } = scale;
+    const limitSize = Math.abs(max - min);
+    const valuePerPixel = limitSize / offsetSize;
+    let stepCount = Math.ceil(offsetSize / DEFAULT_PIXELS_PER_STEP);
+    const pixelsPerStep = offsetSize / stepCount;
+    let stepSize = valuePerPixel * pixelsPerStep;
+    if (hasStepSize(scale.stepSize)) {
+        stepSize = scale.stepSize;
+        stepCount = limitSize / stepSize;
+    }
+    else if (isNumber(minStepSize) && stepSize < minStepSize) {
+        stepSize = minStepSize;
+        stepCount = limitSize / stepSize;
+    }
+    return { limit: { min, max }, stepSize, stepCount };
+}
+export function makeScaleOption(dataRange, scaleOptions) {
+    var _a, _b, _c, _d, _e, _f;
+    return {
+        max: (_b = (_a = scaleOptions) === null || _a === void 0 ? void 0 : _a.max, (_b !== null && _b !== void 0 ? _b : dataRange.max)),
+        min: (_d = (_c = scaleOptions) === null || _c === void 0 ? void 0 : _c.min, (_d !== null && _d !== void 0 ? _d : dataRange.min)),
+        stepSize: (_f = (_e = scaleOptions) === null || _e === void 0 ? void 0 : _e.stepSize, (_f !== null && _f !== void 0 ? _f : 'auto')),
+    };
+}
+export function calculateCoordinateScale(options) {
+    const { dataRange, scaleOption, offsetSize, minStepSize, useSpectrumLegend } = options;
+    const scale = makeScaleOption(dataRange, scaleOption);
+    const roughScale = getRoughScale(scale, offsetSize, minStepSize);
+    const normalizedScale = getNormalizedScale(roughScale, scale);
+    const overflowed = useSpectrumLegend
+        ? null
+        : isSeriesOverflowed(normalizedScale, scale, scaleOption);
+    if (overflowed) {
+        const { stepSize, limit } = normalizedScale;
+        normalizedScale.limit = adjustLimitForOverflow(limit, stepSize, overflowed);
+    }
+    return normalizedScale;
+}
+export function getStackScaleData(type) {
+    if (type === 'minusPercentStack') {
+        return { limit: { min: -100, max: 0 }, stepSize: 25, stepCount: 5 };
+    }
+    if (type === 'dualPercentStack') {
+        return { limit: { min: -100, max: 100 }, stepSize: 25, stepCount: 9 };
+    }
+    if (type === 'divergingPercentStack') {
+        return { limit: { min: -100, max: 100 }, stepSize: 25, stepCount: 9 };
+    }
+    return { limit: { min: 0, max: 100 }, stepSize: 25, stepCount: 5 };
+}
+export function calculateXAxisScaleForCoordinateLineType(scale, options, categories) {
+    const dateType = isDateType(options, AxisType.X);
+    const values = categories.map((value) => (dateType ? Number(new Date(value)) : Number(value)));
+    const { limit, stepSize } = scale;
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const newLimit = Object.assign({}, limit);
+    const distance = max - min;
+    let positionRatio = 0;
+    let sizeRatio = 1;
+    if (distance) {
+        if (limit.min < min) {
+            newLimit.min += stepSize;
+            positionRatio = (newLimit.min - min) / distance;
+            sizeRatio -= positionRatio;
+        }
+        if (limit.max > max) {
+            newLimit.max -= stepSize;
+            sizeRatio -= (max - newLimit.max) / distance;
+        }
+    }
+    const limitSize = Math.abs(newLimit.max - newLimit.min);
+    const newStepCount = getNormalizedStepCount(limitSize, stepSize);
+    return {
+        limit: newLimit,
+        stepCount: newStepCount,
+        stepSize,
+        positionRatio,
+        sizeRatio,
+    };
+}

package/dist/esm/scale/datetimeScaleCalculator.d.ts

@@ -0,0 +1,20 @@
+import { ValueEdge } from "../../types/store/store";
+import { Scale } from "../../types/options";
+interface LabelOptions {
+    dataRange: ValueEdge;
+    offsetSize: number;
+    rawCategoriesSize: number;
+    scaleOption?: Scale;
+    showLabel?: boolean;
+}
+export declare function calculateDatetimeScale(options: LabelOptions): {
+    stepSize: number;
+    limit: {
+        min: number;
+        max: number;
+    };
+    stepCount: number;
+    sizeRatio?: number | undefined;
+    positionRatio?: number | undefined;
+};
+export {};

package/dist/esm/scale/datetimeScaleCalculator.js

@@ -0,0 +1,59 @@
+import { isExist, omit } from "../helpers/utils";
+import { add, multiply, divide } from "../helpers/calculator";
+import { calculateCoordinateScale, makeScaleOption } from "./coordinateScaleCalculator";
+const msMap = {
+    year: 31536000000,
+    month: 2678400000,
+    week: 604800000,
+    date: 86400000,
+    hour: 3600000,
+    minute: 60000,
+    second: 1000,
+};
+export function calculateDatetimeScale(options) {
+    const { dataRange, rawCategoriesSize, scaleOption } = options;
+    const datetimeInfo = makeDatetimeInfo(dataRange, rawCategoriesSize, scaleOption);
+    const { minDate, divisionNumber, limit } = datetimeInfo;
+    const scale = calculateCoordinateScale(Object.assign(Object.assign({}, omit(options, 'scaleOption')), { dataRange: limit, minStepSize: 1 }));
+    return restoreScaleToDatetimeType(scale, minDate, divisionNumber);
+}
+const msTypes = ['year', 'month', 'week', 'date', 'hour', 'minute', 'second'];
+function restoreScaleToDatetimeType(scale, minDate, divisionNumber) {
+    const { limit, stepSize } = scale;
+    const { min, max } = limit;
+    return Object.assign(Object.assign({}, scale), { stepSize: multiply(stepSize, divisionNumber), limit: {
+            min: multiply(add(min, minDate), divisionNumber),
+            max: multiply(add(max, minDate), divisionNumber),
+        } });
+}
+function makeDatetimeInfo(limit, count, scaleOption) {
+    var _a, _b;
+    const dateType = findDateType(limit, count);
+    const divisionNumber = (_b = (_a = scaleOption) === null || _a === void 0 ? void 0 : _a.stepSize, (_b !== null && _b !== void 0 ? _b : msMap[dateType]));
+    const scale = makeScaleOption(limit, scaleOption);
+    const minDate = divide(Number(new Date(scale.min)), divisionNumber);
+    const maxDate = divide(Number(new Date(scale.max)), divisionNumber);
+    return { divisionNumber, minDate, limit: { min: 0, max: maxDate - minDate } };
+}
+function findDateType({ max, min }, count) {
+    const diff = max - min;
+    const lastTypeIndex = msTypes.length - 1;
+    let foundType;
+    if (diff) {
+        msTypes.every((type, index) => {
+            const millisecond = msMap[type];
+            const dividedCount = Math.floor(diff / millisecond);
+            let foundIndex;
+            if (dividedCount) {
+                foundIndex =
+                    index < lastTypeIndex && dividedCount < 2 && dividedCount < count ? index + 1 : index;
+                foundType = msTypes[foundIndex];
+            }
+            return !isExist(foundIndex);
+        });
+    }
+    else {
+        foundType = 'second';
+    }
+    return foundType;
+}

package/dist/esm/store/axes.d.ts

@@ -0,0 +1,30 @@
+import { CenterYAxisData, ChartOptionsUsingYAxis, InitAxisData, LabelAxisData, Layout, Options, ScaleData, Series, StoreModule } from "../../types/store/store";
+import { BaseAxisOptions, BaseXAxisOptions, LineTypeXAxisOptions } from "../../types/options";
+import { AxisTheme } from "../../types/theme";
+interface StateProp {
+    scale: ScaleData;
+    axisSize: number;
+    options: Options;
+    series: Series;
+    theme: Required<AxisTheme>;
+    centerYAxis?: Pick<CenterYAxisData, 'xAxisHalfSize'> | null;
+    initialAxisData: InitAxisData;
+    labelOnYAxis?: boolean;
+    axisName: string;
+}
+declare type ValueStateProp = StateProp & {
+    categories: string[];
+    isCoordinateTypeChart: boolean;
+};
+declare type LabelAxisState = Omit<LabelAxisData, 'tickInterval' | 'labelInterval'>;
+export interface AxisDataParams {
+    axis?: BaseAxisOptions | BaseXAxisOptions | LineTypeXAxisOptions;
+    categories?: string[];
+    layout?: Layout;
+    shift?: boolean;
+    isCoordinateTypeChart?: boolean;
+}
+export declare function isCenterYAxis(options: ChartOptionsUsingYAxis): boolean;
+export declare function getLabelAxisData(stateProp: ValueStateProp): LabelAxisState;
+declare const axes: StoreModule;
+export default axes;