From 6b9c14e854e7bd1a80536cd269c4afb7e88319ac Mon Sep 17 00:00:00 2001 From: laixingyou Date: Tue, 6 Feb 2024 11:32:21 +0800 Subject: [PATCH] feat: DistributionMap full screen optimize and copyright updata (#313) Signed-off-by: laixingyou --- apps/web/i18n | 2 +- .../src/common/components/EChartGl/Legend.tsx | 67 ++++++++++ .../src/common/components/EChartGl/index.tsx | 2 +- .../MetricContributor/DomainPersona/index.tsx | 126 ++++++++++-------- .../DataView/OverviewSummary/index.tsx | 39 +++++- .../components/DistributionMap/index.tsx | 40 ++++-- .../src/modules/auth/components/Copyright.tsx | 2 +- apps/web/src/modules/home/Explain/Chart.tsx | 2 +- apps/web/src/modules/home/Explain/index.tsx | 66 +-------- 9 files changed, 205 insertions(+), 141 deletions(-) create mode 100644 apps/web/src/common/components/EChartGl/Legend.tsx diff --git a/apps/web/i18n b/apps/web/i18n index cbd78835..8d16305e 160000 --- a/apps/web/i18n +++ b/apps/web/i18n @@ -1 +1 @@ -Subproject commit cbd788355137bc5bbf4dc8469a0eed981be64166 +Subproject commit 8d16305ebde69a2dffa6b3cba58a9d6979b0927f diff --git a/apps/web/src/common/components/EChartGl/Legend.tsx b/apps/web/src/common/components/EChartGl/Legend.tsx new file mode 100644 index 00000000..52c1885f --- /dev/null +++ b/apps/web/src/common/components/EChartGl/Legend.tsx @@ -0,0 +1,67 @@ +import { useTranslation } from 'react-i18next'; +import LinkX from '@common/components/LinkX'; +import Productivity from 'public/images/chart-legend/cube-1.svg'; +import Robustness from 'public/images/chart-legend/cube-2.svg'; +import NicheCreation from 'public/images/chart-legend/cube-3.svg'; + +const Legend = () => { + const { t } = useTranslation(); + + return ( +
+
+
+ + {t('metrics_models:dimensionality:topic:productivity')} +
+
+ {t('metrics_models:dimensionality:productivity')} +
+
+ + {t('metrics_models:dimensionality:topic:niche_creation')} +
+
+ {t('metrics_models:dimensionality:niche_creation')} +
+
+ + {t('metrics_models:dimensionality:topic:robustness')} +
+
+ {t('metrics_models:dimensionality:robustness')} +
+
+
+
+
+ {t('metrics_models:dimensionality:type:collaboration')} +
+
+ {t('metrics_models:dimensionality:collaboration')} +
+
+
+ {t('metrics_models:dimensionality:type:contributor')} +
+
+ {t('metrics_models:dimensionality:contributor')} +
+
+
+ {t('metrics_models:dimensionality:type:software')} +
+
+ {t('metrics_models:dimensionality:software')} +
+
+ +
+ ); +}; + +export default Legend; diff --git a/apps/web/src/common/components/EChartGl/index.tsx b/apps/web/src/common/components/EChartGl/index.tsx index d21b6abb..0bf2b735 100644 --- a/apps/web/src/common/components/EChartGl/index.tsx +++ b/apps/web/src/common/components/EChartGl/index.tsx @@ -68,7 +68,7 @@ const EChartGl: React.FC = ({ const chart = getInstanceByDom(chartRef.current)!; chart?.resize({ width: 'auto', - height: Number(height) > 520 ? 520 : 280, + height: Number(height) > 520 ? height - 80 : 280, }); } }, []); diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/DomainPersona/index.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/DomainPersona/index.tsx index 140b4414..b901cc61 100644 --- a/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/DomainPersona/index.tsx +++ b/apps/web/src/modules/analyze/DataView/MetricDetail/MetricContributor/DomainPersona/index.tsx @@ -47,7 +47,7 @@ const PopperContent = ({ dataList, name, active, setActive }) => {
- {activeItem.map(({ text, contribution }) => { + {activeItem?.map(({ text, contribution }) => { return (
{ }; return ( - { + // { + // setActive(''); + // popperOpen && togglePopperOpen(() => false); + // }} + // > +
{ setActive(''); popperOpen && togglePopperOpen(() => false); }} > -
-
- {domainData.map(({ type, color, contribution }) => { - const width = toFixed((contribution / maxDomain) * 100, 2); - const bg = { - backgroundColor: color, - width: `${width}%`, - }; - return active === type ? ( -
-
-
- ) : ( -
{ - handleClick(e, type); - }} - key={type} - style={{ backgroundColor: color, width: `${width}%` }} - className="h-2 cursor-pointer" - >
- ); - })} -
- - - +
+ {domainData.map(({ type, color, contribution }) => { + const width = toFixed((contribution / maxDomain) * 100, 2); + const bg = { + backgroundColor: color, + width: `${width}%`, + }; + return active === type ? ( +
+
+
+ ) : ( +
{ + // handleClick(e, type); + // }} + key={type} + onMouseEnter={(e) => { + handleClick(e, type); + }} + style={{ backgroundColor: color, width: `${width}%` }} + className="h-2 cursor-pointer" + >
+ ); + })}
- + + + +
+ // { - const { items } = useMetricQueryData(); + const { items, loading } = useMetricQueryData(); + if (loading) { + return ; + } return ; }; - +const Loading = () => ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+); export default withErrorBoundary(OverviewSummary, { FallbackComponent: ErrorFallback, onError(error, info) { diff --git a/apps/web/src/modules/analyze/components/DistributionMap/index.tsx b/apps/web/src/modules/analyze/components/DistributionMap/index.tsx index c795d334..26eb1ae2 100644 --- a/apps/web/src/modules/analyze/components/DistributionMap/index.tsx +++ b/apps/web/src/modules/analyze/components/DistributionMap/index.tsx @@ -9,6 +9,7 @@ import Productivity from 'public/images/chart-legend/cube-1.svg'; import Robustness from 'public/images/chart-legend/cube-2.svg'; import NicheCreation from 'public/images/chart-legend/cube-3.svg'; import { useEchartsGlOpts } from '@modules/analyze/components/DistributionMap/EChartGlOpt'; +import Legend from '@common/components/EChartGl/Legend'; const EChartGl = dynamic(() => import('@common/components/EChartGl'), { ssr: false, @@ -31,22 +32,37 @@ const DistributionMap = () => { )} > - {(containerRef) => ( -
-
- + {(containerRef, fullScreen) => + fullScreen ? ( +
+
+ +
+
- -
- )} + ) : ( +
+
+ +
+ +
+ ) + } ); }; -const Legend = () => { +const MiniLegend = () => { const { t } = useTranslation(); return ( diff --git a/apps/web/src/modules/auth/components/Copyright.tsx b/apps/web/src/modules/auth/components/Copyright.tsx index c37dc5ac..cc170d37 100644 --- a/apps/web/src/modules/auth/components/Copyright.tsx +++ b/apps/web/src/modules/auth/components/Copyright.tsx @@ -3,7 +3,7 @@ import React from 'react'; const Copyright = () => { return (
-

Copyright©2023 OSS Compass. All Rights Reserved.

+

Copyright©2024 OSS Compass. All Rights Reserved.

); }; diff --git a/apps/web/src/modules/home/Explain/Chart.tsx b/apps/web/src/modules/home/Explain/Chart.tsx index 6fb56ea7..70d7eb9c 100644 --- a/apps/web/src/modules/home/Explain/Chart.tsx +++ b/apps/web/src/modules/home/Explain/Chart.tsx @@ -11,7 +11,7 @@ const Chart = () => { const containerRef = useRef(null); const { echartsOpts } = useOptions(); return ( -
+
{ const { t } = useTranslation(); @@ -13,7 +10,7 @@ const SectionExplain = () => {
{t('home:oss_eco_evaluation_system')} @@ -26,63 +23,4 @@ const SectionExplain = () => {
); }; -const Legend = () => { - const { t } = useTranslation(); - - return ( -
-
-
- - {t('metrics_models:dimensionality:topic:productivity')} -
-
- {t('metrics_models:dimensionality:productivity')} -
-
- - {t('metrics_models:dimensionality:topic:niche_creation')} -
-
- {t('metrics_models:dimensionality:niche_creation')} -
-
- - {t('metrics_models:dimensionality:topic:robustness')} -
-
- {t('metrics_models:dimensionality:robustness')} -
-
-
-
-
- {t('metrics_models:dimensionality:type:collaboration')} -
-
- {t('metrics_models:dimensionality:collaboration')} -
-
-
- {t('metrics_models:dimensionality:type:contributor')} -
-
- {t('metrics_models:dimensionality:contributor')} -
-
-
- {t('metrics_models:dimensionality:type:software')} -
-
- {t('metrics_models:dimensionality:software')} -
-
- -
- ); -}; export default SectionExplain;