datastake-daf 0.6.382 → 0.6.384

package/dist/components/index.js

@@ -45763,7 +45763,7 @@ dt.div`
   }
 
 `;
-dt.ul`
+const LegendStyle = dt.ul`
   list-style: none;
   margin: var(--size-lg) 0 0;
   padding: 0;
@@ -45788,98 +45788,6 @@ dt.ul`
   }
 `;
 
-const useLegendConfig = ({
-  legendConfig,
-  isPdf
-}) => {
-  const {
-    enabled,
-    position: legendPosition = 'bottom',
-    items: _legendItems = null,
-    layout: legendLayout = 'horizontal',
-    interactive: legendInteractive = true,
-    style: legendStyle = {}
-  } = legendConfig;
-  const legendEnabled = enabled !== undefined ? isPdf || enabled : isPdf;
-  const [legendItems, setLegendItems] = React__default["default"].useState(_legendItems);
-  return {
-    legendEnabled,
-    legendItems,
-    legendPosition,
-    legendLayout,
-    legendInteractive,
-    legendStyle
-  };
-};
-
-const CustomLegend = ({
-  items = [],
-  onToggle,
-  layout = 'horizontal',
-  interactive = true,
-  style = {}
-}) => {
-  const isVertical = layout === 'vertical';
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    style: {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: isVertical ? "flex-start" : "center",
-      flexDirection: isVertical ? "column" : "row",
-      flexWrap: isVertical ? "nowrap" : "wrap",
-      gap: isVertical ? "12px" : "20px",
-      paddingTop: "16px",
-      ...style
-    },
-    children: items?.map((item, index) => /*#__PURE__*/jsxRuntime.jsxs("div", {
-      onClick: () => interactive && onToggle && onToggle(item.id),
-      style: {
-        display: "flex",
-        alignItems: "flex-start",
-        opacity: item.hidden ? 0.4 : 1,
-        transition: "opacity 0.2s ease",
-        userSelect: "none",
-        maxWidth: isVertical ? "300px" : "auto"
-      },
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        style: {
-          width: 16,
-          height: 16,
-          backgroundColor: item.color,
-          marginRight: 8,
-          borderRadius: 3,
-          flexShrink: 0,
-          marginTop: 2,
-          border: item.hidden ? "2px solid #d9d9d9" : "none",
-          boxSizing: "border-box"
-        }
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        style: {
-          display: "flex",
-          flexDirection: "column",
-          gap: "4px"
-        },
-        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          style: {
-            fontSize: 14,
-            fontWeight: 500,
-            color: item.hidden ? "#999" : "#262626",
-            lineHeight: "20px"
-          },
-          children: item.label
-        }), item.description && /*#__PURE__*/jsxRuntime.jsx("span", {
-          style: {
-            fontSize: 12,
-            color: item.hidden ? "#bfbfbf" : "#8c8c8c",
-            lineHeight: "18px"
-          },
-          children: item.description
-        })]
-      })]
-    }, index))
-  });
-};
-
 const Chart = _ref => {
   let {
     data = [],
@@ -45896,7 +45804,6 @@ const Chart = _ref => {
     children = null,
     legend,
     isPdf = false,
-    legendConfig = {},
     isPercentage = false
   } = _ref;
   const [hoveredGroup, setHoveredGroup] = React.useState(null);
@@ -45905,17 +45812,6 @@ const Chart = _ref => {
   const [mouseY, setMouseY] = React.useState(0);
   const [mouseX, setMouseX] = React.useState(0);
   const [mouseLocked, setMouseLocked] = React.useState(false);
-  const {
-    legendEnabled,
-    legendItems,
-    legendPosition,
-    legendLayout,
-    legendInteractive,
-    legendStyle
-  } = useLegendConfig({
-    legendConfig,
-    isPdf
-  });
   const getCoordinatesForPercent = React.useCallback(percent => [Math.cos(2 * Math.PI * percent), Math.sin(2 * Math.PI * percent)], []);
   const onMouseLeaveHandler = React.useCallback((e, hG, id) => {
     if (mouseLocked) {
@@ -45939,6 +45835,31 @@ const Chart = _ref => {
       }));
     }
   }, [svgRef, containerRef, hoveredGroup, mouseLocked]);
+  const legendConfig = React.useMemo(() => {
+    if (legend === false || legend === null) {
+      return isPdf ? {} : null;
+    }
+    if (typeof legend === 'object') {
+      return legend;
+    }
+    if (legend === true || isPdf) {
+      return {};
+    }
+    return null;
+  }, [legend, isPdf]);
+  const legendItems = React.useMemo(() => {
+    const items = Array.isArray(data) ? data : [];
+    if (!legendConfig) {
+      return [];
+    }
+    const {
+      itemName
+    } = legendConfig;
+    const getName = typeof (itemName === null || itemName === void 0 ? void 0 : itemName.formatter) === 'function' ? (item, index) => itemName.formatter(item.name || item.label || "Item ".concat(index + 1), item, index) : (item, index) => item.name || item.label || "Item ".concat(index + 1);
+    return items.map((item, index) => _objectSpread2(_objectSpread2({}, item), {}, {
+      label: getName(item, index)
+    }));
+  }, [data, legendConfig]);
   const dataToShow = React.useMemo(() => {
     let cumulativePercent = 0;
     function getRotationAngle(percent) {
@@ -46038,11 +45959,59 @@ const Chart = _ref => {
       onMouseMove: e => onMouseLeaveHandler(e, {}, 0)
     } : {}), {}, {
       children: dataToShow
-    })), tooltip, legendEnabled && legendPosition === 'bottom' && /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {
-      items: legendItems,
-      layout: legendLayout,
-      interactive: legendInteractive,
-      style: legendStyle
+    })), tooltip, !!legendConfig && legendItems.length > 0 && /*#__PURE__*/jsxRuntime.jsx(LegendStyle, {
+      className: legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.className,
+      "data-position": (legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.position) || 'bottom',
+      children: legendItems.map((item, index) => {
+        var _item$id;
+        const markerStyle = (legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.marker) || {};
+        return /*#__PURE__*/jsxRuntime.jsxs("li", {
+          className: item.className,
+          onMouseEnter: () => {
+            if (mouseLocked) {
+              return;
+            }
+            setHoveredGroup(_objectSpread2(_objectSpread2({}, item), {}, {
+              id: index,
+              fromLegend: true
+            }));
+          },
+          onMouseLeave: () => {
+            if (mouseLocked) {
+              return;
+            }
+            setHoveredGroup(null);
+          },
+          onClick: () => {
+            if (!changeOpacityOnHover) {
+              return;
+            }
+            if ((hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.id) === index && hoveredGroup !== null && hoveredGroup !== void 0 && hoveredGroup.fromLegend) {
+              setHoveredGroup(null);
+              setMouseLocked(false);
+              return;
+            }
+            setHoveredGroup(_objectSpread2(_objectSpread2({}, item), {}, {
+              id: index,
+              fromLegend: true
+            }));
+            setMouseLocked(prev => !prev);
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "legend-marker",
+            style: {
+              backgroundColor: item.color,
+              width: (markerStyle === null || markerStyle === void 0 ? void 0 : markerStyle.size) || 12,
+              height: (markerStyle === null || markerStyle === void 0 ? void 0 : markerStyle.size) || 12,
+              borderRadius: (markerStyle === null || markerStyle === void 0 ? void 0 : markerStyle.shape) === 'square' ? 2 : '50%',
+              border: (markerStyle === null || markerStyle === void 0 ? void 0 : markerStyle.style) === 'line' ? "2px solid ".concat(item.color) : undefined,
+              background: (markerStyle === null || markerStyle === void 0 ? void 0 : markerStyle.style) === 'line' ? 'transparent' : item.color
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            children: item.label
+          })]
+        }, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : index);
+      })
     }), children]
   });
 };
