feat: add custom config for graphs

src/views/dashboard/graphs/Card.vue

@@ -14,44 +14,41 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 
 <template>
-  <div class="chart-card">
-    <div v-for="(item, index) in data" :key="index" class="card-detail">
-      <span class="b" :style="`color: ${getColors}`">{{
-        typeof item.avgNum === "string"
-          ? item.avgNum
-          : isNaN(item.avgNum)
-          ? null
-          : item.avgNum.toFixed(2)
-      }}</span>
-    </div>
+  <div class="chart-card" :style="{ fontSize: `${config.fontSize}px` }">
+    {{
+      typeof data[key] === "string"
+        ? data[key]
+        : isNaN(data[key])
+        ? null
+        : data[key].toFixed(2)
+    }}
+    <span v-show="config.showUint">{{ standard.unit }}</span>
   </div>
 </template>
 <script lang="ts" setup>
-import type { PropType } from "vue";
-import { defineProps, computed } from "vue";
+import { computed, PropType } from "vue";
+import { defineProps } from "vue";
+import { CardConfig, StandardConfig } from "@/types/dashboard";
+
 const props = defineProps({
   data: {
-    type: Object as PropType<{ [key: string]: number[] }>,
+    type: Object as PropType<{ [key: string]: number }>,
     default: () => ({}),
   },
-  theme: { type: String, default: "" },
-});
-
-const getColors = computed(() => {
-  return props.theme === "dark" ? "#eee" : "#333";
+  config: {
+    type: Object as PropType<CardConfig>,
+    default: () => ({ fontSize: 12, showUint: true }),
+  },
+  standard: {
+    type: Object as PropType<StandardConfig>,
+    default: () => ({ unit: "" }),
+  },
 });
+const key = computed(() => Object.keys(props.data)[0]);
 </script>
 <style lang="scss" scoped>
 .chart-card {
-  font-size: 14px;
+  box-sizing: border-box;
   color: #333;
 }
-
-.card-detail {
-  span:first-child {
-    padding-right: 8px;
-    box-sizing: border-box;
-    color: #666;
-  }
-}
 </style>

src/views/dashboard/graphs/EndpointList.vue

@@ -18,7 +18,6 @@ limitations under the License. -->
   </el-table>
 </template>
 <script setup lang="ts">
-import { ElTable, ElTableColumn } from "element-plus";
 import { defineProps } from "vue";
 import type { PropType } from "vue";
 
@@ -27,6 +26,9 @@ defineProps({
     type: Array as PropType<{ label: string; value: string }[]>,
     default: () => [],
   },
-  theme: { type: String, default: "" },
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 });
 </script>

src/views/dashboard/graphs/HeatMap.vue

@@ -16,9 +16,9 @@ limitations under the License. -->
   <Graph :option="option" />
 </template>
 <script lang="ts" setup>
-import { defineProps, ref, computed } from "vue";
+import { defineProps, computed } from "vue";
 import type { PropType } from "vue";
