monthly visualization

src/lib/components/result/space/Space.svelte

@@ -20,7 +20,7 @@
       <Author author={data?.author} />
     {/if}
     {#if data?.likers}
-      <Likers likers={data?.likers} />
+      <Likers likers={data?.likers} type={data?.likers_type} />
     {/if}
     {#if data?.runtime}
       <Runtime runtime={data?.runtime} />

src/lib/components/result/space/likers/Likers.svelte

@@ -5,6 +5,7 @@
 	import type { Liker } from "$lib/types";
   
   export let likers: Record<string, Array<Liker>>;
+  export let likers_type: string;
   
   let tab: "data-visualization" | "global" = "global";
   const tabs = [{
@@ -21,9 +22,17 @@
     tab = id as "data-visualization" | "global"
   }
 
+  const formatNumberMonth = (num: number) => {
+    const months = [
+      "January", "February", "March", "April", "May", "June", "July", "August", "September",
+      "October", "November", "December"
+    ];
+    return months[num - 1];
+  }
+
   const options: EChartsOptions = {
     xAxis: {
-      data: Object.keys(likers ?? []),
+      data: likers_type === 'years' ? Object.keys(likers ?? []) : Object.keys(likers ?? []).map((key) => formatNumberMonth(parseInt(key))),
       type: 'category',
     },
     yAxis: {
@@ -79,23 +88,31 @@
     {/each}
   </div>
   {#if tab === "global"}
-    <div class="">
-      {#each Object.keys(likers ?? []) as year}
-        <p class="uppercase text-zinc-600 dark:text-zinc-400 font-semibold font-title text-sm">{year}</p>
-        <div class="flex items-center mt-3 flex-wrap">
-          {#each likers[year].slice(0, 100) as like}
-            <div class="flex items-center -mr-1.5 -mt-1.5 relative cursor-pointer group">
-              <img src={like.avatarUrl.includes(".svg") ? `https://huggingface.co${like.avatarUrl}` : like.avatarUrl} alt={like.fullname} class="w-8 h-8 rounded-full ring-[1px] ring-white dark:ring-zinc-900" />
-              <p class="font-title absolute left-full top-0 bg-zinc-100 shadow rounded px-2 py-0.5 text-zinc-600 text-xs opacity-0 group-hover:opacity-100 pointer-events-none z-10 whitespace-nowrap translate-y-1/2">{like.fullname}</p>
-            </div>
-          {/each}
-          {#if likers[year].length > 100}
-            <div class="w-8 h-8 flex items-center justify-center border rounded-full border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 z-10">
-              <p class="text-xs font-title text-zinc-700">+{formatBigNumber(likers[year].length - 15)}</p>
-            </div>
-          {/if}
+    <div class="grid grid-cols-1 gap-4">
+      {#each Object.keys(likers ?? []) as period}
+        <div>
+          <p class="uppercase text-zinc-600 dark:text-zinc-400 font-semibold font-title text-sm mb-3">
+            {#if likers_type === "year"}
+              {period}
+            {:else}
+              {formatNumberMonth(parseInt(period))}
+            {/if}
+          </p>
+          <div class="flex items-center flex-wrap">
+            {#each likers[period].slice(0, 100) as like}
+              <div class="flex items-center -mr-1.5 -mt-1.5 relative cursor-pointer group">
+                <img src={like.avatarUrl.includes(".svg") ? `https://huggingface.co${like.avatarUrl}` : like.avatarUrl} alt={like.fullname} class="w-8 h-8 rounded-full ring-[1px] ring-white dark:ring-zinc-900" />
+                <p class="font-title absolute left-full top-0 bg-zinc-100 shadow rounded px-2 py-0.5 text-zinc-600 text-xs opacity-0 group-hover:opacity-100 pointer-events-none z-10 whitespace-nowrap translate-y-1/2">{like.fullname}</p>
+              </div>
+            {/each}
+            {#if likers[period].length > 100}
+              <div class="w-8 h-8 flex items-center justify-center border rounded-full border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 z-10">
+                <p class="text-xs font-title text-zinc-700">+{formatBigNumber(likers[period].length - 15)}</p>
+              </div>
+            {/if}
+          </div>
         </div>
-      {/each}
+        {/each}
     </div>
   {:else}
     <div class="h-[380px] -mx-8 -my-8">

src/routes/api/search/+server.ts

@@ -31,6 +31,8 @@ export async function POST({ request }: RequestEvent) {
     dataAuthor = null
   }
 
+  let likers_type = "yearly";
+
   const responseLikers = await fetch(`${env.PUBLIC_API_URL}/${body.namespace}/${body.repoId}/likers?expand[]=likeAt`, {
     method: "GET",
     headers: {
@@ -43,7 +45,7 @@ export async function POST({ request }: RequestEvent) {
     throw error(responseLikers.status, dataLikers.error);
   }
 
-  const likers: Record<string, Liker[]> = {}
+  let likers: Record<string, Liker[]> = {}
   dataLikers.forEach((liker: Liker) => {
     const year = liker.likedAt.split("-")[0]
     if (!likers[year]) {
@@ -52,6 +54,18 @@ export async function POST({ request }: RequestEvent) {
     likers[year].push(liker)
   })
 
+  if (Object.keys(likers).length < 2) {
+    likers_type = "monthly";
+    likers = {}
+    dataLikers.forEach((liker: Liker) => {
+      const month = liker.likedAt.split("-")[1]
+      if (!likers[month]) {
+        likers[month] = []
+      }
+      likers[month].push(liker)
+    })
+  }
+
 
   const formattedData = {
     ...data,
@@ -67,6 +81,7 @@ export async function POST({ request }: RequestEvent) {
       bgTo:  colors[data?.cardData?.colorTo as keyof typeof colors]?.primary ?? "bg-blue-600",
     },
     likers,
+    likers_type,
   }
   
   return json(formattedData);