feat: DistributionMap full screen optimize

Signed-off-by: laixingyou <[email protected]>
oss-compass · Feb 6, 2024 · cb8b16c · cb8b16c
1 parent 7445111
commit cb8b16c
Show file tree

Hide file tree

Showing 9 changed files with 205 additions and 141 deletions.
diff --git a/apps/web/i18n b/apps/web/i18n
diff --git a/apps/web/src/common/components/EChartGl/Legend.tsx 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 (
+    <div className="flex h-full w-[440px] flex-col justify-center bg-[#eff1f1] py-6 px-4 text-xs md:hidden">
+      <div className="my-4">
+        <div className="flex w-[155px] items-center gap-1 font-semibold">
+          <Productivity />
+          {t('metrics_models:dimensionality:topic:productivity')}
+        </div>
+        <div className="ml-5 mt-2">
+          {t('metrics_models:dimensionality:productivity')}
+        </div>
+        <div className="mt-3 flex w-[155px] items-center gap-1 font-semibold">
+          <NicheCreation />
+          {t('metrics_models:dimensionality:topic:niche_creation')}
+        </div>
+        <div className="ml-5 mt-2">
+          {t('metrics_models:dimensionality:niche_creation')}
+        </div>
+        <div className="mt-3 flex w-[155px] items-center gap-1 font-semibold">
+          <Robustness />
+          {t('metrics_models:dimensionality:topic:robustness')}
+        </div>
+        <div className="ml-5 mt-2">
+          {t('metrics_models:dimensionality:robustness')}
+        </div>
+      </div>
+      <div className="mt-3 border-t py-4 ">
+        <div className="flex items-center gap-1 font-semibold">
+          <div className="mt-1 h-4 w-4 border border-[#8b8988] bg-[#fff7cf]" />
+          {t('metrics_models:dimensionality:type:collaboration')}
+        </div>
+        <div className="ml-5 mt-2">
+          {t('metrics_models:dimensionality:collaboration')}
+        </div>
+        <div className="mt-3 flex items-center gap-1 font-semibold">
+          <div className="h-4 w-4 border border-[#8b8988] bg-[#f5e5db]" />
+          {t('metrics_models:dimensionality:type:contributor')}
+        </div>
+        <div className="ml-5 mt-2">
+          {t('metrics_models:dimensionality:contributor')}
+        </div>
+        <div className="mt-3 flex items-center gap-1 font-semibold">
+          <div className="h-4 w-4 border border-[#8b8988] bg-[#e1e1e1]" />
+          {t('metrics_models:dimensionality:type:software')}
+        </div>
+        <div className="ml-5 mt-2">
+          {t('metrics_models:dimensionality:software')}
+        </div>
+      </div>
+      <div className="mt-2 flex h-8 w-[180px] cursor-pointer items-center justify-center bg-[#000000] px-3 text-sm text-white hover:bg-black/90">
+        <LinkX href="/docs/dimensions-define/">
+          <a>{t('common:more_about_the_evaluation_system')}</a>
+        </LinkX>
+      </div>
+    </div>
+  );
+};
+
+export default Legend;
diff --git 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<ReactEChartsProps> = ({
       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
@@ -47,7 +47,7 @@ const PopperContent = ({ dataList, name, active, setActive }) => {
           <div className="flex-1 border-r bg-[#F6F6F6]"></div>
         </div>
         <div className="h-full w-[216px] flex-shrink-0 overflow-auto border-t px-4 py-2 text-xs">
-          {activeItem.map(({ text, contribution }) => {
+          {activeItem?.map(({ text, contribution }) => {
             return (
               <div
                 key={text}
@@ -80,69 +80,77 @@ const DomainPersona = ({ maxDomain, dataList, name }) => {
   };
 
   return (
-    <ClickAwayListener
-      onClickAway={() => {
+    // <ClickAwayListener
+    //   onClickAway={() => {
+    //     setActive('');
+    //     popperOpen && togglePopperOpen(() => false);
+    //   }}
+    // >
+    <div
+      onMouseLeave={() => {
         setActive('');
         popperOpen && togglePopperOpen(() => false);
       }}
     >
-      <div>
-        <div className="flex items-center">
-          {domainData.map(({ type, color, contribution }) => {
-            const width = toFixed((contribution / maxDomain) * 100, 2);
-            const bg = {
-              backgroundColor: color,
-              width: `${width}%`,
-            };
-            return active === type ? (
-              <div
-                key={type}
-                className="cursor-pointer border"
-                style={{
-                  width: `${width}%`,
-                  borderColor: color,
-                  padding: '1px',
-                }}
-              >
-                <div className="h-2" style={{ backgroundColor: color }}></div>
-              </div>
-            ) : (
-              <div
-                onClick={(e) => {
-                  handleClick(e, type);
-                }}
-                key={type}
-                style={{ backgroundColor: color, width: `${width}%` }}
-                className="h-2 cursor-pointer"
-              ></div>
-            );
-          })}
-        </div>
-        <Popper
-          open={popperOpen}
-          style={{
-            zIndex: 1000,
-          }}
-          placement={'bottom'}
-          anchorEl={anchorEl}
-          modifiers={[
-            {
-              name: 'offset',
-              options: {
-                offset: [0, 5],
-              },
-            },
-          ]}
-        >
-          <PopperContent
-            dataList={domainData}
-            name={name}
-            active={active}
-            setActive={setActive}
-          />
-        </Popper>
+      <div className="flex items-center">
+        {domainData.map(({ type, color, contribution }) => {
+          const width = toFixed((contribution / maxDomain) * 100, 2);
+          const bg = {
+            backgroundColor: color,
+            width: `${width}%`,
+          };
+          return active === type ? (
+            <div
+              key={type}
+              className="cursor-pointer border"
+              style={{
+                width: `${width}%`,
+                borderColor: color,
+                padding: '1px',
+              }}
+            >
+              <div className="h-2" style={{ backgroundColor: color }}></div>
+            </div>
+          ) : (
+            <div
+              // onClick={(e) => {
+              //   handleClick(e, type);
+              // }}
+              key={type}
+              onMouseEnter={(e) => {
+                handleClick(e, type);
+              }}
+              style={{ backgroundColor: color, width: `${width}%` }}
+              className="h-2 cursor-pointer"
+            ></div>
+          );
+        })}
       </div>
-    </ClickAwayListener>
+      <Popper
+        open={popperOpen}
+        style={{
+          zIndex: 1000,
+        }}
+        placement={'bottom'}
+        anchorEl={anchorEl}
+        modifiers={[
+          {
+            name: 'offset',
+            options: {
+              offset: [0, 0],
+            },
+          },
+        ]}
+      >
+        <PopperContent
+          dataList={domainData}
+          name={name}
+          active={active}
+          setActive={setActive}
+        />
+      </Popper>
+    </div>
+    // </ClickAwayListener
   );
 };
 

diff --git a/apps/web/src/modules/analyze/DataView/OverviewSummary/index.tsx b/apps/web/src/modules/analyze/DataView/OverviewSummary/index.tsx
@@ -37,10 +37,45 @@ const Overview: React.FC<{
 };
 
 const OverviewSummary = () => {
-  const { items } = useMetricQueryData();
+  const { items, loading } = useMetricQueryData();
+  if (loading) {
+    return <Loading />;
+  }
   return <Overview data={items} />;
 };
-
+const Loading = () => (
+  <div className="h-[430px] animate-pulse rounded border bg-white p-10 px-6 py-6 shadow">
+    <div className="flex-1 space-y-4">
+      <div className="h-4 rounded bg-slate-200"></div>
+      <div className="grid grid-cols-3 gap-4">
+        <div className="col-span-2 h-4 rounded bg-slate-200"></div>
+        <div className="col-span-1 h-4 rounded bg-slate-200"></div>
+      </div>
+      <div className="h-4 rounded bg-slate-200"></div>
+      <div className="grid grid-cols-3 gap-4">
+        <div className="col-span-1 h-4 rounded bg-slate-200"></div>
+        <div className="col-span-2 h-4 rounded bg-slate-200"></div>
+      </div>
+      <div className="h-4 rounded bg-slate-200"></div>
+      <div className="h-4 rounded bg-slate-200"></div>
+      <div className="grid grid-cols-3 gap-4">
+        <div className="col-span-2 h-4 rounded bg-slate-200"></div>
+        <div className="col-span-1 h-4 rounded bg-slate-200"></div>
+      </div>
+      <div className="h-4 rounded bg-slate-200"></div>
+      <div className="grid grid-cols-3 gap-4">
+        <div className="col-span-1 h-4 rounded bg-slate-200"></div>
+        <div className="col-span-2 h-4 rounded bg-slate-200"></div>
+      </div>
+      <div className="h-4 rounded bg-slate-200"></div>
+      <div className="grid grid-cols-3 gap-4">
+        <div className="col-span-1 h-4 rounded bg-slate-200"></div>
+        <div className="col-span-2 h-4 rounded bg-slate-200"></div>
+      </div>
+      <div className="h-4 rounded bg-slate-200"></div>
+    </div>
+  </div>
+);
 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
@@ -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) => (
-        <div className="h-full">
-          <div className="h-[280px]">
-            <EChartGl
-              option={echartsOpts as EChartsOption}
-              loading={isLoading}
-              containerRef={containerRef}
-            />
+      {(containerRef, fullScreen) =>
+        fullScreen ? (
+          <div
+            style={{ height: 'calc(100vh - 80px)' }}
+            className="flex w-full items-center overflow-hidden rounded-lg bg-[#eff1f1]"
+          >
+            <div className="mr-4 h-full flex-1">
+              <EChartGl
+                option={echartsOpts as EChartsOption}
+                containerRef={containerRef}
+              />
+            </div>
+            <Legend />
           </div>
-          <Legend />
-        </div>
-      )}
+        ) : (
+          <div className="h-full">
+            <div className="h-[280px]">
+              <EChartGl
+                option={echartsOpts as EChartsOption}
+                loading={isLoading}
+                containerRef={containerRef}
+              />
+            </div>
+            <MiniLegend />
+          </div>
+        )
+      }
     </BaseCard>
   );
 };
-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
@@ -3,7 +3,7 @@ import React from 'react';
 const Copyright = () => {
   return (
     <div className="fixed bottom-12 w-full px-6 text-center text-xs text-slate-600">
-      <p className="">Copyright©2023 OSS Compass. All Rights Reserved.</p>
+      <p className="">Copyright©2024 OSS Compass. All Rights Reserved.</p>
     </div>
   );
 };

diff --git 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<HTMLDivElement>(null);
   const { echartsOpts } = useOptions();
   return (
-    <div className="h-full flex-1 xl:hidden" ref={containerRef}>
+    <div className="h-full flex-1" ref={containerRef}>
       <EChartGl
         option={echartsOpts as EChartsOption}
         containerRef={containerRef}
+2 −1		en/common.json
+1 −2		en/home.json
+2 −1		zh/common.json
+1 −2		zh/home.json