Merge pull request #400 from ZEnMo/388-the-colored-sections-behind-th…

…e-image-should-be-shown-as-straight-lines-and-not-as-angled-elements add background colors
Zenmo · Mar 3, 2023 · 3657b55 · 3657b55
2 parents 443753f + c80c0d9
commit 3657b55
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 67 deletions.
diff --git a/frontend/components/Blocks/SectionBlock/HolarchyTab.tsx b/frontend/components/Blocks/SectionBlock/HolarchyTab.tsx
@@ -39,14 +39,14 @@ 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
@@ -69,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}
@@ -93,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/KPIDashboard/HolarchyKPIDashboard.tsx b/frontend/components/KPIDashboard/HolarchyKPIDashboard.tsx
@@ -21,24 +21,21 @@ export default function HolarchyKPIDashboard({
   const levels = [
     {
       title: "National",
-      bgcolor: "bg-holon-blue-100",
       dataobject: "national",
       labelNode: "textLabelNational",
-      css: "row-start-7 bg-holon-blue-100 md:row-start-1 md:col-start-3",
+      css: "row-start-7 bg-holon-holarchy-national md:row-start-1 md:col-start-3",
+    },
+    {
+      title: "Res",
+      dataobject: "intermediate",
+      labelNode: "textLabelIntermediate",
+      css: "row-start-8 bg-holon-holarchy-intermediate md:row-start-2 md:col-start-3",
     },
-    // {
-    //   title: "Res",
-    //   bgcolor: "bg-holon-blue-200",
-    //   dataobject: "intermediate",
-    //   labelNode: "textLabelIntermediate",
-    //   css: "row-start-8 bg-holon-blue-200 md:row-start-2 md:col-start-3",
-    // },
     {
       title: "Lokale KPIs",
-      bgcolor: "bg-holon-blue-500",
       dataobject: "local",
       labelNode: "textLabelLocal",
-      css: "row-start-9 bg-holon-blue-300 md:row-start-3 md:col-start-3",
+      css: "row-start-9 bg-holon-holarchy-local md:row-start-3 md:col-start-3",
     },
   ];
 
@@ -47,7 +44,7 @@ export default function HolarchyKPIDashboard({
       {levels.map((level, index) => (
         <div
           key={index}
-          className={`${level.css} row-span-1 col-start-1 col-span-1 md:col-span-1 overflow-auto md:row-span-1 border-b-2 border-dashed border-holon-blue-900`}
+          className={`${level.css} row-span-1 col-start-1 col-span-1 md:col-span-1 overflow-auto md:row-span-1`}
           data-testid="KPIDashboard">
           <div key={index} className={`flex flex-row flex-wrap p-2`}>
             <p className={styles["kpiHolarchy__title"]}>

diff --git a/frontend/components/KPIDashboard/KPIItem.module.css b/frontend/components/KPIDashboard/KPIItem.module.css
@@ -73,6 +73,9 @@
   flex: 1 1 100%;
   font-weight: 600;
 }
+.kpiHolarchy__nodata {
+  padding: 0.5rem 0.5rem 0;
+}
 
 .kpiHolarchy output {
   font-size: 1.1rem;
@@ -105,6 +108,9 @@
   .kpiHolarchy__title {
     padding: 0.5rem 1.5rem 0;
   }
+  .kpiHolarchy__nodata {
+    padding: 0rem 1.5rem;
+  }
   .kpiHolarchy [data-class="kpiIcon"] {
     width: 2.2rem;
   }

diff --git a/frontend/components/KPIDashboard/KPIItems.tsx b/frontend/components/KPIDashboard/KPIItems.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import KPIItem from "./KPIItem";
 import { KPIData } from "./types";
+import styles from "./KPIItem.module.css";
 
 type KPIItems = {
   view: string;
@@ -32,32 +33,38 @@ export default function KPIItems({ view, data, level, loading }: KPIItems) {
 
   return (
     <React.Fragment>
-      <KPIItem
-        view={view}
-        title="Netbelasting"
-        label="netload"
-        value={valueCheck(data[level].netload)}
-        unit="%"
-      />
-      <KPIItem
-        view={view}
-        title="Betaalbaarheid"
-        label="costs"
-        unit={level === "local" ? "k.EUR/jaar" : "mld.EUR/jaar"}
-        value={valueCosts(level)}></KPIItem>
-      <KPIItem
-        view={view}
-        title="Duurzaamheid"
-        label="sustainability"
-        value={valueCheck(data[level].sustainability)}
-        unit="%"
-      />
-      <KPIItem
-        view={view}
-        title="Zelfvoorzienendheid"
-        label="selfSufficiency"
-        value={valueCheck(data[level].selfSufficiency)}
-        unit="%"></KPIItem>
+      {data[level] ? (
+        <React.Fragment>
+          <KPIItem
+            view={view}
+            title="Netbelasting"
+            label="netload"
+            value={valueCheck(data[level].netload)}
+            unit="%"
+          />
+          <KPIItem
+            view={view}
+            title="Betaalbaarheid"
+            label="costs"
+            unit={level === "local" ? "k.EUR/jaar" : "mld.EUR/jaar"}
+            value={valueCosts(level)}></KPIItem>
+          <KPIItem
+            view={view}
+            title="Duurzaamheid"
+            label="sustainability"
+            value={valueCheck(data[level].sustainability)}
+            unit="%"
+          />
+          <KPIItem
+            view={view}
+            title="Zelfvoorzienendheid"
+            label="selfSufficiency"
+            value={valueCheck(data[level].selfSufficiency)}
+            unit="%"></KPIItem>
+        </React.Fragment>
+      ) : (
+        <span className={styles["kpiHolarchy__nodata"]}>Er is geen data op dit niveau.</span>
+      )}
     </React.Fragment>
   );
 }
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -31,6 +31,9 @@ module.exports = {
         "holon-light-green": "#DEF3DE",
         "holon-red": "#c51700",
         "holon-light-red": "#FFCCCC",
+        "holon-holarchy-national": "#DAE5F5",
+        "holon-holarchy-intermediate": "#B9CAE2",
+        "holon-holarchy-local": "#9DB2CF",
       },
       backgroundImage: {
         "split-white-blue": "linear-gradient(-18deg, #051E3F 40% , white 30%)",