feat: waterfall view

src/client/components.d.ts

@@ -30,5 +30,7 @@ declare module 'vue' {
     SearchBox: typeof import('./components/SearchBox.vue')['default']
     SegmentControl: typeof import('./components/SegmentControl.vue')['default']
     ServerChart: typeof import('./components/ServerChart.vue')['default']
+    WaterfallOverviewChart: typeof import('./components/WaterfallOverviewChart.vue')['default']
+    WaterfallRangeChart: typeof import('./components/WaterfallRangeChart.vue')['default']
   }
 }

src/client/components/Container.vue

@@ -1,5 +1,9 @@
+<script setup lang="ts">
+const emit = defineEmits(['element'])
+</script>
+
 <template>
-  <div class="h-[calc(100vh-55px)]">
+  <div :ref="el => emit('element', el)" class="h-[calc(100vh-55px)]">
     <slot />
   </div>
 </template>

src/client/components/WaterfallOverviewChart.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { init } from 'echarts/core'
+import VChart from 'vue-echarts'
+
+type ChartOption = ReturnType<ReturnType<typeof init>['getOption']>
+
+interface Props {
+  data: Record<string, any>
+  chartStyle: Record<string, any>
+  chartOption: ChartOption
+}
+
+defineProps<Props>()
+
+const container = ref<HTMLDivElement | null>()
+</script>
+
+<template>
+  <div ref="container" p4>
+    <div v-if="!Object.keys(data).length" flex="~" h-40 w-full>
+      <div ma italic op50>
+        No data
+      </div>
+    </div>
+    <VChart v-else class="w-100%" :style="chartStyle" :option="chartOption" autoresize />
+  </div>
+</template>