feat: update graphs

src/views/dashboard/configuration/WidgetConfig.vue

@@ -20,12 +20,12 @@ limitations under the License. -->
         :intervalTime="appStoreWithOut.intervalTime"
         :data="source"
       />
-      <span v-show="!source">No Data</span>
+      <span v-show="!source">{{ t("noData") }}</span>
     </div>
     <div class="config">
       <div class="metrics item">
-        <label>Graph your metric</label>
-        <div class="name">Metrics Name</div>
+        <label>{{ t("graphMetric") }}</label>
+        <div class="name">{{ t("metricName") }}</div>
         <Selector
           :value="states.metrics"
           :options="metricOpts"
@@ -46,7 +46,7 @@ limitations under the License. -->
         />
       </div>
       <div class="visualization item">
-        <label>Select you visualization</label>
+        <label>{{ t("selectVisualization") }}</label>
         <div class="chart-types">
           <span
             v-for="(type, index) in ChartTypes"
@@ -148,7 +148,8 @@ export default defineComponent({
       { value: "service_mq_consume_count", label: "service_mq_consume_count" },
     ];
     const source = {
-      count: [1, 2, 3, 4, 5, 6, 7, 3, 4, 5, 2, 1, 6, 9],
+      count: [1, 2, 5, 4, 5, 6, 7, 3, 4, 5, 2, 1, 6, 9],
+      avg: [3, 2, 4, 4, 5, 6, 5, 3, 4, 1, 2, 1, 6, 10],
     };
     return {
       states,

src/views/dashboard/graphs/Bar.vue

@@ -26,8 +26,16 @@ const props = defineProps({
     default: () => ({}),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
-  theme: { type: String, default: "dark" },
+  theme: { type: String, default: "light" },
   itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
+  config: {
+    type: Object as PropType<{
+      theme: string;
+      showBackground: boolean;
+      barMaxWidth: number;
+    }>,
+    default: () => ({ theme: "light", showBackground: true, barMaxWidth: 30 }),
+  },
 });
 /*global Nullable */
 const chart = ref<Nullable<HTMLElement>>(null);
@@ -72,12 +80,13 @@ function getOption() {
       name: i,
       type: "bar",
       symbol: "none",
-      barMaxWidth: 10,
-      stack: "总量",
+      barWidth: props.config.barMaxWidth,
+      stack: "sum",
       lineStyle: {
         width: 1.5,
         type: "dotted",
       },
+      showBackground: props.config.showBackground,
       markArea:
         index === 0
           ? {
@@ -130,13 +139,13 @@ function getOption() {
     color,
     tooltip: {
       trigger: "axis",
-      backgroundColor: "rgb(50,50,50)",
-      textStyle: {
-        fontSize: 13,
-        color: "#ccc",
-      },
-      enterable: true,
-      extraCssText: "max-height: 300px; overflow: auto;",
+      // backgroundColor: "rgb(50,50,50)",
+      // textStyle: {
+      //   fontSize: 13,
+      //   color: "#ccc",
+      // },
+      // enterable: true,
+      // extraCssText: "max-height: 300px; overflow: auto;",
     },
     legend: {
       type: "scroll",
@@ -146,7 +155,7 @@ function getOption() {
       left: 0,
       itemWidth: 12,
       textStyle: {
-        color: props.theme === "dark" ? "#fff" : "#333",
+        color: props.config.theme === "dark" ? "#fff" : "#333",
       },
     },
     grid: {

src/views/dashboard/graphs/Line.vue

@@ -27,7 +27,7 @@ const props = defineProps({
   },
   type: { type: String, default: "" },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
-  theme: { type: String, default: "dark" },
+  theme: { type: String, default: "light" },
   itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
 });
 /*global Nullable */