Merge pull request #193 from bryanlundberg/update-metrics-page-layout

Change metrics page layout

src/components/stats/ActivityList.tsx

@@ -7,12 +7,13 @@ import translation from "@/translations/global.json";
 import { useSettingsModalStore } from "@/store/SettingsModalStore";
 import formatTime from "@/lib/formatTime";
 import { useTimerStore } from "@/store/timerStore";
+import NoActivity from "./NoActivity";
 
 export function ActivityList() {
   const { lang } = useSettingsModalStore();
   const { cubes } = useTimerStore();
 
-  if (!cubes) return null;
+  if (!cubes || cubes.length === 0) return <NoActivity />;
 
   const lastAct: Solve[] = [];
   cubes.forEach((cube: Cube) => {
@@ -24,6 +25,8 @@ export function ActivityList() {
     });
   });
 
+  if (lastAct.length === 0) return <NoActivity />;
+
   const sorted = sort(lastAct).desc((u) => u.endTime);
   return sorted.slice(0, 10).map((solve, index) => {
     const cube = findCube({ cubeId: solve.cubeId });

src/components/stats/NoActivity.tsx

@@ -0,0 +1,21 @@
+import InformationBell from "@/icons/InformationBell";
+import { useSettingsModalStore } from "@/store/SettingsModalStore";
+import translation from "@/translations/global.json";
+
+export default function NoActivity() {
+  const { lang } = useSettingsModalStore();
+
+  return (
+    <>
+      <div className="flex flex-col items-center justify-center w-full text-sm text-white h-28">
+        <InformationBell />
+        <div className="font-thin">
+          {translation.metrics["no-activity-found"][lang]}
+        </div>
+        <div className="italic font-light">
+          {translation.metrics["no-activity-to-display"][lang]}
+        </div>
+      </div>
+    </>
+  );
+}

src/components/stats/PersonalChartsContainer.tsx

@@ -5,7 +5,9 @@ interface PersonalChartsContainer {
 export function PersonalChartsContainer({ children }: PersonalChartsContainer) {
   return (
     <>
-      <div className="flex flex-col gap-3 md:flex-row">{children}</div>
+      <div className="w-full h-full p-3 border rounded-md light:border-neutral-200 dark:border-zinc-800 dark:bg-zinc-950 light:bg-neutral-100">
+        {children}
+      </div>
     </>
   );
 }

src/components/stats/PersonalStatistics.tsx

@@ -19,9 +19,7 @@ import Trophy from "@/icons/Trophy";
 import translation from "@/translations/global.json";
 import { useSettingsModalStore } from "@/store/SettingsModalStore";
 import RadarCharter from "../charts/RadarCharter";
-import PieCharter from "../charts/PieCharter";
 import getTotalCategoryPlay from "@/lib/getTotalCategoryPlay";
-import getCategoryTotalRatingPoints from "@/lib/getCategoryTotalRatingPoints";
 import getSuccessRate from "@/lib/getSuccessRate";
 import { PersonalContainer } from "./PersonalContainer";
 import { PersonalCardsContainer } from "./PersonalCardsContainer";
@@ -39,7 +37,7 @@ export default function PersonalStatistics() {
   const cuberTitle = getTitleByPoints(totalNumeric);
   const rate = getSuccessRate(cubes);
   const data01 = getTotalCategoryPlay(cubes);
-  const data02 = getCategoryTotalRatingPoints(cubes);
+
   return (
     <>
       <PersonalContainer>
@@ -93,17 +91,11 @@ export default function PersonalStatistics() {
           />
         </PersonalCardsContainer>
         <PersonalChartsContainer>
-          <div className="flex flex-col items-center justify-center w-full p-3 border rounded-md light:border-neutral-200 dark:border-zinc-800 md:w-1/2 h-96 dark:bg-zinc-950 light:bg-neutral-100">
+          <div className="w-full h-96">
             <RadarCharter data={data01} />
-            <div className="mb-3 text-2xl font-medium text-center">
-              {translation.metrics["cube-insights"][lang]}
-            </div>
           </div>
-          <div className="flex flex-col items-center justify-center w-full p-3 border rounded-md light:border-neutral-200 dark:border-zinc-800 md:w-1/2 h-96 dark:bg-zinc-950 light:bg-neutral-100">
-            <PieCharter data={data02} />
-            <div className="mb-3 text-2xl font-medium text-center">
-              {translation.metrics["rating-spread"][lang]}
-            </div>
+          <div className="mb-3 text-2xl font-medium text-center">
+            {translation.metrics["cube-insights"][lang]}
           </div>
         </PersonalChartsContainer>
         <LastActivity />

src/icons/InformationBell.tsx

@@ -0,0 +1,20 @@
+export default function InformationBell() {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.2}
+        stroke="currentColor"
+        className="w-8 h-8"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+        />
+      </svg>
+    </>
+  );
+}

src/translations/global.json

@@ -1753,6 +1753,74 @@
       "et": "Viimane tegevus"
     },
 
+    "no-activity-found": {
+      "en": "No activity found",
+      "es": "Ninguna actividad encontrada",
+      "fr": "Aucune activité trouvée",
+      "de": "Keine Aktivität gefunden",
+      "ja": "アクティビティが見つかりません",
+      "zh": "未找到任何活动",
+      "ru": "Активность не найдена",
+      "hi": "कोई गतिविधि नहीं मिली",
+      "pt": "Nenhuma atividade encontrada",
+      "it": "Nessuna attività trovata",
+      "ko": "활동이 없습니다",
+      "nl": "Geen activiteit gevonden",
+      "sv": "Ingen aktivitet hittades",
+      "tr": "Hiçbir etkinlik bulunamadı",
+      "pl": "Nie znaleziono żadnej aktywności",
+      "vi": "Không tìm thấy hoạt động nào",
+      "th": "ไม่พบกิจกรรม",
+      "el": "Δεν βρέθηκε καμία δραστηριότητα",
+      "fi": "Ei löydetty toimintaa",
+      "uk": "Жодної активності не знайдено",
+      "cs": "Žádná aktivita nenalezena",
+      "ro": "Nicio activitate găsită",
+      "no": "Ingen aktivitet funnet",
+      "da": "Ingen aktivitet fundet",
+      "ms": "Tiada aktiviti ditemui",
+      "hu": "Nincs tevékenység",
+      "id": "Tidak ada aktivitas ditemukan",
+      "bn": "কোনও কার্যকলাপ খুঁজে পাওয়া যায়নি",
+      "sk": "Žiadna aktivita nenájdená",
+      "fil": "Walang natagpuang aktibidad",
+      "et": "Tegevust ei leitud"
+    },
+
+    "no-activity-to-display": {
+      "en": "There is no activity to display",
+      "es": "No hay actividad para mostrar",
+      "fr": "Aucune activité à afficher",
+      "de": "Es gibt keine Aktivität zum Anzeigen",
+      "ja": "表示するアクティビティはありません",
+      "zh": "没有要显示的活动",
+      "ru": "Нет активности для отображения",
+      "hi": "प्रदर्शित करने के लिए कोई गतिविधि नहीं है",
+      "pt": "Não há atividade para exibir",
+      "it": "Non ci sono attività da mostrare",
+      "ko": "표시할 활동이 없습니다",
+      "nl": "Er is geen activiteit om weer te geven",
+      "sv": "Det finns ingen aktivitet att visa",
+      "tr": "Gösterilecek etkinlik yok",
+      "pl": "Brak aktywności do wyświetlenia",
+      "vi": "Không có hoạt động để hiển thị",
+      "th": "ไม่มีกิจกรรมที่จะแสดง",
+      "el": "Δεν υπάρχει δραστηριότητα για εμφάνιση",
+      "fi": "Näytettävää toimintaa ei ole",
+      "uk": "Немає активності для відображення",
+      "cs": "Žádná aktivita k zobrazení",
+      "ro": "Nu există nicio activitate de afișat",
+      "no": "Ingen aktivitet å vise",
+      "da": "Ingen aktivitet at vise",
+      "ms": "Tiada aktiviti untuk dipaparkan",
+      "hu": "Nincs megjeleníthető tevékenység",
+      "id": "Tidak ada aktivitas yang dapat ditampilkan",
+      "bn": "প্রদর্শন করার জন্য কোনও কার্যকলাপ নেই",
+      "sk": "Žiadna aktivita na zobrazenie",
+      "fil": "Walang aktibidad na maipapakita",
+      "et": "Näitamiseks pole tegevust"
+    },
+
     "select-cube-metrics-default": {
       "en": "All",
       "es": "Todo",