-import { Event } from "@/types/events";
+import { StandardConfig } from "@/types/dashboard";
 
 const props = defineProps({
   data: {
@@ -26,15 +26,15 @@ const props = defineProps({
     default: () => ({}),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
-  theme: { type: String, default: "dark" },
-  itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
-  itemConfig: {
-    type: Object as PropType<{ unit: string }>,
+  config: {
+    type: Object as PropType<any>,
+    default: () => ({}),
+  },
+  standard: {
+    type: Object as PropType<StandardConfig>,
     default: () => ({}),
   },
 });
-/*global Nullable */
-const chart = ref<Nullable<HTMLElement>>(null);
 const option = computed(() => getOption());
 function getOption() {
   const source = (props.data.nodes || []).map((d: number[]) => d[2]);
@@ -66,7 +66,7 @@ function getOption() {
     tooltip: {
       position: "top",
       formatter: (a: any) =>
-        `${a.data[1] * 100}${props.itemConfig.unit}  [ ${a.data[2]} ]`,
+        `${a.data[1] * 100}${props.standard.unit}  [ ${a.data[2]} ]`,
       textStyle: {
         fontSize: 13,
         color: "#ccc",

src/views/dashboard/graphs/InstanceList.vue

@@ -18,7 +18,6 @@ limitations under the License. -->
   </el-table>
 </template>
 <script setup lang="ts">
-import { ElTable, ElTableColumn } from "element-plus";
 import { defineProps } from "vue";
 import type { PropType } from "vue";
 
@@ -27,6 +26,9 @@ defineProps({
     type: Array as PropType<{ label: string; value: string }[]>,
     default: () => [],
   },
-  theme: { type: String, default: "" },
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 });
 </script>

src/views/dashboard/graphs/Pie.vue

@@ -24,7 +24,10 @@ const props = defineProps({
     type: Array as PropType<{ name: string; value: number }[]>,
     default: () => [],
   },
-  theme: { type: String, default: "dark" },
+  config: {
+    type: Object as PropType<{ sortOrder: string }>,
+    default: () => ({}),
+  },
 });
 const option = computed(() => getOption());
 function getOption() {
@@ -40,7 +43,7 @@ function getOption() {
       left: 0,
       itemWidth: 12,
       textStyle: {
-        color: props.theme === "dark" ? "#fff" : "#333",
+        color: "#333",
       },
     },
     series: [

src/views/dashboard/graphs/Table.vue

@@ -19,28 +19,26 @@ limitations under the License. -->
       <div
         class="row header flex-h"
         :style="`width: ${nameWidth + initWidth}px`"
-        :class="{ dark: theme === 'dark' }"
       >
         <div class="name" :style="`width: ${nameWidth}px`">
-          {{ item.tableHeaderCol1 || $t("name") }}
+          {{ config.tableHeaderCol1 || $t("name") }}
           <i class="r cp" ref="draggerName"
             ><rk-icon icon="settings_ethernet"
           /></i>
         </div>
-        <div class="value-col" v-if="showTableValues">
-          {{ item.tableHeaderCol2 || $t("value") }}
+        <div class="value-col" v-if="config.showTableValues">
+          {{ config.tableHeaderCol2 || $t("value") }}
         </div>
       </div>
       <div
         class="row flex-h"
-        :class="{ dark: theme === 'dark' }"
         v-for="key in dataKeys"
         :key="key"
         :style="`width: ${nameWidth + initWidth}px`"
       >
         <div :style="`width: ${nameWidth}px`">{{ key }}</div>
-        <div class="value-col" v-if="showTableValues">
-          {{ data[key][dataLength(data[key])] }}
+        <div class="value-col" v-if="config.showTableValues">
+          {{ data[key][data[key].length - 1 || 0] }}
         </div>
       </div>
     </div>
@@ -54,9 +52,12 @@ const props = defineProps({
     type: Object as PropType<{ [key: string]: number[][] }>,
     default: () => ({}),
   },
-  theme: { type: String, default: "dark" },
-  itemConfig: {
-    type: Object as PropType<{ showTableValues: string | boolean }>,
+  config: {
+    type: Object as PropType<{
+      showTableValues: boolean;
+      tableHeaderCol2: string;
+      tableHeaderCol1: string;
+    }>,
     default: () => ({}),
   },
 });
@@ -69,10 +70,10 @@ onMounted(() => {
   if (!chartTable.value) {
     return;
   }
-  const width = showTableValues.value
+  const width = props.config.showTableValues
     ? chartTable.value.offsetWidth / 2
     : chartTable.value.offsetWidth;
-  initWidth.value = showTableValues.value
+  initWidth.value = props.config.showTableValues
     ? chartTable.value.offsetWidth / 2
     : 0;
   nameWidth.value = width - 5;
@@ -98,15 +99,6 @@ const dataKeys = computed(() => {
   );
   return keys;
 });
-const showTableValues = computed(() => {
-  return props.itemConfig.showTableValues === "true" ||
-    props.itemConfig.showTableValues === true
-    ? true
-    : false;
-});
-const dataLength = computed((param: number[]) => {
-  return param.length - 1 || 0;
-});
 </script>
 <style lang="scss" scoped>
 .chart-table {

src/views/dashboard/graphs/TopList.vue

@@ -36,7 +36,6 @@ limitations under the License. -->
 <script lang="ts" setup>
 import type { PropType } from "vue";
 import { defineProps, computed } from "vue";
-import { ElProgress } from "element-plus";
 import copy from "@/utils/copy";
 const props = defineProps({
   data: {
@@ -45,8 +44,7 @@ const props = defineProps({
     >,
     default: () => [],
   },
-  theme: { type: String, default: "" },
-  itemConfig: {
+  config: {
     type: Object as PropType<{ sortOrder: string }>,
     default: () => ({}),
   },
@@ -65,7 +63,7 @@ const datas: any = () => {
   if (!props.data.length) {
     return [];
   }
-  const { sortOrder } = props.itemConfig;
+  const { sortOrder } = props.config;
   const val: any = props.data;
 
   switch (sortOrder) {

src/views/dashboard/graphs/index.ts

@@ -18,7 +18,7 @@
 import Area from "./Area.vue";
 import Line from "./Line.vue";
 import Bar from "./Bar.vue";
-// import Heatmap from "./Heatmap.vue";
+import Heatmap from "./Heatmap.vue";
 import TopList from "./TopList.vue";
 import Table from "./Table.vue";
 import Pie from "./Pie.vue";
@@ -27,7 +27,7 @@ import Card from "./Card.vue";
 export default {
   Line,
   Bar,
-  // Heatmap,
+  Heatmap,
   TopList,
   Area,
   Table,