@toast-ui/chart - npm Package Compare versions

Comparing version 4.2.0 to 4.2.1

dist/esm/component/areaSeries.d.ts

@@ -65,3 +65,4 @@ import Component from "./component";
     render(chartState: ChartState<AreaChartOptions | LineAreaChartOptions>, computed: any): void;
-    makeNearTypeResponderModel(seriesCircleModel: CircleModel[], tooltipDataArr: TooltipData[]): CircleResponderModel[];
+    private getResponders;
+    makeNearTypeResponderModel(seriesCircleModel: CircleModel[], tooltipDataArr: TooltipData[], categories: string[], detectionSize?: number): CircleResponderModel[];
     renderClipRectAreaModel(isDrawModel?: boolean): ClipRectAreaModel;
@@ -90,3 +91,3 @@ makeTooltipData(areaData: AreaSeriesType[], categories: string[]): TooltipData[];
     getDataLabels(seriesModels: AreaPointsModel[]): PointDataLabel[];
-    private getSelectedSeriesWithTheme;
+    private getResponderSeriesWithTheme;
     onClick({ responders, mousePosition }: MouseEventType): void;
@@ -93,0 +94,0 @@ private getResponderCategoryByIndex;

dist/esm/component/areaSeries.js

@@ -47,6 +47,4 @@ import Component from "./component";
             }
-            this.eventBus.emit('renderSelectedSeries', {
-                models: [model],
-                name: this.name,
-            });
+            const models = this.getResponderSeriesWithTheme([model], 'select');
+            this.eventBus.emit('renderSelectedSeries', { models, name: this.name });
             this.eventBus.emit('needDraw');
@@ -116,5 +114,5 @@ };
     render(chartState, computed) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const { viewRange } = computed;
