@bygd/nc-report-ui 0.1.29 → 0.1.30

package/dist/default/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useEffect, useMemo, useState, useRef, createContext, useContext } from 'react';
+import React__default, { useEffect, useMemo, useState, useRef, useContext, createContext } from 'react';
 import Paper from '@material-ui/core/Paper';
 import { makeStyles } from '@material-ui/core/styles';
 import { CircularProgress } from '@material-ui/core';
@@ -43,6 +43,9 @@ import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
 import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
+import StorageIcon from '@mui/icons-material/Storage';
+import TrendingUpIcon from '@mui/icons-material/TrendingUp';
+import BoltIcon from '@mui/icons-material/Bolt';
 import FilterAltIcon from '@mui/icons-material/FilterAlt';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -876,7 +879,8 @@ function SingleSelect({
     const {
       key,
       value,
-      disabled
+      disabled,
+      icon
     } = itm;
     return /*#__PURE__*/React__default.createElement(MenuItem, {
       key: key,
@@ -884,9 +888,18 @@ function SingleSelect({
       disabled: disabled,
       sx: {
         fontFamily: "system-ui",
-        minHeight: "36px"
+        minHeight: "36px",
+        display: "flex",
+        alignItems: "center",
+        gap: "6px"
+      }
+    }, icon && /*#__PURE__*/React__default.createElement(Box, {
+      component: "span",
+      sx: {
+        display: "inline-flex",
+        alignItems: "center"
       }
-    }, formatLabel(value));
+    }, icon), formatLabel(value));
   }))));
 }
 
@@ -2888,6 +2901,51 @@ const Dimensions = ({
   })))))));
 };
 
+const MetricSourceIcon = ({
+  source
+}) => {
+  const iconSx = {
+    fontSize: '15px'
+  };
+  if (source === 'kpi') {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: "KPI Metric",
+      arrow: true,
+      placement: "top"
+    }, /*#__PURE__*/React__default.createElement(TrendingUpIcon, {
+      sx: {
+        ...iconSx,
+        color: 'rgb(70, 134, 128)'
+      }
+    }));
+  }
+  if (source === 'dynamic') {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: "Dynamic Metric",
+      arrow: true,
+      placement: "top"
+    }, /*#__PURE__*/React__default.createElement(BoltIcon, {
+      sx: {
+        ...iconSx,
+        color: '#e65100'
+      }
+    }));
+  }
+  if (source === 'provider') {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: "Provider Metric",
+      arrow: true,
+      placement: "top"
+    }, /*#__PURE__*/React__default.createElement(StorageIcon, {
+      sx: {
+        ...iconSx,
+        color: '#546e7a'
+      }
+    }));
+  }
+  return null;
+};
+
 // Sortable Chip Component
 const SortableChip = ({
   id,
@@ -2902,7 +2960,8 @@ const SortableChip = ({
   defaultTitle,
   customTitle,
   onUpdateTitle,
-  onResetTitle
+  onResetTitle,
+  source
 }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [editValue, setEditValue] = useState('');
@@ -3015,7 +3074,15 @@ const SortableChip = ({
       cursor: "grab",
       color: "rgba(110, 110, 110, 0.62)"
     }
-  })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
+  })), !isEditing ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, source && /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      flexShrink: 0
+    }
+  }, /*#__PURE__*/React__default.createElement(MetricSourceIcon, {
+    source: source
+  })), /*#__PURE__*/React__default.createElement(Box$1, {
     sx: {
       minWidth: 0
     }
@@ -3247,7 +3314,10 @@ const Metrics = ({
         value: metric.title || metric.name,
         metricName: metric.name,
         metric: metric,
-        disabled: isAlreadySelected
+        disabled: isAlreadySelected,
+        icon: metric.source ? /*#__PURE__*/React__default.createElement(MetricSourceIcon, {
+          source: metric.source
+        }) : undefined
       };
     });
     return items;
@@ -3556,7 +3626,8 @@ const Metrics = ({
     defaultTitle: metric.metricTitle,
     customTitle: titleOverrides[metric.fullPath],
     onUpdateTitle: onUpdateTitle,
-    onResetTitle: onResetTitle
+    onResetTitle: onResetTitle,
+    source: metric.metric?.source
   })))))));
 };
 
@@ -4838,31 +4909,39 @@ const ReportDataGrid = ({
     });
 
     // Add metric columns