@@ -49412,7 +49381,7 @@ const Container$1 = dt.div`
 	width: ${props => props.isPdf ? props.width ? props.width : '1000px' : 'calc(100% - 48px)'}; 
 `;
 
-const _excluded$7 = ["data", "xFieldKey", "yFieldKey", "renderTooltipContent", "tooltipConfig", "animated", "isStack", "isGroup", "isPercentage", "seriesField", "formattedYAxis", "formattedXAxis", "color", "height", "t", "isPdf", "legendConfig", "width"];
+const _excluded$7 = ["data", "xFieldKey", "yFieldKey", "renderTooltipContent", "tooltipConfig", "animated", "isStack", "isGroup", "isPercentage", "seriesField", "formattedYAxis", "formattedXAxis", "color", "height", "t", "isPdf", "extraLegendConfig", "width"];
 const {
   useToken: useToken$g
 } = antd.theme;
@@ -49498,7 +49467,7 @@ function BarChart(_ref) {
       height,
       t = s => s,
       isPdf = false,
-      legendConfig = {},
+      extraLegendConfig = {},
       width
     } = _ref;
     _objectWithoutProperties(_ref, _excluded$7);
@@ -49507,17 +49476,7 @@ function BarChart(_ref) {
   const {
     token
   } = useToken$g();
-  const {
-    legendEnabled,
-    legendItems,
-    legendPosition,
-    legendLayout,
-    legendInteractive,
-    legendStyle
-  } = useLegendConfig({
-    legendConfig,
-    isPdf
-  });
+  const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
   React__default["default"].useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -49548,7 +49507,12 @@ function BarChart(_ref) {
       isStack,
       color: color || token.colorPrimary7,
       seriesField,
-      legend: false,
+      legend: isPdf ? _objectSpread2({
+        itemName: {
+          formatter: text => t(text)
+        },
+        position: 'bottom'
+      }, extraLegendConfig) : hasLegendConfig || false,
       animation: animated
     };
     if (!chartRef.current) {
@@ -49566,26 +49530,21 @@ function BarChart(_ref) {
       }
     };
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "flex flex-1 flex-column justify-content-center",
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
       children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         height: height,
-        isPdf: false,
+        isPdf: isPdf,
         width: width
       })
