feat: create Card, ProgressBar components

src/views/dashboard/graphs/Card.vue

@@ -0,0 +1,57 @@
+<!-- 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. -->
+
+<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>
+</template>
+<script lang="ts" setup>
+import type { PropType } from "vue";
+import { defineProps, computed } from "vue";
+const props = defineProps({
+  data: {
+    type: Object as PropType<{ [key: string]: number[] }>,
+    default: () => ({}),
+  },
+  theme: { type: String, default: "" },
+});
+
+const getColors = computed(() => {
+  return props.theme === "dark" ? "#eee" : "#333";
+});
+</script>
+<style lang="scss" scoped>
+.chart-card {
+  font-size: 14px;
+  color: #333;
+}
+
+.card-detail {
+  span:first-child {
+    padding-right: 8px;
+    box-sizing: border-box;
+    color: #666;
+  }
+}
+</style>

src/views/dashboard/graphs/ProgressBar.vue

@@ -0,0 +1,116 @@
+<!-- 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. -->
+
+<template>
+  <div class="chart-slow-i" v-for="(i, index) in datas" :key="index">
+    <Icon
+      iconName="review-list"
+      size="sm"
+      @click="handleClick((i.traceIds && i.traceIds[0]) || i.name)"
+    />
+    <div class="mb-5 ell">
+      <span class="calls sm mr-10">{{ i.value }}</span>
+      <span class="cp link-hover" @click="handleLink(i)">
+        {{ i.name + getTraceId(i) }}
+      </span>
+    </div>
+    <el-progress
+      :stroke-width="10"
+      :percentage="(i.value / maxValue) * 100"
+      color="#bf99f8"
+    />
+  </div>
+</template>
+<script lang="ts">
+import type { PropType } from "vue";
+import { defineProps, computed } from "vue";
+import { ElProgress } from "element-plus";
+import copy from "@/utils/copy";
+const props = defineProps({
+  data: {
+    type: Array as PropType<{ [key: string]: number | string }[]>,
+    default: () => [],
+  },
+  theme: { type: String, default: "" },
+  itemConfig: {
+    type: Object as PropType<{ sortOrder: string }>,
+    default: () => ({}),
+  },
+});
+const maxValue = computed(() => {
+  if (!props.data.length) {
+    return null;
+  }
+  const temp: number[] = props.data.map((i: any) => i.value);
+  return Math.max.apply(null, temp);
+});
+const getTraceId = computed((i: { [key: string]: (number | string)[] }) => {
+  return i.traceIds && i.traceIds[0] ? ` - ${i.traceIds[0]}` : "";
+});
+const datas: any = computed(() => {
+  if (!props.data.length) {
+    return [];
+  }
+  const { sortOrder } = props.itemConfig;
+  let val: { [key: string]: number | string }[] = [];
+
+  switch (sortOrder) {
+    case "DES":
+      val = props.data.sort((a: any, b: any) => b.value - a.value);
+      break;
+    case "ASC":
+      val = props.data.sort((a: any, b: any) => a.value - b.value);
+      break;
+    default:
+      break;
+  }
+  return val;
+});
+function handleClick(i: string) {
+  copy(i);
+}
+</script>
+<style lang="scss" scoped>
+.progress-bar {
+  font-size: 14px;
+  color: #333;
+}
+
+.chart-slow-i {
+  padding: 6px 0;
+}
+
+.chart-slow {
+  height: 100%;
+
+  .calls {
+    padding: 0 5px;
+    display: inline-block;
+    background-color: #40454e;
+    color: #eee;
+    border-radius: 4px;
+  }
+}
+
+.chart-slow-link {
+  padding: 4px 10px 7px 10px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  color: #333;
+  background-color: #fff;
+  will-change: opacity, background-color;
+  transition: opacity 0.3s, background-color 0.3s;
+}
+</style>