feat: implement Topology on the dashboard (#14)

src/components/DateCalendar.vue

@@ -118,9 +118,9 @@ limitations under the License. -->
           v-for="(i, j) in local.months"
           @click="
             is($event) &&
-              ((state.showMonths = m === 'M'),
+              ((state.showMonths = state.m === 'M'),
               (state.month = j),
-              m === 'M' && ok('m'))
+              state.m === 'M' && ok('m'))
           "
           :class="[
             status(
@@ -142,7 +142,7 @@ limitations under the License. -->
           v-for="(i, j) in years"
           @click="
             is($event) &&
-              ((state.showYears = m === 'Y'),
+              ((state.showYears = state.m === 'Y'),
               (state.year = i),
               state.m === 'Y' && ok('y'))
           "
@@ -278,6 +278,7 @@ limitations under the License. -->
 
 <script lang="ts" setup>
 import { computed, onMounted, watch, reactive } from "vue";
+import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 /*global defineProps, defineEmits */
 const emit = defineEmits(["input", "setDates", "ok"]);
@@ -286,7 +287,7 @@ const props = defineProps({
   value: { type: Date },
   left: { type: Boolean, default: false },
   right: { type: Boolean, default: false },
-  dates: { default: [] },
+  dates: { type: Array as PropType<number[] | string[]>, default: () => [] },
   disabledDate: { type: Function, default: () => false },
   format: {
     type: String,
@@ -353,10 +354,10 @@ const parse = (num: number): number => {
   return Math.floor(num / 1000);
 };
 const start = computed(() => {
-  return parse(props.dates[0]);
+  return parse(Number(props.dates[0]));
 });
 const end = computed(() => {
-  return parse(props.dates[1]);
+  return parse(Number(props.dates[1]));
 });
 const ys = computed(() => {
   return Math.floor(state.year / 10) * 10;
@@ -550,7 +551,7 @@ const ok = (info: any) => {
     emit("setDates", _time);
   }
   emit("input", _time);
-  ok(info === "h");
+  emit("ok", info === "h");
 };
 onMounted(() => {
   const is = (c: string) => props.format.indexOf(c) !== -1;

src/components/Graph.vue

@@ -20,12 +20,15 @@ import { watch, ref, Ref, onMounted, onBeforeUnmount, unref } from "vue";
 import type { PropType } from "vue";
 import { useECharts } from "@/hooks/useEcharts";
 import { addResizeListener, removeResizeListener } from "@/utils/event";
+import { useTimeoutFn } from "@/hooks/useTimeout";
 
-/*global Nullable, defineProps*/
+/*global Nullable, defineProps, defineEmits*/
+const emits = defineEmits(["select"]);
 const chartRef = ref<Nullable<HTMLDivElement>>(null);
-const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
+const { setOptions, resize, getInstance } = useECharts(
+  chartRef as Ref<HTMLDivElement>
+);
 const props = defineProps({
-  clickEvent: { type: Function as PropType<(param: unknown) => void> },
   height: { type: String, default: "100%" },
   width: { type: String, default: "100%" },
   option: {
@@ -34,9 +37,16 @@ const props = defineProps({
   },
 });
 
-onMounted(() => {
-  setOptions(props.option);
+onMounted(async () => {
+  await setOptions(props.option);
   addResizeListener(unref(chartRef), resize);
+  useTimeoutFn(() => {
+    const instance = getInstance();
+
+    instance.on("click", (params: any) => {
+      emits("select", params);
+    });
+  }, 1000);
 });
 
 watch(

src/components/Selector.vue

@@ -43,18 +43,17 @@ interface Option {
 }
 
 /*global  defineProps, defineEmits*/
-
 const emit = defineEmits(["change"]);
 const props = defineProps({
   options: {
-    type: Array as PropType<Option[]>,
+    type: Array as PropType<(Option & { disabled: boolean })[]>,
     default: () => [],
   },
   value: {
     type: [Array, String] as PropType<string[] | string>,
     default: () => [],
   },
-  size: { type: String, default: "small" },
+  size: { type: null, default: "default" },
   placeholder: { type: String, default: "Select a option" },
   borderRadius: { type: Number, default: 3 },
   multiple: { type: Boolean, default: false },
@@ -77,7 +76,7 @@ watch(
   }
 );
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .icon {
   width: 16px;
   height: 16px;

src/components/TimePicker.vue

@@ -145,11 +145,12 @@ limitations under the License. -->
 import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import DateCalendar from "./DateCalendar.vue";
+import { useTimeoutFn } from "@/hooks/useTimeout";
 /*global defineProps, defineEmits */
 const datepicker = ref(null);
 const { t } = useI18n();
 const show = ref<boolean>(false);
-const dates = ref<Date[]>([]);
+const dates = ref<Date | string[] | any>([]);
 const props = defineProps({
   position: { type: String, default: "bottom" },
   name: [String],
@@ -244,7 +245,7 @@ const range = computed(() => {
 const text = computed(() => {
   const val = props.value;
   const txt = dates.value
-    .map((date) => tf(date))
+    .map((date: Date) => tf(date))
     .join(` ${props.rangeSeparator} `);
   if (Array.isArray(val)) {
     return val.length > 1 ? txt : "";
@@ -270,9 +271,9 @@ const ok = (leaveOpened: boolean) => {
   emit("input", get());
   !leaveOpened &&
     !props.showButtons &&
-    setTimeout(() => {
+    useTimeoutFn(() => {
       show.value = range.value;
-    });
+    }, 1);
 };
 const setDates = (d: Date) => {
   dates.value[1] = d;