refactor

src/views/dashboard/graphs/Bar.vue

@@ -75,6 +75,28 @@ limitations under the License. -->
       };
     });
     const color: string[] = chartColors();
+    const legend =
+      appStore.theme === Themes.Dark
+        ? {
+            pageIconColor: "#ccc",
+            pageIconInactiveColor: "#444",
+            backgroundColor: "#333",
+            borderColor: "#fff",
+            textStyle: {
+              fontSize: 12,
+              color: "#eee",
+            },
+          }
+        : {
+            pageIconColor: "#666",
+            pageIconInactiveColor: "#ccc",
+            backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
+            borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
+            textStyle: {
+              fontSize: 12,
+              color: "#333",
+            },
+          };
     return {
       color,
       tooltip: {
@@ -94,12 +116,7 @@ limitations under the License. -->
         top: 0,
         left: 0,
         itemWidth: 12,
-        backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
+        ...legend,
-        borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
-        textStyle: {
-          fontSize: 12,
-          color: appStore.theme === Themes.Dark ? "#eee" : "#333",
-        },
       },
       grid: {
         top: keys.length === 1 ? 15 : 40,

src/views/dashboard/graphs/Line.vue

@@ -123,7 +123,24 @@ limitations under the License. -->
         color: appStore.theme === Themes.Dark ? "#eee" : "#333",
       },
     };
-
+    const legend =
+      appStore.theme === Themes.Dark
+        ? {
+            pageIconColor: "#ccc",
+            pageIconInactiveColor: "#444",
+            textStyle: {
+              fontSize: 12,
+              color: "#eee",
+            },
+          }
+        : {
+            pageIconColor: "#666",
+            pageIconInactiveColor: "#ccc",
+            textStyle: {
+              fontSize: 12,
+              color: "#333",
+            },
+          };
     return {
       color,
       tooltip: props.config.smallTips ? tips : tooltip,
@@ -134,11 +151,7 @@ limitations under the License. -->
         top: 0,
         left: 0,
         itemWidth: 12,
-        pageIconColor: appStore.theme === Themes.Dark ? "#ccc" : "#666",
+        ...legend,
-        pageIconInactiveColor: appStore.theme === Themes.Dark ? "#444" : "#ccc",
-        textStyle: {
-          color: appStore.theme === Themes.Dark ? "#fff" : "#333",
-        },
         selector: [
           {
             type: "all",