From 7d41a7ca76116b83099160e446f3b5b15bddad3a Mon Sep 17 00:00:00 2001
From: laixingyou <laixy7@gmail.com>
Date: Mon, 16 Oct 2023 15:27:34 +0800
Subject: [PATCH] feat:Add svg download custom date

Signed-off-by: laixingyou <laixy7@gmail.com>
---
 apps/web/i18n                                 |  2 +-
 apps/web/src/common/components/BaseCard.tsx   |  5 +++-
 .../analyze/components/DownCardLoadImage.tsx  | 21 ++++++--------
 .../analyze/components/DownloadAndShare.tsx   | 28 ++++++++++++++-----
 4 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/apps/web/i18n b/apps/web/i18n
index 1bdcc211..0cd5c406 160000
--- a/apps/web/i18n
+++ b/apps/web/i18n
@@ -1 +1 @@
-Subproject commit 1bdcc21179457fb4644fa0d0d31c15b93e638202
+Subproject commit 0cd5c4067fb7e6501441fb912c8f4f69b5650c9a
diff --git a/apps/web/src/common/components/BaseCard.tsx b/apps/web/src/common/components/BaseCard.tsx
index c77d00aa..c3ab655e 100644
--- a/apps/web/src/common/components/BaseCard.tsx
+++ b/apps/web/src/common/components/BaseCard.tsx
@@ -108,7 +108,10 @@ const BaseCard: React.FC<BaseCardProps> = ({
 
   return (
     <div className={classnames(cls)} ref={cardRef} id={id}>
-      <h3 className="group mb-2 text-lg font-semibold" ref={titleRef}>
+      <h3
+        className="group mb-2 text-lg font-semibold text-[#000000]"
+        ref={titleRef}
+      >
         {title}
         <a href={`#${id}`}>
           <span className="group-hover:text-primary invisible ml-2 cursor-pointer group-hover:visible">
diff --git a/apps/web/src/modules/analyze/components/DownCardLoadImage.tsx b/apps/web/src/modules/analyze/components/DownCardLoadImage.tsx
index 6c071baf..269f7db0 100644
--- a/apps/web/src/modules/analyze/components/DownCardLoadImage.tsx
+++ b/apps/web/src/modules/analyze/components/DownCardLoadImage.tsx
@@ -77,7 +77,7 @@ const DownLoadImage = (props: DownLoadImageProps) => {
     return () => {
       clearTimeout(timer);
     };
-  }, [cardRef]);
+  }, [cardRef, onCompleteLoad, size]);
 
   useEffect(() => {
     const downLoadImg = async () => {
@@ -113,7 +113,7 @@ const DownLoadImage = (props: DownLoadImageProps) => {
     downLoadImg().catch((e) => {
       console.log('error:', e);
     });
-  }, [loadingDownLoadImg]);
+  }, [loadingDownLoadImg, fileFormat, onComplete]);
 
   if (fileFormat === 'SVG') {
     return (
@@ -126,7 +126,7 @@ const DownLoadImage = (props: DownLoadImageProps) => {
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img src={dataURL} className="w-full" alt="" />
           {dataURL && (
-            <div className="mb-2 ml-4 origin-left scale-50 text-xs text-[#585858]">
+            <div className="mb-2 ml-4 origin-left scale-75 text-xs text-[#b4adbe]">
               Powered by oss-compass.org
             </div>
           )}
@@ -226,14 +226,9 @@ const DownLoadImage = (props: DownLoadImageProps) => {
 
                 if (level === Level.REPO) {
                   labelNode = (
-                    <a
-                      className="ml-2 mr-1 whitespace-nowrap text-2xl font-semibold text-black hover:underline"
-                      href={label}
-                      target="_blank"
-                      rel={'noreferrer'}
-                    >
+                    <span className="ml-2 text-2xl font-semibold text-black">
                       {name}
-                    </a>
+                    </span>
                   );
                 }
                 return (
@@ -244,8 +239,10 @@ const DownLoadImage = (props: DownLoadImageProps) => {
                     />
                     {labelNode}
                     {level === Level.COMMUNITY && (
-                      <div className="ml-2 inline-block  rounded-[10px] bg-[#FFF9F2] px-2 py-0.5 text-xs text-[#D98523]">
-                        {t('home:community')}
+                      <div className="ml-2 inline-block h-5 rounded-[10px] bg-[#FFF9F2] px-2 align-bottom text-xs text-[#D98523]">
+                        <span className="relative -top-1">
+                          {t('home:community')}
+                        </span>
                       </div>
                     )}
                     {index < compareItems.length - 1 ? (
diff --git a/apps/web/src/modules/analyze/components/DownloadAndShare.tsx b/apps/web/src/modules/analyze/components/DownloadAndShare.tsx
index c2d1910b..05cf6765 100644
--- a/apps/web/src/modules/analyze/components/DownloadAndShare.tsx
+++ b/apps/web/src/modules/analyze/components/DownloadAndShare.tsx
@@ -17,8 +17,9 @@ import * as RadioGroup from '@radix-ui/react-radio-group';
 import DownCardLoadImage from './DownCardLoadImage';
 import { AiOutlineLoading } from 'react-icons/ai';
 import useCompareItems from '@modules/analyze/hooks/useCompareItems';
-// import useQueryDateRange from '@modules/analyze/hooks/useQueryDateRange';
-// import { format } from 'date-fns';
+import useQueryDateRange from '@modules/analyze/hooks/useQueryDateRange';
+import { rangeTags } from '../constant';
+import { format } from 'date-fns';
 
 const queryMap = {
   metricCodequality: 'collab_dev_index',
@@ -27,11 +28,18 @@ const queryMap = {
   metricGroupActivity: 'organizations_activity',
 };
 
-const toUnderline = (str) => {
+const toUnderline = (str: string) => {
   return str.replace(/([A-Z])/g, '_$1').toLowerCase();
 };
 
-const getSvgUrl = (slug, id, yAxisScale, onePointSys, yKey) => {
+const useGetSvgUrl = (
+  slug: string,
+  id: string,
+  yAxisScale: boolean,
+  onePointSys: boolean,
+  yKey: string
+) => {
+  const { range, timeStart, timeEnd } = useQueryDateRange();
   let url = `/chart/${slug}.svg`;
   let metrc = '';
   let field = '';
@@ -54,9 +62,15 @@ const getSvgUrl = (slug, id, yAxisScale, onePointSys, yKey) => {
   ) {
     url += `&chart=bar`;
   }
+  if (rangeTags.includes(range)) {
+    url += `&range=${range}`;
+  } else {
+    const begin_date = format(timeStart!, 'yyyy-MM-dd');
+    const end_date = format(timeEnd!, 'yyyy-MM-dd');
+    url += `&begin_date=${begin_date}&end_date=${end_date}`;
+  }
   return url;
 };
-
 const DownloadAndShare = (props: {
   cardRef: RefObject<HTMLElement>;
   downloadImageSize?: 'middle' | 'full';
@@ -70,7 +84,7 @@ const DownloadAndShare = (props: {
   const slug = router.query.slugs as string;
   const { compareItems } = useCompareItems();
   const len = compareItems.length;
-  const svgUrl = getSvgUrl(
+  const svgUrl = useGetSvgUrl(
     slug,
     cardRef.current.id,
     yAxisScale,
@@ -278,7 +292,7 @@ const TabPanel = ({ badgeSrc, id }: { badgeSrc: string; id: string }) => {
           value="Link"
         />
       </Tabs>
-      <div className="mt-4 flex  h-[60px] items-center justify-between rounded border bg-[#fafafa] px-3">
+      <div className="mt-4 flex h-[70px] items-center justify-between rounded border bg-[#fafafa] px-3">
         <div className="break-all text-xs">{source}</div>
         <Tooltip
           title={