refactor: pie chart color

Signed-off-by: laixingyou <[email protected]>
oss-compass · Jan 18, 2024 · 5a2bfb4 · 5a2bfb4
1 parent 2584b28
commit 5a2bfb4
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 67 deletions.
diff --git a/apps/web/i18n b/apps/web/i18n
diff --git a/apps/web/src/common/options/gradientRamp.ts b/apps/web/src/common/options/gradientRamp.ts
@@ -115,7 +115,6 @@ export const gradientRamp = [
     '#f8a8d3',
     '#fccfea',
   ],
-
   [
     '#8c90a1',
     '#787a8c',

diff --git a/...b/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx b/...b/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx
@@ -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') {
@@ -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;
@@ -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;

diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/Contributors.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/Contributors.tsx
@@ -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') {
@@ -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] },
             });
           }
         });
@@ -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;
@@ -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');

diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/contribution.ts b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/contribution.ts
@@ -171,14 +171,14 @@ export const useEcologicalType = () => {
   const { t } = useTranslation();
 
   return [
-    {
-      text: t('analyze:metric_detail:organization_participant'),
-      value: 'organization participant',
-    },
     {
       text: t('analyze:metric_detail:organization_manager'),
       value: 'organization manager',
     },
+    {
+      text: t('analyze:metric_detail:organization_participant'),
+      value: 'organization participant',
+    },
     {
       text: t('analyze:metric_detail:individual_manager'),
       value: 'individual manager',
@@ -202,20 +202,22 @@ export const useGetEcologicalText = () => {
       text: t('analyze:metric_detail:individual'),
       value: 'individual',
     },
-    {
-      text: t('analyze:metric_detail:participant'),
-      value: 'participant',
-    },
+
     {
       text: t('analyze:metric_detail:manager'),
       value: 'manager',
     },
+    {
+      text: t('analyze:metric_detail:participant'),
+      value: 'participant',
+    },
   ];
+  const options = [...ecologicalOptions, ...otherOptions];
   return (text) => {
-    return (
-      ecologicalOptions.find((i) => i.value === text)?.text ||
-      otherOptions.find((i) => i.value === text)?.text ||
-      text
-    );
+    const index = options.findIndex((i) => i.value === text);
+    return {
+      name: options[index]?.text || text,
+      index,
+    };
   };
 };
diff --git a/apps/web/src/modules/home/Banner/index.tsx b/apps/web/src/modules/home/Banner/index.tsx
@@ -7,7 +7,7 @@ import Image from 'next/image';
 
 const Carousel = () => {
   return (
-    <div className="absolute top-[100px] -right-16">
+    <div className="absolute top-[100px] -right-10 overflow-hidden">
       <Image
         width={680}
         height={540}
@@ -21,7 +21,7 @@ const Carousel = () => {
 const SectionBanner = () => {
   return (
     <section className={`${styles.bg}`}>
-      <Center className="relative z-10 mx-auto h-[620px] md:h-[500px]">
+      <Center className="relative z-10 mx-auto h-[620px] md:h-[500px] ">
         <Carousel />
         <Search />
       </Center>

diff --git a/apps/web/src/modules/settings/profile/ProfileForm.tsx b/apps/web/src/modules/settings/profile/ProfileForm.tsx
@@ -163,7 +163,7 @@ const ProfileForm = () => {
           </div>
 
           <div className="mb-10">
-            <div className="mb-4 flex items-center font-medium font-medium">
+            <div className="mb-4 flex items-center font-medium">
               {t('setting:profile.language_preferences')}
               <Tooltip
                 arrow