feat: display kpis grouped by categories

Author: rebecamurillo

src/components/react/LivingLabKPIs.tsx

@@ -11,18 +11,22 @@ import type { IKpi, IIKpiResultBeforeAfter } from "../../types";
 import { BeforeAndAfterDates, LivingLabKpiResultsForm } from "./form";
 import { KpiTypeBadge } from "./KpiTypeBadge";
 import { KpiMetricTypeBadge } from "./KpiMetricTypeBadge";
-import { Badge } from "./ui";
+import { Badge, ExpansionPanel } from "./ui";
+import type { ICategory } from "../../types/Category";
+import { tr } from "motion/react-client";
 
 type Props = {
   kpis: IKpi[];
   livingLabId: number;
   kpiResults: IIKpiResultBeforeAfter[];
+  categories: ICategory[];
 };
 
 export function LivingLabKPIs({
   kpis = [],
   livingLabId,
   kpiResults: livingLabKpis = [],
+  categories = [],
 }: Props) {
   if (!kpis || kpis.length === 0) {
     return <div>No KPIs available.</div>;
@@ -34,63 +38,99 @@ export function LivingLabKPIs({
   const [beforeDate, setBeforeDate] = useState<string>(today);
   const [afterDate, setAfterDate] = useState<string>(today);
 
+  const getKpiRow = (kpiId: number) => {
+    let kpi = kpis.find((k) => k.id === kpiId);
+    const hasChildren = kpis.some((k) => k.parent_kpi_id === kpiId);
+    const idChild = kpi?.parent_kpi_id ? true : false;
+
+    if (!kpi) return null;
+    return (
+      <TableRow
+        key={kpiId}
+        className={hasChildren || !idChild ? "border-t-2 border-info/30" : ""}
+      >
+        <TableCell className="flex flex-col w-22">
+          {kpi.kpi_number}
+          <KpiTypeBadge type={kpi.type} />
+        </TableCell>
+        <TableCell className="whitespace-pre-line break-words">
+          {kpi.name}
+          <Badge tooltip={kpi.description} size="sm" color="info" />
+        </TableCell>
+        <TableCell>
+          {!hasChildren && (
+            <div className="flex flex-col text-xs">
+              <KpiMetricTypeBadge type={kpi.metric} />
+              {kpi.metric_description?.length &&
+                kpi.metric_description?.length > 0 && (
+                  <strong>{kpi.metric_description}</strong>
+                )}
+              {typeof kpi.min_value === "number" && (
+                <span>Min: {kpi.min_value} </span>
+              )}
+              {typeof kpi.max_value === "number" && (
+                <span>Max: {kpi.max_value}</span>
+              )}
+            </div>
+          )}
+        </TableCell>
+        <TableCell className="w-20">
+          {!hasChildren && (
+            <LivingLabKpiResultsForm
+              livingLabId={livingLabId}
+              kpiId={kpi.id}
+              kpiMetric={kpi.metric}
+              initialBefore={livingLabKpiMap.get(kpi.id)?.result_before}
+              initialAfter={livingLabKpiMap.get(kpi.id)?.result_after}
+              defaultBeforeDate={beforeDate}
+              defaultAfterDate={afterDate}
+            />
+          )}
+        </TableCell>
+      </TableRow>
+    );
+  };
+
   return (
     <div className="flex flex-col gap-8 mx-auto">
       <BeforeAndAfterDates
         onChangeBeforeDate={setBeforeDate}
         onChangeAfterDate={setAfterDate}
       />
-      <Table dense striped className="lg:min-w-3xl max-w-5xl">
-        <TableHead>
-          <TableRow>
-            <TableHeader>KPI Number</TableHeader>
-            <TableHeader>Name</TableHeader>
-            <TableHeader>Metric unit</TableHeader>
-            <TableHeader>Value Before vs After</TableHeader>
-          </TableRow>
-        </TableHead>
+      {categories.map(({ id, name, kpis }, index) => (
+        <ExpansionPanel
+          key={id}
+          header={
+            <div className="flex flex-row justify-center items-center gap-2 rounded-2xl border-info bg-info px-2 py-1">
+              <h5>{name}</h5>
+              <Badge
+                color="light"
+                size="sm"
+                tooltip="Number of KPIs in this category"
+                displayTooltipIcon={false}
+              >
+                {kpis?.length || 0} KPIs
+              </Badge>
+            </div>
+          }
+          arrow
+          open={index === 0}
+          content={
+            <Table dense className="lg:min-w-3xl max-w-5xl">
+              <TableHead>
+                <TableRow>
+                  <TableHeader>KPI Number</TableHeader>
+                  <TableHeader>Name</TableHeader>
+                  <TableHeader>Metric unit</TableHeader>
+                  <TableHeader>Value Before vs After</TableHeader>
+                </TableRow>
+              </TableHead>
 
-        <TableBody>
-          {kpis.map((kpi, idx) => (
-            <TableRow key={kpi.kpi_number ?? idx}>
-              <TableCell className="flex flex-col w-22">
-                {kpi.kpi_number}
-                <KpiTypeBadge type={kpi.type} />
-              </TableCell>
-              <TableCell className="whitespace-pre-line break-words">
-                {kpi.name}
-                <Badge tooltip={kpi.description} size="sm" color="info" />
-              </TableCell>
-              <TableCell>
-                <div className="flex flex-col text-xs">
-                  <KpiMetricTypeBadge type={kpi.metric} />
-                  {kpi.metric_description?.length &&
-                    kpi.metric_description?.length > 0 && (
-                      <strong>{kpi.metric_description}</strong>
-                    )}
-                  {typeof kpi.min_value === "number" && (
-                    <span>Min: {kpi.min_value} </span>
-                  )}
-                  {typeof kpi.max_value === "number" && (
-                    <span>Max: {kpi.max_value}</span>
-                  )}
-                </div>
-              </TableCell>
-              <TableCell className="w-20">
-                <LivingLabKpiResultsForm
-                  livingLabId={livingLabId}
-                  kpiId={kpi.id}
-                  kpiMetric={kpi.metric}
-                  initialBefore={livingLabKpiMap.get(kpi.id)?.result_before}
-                  initialAfter={livingLabKpiMap.get(kpi.id)?.result_after}
-                  defaultBeforeDate={beforeDate}
-                  defaultAfterDate={afterDate}
-                />
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+              <TableBody>{kpis?.map(({ id }) => getKpiRow(id))}</TableBody>
+            </Table>
+          }
+        />
+      ))}
     </div>
   );
 }

src/components/react/ui/Badge.tsx

@@ -21,6 +21,7 @@ export interface BadgeProps {
   role?: string;
   "aria-label"?: string;
   tooltip?: string;
+  displayTooltipIcon?: boolean;
 }
 
 const COLOR_CLASSES: Record<BadgeColor, string> = {
@@ -54,6 +55,7 @@ export function Badge({
   className = "",
   role,
   tooltip,
+  displayTooltipIcon = true,
   "aria-label": ariaLabel,
 }: BadgeProps) {
   const colorClass = COLOR_CLASSES[color] ?? COLOR_CLASSES.secondary;
@@ -76,7 +78,7 @@ export function Badge({
           </span>
         ) : null}
         {children}
-        {!!tooltip?.length ? (
+        {displayTooltipIcon && !!tooltip?.length ? (
           <QuestionMarkCircleIcon className={`h-4 w-4 text-warning`} />
         ) : null}
       </span>

src/components/react/ui/ExpansionPanel.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+
+interface ExpansionPanelProps {
+  header: React.ReactNode;
+  content: React.ReactNode;
+  arrow?: boolean;
+  open?: boolean;
+}
+
+export const ExpansionPanel: React.FC<ExpansionPanelProps> = ({
+  header,
+  content,
+  arrow = false,
+  open = false,
+}) => {
+  const [isOpen, setIsOpen] = useState(open);
+
+  const handleToggle = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  return (
+    <div className="mb-2 w-full flex flex-col min-w-0">
+      <div
+        className="flex items-center cursor-pointer px-4 py-3 select-none w-full"
+        onClick={handleToggle}
+      >
+        <div className="flex-1">{header}</div>
+        {arrow && (
+          <span className="ml-2 transition-transform duration-200">
+            {isOpen ? (
+              <svg width="24" height="24" viewBox="0 0 24 24">
+                <polyline
+                  points="6 15 12 9 18 15"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                />
+              </svg>
+            ) : (
+              <svg width="24" height="24" viewBox="0 0 24 24">
+                <polyline
+                  points="6 9 12 15 18 9"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                />
+              </svg>
+            )}
+          </span>
+        )}
+      </div>
+      {isOpen && (
+        <div className="p-4 border-t border-gray-200 w-full">{content}</div>
+      )}
+    </div>
+  );
+};

src/components/react/ui/index.ts

@@ -10,3 +10,4 @@ export * from "./ItemCard";
 export * from "./Timeline";
 export * from "./SidebarMenu";
 export * from "./SiteNavBar";
+export * from "./ExpansionPanel";

src/lib/api-client/ApiClient.ts

@@ -1,5 +1,6 @@
 import livinglabs from "./mock-data/living_labs_data.json";
 import kpis from "./mock-data/kpis.json";
+import categories from "./mock-data/categories.json";
 import measures from "./mock-data/measures.json";
 import transportModes from "./mock-data/transport_modes.json";
 import type {
@@ -11,6 +12,7 @@ import type {
   ILivingLabTransportMode,
   ILivingLab,
 } from "../../types";
+import type { ICategory } from "../../types/Category";
 
 export default class ApiClient {
   private baseUrl: string;
@@ -152,6 +154,14 @@ export default class ApiClient {
     });
   }
 
+  async getCategories(
+    type: "KPI_SIEF" | "ITEM" | "KPI_IMPACT"
+  ): Promise<ICategory[]> {
+    //return this.get(`/categories?type=${encodeURIComponent(type)}`);
+
+    return categories.filter((cat) => cat.type === type) as ICategory[];
+  }
+
   async getTransportModes(): Promise<ITransportMode[]> {
     //return this.get(`/transport_modes`);
 

src/lib/api-client/mock-data/categories.json

@@ -0,0 +1,99 @@
+[
+  {
+    "id": 1,
+    "name": "Policies",
+    "type": "KPI_SIEF",
+    "kpis": [
+      { "id": 1 },
+      { "id": 2 },
+      { "id": 3 },
+      { "id": 4 },
+      { "id": 5 },
+      { "id": 6 }
+    ]
+  },
+  {
+    "id": 2,
+    "name": "Transport System - Time",
+    "type": "KPI_SIEF",
+    "kpis": [
+      { "id": 12 },
+      { "id": 13 },
+      { "id": 14 },
+      { "id": 15 },
+      { "id": 16 },
+      { "id": 17 },
+      { "id": 18 },
+      { "id": 19 },
+      { "id": 33 },
+      { "id": 34 },
+      { "id": 35 },
+      { "id": 36 },
+      { "id": 37 },
+      { "id": 38 },
+      { "id": 39 }
+    ]
+  },
+  {
+    "id": 3,
+    "name": "Transport System - Safety/Comfort",
+    "type": "KPI_SIEF",
+    "kpis": [
+      { "id": 8 },
+      { "id": 9 },
+      { "id": 10 },
+      { "id": 11 },
+      { "id": 40 },
+      { "id": 41 },
+      { "id": 42 },
+      { "id": 43 },
+      { "id": 44 },
+      { "id": 45 },
+      { "id": 46 },
+      { "id": 47 }
+    ]
+  },
+  {
+    "id": 4,
+    "name": "Transport System - Cost",
+    "type": "KPI_SIEF",
+    "kpis": [
+      { "id": 22 },
+      { "id": 23 },
+      { "id": 24 },
+      { "id": 25 },
+      { "id": 26 },
+      { "id": 27 },
+      { "id": 28 },
+      { "id": 29 },
+      { "id": 30 },
+      { "id": 31 },
+      { "id": 32 },
+      { "id": 48 }
+    ]
+  },
+  {
+    "id": 5,
+    "name": "Impact - Environment",
+    "type": "KPI_SIEF",
+    "kpis": [{ "id": 49 }, { "id": 60 }, { "id": 61 }, { "id": 62 }]
+  },
+  {
+    "id": 6,
+    "name": "Impact - Society",
+    "type": "KPI_SIEF",
+    "kpis": [{ "id": 63 }, { "id": 64 }, { "id": 65 }, { "id": 66 }]
+  },
+  {
+    "id": 7,
+    "name": "Impact - Economy",
+    "type": "KPI_SIEF",
+    "kpis": [
+      { "id": 50 },
+      { "id": 67 },
+      { "id": 68 },
+      { "id": 69 },
+      { "id": 70 }
+    ]
+  }
+]