-    }), legendEnabled && legendPosition === 'bottom' && /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {
-      items: legendItems,
-      layout: legendLayout,
-      interactive: legendInteractive,
-      style: legendStyle
-    })]
+    })
   });
 }
 
-const _excluded$6 = ["data", "xFieldKey", "yFieldKey", "renderTooltipContent", "tooltipConfig", "animated", "isSmooth", "seriesField", "isArea", "formattedYAxis", "formattedXAxis", "color", "isPercentage", "height", "autoHideXLabel", "t", "isPdf", "legendConfig", "width"];
+const _excluded$6 = ["data", "xFieldKey", "yFieldKey", "renderTooltipContent", "tooltipConfig", "animated", "isSmooth", "seriesField", "isArea", "formattedYAxis", "formattedXAxis", "color", "isPercentage", "height", "autoHideXLabel", "t", "isPdf", "extraLegendConfig", "width"];
 const {
   useToken: useToken$f
 } = antd.theme;
@@ -49669,7 +49628,7 @@ function LineChart(_ref) {
       autoHideXLabel = true,
       t = s => s,
       isPdf = false,
-      legendConfig = {},
+      extraLegendConfig = {},
       width
     } = _ref;
     _objectWithoutProperties(_ref, _excluded$6);
@@ -49678,17 +49637,7 @@ function LineChart(_ref) {
   const {
     token
   } = useToken$f();
-  const {
-    legendEnabled,
-    legendItems,
-    legendPosition,
-    legendLayout,
-    legendInteractive,
-    legendStyle
-  } = useLegendConfig({
-    legendConfig,
-    isPdf
-  });
+  const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
   React__default["default"].useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -49732,7 +49681,12 @@ function LineChart(_ref) {
           fillOpacity: isArea ? 0.15 : 0
         }
       },
