Acceptance holarchy and costbenefit

Zenmo · Mar 6, 2023 · 7e033c3 · 7e033c3
2 parents 4196be3 + 3657b55
commit 7e033c3
Show file tree

Hide file tree

Showing 24 changed files with 2,495 additions and 279 deletions.
diff --git a/frontend/api/holon.ts b/frontend/api/holon.ts
@@ -23,6 +23,10 @@ export async function getHolonDataSegments() {
   return await httpGet(`/api/dummy-kosten-baten`);
 }
 
+export async function getHolonDataSegmentsDetail() {
+  return await httpGet(`/api/dummy-kosten-baten`);
+}
+
 export async function getHolonGraphColor() {
   return await httpGet(`${API_URL}/v1/graph-colors/`);
 }
diff --git a/frontend/components/Blocks/ChallengeFeedbackModal/ChallengeFeedbackModal.tsx b/frontend/components/Blocks/ChallengeFeedbackModal/ChallengeFeedbackModal.tsx
@@ -43,7 +43,7 @@ export default function ChallengeFeedbackModal({
               conditionItem.type == "interactive_input_condition"
                 ? content?.find(
                     content => content.value.id == parseFloat(conditionItem.value.parameter)
-                  ).currentValue
+                  )?.currentValue
                 : kpis[splittedParameter[0]][splittedParameter[1]];
 
             const conditionValue = parseFloat(conditionItem.value.value);

diff --git a/frontend/components/Blocks/HolarchyFeedbackImage/HolarchyFeedbackImage.tsx b/frontend/components/Blocks/HolarchyFeedbackImage/HolarchyFeedbackImage.tsx
@@ -45,7 +45,7 @@ export default function HolarchyFeedbackImage({ content, holarchyfeedbackimages
             //inputvalue is the vaule of the assessed validator
             const inputvalue = content?.find(
               content => content.value.id == parseFloat(conditionItem.value.parameter)
-            ).currentValue;
+            )?.currentValue;
 
             const conditionValue = parseFloat(conditionItem.value.value);
 

diff --git a/frontend/components/Blocks/SectionBlock/ContentColumn.tsx b/frontend/components/Blocks/SectionBlock/ContentColumn.tsx
@@ -37,8 +37,10 @@ export default function ContentColumn({
           break;
       }
     });
-
-    handleContentChange([...contentArr]);
+    // Only trigger api-call when input has changed
+    if (JSON.stringify(content) !== JSON.stringify(contentArr)) {
+      handleContentChange([...contentArr]);
+    }
   }, [dataContent]);
 
   function getDefaultValue(content: InteractiveContent): string | number | string[] | undefined {

diff --git a/frontend/components/Blocks/SectionBlock/CostBenefitModal/CostBenefitModal.tsx b/frontend/components/Blocks/SectionBlock/CostBenefitModal/CostBenefitModal.tsx
@@ -1,15 +1,52 @@
-import KostenBatenChart from "@/components/Charts/KostenBatenChart";
+import { useState, useEffect } from "react";
+import CostBenefitChart from "@/components/CostBenefit/CostBenefitChart";
+import CostBenefitDetail from "@/components/CostBenefit/CostBenefitDetail";
 import { Tab } from "@headlessui/react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import classNames from "classnames";
-import CostBenefitTable from "@/components/Charts/CostBenefitTable";
+import {
+  getHolonDataSegments,
+  getHolonDataSegmentsDetail,
+  getHolonGraphColor,
+} from "../../../../api/holon";
+
+import CostBenefitTable from "@/components/CostBenefit/CostBenefitTable";
 
 export default function CostBenefitModal({ handleClose }: { handleClose: () => void }) {
+  const [data, setData] = useState([]);
+  const [detailData, setDetailData] = useState([]);
+  const [dataColors, setDataColors] = useState([]);
+  const ignoredLabels = ["name", "Netto kosten"];
+
   const handleClick = (e: React.MouseEvent<HTMLElement>) => {
     e.preventDefault();
     handleClose();
   };
 
+  const convertGraphData = data => {
+    const returnArr: unknown[] = [];
+    Object.entries(data).map(value => {
+      const constructObj = { ...value[1] };
+      constructObj.name = value[0].replace(/['"]+/g, "");
+      returnArr.push(constructObj);
+    });
+
+    return returnArr;
+  };
+
+  useEffect(() => {
+    getHolonDataSegments()
+      .then(data => setData(data))
+      .catch(err => console.log(err));
+
+    getHolonDataSegmentsDetail()
+      .then(data => setDetailData(data))
+      .catch(err => console.log(err));
+
+    getHolonGraphColor()
+      .then(result => setDataColors(result.items))
+      .catch(err => console.log(err));
+  }, []);
   const tabItems = ["Grafiek", "Tabel", "Detail"];
 
   return (
@@ -22,7 +59,7 @@ export default function CostBenefitModal({ handleClose }: { handleClose: () => v
                 <Tab.List>
                   {tabItems.map((tabItem, index) => (
                     <Tab
-                      key={index}
+                      key={tabItem + index}
                       className={({ selected }) =>
                         classNames(
                           "p-3 mr-px ",
@@ -40,16 +77,29 @@ export default function CostBenefitModal({ handleClose }: { handleClose: () => v
                 </button>
               </div>
 
-              <Tab.Panels className="flex flex-1 h-full flex-col">
-                <Tab.Panel className="flex flex-1 h-full flex-col">
-                  <h2 className="text-center">Kosten en baten per groep</h2>
-                  <KostenBatenChart />
+              <Tab.Panels className="flex flex-1 flex-col min-h-0">
+                <Tab.Panel className="flex flex-1 max-h-full flex-col">
+                  <h2 className="text-center">Kosten en baten per segment</h2>
+                  <CostBenefitChart
+                    chartdata={convertGraphData(data)}
+                    dataColors={dataColors}
+                    ignoredLabels={ignoredLabels}
+                  />
                 </Tab.Panel>
-                <Tab.Panel>
+                <Tab.Panel className="flex  max-h-full flex-col">
                   <h2 className="text-center">Kosten en baten per groep</h2>
-                  <CostBenefitTable></CostBenefitTable>
+                  <CostBenefitTable tableData={data} />
+                </Tab.Panel>
+
+                <Tab.Panel className="flex flex-1 flex-col gap-2 min-h-0">
+                  <h2 className="text-center">Kosten en baten per subtype huishouden</h2>
+                  <CostBenefitDetail
+                    chartdata={convertGraphData(data)}
+                    detailData={detailData}
+                    dataColors={dataColors}
+                    ignoredLabels={ignoredLabels}
+                  />
                 </Tab.Panel>
-                <Tab.Panel>Content 3</Tab.Panel>
               </Tab.Panels>
             </Tab.Group>
           </div>

diff --git a/frontend/components/Blocks/SectionBlock/HolarchyTab.tsx b/frontend/components/Blocks/SectionBlock/HolarchyTab.tsx
@@ -39,14 +39,23 @@ export default function HolarchyTab({
         {/*Interactive input -  left column */}
         {levels.map((level, index) => {
           const cssClasses = [
-            "row-start-1 bg-holon-blue-100 ",
-            "row-start-2 bg-holon-blue-200",
-            "row-start-3 bg-holon-blue-300",
+            "row-start-1 bg-holon-holarchy-national",
+            "row-start-2 bg-holon-holarchy-intermediate",
+            "row-start-3 bg-holon-holarchy-local",
           ];
           return (
             <div
               key={index}
-              className={`${cssClasses[index]} p-4  overflow-auto row-span-1 col-start-1 col-span-1 md:col-start-1 md:col-span-1  md:row-span-1 border-b-2 border-dashed border-holon-blue-900 `}>
+              className={`${cssClasses[index]} p-4  overflow-auto row-span-1 col-start-1 col-span-1 md:col-start-1 md:col-span-1  md:row-span-1  `}>
+              <p className="font-semibold	">
+                {level == "national"
+                  ? textLabelNational
+                  : level == "local"
+                  ? textLabelLocal
+                  : level == "intermediate"
+                  ? textLabelIntermediate
+                  : ""}
+              </p>
               <ContentColumn
                 dataContent={dataContent}
                 content={content}
@@ -60,21 +69,10 @@ export default function HolarchyTab({
 
         <div className="row-span-1 row-start-4 col-start-1 col-span-1 md:col-start-2  md:col-span-1  md:row-span-3 md:row-start-1 grid grid-rows grid-rows-3 overflow-hidden">
           {/*image - highest block*/}
-          <div className="relative row-start-1 bg-holon-blue-100 row-span-1 col-start-1 col-span-1">
-            <svg
-              viewBox="0 0 20 4.95"
-              className="hidden md:block md:absolute md:w-full md:top-[100%] md:fill-[#e8eeff] z-10">
-              <path
-                d="
-            M10 4.95
-            L0 0
-            L20 0 Z"
-              />
-            </svg>
-          </div>
+          <div className="row-start-1 bg-holon-holarchy-national row-span-1 col-start-1 col-span-1 "></div>
 
           {/*image - middle block showing image*/}
-          <div className="relative bg-holon-blue-200 row-start-2 row-span-1 col-start-1 col-span-1">
+          <div className="relative bg-holon-holarchy-intermediate row-start-2 row-span-1 col-start-1 col-span-1 ">
             {holarchyFeedbackImages.length > 0 && (
               <HolarchyFeedbackImage
                 holarchyfeedbackimages={holarchyFeedbackImages}
@@ -84,18 +82,7 @@ export default function HolarchyTab({
           </div>
 
           {/*image - lowest block*/}
-          <div className="relative overflow-hidden bg-holon-blue-300  row-start-3 row-span-1 col-start-1 col-span-1">
-            <svg
-              viewBox="0 0 20 4.95"
-              className="hidden md:block md:w-full md:absolute md:top-[-2px] md:fill-[#d8e3ff]">
-              <path
-                d="
-            M10 4.95
-            L0 0
-            L20 0 Z"
-              />
-            </svg>
-          </div>
+          <div className="bg-holon-holarchy-local  row-start-3 row-span-1 col-start-1 col-span-1"></div>
         </div>
         {/* KPIs - right column */}
         {/*National KPIs */}

diff --git a/frontend/components/Blocks/SectionBlock/SectionBlock.tsx b/frontend/components/Blocks/SectionBlock/SectionBlock.tsx
@@ -54,7 +54,7 @@ export default function SectionBlock({ data, pagetype, feedbackmodals }: Props)
   const [costBenefitModal, setCostBenefitModal] = useState<boolean>(false);
   const [holarchyModal, setHolarchyModal] = useState<boolean>(false);
 
-  const myRef = useRef(null);
+  const sectionContainerRef = useRef(null);
 
   const backgroundFullcolor =
     data.value.background.size == "bg__full" ? data.value.background.color : "";
@@ -93,12 +93,14 @@ export default function SectionBlock({ data, pagetype, feedbackmodals }: Props)
 
   function openHolarchyModal() {
     setHolarchyModal(true);
-    myRef.current.classList.add("h-screen");
-    myRef.current.scrollIntoView();
+    sectionContainerRef.current.classList.add("h-screen");
+    setTimeout(() => {
+      sectionContainerRef.current.scrollIntoView();
+    }, 0);
   }
 
   function closeHolarchyModal() {
-    myRef.current.classList.remove("h-screen");
+    sectionContainerRef.current.classList.remove("h-screen");
     setHolarchyModal(false);
   }
 
@@ -129,7 +131,7 @@ export default function SectionBlock({ data, pagetype, feedbackmodals }: Props)
   }
 
   return (
-    <div className={`sectionContainer`} ref={myRef}>
+    <div className={`sectionContainer`} ref={sectionContainerRef}>
       {feedbackmodals && (
         <ChallengeFeedbackModal feedbackmodals={feedbackmodals} kpis={kpis} content={content} />
       )}

diff --git a/frontend/components/Charts/CostBenefit.module.css b/frontend/components/Charts/CostBenefit.module.css
diff --git a/frontend/components/Charts/dummyData.tsx b/frontend/components/Charts/dummyData.tsx