add legend config

src/locales/lang/en.ts

@@ -168,6 +168,9 @@ const msg = {
   maxTraceDuration: "Maximum Duration",
   minTraceDuration: "Minimum Duration",
   legendOptions: "Legend Options",
+  showLegend: "Show Legend",
+  asTable: "As Table",
+  toTheRight: "To The Right",
   seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",

src/locales/lang/es.ts

@@ -172,6 +172,9 @@ const msg = {
   maxTraceDuration: "Duración máxima",
   minTraceDuration: "Duración mínima",
   legendOptions: "Opciones de leyenda",
+  showLegend: "Mostrar leyenda",
+  asTable: "Como tabla",
+  toTheRight: "Derecha",
   second: "s",
   yearSuffix: "Año",
   monthsHead: "Ene_Feb_Mar_Abr_May_Jun_Jul_Ago_Set_Oct_Nov_Dic",

src/locales/lang/zh.ts

@@ -165,6 +165,9 @@ const msg = {
   maxTraceDuration: "最大持续时间",
   minTraceDuration: "最小持续时间",
   legendOptions: "图例选项",
+  showLegend: "显示图例",
+  asTable: "作为表格",
+  toTheRight: "在右边",
   seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",

src/views/dashboard/configuration/widget/graph-styles/Line.vue

@@ -13,13 +13,36 @@ 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 class="legend">
     <span class="label">{{ t("legendOptions") }}</span>
+    <span class="label">{{ t("showLegend") }}</span>
     <el-switch
-      v-model="graph.showLegend"
+      v-model="legend.showLegend"
       active-text="Yes"
       inactive-text="No"
-      @change="updateConfig({ showLegend: graph.showLegend })"
+      @change="updateLegendConfig({ showLegend: legend.showLegend })"
+    />
+    <span class="label">{{ t("asTable") }}</span>
+    <el-switch
+      v-model="legend.asTable"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateLegendConfig({ asTable: legend.asTable })"
+    />
+    <span class="label">{{ t("toTheRight") }}</span>
+    <el-switch
+      v-model="legend.toTheRight"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateLegendConfig({ toTheRight: legend.toTheRight })"
+    />
+    <span class="label">{{ t("width") }}</span>
+    <el-input
+      v-model="legend.width"
+      class="input"
+      size="small"
+      placeholder="Please input the width"
+      @change="updateLegendConfig({ toTheRight: legend.width })"
     />
   </div>
   <div>
@@ -79,6 +102,7 @@ const graph = computed(() => dashboardStore.selectedGrid.graph || {});
 const smooth = ref(graph.value.smooth);
 const showSymbol = ref(graph.value.showSymbol);
 const step = ref(graph.value.step);
+const legend = computed(() => graph.value.legend || {});
 
 function updateConfig(param: { [key: string]: unknown }) {
   const graph = {
@@ -87,6 +111,17 @@ function updateConfig(param: { [key: string]: unknown }) {
   };
   dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
 }
+
+function updateLegendConfig(param: { [key: string]: unknown }) {
+  const g = {
+    ...dashboardStore.selectedGrid.graph,
+    legend: {
+      ...dashboardStore.selectedGrid.graph.legend,
+      ...param,
+    },
+  };
+  dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, g });
+}
 </script>
 <style lang="scss" scoped>
 .label {