From 090efb2bd120dc0157478cdd8444f3f879152247 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Tue, 24 Aug 2021 13:40:07 +0800 Subject: [PATCH 1/5] fix(polar): wrong sector clockwise when previous data is 0 #15517 --- src/chart/bar/BarView.ts | 2 +- test/line-animation.html | 62 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+), 1 deletion(-) diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts index e4be916699..e790bbc57e 100644 --- a/src/chart/bar/BarView.ts +++ b/src/chart/bar/BarView.ts @@ -750,7 +750,7 @@ const elementCreator: { // direction. Notice that if clockwise is true (by default), the sector // will always draw clockwisely, no matter whether endAngle is greater // or less than startAngle. - const clockwise = layout.startAngle < layout.endAngle; + const clockwise = layout.startAngle <= layout.endAngle; const ShapeClass = (!isRadial && roundCap) ? Sausage : Sector; diff --git a/test/line-animation.html b/test/line-animation.html index 011fd69d83..fd9cdeca2f 100644 --- a/test/line-animation.html +++ b/test/line-animation.html @@ -49,6 +49,8 @@ } +
+
@@ -400,6 +402,66 @@

Label Animation with animationDelay callback

+ + \ No newline at end of file From 29a1a27c9e3c3d7eb14dce948e41a458f3f8184b Mon Sep 17 00:00:00 2001 From: Ovilia Date: Tue, 24 Aug 2021 13:46:45 +0800 Subject: [PATCH 2/5] test(polar): update test case --- test/bar-polar-basic.html | 10 ++++++- test/line-animation.html | 62 --------------------------------------- 2 files changed, 9 insertions(+), 63 deletions(-) diff --git a/test/bar-polar-basic.html b/test/bar-polar-basic.html index 3dab721de3..aefe933fa9 100644 --- a/test/bar-polar-basic.html +++ b/test/bar-polar-basic.html @@ -59,7 +59,7 @@

click axis labe should console log

tooltip: {}, series: [{ type: 'bar', - data: [1, 2, 4, 3, 6, 5, 7], + data: [1, 2, 0, 3, 6, 5, 7], coordinateSystem: 'polar', itemStyle: { normal: { @@ -70,6 +70,14 @@

click axis labe should console log

}] }); + setTimeout(function () { + chart.setOption({ + series: [{ + data: [1, 2, 4, 3, 6, 5, 7] + }] + }); + }); + chart.on('click', function (params) { console.log(params); }); diff --git a/test/line-animation.html b/test/line-animation.html index fd9cdeca2f..011fd69d83 100644 --- a/test/line-animation.html +++ b/test/line-animation.html @@ -49,8 +49,6 @@ } -
-
@@ -402,66 +400,6 @@

Label Animation with animationDelay callback

