From 5bfac6fdc992c414b11f0e2d061572626750ebfb Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Thu, 3 Nov 2022 16:14:21 +0800
Subject: [PATCH] add legend in line/bar/area graphs

---
 src/types/dashboard.d.ts                      |  4 ++--
 .../widget/graph-styles/components/Legend.vue |  9 --------
 src/views/dashboard/graphs/Bar.vue            | 14 ++++++++++--
 src/views/dashboard/graphs/Line.vue           | 22 ++++++++++++++-----
 .../dashboard/graphs/components/Legend.vue    | 22 +++++++++++++++++--
 5 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/src/types/dashboard.d.ts b/src/types/dashboard.d.ts
index 9ae422cd..ead63486 100644
--- a/src/types/dashboard.d.ts
+++ b/src/types/dashboard.d.ts
@@ -95,7 +95,7 @@ export type GraphConfig =
 export interface BarConfig {
   type?: string;
   showBackground?: boolean;
-  LegendOptions?: LegendOptions;
+  legend?: LegendOptions;
 }
 export interface LineConfig extends AreaConfig {
   type?: string;
@@ -111,7 +111,7 @@ export interface LineConfig extends AreaConfig {
 export interface AreaConfig {
   type?: string;
   opacity?: number;
-  LegendOptions?: LegendOptions;
+  legend?: LegendOptions;
 }
 
 export interface CardConfig {
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 71f33fac..f22f2ce6 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
@@ -13,15 +13,6 @@ 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>
-    <span class="label">{{ t("showLegend") }}</span>
-    <el-switch
-      v-model="legend.showLegend"
-      active-text="Yes"
-      inactive-text="No"
-      @change="updateLegendConfig({ showLegend: legend.showLegend })"
-    />
-  </div>
   <div>
     <span class="label">{{ t("legendOptions") }}</span>
     <span class="title mr-5">{{ t("asTable") }}</span>
diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue
index b236d284..3afc5aac 100644
--- a/src/views/dashboard/graphs/Bar.vue
+++ b/src/views/dashboard/graphs/Bar.vue
@@ -13,7 +13,10 @@ 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>
-  <Graph :option="option" @select="clickEvent" :filters="config.filters" />
+  <div class="graph">
+    <Graph :option="option" @select="clickEvent" :filters="config.filters" />
+    <Legend :config="config.legend" :data="data" />
+  </div>
 </template>
 <script lang="ts" setup>
 import { computed } from "vue";
@@ -39,7 +42,8 @@ const props = defineProps({
       BarConfig & {
         filters: Filters;
         relatedTrace: RelatedTrace;
-      } & { id: string }
+        id: string;
+      }
     >,
     default: () => ({}),
   },
@@ -160,3 +164,9 @@ function clickEvent(params: EventParams) {
   emits("click", params);
 }
 </script>
+<style lang="scss" scoped>
+.graph {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue
index 61f1147b..77d02c9d 100644
--- a/src/views/dashboard/graphs/Line.vue
+++ b/src/views/dashboard/graphs/Line.vue
@@ -13,12 +13,15 @@ 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>
-  <Graph
-    :option="option"
-    @select="clickEvent"
-    :filters="config.filters"
-    :relatedTrace="config.relatedTrace"
-  />
+  <div class="graph">
+    <Graph
+      :option="option"
+      @select="clickEvent"
+      :filters="config.filters"
+      :relatedTrace="config.relatedTrace"
+    />
+    <Legend :config="config.legend" :data="data" />
+  </div>
 </template>
 <script lang="ts" setup>
 import { computed } from "vue";
@@ -29,6 +32,7 @@ import {
   RelatedTrace,
   Filters,
 } from "@/types/dashboard";
+import Legend from "./components/Legend.vue";
 
 /*global defineProps, defineEmits */
 const emits = defineEmits(["click"]);
@@ -206,3 +210,9 @@ function clickEvent(params: EventParams) {
   emits("click", params);
 }
 </script>
+<style lang="scss" scoped>
+.graph {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/dashboard/graphs/components/Legend.vue b/src/views/dashboard/graphs/components/Legend.vue
index 5a9b1080..077f390c 100644
--- a/src/views/dashboard/graphs/components/Legend.vue
+++ b/src/views/dashboard/graphs/components/Legend.vue
@@ -13,6 +13,24 @@ 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>legend</div>
+  <div></div>
 </template>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { PropType } from "vue";
+import { LegendOptions } from "@/types/dashboard";
+
+/*global defineProps */
+const props = defineProps({
+  data: {
+    type: Object as PropType<{ [key: string]: number[] }>,
+    default: () => ({}),
+  },
+  config: {
+    type: Object as PropType<LegendOptions>,
+    default: () => ({
+      legend: {},
+    }),
+  },
+});
+// console.log(props);
+</script>