feat: add metric detail (#263)

Signed-off-by: laixingyou <[email protected]>

Author: coder-sett

apps/web/i18n

@@ -29,6 +29,7 @@
     "@types/qrcode": "^1.5.0",
     "ahooks": "^3.7.0",
     "axios": "^1.1.3",
+    "antd": "^5.9.2",
     "big.js": "^6.2.1",
     "class-variance-authority": "^0.6.0",
     "classnames": "^2.3.1",

apps/web/package.json

@@ -0,0 +1,33 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Table, ConfigProvider } from 'antd';
+import getTableScroll from '@common/utils/getTableScroll';
+import getLocale from '@common/utils/getLocale';
+import zhCN from 'antd/locale/zh_CN';
+import enUS from 'antd/locale/en_US';
+
+const MyTable = (props) => {
+  const [scrollY, setScrollY] = useState<string | number>(400);
+  let countRef = useRef(null);
+  useEffect(() => {
+    let scrolly = getTableScroll({ ref: countRef });
+    if (countRef) setScrollY(scrolly);
+  }, [countRef]);
+  const [local, setLocale] = useState(enUS);
+  useEffect(() => {
+    const l = getLocale();
+    setLocale(l === 'zh' ? zhCN : enUS);
+  }, []);
+  return (
+    <div ref={countRef}>
+      <ConfigProvider locale={local}>
+        <Table
+          {...props}
+          rowClassName={(_record, i) => (i % 2 === 1 ? '!bg-[#fafafa]' : '')}
+          bordered
+          scroll={{ x: 'max-content', y: scrollY }}
+        />
+      </ConfigProvider>
+    </div>
+  );
+};
+export default MyTable;

apps/web/src/common/components/Table/index.tsx

@@ -0,0 +1,22 @@
+export default function getTableScroll({ extraHeight = null, ref }) {
+  if (!extraHeight) {
+    extraHeight = 108;
+  }
+  let tHeader = null;
+  if (ref && ref.current) {
+    tHeader = ref.current.getElementsByClassName('ant-table-thead')[0];
+  } else {
+    tHeader = document.getElementsByClassName('ant-table-thead')[0];
+  }
+  //表格内容距离顶部的距离
+  let tHeaderBottom = 0;
+  if (tHeader) {
+    tHeaderBottom = tHeader.getBoundingClientRect().bottom;
+  }
+  // 窗体高度-表格内容顶部的高度-表格内容底部的高度
+  // let height = document.body.clientHeight - tHeaderBottom - extraHeight
+  console.log(tHeaderBottom);
+  let height = `calc(100vh - ${tHeaderBottom + extraHeight}px)`;
+
+  return height;
+}

apps/web/src/common/utils/getTableScroll.ts

@@ -7,6 +7,7 @@ import useMetricQueryData from '@modules//analyze/hooks/useMetricQueryData';
 import { withErrorBoundary } from 'react-error-boundary';
 import ErrorFallback from '@common/components/ErrorFallback';
 import { Level } from '@modules/analyze/constant';
+import MetricDashboard from '@modules/analyze/components/MetricDetail/MetricDashboard';
 
 const Overview: React.FC<{
   data: DeepReadonly<
@@ -18,6 +19,7 @@ const Overview: React.FC<{
       <>
         {data[0].level === Level.COMMUNITY && <CommunityRepos />}
         <LineChart />
+        <MetricDashboard />
       </>
     );
   }

apps/web/src/modules/analyze/DataView/OverviewSummary/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import LegacyLabelRedirect from './components/Container/LegacyLabelRedirect';
+import AnalyzeContainer from './components/Container/AnalyzeContainer';
+import { Main } from '@common/components/Layout';
+import MetricDetailMore from './components/MetricDetail/MetricDetailMore';
+import Header from '@common/components/Header';
+
+const Analyze = () => {
+  return (
+    <LegacyLabelRedirect>
+      <AnalyzeContainer>
+        <Header />
+        <Main>
+          <MetricDetailMore />
+        </Main>
+      </AnalyzeContainer>
+    </LegacyLabelRedirect>
+  );
+};
+
+export default Analyze;

apps/web/src/modules/analyze/MetricDetailPage.tsx

@@ -0,0 +1,96 @@
+import React, { useRef, useEffect, useCallback } from 'react';
+import { useDeepCompareEffect } from 'ahooks';
+import { init, getInstanceByDom } from 'echarts';
+import type { CSSProperties } from 'react';
+import type { EChartsOption, ECharts, SetOptionOpts } from 'echarts';
+import { useResizeDetector } from 'react-resize-detector';
+import useInViewportDebounce from '@common/hooks/useInViewportDebounce';
+
+export interface ReactEChartsProps {
+  option: EChartsOption;
+  style?: CSSProperties;
+  settings?: SetOptionOpts;
+  loading?: boolean;
+  theme?: 'light' | 'dark';
+  containerRef?: React.RefObject<HTMLElement>;
+  legendselectchanged?: any;
+}
+
+const MetricChart: React.FC<ReactEChartsProps> = ({
+  option,
+  style,
+  settings = { notMerge: true },
+  loading,
+  theme,
+  containerRef,
+  legendselectchanged,
+}) => {
+  const inView = useInViewportDebounce(containerRef);
+  const chartRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Update chart
+    if (chartRef.current !== null) {
+      const chart = getInstanceByDom(chartRef.current)!;
+      if (inView) {
+        loading === true ? chart?.showLoading() : chart?.hideLoading();
+      }
+    }
+  }, [loading, inView]);
+
+  useEffect(() => {
+    // init
+    let chart: ECharts | undefined;
+    if (chartRef.current !== null) {
+      chart = init(chartRef.current, theme);
+    }
+    return () => {
+      chart?.dispose();
+    };
+  }, [theme]);
+
+  useDeepCompareEffect(() => {
+    // Update chart
+    if (inView && chartRef.current !== null) {
+      const chart = getInstanceByDom(chartRef.current)!;
+      chart.setOption(option, settings);
+      if (legendselectchanged) {
+        const chart = getInstanceByDom(chartRef.current)!;
+        chart.on('legendselectchanged', function (params: any) {
+          let selected = params.selected!;
+          let options = chart.getOption();
+          let selectedList = Object.keys(selected).filter(
+            (item) => selected[item]
+          );
+          options.series[1].data = legendselectchanged.filter((item) =>
+            selectedList.includes(item.org)
+          );
+          this.setOption(options);
+        });
+      }
+    }
+  }, [option, settings, inView]);
+
+  // ----------------container resize------------------------------
+  const onResize = useCallback((width?: number, height?: number) => {
+    if (chartRef.current !== null) {
+      const chart = getInstanceByDom(chartRef.current)!;
+      chart?.resize({
+        width: 'auto',
+        height: Number(height) > 650 ? 650 : 350,
+      });
+    }
+  }, []);
+
+  useResizeDetector({
+    targetRef: containerRef,
+    onResize,
+    skipOnMount: true,
+  });
+
+  return (
+    <div ref={chartRef} style={{ width: '100%', height: '100%', ...style }} />
+  );
+};
+
+export default React.memo(MetricChart);