From f0fcc63ff5db4f89769cd062ba2ca0a10e9d73b7 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Mon, 7 Nov 2022 16:23:36 +0800
Subject: [PATCH] add legend component

---
 src/hooks/useLegendProcessor.ts                   |  3 +++
 src/types/dashboard.d.ts                          |  2 +-
 .../widget/graph-styles/components/Legend.vue     | 15 +++++++++++----
 src/views/dashboard/graphs/Line.vue               |  2 +-
 src/views/dashboard/graphs/components/Legend.vue  |  4 ++--
 5 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/hooks/useLegendProcessor.ts b/src/hooks/useLegendProcessor.ts
index 3c0f3aa9..95688ec4 100644
--- a/src/hooks/useLegendProcessor.ts
+++ b/src/hooks/useLegendProcessor.ts
@@ -18,6 +18,9 @@ import { LegendOptions } from "@/types/dashboard";
 
 export default function useLegendProcess() {
   function showEchartsLegend(keys: string[], legend?: LegendOptions) {
+    if (legend && !legend.show === undefined) {
+      return legend.show;
+    }
     if (keys.length === 1) {
       return false;
     }
diff --git a/src/types/dashboard.d.ts b/src/types/dashboard.d.ts
index ead63486..a74d0819 100644
--- a/src/types/dashboard.d.ts
+++ b/src/types/dashboard.d.ts
@@ -183,7 +183,7 @@ export type EventParams = {
   color: string;
 };
 export type LegendOptions = {
-  showLegend: boolean;
+  show: boolean;
   total: boolean;
   min: boolean;
   max: boolean;
diff --git a/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue b/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
index 9d76c5e6..f5310413 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
@@ -14,6 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div>
+    <span class="label mr-5">{{ t("showLegend") }}</span>
+    <el-switch
+      v-model="legend.show"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateLegendConfig({ show: legend.show })"
+    />
+  </div>
+  <div>
+    <span class="label">{{ t("legendOptions") }}</span>
     <span class="label mr-5">{{ t("asTable") }}</span>
     <el-switch
       v-model="legend.asTable"
@@ -21,9 +31,6 @@ limitations under the License. -->
       inactive-text="No"
       @change="updateLegendConfig({ asTable: legend.asTable })"
     />
-  </div>
-  <div>
-    <span class="label">{{ t("legendOptions") }}</span>
     <span class="title ml-20 mr-5">{{ t("toTheRight") }}</span>
     <el-switch
       v-model="legend.toTheRight"
@@ -82,7 +89,7 @@ const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 const graph = computed(() => dashboardStore.selectedGrid.graph || {});
 const legend = reactive<LegendOptions>({
-  showLegend: true,
+  show: true,
   total: false,
   min: false,
   max: false,
diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue
index 67e5b6e1..77fbd0c4 100644
--- a/src/views/dashboard/graphs/Line.vue
+++ b/src/views/dashboard/graphs/Line.vue
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="graph">
+  <div class="graph flex-v">
     <Graph
       :option="option"
       @select="clickEvent"
diff --git a/src/views/dashboard/graphs/components/Legend.vue b/src/views/dashboard/graphs/components/Legend.vue
index 077f390c..6383aca5 100644
--- a/src/views/dashboard/graphs/components/Legend.vue
+++ b/src/views/dashboard/graphs/components/Legend.vue
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div></div>
+  <div>legend</div>
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";
@@ -32,5 +32,5 @@ const props = defineProps({
     }),
   },
 });
-// console.log(props);
+console.log(props);
 </script>