-        const { layout, series, scale, axes, legend, stackSeries, theme, rawCategories } = chartState;
+        const { layout, series, scale, axes, legend, stackSeries, theme } = chartState;
         if (!series.area) {
@@ -126,8 +124,9 @@ throw new Error(message.noDataError(this.name));
         const categories = chartState.categories;
+        const rawCategories = (_a = chartState.rawCategories, (_a !== null && _a !== void 0 ? _a : []));
         this.theme = theme.series.area;
         this.rect = layout.plot;
         this.activeSeriesMap = getActiveSeriesMap(legend);
-        this.startIndex = viewRange ? viewRange[0] : 0;
+        this.startIndex = (_c = (_b = viewRange) === null || _b === void 0 ? void 0 : _b[0], (_c !== null && _c !== void 0 ? _c : 0));
         this.selectable = this.getSelectableOption(options);
-        this.isSplineChart = (_b = (_a = options.series) === null || _a === void 0 ? void 0 : _a.spline, (_b !== null && _b !== void 0 ? _b : false));
+        this.isSplineChart = (_e = (_d = options.series) === null || _d === void 0 ? void 0 : _d.spline, (_e !== null && _e !== void 0 ? _e : false));
         const { limit } = scale[getValueAxisName(options, this.name, 'yAxis')];
@@ -137,7 +136,7 @@ const { tickDistance, pointOnColumn, tickCount } = axes.xAxis;
         this.baseYPosition = this.getBaseYPosition(limit);
-        if ((_c = stackSeries) === null || _c === void 0 ? void 0 : _c.area) {
+        if ((_f = stackSeries) === null || _f === void 0 ? void 0 : _f.area) {
             this.isStackChart = true;
             areaStackSeries = stackSeries.area;
         }
-        else if (isRangeData((_d = getFirstValidValue(areaData)) === null || _d === void 0 ? void 0 : _d.data)) {
+        else if (isRangeData((_g = getFirstValidValue(areaData)) === null || _g === void 0 ? void 0 : _g.data)) {
             this.isRangeChart = true;
@@ -155,3 +154,3 @@ }
         const areaSeriesModel = this.renderAreaPointsModel();
-        const showDot = !!((_e = options.series) === null || _e === void 0 ? void 0 : _e.showDot);
+        const showDot = !!((_h = options.series) === null || _h === void 0 ? void 0 : _h.showDot);
         const { dotSeriesModel, responderModel } = this.renderCircleModel(showDot);
@@ -171,10 +170,16 @@ const tooltipDataArr = this.makeTooltipData(areaData, rawCategories);
         this.tooltipCircleMap = makeTooltipCircleMap(responderModel, tooltipDataArr);
-        this.responders =
-            this.eventDetectType === 'near'
-                ? this.makeNearTypeResponderModel(responderModel, tooltipDataArr)
-                : makeRectResponderModel(this.rect, axes.xAxis, categories);
+        this.responders = this.getResponders(responderModel, tooltipDataArr, categories, rawCategories, axes.xAxis);
     }
-    makeNearTypeResponderModel(seriesCircleModel, tooltipDataArr) {
+    getResponders(responderModel, tooltipDataArr, categories, rawCategories, axisData) {
+        if (this.eventDetectType === 'near') {
+            return this.makeNearTypeResponderModel(responderModel, tooltipDataArr, rawCategories);
+        }
+        if (this.eventDetectType === 'point') {
+            return this.makeNearTypeResponderModel(responderModel, tooltipDataArr, rawCategories, 0);
+        }
+        return makeRectResponderModel(this.rect, axisData, categories);
+    }
+    makeNearTypeResponderModel(seriesCircleModel, tooltipDataArr, categories, detectionSize) {
         const tooltipDataLength = tooltipDataArr.length;
-        return seriesCircleModel.map((m, dataIndex) => (Object.assign(Object.assign({}, m), { data: tooltipDataArr[dataIndex % tooltipDataLength] })));
+        return seriesCircleModel.map((m, dataIndex) => (Object.assign(Object.assign({}, m), { data: tooltipDataArr[dataIndex % tooltipDataLength], detectionSize, label: categories[m.index] })));
     }
@@ -356,4 +361,3 @@ renderClipRectAreaModel(isDrawModel) {
         const responderModel = [];
-        const { hover, dot: dotTheme } = this.theme;
-        const hoverDotTheme = hover.dot;
+        const { dot: dotTheme } = this.theme;
         this.linePointsModel.forEach(({ points, color, seriesIndex, name }, modelIndex) => {
@@ -363,3 +367,3 @@ const isPairLinePointsModel = this.isRangeChart && modelIndex >= this.linePointsModel.length / 2;
             points.forEach((point, index) => {
-                var _a, _b, _c;
+                var _a;
                 if (isNull(point)) {
@@ -375,9 +379,3 @@ return;
                 }
-                const modelColor = (_b = hoverDotTheme.color, (_b !== null && _b !== void 0 ? _b : getRGBA(color, 1)));
-                responderModel.push(Object.assign(Object.assign({}, model), { radius: hoverDotTheme.radius, color: modelColor, style: [
-                        {
-                            lineWidth: hoverDotTheme.borderWidth,
-                            strokeStyle: (_c = hoverDotTheme.borderColor, (_c !== null && _c !== void 0 ? _c : getRGBA(modelColor, 0.5))),
-                        },
-                    ] }));
+                responderModel.push(...this.getResponderSeriesWithTheme([model], 'hover', color));
             });
@@ -439,3 +437,3 @@ });
         }
-        else if (this.eventDetectType === 'near') {
+        else if (['near', 'point'].includes(this.eventDetectType)) {
             this.onMousemoveNearType(responders);
@@ -455,6 +453,7 @@ }
     }
-    getSelectedSeriesWithTheme(models) {
-        const { radius, color, borderWidth, borderColor } = this.theme.select.dot;
+    getResponderSeriesWithTheme(models, type, seriesColor) {
+        const { radius, color, borderWidth, borderColor } = this.theme[type].dot;
         return models.map((model) => {
-            const modelColor = (color !== null && color !== void 0 ? color : model.color);
+            var _a;
+            const modelColor = (_a = (color !== null && color !== void 0 ? color : model.color), (_a !== null && _a !== void 0 ? _a : seriesColor));
             return Object.assign(Object.assign({}, model), { radius, color: modelColor, style: [{ lineWidth: borderWidth, strokeStyle: (borderColor !== null && borderColor !== void 0 ? borderColor : getRGBA(modelColor, 0.5)) }] });
@@ -473,3 +472,3 @@ });
             this.eventBus.emit('renderSelectedSeries', {
-                models: this.getSelectedSeriesWithTheme(models),
+                models: this.getResponderSeriesWithTheme(models, 'select'),
                 name: this.name,
@@ -476,0 +475,0 @@ });

dist/esm/component/axis.d.ts

 import Component from "./component";
-import { ChartState, Options, ViewAxisLabel, AxisData } from "../../types/store/store";
+import { ChartState, Options, ViewAxisLabel, AxisData, ScaleData } from "../../types/store/store";
 import { TickModel, LineModel, AxisModels, LabelModel } from "../../types/components/axis";
@@ -27,7 +27,7 @@ import { AxisTheme } from "../../types/theme";
     }): void;
-    render({ layout, axes, theme }: ChartState<Options>): void;
+    render({ layout, axes, theme, scale }: ChartState<Options>): void;
     renderAxisLineModel(): LineModel;
     renderTickModels(offsetKey: CoordinateKey, anchorKey: CoordinateKey, renderOptions: RenderOptions): TickModel[];
     renderLabelModels(labels: ViewAxisLabel[], offsetKey: CoordinateKey, anchorKey: CoordinateKey, renderOptions: RenderOptions): LabelModel[];
-    makeRenderOptions(axisData: AxisData): RenderOptions;
+    makeRenderOptions(axisData: AxisData, scale?: ScaleData): RenderOptions;
     getYAxisAnchorPoint(): number;
@@ -34,0 +34,0 @@ getLabelTextAlign(needRotateLabel?: boolean): "left" | "right" | "center";

dist/esm/component/axis.js

@@ -30,3 +30,4 @@ import Component from "./component";
     }
-    render({ layout, axes, theme }) {
+    render({ layout, axes, theme, scale }) {
+        var _a;
         if (axes.centerYAxis || !axes[this.name]) {
@@ -40,3 +41,3 @@ return;
         const { offsetKey, anchorKey } = getOffsetAndAnchorKey(this.yAxisComponent);
-        const renderOptions = this.makeRenderOptions(axes[this.name]);
+        const renderOptions = this.makeRenderOptions(axes[this.name], (_a = scale) === null || _a === void 0 ? void 0 : _a[this.name]);
         const hasOnlyAxisLine = this.hasOnlyAxisLine();
@@ -136,5 +137,8 @@ if (!hasOnlyAxisLine) {
     }
-    makeRenderOptions(axisData) {
+    makeRenderOptions(axisData, scale) {
+        var _a, _b, _c, _d;
         const { tickCount, tickInterval } = axisData;
-        const relativePositions = makeTickPixelPositions(this.axisSize, tickCount);
+        const sizeRatio = (_b = (_a = scale) === null || _a === void 0 ? void 0 : _a.sizeRatio, (_b !== null && _b !== void 0 ? _b : 1));
+        const positionRatio = (_d = (_c = scale) === null || _c === void 0 ? void 0 : _c.positionRatio, (_d !== null && _d !== void 0 ? _d : 0));
+        const relativePositions = makeTickPixelPositions(this.axisSize * sizeRatio, tickCount, this.axisSize * positionRatio);
         if (this.yAxisComponent) {
@@ -141,0 +145,0 @@ return {

dist/esm/component/boxSeries.d.ts

 import Component from "./component";
 import { RectModel, ClipRectAreaModel, BoxSeriesModels, StackTotalModel, RectResponderModel, MouseEventType } from "../../types/components/series";
-import { ChartState, ChartType, BoxType, ValueAxisData, CenterYAxisData, Series, Axes, Scale } from "../../types/store/store";
+import { ChartState, BoxType, ValueAxisData, CenterYAxisData, Series, Axes, Scale } from "../../types/store/store";
 import { BoxSeriesType, BoxSeriesDataType, BarChartOptions, ColumnChartOptions, Rect, RangeDataType, BoxTypeEventDetectType, ColumnLineChartOptions, ColumnLineChartSeriesOptions, BoxSeriesOptions } from "../../types/options";
@@ -27,3 +27,2 @@ import { TooltipData } from "../../types/components/tooltip";
 export declare function isLeftBottomSide(seriesIndex: number): boolean;
-export declare function isBoxSeries(seriesName: ChartType): seriesName is BoxType;
 export default class BoxSeries extends Component {
@@ -30,0 +29,0 @@ models: BoxSeriesModels;

dist/esm/component/boxSeries.js

 import Component from "./component";
-import { first, includes, hasNegative, deepCopyArray, last, hasNegativeOnly, hasPositiveOnly, isNull, isNumber, calculateSizeWithPercentString, omit, } from "../helpers/utils";
+import { first, hasNegative, deepCopyArray, last, hasNegativeOnly, hasPositiveOnly, isNull, isNumber, calculateSizeWithPercentString, omit, } from "../helpers/utils";
 import { makeTickPixelPositions, makeLabelsFromLimit } from "../helpers/calculator";
@@ -40,5 +40,2 @@ import { getRGBA, getAlpha } from "../helpers/color";
 }
-export function isBoxSeries(seriesName) {
-    return includes(Object.values(BOX), seriesName);
-}
 export default class BoxSeries extends Component {
@@ -267,3 +264,3 @@ constructor() {
         return this.eventDetectType === 'grouped'
-            ? makeRectResponderModel(this.rect, this.isBar ? axes.yAxis : axes.xAxis, categories, !this.isBar)
+            ? makeRectResponderModel(this.rect, (this.isBar ? axes.yAxis : axes.xAxis), categories, !this.isBar)
             : hoveredSeries.map((m, index) => (Object.assign(Object.assign({}, m), { data: tooltipData[index] })));
@@ -520,12 +517,14 @@ }
     getTickPositionIfNotZero(tickPositions, direction) {
+        if (!tickPositions.length) {
+            return 0;
+        }
         const firstTickPosition = Number(first(tickPositions));
         const lastTickPosition = Number(last(tickPositions));
-        let tickPos = 0;
         if (direction === SeriesDirection.POSITIVE) {
-            tickPos = this.isBar ? firstTickPosition : lastTickPosition;
+            return this.isBar ? firstTickPosition : lastTickPosition;
         }
-        else if (direction === SeriesDirection.NEGATIVE) {
-            tickPos = this.isBar ? lastTickPosition : firstTickPosition;
+        if (direction === SeriesDirection.NEGATIVE) {
+            return this.isBar ? lastTickPosition : firstTickPosition;
         }
-        return tickPos;
+        return 0;
     }
@@ -532,0 +531,0 @@ makeDataLabel(rect, centerYAxis) {

dist/esm/component/bubbleSeries.js

@@ -41,6 +41,4 @@ import { getCoordinateXValue, getCoordinateYValue } from "../helpers/coordinate";
             }
-            this.eventBus.emit('renderSelectedSeries', {
-                models: [model],
-                name: this.name,
-            });
+            const models = this.getResponderAppliedTheme([model], 'select');
+            this.eventBus.emit('renderSelectedSeries', { models, name: this.name });
             this.eventBus.emit('needDraw');
@@ -47,0 +45,0 @@ };

dist/esm/component/bulletSeries.js

@@ -149,3 +149,3 @@ import Component from "./component";
         return this.eventDetectType === 'grouped'
-            ? makeRectResponderModel(this.rect, this.vertical ? axes.xAxis : axes.yAxis, categories, this.vertical)
+            ? makeRectResponderModel(this.rect, (this.vertical ? axes.xAxis : axes.yAxis), categories, this.vertical)
             : makeBulletResponderModel(models, tooltipData);
@@ -152,0 +152,0 @@ }

dist/esm/component/component.js

@@ -78,2 +78,5 @@ import { getFirstValidValue, includes, isNumber } from "../helpers/utils";
         }
+        else if (!Object.keys(this.models).length) {
+            this.drawModels = this.models;
+        }
         else {
@@ -89,2 +92,5 @@ Object.keys(this.models).forEach((type) => {
         var _a;
+        if (!models || !currentModels) {
+            return [...targetModels];
+        }
         if ((_a = getFirstValidValue(targetModels)) === null || _a === void 0 ? void 0 : _a.name) {
@@ -91,0 +97,0 @@ const modelNames = [...new Set(models.map(({ name }) => name))];

dist/esm/component/lineSeries.d.ts

@@ -5,14 +5,9 @@ import Component from "./component";
 import { ClipRectAreaModel, LinePointsModel } from "../../types/components/series";
-import { ChartState, Scale } from "../../types/store/store";
+import { ChartState, Scale, LabelAxisData } from "../../types/store/store";
 import { LineSeriesType } from "../../types/options";
 import { TooltipData } from "../../types/components/tooltip";
+import { RectResponderInfoForCoordinateType } from "../helpers/responders";
 import { PointDataLabel } from "../../types/components/dataLabels";
 import { LineChartSeriesTheme } from "../../types/theme";
 import { SelectSeriesInfo } from "../../types/charts";
-interface RenderOptions {
-    pointOnColumn: boolean;
-    options: LineTypeSeriesOptions;
-    tickDistance: number;
-    labelDistance?: number;
-}
 declare type ResponderTypes = CircleResponderModel[] | RectResponderModel[];
@@ -34,5 +29,6 @@ export default class LineSeries extends Component {
     private getResponders;
-    makeNearTypeResponderModel(seriesCircleModel: CircleModel[], tooltipDataArr: TooltipData[], detectionSize?: number): {
+    makeNearTypeResponderModel(seriesCircleModel: CircleModel[], tooltipDataArr: TooltipData[], categories: string[], detectionSize?: number): {
         data: TooltipData;
         detectionSize: number | undefined;
+        label: string;
         type: "circle";
@@ -56,4 +52,5 @@ radius: number;
     renderClipRectAreaModel(isDrawModel?: boolean): ClipRectAreaModel;
-    renderLinePointsModel(seriesRawData: LineSeriesType[], scale: Scale, renderOptions: RenderOptions, categories: string[]): LinePointsModel[];
-    renderCircleModel(lineSeriesModel: LinePointsModel[], { options }: RenderOptions): {
+    renderLinePointsModel(seriesRawData: LineSeriesType[], scale: Scale, axisData: LabelAxisData, options: LineTypeSeriesOptions, categories: string[]): LinePointsModel[];
+    getRectResponderInfoForCoordinateType(circleModel: CircleModel[], categories: string[]): RectResponderInfoForCoordinateType[];
+    renderCircleModel(lineSeriesModel: LinePointsModel[], options: LineTypeSeriesOptions): {
         dotSeriesModel: CircleModel[];
@@ -60,0 +57,0 @@ responderModel: CircleModel[];

dist/esm/component/lineSeries.js

 import Component from "./component";
 import { getValueRatio, setSplineControlPoint, getXPosition } from "../helpers/calculator";
-import { getCoordinateDataIndex, getCoordinateXValue, getCoordinateYValue, } from "../helpers/coordinate";
+import { getCoordinateDataIndex, getCoordinateXValue, getCoordinateYValue, isCoordinateSeries, } from "../helpers/coordinate";
 import { getRGBA } from "../helpers/color";
-import { pick, includes, isNull } from "../helpers/utils";
+import { includes, isNull } from "../helpers/utils";
 import { getActiveSeriesMap } from "../helpers/legend";
-import { getNearestResponder, makeRectResponderModel, makeTooltipCircleMap, } from "../helpers/responders";
+import { getNearestResponder, makeRectResponderModel, makeRectResponderModelForCoordinateType, makeTooltipCircleMap, } from "../helpers/responders";
 import { getValueAxisName } from "../helpers/axes";
@@ -41,3 +41,4 @@ import { getDataLabelsOptions } from "../helpers/dataLabels";
             }
-            this.eventBus.emit('renderSelectedSeries', { models: [model], name: this.name });
+            const models = this.getResponderSeriesWithTheme([model], 'select');
+            this.eventBus.emit('renderSelectedSeries', { models, name: this.name });
             this.eventBus.emit('needDraw');
@@ -89,3 +90,3 @@ };
     render(chartState, computed) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         const { viewRange } = computed;
@@ -97,4 +98,5 @@ const { layout, series, scale, axes, legend, theme } = chartState;
         const categories = (_a = chartState.categories, (_a !== null && _a !== void 0 ? _a : []));
+        const rawCategories = (_b = chartState.rawCategories, (_b !== null && _b !== void 0 ? _b : []));
         const options = Object.assign({}, chartState.options);
-        if (((_b = options) === null || _b === void 0 ? void 0 : _b.series) && 'line' in options.series) {
+        if (((_c = options) === null || _c === void 0 ? void 0 : _c.series) && 'line' in options.series) {
             options.series = Object.assign(Object.assign({}, options.series), options.series.line);
@@ -104,18 +106,12 @@ }
         const labelAxisData = axes.xAxis;
-        const { tickDistance, pointOnColumn, labelDistance } = labelAxisData;
+        const seriesOptions = (_d = options.series, (_d !== null && _d !== void 0 ? _d : {}));
         const lineSeriesData = series.line.data;
-        const renderLineOptions = {
-            pointOnColumn,
-            options: (options.series || {}),
-            tickDistance,
-            labelDistance,
-        };
         this.theme = theme.series.line;
         this.rect = layout.plot;
         this.activeSeriesMap = getActiveSeriesMap(legend);
-        this.startIndex = viewRange ? viewRange[0] : 0;
+        this.startIndex = (_f = (_e = viewRange) === null || _e === void 0 ? void 0 : _e[0], (_f !== null && _f !== void 0 ? _f : 0));
         this.selectable = this.getSelectableOption(options);
         this.yAxisName = getValueAxisName(options, this.name, 'yAxis');
-        const lineSeriesModel = this.renderLinePointsModel(lineSeriesData, scale, renderLineOptions, categories);
-        const { dotSeriesModel, responderModel } = this.renderCircleModel(lineSeriesModel, renderLineOptions);
+        const lineSeriesModel = this.renderLinePointsModel(lineSeriesData, scale, labelAxisData, seriesOptions, categories);
+        const { dotSeriesModel, responderModel } = this.renderCircleModel(lineSeriesModel, seriesOptions);
         const tooltipDataArr = this.makeTooltipData(lineSeriesData, categories);
@@ -134,19 +130,27 @@ this.tooltipCircleMap = makeTooltipCircleMap(responderModel, tooltipDataArr);
         }
-        this.responders = this.getResponders(labelAxisData, responderModel, tooltipDataArr, categories);
+        const coordinateType = isCoordinateSeries(series);
+        this.responders = this.getResponders({
+            labelAxisData,
+            responderModel,
+            tooltipDataArr,
+            categories,
+            rawCategories,
+            coordinateType,
+        });
     }
-    getResponders(axisData, seriesCircleModel, tooltipDataArr, categories) {
-        let res;
+    getResponders({ labelAxisData, responderModel, tooltipDataArr, categories, rawCategories, coordinateType, }) {
         if (this.eventDetectType === 'near') {
-            res = this.makeNearTypeResponderModel(seriesCircleModel, tooltipDataArr);
+            return this.makeNearTypeResponderModel(responderModel, tooltipDataArr, rawCategories);
         }
-        else if (this.eventDetectType === 'point') {
-            res = this.makeNearTypeResponderModel(seriesCircleModel, tooltipDataArr, 0);
+        if (this.eventDetectType === 'point') {
+            return this.makeNearTypeResponderModel(responderModel, tooltipDataArr, rawCategories, 0);
         }
-        else {
-            res = makeRectResponderModel(this.rect, axisData, categories);
+        if (coordinateType) {
+            const rectResponderInfo = this.getRectResponderInfoForCoordinateType(responderModel, rawCategories);
+            return makeRectResponderModelForCoordinateType(rectResponderInfo, this.rect);
         }
-        return res;
+        return makeRectResponderModel(this.rect, labelAxisData, categories);
     }
-    makeNearTypeResponderModel(seriesCircleModel, tooltipDataArr, detectionSize) {
-        return seriesCircleModel.map((m, index) => (Object.assign(Object.assign({}, m), { data: tooltipDataArr[index], detectionSize })));
+    makeNearTypeResponderModel(seriesCircleModel, tooltipDataArr, categories, detectionSize) {
+        return seriesCircleModel.map((m, index) => (Object.assign(Object.assign({}, m), { data: tooltipDataArr[index], detectionSize, label: categories[m.index] })));
     }
@@ -176,7 +180,5 @@ makeTooltipData(lineSeriesData, categories) {
     }
-    renderLinePointsModel(seriesRawData, scale, renderOptions, categories) {
-        var _a, _b;
-        const { spline } = renderOptions.options;
+    renderLinePointsModel(seriesRawData, scale, axisData, options, categories) {
+        const { spline } = options;
         const yAxisLimit = scale[this.yAxisName].limit;
-        const xAxisLimit = (_b = (_a = scale) === null || _a === void 0 ? void 0 : _a.xAxis) === null || _b === void 0 ? void 0 : _b.limit;
         const { lineWidth, dashSegments } = this.theme;
@@ -193,3 +195,3 @@ return seriesRawData.map(({ rawData, name, color: seriesColor }, seriesIndex) => {
                 const y = (1 - yValueRatio) * this.rect.height;
-                const x = getXPosition(pick(renderOptions, 'pointOnColumn', 'tickDistance', 'labelDistance'), this.rect.width, getCoordinateXValue(datum), getCoordinateDataIndex(datum, categories, idx, this.startIndex), xAxisLimit);
+                const x = getXPosition(axisData, this.rect.width, getCoordinateXValue(datum), getCoordinateDataIndex(datum, categories, idx, this.startIndex));
                 points.push({ x, y, value });
@@ -211,3 +213,16 @@ });
     }
-    renderCircleModel(lineSeriesModel, { options }) {
+    getRectResponderInfoForCoordinateType(circleModel, categories) {
+        const duplicateCheckMap = {};
+        const modelInRange = circleModel.filter(({ x }) => x >= 0 && x <= this.rect.width);
+        return modelInRange.reduce((acc, model) => {
+            const { index, x } = model;
+            if (!duplicateCheckMap[x]) {
+                const label = categories[index];
+                duplicateCheckMap[x] = true;
+                acc.push({ x, label });
+            }
+            return acc;
+        }, []);
+    }
+    renderCircleModel(lineSeriesModel, options) {
         const dotSeriesModel = [];
@@ -214,0 +229,0 @@ const responderModel = [];

dist/esm/component/plot.d.ts

 import Component from "./component";
-import { ChartState, Options, Axes, ValueEdge } from "../../types/store/store";
+import { ChartState, Options, Axes } from "../../types/store/store";
 import Painter from "../painter";
@@ -18,4 +18,4 @@ import { LineModel } from "../../types/components/axis";
     };
-    renderLines(axes: Axes, categories: string[], lines?: PlotLine[], xAxisLimit?: ValueEdge): LineModel[];
-    renderBands(axes: Axes, categories: string[], bands?: PlotBand[], xAxisLimit?: ValueEdge): RectModel[];
+    renderLines(axes: Axes, categories: string[], lines?: PlotLine[]): LineModel[];
+    renderBands(axes: Axes, categories: string[], bands?: PlotBand[]): RectModel[];
     renderPlotLineModels(relativePositions: number[], vertical: boolean, options?: {
@@ -22,0 +22,0 @@ size?: number;

dist/esm/component/plot.js

@@ -7,5 +7,5 @@ import Component from "./component";
 }
-function validXPosition({ axisData, offsetSize, value, xAxisLimit, startIndex = 0, }) {
+function validXPosition({ axisData, offsetSize, value, startIndex = 0 }) {
     const dataIndex = getValidIndex(value, startIndex);
-    const x = getXPosition(axisData, offsetSize, value, dataIndex, xAxisLimit);
+    const x = getXPosition(axisData, offsetSize, value, dataIndex);
     return x > 0 ? Math.min(offsetSize, x) : 0;
@@ -31,3 +31,3 @@ }
     }
-    renderLines(axes, categories, lines = [], xAxisLimit) {
+    renderLines(axes, categories, lines = []) {
         return lines.map(({ value, color }) => {
@@ -39,3 +39,2 @@ const { offsetSize } = this.getPlotAxisSize(true);
                 value,
-                xAxisLimit,
                 categories,
@@ -47,3 +46,3 @@ startIndex: this.startIndex,
     }
-    renderBands(axes, categories, bands = [], xAxisLimit) {
+    renderBands(axes, categories, bands = []) {
         const { offsetSize, anchorSize } = this.getPlotAxisSize(true);
@@ -55,3 +54,2 @@ return bands.map(({ range, color }) => {
                 value,
-                xAxisLimit,
                 categories,
@@ -122,3 +120,3 @@ startIndex: this.startIndex,
         var _a, _b, _c;
-        const { layout, axes, plot, scale, zoomRange, theme } = state;
+        const { layout, axes, plot, zoomRange, theme } = state;
         if (!plot) {
@@ -128,9 +126,8 @@ return;
         this.rect = layout.plot;
-        this.startIndex = zoomRange ? zoomRange[0] : 0;
+        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 = (_a = state.categories, (_a !== null && _a !== void 0 ? _a : []));
+        const categories = (_c = state.categories, (_c !== null && _c !== void 0 ? _c : []));
         const { lines, bands, visible } = plot;
-        const xAxisLimit = (_c = (_b = scale) === null || _b === void 0 ? void 0 : _b.xAxis) === null || _c === void 0 ? void 0 : _c.limit;
-        this.models.line = this.renderLines(axes, categories, lines, xAxisLimit);
-        this.models.band = this.renderBands(axes, categories, bands, xAxisLimit);
+        this.models.line = this.renderLines(axes, categories, lines);
+        this.models.band = this.renderBands(axes, categories, bands);
         if (visible) {
@@ -137,0 +134,0 @@ this.models.plot = [this.renderPlotBackgroundRect(), ...this.renderPlots(axes)];

dist/esm/component/scatterSeries.d.ts

@@ -31,5 +31,5 @@ import Component from "./component";
     onMouseoutComponent: () => void;
-    getModelsForSelectInfo: (info: SelectSeriesHandlerParams<ScatterChartOptions>) => CircleResponderModel[];
+    getModelsForSelectInfo: (info: SelectSeriesHandlerParams<ScatterChartOptions>) => CircleResponderModel[] | undefined;
     selectSeries: (info: SelectSeriesHandlerParams<ScatterChartOptions>) => void;
     showTooltip: (info: SelectSeriesHandlerParams<ScatterChartOptions>) => void;
 }

dist/esm/component/scatterSeries.js

@@ -26,4 +26,4 @@ import Component from "./component";
             const { index, seriesIndex, state } = info;
-            if (!isAvailableSelectSeries(info, 'scatter')) {
-                return [];
+            if (!isNumber(index) || !isNumber(seriesIndex) || !isAvailableSelectSeries(info, 'scatter')) {
+                return;
             }
@@ -35,6 +35,12 @@ const { name } = state.series.scatter.data[seriesIndex];
             const models = this.getModelsForSelectInfo(info);
+            if (!models) {
+                return;
+            }
             if (!models.length) {
                 throw new Error(message.SELECT_SERIES_API_INDEX_ERROR);
             }
-            this.eventBus.emit('renderSelectedSeries', { models, name: this.name });
+            this.eventBus.emit('renderSelectedSeries', {
+                models: this.getResponderAppliedTheme(models, 'select'),
+                name: this.name,
+            });
             this.eventBus.emit('needDraw');
@@ -44,3 +50,3 @@ };
             const models = this.getModelsForSelectInfo(info);
-            if (!models.length) {
+            if (!models) {
                 return;
@@ -47,0 +53,0 @@ }

dist/esm/component/treemapSeries.js

@@ -26,6 +26,4 @@ import Component from "./component";
             }
-            this.eventBus.emit('renderSelectedSeries', {
-                models: [model],
-                name: this.name,
-            });
+            const models = this.getRespondersWithTheme([model], 'select');
+            this.eventBus.emit('renderSelectedSeries', { models, name: this.name });
             this.eventBus.emit('needDraw');
@@ -32,0 +30,0 @@ };

dist/esm/component/zoom.d.ts

 import Component from "./component";
-import { ChartState, Options } from "../../types/store/store";
+import { AxisData, ChartState, LabelAxisData, Options, Scale, Series } from "../../types/store/store";
 import { RectResponderModel } from "../../types/components/series";
 import { ZoomModels } from "../../types/components/zoom";
-interface RenderOptions {
-    pointOnColumn: boolean;
-    tickDistance: number;
-    tickCount: number;
-}
+import { RectResponderInfoForCoordinateType } from "../helpers/responders";
+declare type ZoomableSeries = Pick<Series, 'line' | 'area'>;
 export default class Zoom extends Component {
     models: ZoomModels;
     responders: RectResponderModel[];
+    startIndex: number;
     private dragStartPosition;
@@ -17,3 +15,4 @@ private dragStartPoint;
     initialize(): void;
-    render(state: ChartState<Options>): void;
+    render(state: ChartState<Options>, computed: any): void;
+    getRectResponderInfoForCoordinateType(series: ZoomableSeries, scale: Scale, axisData: LabelAxisData, categories: string[]): RectResponderInfoForCoordinateType[];
     resetSelectionArea(): void;
@@ -27,3 +26,30 @@ onMousedown({ responders, mousePosition }: {
     }): void;
-    makeRectResponderModel(categories: string[], renderOptions: RenderOptions): RectResponderModel[];
+    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?: "area" | "line" | "boxPlot" | "bullet" | "pie" | "heatmap" | "scatter" | "bar" | "column" | "bubble" | "radar" | "treemap" | "radialBar" | undefined;
+        iconType?: "triangle" | "circle" | "line" | "rect" | "pentagon" | "star" | "diamond" | "cross" | "hexagon" | "spectrum" | undefined;
+        useScatterChartIcon?: boolean | undefined;
+        rowIndex?: number | undefined;
+        columnIndex?: number | undefined;
+    }[];
     onMousemove({ responders, mousePosition }: {
@@ -30,0 +56,0 @@ responders: any;

dist/esm/component/zoom.js

 import Component from "./component";
-import { range } from "../helpers/utils";
+import { isNull, range } from "../helpers/utils";
 import { sortNumber } from "../helpers/utils";
 import { makeObservableObjectToNormal } from "../store/reactive";
+import { getCoordinateDataIndex, getCoordinateXValue, isCoordinateSeries, } from "../helpers/coordinate";
+import { getXPosition } from "../helpers/calculator";
+import { makeRectResponderModelForCoordinateType, } from "../helpers/responders";
 const DRAG_MIN_WIDTH = 15;
@@ -17,3 +20,4 @@ export default class Zoom extends Component {
     }
-    render(state) {
+    render(state, computed) {
+        var _a, _b;
         if (!state.zoomRange) {
@@ -23,10 +27,37 @@ return;
         this.resetSelectionArea();
-        const { layout, axes, categories } = state;
+        const { viewRange } = computed;
+        const { layout, axes, series, scale } = state;
+        const categories = state.categories;
         this.rect = layout.plot;
-        const { tickDistance, pointOnColumn, tickCount } = axes.xAxis;
-        this.responders = this.makeRectResponderModel(categories, {
-            pointOnColumn,
-            tickDistance,
-            tickCount,
+        this.startIndex = (_b = (_a = viewRange) === null || _a === void 0 ? void 0 : _a[0], (_b !== null && _b !== void 0 ? _b : 0));
+        const coordinateChart = isCoordinateSeries(series);
+        if (coordinateChart) {
+            const responderInfo = this.getRectResponderInfoForCoordinateType(series, scale, axes.xAxis, categories);
+            this.responders = this.makeRectResponderModelForCoordinateType(responderInfo, categories);
+        }
+        else {
+            this.responders = this.makeRectResponderModel(categories, axes.xAxis);
+        }
+    }
+    getRectResponderInfoForCoordinateType(series, scale, axisData, categories) {
+        const points = [];
+        const duplicateCheckMap = {};
+        Object.keys(series).forEach((seriesName) => {
+            const data = series[seriesName].data;
+            data.forEach(({ rawData }) => {
+                rawData.forEach((datum, idx) => {
+                    if (isNull(datum)) {
+                        return;
+                    }
+                    const dataIndex = getCoordinateDataIndex(datum, categories, idx, this.startIndex);
+                    const x = getXPosition(axisData, this.rect.width, getCoordinateXValue(datum), dataIndex);
+                    const xWithinRect = x >= 0 && x <= this.rect.width;
+                    if (!duplicateCheckMap[x] && xWithinRect) {
+                        duplicateCheckMap[x] = true;
+                        points.push({ x, label: categories[dataIndex] });
+                    }
+                });
+            });
         });
+        return points;
     }
@@ -62,5 +93,5 @@ resetSelectionArea() {
     }
-    makeRectResponderModel(categories, renderOptions) {
+    makeRectResponderModel(categories, axisData) {
         const categorySize = categories.length;
-        const { pointOnColumn, tickDistance } = renderOptions;
+        const { pointOnColumn, tickDistance } = axisData;
         const { height } = this.rect;
@@ -87,2 +118,6 @@ const halfDetectAreaIndex = pointOnColumn ? [] : [0, categorySize - 1];
     }
+    makeRectResponderModelForCoordinateType(responderInfo, categories) {
+        const responders = makeRectResponderModelForCoordinateType(responderInfo, this.rect);
+        return responders.map((m, idx) => (Object.assign(Object.assign({}, m), { data: { name: 'selectionArea', value: categories[idx] } })));
+    }
     onMousemove({ responders, mousePosition }) {
@@ -89,0 +124,0 @@ if (!responders.length) {

dist/esm/helpers/axes.d.ts

@@ -1,3 +0,3 @@
-import { Options, Series, ChartOptionsUsingYAxis, Axes, ViewAxisLabel, RotationLabelData, InitAxisData } from "../../types/store/store";
-import { AxisTitle, DateOption } from "../../types/options";
+import { Options, Series, ChartOptionsUsingYAxis, Axes, ViewAxisLabel, RotationLabelData, InitAxisData, ScaleData } from "../../types/store/store";
+import { AxisTitle } from "../../types/options";
 import { Theme } from "../../types/theme";
@@ -36,2 +36,3 @@ import { AxisDataParams } from "../store/axes";
     labelDistance?: number;
+    scale?: ScaleData;
     labelInterval: number;
@@ -48,3 +49,4 @@ tickDistance: number;
 } | undefined;
-export declare function makeFormattedCategory(categories: string[], date?: DateOption): string[];
+export declare function getAxisFormatter(options: Options, axisName: string): any;
+export declare function getLabelsAppliedFormatter(labels: string[], options: Options, dateType: boolean, axisName: string): any[];
 export declare function makeRotationData(maxLabelWidth: number, maxLabelHeight: number, distance: number, rotatable: boolean): Required<RotationLabelData>;
@@ -57,2 +59,3 @@ export declare function getMaxLabelSize(labels: string[], xMargin: number, font?: string): {
 export declare function getInitAxisIntervalData(isLabelAxis: boolean, params: AxisDataParams): InitAxisData;
+export declare function isDateType(options: Options, axisName: string): boolean;
 export {};

dist/esm/helpers/axes.js

@@ -190,6 +190,18 @@ import { AxisType } from "../component/axis";
 export function getViewAxisLabels(axisData, axisSize) {
-    const { labels, pointOnColumn, labelDistance, tickDistance, labelInterval, tickInterval, tickCount, } = axisData;
-    const relativePositions = makeTickPixelPositions(axisSize, tickCount);
-    const interval = labelInterval === tickInterval ? labelInterval : 1;
-    const labelAdjustment = pointOnColumn ? ((labelDistance !== null && labelDistance !== void 0 ? labelDistance : tickDistance * interval)) / 2 : 0;
+    var _a, _b, _c, _d;
+    const { labels, pointOnColumn, labelDistance, tickDistance, labelInterval, tickInterval, tickCount, scale, } = axisData;
+    let axisSizeAppliedRatio = axisSize;
+    let additional = 0;
+    let labelAdjustment = 0;
+    if (scale) {
+        const sizeRatio = (_b = (_a = scale) === null || _a === void 0 ? void 0 : _a.sizeRatio, (_b !== null && _b !== void 0 ? _b : 1));
+        const positionRatio = (_d = (_c = scale) === null || _c === void 0 ? void 0 : _c.positionRatio, (_d !== null && _d !== void 0 ? _d : 0));
+        axisSizeAppliedRatio = axisSize * sizeRatio;
+        additional = axisSize * positionRatio;
+    }
+    else {
+        const interval = labelInterval === tickInterval ? labelInterval : 1;
+        labelAdjustment = pointOnColumn ? ((labelDistance !== null && labelDistance !== void 0 ? labelDistance : tickDistance * interval)) / 2 : 0;
+    }
+    const relativePositions = makeTickPixelPositions(axisSizeAppliedRatio, tickCount, additional);
     return labels.reduce((acc, text, index) => {
@@ -208,6 +220,16 @@ const offsetPos = relativePositions[index] + labelAdjustment;
 }
-export function makeFormattedCategory(categories, date) {
-    const format = getDateFormat(date);
-    return categories.map((category) => (format ? formatDate(format, new Date(category)) : category));
+export function getAxisFormatter(options, axisName) {
+    var _a, _b, _c;
+    const axisOptions = Object.assign(Object.assign({}, getYAxisOption(options)), { xAxis: options.xAxis });
+    return _c = (_b = (_a = axisOptions[axisName]) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.formatter, (_c !== null && _c !== void 0 ? _c : ((value) => value));
 }
+export function getLabelsAppliedFormatter(labels, options, dateType, axisName) {
+    var _a, _b;
+    const dateFormatter = getDateFormat((_b = (_a = options) === null || _a === void 0 ? void 0 : _a[axisName]) === null || _b === void 0 ? void 0 : _b.date);
+    const formattedLabels = dateType && dateFormatter
+        ? labels.map((label) => formatDate(dateFormatter, new Date(label)))
+        : labels;
+    const formatter = getAxisFormatter(options, axisName);
+    return formattedLabels.map((label, index) => formatter(label, { index, labels, axisName }));
+}
 export function makeRotationData(maxLabelWidth, maxLabelHeight, distance, rotatable) {
@@ -270,1 +292,5 @@ const degree = getRotationDegree(distance, maxLabelWidth, maxLabelHeight);
 }
+export function isDateType(options, axisName) {
+    var _a;
+    return !!((_a = options[axisName]) === null || _a === void 0 ? void 0 : _a.date);
+}

dist/esm/helpers/calculator.d.ts

@@ -1,2 +0,2 @@
-import { Options, ValueEdge, LabelAxisData } from "../../types/store/store";
+import { ValueEdge, LabelAxisData } from "../../types/store/store";
 import { BezierPoint, Point } from "../../types/options";
@@ -12,3 +12,3 @@ export declare function getTextWidth(text: string, font?: string): number;
 export declare function divisors(value: number): number[];
-export declare function makeLabelsFromLimit(limit: ValueEdge, stepSize: number, options?: Options): string[];
+export declare function makeLabelsFromLimit(limit: ValueEdge, stepSize: number, isDateType?: boolean): string[];
 export declare function makeTickPixelPositions(size: number, count: number, additionalPosition?: number, remainLastBlockIntervalPosition?: number): number[];
@@ -20,2 +20,2 @@ export declare function crispPixel(pixel: number, thickness?: number): number;
 export declare function getMaxLengthLabelWidth(labels: string[]): number;
-export declare function getXPosition(axisData: Pick<LabelAxisData, 'pointOnColumn' | 'tickDistance' | 'labelDistance'>, offsetSize: number, value: number | string | Date, dataIndex: number, xAxisLimit?: ValueEdge): any;
+export declare function getXPosition(axisData: LabelAxisData, offsetSize: number, value: number | string | Date, dataIndex: number): any;

dist/esm/helpers/calculator.js

 import { range, isInteger, isString, isNumber, isNull } from "./utils";
-import { formatDate, getDateFormat } from "./formatDate";
 import { DEFAULT_LABEL_TEXT } from "../brushes/label";
@@ -69,4 +68,3 @@ import { TICK_SIZE } from "../brushes/axis";
 }
-export function makeLabelsFromLimit(limit, stepSize, options) {
-    var _a, _b;
+export function makeLabelsFromLimit(limit, stepSize, isDateType) {
     const multipleNum = findMultipleNum(stepSize);
@@ -76,5 +74,4 @@ const min = Math.round(limit.min * multipleNum);
     const labels = range(min, max + 1, stepSize * multipleNum);
-    const format = getDateFormat((_b = (_a = options) === null || _a === void 0 ? void 0 : _a.xAxis) === null || _b === void 0 ? void 0 : _b.date);
     return labels.map((label) => {
-        return format ? formatDate(format, new Date(label)) : String(label / multipleNum);
+        return String(isDateType ? new Date(label) : label / multipleNum);
     });
@@ -134,2 +131,5 @@ }
 export function getValueRatio(value, { min, max }) {
+    if (max === min) {
+        return 0;
+    }
     return (value - min) / (max - min);
@@ -144,11 +144,9 @@ }
 }
-export function getXPosition(axisData, offsetSize, value, dataIndex, xAxisLimit) {
-    const { pointOnColumn, tickDistance, labelDistance } = axisData;
+export function getXPosition(axisData, offsetSize, value, dataIndex) {
+    const { pointOnColumn, tickDistance, labelRange } = axisData;
     let x;
-    if (xAxisLimit) {
+    if (labelRange) {
         const xValue = isString(value) ? Number(new Date(value)) : Number(value);
-        const xValueRatio = getValueRatio(xValue, xAxisLimit);
-        x =
-            xValueRatio * (offsetSize - (pointOnColumn ? labelDistance : 0)) +
-                (pointOnColumn ? labelDistance / 2 : 0);
+        const xValueRatio = getValueRatio(xValue, labelRange);
+        x = xValueRatio * offsetSize;
     }
@@ -155,0 +153,0 @@ else {

dist/esm/helpers/responders.d.ts

 import { BoxPlotResponderModel, BulletResponderModel, CircleModel, CircleResponderModel, HeatmapRectResponderModel, SectorResponderModel, RectResponderModel, TreemapRectResponderModel, ResponderModel, GroupedSectorResponderModel } from "../../types/components/series";
 import { LineTypeEventDetectType, Point, Rect } from "../../types/options";
-import { AxisData } from "../../types/store/store";
+import { LabelAxisData } from "../../types/store/store";
 import { TooltipData } from "../../types/components/tooltip";
@@ -13,5 +13,10 @@ export declare type RespondersThemeType = 'select' | 'hover';
 }
+export interface RectResponderInfoForCoordinateType {
+    x: number;
+    label: string;
+}
 export declare function isSameSeriesResponder({ models, comparisonModel, name, eventDetectType, }: SelectedSeriesEventModel): boolean | 0 | undefined;
 export declare function getNearestResponder(responders: CircleResponderModel[], mousePosition: Point, rect: Rect): CircleResponderModel[];
-export declare function makeRectResponderModel(rect: Rect, axis: AxisData, categories: string[], vertical?: boolean): RectResponderModel[];
+export declare function makeRectResponderModel(rect: Rect, axis: LabelAxisData, categories: string[], vertical?: boolean): RectResponderModel[];
+export declare function makeRectResponderModelForCoordinateType(responderInfo: RectResponderInfoForCoordinateType[], rect: Rect): RectResponderModel[];
 export declare function makeTooltipCircleMap(seriesCircleModel: CircleModel[], tooltipDataArr: TooltipData[]): Record<string, CircleResponderModel[]>;
@@ -18,0 +23,0 @@ export declare function getDeepestNode(responders: TreemapRectResponderModel[]): TreemapRectResponderModel[];

dist/esm/helpers/responders.js

@@ -59,7 +59,7 @@ import { getDistance } from "./calculator";
 export function makeRectResponderModel(rect, axis, categories, vertical = true) {
-    const { pointOnColumn, tickCount, tickDistance } = axis;
+    const { pointOnColumn, tickDistance, rectResponderCount } = axis;
     const { width, height } = rect;
-    const halfDetectAreaIndex = pointOnColumn ? [] : [0, tickCount - 1];
+    const halfDetectAreaIndex = pointOnColumn ? [] : [0, rectResponderCount - 1];
     const halfSize = tickDistance / 2;
-    return range(0, tickCount).map((index) => {
+    return range(0, rectResponderCount).map((index) => {
         const half = halfDetectAreaIndex.includes(index);
@@ -82,2 +82,24 @@ const size = half ? halfSize : tickDistance;
 }
+export function makeRectResponderModelForCoordinateType(responderInfo, rect) {
+    const { width, height } = rect;
+    let startPos = 0;
+    return responderInfo
+        .sort((a, b) => a.x - b.x)
+        .reduce((acc, model, index) => {
+        const { x, label } = model;
+        const next = responderInfo[index + 1];
+        const endPos = next ? (next.x + x) / 2 : width;
+        const rectResponderModel = {
+            type: 'rect',
+            x: startPos,
+            y: 0,
+            width: endPos - startPos,
+            height,
+            label,
+            index,
+        };
+        startPos = endPos;
+        return [...acc, rectResponderModel];
+    }, []);
+}
 export function makeTooltipCircleMap(seriesCircleModel, tooltipDataArr) {
@@ -84,0 +106,0 @@ const dataMap = tooltipDataArr.reduce((acc, cur) => {

dist/esm/scale/coordinateScaleCalculator.d.ts

@@ -14,3 +14,12 @@ import { ValueEdge, ScaleData } from "../../types/store/store";
 export declare function getStackScaleData(type: stackScaleType): ScaleData;
-export declare function calculateScaleForCoordinateLineType(scale: ScaleData, options: LineChartOptions, categories?: string[]): 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 {};

dist/esm/scale/coordinateScaleCalculator.js

 import { isNumber } from "../helpers/utils";
+import { isDateType } from "../helpers/axes";
+import { AxisType } from "../component/axis";
 const SNAP_VALUES = [1, 2, 5, 10];
@@ -142,8 +144,4 @@ const DEFAULT_PIXELS_PER_STEP = 88;
 }
-export function calculateScaleForCoordinateLineType(scale, options, categories) {
-    var _a, _b;
-    if (!categories) {
-        return scale;
-    }
-    const dateType = !!((_b = (_a = options) === null || _a === void 0 ? void 0 : _a.xAxis) === null || _b === void 0 ? void 0 : _b.date);
+export function calculateXAxisScaleForCoordinateLineType(scale, options, categories) {
+    const dateType = isDateType(options, AxisType.X);
     const values = categories.map((value) => (dateType ? Number(new Date(value)) : Number(value)));
@@ -154,8 +152,14 @@ const { limit, stepSize } = scale;
     const newLimit = Object.assign({}, limit);
-    if (max - min) {
-        if (limit.min < min && limit.min + stepSize <= min) {
+    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 && limit.max - stepSize >= max) {
+        if (limit.max > max) {
             newLimit.max -= stepSize;
+            sizeRatio -= (max - newLimit.max) / distance;
         }
@@ -169,3 +173,5 @@ }
         stepSize,
+        positionRatio,
+        sizeRatio,
     };
 }

dist/esm/scale/datetimeScaleCalculator.d.ts

@@ -17,3 +17,5 @@ import { ValueEdge } from "../../types/store/store";
     stepCount: number;
+    sizeRatio?: number | undefined;
+    positionRatio?: number | undefined;
 };
 export {};

dist/esm/store/axes.d.ts

@@ -1,3 +0,3 @@
-import { CenterYAxisData, Options, ScaleData, Series, StoreModule, ChartOptionsUsingYAxis, LabelAxisData, InitAxisData, Layout } from "../../types/store/store";
-import { BaseAxisOptions, BaseXAxisOptions, LineTypeXAxisOptions, RangeDataType } from "../../types/options";
+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";
@@ -11,3 +11,2 @@ interface StateProp {
     centerYAxis?: Pick<CenterYAxisData, 'xAxisHalfSize'> | null;
-    zoomRange?: RangeDataType<number>;
     initialAxisData: InitAxisData;
@@ -19,3 +18,2 @@ labelOnYAxis?: boolean;
     categories: string[];
-    rawCategories: string[];
     isCoordinateTypeChart: boolean;
@@ -22,0 +20,0 @@ };

dist/esm/store/axes.js

@@ -1,5 +0,4 @@
-import { getAxisName, getSizeKey, hasBoxTypeSeries, isLabelAxisOnYAxis, isPointOnColumn, getYAxisOption, getAxisTheme, getViewAxisLabels, hasAxesLayoutChanged, getRotatableOption, makeFormattedCategory, getMaxLabelSize, makeTitleOption, makeRotationData, getLabelXMargin, getInitAxisIntervalData, } from "../helpers/axes";
-import { makeLabelsFromLimit, getAxisLabelAnchorPoint } from "../helpers/calculator";
+import { getAxisFormatter, getAxisName, getAxisTheme, getInitAxisIntervalData, getLabelsAppliedFormatter, getLabelXMargin, getMaxLabelSize, getRotatableOption, getSizeKey, getViewAxisLabels, getYAxisOption, hasAxesLayoutChanged, hasBoxTypeSeries, isDateType, isLabelAxisOnYAxis, isPointOnColumn, makeRotationData, makeTitleOption, } from "../helpers/axes";
+import { getAxisLabelAnchorPoint, makeLabelsFromLimit } from "../helpers/calculator";
 import { deepMergedCopy, hasNegativeOnly, isNumber, pickProperty } from "../helpers/utils";
-import { isZooming } from "../helpers/range";
 import { isCoordinateSeries } from "../helpers/coordinate";
@@ -27,25 +26,29 @@ import { AxisType } from "../component/axis";
 }
-function getAxisFormatter(options, axisName) {
-    var _a, _b, _c;
-    const axisOptions = Object.assign(Object.assign({}, getYAxisOption(options)), { xAxis: options.xAxis });
-    return _c = (_b = (_a = axisOptions[axisName]) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.formatter, (_c !== null && _c !== void 0 ? _c : ((value) => value));
-}
 export function getLabelAxisData(stateProp) {
-    var _a, _b;
-    const { axisSize, categories, series, options, theme, scale, zoomRange, rawCategories, initialAxisData, isCoordinateTypeChart, axisName, } = stateProp;
+    const { axisSize, categories, series, options, theme, scale, initialAxisData, isCoordinateTypeChart, axisName, } = stateProp;
     const pointOnColumn = isPointOnColumn(series, options);
-    const labelsBeforeFormatting = !isZooming(rawCategories, zoomRange) && isCoordinateTypeChart
-        ? makeLabelsFromLimit(scale.limit, scale.stepSize, options)
-        : makeFormattedCategory(categories, (_b = (_a = options) === null || _a === void 0 ? void 0 : _a.xAxis) === null || _b === void 0 ? void 0 : _b.date);
-    const formatter = getAxisFormatter(options, axisName);
-    // @TODO: regenerate label when exceeding max width
-    const labels = labelsBeforeFormatting.map((label, index) => formatter(label, { index, labels: labelsBeforeFormatting, axisName }));
-    const tickIntervalCount = categories.length - (pointOnColumn ? 0 : 1);
+    const dateType = isDateType(options, axisName);
+    const labelsBeforeFormatting = isCoordinateTypeChart
+        ? makeLabelsFromLimit(scale.limit, scale.stepSize, dateType)
+        : categories;
+    const labels = getLabelsAppliedFormatter(labelsBeforeFormatting, options, dateType, axisName);
+    let labelRange;
+    if (scale) {
+        const baseLabels = pointOnColumn ? labelsBeforeFormatting : categories;
+        const values = baseLabels.map((value) => (dateType ? Number(new Date(value)) : Number(value)));
+        labelRange = { min: Math.min(...values), max: Math.max(...values) };
+    }
+    const rectResponderCount = categories.length;
+    const tickIntervalCount = rectResponderCount - (pointOnColumn ? 0 : 1);
     const tickDistance = tickIntervalCount ? axisSize / tickIntervalCount : axisSize;
     const labelDistance = axisSize / (labels.length - (pointOnColumn ? 0 : 1));
-    const tickCount = labels.length + (pointOnColumn ? 1 : 0);
+    let tickCount = labels.length;
+    if (pointOnColumn && !isCoordinateTypeChart) {
+        tickCount += 1;
+    }
     const viewLabels = getViewAxisLabels(Object.assign({ labels,
         pointOnColumn,
         tickDistance,
-        tickCount }, initialAxisData), axisSize);
+        tickCount,
+        scale }, initialAxisData), axisSize);
     const axisLabelMargin = getLabelXMargin(axisName, options);
@@ -57,3 +60,5 @@ return Object.assign(Object.assign({ labels,
         tickDistance,
-        tickCount, isLabelAxis: true }, initialAxisData), getMaxLabelSize(labels, axisLabelMargin, getTitleFontString(theme.label)));
+        tickCount,
+        labelRange,
+        rectResponderCount, isLabelAxis: true }, initialAxisData), getMaxLabelSize(labels, axisLabelMargin, getTitleFontString(theme.label)));
 }
@@ -123,5 +128,4 @@ function getValueAxisData(stateProp) {
     var _a, _b;
-    const { scale, options, series, zoomRange, theme } = state;
+    const { scale, options, series, theme } = state;
     const categories = state.categories;
-    const rawCategories = state.rawCategories;
     return labelOnYAxis
@@ -132,7 +136,5 @@ ? getLabelAxisData({
             categories: (_b = (_a = getYAxisOption(options).secondaryYAxis) === null || _a === void 0 ? void 0 : _a.categories, (_b !== null && _b !== void 0 ? _b : categories)),
-            rawCategories,
             options,
             series,
             theme: getAxisTheme(theme, AxisType.SECONDARY_Y),
-            zoomRange,
             initialAxisData,
@@ -199,7 +201,7 @@ isCoordinateTypeChart,
             var _a, _b;
-            const { scale, options, series, layout, zoomRange, theme } = state;
+            const { scale, options, series, layout, theme } = state;
             const { xAxis, yAxis, plot } = layout;
             const isCoordinateTypeChart = isCoordinateSeries(initStoreState.series);
             const labelOnYAxis = isLabelAxisOnYAxis(series, options);
-            const { categories, rawCategories } = getCategoriesWithTypes(state.categories, state.rawCategories);
+            const { categories } = getCategoriesWithTypes(state.categories, state.rawCategories);
             const { valueAxisName, valueAxisSize, labelAxisName, labelAxisSize } = getAxisInfo(labelOnYAxis, plot, series);
@@ -227,7 +229,5 @@ const hasCenterYAxis = state.axes.centerYAxis;
                 categories,
-                rawCategories,
                 options,
                 series,
                 theme: getAxisTheme(theme, labelAxisName),
-                zoomRange,
                 initialAxisData: initialAxisData[labelAxisName],
@@ -234,0 +234,0 @@ isCoordinateTypeChart,

dist/esm/store/dataRange.d.ts

 import { ValueEdge, StoreModule } from "../../types/store/store";
-export declare function getLimitSafely(baseValues: number[]): ValueEdge;
+export declare function getLimitSafely(baseValues: number[], isXAxis?: boolean): ValueEdge;
 declare const dataRange: StoreModule;
 export default dataRange;

dist/esm/store/dataRange.js

@@ -6,3 +6,3 @@ import { getFirstValidValue, isNull, includes } from "../helpers/utils";
 import { isRangeValue } from "../helpers/range";
-export function getLimitSafely(baseValues) {
+export function getLimitSafely(baseValues, isXAxis = false) {
     const limit = {
@@ -14,3 +14,7 @@ min: Math.min(...baseValues),
         const [firstValue] = baseValues;
-        if (firstValue > 0) {
+        if (isXAxis) {
+            limit.min = firstValue;
+            limit.max = firstValue;
+        }
+        else if (firstValue > 0) {
             limit.min = 0;
@@ -116,3 +120,3 @@ }
                     values = yAxisValues;
-                    seriesDataRange[seriesName][labelAxisName] = getLimitSafely([...xAxisValues]);
+                    seriesDataRange[seriesName][labelAxisName] = getLimitSafely([...xAxisValues], true);
                 }
@@ -119,0 +123,0 @@ else if (!series[seriesName].data.length) {

dist/esm/store/heatmapAxes.js

 import { AxisType } from "../component/axis";
-import { getAxisTheme, makeFormattedCategory, getViewAxisLabels, makeRotationData, getRotatableOption, hasAxesLayoutChanged, makeTitleOption, getMaxLabelSize, getLabelXMargin, } from "../helpers/axes";
+import { getAxisTheme, getViewAxisLabels, makeRotationData, getRotatableOption, hasAxesLayoutChanged, makeTitleOption, getMaxLabelSize, getLabelXMargin, getLabelsAppliedFormatter, isDateType, } from "../helpers/axes";
 import { getAxisLabelAnchorPoint } from "../helpers/calculator";
 import { getTitleFontString } from "../helpers/style";
 function getHeatmapAxisData(stateProp, axisType) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { categories, axisSize, options, theme } = stateProp;
     const isLabelAxis = axisType === AxisType.X;
     const axisName = isLabelAxis ? 'x' : 'y';
-    const formatter = (_c = (_b = (_a = options[axisType]) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.formatter, (_c !== null && _c !== void 0 ? _c : ((value) => value)));
-    const labelsBeforeFormatting = makeFormattedCategory(categories[axisName], (_d = options[axisType]) === null || _d === void 0 ? void 0 : _d.date);
-    const labels = labelsBeforeFormatting.map((label, index) => formatter(label, { index, labels: labelsBeforeFormatting, axisName: axisType }));
+    const dateType = isDateType(options, axisType);
+    const labels = getLabelsAppliedFormatter(categories[axisName], options, dateType, axisType);
     const tickIntervalCount = labels.length;
@@ -18,4 +17,4 @@ const tickDistance = tickIntervalCount ? axisSize / tickIntervalCount : axisSize;
     const tickCount = tickIntervalCount + 1;
-    const tickInterval = (_g = (_f = (_e = options[axisType]) === null || _e === void 0 ? void 0 : _e.tick) === null || _f === void 0 ? void 0 : _f.interval, (_g !== null && _g !== void 0 ? _g : 1));
-    const labelInterval = (_k = (_j = (_h = options[axisType]) === null || _h === void 0 ? void 0 : _h.label) === null || _j === void 0 ? void 0 : _j.interval, (_k !== null && _k !== void 0 ? _k : 1));
+    const tickInterval = (_c = (_b = (_a = options[axisType]) === null || _a === void 0 ? void 0 : _a.tick) === null || _b === void 0 ? void 0 : _b.interval, (_c !== null && _c !== void 0 ? _c : 1));
+    const labelInterval = (_f = (_e = (_d = options[axisType]) === null || _d === void 0 ? void 0 : _d.label) === null || _e === void 0 ? void 0 : _e.interval, (_f !== null && _f !== void 0 ? _f : 1));
     const viewLabels = getViewAxisLabels({
@@ -41,3 +40,3 @@ labels,
         labelInterval,
-        title: makeTitleOption((_l = options.xAxis) === null || _l === void 0 ? void 0 : _l.title),
+        title: makeTitleOption((_g = options.xAxis) === null || _g === void 0 ? void 0 : _g.title),
         maxLabelWidth,
@@ -47,3 +46,3 @@ maxLabelHeight,
     if (axisType === AxisType.X) {
-        const labelMargin = (_p = (_o = (_m = options.xAxis) === null || _m === void 0 ? void 0 : _m.label) === null || _o === void 0 ? void 0 : _o.margin, (_p !== null && _p !== void 0 ? _p : 0));
+        const labelMargin = (_k = (_j = (_h = options.xAxis) === null || _h === void 0 ? void 0 : _h.label) === null || _j === void 0 ? void 0 : _j.margin, (_k !== null && _k !== void 0 ? _k : 0));
         const offsetY = getAxisLabelAnchorPoint(maxLabelHeight) + labelMargin;
@@ -50,0 +49,0 @@ const distance = axisSize / viewLabels.length;

dist/esm/store/plot.js

@@ -5,8 +5,12 @@ import { extend } from "./store";
 import { isString, isUndefined } from "../helpers/utils";
-function getOverlappingRange(range) {
-    return range.reduce((acc, rangeData) => {
+function getOverlappingRange(ranges) {
+    const overlappingRanges = ranges.reduce((acc, { range }) => {
         const [accStart, accEnd] = acc;
-        const [start, end] = rangeData;
+        const [start, end] = range;
         return [Math.min(accStart, start), Math.max(accEnd, end)];
     }, [Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER]);
+    return {
+        range: overlappingRanges,
+        color: ranges[0].color,
+    };
 }
@@ -34,19 +38,8 @@ function getCategoryIndex(value, categories) {
         const color = rgba(bgColor, opacity);
-        if (isRangeValue(range[0])) {
-            const ranges = range.map((rangeData) => rangeData.map((value) => getValidValue(value, categories, isDateType)));
-            if (mergeOverlappingRanges) {
-                return {
-                    color,
-                    range: getOverlappingRange(ranges),
-                };
-            }
-            return ranges.map((rangeData) => ({
-                range: rangeData,
-                color,
-            }));
-        }
-        return {
+        const rangeArray = (isRangeValue(range[0]) ? range : [range]);
+        const ranges = rangeArray.map((rangeData) => ({
+            range: rangeData.map((value) => getValidValue(value, categories, isDateType)),
             color,
-            range,
-        };
+        }));
+        return mergeOverlappingRanges ? getOverlappingRange(ranges) : ranges;
     });
@@ -53,0 +46,0 @@ }

dist/esm/store/scale.js

 import { getAxisName, getSizeKey, isLabelAxisOnYAxis, getYAxisOption, getValueAxisNames, isSeriesUsingRadialAxes, } from "../helpers/axes";
-import { calculateCoordinateScale, calculateScaleForCoordinateLineType, getStackScaleData, } from "../scale/coordinateScaleCalculator";
+import { calculateCoordinateScale, calculateXAxisScaleForCoordinateLineType, getStackScaleData, } from "../scale/coordinateScaleCalculator";
 import { calculateDatetimeScale } from "../scale/datetimeScaleCalculator";
@@ -9,3 +9,3 @@ import { isCoordinateSeries } from "../helpers/coordinate";
 function getLabelScaleData(state, labelAxisOnYAxis, scaleOptions, labelAxisName) {
-    var _a;
+    var _a, _b;
     const { dataRange, layout, series, options } = state;
@@ -28,4 +28,4 @@ const categories = state.categories;
     }
-    if (series.line) {
-        result = calculateScaleForCoordinateLineType(result, options, categories);
+    if (series.line && categories && !((_b = options.xAxis) === null || _b === void 0 ? void 0 : _b.pointOnColumn)) {
+        result = calculateXAxisScaleForCoordinateLineType(result, options, categories);
     }
@@ -32,0 +32,0 @@ return result;

dist/esm/store/seriesData.js

@@ -240,3 +240,6 @@ import { extend } from "./store";
             initStoreState.series = series;
-            state.rawCategories = makeRawCategories(series, categories);
+            const isNestedPieChart = hasNestedPieSeries(series);
+            if (!isNestedPieChart) {
+                state.rawCategories = makeRawCategories(series, categories);
+            }
             this.dispatch('initThemeState');
@@ -243,0 +246,0 @@ this.dispatch('initLegendState');

package.json

 {
   "name": "@toast-ui/chart",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "TOAST UI Application: Chart",
@@ -141,3 +141,3 @@ "main": "dist/toastui-chart.js",
   },
-  "gitHead": "d27de1c91c1b07c224ac754f73a2d5a1854368f4"
+  "gitHead": "e3de95b9228102d96156227f637ccc2fad920d17"
 }

types/store/store.d.ts

@@ -430,2 +430,4 @@ import {
   labelDistance: number;
+  rectResponderCount: number;
+  labelRange?: ValueEdge;
 };
@@ -467,2 +469,4 @@
   stepCount: number;
+  sizeRatio?: number;
+  positionRatio?: number;
 }
@@ -469,0 +473,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3430941

increased by0.5%

Lines of code

61483

increased by0.47%

No dependency changes