From d9e67dd6c8c10671f4f497c2b737e4db2a48f8c9 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Sun, 8 Oct 2023 18:20:39 +0800
Subject: [PATCH] fix(sunburst): label rotation flipping

---
 src/chart/sunburst/SunburstPiece.ts | 56 ++++++++++-------------------
 test/sunburst-label-align.html      | 40 +++++++++++++++++++--
 test/sunburst-label.html            |  7 +++-
 3 files changed, 61 insertions(+), 42 deletions(-)

diff --git a/src/chart/sunburst/SunburstPiece.ts b/src/chart/sunburst/SunburstPiece.ts
index 091d8a1d77..92114e11ee 100644
--- a/src/chart/sunburst/SunburstPiece.ts
+++ b/src/chart/sunburst/SunburstPiece.ts
@@ -215,14 +215,20 @@ class SunburstPiece extends graphic.Sector {
             let r;
             const labelPadding = getLabelAttr(labelStateModel, 'distance') || 0;
             let textAlign = getLabelAttr(labelStateModel, 'align');
+            const rotateType = getLabelAttr(labelStateModel, 'rotate');
+            const flipStartAngle = Math.PI * 0.5;
+            const flipEndAngle = Math.PI * 1.5;
+            const midAngleNormal = normalizeRadian(rotateType === 'tangential' ? Math.PI / 2 - midAngle : midAngle);
+
+            // For text that is up-side down, rotate 180 degrees to make sure
+            // it's readable
+            const needsFlip = midAngleNormal > flipStartAngle
+                && !isRadianAroundZero(midAngleNormal - flipStartAngle)
+                && midAngleNormal < flipEndAngle;
+
             if (labelPosition === 'outside') {
                 r = layout.r + labelPadding;
-                if (layout.clockwise) {
-                    textAlign = midAngle > Math.PI / 2 ? 'right' : 'left';
-                }
-                else {
-                    textAlign = midAngle > -Math.PI * 3 / 2 ? 'right' : 'left';
-                }
+                textAlign = needsFlip ? 'right' : 'left';
             }
             else {
                 if (!textAlign || textAlign === 'center') {
@@ -237,29 +243,11 @@ class SunburstPiece extends graphic.Sector {
                 }
                 else if (textAlign === 'left') {
                     r = layout.r0 + labelPadding;
-                    if (layout.clockwise) {
-                        if (midAngle > Math.PI / 2 && !isRadianAroundZero(midAngle - Math.PI / 2)) {
-                            textAlign = 'right';
-                        }
-                    }
-                    else {
-                        if (midAngle > -Math.PI * 3 / 2 && !isRadianAroundZero(midAngle - Math.PI / 2)) {
-                            textAlign = 'right';
-                        }
-                    }
+                    textAlign = needsFlip ? 'right' : 'left';
                 }
                 else if (textAlign === 'right') {
                     r = layout.r - labelPadding;
-                    if (layout.clockwise) {
-                        if (midAngle > Math.PI / 2 && !isRadianAroundZero(midAngle - Math.PI / 2)) {
-                            textAlign = 'left';
-                        }
-                    }
-                    else {
-                        if (midAngle > -Math.PI * 3 / 2 && !isRadianAroundZero(midAngle - Math.PI / 2)) {
-                            textAlign = 'left';
-                        }
-                    }
+                    textAlign = needsFlip ? 'left' : 'right';
                 }
             }
 
@@ -269,22 +257,14 @@ class SunburstPiece extends graphic.Sector {
             state.x = r * dx + layout.cx;
             state.y = r * dy + layout.cy;
 
-            const rotateType = getLabelAttr(labelStateModel, 'rotate');
             let rotate = 0;
             if (rotateType === 'radial') {
-                rotate = normalizeRadian(-midAngle);
-                if (((rotate > Math.PI / 2 && rotate < Math.PI * 1.5))) {
-                    rotate += Math.PI;
-                }
+                rotate = normalizeRadian(-midAngle)
+                    + (needsFlip ? Math.PI : 0);
             }
             else if (rotateType === 'tangential') {
-                rotate = Math.PI / 2 - midAngle;
-                if (rotate > Math.PI / 2) {
-                    rotate -= Math.PI;
-                }
-                else if (rotate < -Math.PI / 2) {
-                    rotate += Math.PI;
-                }
+                rotate = normalizeRadian(Math.PI / 2 - midAngle)
+                    + (needsFlip ? Math.PI : 0);
             }
             else if (zrUtil.isNumber(rotateType)) {
                 rotate = rotateType * Math.PI / 180;
diff --git a/test/sunburst-label-align.html b/test/sunburst-label-align.html
index 0bb6e3a637..4522c75ba8 100644
--- a/test/sunburst-label-align.html
+++ b/test/sunburst-label-align.html
@@ -41,9 +41,7 @@
 
     <div id="main0"></div>
     <div id="main1"></div>
-
-
-
+    <div id="main2"></div>
 
 
 
@@ -1158,6 +1156,42 @@
             });
         });
     </script>
+
+
+
+    <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+
+            option = {
+                series: [
+                    {
+                        type: 'sunburst',
+                        data: new Array(11).fill(0).map((it, index) => ({
+                            name: 'aaa' + index,
+                            value: 1
+                        })),
+                        levels: [{}, { r0: 40, r: 100, label: { position: 'outside'}}]
+                    }
+                ]
+            };
+
+            var chart = testHelper.create(echarts, 'main2', {
+                title: [
+                    'Put label in the center if it\'s a circle'
+                ],
+                option: option
+                // height: 300,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+        });
+    </script>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/test/sunburst-label.html b/test/sunburst-label.html
index 51f2c14ef1..7895a98f84 100644
--- a/test/sunburst-label.html
+++ b/test/sunburst-label.html
@@ -197,7 +197,12 @@
                     radius: [0, '90%'],
                     label: {
                         rotate: 'radial'
-                    }
+                    },
+                    levels: [{}, {
+                        label: {
+                            rotate: 'tangential'
+                        }
+                    }]
                 }
             };
             var chart = testHelper.create(echarts, 'main1', {