Improve stats view

ubbn · Dec 25, 2023 · eab7e33 · eab7e33
1 parent 7327ab5
commit eab7e33
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 23 deletions.
diff --git a/frontend/src/common/HeatMap.tsx b/frontend/src/common/HeatMap.tsx
@@ -18,12 +18,11 @@ const Container = styled.div`
 type Props = {
   startDate: Date;
   data: any[];
-  title: any;
   tipText: any;
   [_: string]: any;
 };
 
-const HeatMap = ({ startDate, data, title, tipText, ...props }: Props) => {
+const HeatMap = ({ startDate, data, tipText, ...props }: Props) => {
   return (
     <Container>
       <CalendarHeatmap

diff --git a/frontend/src/components/stats/index.tsx b/frontend/src/components/stats/index.tsx
@@ -38,7 +38,9 @@ const Stats = () => {
   const [neuronsAdded, setNeuronsAdded] = useState<any[]>([]);
   const [neuronsSolid, setNeuronsSolid] = useState<any[]>([]);
   const [visibleAdded, setVisibleAdded] = useState<Neuron[]>([]);
+  const [visibleStudied, setVisibleStudied] = useState<string[]>([]);
   const [addedDate, setAddedDate] = useState<string>("");
+  const [studiedDate, setStudiedDate] = useState<string>("");
   const [activeChip, setActiveChip] = useState<number | undefined>(0);
   const [startDate, setStartDate] = useState<Date>(new Date("2023-01-01"));
   const [endDate, setEndDate] = useState<Date>(new Date("2023-12-31"));
@@ -65,14 +67,28 @@ const Stats = () => {
     const result = chips[chipIndex].func();
     setStartDate(result.startDate);
     setEndDate(result.endDate);
+    setAddedDate("");
+    setStudiedDate("");
   };
 
   const onClickAdded = (param: any) => {
     if (param?.date) {
-      const clicked = param.date.replaceAll("/", ""); // yyyy/MM/dd => yyyyMMdd
-      setVisibleAdded(items.filter((v) => `${v.created}`?.startsWith(clicked)));
+      const clicked = param.date.replaceAll("-", ""); // yyyy/MM/dd => yyyyMMdd
+      setVisibleAdded(
+        items.filter((v: any) => `${v.created}`?.startsWith(clicked))
+      );
     }
     setAddedDate(param.date);
+    setStudiedDate("");
+  };
+
+  const onClickStudied = (param: any) => {
+    const found = neuronsSolid.find((v: any) => v.date === param?.date);
+    if (found) {
+      setVisibleStudied(found.words);
+    }
+    setStudiedDate(param.date);
+    setAddedDate("");
   };
 
   return (
@@ -105,8 +121,6 @@ const Stats = () => {
         <HeatMap
           data={neuronsAdded}
           classForValue={greenScalClasses}
-          title={"Days you added new neurons"}
-          mapper={(v: any) => ({ date: v.date, count: v.minutes })}
           tipText={"word(s)"}
           startDate={startDate}
           endDate={endDate}
@@ -116,22 +130,33 @@ const Stats = () => {
         <HeatMap
           data={neuronsSolid}
           classForValue={greenScalClasses}
-          title={"Days you added new neurons"}
-          mapper={(v: any) => ({ date: v.date, count: v.minutes })}
           tipText={"word(s)"}
           startDate={startDate}
           endDate={endDate}
+          onClick={onClickStudied}
         />
         {addedDate && (
           <div>
             <strong>On {addedDate}, you added:</strong>
-            <div>
-              {visibleAdded.map((v) => (
-                <div key={v.id}>
+            <ul>
+              {visibleAdded.map((v, i) => (
+                <li key={i}>
                   {v.title} - {v.detail}
-                </div>
+                </li>
+              ))}
+              {visibleAdded.length === 0 && <li>Nothing ... 😢</li>}
+            </ul>
+          </div>
+        )}
+        {studiedDate && (
+          <div>
+            <strong>On {studiedDate}, you studied:</strong>
+            <ul>
+              {visibleStudied.map((v, i) => (
+                <li key={i}>{v}</li>
               ))}
-            </div>
+              {visibleStudied.length === 0 && <li>Nothing ... 😭</li>}
+            </ul>
           </div>
         )}
       </div>

diff --git a/frontend/src/components/stats/utils.ts b/frontend/src/components/stats/utils.ts
@@ -27,7 +27,7 @@ export const getNewNeurons = (
   do {
     const tempStr = format(temp, "yyyyMMdd");
     const found = data.filter((v) => `${v.created}`?.startsWith(tempStr));
-    prepared.push({ date: format(temp, "yyyy/MM/dd"), count: found.length });
+    prepared.push({ date: format(temp, "yyyy-MM-dd"), count: found.length });
     temp = addDays(temp, 1);
   } while (isBefore(temp, endDateOffset));
   return prepared;
@@ -53,7 +53,7 @@ export const getSolidNeurons = (
       Object.keys(curr.memo).forEach((day) => {
         const studiedDate = addDays(created, +day);
         if (isBefore(studiedDate, endDate) && isAfter(studiedDate, startDate)) {
-          const studied = format(studiedDate, "yyyy/MM/dd");
+          const studied = format(studiedDate, "yyyy-MM-dd");
           if (acc[studied]) {
             acc[studied].push(curr.title);
           } else {
@@ -64,18 +64,18 @@ export const getSolidNeurons = (
       return acc;
     }, {});
 
-  let date = startDate;
+  let tmp = startDate;
   const endDateOffset = addDays(endDate, 1);
   const result = [];
   do {
-    const tempStr = format(date, "yyyy/MM/dd");
-    let count = 0;
-    if (cumulatedSolid[tempStr]) {
-      count = cumulatedSolid[tempStr].length;
+    const date = format(tmp, "yyyy-MM-dd");
+    let words = [];
+    if (cumulatedSolid[date]) {
+      words = cumulatedSolid[date];
     }
-    result.push({ date, count });
-    date = addDays(date, 1);
-  } while (isBefore(date, endDateOffset));
+    result.push({ date, words, count: words.length });
+    tmp = addDays(tmp, 1);
+  } while (isBefore(tmp, endDateOffset));
   return result;
 };