feat: dynamic switching components

src/router/generalService.ts

@@ -21,7 +21,6 @@ export const routesGen: Array<RouteRecordRaw> = [
   {
     path: "",
     name: "GeneralService",
-    redirect: "/generalService",
     meta: {
       title: "generalService",
       icon: "chart",

src/router/index.ts

@@ -53,6 +53,10 @@ router.beforeEach((to, from, next) => {
     }
     (window as any).axiosCancel = [];
   }
-  next();
+  if (to.path === "/") {
+    next({ path: "/generalService" });
+  } else {
+    next();
+  }
 });
 export default router;

src/utils/loading.ts

@@ -14,11 +14,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ElLoading, ILoadingInstance } from "element-plus";
+import { ElLoading } from "element-plus";
+
 type Props = { text?: string; fullscreen?: boolean };
 
 export default function (): {
-  loading: (props: Props) => ILoadingInstance;
+  loading: (props: Props) => any;
 } {
   const loading = (props: Props) => {
     const loadingInstance = ElLoading.service(props);

src/views/dashboard/configuration/WidgetConfig.vue

@@ -15,7 +15,11 @@ limitations under the License. -->
 <template>
   <div class="widget-config">
     <div class="graph" style="height: 350px; width: 100%">
-      <Bar :data="source" :intervalTime="appStoreWithOut.intervalTime" />
+      <component
+        :is="states.chartType"
+        :intervalTime="appStoreWithOut.intervalTime"
+        :data="source"
+      />
       <span v-show="!source">No Data</span>
     </div>
     <div class="config">
@@ -45,8 +49,8 @@ limitations under the License. -->
         <label>Select you visualization</label>
         <div class="chart-types">
           <span
-            v-for="type in ChartTypes"
+            v-for="(type, index) in ChartTypes"
-            :key="type.value"
+            :key="index"
             @click="changeChartType(type)"
             :class="{ active: type.value === states.chartType }"
           >
@@ -74,8 +78,8 @@ limitations under the License. -->
     </div>
   </div>
 </template>
-<script lang="ts" setup>
+<script lang="ts">
-import { reactive } from "vue";
+import { reactive, defineComponent } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
@@ -83,61 +87,81 @@ import { ElMessage, ElButton } from "element-plus";
 import { ValuesTypes, MetricQueryTypes, ChartTypes } from "../data";
 import { Option } from "@/types/app";
 import Loading from "@/utils/loading";
-import Bar from "../graphs/Bar.vue";
+import charts from "../graphs";
 
-const states = reactive<{
+export default defineComponent({
-  metrics: string;
+  name: "WidgetConfig",
-  valueTypes: Option[];
+  components: { ...charts, ElButton },
-  valueType: string;
+  setup() {
-  metricQueryType: string;
+    const states = reactive<{
-  chartType: string;
+      metrics: string;
-}>({
+      valueTypes: Option[];
-  metrics: "",
+      valueType: string;
-  valueTypes: [],
+      metricQueryType: string;
-  valueType: "",
+      chartType: string;
-  metricQueryType: "",
+    }>({
-  chartType: "",
+      metrics: "",
+      valueTypes: [],
+      valueType: "",
+      metricQueryType: "",
+      chartType: "Bar",
+    });
+    const { t } = useI18n();
+    const dashboardStore = useDashboardStore();
+    const appStoreWithOut = useAppStoreWithOut();
+    const { loading } = Loading();
+    async function changeMetrics(val: Option[]) {
+      if (!val.length) {
+        states.valueTypes = [];
+        states.valueType = "";
+        return;
+      }
+      const loadingInstance = loading({ text: t("loading"), fullscreen: true });
+      const resp = await dashboardStore.fetchMetricType(val[0].value);
+      loadingInstance.close();
+      if (resp.error) {
+        ElMessage.error(resp.data.error);
+        return;
+      }
+      const { typeOfMetrics } = resp.data;
+      states.valueTypes = ValuesTypes[typeOfMetrics];
+      states.valueType = ValuesTypes[typeOfMetrics][0].value;
+    }
+    function changeValueType(val: Option[]) {
+      states.valueType = String(val[0].value);
+      states.metricQueryType = (MetricQueryTypes as any)[states.valueType];
+    }
+    function changeChartType(item: Option) {
+      states.chartType = String(item.value);
+    }
+    const metricOpts = [
+      { value: "service_apdex", label: "service_apdex" },
+      { value: "service_sla", label: "service_sla" },
+      { value: "service_cpm", label: "service_cpm" },
+      { value: "service_resp_time", label: "service_resp_time" },
+      { value: "service_percentile", label: "service_percentile" },
+      {
+        value: "service_mq_consume_latency",
+        label: "service_mq_consume_latency",
+      },
+      { 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],
+    };
+    return {
+      states,
+      changeChartType,
+      changeValueType,
+      changeMetrics,
+      t,
+      appStoreWithOut,
+      ChartTypes,
+      source,
+      metricOpts,
+    };
+  },
 });
-const { t } = useI18n();
-const dashboardStore = useDashboardStore();
-const appStoreWithOut = useAppStoreWithOut();
-const { loading } = Loading();
-async function changeMetrics(val: Option[]) {
-  if (!val.length) {
-    states.valueTypes = [];
-    states.valueType = "";
-    return;
-  }
-  const loadingInstance = loading({ text: t("loading"), fullscreen: true });
-  const resp = await dashboardStore.fetchMetricType(val[0].value);
-  loadingInstance.close();
-  if (resp.error) {
-    ElMessage.error(resp.data.error);
-    return;
-  }
-  const { typeOfMetrics } = resp.data;
-  states.valueTypes = ValuesTypes[typeOfMetrics];
-  states.valueType = ValuesTypes[typeOfMetrics][0].value;
-}
-function changeValueType(val: Option[]) {
-  states.valueType = String(val[0].value);
-  states.metricQueryType = (MetricQueryTypes as any)[states.valueType];
-}
-function changeChartType(item: Option) {
-  states.chartType = String(item.value);
-}
-const metricOpts = [
-  { value: "service_apdex", label: "service_apdex" },
-  { value: "service_sla", label: "service_sla" },
-  { value: "service_cpm", label: "service_cpm" },
-  { value: "service_resp_time", label: "service_resp_time" },
-  { value: "service_percentile", label: "service_percentile" },
-  { value: "service_mq_consume_latency", label: "service_mq_consume_latency" },
-  { 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],
-};
 </script>
 <style lang="scss" scoped>
 .widget-config {

src/views/dashboard/graphs/ProgressBar.vue

@@ -22,7 +22,7 @@ limitations under the License. -->
     />
     <div class="mb-5 ell">
       <span class="calls sm mr-10">{{ i.value }}</span>
-      <span class="cp link-hover" @click="handleLink(i)">
+      <span class="cp link-hover">
         {{ i.name + getTraceId(i) }}
       </span>
     </div>
@@ -33,7 +33,7 @@ limitations under the License. -->
     />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from "vue";
 import { defineProps, computed } from "vue";
 import { ElProgress } from "element-plus";
@@ -53,33 +53,33 @@ const props = defineProps({
 });
 const maxValue = computed(() => {
   if (!props.data.length) {
-    return null;
+    return 0;
   }
   const temp: number[] = props.data.map((i: any) => i.value);
   return Math.max.apply(null, temp);
 });
-const getTraceId = computed((i: { [key: string]: (number | string)[] }) => {
+const getTraceId = (i: { [key: string]: (number | string)[] }): string => {
   return i.traceIds && i.traceIds[0] ? ` - ${i.traceIds[0]}` : "";
-});
+};
-const datas: any = computed(() => {
+const datas: any = () => {
   if (!props.data.length) {
     return [];
   }
   const { sortOrder } = props.itemConfig;
-  let val: { [key: string]: number | string }[] = [];
+  const val: any = props.data;
 
   switch (sortOrder) {
     case "DES":
-      val = props.data.sort((a: any, b: any) => b.value - a.value);
+      val.sort((a: any, b: any) => b.value - a.value);
       break;
     case "ASC":
-      val = props.data.sort((a: any, b: any) => a.value - b.value);
+      val.sort((a: any, b: any) => a.value - b.value);
       break;
     default:
       break;
   }
   return val;
-});
+};
 function handleClick(i: string) {
   copy(i);
 }

src/views/dashboard/graphs/index.ts

@@ -15,22 +15,22 @@
  * limitations under the License.
  */
 
-import ChartArea from "./Area.vue";
+import Area from "./Area.vue";
-import ChartLine from "./Line.vue";
+import Line from "./Line.vue";
-import ChartBar from "./Bar.vue";
+import Bar from "./Bar.vue";
-import ChartHeatmap from "./Heatmap.vue";
+import Heatmap from "./Heatmap.vue";
-import ProgressBar from "./ProgressBar.vue";
+// import ProgressBar from "./ProgressBar.vue";
-import ChartTable from "./Table.vue";
+import Table from "./Table.vue";
-import ChartPie from "./Pie.vue";
+import Pie from "./Pie.vue";
-import ChartCard from "./Card.vue";
+import Card from "./Card.vue";
 
 export default {
-  ChartLine,
+  Line,
-  ChartBar,
+  Bar,
-  ChartHeatmap,
+  Heatmap,
-  ProgressBar,
+  // ProgressBar,
-  ChartArea,
+  Area,
-  ChartTable,
+  Table,
-  ChartPie,
+  Pie,
-  ChartCard,
+  Card,
 };