fix: heatmap focus

src/components/UserPublicProfile/UserPublicActivityHeatmap.tsx

@@ -27,20 +27,20 @@ export function UserActivityHeatmap(props: UserActivityHeatmapProps) {
         values={data}
         classForValue={(value) => {
           if (!value) {
-            return 'fill-gray-100 rounded-md [rx:2px]';
+            return 'fill-gray-100 rounded-md [rx:2px] focus:outline-none';
           }
 
           const { count } = value;
           if (count >= 20) {
-            return 'fill-gray-800 rounded-md [rx:2px]';
+            return 'fill-gray-800 rounded-md [rx:2px] focus:outline-none';
           } else if (count >= 10) {
-            return 'fill-gray-600 rounded-md [rx:2px]';
+            return 'fill-gray-600 rounded-md [rx:2px] focus:outline-none';
           } else if (count >= 5) {
-            return 'fill-gray-500 rounded-md [rx:2px]';
+            return 'fill-gray-500 rounded-md [rx:2px] focus:outline-none';
           } else if (count >= 3) {
-            return 'fill-gray-300 rounded-md [rx:2px]';
+            return 'fill-gray-300 rounded-md [rx:2px] focus:outline-none';
           } else {
-            return 'fill-gray-200 rounded-md [rx:2px]';
+            return 'fill-gray-200 rounded-md [rx:2px] focus:outline-none';
           }
         }}
         tooltipDataAttrs={(value: any) => {

src/components/UserPublicProfile/UserPublicProfilePage.tsx

@@ -7,7 +7,13 @@ import { UserPublicProgresses } from './UserPublicProgresses';
 type UserPublicProfilePageProps = GetPublicProfileResponse;
 
 export function UserPublicProfilePage(props: UserPublicProfilePageProps) {
-  const { activity, username, isOwnProfile, profileVisibility } = props;
+  const {
+    activity,
+    username,
+    isOwnProfile,
+    profileVisibility,
+    _id: userId,
+  } = props;
 
   return (
     <>
@@ -23,6 +29,7 @@ export function UserPublicProfilePage(props: UserPublicProfilePageProps) {
         <div className="mt-10">
           <UserPublicProgresses
             username={username!}
+            userId={userId!}
             roadmaps={props.roadmaps}
             publicConfig={props.publicConfig}
           />

src/components/UserPublicProfile/UserPublicProgressStats.tsx

@@ -14,6 +14,7 @@ type UserPublicProgressStats = {
   isCustomResource?: boolean;
   roadmapSlug?: string;
   username: string;
+  userId: string;
 };
 
 export function UserPublicProgressStats(props: UserPublicProgressStats) {
@@ -28,10 +29,13 @@ export function UserPublicProgressStats(props: UserPublicProgressStats) {
     roadmapSlug,
     isCustomResource = false,
     username,
+    userId,
   } = props;
 
   // Currently we only support roadmap not (best-practices)
-  const url = `/u/${username}/${isCustomResource ? roadmapSlug : resourceId}`;
+  const url = isCustomResource
+    ? `/r/${roadmapSlug}`
+    : `/${resourceId}?s=${userId}`;
   const totalMarked = doneCount + skippedCount;
   const progressPercentage = getPercentage(totalMarked, totalCount);
 

src/components/UserPublicProfile/UserPublicProgresses.tsx

@@ -2,13 +2,19 @@ import type { GetPublicProfileResponse } from '../../api/user';
 import { UserPublicProgressStats } from './UserPublicProgressStats';
 
 type UserPublicProgressesProps = {
+  userId: string;
   username: string;
   roadmaps: GetPublicProfileResponse['roadmaps'];
   publicConfig: GetPublicProfileResponse['publicConfig'];
 };
 
 export function UserPublicProgresses(props: UserPublicProgressesProps) {
-  const { roadmaps: roadmapProgresses = [], username, publicConfig } = props;
+  const {
+    roadmaps: roadmapProgresses = [],
+    username,
+    publicConfig,
+    userId,
+  } = props;
   const { roadmapVisibility, customRoadmapVisibility } = publicConfig! || {};
 
   const roadmaps = roadmapProgresses.filter(
@@ -43,6 +49,7 @@ export function UserPublicProgresses(props: UserPublicProgressesProps) {
                     roadmapSlug={roadmap.roadmapSlug}
                     isCustomResource={false}
                     username={username!}
+                    userId={userId}
                   />
                 </li>
               ))}
@@ -74,6 +81,7 @@ export function UserPublicProgresses(props: UserPublicProgressesProps) {
                     roadmapSlug={roadmap.roadmapSlug}
                     username={username!}
                     isCustomResource={true}
+                    userId={userId}
                   />
                 </li>
               ))}

src/helper/number.ts

@@ -1,3 +1,9 @@
-export function getPercentage(portion: number, total: number) {
-  return portion > 0 ? ((portion / total) * 100).toFixed(2) : 0;
+export function getPercentage(portion: number, total: number): string {
+  if (total <= 0 || portion <= 0) {
+    return '0';
+  } else if (portion > total) {
+    return '100';
+  }
+
+  return ((portion / total) * 100).toFixed(2);
 }