add legend in line/bar/area graphs

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 {

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>

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>
+  <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>

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>
+  <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>

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>