-      legend: false
+      legend: isPdf ? _objectSpread2({
+        itemName: {
+          formatter: text => t(text)
+        },
+        position: 'bottom'
+      }, extraLegendConfig) : hasLegendConfig || false
     };
     if (!chartRef.current) {
       chartRef.current = new g2plot.Line(containerRef.current, config);
@@ -49740,7 +49694,7 @@ function LineChart(_ref) {
     } else {
       chartRef.current.update(config);
     }
-  }, [data, containerRef.current, isSmooth, animated, xFieldKey, yFieldKey, seriesField, isArea, color, token.colorPrimary7, formattedXAxis, formattedYAxis, isPercentage, renderTooltipContent, tooltipConfig, isPdf, t]);
+  }, [data, containerRef.current, isSmooth, animated, xFieldKey, yFieldKey, seriesField, isArea, color, token.colorPrimary7, formattedXAxis, formattedYAxis, isPercentage, renderTooltipContent, tooltipConfig, isPdf, extraLegendConfig, t]);
   React__default["default"].useEffect(() => {
     return () => {
       if (chartRef.current) {
@@ -49749,9 +49703,9 @@ function LineChart(_ref) {
       }
     };
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "flex flex-1 flex-column justify-content-center",
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
       children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
@@ -49759,16 +49713,11 @@ function LineChart(_ref) {
         isPdf: isPdf,
         width: width
       })
-    }), legendEnabled && legendPosition === 'bottom' && /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {
-      items: legendItems,
-      layout: legendLayout,
-      interactive: legendInteractive,
-      style: legendStyle
-    })]
+    })
   });
 }
 
-const _excluded$5 = ["data", "xFieldKey", "yFieldKey", "renderTooltipContent", "tooltipConfig", "animated", "isStack", "isGroup", "seriesField", "isPercentage", "showBackground", "formattedYAxis", "formattedXAxis", "color", "height", "groupField", "width", "legendConfig", "isPdf"];
+const _excluded$5 = ["data", "xFieldKey", "yFieldKey", "renderTooltipContent", "tooltipConfig", "animated", "isStack", "isGroup", "seriesField", "isPercentage", "showBackground", "formattedYAxis", "formattedXAxis", "color", "height", "groupField", "t", "isPdf", "extraLegendConfig", "shouldSeperateLegendName", "width"];
 const {
   useToken: useToken$e
 } = antd.theme;
@@ -49833,20 +49782,6 @@ const {
  * - `color` (string | string[] | function):
  *   Custom color or color function for bars. If not provided, falls back to Ant Design's theme primary color.
  *
- * - `legendConfig` (object):
- *   Configuration for the custom legend:
- *   {
- *     enabled: boolean,           // Show/hide the legend (default: false)
- *     position: 'top' | 'bottom', // Legend position (default: 'bottom')
- *     items: Array<{              // Manual legend items (optional, auto-generated from data if not provided)
- *       label: string,            // Display label
- *       color: string,            // Color for this item
- *       description?: string      // Optional description/explanation
- *     }>,
- *     layout: 'horizontal' | 'vertical', // Legend layout (default: 'horizontal')
- *     interactive: boolean,       // Allow clicking to filter data (default: true)
- *     style: object              // Custom CSS styles for legend container
- *   }
  */
 
 function ColumnChart(_ref) {
@@ -49867,9 +49802,11 @@ function ColumnChart(_ref) {
       color,
       height,
       groupField,
-      width,
-      legendConfig = {},
-      isPdf = false
+      t = s => s,
+      isPdf = false,
+      extraLegendConfig = {},
+      shouldSeperateLegendName = false,
+      width
     } = _ref;
     _objectWithoutProperties(_ref, _excluded$5);
   const containerRef = React__default["default"].useRef(null);
@@ -49877,17 +49814,7 @@ function ColumnChart(_ref) {
   const {
     token
   } = useToken$e();
-  const {
-    legendEnabled,
-    legendItems,
-    legendPosition,
-    legendLayout,
-    legendInteractive,
-    legendStyle
-  } = useLegendConfig({
-    legendConfig,
-    isPdf
-  });
+  const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
   React__default["default"].useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -49922,7 +49849,15 @@ function ColumnChart(_ref) {
           formatter: isPercentage ? v => "".concat(v).replace(/\d{1,3}(?=(\d{3})+$)/g, s => "".concat(s, ",")) + " %" : formattedYAxis
         }
       }),
-      legend: false
+      legend: isPdf ? _objectSpread2({
+        itemName: {
+          formatter: text => {
+            const textToTranslate = shouldSeperateLegendName ? text.split("-")[1].toLowerCase() : text;
+            return t(textToTranslate);
+          }
+        },
+        position: 'bottom'
+      }, extraLegendConfig) : hasLegendConfig || false
     }, showBackground && isPercentage && {
       columnBackground: {
         style: {}
@@ -49943,22 +49878,17 @@ function ColumnChart(_ref) {
       }
     };
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "flex flex-1 flex-column justify-content-center",
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
       children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         height: height,
-        isPdf: false,
+        isPdf: isPdf,
         width: width
       })
