Merge pull request #18229 from apache/fix-18130

fix(markArea): markArea range in bar series #18130
apache · Mar 6, 2023 · 2752bea · 2752bea
2 parents 9c743be + e02ca38
commit 2752bea
Show file tree

Hide file tree

Showing 4 changed files with 457 additions and 14 deletions.
diff --git a/src/chart/bar/BaseBarSeries.ts b/src/chart/bar/BaseBarSeries.ts
@@ -94,20 +94,77 @@ class BaseBarSeriesModel<Opts extends BaseBarSeriesOption<unknown> = BaseBarSeri
         const coordSys = this.coordinateSystem;
         if (coordSys && coordSys.clampData) {
             // PENDING if clamp ?
-            const pt = coordSys.dataToPoint(coordSys.clampData(value));
+            const clampData = coordSys.clampData(value);
+            const pt = coordSys.dataToPoint(clampData);
             if (startingAtTick) {
                 each(coordSys.getAxes(), function (axis: Axis2D, idx: number) {
                     // If axis type is category, use tick coords instead
-                    if (axis.type === 'category') {
+                    if (axis.type === 'category' && dims != null) {
                         const tickCoords = axis.getTicksCoords();
-                        let tickIdx = coordSys.clampData(value)[idx];
+
+                        let targetTickId = clampData[idx];
                         // The index of rightmost tick of markArea is 1 larger than x1/y1 index
-                        if (dims && (dims[idx] === 'x1' || dims[idx] === 'y1')) {
-                            tickIdx += 1;
+                        const isEnd = dims[idx] === 'x1' || dims[idx] === 'y1';
+                        if (isEnd) {
+                            targetTickId += 1;
+                        }
+
+                        // The only contains one tick, tickCoords is
+                        // like [{coord: 0, tickValue: 0}, {coord: 0}]
+                        // to the length should always be larger than 1
+                        if (tickCoords.length < 2) {
+                            return;
+                        }
+                        else if (tickCoords.length === 2) {
+                            // The left value and right value of the axis are
+                            // the same. coord is 0 in both items. Use the max
+                            // value of the axis as the coord
+                            pt[idx] = axis.toGlobalCoord(
+                                axis.getExtent()[isEnd ? 1 : 0]
+                            );
+                            return;
+                        }
+
+                        let leftCoord;
+                        let coord;
+                        let stepTickValue = 1;
+                        for (let i = 0; i < tickCoords.length; i++) {
+                            const tickCoord = tickCoords[i].coord;
+                            // The last item of tickCoords doesn't contain
+                            // tickValue
+                            const tickValue = i === tickCoords.length - 1
+                                ? tickCoords[i - 1].tickValue + stepTickValue
+                                : tickCoords[i].tickValue;
+                            if (tickValue === targetTickId) {
+                                coord = tickCoord;
+                                break;
+                            }
+                            else if (tickValue < targetTickId) {
+                                leftCoord = tickCoord;
+                            }
+                            else if (leftCoord != null && tickValue > targetTickId) {
+                                coord = (tickCoord + leftCoord) / 2;
+                                break;
+                            }
+                            if (i === 1) {
+                                // Here we assume the step of category axes is
+                                // the same
+                                stepTickValue = tickValue - tickCoords[0].tickValue;
+                            }
+                        }
+                        if (coord == null) {
+                            if (!leftCoord) {
+                                // targetTickId is smaller than all tick ids in the
+                                // visible area, use the leftmost tick coord
+                                coord = tickCoords[0].coord;
+                            }
+                            else if (leftCoord) {
+                                // targetTickId is larger than all tick ids in the
+                                // visible area, use the rightmost tick coord
+                                coord = tickCoords[tickCoords.length - 1].coord;
+                            }
                         }
-                        (tickIdx > tickCoords.length - 1) && (tickIdx = tickCoords.length - 1);
-                        (tickIdx < 0) && (tickIdx = 0);
-                        tickCoords[tickIdx] && (pt[idx] = axis.toGlobalCoord(tickCoords[tickIdx].coord));
+                        pt[idx] = axis.toGlobalCoord(coord);
                     }
                 });
             }

diff --git a/src/component/marker/markerHelper.ts b/src/component/marker/markerHelper.ts
@@ -105,14 +105,14 @@ export function dataTransform(
 
     const data = seriesModel.getData();
     const coordSys = seriesModel.coordinateSystem;
-    const dims = coordSys.dimensions;
+    const dims = coordSys && coordSys.dimensions;
 
     // 1. If not specify the position with pixel directly
     // 2. If `coord` is not a data array. Which uses `xAxis`,
     // `yAxis` to specify the coord on each dimension
 
     // parseFloat first because item.x and item.y can be percent string like '20%'
-    if (!hasXAndY(item) && !isArray(item.coord) && coordSys) {
+    if (!hasXAndY(item) && !isArray(item.coord) && isArray(dims)) {
         const axisInfo = getAxisInfo(item, data, coordSys, seriesModel);
 
         // Clone the option
@@ -144,7 +144,7 @@ export function dataTransform(
         }
     }
     // x y is provided
-    if (item.coord == null) {
+    if (item.coord == null || !isArray(dims)) {
         item.coord = [];
     }
     else {