Accumulative charts

fidlabs · Oct 9, 2024 · 07a4a2e · 07a4a2e
1 parent 1e363cb
commit 07a4a2e
Show file tree

Hide file tree

Showing 10 changed files with 112 additions and 95 deletions.
diff --git a/src/hooks/useCDP.js b/src/hooks/useCDP.js
@@ -1,17 +1,17 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { api } from '../utils/api';
 import { useFetch } from './fetch';
+import { difference } from 'lodash';
 
-const ALLOCATOR_TECH_API = `https://compliance.allocator.tech`;
 const CDP_API = `https://cdp.allocator.tech`;
 
 const useCDP = () => {
 
   const getRetrievabilitySP = () => {
     const fetch = async () => {
-      const data = await api(`${CDP_API}/stats/providers/retrievability`, {}, true);
+      const data = await api(`${CDP_API}/stats/acc/providers/retrievability`, {}, true);
       return {
-        avg_success_rate_pct: data?.avg_score,
+        avg_success_rate_pct: data?.averageSuccessRate,
         count: data?.histogram?.total,
         buckets: data?.histogram?.results
       };
@@ -33,11 +33,11 @@ const useCDP = () => {
 
   const getRetrievabilityAllocator = () => {
     const fetch = async () => {
-      const data = await api(`${ALLOCATOR_TECH_API}/stats/allocators/retrievability`, {}, true);
+      const data = await api(`${CDP_API}/stats/acc/allocators/retrievability`, {}, true);
       return {
-        avg_score: data?.avg_score,
-        count: data?.allocators_retrievability_score_histogram?.total_count,
-        buckets: data?.allocators_retrievability_score_histogram?.buckets
+        avg_score: data?.averageSuccessRate,
+        count: data?.histogram?.total,
+        buckets: data?.histogram?.results
       };
     };
 
@@ -57,7 +57,7 @@ const useCDP = () => {
 
   const getNumberOfDealsSP = () => {
     const fetch = async () => {
-      const data = await api(`${CDP_API}/stats/providers/clients`, {}, true);
+      const data = await api(`${CDP_API}/stats/acc/providers/clients`, {}, true);
       return {
         count: data?.total,
         buckets: data?.results
@@ -80,7 +80,7 @@ const useCDP = () => {
 
   const getSizeOfTheBiggestDealSP = () => {
     const fetch = async () => {
-      const data = await api(`${CDP_API}/stats/providers/biggest-client-distribution`, {}, true);
+      const data = await api(`${CDP_API}/stats/acc/providers/biggest-client-distribution`, {}, true);
       return {
         count: data?.total,
         buckets: data?.results
@@ -103,10 +103,10 @@ const useCDP = () => {
 
   const getSizeOfTheBiggestClientAllocator = () => {
     const fetch = async () => {
-      const data = await api(`${ALLOCATOR_TECH_API}/stats/allocators/biggest_client_distribution`, {}, true);
+      const data = await api(`${CDP_API}/stats/acc/allocators/biggest-client-distribution`, {}, true);
       return {
-        count: data?.allocators_biggest_client_distribution_histogram?.total_count,
-        buckets: data?.allocators_biggest_client_distribution_histogram?.buckets
+        count: data?.total,
+        buckets: data?.results
       };
     };
 
@@ -124,13 +124,33 @@ const useCDP = () => {
     };
   };
 
-  const getProviderComplianceAllocator = (from, to) => {
+  const getProviderComplianceAllocator = () => {
+
     const fetch = async () => {
-      const data = await api(`${ALLOCATOR_TECH_API}/stats/allocators/sps_compliance?min_compliance_score=${from}&max_compliance_score=${to}`, {}, true);
-      return {
-        count: data?.allocators_sps_compliance_distribution_histogram?.total_count,
-        buckets: data?.allocators_sps_compliance_distribution_histogram?.buckets
-      };
+      const data = await api(`${CDP_API}/stats/acc/allocators/sps-compliance`, {}, true);
+      const chartData = [];
+      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 differedWeeks = difference(weeks, compliantMetric.map(item => item.week), partiallyCompliantMetric.map(item => item.week));
+
+      if (differedWeeks.length) {
+        throw new Error('Weeks are not equal');
+      }
+
+      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 partiallyCompliant = partiallyCompliantMetric.find(item => item.week === week);
+        chartData.push({
+          week
+        });
+      }
+
+      return chartData;
     };
 
     const [data, setData] = useState(undefined);
@@ -139,7 +159,7 @@ const useCDP = () => {
     useEffect(() => {
       setIsLoading(true);
       fetch().then(setData).then(() => setIsLoading(false));
-    }, [from, to]);
+    }, []);
 
     return {
       data,
@@ -226,17 +246,16 @@ const useCDP = () => {
   }, []);
 
   const parseSingleBucketWeek = useCallback((bucket, index, length, unit = '') => {
-    let name = `${bucket.valueFromExclusive} - ${bucket.valueToExclusive}${unit}`;
-    if (bucket.valueToExclusive - bucket.valueFromExclusive <= 1) {
+    let name = `${bucket.valueFromExclusive + 1} - ${bucket.valueToInclusive}${unit}`;
+    if (bucket.valueToInclusive - bucket.valueFromExclusive <= 1) {
       const unitWithoutS = unit.slice(0, -1);
-      name = `${bucket.valueToExclusive}${bucket.valueToExclusive === 1 ? unitWithoutS : unit}`;
+      name = `${bucket.valueToInclusive}${bucket.valueToInclusive === 1 ? unitWithoutS : unit}`;
     } else if (index === 0) {
       const unitWithoutS = unit.slice(0, -1);
-      name = `${bucket.valueFromExclusive < 0 ? '' : 'Less than '}${bucket.valueToExclusive}${bucket.valueToExclusive === 1 ? unitWithoutS : unit}`;
+      name = `${bucket.valueFromExclusive < 0 ? '' : 'Less than '}${bucket.valueToInclusive}${bucket.valueToInclusive === 1 ? unitWithoutS : unit}`;
     } else if (index === length - 1) {
       name = `Over ${bucket.valueFromExclusive}${unit}`;
     }
-    console.log(name, bucket);
     return {
       name,
       value: bucket.count
@@ -257,9 +276,9 @@ const useCDP = () => {
   }, []);
 
   const parseBucketGroupWeek = useCallback((group, index, length, unit = '') => {
-    let name = `${group[0].valueFromExclusive} - ${group[group.length - 1].valueToExclusive}${unit}`;
+    let name = `${group[0].valueFromExclusive + 1} - ${group[group.length - 1].valueToInclusive}${unit}`;
     if (index === 0) {
-      name = `Less than ${group[group.length - 1].valueToExclusive}${unit}`;
+      name = `Less than ${group[group.length - 1].valueToInclusive}${unit}`;
     } else if (index === length - 1) {
       name = `Over ${group[0].valueFromExclusive}${unit}`;
     }

diff --git a/src/pages/ComplianceDashboardPage/components/AuditStateAllocator.js b/src/pages/ComplianceDashboardPage/components/AuditStateAllocator.js
@@ -25,7 +25,6 @@ const AuditStateAllocator = ({setCurrentElement}) => {
         <div className="chartHeader">
           <div>Audit state</div>
           <div className="chartHeaderOptions">
-            <SharedScaleTabs scale={selectedScale} setScale={setSelectedScale} />
           </div>
         </div>
       </div>

diff --git a/src/pages/ComplianceDashboardPage/components/BiggestDealsAllocator.js b/src/pages/ComplianceDashboardPage/components/BiggestDealsAllocator.js
@@ -1,9 +1,9 @@
 import { useCDP, useScrollObserver, useChartScale } from 'hooks';
 import { useEffect } from 'react';
 import { TabsSelector } from 'components';
-import BarGraph from './BarGraph';
-import useChartData from '../hooks/useChartData';
 import SharedScaleTabs from './SharedScaleTabs';
+import useWeeklyChartData from '../hooks/useWeeklyChartData';
+import StackedBarGraph from './StackedBarGraph';
 
 const tabs = ['3 bars', '6 bars', 'All']
 
@@ -14,7 +14,7 @@ const BiggestDealsAllocator = ({setCurrentElement}) => {
 
   const { top, ref } = useScrollObserver();
 
-  const { chartData, currentTab, setCurrentTab, tabs, minValue } = useChartData(data?.buckets, '%')
+  const { chartData, currentTab, setCurrentTab, tabs, minValue } = useWeeklyChartData(data?.buckets, '%')
   const { scale, selectedScale, setSelectedScale } = useChartScale(minValue)
 
   useEffect(() => {
@@ -30,7 +30,6 @@ const BiggestDealsAllocator = ({setCurrentElement}) => {
         <div className="chartHeader">
           <div>Size of the biggest allocation</div>
           <div className="chartHeaderOptions">
-            <SharedScaleTabs scale={selectedScale} setScale={setSelectedScale} />
             <TabsSelector tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
           </div>
         </div>
@@ -46,7 +45,7 @@ const BiggestDealsAllocator = ({setCurrentElement}) => {
             </div>
           </div>
           <div className="size6">
-            <BarGraph data={chartData} scale={scale} isLoading={isLoading}/>
+            <StackedBarGraph data={chartData} scale={scale} isLoading={isLoading}/>
           </div>
         </div>
 

diff --git a/src/pages/ComplianceDashboardPage/components/BiggestDealsSP.js b/src/pages/ComplianceDashboardPage/components/BiggestDealsSP.js
@@ -28,7 +28,6 @@ const BiggestDealsSP = ({setCurrentElement}) => {
         <div className="chartHeader">
           <div>Size Of The Biggest Deal</div>
           <div className="chartHeaderOptions">
-            <SharedScaleTabs scale={selectedScale} setScale={setSelectedScale} />
             <TabsSelector tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
           </div>
         </div>

diff --git a/src/pages/ComplianceDashboardPage/components/ProviderComplianceAllocator.js b/src/pages/ComplianceDashboardPage/components/ProviderComplianceAllocator.js
@@ -1,9 +1,9 @@
 import { useCDP, useScrollObserver, useChartScale } from 'hooks';
 import { useEffect, useMemo, useState } from 'react';
 import { TabsSelector } from 'components';
-import BarGraph from './BarGraph';
-import useChartData from '../hooks/useChartData';
 import SharedScaleTabs from './SharedScaleTabs';
+import useWeeklyChartData from '../hooks/useWeeklyChartData';
+import StackedBarGraph from './StackedBarGraph';
 
 const metrics = [
   '0-1/3 metrics',
@@ -13,20 +13,8 @@ const metrics = [
 
 const ProviderComplianceAllocator = ({setCurrentElement}) => {
 
-  const [selectedMetric, setSelectedMetric] = useState(2);
   const { top, ref } = useScrollObserver()
 
-  const metricRange = useMemo(() => {
-    switch (selectedMetric) {
-      case 0:
-        return [0, 1]
-      case 1:
-        return [2, 2]
-      case 2:
-        return [3, 3]
-    }
-  }, [selectedMetric])
-
   useEffect(() => {
     if (top > 0 && top < 300) {
       setCurrentElement("ProviderComplianceAllocator");
@@ -35,56 +23,72 @@ const ProviderComplianceAllocator = ({setCurrentElement}) => {
 
   const {
     data, isLoading
-  } = useCDP().getProviderComplianceAllocator(metricRange[0], metricRange[1])
-  const { chartData, currentTab, setCurrentTab, tabs, minValue } = useChartData(data?.buckets, '%')
-  const { scale, selectedScale, setSelectedScale } = useChartScale(minValue)
+  } = useCDP().getProviderComplianceAllocator()
+
+  // console.log(chartData)
+
+  const chartData = useMemo(() => {
+    return data;
+  }, [data]);
 
   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">
-            <TabsSelector tabs={metrics} currentTab={selectedMetric} setCurrentTab={setSelectedMetric} />
-            <SharedScaleTabs scale={selectedScale} setScale={setSelectedScale}/>
-            <TabsSelector tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
           </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">
-            <BarGraph data={chartData} scale={scale} isLoading={isLoading}/>
-          </div>
-        </div>
-
+        <p>Work in progress</p>
       </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/RetrievabilityScoreAllocator.js b/src/pages/ComplianceDashboardPage/components/RetrievabilityScoreAllocator.js
@@ -1,17 +1,17 @@
 import { useCDP, useScrollObserver, useChartScale } from 'hooks';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { TabsSelector } from 'components';
-import BarGraph from './BarGraph';
-import useChartData from '../hooks/useChartData';
 import SharedScaleTabs from './SharedScaleTabs';
+import useWeeklyChartData from '../hooks/useWeeklyChartData';
+import StackedBarGraph from './StackedBarGraph';
 
 const RetrievabilityScoreAllocator = ({setCurrentElement}) => {
   const {
     data, isLoading
   } = useCDP().getRetrievabilityAllocator()
 
   const { top, ref } = useScrollObserver()
-  const { chartData, currentTab, setCurrentTab, tabs, minValue } = useChartData(data?.buckets, '%')
+  const { chartData, currentTab, setCurrentTab, tabs, minValue } = useWeeklyChartData(data?.buckets, '%')
   const { scale, selectedScale, setSelectedScale } = useChartScale(minValue)
 
 
@@ -28,7 +28,6 @@ const RetrievabilityScoreAllocator = ({setCurrentElement}) => {
         <div className="chartHeader">
           <div>Retrievability Score</div>
           <div className="chartHeaderOptions">
-            <SharedScaleTabs scale={selectedScale} setScale={setSelectedScale}/>
             <TabsSelector tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
           </div>
         </div>
@@ -52,7 +51,7 @@ const RetrievabilityScoreAllocator = ({setCurrentElement}) => {
             </div>
           </div>
           <div className="size6">
-            <BarGraph data={chartData} scale={scale} isLoading={isLoading}/>
+            <StackedBarGraph data={chartData} scale={scale} isLoading={isLoading}/>
           </div>
         </div>
 

diff --git a/src/pages/ComplianceDashboardPage/components/RetrievabilityScoreSP.js b/src/pages/ComplianceDashboardPage/components/RetrievabilityScoreSP.js
@@ -28,7 +28,6 @@ const RetrievabilityScoreSP = ({setCurrentElement}) => {
         <div className="chartHeader">
           <div>Retrievability Score</div>
           <div className="chartHeaderOptions">
-            <SharedScaleTabs scale={selectedScale} setScale={setSelectedScale}/>
             <TabsSelector tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
           </div>
         </div>