-    }), legendEnabled && legendPosition === 'bottom' && /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {
-      items: legendItems,
-      layout: legendLayout,
-      interactive: legendInteractive,
-      style: legendStyle
-    })]
+    })
   });
 }
 
@@ -50017,26 +49947,13 @@ function RadialBarChart(_ref) {
     colorKey,
     animation = false,
     isPercentage = true,
-    color,
-    isPdf = false,
-    legendConfig = {}
+    color
   } = _ref;
   const containerRef = React__default["default"].useRef(null);
   const chartRef = React__default["default"].useRef(null);
   const {
     token
   } = useToken$d();
-  const {
-    legendEnabled,
-    legendItems,
-    legendPosition,
-    legendLayout,
-    legendInteractive,
-    legendStyle
-  } = useLegendConfig({
-    legendConfig,
-    isPdf
-  });
   const formattedData = React.useMemo(() => {
     return data.map(item => _objectSpread2(_objectSpread2({}, item), {}, {
       originalValue: item[yFieldKey],
@@ -50119,23 +50036,18 @@ function RadialBarChart(_ref) {
       }
     };
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "flex flex-1 flex-column justify-content-center",
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
       children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef
       })
-    }), legendEnabled && legendPosition === 'bottom' && /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {
-      items: legendItems,
-      layout: legendLayout,
-      interactive: legendInteractive,
-      style: legendStyle
-    })]
+    })
   });
 }
 
-const _excluded$4 = ["data", "angleField", "colorField", "color", "height", "innerRadius", "radius", "legend", "label", "statistic", "tooltip", "renderTooltipContent", "tooltipConfig", "meta", "animation", "t", "isPdf", "legendConfig"];
+const _excluded$4 = ["data", "angleField", "colorField", "color", "height", "innerRadius", "radius", "legend", "label", "statistic", "tooltip", "renderTooltipContent", "tooltipConfig", "meta", "animation", "t", "isPdf", "extraLegendConfig"];
 const {
   useToken: useToken$c
 } = antd.theme;
@@ -50208,7 +50120,7 @@ function DonutPie(_ref) {
       animation = false,
       t = s => s,
       isPdf = false,
-      legendConfig = {}
+      extraLegendConfig = {}
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$4);
   const containerRef = React.useRef(null);
@@ -50216,17 +50128,7 @@ function DonutPie(_ref) {
   const {
     token
   } = useToken$c();
-  const {
-    legendEnabled,
-    legendItems,
-    legendPosition,
-    legendLayout,
-    legendInteractive,
-    legendStyle
-  } = useLegendConfig({
-    legendConfig,
-    isPdf
-  });
+  const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
 
   // Memoize processed data for progress mode
   const processedData = React.useMemo(() => {
@@ -50252,7 +50154,12 @@ function DonutPie(_ref) {
       color: color || [token.colorPrimary7, "#E8EDF3"],
       radius,
       innerRadius,
-      legend: false,
+      legend: isPdf ? _objectSpread2({
+        itemName: {
+          formatter: text => t(text)
+        },
+        position: 'bottom'
+      }, extraLegendConfig) : hasLegendConfig || false,
       label,
       statistic,
       tooltip: tooltipOption,
@@ -50274,9 +50181,9 @@ function DonutPie(_ref) {
       }
     };
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "flex flex-1 flex-column justify-content-center",
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
       children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
@@ -50285,12 +50192,7 @@ function DonutPie(_ref) {
         },
         isPdf: isPdf
       })
-    }), legendEnabled && legendPosition === 'bottom' && /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {
-      items: legendItems,
-      layout: legendLayout,
-      interactive: legendInteractive,
-      style: legendStyle
-    })]
+    })
   });
 }
 
