From a95c27b4830f3b634a189bd62edadda16ff2bfde Mon Sep 17 00:00:00 2001 From: laixingyou Date: Tue, 28 Nov 2023 15:55:39 +0800 Subject: [PATCH] feat: optimize contributors table and contributor type filter (#273) Signed-off-by: laixingyou --- .../ContributorContribution.tsx | 1 + .../MetricContributor/ContributorTable.tsx | 50 +++++++++---------- .../MetricDetail/MetricContributor/index.tsx | 1 - .../MetricDetail/MetricIssue/IssueTable.tsx | 1 + .../MetricDetail/MetricPr/PrTable.tsx | 1 + apps/web/src/styles/antd.scss | 6 ++- 6 files changed, 32 insertions(+), 28 deletions(-) diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx index 6a5e4a31..95d814c0 100644 --- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx +++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx @@ -39,6 +39,7 @@ const ContributorContribution: React.FC<{ let count = 0; topContributorDistribution.forEach(({ subCount, subName }, index) => { count += subCount; + // const color = `rgba(74, 144, 226, ${1-index * 0.1})`; contributorsData.push({ parentName: getEcologicalText(subTypeName), name: subName, diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable.tsx index 2b936b7a..f79df8ad 100644 --- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable.tsx +++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable.tsx @@ -16,6 +16,7 @@ import { import type { ColumnsType, TablePaginationConfig } from 'antd/es/table'; import type { FilterValue, SorterResult } from 'antd/es/table/interface'; import { useTranslation } from 'next-i18next'; +import Tooltip from '@common/components/Tooltip'; interface TableParams { pagination?: TablePaginationConfig; @@ -112,10 +113,7 @@ const MetricTable: React.FC<{ ) => { let sortOpts = null; let filterOpts = []; - sortOpts = sorter.field && { - type: sorter.field, - direction: sorter.order === 'ascend' ? 'asc' : 'desc', - }; + for (const key in filters) { if (filters.hasOwnProperty(key)) { const transformedObj = { @@ -127,8 +125,19 @@ const MetricTable: React.FC<{ } if (filterOpts.find((i) => i.type === 'contribution_type')) { setFilterContributionType(true); + sortOpts = sorter.field && { + type: + sorter.field === 'contribution' + ? 'contribution_filterd' + : sorter.field, + direction: sorter.order === 'ascend' ? 'asc' : 'desc', + }; } else { setFilterContributionType(false); + sortOpts = sorter.field && { + type: sorter.field, + direction: sorter.order === 'ascend' ? 'asc' : 'desc', + }; } setTableParams({ pagination, @@ -144,6 +153,7 @@ const MetricTable: React.FC<{ align: 'left', width: '200px', sorter: true, + fixed: 'left', }, { title: t('analyze:metric_detail:role_persona'), @@ -172,30 +182,20 @@ const MetricTable: React.FC<{ let arr = list.map( (item) => contributionTypeMap[item.contributionType] ); - let br =

; - let result = null; - if (arr.length < 1) { - return arr[0]; - } - for (let i = 0; i < arr.length; i++) { - if (i == 0) { - result = arr[i]; - } else { - result = ( - - {result} - {br} - {arr[i]} - - ); - } - } - return
{result}
; + const str = arr.join(', '); + return ( + 20 ? str : ''} placement="right"> +
+ {str} +
+ + ); }, filters: useContributionTypeLsit(), filterMode: 'tree', + ellipsis: true, align: 'left', - width: '220px', + width: '250px', }, { title: t('analyze:metric_detail:organization'), @@ -213,7 +213,7 @@ const MetricTable: React.FC<{ (total, obj) => total + obj.contribution, 0 ); - return contribution + ` (${filterCount})`; + return filterCount; } else { return contribution; } diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/index.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/index.tsx index 02a1d9de..29ddb962 100644 --- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/index.tsx +++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/index.tsx @@ -6,7 +6,6 @@ import { Checkbox } from 'antd'; import { useTranslation } from 'next-i18next'; import { useMileageOptions } from './contribution'; import MetricTable from './ContributorTable'; -import ContributorContribution from './ContributorContribution'; import ContributionCount from './ContributionCount'; import ContributorContributors from './Contributors'; import { AiOutlineQuestionCircle } from 'react-icons/ai'; diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/IssueTable.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/IssueTable.tsx index 99bf337d..18d2baec 100644 --- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/IssueTable.tsx +++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricIssue/IssueTable.tsx @@ -103,6 +103,7 @@ const MetricTable: React.FC<{ align: 'left', width: '200px', sorter: true, + fixed: 'left', }, { title: 'URL', diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/PrTable.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/PrTable.tsx index 19038208..f733719a 100644 --- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/PrTable.tsx +++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricPr/PrTable.tsx @@ -103,6 +103,7 @@ const MetricTable: React.FC<{ align: 'left', width: '200px', sorter: true, + fixed: 'left', }, { title: 'URL', diff --git a/apps/web/src/styles/antd.scss b/apps/web/src/styles/antd.scss index a2fef9f1..837bfd53 100644 --- a/apps/web/src/styles/antd.scss +++ b/apps/web/src/styles/antd.scss @@ -1,5 +1,7 @@ -:where(.css-dev-only-do-not-override-pr0fja).ant-btn-primary { - background-color: #1677ff !important; +.ant-table-filter-dropdown-btns { + .ant-btn-primary { + background-color: #1677ff !important; + } } // .ant-spin-nested-loading { // height: 100%;