oss-compass · coder-sett · Nov 27, 2023 · Nov 27, 2023 · Nov 27, 2023
diff --git a/apps/web/i18n b/apps/web/i18n
diff --git a/apps/web/src/common/components/Tab.tsx b/apps/web/src/common/components/Tab.tsx
@@ -1,8 +1,15 @@
 import React from 'react';
 import classnames from 'classnames';
+import Tooltip from '@common/components/Tooltip';
 
 const Tab: React.FC<{
-  options: { value: string; label: string; disable?: boolean }[];
+  options: {
+    value: string;
+    label: string;
+    disable?: boolean;
+    tabCls?: string;
+    tooltip?: string;
+  }[];
   value: string;
   onChange: (v: string) => void;
 }> = ({ options, value, onChange }) => (
@@ -14,12 +21,15 @@ const Tab: React.FC<{
             key={option.label}
             className={classnames(
               'text-steel cursor-pointer  px-3 py-1 text-sm ',
+              option?.tabCls,
               { 'rounded bg-white text-black shadow': option.value === value },
               { 'cursor-not-allowed text-[#ABABAB]': option.disable === true }
             )}
             onClick={() => !option.disable && onChange(option.value)}
           >
-            {option.label}
+            <Tooltip arrow title={option.tooltip} placement="right">
+              <div>{option.label}</div>
+            </Tooltip>
           </div>
         );
       })}

diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricChart.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricChart.tsx
@@ -74,10 +74,7 @@ const MetricChart: React.FC<ReactEChartsProps> = ({
   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,
-      });
+      chart?.resize();
     }
   }, []);
 

diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributionCount.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributionCount.tsx
@@ -0,0 +1,31 @@
+import React, { useRef, useMemo } from 'react';
+import ContributorContribution from './ContributorContribution';
+import ContributorOrganizations from './ContributorOrganizations';
+
+const ContributionCount: React.FC<{
+  label: string;
+  level: string;
+  beginDate: Date;
+  endDate: Date;
+  mileage: string[];
+}> = ({ label, level, beginDate, endDate, mileage }) => {
+  return (
+    <div className="flex lg:flex-col">
+      <ContributorContribution
+        label={label}
+        level={level}
+        beginDate={beginDate}
+        endDate={endDate}
+        mileage={mileage}
+      />
+      <ContributorOrganizations
+        label={label}
+        level={level}
+        beginDate={beginDate}
+        endDate={endDate}
+        mileage={mileage}
+      />
+    </div>
+  );
+};
+export default ContributionCount;
diff --git a/...b/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx b/...b/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx
@@ -63,28 +63,34 @@ const ContributorContribution: React.FC<{
       contributorsData,
     };
   }, [data]);