@@ -50344,7 +50246,7 @@ const Style$g = dt.div`
 		}
 	}
 `;
-dt.div`
+const StyleWrapper = dt.div`
 	.legend {
 		display: flex;
 		flex-wrap: wrap;
@@ -50553,8 +50455,7 @@ function StackChart(_ref) {
     valueField = "value",
     height = 300,
     isPdf = false,
-    t = s => s,
-    legendConfig = {}
+    t = s => s
   } = _ref;
   const ref = React__default["default"].useRef();
   const {
@@ -50573,17 +50474,6 @@ function StackChart(_ref) {
     });
     return Array.from(uniqueLabels);
   }, [data, xFieldKey]);
-  const {
-    legendEnabled,
-    legendItems,
-    legendPosition,
-    legendLayout,
-    legendInteractive,
-    legendStyle
-  } = useLegendConfig({
-    legendConfig,
-    isPdf
-  });
   const groupedByLabel = React__default["default"].useMemo(() => {
     return data.reduce((acc, item) => {
       const label = item[xFieldKey];
@@ -50693,7 +50583,7 @@ function StackChart(_ref) {
       }));
     }
   }, [hoveredGroup]);
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  return /*#__PURE__*/jsxRuntime.jsxs(StyleWrapper, {
     children: [/*#__PURE__*/jsxRuntime.jsxs(Style$g, _objectSpread2(_objectSpread2({}, isEmpty ? {
       onMouseEnter: () => {
         setHoveredGroup({
@@ -50721,16 +50611,28 @@ function StackChart(_ref) {
         },
         children: content()
       })]
-    })), legendEnabled && legendPosition === 'bottom' && /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {
-      items: legendItems,
-      layout: legendLayout,
-      interactive: legendInteractive,
-      style: legendStyle
+    })), isPdf && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "legend",
+      children: Object.entries(seriesColors).map(_ref4 => {
+        let [series, color] = _ref4;
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "legend-item",
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "legend-color",
+            style: {
+              backgroundColor: color || token.colorPrimary7
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "legend-label",
+            children: t(series)
+          })]
+        }, series);
+      })
     })]
   });
 }
 
-const _excluded$3 = ["data", "xFieldKey", "yFieldKey", "seriesField", "renderTooltipContent", "tooltipConfig", "animated", "color", "formattedYAxis", "formattedXAxis", "fillOpacity", "height", "t", "isPdf", "legendConfig", "width"];
+const _excluded$3 = ["data", "xFieldKey", "yFieldKey", "seriesField", "renderTooltipContent", "tooltipConfig", "animated", "color", "formattedYAxis", "formattedXAxis", "fillOpacity", "height", "t", "isPdf", "extraLegendConfig", "width"];
 const {
   useToken: useToken$a
 } = antd.theme;
