Skip to content

Commit

Permalink
feat :refactor report page (#267)
Browse files Browse the repository at this point in the history
Signed-off-by: laixingyou <[email protected]>
  • Loading branch information
coder-sett authored Nov 24, 2023
1 parent 0e1295c commit 9400a86
Show file tree
Hide file tree
Showing 51 changed files with 1,317 additions and 696 deletions.
2 changes: 1 addition & 1 deletion apps/web/i18n
20 changes: 11 additions & 9 deletions apps/web/src/common/components/BaseCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -119,15 +119,17 @@ const BaseCard: React.FC<BaseCardProps> = ({
</span>
</a>
</h3>
<div className="relative mb-4 text-xs text-[#585858] ">
<DocPopper
description={description}
weight={weight}
threshold={threshold}
detail={detail}
notes={notes}
/>
</div>
{description && (
<div className="relative mb-4 text-xs text-[#585858] ">
<DocPopper
description={description}
weight={weight}
threshold={threshold}
detail={detail}
notes={notes}
/>
</div>
)}
<div className="absolute right-4 top-4 flex items-center md:hidden">
{typeof headRight === 'function'
? headRight(cardRef, fullScreen, setFullScreen)
Expand Down
9 changes: 5 additions & 4 deletions apps/web/src/common/components/Tab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import classnames from 'classnames';

const Tab: React.FC<{
options: { value: string; label: string }[];
options: { value: string; label: string; disable?: boolean }[];
value: string;
onChange: (v: string) => void;
}> = ({ options, value, onChange }) => (
Expand All @@ -13,10 +13,11 @@ const Tab: React.FC<{
<div
key={option.label}
className={classnames(
'text-steel cursor-pointer px-4 py-1 text-sm ',
{ 'rounded bg-white text-black shadow': option.value === value }
'text-steel cursor-pointer px-3 py-1 text-sm ',
{ 'rounded bg-white text-black shadow': option.value === value },
{ 'cursor-not-allowed text-[#ABABAB]': option.disable === true }
)}
onClick={() => onChange(option.value)}
onClick={() => !option.disable && onChange(option.value)}
>
{option.label}
</div>
Expand Down
19 changes: 9 additions & 10 deletions apps/web/src/common/components/Table/index.tsx
Original file line number Diff line number Diff line change
@@ -1,30 +1,29 @@
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 [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}>
<div>
<ConfigProvider locale={local}>
<Table
{...props}
rowClassName={(_record, i) => (i % 2 === 1 ? '!bg-[#fafafa]' : '')}
bordered
scroll={{ x: 'max-content', y: scrollY }}
// bordered
/>
</ConfigProvider>
</div>
Expand Down
41 changes: 41 additions & 0 deletions apps/web/src/modules/analyze/DataView/ContributorDetail.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React from 'react';
import { useTranslation } from 'next-i18next';
import TopicTitle from '@modules/analyze/components/TopicTitle';
import { Topic } from '@modules/analyze/components/SideBar/config';
import { CiGrid41 } from 'react-icons/ci';
import MetricDashboard from '@modules/analyze/DataView/MetricDetail/MetricDashboard';
import ProductivityIcon from '@modules/analyze/components/SideBar/assets/Productivity.svg';
import MetricDetail from './MetricDetail';

const ContributorDetail = () => {
const { t } = useTranslation();

return (
<>
<h1
className={
'group relative z-20 mt-2 mb-8 flex scroll-mt-[200px] text-3xl font-semibold md:px-4 md:text-3xl'
}
id={Topic.Overview}
>
<CiGrid41 className="mt-2 mr-2 h-[21px] w-[21px] flex-shrink-0" />
{t('analyze:overview')}
<a href={`#${Topic.Overview}`}>
<span className="group-hover:text-primary invisible ml-2 cursor-pointer group-hover:visible">
#
</span>
</a>
</h1>
<MetricDashboard />
<TopicTitle
icon={<ProductivityIcon className="mt-2 mr-2 h-[21px] w-[21px]" />}
id={Topic.Productivity}
>
{t('analyze:topic.productivity')}
</TopicTitle>
<MetricDetail />
</>
);
};

export default ContributorDetail;
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useRef, useMemo } from 'react';
import { useEcoContributorsOverviewQuery } from '@oss-compass/graphql';
import client from '@common/gqlClient';
import { useTranslation } from 'next-i18next';
import MetricChart from '@modules/analyze/components/MetricDetail/MetricChart';
import MetricChart from '@modules/analyze/DataView/MetricDetail/MetricChart';
import { useEcologicalType } from './contribution';
import { gradientRamp } from '@common/options';
import type { EChartsOption } from 'echarts';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useRef, useMemo } from 'react';
import { useContributorsOverviewQuery } from '@oss-compass/graphql';
import client from '@common/gqlClient';
import { useTranslation } from 'next-i18next';
import MetricChart from '@modules/analyze/components/MetricDetail/MetricChart';
import MetricChart from '@modules/analyze/DataView/MetricDetail/MetricChart';
import { useEcologicalType } from './contribution';
import type { EChartsOption } from 'echarts';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useRef, useMemo } from 'react';
import { useOrgContributorsOverviewQuery } from '@oss-compass/graphql';
import client from '@common/gqlClient';
import { useTranslation } from 'next-i18next';
import MetricChart from '@modules/analyze/components/MetricDetail/MetricChart';
import MetricChart from '@modules/analyze/DataView/MetricDetail/MetricChart';
import { gradientRamp } from '@common/options';
import type { EChartsOption } from 'echarts';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ const MetricTable: React.FC<{
pagination: {
current: 1,
pageSize: 10,
showSizeChanger: false,
position: ['bottomCenter'],
showTotal: (total) => {
return `Total ${total} items`;
Expand Down Expand Up @@ -218,21 +219,21 @@ const MetricTable: React.FC<{
}
},
align: 'center',
width: '100px',
width: '200px',
sorter: true,
},
];
return (
<div className="flex-1 pt-4">
<MyTable
columns={columns}
dataSource={tableData}
loading={isLoading}
onChange={handleTableChange}
pagination={tableParams.pagination}
rowKey={'contributor'}
/>
</div>
<MyTable
columns={columns}
dataSource={tableData}
loading={isLoading}
onChange={handleTableChange}
pagination={tableParams.pagination}
rowKey={'contributor'}
scroll={{ x: 'max-content', y: '100%' }}
className="h-[600px]"
/>
);
};
export default MetricTable;
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
import React, { useState } from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import useQueryDateRange from '@modules/analyze/hooks/useQueryDateRange';
import { Checkbox } from 'antd';
import { useTranslation } from 'next-i18next';
import { useMileageOptions } from './contribution';
import MetricTable from './ContributorTable';
import ContributorContribution from './ContributorContribution';
import ContributorOrganizations from './ContributorOrganizations';
import ContributorContributors from './ContributorContributors';
import { AiOutlineQuestionCircle } from 'react-icons/ai';
import Tooltip from '@common/components/Tooltip';
import useLabelStatus from '@modules/analyze/hooks/useLabelStatus';
import { ContributorsPersona } from '@modules/analyze/components/SideBar/config';
import BaseCard from '@common/components/BaseCard';

const MetricContributor = () => {
const { t } = useTranslation();
const { verifiedItems } = useLabelStatus();
const { label, level } = verifiedItems[0];
const [tab, setTab] = useState('1');
const { timeStart, timeEnd } = useQueryDateRange();
const options = useMileageOptions();
const [mileage, setMileage] = useState<string[]>(['core', 'guest']);
const onChange = (checkedValues: string[]) => {
setMileage(checkedValues);
};
let source;
switch (tab) {
case '1': {
source = (
<MetricTable
label={label}
level={level}
beginDate={timeStart}
endDate={timeEnd}
mileage={mileage}
/>
);
break;
}
case '2': {
source = (
<ContributorContribution
label={label}
level={level}
beginDate={timeStart}
endDate={timeEnd}
mileage={mileage}
/>
);
break;
}
case '3': {
source = (
<ContributorOrganizations
label={label}
level={level}
beginDate={timeStart}
endDate={timeEnd}
mileage={mileage}
/>
);
break;
}
case '4': {
source = (
<ContributorContributors
label={label}
level={level}
beginDate={timeStart}
endDate={timeEnd}
mileage={mileage}
/>
);
break;
}
default: {
break;
}
}
return (
<BaseCard
title={t('metrics_models:contributors_persona.metrics.contributor')}
id={ContributorsPersona.Contributor}
bodyClass="h-[650px]"
>
<div>
<Tabs
classes={{ flexContainer: 'border-b', indicator: '!bg-black' }}
value={tab}
onChange={(e, v) => {
setTab(v);
}}
aria-label="Tabs where selection follows focus"
selectionFollowsFocus
>
<Tab
disableRipple
classes={{ root: '!normal-case', selected: '!text-black ' }}
label={t('analyze:metric_detail:persona_detail')}
value="1"
></Tab>
<Tab
disableRipple
classes={{
root: '!normal-case',
selected: '!text-black !normal-case',
}}
label={t('analyze:metric_detail:contribution')}
value="2"
/>
<Tab
disableRipple
classes={{
root: '!normal-case',
selected: '!text-black !normal-case',
}}
label={t('analyze:metric_detail:organization')}
value="3"
/>
<Tab
disableRipple
classes={{
root: '!normal-case',
selected: '!text-black !normal-case',
}}
label={t('analyze:metric_detail:contributor')}
value="4"
/>
</Tabs>
<div className="absolute right-1 top-2.5 flex lg:hidden">
<span className="mr-2 flex items-center font-medium">
{t('analyze:metric_detail:milestone_persona_filter')}
<Tooltip
arrow
title={
<>
<div>
<span className="font-xs font-semibold">
{t('analyze:metric_detail:core')} :
</span>
{t('analyze:metric_detail:core_desc')}
</div>
<div>
<span className="font-xs font-semibold">
{t('analyze:metric_detail:regular')} :
</span>
{t('analyze:metric_detail:regular_desc')}
</div>
</>
}
placement="right"
>
<span className="ml-1 text-gray-400">
<AiOutlineQuestionCircle />
</span>
</Tooltip>
</span>
<span className="mr-2">:</span>
<Checkbox.Group
options={options}
defaultValue={['core', 'guest']}
onChange={onChange}
/>
</div>

<div className="mt-2 flex h-[600px] flex-1 flex-col">{source}</div>
</div>
</BaseCard>
);
};

export default MetricContributor;
Loading

1 comment on commit 9400a86

@vercel
Copy link

@vercel vercel bot commented on 9400a86 Nov 24, 2023

Choose a reason for hiding this comment

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

Please sign in to comment.