From 0ce289731a0d40602930a784a3e205d21841f61c Mon Sep 17 00:00:00 2001
From: Peter Pan <littlepanzh@gmail.com>
Date: Mon, 21 Sep 2020 21:00:58 +0800
Subject: [PATCH] fix: unnecessary render of histogram chart axis label (#824)

---
 frontend/packages/core/package.json           |   1 +
 .../packages/core/src/hooks/useECharts.ts     | 147 +++++++++---------
 frontend/yarn.lock                            |   5 +
 3 files changed, 81 insertions(+), 72 deletions(-)

diff --git a/frontend/packages/core/package.json b/frontend/packages/core/package.json
index 2f8c2cb6..d186d0d1 100644
--- a/frontend/packages/core/package.json
+++ b/frontend/packages/core/package.json
@@ -74,6 +74,7 @@
         "@babel/preset-env": "7.11.5",
         "@babel/preset-react": "7.10.4",
         "@baiducloud/sdk": "1.0.0-rc.22",
+        "@simbathesailor/use-what-changed": "0.1.25",
         "@snowpack/app-scripts-react": "1.10.0",
         "@snowpack/plugin-dotenv": "2.0.1",
         "@snowpack/plugin-optimize": "0.2.1",
diff --git a/frontend/packages/core/src/hooks/useECharts.ts b/frontend/packages/core/src/hooks/useECharts.ts
index a5278e20..fde7b1b7 100644
--- a/frontend/packages/core/src/hooks/useECharts.ts
+++ b/frontend/packages/core/src/hooks/useECharts.ts
@@ -146,7 +146,77 @@ export const Wrapper = styled.div`
 export const useChartTheme = (gl?: boolean) => {
     const theme = useTheme();
     const tt = useMemo(() => themes[theme], [theme]);
-    if (gl) {
+    const result = useMemo(() => {
+        if (gl) {
+            return {
+                title: {
+                    textStyle: {
+                        color: tt.textColor
+                    }
+                },
+                tooltip: {
+                    backgroundColor: tt.tooltipBackgroundColor,
+                    borderColor: tt.tooltipBackgroundColor,
+                    textStyle: {
+                        color: tt.tooltipTextColor
+                    }
+                },
+                xAxis3D: {
+                    nameTextStyle: {
+                        color: tt.textLighterColor
+                    },
+                    axisLabel: {
+                        color: tt.textLighterColor
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: tt.borderColor
+                        }
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: tt.borderColor
+                        }
+                    }
+                },
+                yAxis3D: {
+                    nameTextStyle: {
+                        color: tt.textLighterColor
+                    },
+                    axisLabel: {
+                        color: tt.textLighterColor
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: tt.borderColor
+                        }
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: tt.borderColor
+                        }
+                    }
+                },
+                zAxis3D: {
+                    nameTextStyle: {
+                        color: tt.textLighterColor
+                    },
+                    axisLabel: {
+                        color: tt.textLighterColor
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: tt.borderColor
+                        }
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: tt.borderColor
+                        }
+                    }
+                }
+            };
+        }
         return {
             title: {
                 textStyle: {
@@ -160,7 +230,7 @@ export const useChartTheme = (gl?: boolean) => {
                     color: tt.tooltipTextColor
                 }
             },
-            xAxis3D: {
+            xAxis: {
                 nameTextStyle: {
                     color: tt.textLighterColor
                 },
@@ -178,25 +248,7 @@ export const useChartTheme = (gl?: boolean) => {
                     }
                 }
             },
-            yAxis3D: {
-                nameTextStyle: {
-                    color: tt.textLighterColor
-                },
-                axisLabel: {
-                    color: tt.textLighterColor
-                },
-                axisLine: {
-                    lineStyle: {
-                        color: tt.borderColor
-                    }
-                },
-                splitLine: {
-                    lineStyle: {
-                        color: tt.borderColor
-                    }
-                }
-            },
-            zAxis3D: {
+            yAxis: {
                 nameTextStyle: {
                     color: tt.textLighterColor
                 },
@@ -215,55 +267,6 @@ export const useChartTheme = (gl?: boolean) => {
                 }
             }
         };
-    }
-    return {
-        title: {
-            textStyle: {
-                color: tt.textColor
-            }
-        },
-        tooltip: {
-            backgroundColor: tt.tooltipBackgroundColor,
-            borderColor: tt.tooltipBackgroundColor,
-            textStyle: {
-                color: tt.tooltipTextColor
-            }
-        },
-        xAxis: {
-            nameTextStyle: {
-                color: tt.textLighterColor
-            },
-            axisLabel: {
-                color: tt.textLighterColor
-            },
-            axisLine: {
-                lineStyle: {
-                    color: tt.borderColor
-                }
-            },
-            splitLine: {
-                lineStyle: {
-                    color: tt.borderColor
-                }
-            }
-        },
-        yAxis: {
-            nameTextStyle: {
-                color: tt.textLighterColor
-            },
-            axisLabel: {
-                color: tt.textLighterColor
-            },
-            axisLine: {
-                lineStyle: {
-                    color: tt.borderColor
-                }
-            },
-            splitLine: {
-                lineStyle: {
-                    color: tt.borderColor
-                }
-            }
-        }
-    };
+    }, [tt, gl]);
+    return result;
 };
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 7c88b7f8..4343c34c 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2549,6 +2549,11 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@simbathesailor/use-what-changed@0.1.25":
+  version "0.1.25"
+  resolved "https://registry.yarnpkg.com/@simbathesailor/use-what-changed/-/use-what-changed-0.1.25.tgz#adf9373fb8d71dd8ab41c7cd789d8dd1fd80a058"
+  integrity sha512-hBzjQYMaSd/IFiFW3XEs4V+Cjklv65XSvtS1nCCsX07J5PjQWXR52AL+fZfJgw52RvgyrVFVRcT611/UffBmhg==
+
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
-- 
GitLab