@@ -50804,7 +50706,7 @@ const AreaChart = _ref => {
       height,
       t = s => s,
       isPdf = false,
-      legendConfig = {},
+      extraLegendConfig = {},
       width
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$3);
@@ -50813,17 +50715,7 @@ const AreaChart = _ref => {
   const {
     token
   } = useToken$a();
-  const {
-    legendEnabled,
-    legendItems,
-    legendPosition,
-    legendLayout,
-    legendInteractive,
-    legendStyle
-  } = useLegendConfig({
-    legendConfig,
-    isPdf
-  });
+  const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
   React.useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -50858,7 +50750,12 @@ const AreaChart = _ref => {
       areaStyle: {
         fillOpacity
       },
-      legend: false,
+      legend: isPdf ? _objectSpread2({
+        itemName: {
+          formatter: text => t(text)
+        },
+        position: 'bottom'
+      }, extraLegendConfig) : hasLegendConfig || false,
       line: false
     }, rest);
     if (!chartRef.current) {
@@ -50876,26 +50773,21 @@ const AreaChart = _ref => {
       }
     };
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "flex flex-1 flex-column justify-content-center",
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
       children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         height: height,
-        isPdf: false,
+        isPdf: isPdf,
         width: width
       })
-    }), legendEnabled && legendPosition === 'bottom' && /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {
-      items: legendItems,
-      layout: legendLayout,
-      interactive: legendInteractive,
-      style: legendStyle
-    })]
+    })
   });
 };
 
-const _excluded$2 = ["data", "xFieldKey", "yFieldKey", "seriesField", "renderTooltipContent", "tooltipConfig", "animated", "color", "formattedYAxis", "formattedXAxis", "score", "height", "isPdf", "legendConfig"];
+const _excluded$2 = ["data", "xFieldKey", "yFieldKey", "seriesField", "renderTooltipContent", "tooltipConfig", "animated", "color", "formattedYAxis", "formattedXAxis", "score", "height"];
 const {
   useToken: useToken$9
 } = antd.theme;
@@ -50916,9 +50808,7 @@ const RadarChart = _ref => {
         min: 0,
         max: 100
       },
-      height,
-      isPdf = false,
-      legendConfig = {}
+      height
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$2);
   const containerRef = React.useRef(null);
@@ -50926,17 +50816,6 @@ const RadarChart = _ref => {
   const {
     token
   } = useToken$9();
-  const {
-    legendEnabled,
-    legendItems,
-    legendPosition,
-    legendLayout,
-    legendInteractive,
-    legendStyle
-  } = useLegendConfig({
-    legendConfig,
-    isPdf
-  });
   React.useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -51021,20 +50900,15 @@ const RadarChart = _ref => {
       }
     };
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "flex flex-1 flex-column justify-content-center",
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
       children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         height: height
       })
-    }), legendEnabled && legendPosition === 'bottom' && /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {
-      items: legendItems,
-      layout: legendLayout,
-      interactive: legendInteractive,
-      style: legendStyle
-    })]
+    })
   });
 };
 
@@ -51053,26 +50927,13 @@ function DualAxesChart(_ref) {
     formattedLeftAxis = s => s,
     formattedRightAxis = s => s,
     formattedXAxis = s => s,
-    color,
-    legendConfig = {},
-    isPdf = false
+    color
   } = _ref;
   const containerRef = React__default["default"].useRef(null);
   const chartRef = React__default["default"].useRef(null);
   const {
     token
   } = useToken$8();
-  const {
-    legendEnabled,
-    legendItems,
-    legendPosition,
-    legendLayout,
-    legendInteractive,
-    legendStyle
-  } = useLegendConfig({
-    legendConfig,
-    isPdf
-  });
   const _colours = React.useMemo(() => {
     const defaultColours = [token.colorPrimary7, token.colorPrimary6, token.colorPrimary8];
     if (color) {
@@ -51140,20 +51001,15 @@ function DualAxesChart(_ref) {
       }
     };
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "flex flex-1 flex-column justify-content-center",
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
       children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         "data-testid": "dual-axes-chart"
       })
-    }), legendEnabled && legendPosition === 'bottom' && /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {
-      items: legendItems,
-      layout: legendLayout,
-      interactive: legendInteractive,
-      style: legendStyle
-    })]
+    })
   });
 }
 
@@ -54194,6 +54050,7 @@ function AddUserModal({
       setAccountUsed(true);
     }).catch(() => {});
   };