- - \ No newline at end of file From 75aac8cfeea9ec09e71565ef401ff36d118d1ad1 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Mon, 6 Sep 2021 14:46:12 +0800 Subject: [PATCH 3/5] fix(polar): fix when angleAxis is inverse --- src/chart/bar/BarView.ts | 15 ++++----------- src/layout/barPolar.ts | 10 +++++++++- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts index e790bbc57e..fba170ed47 100644 --- a/src/chart/bar/BarView.ts +++ b/src/chart/bar/BarView.ts @@ -238,6 +238,7 @@ class BarView extends ChartView { .add(function (dataIndex) { const itemModel = data.getItemModel(dataIndex); const layout = getLayout[coord.type](data, dataIndex, itemModel); + // console.log('get', layout.clockwise); if (drawBackground) { createBackground(dataIndex); @@ -746,18 +747,9 @@ const elementCreator: { seriesModel, data, newIndex, layout: SectorLayout, isRadial: boolean, animationModel, axisModel, isUpdate, roundCap ) { - // Keep the same logic with bar in catesion: use end value to control - // direction. Notice that if clockwise is true (by default), the sector - // will always draw clockwisely, no matter whether endAngle is greater - // or less than startAngle. - const clockwise = layout.startAngle <= layout.endAngle; - const ShapeClass = (!isRadial && roundCap) ? Sausage : Sector; - const sector = new ShapeClass({ - shape: defaults({ - clockwise: clockwise - }, layout), + shape: layout, z2: 1 }); @@ -909,7 +901,8 @@ const getLayout: { r0: layout.r0, r: layout.r, startAngle: layout.startAngle, - endAngle: layout.endAngle + endAngle: layout.endAngle, + clockwise: layout.clockwise } as SectorLayout; } }; diff --git a/src/layout/barPolar.ts b/src/layout/barPolar.ts index 081d884634..bc63fcba99 100644 --- a/src/layout/barPolar.ts +++ b/src/layout/barPolar.ts @@ -183,7 +183,15 @@ function barLayoutPolar(seriesType: string, ecModel: GlobalModel, api: Extension // Consider that positive angle is anti-clockwise, // while positive radian of sector is clockwise startAngle: -startAngle * Math.PI / 180, - endAngle: -endAngle * Math.PI / 180 + endAngle: -endAngle * Math.PI / 180, + + /** + * Keep the same logic with bar in catesion: use end value to + * control direction. Notice that if clockwise is true (by + * default), the sector will always draw clockwisely, no matter + * whether endAngle is greater or less than startAngle. + */ + clockwise: startAngle >= endAngle }); } From 97358af3b8a18b2b7b8e3a89b17ef2f2d9314558 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Wed, 8 Sep 2021 13:55:43 +0800 Subject: [PATCH 4/5] test(polar): update visual test --- src/chart/bar/BarView.ts | 1 - test/bar-polar-basic.html | 103 +++++++++++++++++------------ test/runTest/actions/__meta__.json | 1 + 3 files changed, 61 insertions(+), 44 deletions(-) diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts index fba170ed47..dce754a46c 100644 --- a/src/chart/bar/BarView.ts +++ b/src/chart/bar/BarView.ts @@ -238,7 +238,6 @@ class BarView extends ChartView { .add(function (dataIndex) { const itemModel = data.getItemModel(dataIndex); const layout = getLayout[coord.type](data, dataIndex, itemModel); - // console.log('get', layout.clockwise); if (drawBackground) { createBackground(dataIndex); diff --git a/test/bar-polar-basic.html b/test/bar-polar-basic.html index aefe933fa9..d799c3fbbf 100644 --- a/test/bar-polar-basic.html +++ b/test/bar-polar-basic.html @@ -27,62 +27,79 @@ -

click axis labe should console log

-
+

click axis label should console log

+

click update button, sectors should be in the same order

+ +
+

clockwise: true

+
+
+
+

clockwise: false

+
+
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json index 28341e7bd1..5e26a0a452 100644 --- a/test/runTest/actions/__meta__.json +++ b/test/runTest/actions/__meta__.json @@ -21,6 +21,7 @@ "bar-label-rotation": 2, "bar-large": 2, "bar-overflow-time-plot": 3, + "bar-polar-basic": 1, "bar-polar-multi-series": 1, "bar-polar-multi-series-radial": 1, "bar-polar-null-data-radial": 1, From fc507c0713faf53ce50a1bfffc1d2f0af587d366 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Mon, 13 Sep 2021 16:52:19 +0800 Subject: [PATCH 5/5] test(polar): update test case --- test/{bar-polar-basic.html => bar-polar-clockwise.html} | 0 test/runTest/actions/__meta__.json | 2 +- test/runTest/actions/bar-polar-clockwise.json | 1 + 3 files changed, 2 insertions(+), 1 deletion(-) rename test/{bar-polar-basic.html => bar-polar-clockwise.html} (100%) create mode 100644 test/runTest/actions/bar-polar-clockwise.json diff --git a/test/bar-polar-basic.html b/test/bar-polar-clockwise.html similarity index 100% rename from test/bar-polar-basic.html rename to test/bar-polar-clockwise.html diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json index 5e26a0a452..fd4327a6f5 100644 --- a/test/runTest/actions/__meta__.json +++ b/test/runTest/actions/__meta__.json @@ -21,7 +21,7 @@ "bar-label-rotation": 2, "bar-large": 2, "bar-overflow-time-plot": 3, - "bar-polar-basic": 1, + "bar-polar-clockwise": 1, "bar-polar-multi-series": 1, "bar-polar-multi-series-radial": 1, "bar-polar-null-data-radial": 1, diff --git a/test/runTest/actions/bar-polar-clockwise.json b/test/runTest/actions/bar-polar-clockwise.json new file mode 100644 index 0000000000..9dbcc44e11 --- /dev/null +++ b/test/runTest/actions/bar-polar-clockwise.json @@ -0,0 +1 @@ +[{"name":"Action 1","ops":[{"type":"mousedown","time":1234,"x":34,"y":125},{"type":"mouseup","time":1393,"x":34,"y":125},{"time":1394,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1631523020115}] \ No newline at end of file