-    // Metric field naming logic:
-    // - If from base provider: baseAlias.metric -> metric (no prefix at all)
-    // - If from nested provider: baseAlias_rel1_rel2.metric -> rel1_rel2_metric (drops base alias)
+    // The API returns metric keys in two different forms depending on the path depth:
+    //
+    //  • 2-part path  "mc.record_count"              → API key: "record_count"
+    //  • 2-part path  "mc_fa.total_amount"  (nested) → API key: "fa_total_amount"
+    //  • 3+-part path "mc.dkpi.activeAgreementsCount"→ API key: "mc.dkpi.activeAgreementsCount" (dots)
+    //
+    // For 3+-part paths the API key contains dots. MUI DataGrid interprets dots
+    // in field names as nested-object accessors, so the rows useMemo normalises
+    // those keys (dots → underscores). The column field must match that normalised key.
     metrics.forEach(metric => {
       const metricDef = metric.metric;
       let fieldName;
       let headerName;
-
-      // Check if there are relations (nested providers)
-      if (metric.relations && metric.relations.length > 0) {
-        // From nested provider: drop the base provider alias
-        // Example: ft_fa.total_amount -> fa_total_amount
+      const dotCount = (metric.fullPath.match(/\./g) || []).length;
+      if (dotCount >= 2) {
+        // 3+-part namespaced path: API returns the full dotted path as the key.
+        // Normalise dots to underscores to match the row key normalisation below.
+        // Example: "mc.dkpi.activeAgreementsCount" -> "mc_dkpi_activeAgreementsCount"
+        fieldName = metric.fullPath.replace(/\./g, '_');
+      } else if (metric.relations && metric.relations.length > 0) {
+        // 2-part path from a nested provider: API drops the base provider alias.
+        // Example: "mc_fa.total_amount" -> "fa_total_amount"
         const parts = metric.fullPath.split('.');
-        const pathWithoutField = parts[0]; // e.g., "ft_fa"
+        const pathWithoutField = parts[0]; // e.g., "mc_fa"
         const field = parts[1]; // e.g., "total_amount"
 
-        // Remove the base provider alias (first part before first underscore)
         const pathParts = pathWithoutField.split('_');
-        pathParts.shift(); // Remove base provider alias
-        const pathWithoutBase = pathParts.join('_'); // e.g., "fa"
-
+        pathParts.shift(); // remove base provider alias
+        const pathWithoutBase = pathParts.join('_');
         fieldName = pathWithoutBase ? `${pathWithoutBase}_${field}` : field;
       } else {
-        // From base provider: no prefix at all, just the metric name
-        // Example: fo.total_amount -> total_amount
+        // 2-part path from the base provider: API returns just the metric name.
+        // Example: "mc.record_count" -> "record_count"
         fieldName = metric.metricName;
       }
 
@@ -4874,6 +4953,15 @@ const ReportDataGrid = ({
         flex: 1,
         minWidth: 150,
         type: metricDef?.type === 'integer' || metricDef?.type === 'currency' ? 'number' : 'string',
+        renderHeader: () => /*#__PURE__*/React__default.createElement(Box$1, {
+          sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5
+          }
+        }, /*#__PURE__*/React__default.createElement(MetricSourceIcon, {
+          source: metricDef?.source
+        }), /*#__PURE__*/React__default.createElement("span", null, headerName)),
         valueFormatter: value => {
           if (value == null) return '';
 
@@ -4892,14 +4980,22 @@ const ReportDataGrid = ({
     return cols;
   }, [dimensions, metrics, titleOverrides]);
 
-  // Transform report data to rows with unique IDs
+  // Transform report data to rows with unique IDs.
+  // Keys are normalised by replacing dots with underscores so that MUI DataGrid
+  // does not misinterpret dotted keys (e.g. "mc.dkpi.exposure") as nested
+  // object paths. Dimension keys returned by the API are already underscore-
+  // based, so normalisation is a no-op for them.
   const rows = React__default.useMemo(() => {
     if (!reportData || !Array.isArray(reportData)) return [];
-    return reportData.map((row, index) => ({
-      id: index,
-      // DataGrid requires unique id for each row
-      ...row
-    }));
+    return reportData.map((row, index) => {
+      const normalizedRow = {
+        id: index
+      };
+      Object.entries(row).forEach(([key, value]) => {
+        normalizedRow[key.replace(/\./g, '_')] = value;
+      });
+      return normalizedRow;
+    });
   }, [reportData]);
 
   // Handle pagination change

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bygd/nc-report-ui",
-	"version": "0.1.29",
+	"version": "0.1.30",
 	"files": [
 		"dist/*",
 		"fnet/input.yaml",