feat: add custom config for Bar, Line, Area

src/views/dashboard/graphs/Area.vue

@@ -14,12 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 
 <template>
-  <Line :data="data" :intervalTime="intervalTime" :type="'areaChart'" />
+  <Line :data="data" :intervalTime="intervalTime" :config="config" />
 </template>
 <script lang="ts" setup>
 import { defineProps } from "vue";
 import type { PropType } from "vue";
 import Line from "./Line.vue";
+import { AreaConfig } from "@/types/dashboard";
 
 defineProps({
   data: {
@@ -27,5 +28,9 @@ defineProps({
     default: () => ({}),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
+  config: {
+    type: Object as PropType<AreaConfig>,
+    default: () => ({}),
+  },
 });
 </script>

src/views/dashboard/graphs/Bar.vue

@@ -19,6 +19,7 @@ limitations under the License. -->
 import { defineProps, computed } from "vue";
 import type { PropType } from "vue";
 import { Event } from "@/types/events";
+import { BarConfig } from "@/types/dashboard";
 
 const props = defineProps({
   data: {
@@ -29,12 +30,8 @@ const props = defineProps({
   theme: { type: String, default: "light" },
   itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
   config: {
-    type: Object as PropType<{
-      theme: string;
-      showBackground: boolean;
-      barWidth: number;
-    }>,
-    default: () => ({ theme: "light", showBackground: true, barWidth: 20 }),
+    type: Object as PropType<BarConfig>,
+    default: () => ({}),
   },
 });
 const option = computed(() => getOption());
@@ -156,7 +153,7 @@ function getOption() {
       left: 0,
       itemWidth: 12,
       textStyle: {
-        color: props.config.theme === "dark" ? "#fff" : "#333",
+        color: "#333",
       },
     },
     grid: {

src/views/dashboard/graphs/Line.vue

@@ -19,16 +19,25 @@ limitations under the License. -->
 import { defineProps, computed } from "vue";
 import type { PropType } from "vue";
 import { Event } from "@/types/events";
+import { LineConfig } from "@/types/dashboard";
 
 const props = defineProps({
   data: {
     type: Object as PropType<{ [key: string]: number[] }>,
     default: () => ({}),
   },
-  type: { type: String, default: "" },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
   theme: { type: String, default: "light" },
   itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
+  config: {
+    type: Object as PropType<LineConfig>,
+    default: () => ({
+      step: false,
+      smooth: false,
+      showSymbol: false,
+      opacity: 0.4,
+    }),
+  },
 });
 const option = computed(() => getOption());
 function getOption() {
@@ -68,6 +77,9 @@ function getOption() {
       type: "line",
       symbol: "none",
       barMaxWidth: 10,
+      step: props.config.step,
+      smooth: props.config.smooth,
+      showSymbol: true,
       lineStyle: {
         width: 1.5,
         type: "solid",
@@ -90,9 +102,9 @@ function getOption() {
             }
           : undefined,
     };
-    if (props.type === "areaChart") {
+    if (props.config.type === "Area") {
       serie.areaStyle = {
-        opacity: 0.4,
+        opacity: props.config.opacity || 0.4,
       };
     }
     return serie;