Skip to content

Commit

Permalink
refactor: add table download and pie chart color (#303)
Browse files Browse the repository at this point in the history 
Signed-off-by: laixingyou <[email protected]>
  • Loading branch information
@coder-sett
coder-sett authored Jan 22, 2024
1 parent b7f8594 commit a2079a2
Show file tree
Hide file tree
Showing 14 changed files with 180 additions and 167 deletions.
2 changes: 1 addition & 1 deletion apps/web/i18n
Submodule i18n updated 2 files
+4 −1 en/setting.json
+4 −1 zh/setting.json
65 changes: 60 additions & 5 deletions apps/web/src/common/components/Table/Download.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,68 @@
import React, { useState } from 'react';
import { useTranslation } from 'next-i18next';
import { BsDownload } from 'react-icons/bs';
import { AiOutlineLoading } from 'react-icons/ai';
import { useRequest } from 'ahooks';
import {
apiDownloadFiles,
Status,
} from '@modules/analyze/DataView/MetricDetail/tableDownload';

const Download = ({ downloadFun }: { downloadFun: () => void }) => {
const { t } = useTranslation();
const [loadingDownLoad, setLoadingDownLoad] = useState(false);
// 对象驼峰转下划线
const objectHumpToLine = (obj) => {
var newObj = new Object();
for (let key in obj) {
newObj[key.replace(/([A-Z])/g, '_$1').toLowerCase()] = obj[key];
}
return newObj;
};
const Download = ({
beginFun,
pollingFun,
query,
fileName,
}: {
beginFun: (query) => Promise<any>;
pollingFun: (uuid) => Promise<any>;
query: any;
fileName: string;
}) => {
const newQuery = objectHumpToLine(query);
newQuery['sort_opts'] && (newQuery['sort_opts'] = [newQuery['sort_opts']]);

const [loadingDownLoad, setLoadingDownLoad] = useState(false);
const downloadFinish = () => setLoadingDownLoad(false);
const { run, cancel } = useRequest(pollingFun, {
pollingInterval: 3000,
pollingWhenHidden: false,
manual: true,
onSuccess: ({ data }, params) => {
if (data.status === Status.COMPLETE && data.downdload_path) {
apiDownloadFiles(data.downdload_path, fileName, downloadFinish);
cancel();
} else if (data.status === Status.UNKNOWN) {
downloadFinish();
cancel();
throw new Error('Download Error');
}
},
});
const downloadFun = async () => {
try {
const { data } = await beginFun(newQuery);
if (data.code === 200 && data.status === Status.PENDING) {
setTimeout(() => {
run(data.uuid);
}, 2000);
} else if (data.status === Status.COMPLETE && data.downdload_path) {
apiDownloadFiles(data.downdload_path, fileName, downloadFinish);
} else {
throw new Error('Download Error');
}
} catch (e) {
console.log(e);
downloadFinish();
}
};
return (
<>
<div className="flex h-7 w-10 cursor-pointer items-center justify-center rounded-sm border border-[#3f60ef] text-xs text-[#3f60ef]">
Expand All @@ -18,7 +74,6 @@ const Download = ({ downloadFun }: { downloadFun: () => void }) => {
onClick={async () => {
setLoadingDownLoad(true);
await downloadFun();
setLoadingDownLoad(false);
}}
>
<BsDownload />
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/common/components/Table/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const MyTable = (props) => {
<ConfigProvider locale={local}>
<Table
{...props}
rowClassName={(_record, i) => (i % 2 === 1 ? '!bg-[#fafafa]' : '')}
// rowClassName={(_record, i) => (i % 2 === 1 ? '!bg-[#fafafa]' : '')}
// bordered
/>
</ConfigProvider>
Expand Down
1 change: 0 additions & 1 deletion apps/web/src/common/options/gradientRamp.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,6 @@ export const gradientRamp = [
'#f8a8d3',
'#fccfea',
],

[
'#8c90a1',
'#787a8c',
Expand Down
13 changes: 6 additions & 7 deletions ...b/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,9 +96,8 @@ const getSeriesFun = (data, onlyIdentity, onlyOrg, getEcologicalText) => {
);
let distribution = list.flatMap((i) => i.topContributorDistribution);
distribution.sort((a, b) => b.subCount - a.subCount);
const name = getEcologicalText(item);

const colorList = gradientRamp[i];
const { name, index } = getEcologicalText(item);
const colorList = gradientRamp[index];
let count = 0;
let otherCount = 0;
if (item === 'organization') {
Expand Down Expand Up @@ -155,8 +154,8 @@ const getSeriesFun = (data, onlyIdentity, onlyOrg, getEcologicalText) => {
const ecoContributorsOverview = data.ecoContributorsOverview;
ecoContributorsOverview.forEach((item, i) => {
const { subTypeName, topContributorDistribution } = item;
const name = getEcologicalText(subTypeName);
const colorList = gradientRamp[i];
const { name, index } = getEcologicalText(subTypeName);
const colorList = gradientRamp[index];
let count = 0;
topContributorDistribution.forEach(({ subCount, subName }, index) => {
count += subCount;
Expand Down Expand Up @@ -321,8 +320,8 @@ const OrgContributorContribution: React.FC<{
const orgContributionDistribution = data.orgContributionDistribution;
orgContributionDistribution.forEach((item, i) => {
const { subTypeName, topContributorDistribution } = item;
const name = getEcologicalText(subTypeName);
const colorList = gradientRamp[i];
const { name, index } = getEcologicalText(subTypeName);
const colorList = gradientRamp[index];
let count = 0;
topContributorDistribution.forEach(({ subCount, subName }, index) => {
count += subCount;
Expand Down
51 changes: 26 additions & 25 deletions apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,13 @@ import {
useEcologicalType,
useMileageOptions,
} from './contribution';
import { Tag } from 'antd';
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';
import Download from '@common/components/Table/Download';
import { contributorDownload } from '../tableDownload';
import { getContributorPolling, getContributorExport } from '../tableDownload';
import { useRouter } from 'next/router';
import { useHandleQueryParams } from '@modules/analyze/hooks/useHandleQueryParams';
interface TableParams {
Expand Down Expand Up @@ -58,8 +59,7 @@ const MetricTable: React.FC<{
const defaultFilterOpts = queryFilterOpts ? JSON.parse(queryFilterOpts) : [];
const defaultSortOpts = router.query?.sortOpts
? JSON.parse(router.query?.sortOpts as string)
: [];
console.log(1);
: null;
const [filterOpts, setFilterOpts] = useState(defaultFilterOpts || []);
const filterContributionType = useMemo(() => {
return filterOpts.find((i) => i.type === 'contribution_type');
Expand Down Expand Up @@ -133,7 +133,6 @@ const MetricTable: React.FC<{
) => {
let sortOpts = null;
let filterOpts = [];
console.log(filters);
for (const key in filters) {
if (filters.hasOwnProperty(key)) {
const transformedObj = {
Expand Down Expand Up @@ -208,28 +207,32 @@ const MetricTable: React.FC<{
let arr = list.map(
(item) => contributionTypeMap[item.contributionType]
);
const length = arr.join(', ')?.length;
const str = arr.map((obj, index) => (
<span key={index} style={{ color: obj.color }}>
{arr.length - 1 == index ? obj.text : obj.text + ', '}
</span>
));
return (
<Tooltip arrow title={length > 27 ? str : ''} placement="right">
<div className="line-clamp-1 w-[218px] !whitespace-normal">
{str}
let sortObj = arr.reduce((result, item) => {
(result[item.color] = result[item.color] || []).push(item);
return result;
}, {});
let newArr = Object.keys(sortObj).sort();
const str = newArr.map((item) => {
return (
<div key={item} className="line-clamp-1 my-1">
{sortObj[item]?.map((obj, index) => (
<Tag key={index} color={obj.color}>
{obj.text}
</Tag>
))}
</div>
</Tooltip>
);
);
});
return str;
},
filters: useContributionTypeLsit(),
defaultFilteredValue:
defaultFilterOpts.find((i) => i.type === 'contribution_type')?.values ||
null,
filterMode: 'tree',
ellipsis: true,
// ellipsis: { showTitle: true },
align: 'left',
width: '250px',
width: '590px',
},
{
title: t('analyze:metric_detail:organization'),
Expand All @@ -253,20 +256,18 @@ const MetricTable: React.FC<{
}
},
align: 'left',
width: '200px',
width: '120px',
sorter: true,
},
];
return (
<>
<div className="absolute right-0 top-2">
<Download
downloadFun={() =>
contributorDownload(
query,
t('analyze:metric_detail:contributor_data_table')
)
}
beginFun={getContributorExport}
pollingFun={getContributorPolling}
query={query}
fileName={t('analyze:metric_detail:contributor_data_table')}
/>
</div>
<MyTable
Expand Down
49 changes: 7 additions & 42 deletions apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/Contributors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,8 @@ const getSeriesFun = (data, onlyIdentity, onlyOrg, getEcologicalText) => {
);
let distribution = list.flatMap((i) => i.topContributorDistribution);
distribution.sort((a, b) => b.subCount - a.subCount);
const name = getEcologicalText(item);

const colorList = gradientRamp[i];
const { name, index } = getEcologicalText(item);
const colorList = gradientRamp[index];
let count = 0;
let otherCount = 0;
if (item === 'organization') {
Expand All @@ -48,17 +47,17 @@ const getSeriesFun = (data, onlyIdentity, onlyOrg, getEcologicalText) => {
}, []);
}

distribution.forEach((z, index) => {
distribution.forEach((z, y) => {
const { subCount, subName } = z;
count += subCount;
if (subName == 'other' || index > 10) {
if (subName == 'other' || y > 10) {
otherCount += subCount;
} else {
contributorsData.push({
parentName: name,
name: subName,
value: subCount,
itemStyle: { color: colorList[index + 1] },
itemStyle: { color: colorList[y + 1] },
});
}
});
Expand Down Expand Up @@ -86,8 +85,8 @@ const getSeriesFun = (data, onlyIdentity, onlyOrg, getEcologicalText) => {
const orgContributorsDistribution = data.orgContributorsDistribution;
orgContributorsDistribution.forEach((item, i) => {
const { subTypeName, topContributorDistribution } = item;
const name = getEcologicalText(subTypeName);
const colorList = gradientRamp[i];
const { name, index } = getEcologicalText(subTypeName);
const colorList = gradientRamp[index];
let count = 0;
topContributorDistribution.forEach(({ subCount, subName }, index) => {
count += subCount;
Expand Down Expand Up @@ -140,40 +139,6 @@ const ContributorContributors: React.FC<{
});

const getSeries = useMemo(() => {
// if (data?.orgContributorsDistribution?.length > 0) {
// const orgContributorsDistribution = data.orgContributorsDistribution;
// orgContributorsDistribution.forEach((item, i) => {
// const { subTypeName, topContributorDistribution } = item;
// const name = getEcologicalText(subTypeName);
// const colorList = gradientRamp[i];
// let count = 0;
// topContributorDistribution.forEach(({ subCount, subName }, index) => {
// count += subCount;
// contributorsData.push({
// parentName: name,
// name: subName,
// value: subCount,
// itemStyle: { color: colorList[index + 1] },
// });
// });
// legend.push({
// name: name,
// itemStyle: { color: colorList[0] },
// });
// allCount += count;
// ecoData.push({
// name: name,
// value: count,
// itemStyle: { color: colorList[0] },
// });
// });
// }
// return {
// legend,
// allCount,
// ecoData,
// contributorsData,
// };
return getSeriesFun(data, onlyIdentity, onlyOrg, getEcologicalText);
}, [data, onlyIdentity, onlyOrg, getEcologicalText]);
const unit: string = t('analyze:metric_detail:contributor_unit');
Expand Down
Loading

1 comment on commit a2079a2

@vercel
Copy link

@vercel vercel bot commented on a2079a2 Jan 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

compass-web – ./

compass-web-git-main-compass-team.vercel.app
compass-web-compass-team.vercel.app
compass-web-preview.vercel.app

Please sign in to comment.