add legend component

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;
     }

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;

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,

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"

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>