From eac089c18c0f5a1cb9500373002d75ef77b736a1 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Fri, 19 Jul 2024 18:31:13 +0800 Subject: [PATCH 1/4] fix(polar): extent when boundaryGap is false --- src/coord/polar/polarCreator.ts | 12 +++-- test/bar-polar-basic-radial.html | 75 ++++++++++++++++++++++++++++++-- 2 files changed, 81 insertions(+), 6 deletions(-) diff --git a/src/coord/polar/polarCreator.ts b/src/coord/polar/polarCreator.ts index fe29f3ed18..73c4eecba7 100644 --- a/src/coord/polar/polarCreator.ts +++ b/src/coord/polar/polarCreator.ts @@ -102,9 +102,15 @@ function updatePolarScale(this: Polar, ecModel: GlobalModel, api: ExtensionAPI) // Fix extent of category angle axis if (angleAxis.type === 'category' && !angleAxis.onBand) { const extent = angleAxis.getExtent(); - const diff = 360 / (angleAxis.scale as OrdinalScale).count(); - angleAxis.inverse ? (extent[1] += diff) : (extent[1] -= diff); - angleAxis.setExtent(extent[0], extent[1]); + const angleModel = angleAxis.model; + const endAngle = angleModel.get('endAngle'); + const spanAngle = (endAngle == null ? 360 : endAngle - angleModel.get('startAngle')) + * (angleAxis.inverse ? -1 : 1) ; + const diff = spanAngle / (angleAxis.scale as OrdinalScale).count(); + if (Math.abs(spanAngle + diff) >= 360) { + extent[1] += Math.abs(diff); + angleAxis.setExtent(extent[0], extent[1]); + } } } diff --git a/test/bar-polar-basic-radial.html b/test/bar-polar-basic-radial.html index 38bed35350..26dd241261 100644 --- a/test/bar-polar-basic-radial.html +++ b/test/bar-polar-basic-radial.html @@ -23,21 +23,26 @@ +
- From 645bd056dc66e9fdc2edb9d33fd4227f65b72c50 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Mon, 22 Jul 2024 14:29:30 +0800 Subject: [PATCH 2/4] test(polar): add test case for polar bars with boundaryGap false --- test/bar-polar-basic-radial.html | 34 +++++++++++++------ test/runTest/actions/__meta__.json | 1 + .../actions/bar-polar-basic-radial.json | 1 + 3 files changed, 26 insertions(+), 10 deletions(-) create mode 100644 test/runTest/actions/bar-polar-basic-radial.json diff --git a/test/bar-polar-basic-radial.html b/test/bar-polar-basic-radial.html index 26dd241261..22198487d5 100644 --- a/test/bar-polar-basic-radial.html +++ b/test/bar-polar-basic-radial.html @@ -37,12 +37,21 @@ background: #fff; } -
+

+ angleAxis range should adjust when `boundaryGap: false`. +

+

+ 1. startAngle: 90, endAngle: -270, clockwise: true: `a` to `d` should take 3/4 of the circle so that pieces are not overlapped. +

+

+ 2. (click "textNext") startAngle: 90, endAngle: -90, clockwise: true: `a` to `d` should take 1/2 of the circle so that pieces are not overlapped. +

