SPS complaince

fidlabs · Oct 10, 2024 · 0e528b2 · 0e528b2
1 parent 07a4a2e
commit 0e528b2
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 51 deletions.
diff --git a/src/hooks/useCDP.js b/src/hooks/useCDP.js
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { api } from '../utils/api';
 import { useFetch } from './fetch';
 import { difference } from 'lodash';
+import { format } from 'date-fns';
 
 const CDP_API = `https://cdp.allocator.tech`;
 
@@ -132,7 +133,7 @@ const useCDP = () => {
       const nonCompliantMetric = data?.results[0]?.histogram?.results;
       const compliantMetric = data?.results[2]?.histogram?.results;
       const partiallyCompliantMetric = data?.results[1]?.histogram?.results;
-      const weeks = nonCompliantMetric.map(item => item.week)
+      const weeks = nonCompliantMetric.map(item => item.week)?.sort((a, b) => new Date(a) - new Date(b));
 
       const differedWeeks = difference(weeks, compliantMetric.map(item => item.week), partiallyCompliantMetric.map(item => item.week));
 
@@ -142,11 +143,20 @@ const useCDP = () => {
 
       for (let week of weeks) {
         const nonCompliant = nonCompliantMetric.find(item => item.week === week);
-        const compliant = compliantMetric.find(item => item.week === week);
-        console.log('compliant', compliant?.results?.filter(value => value.valueFromExclusive >= 80))
+        const nonCompliantCount = nonCompliant?.total;
         const partiallyCompliant = partiallyCompliantMetric.find(item => item.week === week);
+        const partiallyCompliantCount = partiallyCompliant?.results?.filter(item => item.valueFromExclusive >= 80)?.reduce((acc, item) => acc + item.count, 0);
+        const compliant = compliantMetric.find(item => item.week === week);
+        const compliantCount = compliant?.results?.filter(item => item.valueFromExclusive >= 80)?.reduce((acc, item) => acc + item.count, 0);
+
         chartData.push({
-          week
+          name: `w${format(new Date(week), 'ww yyyy')}`,
+          nonCompliant: nonCompliantCount - partiallyCompliantCount - compliantCount,
+          nonCompliantName: 'Non compliant',
+          partiallyCompliant: partiallyCompliantCount,
+          partiallyCompliantName: 'Partially compliant',
+          compliant: compliantCount,
+          compliantName: 'Compliant',
         });
       }
 

diff --git a/src/pages/ComplianceDashboardPage/components/ProviderComplianceAllocator.js b/src/pages/ComplianceDashboardPage/components/ProviderComplianceAllocator.js
@@ -25,7 +25,6 @@ const ProviderComplianceAllocator = ({setCurrentElement}) => {
     data, isLoading
   } = useCDP().getProviderComplianceAllocator()
 
-  // console.log(chartData)
 
   const chartData = useMemo(() => {
     return data;
@@ -41,54 +40,28 @@ const ProviderComplianceAllocator = ({setCurrentElement}) => {
         </div>
       </div>
       <div className="cardData">
-        <p>Work in progress</p>
+        <div className="grid w-full noMargin">
+          <div className="card alt compact size3">
+            <div className="cardTitle noMargin">
+              What are those metrics?
+            </div>
+            <div className="cardData compact">
+              <ul style={{paddingLeft: '15px', margin: 0}}>
+                <li>SP have retrievability score above average</li>
+                <li>SP have at least 3 clients</li>
+                <li>SP biggest client accounts for less than 30%</li>
+              </ul>
+            </div>
+          </div>
+          <div className="size6">
+            <StackedBarGraph data={chartData} scale={'linear'} isLoading={isLoading}/>
+          </div>
+        </div>
+
       </div>
     </div>
   </div>
 
-  // return <div className="size6 w-full" id="ProviderComplianceAllocator" ref={ref}>
-  //   <div className="card">
-  //     <div className="cardTitle noMargin">
-  //       <div className="chartHeader">
-  //         <div>SP Compliance</div>
-  //         <div className="chartHeaderOptions">
-  //         </div>
-  //       </div>
-  //     </div>
-  //     <div className="cardData">
-  //       <div className="grid w-full noMargin">
-  //         <div className="card alt compact size3">
-  //           <div className="cardTitle">
-  //             Total allocators
-  //           </div>
-  //           <div className="cardData">
-  //             {data?.count}
-  //           </div>
-  //           <div className="cardData compact">
-  //             This data shows allocators which clients made at least one deal
-  //           </div>
-  //         </div>
-  //         <div className="card alt compact size3">
-  //           <div className="cardTitle noMargin">
-  //             What are those metrics?
-  //           </div>
-  //           <div className="cardData compact">
-  //             <ul style={{paddingLeft: '15px', margin: 0}}>
-  //               <li>SP have retrievability score above average</li>
-  //               <li>SP have at least 3 clients</li>
-  //               <li>SP biggest client accounts for less than 30%</li>
-  //             </ul>
-  //           </div>
-  //         </div>
-  //         <div className="size6">
-  //           <StackedBarGraph data={chartData} scale={'linear'} isLoading={isLoading}/>
-  //         </div>
-  //       </div>
-  //
-  //     </div>
-  //   </div>
-  // </div>
-
 }
 
 export default ProviderComplianceAllocator;
diff --git a/src/pages/ComplianceDashboardPage/components/StackedBarGraph.js b/src/pages/ComplianceDashboardPage/components/StackedBarGraph.js
@@ -23,11 +23,11 @@ const StackedBarGraph = ({ data, scale = 'linear', isLoading, color }) => {
         <div className="chartTooltipTitle">{payload.name}</div>
         <div className="chartTooltipData">{
           dataKeys.map((key, index) => {
-            const value = payload[`group${index}`];
+            const value = payload[`group${index}`] ?? payload[key];
             if (!value) {
               return null;
             }
-            const name = payload[`group${index}Name`];
+            const name = payload[`group${index}Name`] ?? payload[`${key}Name`] ?? key;
             return <div key={key} className="chartTooltipRow">
               <div style={{ color: palette(0, index) }} >{name} - {value} providers</div>
             </div>