feat: add custom config for Bar, Line, Area

src/types/dashboard.ts

@@ -41,14 +41,20 @@ export interface StandardConfig {
   min?: string;
 }
 
-export type GraphConfig = BarConfig | LineConfig;
+type GraphConfig = BarConfig | LineConfig;
-interface BarConfig {
+export interface BarConfig {
   type?: string;
   showBackground?: boolean;
   barWidth?: number;
 }
-interface LineConfig {
+export interface LineConfig extends AreaConfig {
   type?: string;
-  showBackground?: boolean;
+  smooth?: boolean;
-  barWidth?: number;
+  showSymbol?: boolean;
+  step?: boolean;
+}
+
+export interface AreaConfig {
+  type?: string;
+  opacity?: number;
 }

src/views/dashboard/configuration/ConfigEdit.vue

@@ -21,6 +21,7 @@ limitations under the License. -->
           :is="states.chartType"
           :intervalTime="appStoreWithOut.intervalTime"
           :data="states.source"
+          :config="states.graph"
         />
         <div v-show="!states.chartType" class="no-data">{{ t("noData") }}</div>
       </div>
@@ -66,7 +67,11 @@ limitations under the License. -->
           </div>
         </el-collapse-item>
         <el-collapse-item :title="t('graphStyles')" name="3">
-          <component :is="`${states.chartType}Config`" :config="states.graph" />
+          <component
+            :is="`${states.chartType}Config`"
+            :config="states.graph"
+            @update="updateGraphOptions"
+          />
         </el-collapse-item>
         <el-collapse-item :title="t('widgetOptions')" name="4">
           <WidgetOptions
@@ -212,6 +217,14 @@ export default defineComponent({
       states.widget[param.label] = param.value;
     }
 
+    function updateGraphOptions(param: { label: string; value: unknown }) {
+      console.log(param);
+      states.graph = {
+        ...states.graph,
+        ...param,
+      };
+    }
+
     async function queryMetrics() {
       const json = await dashboardStore.fetchMetricValue(
         dashboardStore.selectedGrid
@@ -224,7 +237,7 @@ export default defineComponent({
         return;
       }
       const metricVal = json.data.readMetricsValues.values.values.map(
-        (d: { value: number }) => d.value
+        (d: { value: number }) => d.value + 1
       );
       const m = states.metrics[0];
       if (!m) {
@@ -270,7 +283,7 @@ export default defineComponent({
       metricOpts,
       updateWidgetOptions,
       configHeight,
-      dashboardStore,
+      updateGraphOptions,
       applyConfig,
       loading,
     };

src/views/dashboard/configuration/graph-styles/Area.vue

@@ -14,32 +14,36 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div>
-    <span class="label">Bar Width</span>
+    <span class="label">Area Opacity</span>
     <el-slider
       class="bar-width"
-      v-model="barWidth"
+      v-model="opacity"
       show-input
       input-size="small"
+      :min="0.1"
+      :max="1"
+      :step="0.1"
+      @change="updateConfig({ opacity })"
     />
   </div>
-  <div>
-    <span class="label">Show Background</span>
-    <el-switch v-model="showBackground" active-text="Yes" inactive-text="No" />
-  </div>
 </template>
 <script lang="ts" setup>
-import { defineProps, ref } from "vue";
+import { defineProps, ref, defineEmits } from "vue";
 import type { PropType } from "vue";
-import { BarConfig } from "./types";
+import { AreaConfig } from "@/types/dashboard";
 
 const props = defineProps({
   config: {
-    type: Object as PropType<BarConfig>,
+    type: Object as PropType<AreaConfig>,
-    default: () => ({ showBackground: true, barWidth: 30 }),
+    default: () => ({ opacity: 0.4 }),
   },
 });
-const barWidth = ref(props.config.barWidth);
+const emits = defineEmits(["update"]);
-const showBackground = ref(props.config.showBackground);
+const opacity = ref(props.config.opacity);
+
+function updateConfig(param: { [key: string]: unknown }) {
+  emits("update", param);
+}
 </script>
 <style lang="scss" scoped>
 .bar-width {

src/views/dashboard/configuration/graph-styles/Bar.vue

@@ -20,17 +20,23 @@ limitations under the License. -->
       v-model="barWidth"
       show-input
       input-size="small"
+      @change="changeConfig({ barWidth })"
     />
   </div>
   <div>
     <span class="label">Show Background</span>
-    <el-switch v-model="showBackground" active-text="Yes" inactive-text="No" />
+    <el-switch
+      v-model="showBackground"
+      active-text="Yes"
+      inactive-text="No"
+      @change="changeConfig({ showBackground })"
+    />
   </div>
 </template>
 <script lang="ts" setup>
-import { defineProps, ref } from "vue";
+import { defineProps, ref, defineEmits } from "vue";
 import type { PropType } from "vue";
-import { BarConfig } from "./types";
+import { BarConfig } from "@/types/dashboard";
 
 const props = defineProps({
   config: {
@@ -38,8 +44,13 @@ const props = defineProps({
     default: () => ({ showBackground: true, barWidth: 30 }),
   },
 });
-const barWidth = ref(props.config.barWidth);
+const emits = defineEmits(["update"]);
-const showBackground = ref(props.config.showBackground);
+const barWidth = ref(props.config.barWidth || 30);
+const showBackground = ref(props.config.showBackground || false);
+
+function changeConfig(param: { [key: string]: unknown }) {
+  emits("update", param);
+}
 </script>
 <style lang="scss" scoped>
 .bar-width {

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

@@ -14,32 +14,52 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div>
-    <span class="label">Bar Width</span>
+    <span class="label">Smooth</span>
-    <el-slider
+    <el-switch
-      class="bar-width"
+      v-model="smooth"
-      v-model="barWidth"
+      active-text="Yes"
-      show-input
+      inactive-text="No"
-      input-size="small"
+      @change="updateConfig({ smooth })"
     />
   </div>
   <div>
-    <span class="label">Show Background</span>
+    <span class="label">Show Symbol</span>
-    <el-switch v-model="showBackground" active-text="Yes" inactive-text="No" />
+    <el-switch
+      v-model="showSymbol"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateConfig({ showSymbol })"
+    />
+  </div>
+  <div>
+    <span class="label">Step</span>
+    <el-switch
+      v-model="step"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateConfig({ step })"
+    />
   </div>
 </template>
 <script lang="ts" setup>
-import { defineProps, ref } from "vue";
+import { defineProps, ref, defineEmits } from "vue";
 import type { PropType } from "vue";
-import { BarConfig } from "./types";
+import { LineConfig } from "@/types/dashboard";
 
 const props = defineProps({
   config: {
-    type: Object as PropType<BarConfig>,
+    type: Object as PropType<LineConfig>,
     default: () => ({ showBackground: true, barWidth: 30 }),
   },
 });
-const barWidth = ref(props.config.barWidth);
+const emits = defineEmits(["update"]);
-const showBackground = ref(props.config.showBackground);
+const smooth = ref(props.config.smooth);
+const showSymbol = ref(props.config.showSymbol);
+const step = ref(props.config.step);
+
+function updateConfig(param: { [key: string]: unknown }) {
+  emits("update", param);
+}
 </script>
 <style lang="scss" scoped>
 .bar-width {

src/views/dashboard/configuration/graph-styles/types.ts

@@ -1,20 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * 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.
- */
-export interface BarConfig {
-  showBackground: boolean;
-  barWidth: number;
-}

src/views/dashboard/data.ts

@@ -35,13 +35,13 @@ export const DefaultGraphConfig: { [key: string]: any } = {
   },
   Line: {
     type: "Line",
-    showBackground: true,
+    step: false,
-    barWidth: 30,
+    smooth: false,
+    showSymbol: false,
   },
   Area: {
     type: "Area",
-    showBackground: true,
+    opacity: 0.4,
-    barWidth: 30,
   },
 };
 

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<{
+    type: Object as PropType<BarConfig>,
-      theme: string;
+    default: () => ({}),
-      showBackground: boolean;
-      barWidth: number;
-    }>,
-    default: () => ({ theme: "light", showBackground: true, barWidth: 20 }),
   },
 });
 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;