fix: echarts can't get dom size

Author: moeakwak

frontend/src/views/admin/components/charts/AskChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pr-4">
-    <v-chart class="h-100" :option="option" :loading="props.loading" />
+    <v-chart ref="chartRef" class="h-100" :option="option" :loading="props.loading" />
   </div>
 </template>
 
@@ -19,7 +19,7 @@ import {
 } from 'echarts/components';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import VChart from 'vue-echarts';
 import { useI18n } from 'vue-i18n';
 
@@ -43,6 +43,8 @@ use([
   BrushComponent,
 ]);
 
+const chartRef = ref<InstanceType<typeof VChart>>();
+
 const props = defineProps<{
   loading: boolean;
   askStats: AskLogAggregation[];
@@ -343,12 +345,7 @@ const option = computed<EChartsOption>(() => {
   } as EChartsOption;
 });
 
-// watchEffect(() => {
-console.log('props', props.askStats);
-// console.log('xAxis', xAxis.value);
-// console.log('totalRequestsCountData', totalRequestsCountData.value);
-// console.log('datasetSource', datasetSource.value);
-// console.log('users', props.users)
-//   console.log('option', option.value);
-// });
+onMounted(() => {
+  chartRef.value?.resize();
+});
 </script>

frontend/src/views/admin/components/charts/RequestsChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pr-4">
-    <v-chart class="h-35" :option="option" :loading="props.loading" />
+    <v-chart ref="chartRef" class="h-35" :option="option" :loading="props.loading" />
   </div>
 </template>
 
@@ -20,7 +20,7 @@ import {
 } from 'echarts/components';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import { computed, ref, watchEffect } from 'vue';
+import { computed, onMounted, ref, watchEffect } from 'vue';
 import VChart from 'vue-echarts';
 import { useI18n } from 'vue-i18n';
 
@@ -55,6 +55,8 @@ const props = defineProps<{
   users?: UserRead[];
 }>();
 
+const chartRef = ref<InstanceType<typeof VChart>>();
+
 const findUsername = (user_id: number) => {
   const user = props.users?.find((u) => u.id === user_id);
   return user?.username || user_id;
@@ -278,4 +280,8 @@ watchEffect(() => {
   // console.log('users', props.users)
   console.log('option', option.value);
 });
+
+onMounted(() => {
+  chartRef.value?.resize();
+});
 </script>