Skip to content

Commit

Permalink
feat: add guest filter and table update (#271)
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 Nov 27, 2023
1 parent 9d8400d commit be0f7f6
Show file tree
Hide file tree
Showing 22 changed files with 279 additions and 412 deletions.
2 changes: 1 addition & 1 deletion apps/web/i18n
Submodule i18n updated 2 files
+10 −1 en/analyze.json
+10 −1 zh/analyze.json
14 changes: 12 additions & 2 deletions apps/web/src/common/components/Tab.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 }) => (
Expand All @@ -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>
);
})}
Expand Down
5 changes: 1 addition & 4 deletions apps/web/src/modules/analyze/DataView/MetricDetail/MetricChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
}, []);

Expand Down
31 changes: 31 additions & 0 deletions apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributionCount.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
23 changes: 15 additions & 8 deletions ...b/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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}
Expand Down
67 changes: 38 additions & 29 deletions .../src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorOrganizations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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}
Expand Down
19 changes: 9 additions & 10 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 @@ -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',
},
{
Expand Down Expand Up @@ -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',
},
{
Expand All @@ -218,7 +218,7 @@ const MetricTable: React.FC<{
return contribution;
}
},
align: 'center',
align: 'left',
width: '200px',
sorter: true,
},
Expand All @@ -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' }}
/>
);
};
Expand Down
Loading

2 comments on commit be0f7f6

@vercel
Copy link

@vercel vercel bot commented on be0f7f6 Nov 27, 2023

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:

storybook – ./

compass-web-2l68.vercel.app
storybook-compass-team.vercel.app
storybook-git-main-compass-team.vercel.app

@vercel
Copy link

@vercel vercel bot commented on be0f7f6 Nov 27, 2023

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-compass-team.vercel.app
compass-web-git-main-compass-team.vercel.app
compass-web-preview.vercel.app

Please sign in to comment.