feat: metric detail and home update (#266)

Signed-off-by: laixingyou <[email protected]>
oss-compass · Nov 21, 2023 · 0e1295c · 0e1295c · vercel · Nov 21, 2023
1 parent df299ed
commit 0e1295c
Show file tree

Hide file tree

Showing 32 changed files with 894 additions and 1,546 deletions.
diff --git a/apps/web/i18n b/apps/web/i18n
diff --git a/apps/web/src/common/components/Header/MobileHeader.tsx b/apps/web/src/common/components/Header/MobileHeader.tsx
@@ -34,13 +34,18 @@ const MobileHeader: React.FC<PropsWithChildren> = ({ children }) => {
       icon: null,
     },
     {
-      title: t('common:header.explore'),
+      title: t('common:header.docs'),
+      href: '/docs/dimensions-define',
+      icon: null,
+    },
+    {
+      title: t('common:header.projects'),
       href: '/explore',
       icon: null,
     },
     {
-      title: t('common:header.metrics_models'),
-      href: '/docs/dimensions-define',
+      title: t('common:header.lab'),
+      href: '/lab',
       icon: null,
     },
     {
@@ -53,11 +58,6 @@ const MobileHeader: React.FC<PropsWithChildren> = ({ children }) => {
       href: '/blog',
       icon: null,
     },
-    {
-      title: t('common:header.lab'),
-      href: '/lab',
-      icon: null,
-    },
     {
       title: t('common:header.about'),
       href: '/about',

diff --git a/apps/web/src/common/components/Header/index.tsx b/apps/web/src/common/components/Header/index.tsx
@@ -30,23 +30,30 @@ const Header: React.FC<{
               <Logo color="white" />
             </Link>
 
-            <Link
-              href="/explore"
-              className={'mx-6 px-2.5 font-medium text-white 2xl:mx-2'}
-            >
-              {t('common:header.explore')}
-            </Link>
-
             <LinkX href="/docs/dimensions-define" legacyBehavior>
               <a
                 className={
                   'mx-6 flex-shrink-0 px-2.5 font-medium text-white 2xl:mx-2'
                 }
               >
-                {t('common:header.metrics_models')}
+                {t('common:header.docs')}
               </a>
             </LinkX>
 
+            <Link
+              href="/explore"
+              className={'mx-6 px-2.5 font-medium text-white 2xl:mx-2'}
+            >
+              {t('common:header.projects')}
+            </Link>
+
+            <Link
+              href="/lab"
+              className={'mx-6 px-2.5 font-medium text-white 2xl:mx-2'}
+            >
+              {t('common:header.lab')}
+            </Link>
+
             <CommunityDropdown />
 
             <LinkX href="/blog" legacyBehavior>
@@ -59,13 +66,6 @@ const Header: React.FC<{
               </a>
             </LinkX>
 
-            <Link
-              href="/lab"
-              className={'mx-6 px-2.5 font-medium text-white 2xl:mx-2'}
-            >
-              {t('common:header.lab')}
-            </Link>
-
             <Link
               href="/about"
               className={'mx-6 px-2.5 font-medium text-white 2xl:mx-2'}

diff --git a/apps/web/src/common/options/gradientRamp.ts b/apps/web/src/common/options/gradientRamp.ts
@@ -0,0 +1,128 @@
+export const gradientRamp = [
+  [
+    '#4a90e2',
+    '#1d2c4e',
+    '#29467f',
+    '#2d51a0',
+    '#3063c5',
+    '#3978d7',
+    '#4a90e2',
+    '#70b1ea',
+    '#9ecdf2',
+    '#c6e0f7',
+    '#dfedfa',
+    '#f1f7fd',
+  ],
+  [
+    '#9858f4',
+    '#320962',
+    '#4e1e85',
+    '#5e23a6',
+    '#6d25cb',
+    '#8136e7',
+    '#9858f4',
+    '#a872f9',
+    '#d1b5fd',
+    '#e5d6fe',
+    '#f1e8ff',
+    '#f9f5ff',
+  ],
+  [
+    '#6bbc26',
+    '#142909',
+    '#2f4e19',
+    '#335c1a ',
+    '#3f7219',
+    '#50961a',
+    '#6bbc26',
+    '#89d744',
+    '#a7e56d',
+    '#ccf1a5',
+    '#e5f8cf',
+    '#f3fce9',
+  ],
+  [
+    '#f97316',
+    '#431407',
+    '#7c2d12',
+    '#9a3412',
+    '#c2410c',
+    '#ea580c',
+    '#f97316',
+    '#fb923c',
+    '#fdba74',
+    '#fed7aa',
+    '#ffedd5',
+    '#fff7ed',
+  ],
+  [
+    '#14b8a6',
+    '#042f2e',
+    '#134e4a',
+    '#115e59',
+    '#0f766e',
+    '#0d9488',
+    '#14b8a6',
+    '#2dd4bf',
+    '#5eead4',
+    '#99f6e4',
+    '#ccfbf1',
+    '#f0fdfa',
+  ],
+  [
+    '#ec4899',
+    '#500725',
+    '#831843',
+    '#9c164d',
+    '#be185e',
+    '#db2879',
+    '#ec4899',
+    '#f472b5',
+    '#f8a8d3',
+    '#fccfea',
+    '#fbe7f3',
+    '#fcf2f8',
+  ],
+  [
+    '#e9b308',
+    '#432007',
+    '#714013',
+    '#844d0e',
+    '#a06207',
+    '#cb8a03',
+    '#e9b308',
+    '#f9cc15',
+    '#fce146',
+    '#fff08a',
+    '#fef9c4',
+    '#fefce8',
+  ],
+  [
+    '#ee4444',
+    '#450a0a',
+    '#7f1d1c',
+    '#9b1b1b',
+    '#b91b1c',
+    '#dc2626',
+    '#ee4444',
+    '#f87271',
+    '#fca5a5',
+    '#fecaca',
+    '#fde2e2',
+    '#fef2f2',
+  ],
+  [
+    '#8c90a1',
+    '#2f3135',
+    '#52555d',
+    '#626571',
+    '#787a8c',
+    '#a1a5b3',
+    '#8c8fa2',
+    '#b6b8c5',
+    '#d2d6db',
+    '#dfe3e6',
+    '#edeff3',
+    '#f5f7f9',
+  ],
+];
diff --git a/apps/web/src/common/options/index.ts b/apps/web/src/common/options/index.ts
@@ -2,3 +2,4 @@ export * from './color';
 export * from './echartOpt';
 export * from './palette';
 export * from './series';
+export * from './gradientRamp';
diff --git a/apps/web/src/modules/analyze/components/MetricDetail/MetricChart.tsx b/apps/web/src/modules/analyze/components/MetricDetail/MetricChart.tsx
@@ -13,7 +13,7 @@ export interface ReactEChartsProps {
   loading?: boolean;
   theme?: 'light' | 'dark';
   containerRef?: React.RefObject<HTMLElement>;
-  legendselectchanged?: any;
+  filterData?: any;
 }
 
 const MetricChart: React.FC<ReactEChartsProps> = ({
@@ -23,7 +23,7 @@ const MetricChart: React.FC<ReactEChartsProps> = ({
   loading,
   theme,
   containerRef,
-  legendselectchanged,
+  filterData,
 }) => {
   const inView = useInViewportDebounce(containerRef);
   const chartRef = useRef<HTMLDivElement>(null);
@@ -54,18 +54,17 @@ const MetricChart: React.FC<ReactEChartsProps> = ({
     if (inView && chartRef.current !== null) {
       const chart = getInstanceByDom(chartRef.current)!;
       chart.setOption(option, settings);
-      if (legendselectchanged) {
-        const chart = getInstanceByDom(chartRef.current)!;
+      if (filterData) {
         chart.on('legendselectchanged', function (params: any) {
-          let selected = params.selected!;
-          let options = chart.getOption();
-          let selectedList = Object.keys(selected).filter(
+          const selected = params.selected!;
+          const options = chart.getOption();
+          const selectedList = Object.keys(selected).filter(
             (item) => selected[item]
           );
-          options.series[1].data = legendselectchanged.filter((item) =>
-            selectedList.includes(item.org)
+          options.series[1].data = filterData.filter((item) =>
+            selectedList.includes(item.parentName)
           );
-          this.setOption(options);
+          chart.setOption(options);
         });
       }
     }
+1 −1		en/about.json
+1 −1		en/analysis.json
+7 −1		en/analyze.json
+1 −1		en/auth.json
+1 −1		en/basic.json
+1 −1		en/censoring.json
+1 −1		en/collection.json
+4 −1		en/common.json
+1 −1		en/dispatch.json
+9 −3		en/home.json
+1 −1		en/lab.json
+1 −1		en/lab_metrics.json
+1 −1		en/lab_models.json
+1 −1		en/metrics_models.json
+1 −1		en/notification.json
+1 −1		en/oauth.json
+1 −1		en/pull.json
+1 −1		en/setting.json
+1 −1		en/submit_project.json
+1 −1		en/user_mailer.json
+1 −1		en/users.json
+1 −1		en/yaml.json
+1 −1		zh/about.json
+1 −1		zh/analysis.json
+7 −1		zh/analyze.json
+1 −1		zh/auth.json
+1 −1		zh/basic.json
+1 −1		zh/censoring.json
+1 −1		zh/collection.json
+4 −1		zh/common.json
+1 −1		zh/dispatch.json
+9 −3		zh/home.json
+1 −1		zh/lab.json
+1 −1		zh/lab_metrics.json
+1 −1		zh/lab_models.json
+1 −1		zh/metrics_models.json
+1 −1		zh/notification.json
+1 −1		zh/oauth.json
+1 −1		zh/pull.json
+1 −1		zh/setting.json
+1 −1		zh/submit_project.json
+1 −1		zh/user_mailer.json
+1 −1		zh/users.json
+1 −1		zh/yaml.json