+  console.log("hellooooooooooooooooooooooooo");
   return /*#__PURE__*/jsxRuntime.jsx(Modal, {
     open: isOpen,
     title: "admin::edit-user",
@@ -54237,13 +54094,6 @@ function AddUserModal({
             }
           }
         })
-      }), accountUsed && /*#__PURE__*/jsxRuntime.jsx(antd.Alert, {
-        message: t("FB00001"),
-        type: "error",
-        className: "mb-2",
-        showIcon: true,
-        closable: true,
-        onClose: () => setAccountUsed(false)
       }), /*#__PURE__*/jsxRuntime.jsx(antd.Form.Item, {
         name: "role",
         label: t("Role"),
@@ -57054,7 +56904,8 @@ function NewUser({
   isOpen,
   onClose,
   defaultData,
-  userRoles = []
+  userRoles = [],
+  addUser = () => {}
 }) {
   const [MainForm] = antd.Form.useForm();
   const [accountUsed, setAccountUsed] = React.useState(false);
@@ -57068,8 +56919,26 @@ function NewUser({
   }, [defaultData]);
   const onSubmit = () => {
     MainForm.validateFields().then(val => {
-      console.log(val);
-      setAccountUsed(true);
+      // Create user object with the form data
+      const userData = {
+        firstName: val.firstName,
+        lastName: val.lastName,
+        email: val.email,
+        role: val.role,
+        apps: {
+          straatos: {
+            role: val.role,
+            access: true
+          }
+        }
+      };
+
+      // Add user to local state
+      addUser(userData);
+
+      // Close modal and reset form
+      onClose();
+      MainForm.resetFields();
     }).catch(() => {});
   };
   return /*#__PURE__*/jsxRuntime.jsx(Modal, {
@@ -57115,13 +56984,6 @@ function NewUser({
             }
           }
         })
-      }), accountUsed && /*#__PURE__*/jsxRuntime.jsx(antd.Alert, {
-        message: t("FB00001"),
-        type: "error",
-        className: "mb-2",
-        showIcon: true,
-        closable: true,
-        onClose: () => setAccountUsed(false)
       }), /*#__PURE__*/jsxRuntime.jsx(antd.Form.Item, {
         name: "role",
         label: t("Role"),
@@ -57260,6 +57122,8 @@ const getColumns = ({
       const role = all?.apps?.[module]?.role;
       const options = (selectOptions?.userRole || []).filter(o => all.isAdmin || o.canBeAssignedToSubUsers);
       if (isView) {
+        console.log("role--------------", role);
+        console.log("options--------------", options);
         const title = findOptions(role, options);
         return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
           title: title,
@@ -57392,6 +57256,7 @@ function Users({
   accountStatuses,
   deleteUser = () => {},
   updateUser = () => {},
+  addUser = () => {},
   transferAdmin = () => {}
 }) {
   const [hasError, setHasError] = React.useState(false);
@@ -57514,7 +57379,8 @@ function Users({
       t: t,
       isOpen: newUserModalVisible,
       onClose: () => setNewUserModalVisible(false),
-      userRoles: userRoles
+      userRoles: userRoles,
+      addUser: addUser
     })]
   });
 }
@@ -57750,6 +57616,15 @@ function Edit({
       })
     }));
   }, []);
+  const addUser = React.useCallback(userData => {
+    setIsChanged(true);
+    setData(prev => ({
+      ...prev,
+      users: [...(prev.users || []), {
+        ...userData
+      }]
+    }));
+  }, []);
   const onSuspend = () => {
     antd.Modal.confirm({
       title: t("sbg-admin::suspend-title"),
@@ -57796,6 +57671,7 @@ function Edit({
       onCancel: () => {}
     });
   };
+  console.log("good morning", module);
   const renderItem = item => {
     if (item.type === "users") {
       return /*#__PURE__*/jsxRuntime.jsx(Users, {
@@ -57807,6 +57683,7 @@ function Edit({
         userRoles: userRoles,
         deleteUser: deleteUser,
         updateUser: updateUser,
+        addUser: addUser,
         goTo: goTo,
         accountStatuses: accountStatuses,
         transferAdmin: transferAdmin