+
- + @@ -89,23 +98,27 @@ var config = { startAngle: 90, endAngle: -270, - clockwise: false + clockwise: true, + testNext: () => { + config.startAngle = 90; + config.endAngle = -90; + update(); + } }; chart.setOption({ angleAxis: { type: 'category', data: [ - 'a', - 'b', - 'c', - 'd' + 'a', + 'b', + 'c', + 'd' ], - // boundaryGap: false, + boundaryGap: false, startAngle: config.startAngle, endAngle: config.endAngle, clockwise: config.clockwise - }, radiusAxis: { }, @@ -139,6 +152,7 @@ .onChange(update); gui.add(config, 'clockwise') .onChange(update); + gui.add(config, 'testNext'); }); diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json index c9abb1e8c8..a6b181a993 100644 --- a/test/runTest/actions/__meta__.json +++ b/test/runTest/actions/__meta__.json @@ -23,6 +23,7 @@ "bar-large": 2, "bar-overflow-time-plot": 3, "bar-polar-animation": 2, + "bar-polar-basic-radial": 1, "bar-polar-clockwise": 1, "bar-polar-multi-series": 1, "bar-polar-multi-series-radial": 1, diff --git a/test/runTest/actions/bar-polar-basic-radial.json b/test/runTest/actions/bar-polar-basic-radial.json new file mode 100644 index 0000000000..c57e1e0194 --- /dev/null +++ b/test/runTest/actions/bar-polar-basic-radial.json @@ -0,0 +1 @@ +[{"name":"Action 1","ops":[{"type":"mousemove","time":1158,"x":786,"y":251},{"type":"mousemove","time":1358,"x":661,"y":119},{"type":"mousemove","time":1558,"x":617,"y":90},{"type":"mousedown","time":1762,"x":617,"y":90},{"type":"mouseup","time":1855,"x":617,"y":90},{"time":1856,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1721629682533}] \ No newline at end of file From c36098a875d54b75e6a7e7e565ff774a8e1eb74f Mon Sep 17 00:00:00 2001 From: Ovilia Date: Mon, 22 Jul 2024 14:47:00 +0800 Subject: [PATCH 3/4] style(polar): fix lint --- src/coord/polar/polarCreator.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/coord/polar/polarCreator.ts b/src/coord/polar/polarCreator.ts index 73c4eecba7..0454206ae3 100644 --- a/src/coord/polar/polarCreator.ts +++ b/src/coord/polar/polarCreator.ts @@ -105,7 +105,7 @@ function updatePolarScale(this: Polar, ecModel: GlobalModel, api: ExtensionAPI) const angleModel = angleAxis.model; const endAngle = angleModel.get('endAngle'); const spanAngle = (endAngle == null ? 360 : endAngle - angleModel.get('startAngle')) - * (angleAxis.inverse ? -1 : 1) ; + * (angleAxis.inverse ? -1 : 1); const diff = spanAngle / (angleAxis.scale as OrdinalScale).count(); if (Math.abs(spanAngle + diff) >= 360) { extent[1] += Math.abs(diff); From e45af2c8872b2337fcd259301b8c055a0d3dbd4d Mon Sep 17 00:00:00 2001 From: Ovilia Date: Wed, 2 Apr 2025 16:51:00 +0800 Subject: [PATCH 4/4] fix(polar): boundaryGap logic --- src/coord/polar/polarCreator.ts | 15 +++++++-------- test/bar-polar-basic-radial.html | 6 ++++-- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/coord/polar/polarCreator.ts b/src/coord/polar/polarCreator.ts index 0454206ae3..a59ec71f04 100644 --- a/src/coord/polar/polarCreator.ts +++ b/src/coord/polar/polarCreator.ts @@ -99,16 +99,15 @@ function updatePolarScale(this: Polar, ecModel: GlobalModel, api: ExtensionAPI) niceScaleExtent(angleAxis.scale, angleAxis.model); niceScaleExtent(radiusAxis.scale, radiusAxis.model); - // Fix extent of category angle axis + // Fix extent of category angle axis when no boundaryGap if (angleAxis.type === 'category' && !angleAxis.onBand) { const extent = angleAxis.getExtent(); - const angleModel = angleAxis.model; - const endAngle = angleModel.get('endAngle'); - const spanAngle = (endAngle == null ? 360 : endAngle - angleModel.get('startAngle')) - * (angleAxis.inverse ? -1 : 1); - const diff = spanAngle / (angleAxis.scale as OrdinalScale).count(); - if (Math.abs(spanAngle + diff) >= 360) { - extent[1] += Math.abs(diff); + let spanAngle = (extent[1] - extent[0]) * (angleAxis.inverse ? -1 : 1); + const pieces = (angleAxis.scale as OrdinalScale).count(); + // spanLimit is the maximum span angle when no boundaryGap + const spanLimit = 360 - 360 / pieces; + if (spanAngle >= spanLimit) { + extent[1] = extent[0] + (angleAxis.inverse ? -1 : 1) * spanLimit; angleAxis.setExtent(extent[0], extent[1]); } } diff --git a/test/bar-polar-basic-radial.html b/test/bar-polar-basic-radial.html index 22198487d5..5ba0f88edb 100644 --- a/test/bar-polar-basic-radial.html +++ b/test/bar-polar-basic-radial.html @@ -1,4 +1,3 @@ -