add pretty card, fix dashboord calc

WouterLS · May 2, 2024 · cdc867d · cdc867d
1 parent 17a4b8a
commit cdc867d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 33 deletions.
diff --git a/src/components/contentcards/CippPrettyCard.jsx b/src/components/contentcards/CippPrettyCard.jsx
@@ -6,7 +6,7 @@ import 'react-circular-progressbar/dist/styles.css'
 
 export default function CippPrettyCard({
   title,
-  titleType = 'normal',
+  titleType = 'big',
   percentage,
   topLabel,
   smallLabel,
@@ -25,14 +25,16 @@ export default function CippPrettyCard({
         {!isFetching && (
           <CRow>
             <CCol>
-              <CircularProgressbar
-                styles={{ width: '50%', path: { stroke: ringcolor }, text: { fill: ringcolor } }}
-                strokeWidth={3}
-                value={percentage}
-                text={`${percentage}%`}
-              />
+              <div style={{ width: '50%', height: '50%' }}>
+                <CircularProgressbar
+                  styles={{ path: { stroke: ringcolor }, text: { fill: ringcolor } }}
+                  strokeWidth={3}
+                  value={percentage}
+                  text={`${percentage}%`}
+                />
+              </div>
             </CCol>
-            <CCol className="my-5">
+            <CCol className="m-2">
               <h4>{topLabel}</h4>
               <small className="text-medium-emphasis">{smallLabel}</small>
             </CCol>

diff --git a/src/views/home/Home.jsx b/src/views/home/Home.jsx
@@ -422,14 +422,20 @@ const TenantDashboard = () => {
                   <CChart
                     type="pie"
                     data={{
-                      labels: ['Used', 'Free'],
+                      labels: [
+                        `Used (${sharepoint.GeoUsedStorageMB}MB)`,
+                        `Free (${sharepoint.TenantStorageMB - sharepoint.GeoUsedStorageMB}MB)`,
+                      ],
                       datasets: [
                         {
                           backgroundColor: [
                             getStyle('--cyberdrain-warning'),
                             getStyle('--cyberdrain-info'),
                           ],
-                          data: [sharepoint.GeoUsedStorageMB, sharepoint.TenantStorageMB],
+                          data: [
+                            sharepoint.GeoUsedStorageMB,
+                            sharepoint.TenantStorageMB - sharepoint.GeoUsedStorageMB,
+                          ],
                           borderWidth: 3,
                         },
                       ],

diff --git a/src/views/tenant/administration/SecureScore.jsx b/src/views/tenant/administration/SecureScore.jsx
@@ -26,6 +26,7 @@ import { useNavigate } from 'react-router-dom'
 import { ModalService } from 'src/components/utilities'
 import { CellTip, cellGenericFormatter } from 'src/components/tables/CellGenericFormat'
 import { CippCallout } from 'src/components/layout'
+import CippPrettyCard from 'src/components/contentcards/CippPrettyCard'
 
 const SecureScore = () => {
   const textRef = useRef()
@@ -220,29 +221,15 @@ const SecureScore = () => {
           </CCard>
         </CCol>
         <CCol xs={3} className="mb-3">
-          <CCard className="content-card h-100">
-            <CCardHeader className="d-flex justify-content-between align-items-center">
-              <CCardTitle>Current Score</CCardTitle>
-            </CCardHeader>
-            <CCardBody>
-              <CCardText>
-                {isFetching && <Skeleton />}
-                {translateState && (
-                  <>
-                    <h3>
-                      {Math.round(
-                        (translateData?.currentScore / translateData?.maxScore) * 100 * 10,
-                      ) / 10}
-                      %
-                    </h3>
-                    <small className="text-medium-emphasis">
-                      {translateData?.currentScore} of {translateData?.maxScore} points
-                    </small>
-                  </>
-                )}
-              </CCardText>
-            </CCardBody>
-          </CCard>
+          <CippPrettyCard
+            title="Current Score"
+            percentage={
+              Math.round((translateData?.currentScore / translateData?.maxScore) * 100 * 10) / 10
+            }
+            topLabel={translateData?.currentScore}
+            smallLabel={`of ${translateData?.maxScore} points`}
+            isFetching={isFetching}
+          />
         </CCol>
         <CCol xs={3} className="mb-3">
           <CCard className="content-card h-100">