feat: change time limit to 6 months

Signed-off-by: laixingyou <[email protected]>
oss-compass · Mar 1, 2024 · c54c5dc · c54c5dc
1 parent 0afe701
commit c54c5dc
Show file tree

Hide file tree

Showing 12 changed files with 136 additions and 114 deletions.
diff --git a/apps/web/i18n b/apps/web/i18n
diff --git a/apps/web/src/common/utils/url.ts b/apps/web/src/common/utils/url.ts
@@ -126,3 +126,15 @@ export const isValidUrl = (url: string) => {
   const urlRegex = /^(http|https):\/\/[^ "]+$/;
   return urlRegex.test(url);
 };
+
+export const getHubUrl = (origin, name) => {
+  switch (origin) {
+    case 'github':
+      return 'https://github.com/' + name;
+    case 'gitee':
+      return 'https://gitee.com/' + name;
+    // return <SiGitee color="#c71c27" className="mr-0" />;
+    default:
+      return null;
+  }
+};
diff --git a/...ules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable/ContributorName.tsx b/...ules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable/ContributorName.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { IoPeopleCircle } from 'react-icons/io5';
-import Image from 'next/image';
+import { getIcons } from '../utils';
 
 const DomainPersona = ({ name, origin }) => {
   let icon = getIcons(origin, name);
@@ -35,47 +34,5 @@ const getHubUrl = (origin, name) => {
       return null;
   }
 };
-const getIcons = (origin, name) => {
-  switch (origin) {
-    case 'github':
-      return (
-        <div className="relative mr-2 h-6 w-6 overflow-hidden rounded-full border border-gray-100">
-          <Image
-            src={'https://github.com/' + name + '.png'}
-            onError={(e) => (e.currentTarget.src = '/images/github.png')}
-            unoptimized
-            fill={true}
-            style={{
-              objectFit: 'cover',
-            }}
-            alt="icon"
-            placeholder="blur"
-            blurDataURL="/images/github.png"
-          />
-        </div>
-      );
-    case 'gitee':
-      return (
-        <div className="relative mr-2 h-6 w-6 overflow-hidden rounded-full border border-gray-100">
-          <Image
-            src={'https://gitee.com/' + name + '.png'}
-            onError={(e) =>
-              (e.currentTarget.src = '/images/logos/gitee-red.svg')
-            }
-            unoptimized
-            fill={true}
-            style={{
-              objectFit: 'cover',
-            }}
-            alt="icon"
-            placeholder="blur"
-            blurDataURL="/images/logos/gitee-red.svg"
-          />
-        </div>
-      );
-    default:
-      return <IoPeopleCircle />;
-  }
-};
 
 export default DomainPersona;
diff --git a/...odules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable/DomainPersona.tsx b/...odules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable/DomainPersona.tsx
@@ -1,21 +1,21 @@
 import React, { useState, useMemo } from 'react';
 import { useTranslation } from 'next-i18next';
 import { useGetContributionTypeI18n } from '../contribution';
-import { getDomainData } from '../utils';
+import { getDomainData, getIcons } from '../utils';
 import { toFixed } from '@common/utils';
 import classnames from 'classnames';
 import Popper from '@mui/material/Popper';
 
-const PopperContent = ({ dataList, name, active, setActive }) => {
+const PopperContent = ({ dataList, name, active, setActive, origin }) => {
   const { t } = useTranslation();
   const activeItem = dataList
     .find((item) => item.type === active)
     ?.childern.sort((a, b) => b.contribution - a.contribution);
-
   // const allType = ['Code', 'Code Admin', 'Issue', 'Issue Admin', 'Observe'];
   return (
     <div className="right-0 rounded bg-[#fcfcfc] text-xs drop-shadow-md">
       <div className="flex h-10 items-center pl-3 text-sm font-semibold">
+        {getIcons(origin, name)}
         {name + ' ' + t('analyze:metric_detail:domain_persona_details')}
       </div>
       <div className="flex h-[300px]">
@@ -63,7 +63,7 @@ const PopperContent = ({ dataList, name, active, setActive }) => {
   );
 };
 
-const DomainPersona = ({ maxDomain, dataList, name }) => {
+const DomainPersona = ({ maxDomain, dataList, name, origin }) => {
   const contributionTypeMap = useGetContributionTypeI18n();
   const domainData = useMemo(() => {
     return getDomainData(dataList, contributionTypeMap);
@@ -132,6 +132,7 @@ const DomainPersona = ({ maxDomain, dataList, name }) => {
           name={name}
           active={active}
           setActive={setActive}
+          origin={origin}
         />
       </Popper>
     </div>

diff --git a/...eb/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable/index.tsx b/...eb/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable/index.tsx
@@ -25,7 +25,7 @@ import { useHandleQueryParams } from '@modules/analyze/hooks/useHandleQueryParam
 import Dialog from '@common/components/Dialog';
 import Tooltip from '@common/components/Tooltip';
 import ManageOrgEdit from '@common/components/OrgEdit/ManageOrgEdit';
-import useVerifyDetailRange from '@modules/analyze/hooks/useVerifyDetailRange';
+import useVerifyDetailRangeQuery from '@modules/analyze/hooks/useVerifyDetailRangeQuery';
 import { useIsCurrentUser } from '@modules/analyze/hooks/useIsCurrentUser';
 import { FiEdit } from 'react-icons/fi';
 import { GrClose } from 'react-icons/gr';
@@ -53,7 +53,7 @@ const MetricTable: React.FC<{
   const [currentOrgName, setCurrentOrgName] = useState('');
   const [origin, setOrigin] = useState('');
 
-  const { data } = useVerifyDetailRange();
+  const { data } = useVerifyDetailRangeQuery();
   const { isCurrentUser } = useIsCurrentUser();
   const ecologicalOptions = useEcologicalType();
   const mileageOptions = useMileageOptions();
@@ -244,6 +244,7 @@ const MetricTable: React.FC<{
             maxDomain={maxDomain}
             dataList={dataList}
             name={col.contributor}
+            origin={origin}
           />
         );
       },

diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/utils.ts b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/utils.ts
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/utils.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/utils.tsx
@@ -0,0 +1,92 @@
+import { IoPeopleCircle } from 'react-icons/io5';
+import Image from 'next/image';
+
+export const getMaxDomain = (tableData) => {
+  if (tableData?.length > 0) {
+    const filterData = tableData?.map((item) => {
+      let filterCount = item?.contributionTypeList?.reduce(
+        (acc, current) => acc + current.contribution,
+        0
+      );
+      return { ...item, filterCount };
+    });
+    let maxCountElement = filterData?.reduce((prev, current) =>
+      prev?.filterCount > current.filterCount ? prev : current
+    );
+    return maxCountElement.filterCount;
+  } else {
+    return 0;
+  }
+};
+export const getDomainData = (data, contributionTypeMap) => {
+  let arr = data.map((item) => {
+    return { ...item, ...contributionTypeMap[item.contributionType] };
+  });
+  const result = [];
+  arr.forEach(({ color, contribution, text, type }) => {
+    const domainType = result.find((z) => z.type === type);
+    if (domainType) {
+      domainType.contribution += contribution;
+      domainType.childern.push({ text, contribution });
+    } else {
+      result.push({
+        type,
+        color,
+        contribution,
+        childern: [{ text, contribution }],
+      });
+    }
+  });
+  return result.sort((a, b) => {
+    if (a.type < b.type) {
+      return -1;
+    }
+    if (a.type > b.type) {
+      return 1;
+    }
+    return 0;
+  });
+};
+
+export const getIcons = (origin, name) => {
+  switch (origin) {
+    case 'github':
+      return (
+        <div className="relative mr-2 h-6 w-6 overflow-hidden rounded-full border border-gray-100">
+          <Image
+            src={'https://github.com/' + name + '.png'}
+            onError={(e) => (e.currentTarget.src = '/images/github.png')}
+            unoptimized
+            fill={true}
+            style={{
+              objectFit: 'cover',
+            }}
+            alt="icon"
+            placeholder="blur"
+            blurDataURL="/images/github.png"
+          />
+        </div>
+      );
+    case 'gitee':
+      return (
+        <div className="relative mr-2 h-6 w-6 overflow-hidden rounded-full border border-gray-100">
+          <Image
+            src={'https://gitee.com/' + name + '.png'}
+            onError={(e) =>
+              (e.currentTarget.src = '/images/logos/gitee-red.svg')
+            }
+            unoptimized
+            fill={true}
+            style={{
+              objectFit: 'cover',
+            }}
+            alt="icon"
+            placeholder="blur"
+            blurDataURL="/images/logos/gitee-red.svg"
+          />
+        </div>
+      );
+    default:
+      return <IoPeopleCircle />;
+  }
+};
diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/index.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/index.tsx
@@ -9,14 +9,14 @@ import MerticDatePicker from '@modules/analyze/components/NavBar/MerticDatePicke
 import useLabelStatus from '@modules/analyze/hooks/useLabelStatus';
 import { withErrorBoundary } from 'react-error-boundary';
 import ErrorFallback from '@common/components/ErrorFallback';
-import useVerifyDetailRange from '@modules/analyze/hooks/useVerifyDetailRange';
+import useVerifyDetailRangeQuery from '@modules/analyze/hooks/useVerifyDetailRangeQuery';
 import LoadingAnalysis from '@modules/analyze/DataView/Status/LoadingAnalysis';
 import LabelItems from '@modules/analyze/components/NavBar/LabelItems';
 import { useRouter } from 'next/router';
 import { useHandleQueryParams } from '@modules/analyze/hooks/useHandleQueryParams';
 
 const VerifyMetricDetail = () => {
-  const { isLoading } = useVerifyDetailRange();
+  const { isLoading } = useVerifyDetailRangeQuery();
   if (isLoading) {
     return <LoadingAnalysis />;
   }

diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/useVerifyDateRange.ts b/apps/web/src/modules/analyze/DataView/MetricDetail/useVerifyDateRange.ts
@@ -1,12 +1,12 @@
 import { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import { RangeTag, rangeTags, timeRange } from '@modules/analyze/constant';
-import useVerifyDetailRange from '@modules/analyze/hooks/useVerifyDetailRange';
+import useVerifyDetailRangeQuery from '@modules/analyze/hooks/useVerifyDetailRangeQuery';
 
 const contributorDefaultVal = {
-  range: '1M' as RangeTag,
-  timeStart: timeRange['1M'].start,
-  timeEnd: timeRange['1M'].end,
+  range: '6M' as RangeTag,
+  timeStart: timeRange['6M'].start,
+  timeEnd: timeRange['6M'].end,
 };
 export const isDateRange = (range: string) => {
   if (range.includes(' ~ ')) {
@@ -24,7 +24,7 @@ export const isDateRange = (range: string) => {
 const useVerifyDateRange = () => {
   const router = useRouter();
   const range = router.query.range as RangeTag;
-  const { isLoading, data } = useVerifyDetailRange();
+  const { isLoading, data } = useVerifyDetailRangeQuery();
 
   return useMemo(() => {
     if (!range || !data?.verifyDetailDataRange?.status) {

diff --git a/apps/web/src/modules/analyze/components/NavBar/ContributorDateTagPanel.tsx b/apps/web/src/modules/analyze/components/NavBar/ContributorDateTagPanel.tsx
@@ -10,7 +10,7 @@ import 'react-datepicker/dist/react-datepicker.css';
 import { useTranslation } from 'next-i18next';
 import DateRangePicker from './DateRangePicker';
 import Tooltip from '@common/components/Tooltip';
-import useVerifyDetailRange from '@modules/analyze/hooks/useVerifyDetailRange';
+import useVerifyDetailRangeQuery from '@modules/analyze/hooks/useVerifyDetailRangeQuery';
 import { AiOutlineLoading } from 'react-icons/ai';
 
 const ContributorDateTagPanel = ({
@@ -23,7 +23,7 @@ const ContributorDateTagPanel = ({
   const [showRangePicker, setShowRangePicker] = useToggle(false);
   const { range } = useQueryDateRange();
   const { switchRange } = useSwitchRange();
-  const { isLoading, data } = useVerifyDetailRange();
+  const { isLoading, data } = useVerifyDetailRangeQuery();
   if (isLoading) {
     return (
       <div
@@ -47,7 +47,7 @@ const ContributorDateTagPanel = ({
       >
         <div className="flex flex-wrap justify-between px-4 pt-4">
           {rangeTags.map((time, index) => {
-            if (index === 0) {
+            if (index < 3) {
               return (
                 <div
                   className={classnames(

diff --git a/apps/web/src/modules/analyze/hooks/useQueryDateRange.ts b/apps/web/src/modules/analyze/hooks/useQueryDateRange.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import { RangeTag, rangeTags, timeRange } from '../constant';
-import useVerifyDetailRange from '@modules/analyze/hooks/useVerifyDetailRange';
+import useVerifyDetailRangeQuery from '@modules/analyze/hooks/useVerifyDetailRangeQuery';
 import useQueryMetricType from '@modules/analyze/hooks/useQueryMetricType';
 
 const defaultVal = {
@@ -10,9 +10,9 @@ const defaultVal = {
   timeEnd: timeRange['6M'].end,
 };
 const contributorDefaultVal = {
-  range: '1M' as RangeTag,
-  timeStart: timeRange['1M'].start,
-  timeEnd: timeRange['1M'].end,
+  range: '6M' as RangeTag,
+  timeStart: timeRange['6M'].start,
+  timeEnd: timeRange['6M'].end,
 };
 export const isDateRange = (range: string) => {
   if (range.includes(' ~ ')) {
@@ -30,7 +30,7 @@ export const isDateRange = (range: string) => {
 const useQueryDateRange = () => {
   const router = useRouter();
   const range = router.query.range as RangeTag;
-  const { isLoading, data } = useVerifyDetailRange();
+  const { isLoading, data } = useVerifyDetailRangeQuery();
   const topicType = useQueryMetricType();
 
   return useMemo(() => {