-
+  const unit: string = t('analyze:metric_detail:contribution_unit');
+  const formatter = '{b} : {c}' + unit + ' ({d}%)';
   const option: EChartsOption = {
     tooltip: {
       trigger: 'item',
-      formatter: '{b}: {c} ({d}%)',
+      formatter: formatter,
     },
     legend: {
-      top: '2%',
+      top: 40,
       left: 'center',
       data: getSeries.legend,
     },
+    title: {
+      text: t('analyze:metric_detail:global_contribution_distribution'),
+      left: 'center',
+    },
     series: [
       {
+        top: 15,
         name: '生态类型',
         type: 'pie',
         selectedMode: 'single',
-        radius: [0, '45%'],
+        radius: [0, '40%'],
         label: {
           position: 'inner',
           fontSize: 12,
           color: '#333',
-          formatter: '{b}: {c} ({d}%)',
+          formatter: formatter,
         },
         labelLine: {
           show: false,
@@ -96,14 +102,15 @@ const ContributorContribution: React.FC<{
         data: getSeries.ecoData,
       },
       {
+        top: 15,
         name: '贡献者',
         type: 'pie',
-        radius: ['55%', '67%'],
+        radius: ['50%', '62%'],
         labelLine: {
           length: 30,
         },
         label: {
-          formatter: '{b}: {c} ({d}%)',
+          formatter: formatter,
           color: '#333',
         },
         data: getSeries.contributorsData,
@@ -112,7 +119,7 @@ const ContributorContribution: React.FC<{
   };
 
   return (
-    <div className="flex-1 pt-4" ref={chartRef}>
+    <div className="h-[600px] w-[50%] flex-1 pt-4" ref={chartRef}>
       <MetricChart
         style={{ height: '100%' }}
         loading={isLoading}

diff --git a/.../src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorOrganizations.tsx b/.../src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorOrganizations.tsx
@@ -28,58 +28,66 @@ const ContributorContribution: React.FC<{
     const contributorsData = [];
     if (data?.orgContributorsOverview?.length > 0) {
       const ecoContributorsOverview = data.orgContributorsOverview;
-      ecoContributorsOverview.forEach((item, i) => {
-        const { subTypeName, topContributorDistribution } = item;
-        const colorList = gradientRamp[i];
-        let count = 0;
-        topContributorDistribution.forEach(({ subCount, subName }, index) => {
-          count += subCount;
-          contributorsData.push({
-            parentName: subTypeName,
-            name: subName,
-            value: subCount,
-            itemStyle: { color: colorList[index + 1] },
+      ecoContributorsOverview
+        .filter((item) => item.subTypeName)
+        .forEach((item, i) => {
+          const { subTypeName, topContributorDistribution } = item;
+          const colorList = gradientRamp[i];
+          let count = 0;
+          topContributorDistribution.forEach(({ subCount, subName }, index) => {
+            count += subCount;
+            contributorsData.push({
+              parentName: subTypeName,
+              name: subName,
+              value: subCount,
+              itemStyle: { color: colorList[index + 1] },
+            });
+          });
+          legend.push({
+            name: subTypeName,
+            itemStyle: { color: colorList[0] },
+          });
+          ecoData.push({
+            name: subTypeName,
+            value: count,
+            itemStyle: { color: colorList[0] },
           });
         });
-        legend.push({
-          name: subTypeName,
-          itemStyle: { color: colorList[0] },
-        });
-        ecoData.push({
-          name: subTypeName,
-          value: count,
-          itemStyle: { color: colorList[0] },
-        });
-      });
     }
     return {
       legend,
       ecoData,
       contributorsData,
     };
   }, [data]);
-
+  const unit: string = t('analyze:metric_detail:contribution_unit');
+  const formatter = '{b} : {c}' + unit + ' ({d}%)';
   const option: EChartsOption = {
     tooltip: {
       trigger: 'item',
-      formatter: '{b}: {c} ({d}%)',
+      formatter: formatter,
     },
     legend: {
-      top: '2%',
+      top: 40,
       left: 'center',
       data: getSeries.legend,
     },
+    title: {
+      text: t('analyze:metric_detail:organization_contribution_distribution'),
+      left: 'center',
+    },
     series: [
       {
+        top: 15,
         name: '生态类型',
         type: 'pie',
         selectedMode: 'single',
-        radius: [0, '45%'],
+        radius: [0, '40%'],
         label: {
           position: 'inner',
           fontSize: 12,
           color: '#333',
-          formatter: '{b}: {c} ({d}%)',
+          formatter: formatter,
         },
         labelLine: {
           show: false,
@@ -91,14 +99,15 @@ const ContributorContribution: React.FC<{
         data: getSeries.ecoData,
       },
       {
+        top: 15,
         name: '贡献者',
         type: 'pie',
-        radius: ['55%', '67%'],
+        radius: ['50%', '62%'],
         labelLine: {
           length: 30,
         },
         label: {
-          formatter: '{b}: {c} ({d}%)',
+          formatter: formatter,
           color: '#333',
         },
         data: getSeries.contributorsData,
@@ -107,7 +116,7 @@ const ContributorContribution: React.FC<{
   };
 
   return (
-    <div className="flex-1 pt-4" ref={chartRef}>
+    <div className="h-[600px] w-[50%] flex-1 pt-4" ref={chartRef}>
       <MetricChart
         style={{ height: '100%' }}
         loading={isLoading}

diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable.tsx
@@ -141,28 +141,28 @@ const MetricTable: React.FC<{
     {
       title: t('analyze:metric_detail:contributor'),
       dataIndex: 'contributor',
-      align: 'center',
+      align: 'left',
       width: '200px',
       sorter: true,
     },
     {
       title: t('analyze:metric_detail:role_persona'),
       dataIndex: 'ecologicalType',
-      align: 'center',
+      align: 'left',
       width: '200px',
       filters: ecologicalOptions,
       render: (text) => {
-        return ecologicalOptions.find((i) => i.value === text).text;
+        return ecologicalOptions.find((i) => i.value === text)?.text || text;
       },
     },
 
     {
       title: t('analyze:metric_detail:milestone_persona'),
       dataIndex: 'mileageType',
       render: (text) => {
-        return mileageOptions.find((i) => i.value === text).label;
+        return mileageOptions.find((i) => i.value === text)?.label || text;
       },
-      align: 'center',
+      align: 'left',
       width: '200px',
     },
     {
@@ -194,13 +194,13 @@ const MetricTable: React.FC<{
       },
       filters: useContributionTypeLsit(),
       filterMode: 'tree',
-      align: 'center',
+      align: 'left',
       width: '220px',
     },
     {
       title: t('analyze:metric_detail:organization'),
       dataIndex: 'organization',
-      align: 'center',
+      align: 'left',
       width: '160px',
     },
     {
@@ -218,7 +218,7 @@ const MetricTable: React.FC<{
           return contribution;
         }
       },
-      align: 'center',
+      align: 'left',
       width: '200px',
       sorter: true,
     },
@@ -231,8 +231,7 @@ const MetricTable: React.FC<{
       onChange={handleTableChange}
       pagination={tableParams.pagination}
       rowKey={'contributor'}
-      scroll={{ x: 'max-content', y: '100%' }}
-      className="h-[600px]"
+      scroll={{ x: 'max-content' }}
     />
   );
 };