From 5a2bfb40b7594e90bc58e8342ac9a8b090b299d2 Mon Sep 17 00:00:00 2001 From: laixingyou Date: Thu, 18 Jan 2024 14:57:58 +0800 Subject: [PATCH] refactor: pie chart color Signed-off-by: laixingyou --- apps/web/i18n | 2 +- apps/web/src/common/options/gradientRamp.ts | 1 - .../ContributorContribution.tsx | 13 +++-- .../MetricContributor/Contributors.tsx | 49 +++---------------- .../MetricContributor/contribution.ts | 28 ++++++----- apps/web/src/modules/home/Banner/index.tsx | 4 +- .../modules/settings/profile/ProfileForm.tsx | 2 +- 7 files changed, 32 insertions(+), 67 deletions(-) diff --git a/apps/web/i18n b/apps/web/i18n index 2e5dac97..1754fbe3 160000 --- a/apps/web/i18n +++ b/apps/web/i18n @@ -1 +1 @@ -Subproject commit 2e5dac97f7f003afece8f4adda419cc524e52a96 +Subproject commit 1754fbe3465ea5ee3cc1433d9137a3f810d4da5c diff --git a/apps/web/src/common/options/gradientRamp.ts b/apps/web/src/common/options/gradientRamp.ts index 0caf5f25..291b4ccd 100644 --- 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/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx index 64630c57..a3fca750 100644 --- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx +++ b/apps/web/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 index a34630e2..edd9eb60 100644 --- 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 index 5387bf07..679a6c61 100644 --- 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 index f4a594e1..e00075c3 100644 --- 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 ( -
+
{ const SectionBanner = () => { return (
-
+
diff --git a/apps/web/src/modules/settings/profile/ProfileForm.tsx b/apps/web/src/modules/settings/profile/ProfileForm.tsx index 9d137f00..88f856df 100644 --- a/apps/web/src/modules/settings/profile/ProfileForm.tsx +++ b/apps/web/src/modules/settings/profile/ProfileForm.tsx @@ -163,7 +163,7 @@ const ProfileForm = () => {
-
+
{t('setting:profile.language_preferences')}