feat: #120 #116 adds graph details

HABTec · Dec 3, 2024 · 170cee5 · 170cee5
1 parent 325fb2e
commit 170cee5
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 16 deletions.
diff --git a/src/Components/DashboardItem.js b/src/Components/DashboardItem.js
@@ -1441,16 +1441,13 @@ function DashboardItem(props) {
       </Grid>
       {params.get("fullDetail") ? (
         <>
-          {chartInfo?.interpretations?.length > 0 || chartInfo?.description ? (
-            <Grid item xs={12} md={fullWidth ? 12 : 6} lg={fullWidth ? 12 : 6}>
-              <InterpretationComponent
-                interpretations={chartInfo.interpretations}
-                chartDescription={chartInfo.description}
-              />
-            </Grid>
-          ) : (
-            ""
-          )}
+          <Grid item xs={12} md={fullWidth ? 12 : 6} lg={fullWidth ? 12 : 6}>
+            <InterpretationComponent
+              interpretations={chartInfo?.interpretations}
+              chartDescription={chartInfo?.description}
+              chartData={chartData}
+            />
+          </Grid>
         </>
       ) : (
         ""

diff --git a/src/Components/InterpretationComponent.js b/src/Components/InterpretationComponent.js
@@ -6,20 +6,57 @@ import {
   List,
   ListItem,
   Divider,
+  Chip,
 } from "@mui/material";
 
 export default function InterpretationComponent({
   interpretations,
   chartDescription,
+  chartData,
 }) {
-  console.log("hit", chartDescription);
+  const period = chartData?.metaData?.dimensions?.pe?.map((pe) => (
+    <Chip label={chartData.metaData.items[pe]?.name} />
+  ));
+  const orgunit = chartData?.metaData?.dimensions?.ou?.map((ou) => (
+    <Chip label={chartData.metaData.items[ou]?.name} />
+  ));
+  const dataItem = chartData?.metaData?.dimensions?.dx?.map((di) => (
+    <Chip label={chartData.metaData.items[di]?.name} />
+  ));
+  const otherDimensions = Object.keys(chartData?.metaData?.dimensions ?? {})
+    ?.filter((dim) => !["ou", "pe", "dx"].includes(dim))
+    ?.map((dim) =>
+      chartData?.metaData?.dimensions[dim]?.map((item) => (
+        <Chip label={chartData?.metaData?.items[item]?.name} />
+      ))
+    );
+  console.log(
+    "hit",
+    chartData?.metaData,
+    Object.keys(chartData?.metaData?.dimensions ?? {}),
+    Object.keys(chartData?.metaData?.dimensions ?? {})?.filter(
+      (dim) => !["ou", "pe", "dx"].includes(dim)
+    )
+  );
   return (
     <div>
-      {chartDescription && (
-        <Typography variant="h6" gutterBottom sx={{ marginBottom: 3 }}>
-          {chartDescription}
-        </Typography>
-      )}
+      {
+        <Card sx={{ marginBottom: 2 }}>
+          <CardContent>
+            <Typography variant="h6">Chart Details</Typography>
+            <Typography variant="body1" gutterBottom sx={{ marginBottom: 3 }}>
+              {chartDescription && <>Chart Description: {chartDescription}</>}
+              <br />
+              Period Dimension: {period} <br />
+              Orgunit Dimension: {orgunit} <br />
+              Data Item Dimension: {dataItem} <br />
+              {otherDimensions?.length > 0 && (
+                <>Other Dimensions: {otherDimensions}</>
+              )}
+            </Typography>
+          </CardContent>
+        </Card>
+      }
       {interpretations?.map((interpretation) => (
         <Card key={interpretation.id} sx={{ marginBottom: 2 }}>
           <CardContent>