From fe1b55a35d6a529d4e22701602664392f09e38a4 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Wed, 16 Feb 2022 09:34:43 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Stats=20UI=20cleanup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/assets/scss/App.scss               | 10 +----
 src/client/components/Dashboard/Dashboard.tsx | 39 ++++++++++++++-----
 src/client/components/Dashboard/PullList.tsx  |  3 +-
 3 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss
index 0e61f2f..e360039 100644
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -42,15 +42,7 @@ pre {
 }
 
 // Dashboard
-//  Comic Detail
-.stats-palette {
-  background-color: ghostwhite;
-  display: inline-block;
-  p {
-    display: flex;
-    // padding: 1.5rem 2rem;
-  }
-}
+
 // slick slider overrides
 .slick-slider {
   margin-left: -10px;
diff --git a/src/client/components/Dashboard/Dashboard.tsx b/src/client/components/Dashboard/Dashboard.tsx
index d6a8244..f0c6105 100644
--- a/src/client/components/Dashboard/Dashboard.tsx
+++ b/src/client/components/Dashboard/Dashboard.tsx
@@ -6,7 +6,7 @@ import { VolumeGroups } from "./VolumeGroups";
 import { PullList } from "./PullList";
 import { getComicBooks } from "../../actions/fileops.actions";
 import { getLibraryStatistics } from "../../actions/comicinfo.actions";
-import { isEmpty, isNil, isUndefined } from "lodash";
+import { isEmpty, isNil, isUndefined, map } from "lodash";
 
 export const Dashboard = (): ReactElement => {
   const dispatch = useDispatch();
@@ -43,10 +43,11 @@ export const Dashboard = (): ReactElement => {
             <PullList issues={recentComics} />
 
             {/* stats */}
-            <div>
-              <h4 className="title is-4">Statistics</h4>
-              <div className="box stats-palette p-3 column is-one-quarter">
-                <dl>
+
+            <h4 className="title is-4 mt-2">Statistics</h4>
+            <div className="columns is-multiline">
+              <div className="column is-narrow is-one-quarter">
+                <dl className="box">
                   <dd className="is-size-4">
                     <span className="has-text-weight-bold">
                       {libraryStatistics.totalDocuments}
@@ -69,20 +70,40 @@ export const Dashboard = (): ReactElement => {
                 </dl>
               </div>
 
-              <div className="box stats-palette p-3 column ml-5">
-                <dl>
+              <div className="p-3 column is-one-quarter">
+                <dl className="box">
                   <dd className="is-size-6">
                     <span className="has-text-weight-bold"></span> Issues
                   </dd>
                   <dd className="is-size-6">
                     <span className="has-text-weight-bold">304</span> Volumes
                   </dd>
+                  <dd className="is-size-6">
+                    {!isUndefined(libraryStatistics.statistics) &&
+                      !isEmpty(libraryStatistics.statistics[0].fileTypes) &&
+                      map(
+                        libraryStatistics.statistics[0].fileTypes,
+                        (fileType) => {
+                          return (
+                            <>
+                              <span className="has-text-weight-bold">
+                                {fileType.data.length}
+                              </span>
+                              <span className="tag is-warning has-text-weight-bold mr-2 ml-1">
+                                {fileType._id}
+                              </span>
+                            </>
+                          );
+                        },
+                      )}
+                  </dd>
                 </dl>
               </div>
 
               {/* file types */}
-              <div className="box stats-palette p-3 column ml-5">
-                <dl>
+              <div className="p-3 column is-two-fifths">
+                {/* publisher with most issues */}
+                <dl className="box">
                   {!isUndefined(libraryStatistics.statistics) &&
                     !isEmpty(
                       libraryStatistics.statistics[0]
diff --git a/src/client/components/Dashboard/PullList.tsx b/src/client/components/Dashboard/PullList.tsx
index 5fd9baf..17f8cf8 100644
--- a/src/client/components/Dashboard/PullList.tsx
+++ b/src/client/components/Dashboard/PullList.tsx
@@ -99,9 +99,10 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
       <Slider {...settings} ref={(c) => (sliderRef = c)}>
         {!isNil(pullList) &&
           pullList &&
-          map(pullList, (issue) => {
+          map(pullList, (issue, idx) => {
             return (
               <Card
+                key={idx}
                 orientation={"vertical"}
                 imageUrl={issue.cover}
                 hasDetails