[UI] Optimize snapshot charts representation (#4071)

Co-authored-by: majin.nathan <majin.nathan@bytedance.com>

Author: majin1102

amoro-web/src/utils/chart.ts

@@ -43,7 +43,7 @@ function sortLineChartDataByKey(obj: ILineChartOriginalData = {}, sortCallback:
  * @param data
  * @returns Echarts options
  */
-export function generateLineChartOption(titleText: string, data: ILineChartOriginalData) {
+export function generateLineChartOption(_titleText: string, data: ILineChartOriginalData) {
   if (!data) {
     return {}
   }
@@ -55,26 +55,30 @@ export function generateLineChartOption(titleText: string, data: ILineChartOrigi
     },
     yAxis: {
       type: 'value',
+      boundaryGap: [0, '1%'],
+      splitNumber: 6,
     },
     xAxis: {
       type: 'category',
       data: dataKeys.map(d => dateFormat(d)),
+      axisLabel: {
+        show: false,
+      },
       axisTick: {
-        alignWithLabel: true,
-        interval: 0,
+        show: false,
+      },
+      axisLine: {
+        show: false,
       },
     },
     grid: {
-      top: 40,
-      bottom: 50,
-      left: '1%',
+      left: 0,
+      right: 0,
+      top: 36,
+      bottom: 6,
       containLabel: true,
     },
   }
-  titleText && (option.title = {
-    left: 'center',
-    text: titleText,
-  })
   const legendMap: Record<string, number[]> = {}
   Object.values(data).forEach((val) => {
     const keys = Object.keys(val)
@@ -86,8 +90,22 @@ export function generateLineChartOption(titleText: string, data: ILineChartOrigi
       legendMap[tKey].push(val[key])
     })
   })
-  option.legend = { top: 'bottom', data: Object.keys(legendMap), lineStyle: { opacity: 0 } }
-  option.series = Object.keys(legendMap).map(key => ({
+  const legendKeys = Object.keys(legendMap)
+  option.legend = {
+    show: true,
+    top: 0,
+    left: 'center',
+    orient: 'horizontal',
+    itemWidth: 7,
+    itemHeight: 7,
+    icon: 'circle',
+    itemGap: 6,
+    textStyle: {
+      fontSize: 13,
+      lineHeight: 24,
+    },
+  }
+  option.series = legendKeys.map(key => ({
     name: key,
     type: 'line',
     symbol: 'circle',

amoro-web/src/views/tables/components/Optimizing.vue

@@ -422,6 +422,10 @@ onMounted(() => {
   :deep(.ant-table-thead > tr > th) {
     padding: 4px 16px !important;
   }
+
+  :deep(.ant-table-row-expand-icon) {
+    border-radius: 0 !important;
+  }
 }
 
 .status-icon {

amoro-web/src/views/tables/components/Selector.vue

@@ -171,12 +171,14 @@ onMounted(() => {
         </a-select-option>
       </a-select>
     </div>
+    <div class="selector-extra">
+      <slot name="extra" />
+    </div>
   </div>
 </template>
 
 <style lang="less">
 .branch-selector {
-  margin-top: 32px;
   display: flex;
   align-items: center;
 
@@ -252,5 +254,11 @@ onMounted(() => {
     text-align: center;
     color: #102048;
   }
+
+  .selector-extra {
+    display: flex;
+    align-items: center;
+    padding-left: 18px;
+  }
 }
 </style>

amoro-web/src/views/tables/components/Snapshots.vue

@@ -20,6 +20,7 @@ limitations under the License.
 import { onMounted, reactive, ref, shallowReactive } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
+import { CaretDownOutlined, CaretRightOutlined } from '@ant-design/icons-vue'
 import Selector from './Selector.vue'
 import { usePagination } from '@/hooks/usePagination'
 import type { BreadcrumbSnapshotItem, IColumns, ILineChartOriginalData, SnapshotItem } from '@/types/common.type'
@@ -61,8 +62,10 @@ const sourceData = reactive({
   table: '',
   ...query,
 })
+
 const recordChartOption = ref<ECOption>({})
 const fileChartOption = ref<ECOption>({})
+const showCharts = ref(false)
 const tblRef = ref<string>('')
 const operation = ref<string>('')
 
@@ -185,6 +188,10 @@ function toggleBreadcrumb(record: SnapshotItem) {
   }
 }
 
+function toggleCharts() {
+  showCharts.value = !showCharts.value
+}
+
 onMounted(() => {
   hasBreadcrumb.value = false
 })
@@ -193,15 +200,36 @@ onMounted(() => {
 <template>
   <div class="table-snapshots">
     <template v-if="!hasBreadcrumb">
-      <a-row>
+      <Selector
+        :catalog="sourceData.catalog"
+        :db="sourceData.db"
+        :table="sourceData.table"
+        :disabled="loading"
+        @consumer-change="onConsumerChange"
+        @ref-change="onRefChange"
+      >
+        <template #extra>
+          <div class="snapshots-charts-header" @click="toggleCharts">
+            <span class="snapshots-charts-title">Charts</span>
+            <span class="snapshots-charts-icon">
+              <CaretRightOutlined v-if="!showCharts" />
+              <CaretDownOutlined v-else />
+            </span>
+          </div>
+        </template>
+      </Selector>
+      <a-row v-if="showCharts" :gutter="32">
         <a-col :span="12">
-          <Chart :loading="loading" :options="recordChartOption" />
+          <div class="snapshots-chart-wrap">
+            <Chart height="300px" :loading="loading" :options="recordChartOption" />
+          </div>
         </a-col>
         <a-col :span="12">
-          <Chart :loading="loading" :options="fileChartOption" />
+          <div class="snapshots-chart-wrap">
+            <Chart height="300px" :loading="loading" :options="fileChartOption" />
+          </div>
         </a-col>
       </a-row>
-      <Selector :catalog="sourceData.catalog" :db="sourceData.db" :table="sourceData.table" :disabled="loading" @consumer-change="onConsumerChange" @ref-change="onRefChange" />
       <a-table
         row-key="snapshotId"
         :columns="columns"
@@ -281,8 +309,29 @@ onMounted(() => {
     padding: 0;
   }
 
+  :deep(.ant-table-row-expand-icon) {
+    border-radius: 0 !important;
+  }
+
   .ant-table-wrapper {
-    margin-top: 24px;
+    margin-top: 18px;
+  }
+
+  .snapshots-charts-header {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .snapshots-charts-title {
+    margin-right: 4px;
+  }
+
+  .snapshots-charts-icon {
+    font-size: 10px;
+    color: #999;
+    display: inline-flex;
+    align-items: center;
   }
 }
 </style>