datastake-daf 0.6.384 → 0.6.386

package/dist/components/index.js

@@ -45763,7 +45763,7 @@ dt.div`
   }
 
 `;
-const LegendStyle = dt.ul`
+dt.ul`
   list-style: none;
   margin: var(--size-lg) 0 0;
   padding: 0;
@@ -45788,6 +45788,100 @@ const LegendStyle = 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 = [],
+  layout = 'horizontal',
+  interactive = true,
+  style = {}
+}) => {
+  const isVertical = layout === 'vertical';
+  console.log({
+    isVertical,
+    items
+  });
+  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", {
+      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 = [],
@@ -45804,6 +45898,7 @@ const Chart = _ref => {
     children = null,
     legend,
     isPdf = false,
+    legendConfig = {},
     isPercentage = false
   } = _ref;
   const [hoveredGroup, setHoveredGroup] = React.useState(null);
@@ -45812,6 +45907,17 @@ 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) {
@@ -45835,31 +45941,6 @@ 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) {
@@ -45959,59 +46040,11 @@ const Chart = _ref => {
       onMouseMove: e => onMouseLeaveHandler(e, {}, 0)
     } : {}), {}, {
       children: dataToShow
-    })), 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);
-      })
+    })), tooltip, legendEnabled && legendPosition === 'bottom' && /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {
+      items: legendItems,
+      layout: legendLayout,
+      interactive: legendInteractive,
+      style: legendStyle
     }), children]
   });
 };
@@ -49381,7 +49414,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", "extraLegendConfig", "width"];
+const _excluded$7 = ["data", "xFieldKey", "yFieldKey", "renderTooltipContent", "tooltipConfig", "animated", "isStack", "isGroup", "isPercentage", "seriesField", "formattedYAxis", "formattedXAxis", "color", "height", "t", "isPdf", "legendConfig", "width"];
 const {
   useToken: useToken$g
 } = antd.theme;
@@ -49467,7 +49500,7 @@ function BarChart(_ref) {
       height,
       t = s => s,
       isPdf = false,
-      extraLegendConfig = {},
+      legendConfig = {},
       width
     } = _ref;
     _objectWithoutProperties(_ref, _excluded$7);
@@ -49476,7 +49509,17 @@ function BarChart(_ref) {
   const {
     token
   } = useToken$g();
-  const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
+  const {
+    legendEnabled,
+    legendItems,
+    legendPosition,
+    legendLayout,
+    legendInteractive,
+    legendStyle
+  } = useLegendConfig({
+    legendConfig,
+    isPdf
+  });
   React__default["default"].useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -49507,12 +49550,7 @@ function BarChart(_ref) {
       isStack,
       color: color || token.colorPrimary7,
       seriesField,
-      legend: isPdf ? _objectSpread2({
-        itemName: {
-          formatter: text => t(text)
-        },
-        position: 'bottom'
-      }, extraLegendConfig) : hasLegendConfig || false,
+      legend: false,
       animation: animated
     };
     if (!chartRef.current) {
@@ -49530,21 +49568,26 @@ function BarChart(_ref) {
       }
     };
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("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: isPdf,
+        isPdf: false,
         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", "extraLegendConfig", "width"];
+const _excluded$6 = ["data", "xFieldKey", "yFieldKey", "renderTooltipContent", "tooltipConfig", "animated", "isSmooth", "seriesField", "isArea", "formattedYAxis", "formattedXAxis", "color", "isPercentage", "height", "autoHideXLabel", "t", "isPdf", "legendConfig", "width"];
 const {
   useToken: useToken$f
 } = antd.theme;
@@ -49628,7 +49671,7 @@ function LineChart(_ref) {
       autoHideXLabel = true,
       t = s => s,
       isPdf = false,
-      extraLegendConfig = {},
+      legendConfig = {},
       width
     } = _ref;
     _objectWithoutProperties(_ref, _excluded$6);
@@ -49637,7 +49680,17 @@ function LineChart(_ref) {
   const {
     token
   } = useToken$f();
-  const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
+  const {
+    legendEnabled,
+    legendItems,
+    legendPosition,
+    legendLayout,
+    legendInteractive,
+    legendStyle
+  } = useLegendConfig({
+    legendConfig,
+    isPdf
+  });
   React__default["default"].useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -49681,12 +49734,7 @@ function LineChart(_ref) {
           fillOpacity: isArea ? 0.15 : 0
         }
       },
-      legend: isPdf ? _objectSpread2({
-        itemName: {
-          formatter: text => t(text)
-        },
-        position: 'bottom'
-      }, extraLegendConfig) : hasLegendConfig || false
+      legend: false
     };
     if (!chartRef.current) {
       chartRef.current = new g2plot.Line(containerRef.current, config);
@@ -49694,7 +49742,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, extraLegendConfig, t]);
+  }, [data, containerRef.current, isSmooth, animated, xFieldKey, yFieldKey, seriesField, isArea, color, token.colorPrimary7, formattedXAxis, formattedYAxis, isPercentage, renderTooltipContent, tooltipConfig, isPdf, t]);
   React__default["default"].useEffect(() => {
     return () => {
       if (chartRef.current) {
@@ -49703,9 +49751,9 @@ function LineChart(_ref) {
       }
     };
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("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,
@@ -49713,11 +49761,16 @@ 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", "t", "isPdf", "extraLegendConfig", "shouldSeperateLegendName", "width"];
+const _excluded$5 = ["data", "xFieldKey", "yFieldKey", "renderTooltipContent", "tooltipConfig", "animated", "isStack", "isGroup", "seriesField", "isPercentage", "showBackground", "formattedYAxis", "formattedXAxis", "color", "height", "groupField", "width", "legendConfig", "isPdf"];
 const {
   useToken: useToken$e
 } = antd.theme;
@@ -49782,6 +49835,20 @@ 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) {
@@ -49802,11 +49869,9 @@ function ColumnChart(_ref) {
       color,
       height,
       groupField,
-      t = s => s,
-      isPdf = false,
-      extraLegendConfig = {},
-      shouldSeperateLegendName = false,
-      width
+      width,
+      legendConfig = {},
+      isPdf = false
     } = _ref;
     _objectWithoutProperties(_ref, _excluded$5);
   const containerRef = React__default["default"].useRef(null);
@@ -49814,7 +49879,20 @@ function ColumnChart(_ref) {
   const {
     token
   } = useToken$e();
-  const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
+  console.log({
+    legendConfig
+  });
+  const {
+    legendEnabled,
+    legendItems,
+    legendPosition,
+    legendLayout,
+    legendInteractive,
+    legendStyle
+  } = useLegendConfig({
+    legendConfig,
+    isPdf
+  });
   React__default["default"].useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -49849,15 +49927,7 @@ function ColumnChart(_ref) {
           formatter: isPercentage ? v => "".concat(v).replace(/\d{1,3}(?=(\d{3})+$)/g, s => "".concat(s, ",")) + " %" : formattedYAxis
         }
       }),
-      legend: isPdf ? _objectSpread2({
-        itemName: {
-          formatter: text => {
-            const textToTranslate = shouldSeperateLegendName ? text.split("-")[1].toLowerCase() : text;
-            return t(textToTranslate);
-          }
-        },
-        position: 'bottom'
-      }, extraLegendConfig) : hasLegendConfig || false
+      legend: false
     }, showBackground && isPercentage && {
       columnBackground: {
         style: {}
@@ -49878,17 +49948,29 @@ function ColumnChart(_ref) {
       }
     };
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  console.log({
+    legendEnabled,
+    legendPosition,
+    legendLayout,
+    legendInteractive,
+    legendStyle
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs("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: isPdf,
+        isPdf: false,
         width: width
       })
-    })
+    }), legendEnabled && legendPosition === 'bottom' && /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {
+      items: legendItems,
+      layout: legendLayout,
+      interactive: legendInteractive,
+      style: legendStyle
+    })]
   });
 }
 
@@ -49947,13 +50029,26 @@ function RadialBarChart(_ref) {
     colorKey,
     animation = false,
     isPercentage = true,
-    color
+    color,
+    isPdf = false,
+    legendConfig = {}
   } = _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],
@@ -50036,18 +50131,23 @@ function RadialBarChart(_ref) {
       }
     };
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("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", "extraLegendConfig"];
+const _excluded$4 = ["data", "angleField", "colorField", "color", "height", "innerRadius", "radius", "legend", "label", "statistic", "tooltip", "renderTooltipContent", "tooltipConfig", "meta", "animation", "t", "isPdf", "legendConfig"];
 const {
   useToken: useToken$c
 } = antd.theme;
@@ -50120,7 +50220,7 @@ function DonutPie(_ref) {
       animation = false,
       t = s => s,
       isPdf = false,
-      extraLegendConfig = {}
+      legendConfig = {}
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$4);
   const containerRef = React.useRef(null);
@@ -50128,7 +50228,17 @@ function DonutPie(_ref) {
   const {
     token
   } = useToken$c();
-  const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
+  const {
+    legendEnabled,
+    legendItems,
+    legendPosition,
+    legendLayout,
+    legendInteractive,
+    legendStyle
+  } = useLegendConfig({
+    legendConfig,
+    isPdf
+  });
 
   // Memoize processed data for progress mode
   const processedData = React.useMemo(() => {
@@ -50154,12 +50264,7 @@ function DonutPie(_ref) {
       color: color || [token.colorPrimary7, "#E8EDF3"],
       radius,
       innerRadius,
-      legend: isPdf ? _objectSpread2({
-        itemName: {
-          formatter: text => t(text)
-        },
-        position: 'bottom'
-      }, extraLegendConfig) : hasLegendConfig || false,
+      legend: false,
       label,
       statistic,
       tooltip: tooltipOption,
@@ -50181,9 +50286,9 @@ function DonutPie(_ref) {
       }
     };
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("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,
@@ -50192,7 +50297,12 @@ function DonutPie(_ref) {
         },
         isPdf: isPdf
       })
-    })
+    }), legendEnabled && legendPosition === 'bottom' && /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {
+      items: legendItems,
+      layout: legendLayout,
+      interactive: legendInteractive,
+      style: legendStyle
+    })]
   });
 }
 
@@ -50246,7 +50356,7 @@ const Style$g = dt.div`
 		}
 	}
 `;
-const StyleWrapper = dt.div`
+dt.div`
 	.legend {
 		display: flex;
 		flex-wrap: wrap;
@@ -50455,7 +50565,8 @@ function StackChart(_ref) {
     valueField = "value",
     height = 300,
     isPdf = false,
-    t = s => s
+    t = s => s,
+    legendConfig = {}
   } = _ref;
   const ref = React__default["default"].useRef();
   const {
@@ -50474,6 +50585,17 @@ 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];
@@ -50583,7 +50705,7 @@ function StackChart(_ref) {
       }));
     }
   }, [hoveredGroup]);
-  return /*#__PURE__*/jsxRuntime.jsxs(StyleWrapper, {
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsxs(Style$g, _objectSpread2(_objectSpread2({}, isEmpty ? {
       onMouseEnter: () => {
         setHoveredGroup({
@@ -50611,28 +50733,16 @@ function StackChart(_ref) {
         },
         children: content()
       })]
-    })), 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);
-      })
+    })), legendEnabled && legendPosition === 'bottom' && /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {
+      items: legendItems,
+      layout: legendLayout,
+      interactive: legendInteractive,
+      style: legendStyle
     })]
   });
 }
 
-const _excluded$3 = ["data", "xFieldKey", "yFieldKey", "seriesField", "renderTooltipContent", "tooltipConfig", "animated", "color", "formattedYAxis", "formattedXAxis", "fillOpacity", "height", "t", "isPdf", "extraLegendConfig", "width"];
+const _excluded$3 = ["data", "xFieldKey", "yFieldKey", "seriesField", "renderTooltipContent", "tooltipConfig", "animated", "color", "formattedYAxis", "formattedXAxis", "fillOpacity", "height", "t", "isPdf", "legendConfig", "width"];
 const {
   useToken: useToken$a
 } = antd.theme;
@@ -50706,7 +50816,7 @@ const AreaChart = _ref => {
       height,
       t = s => s,
       isPdf = false,
-      extraLegendConfig = {},
+      legendConfig = {},
       width
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$3);
@@ -50715,7 +50825,17 @@ const AreaChart = _ref => {
   const {
     token
   } = useToken$a();
-  const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
+  const {
+    legendEnabled,
+    legendItems,
+    legendPosition,
+    legendLayout,
+    legendInteractive,
+    legendStyle
+  } = useLegendConfig({
+    legendConfig,
+    isPdf
+  });
   React.useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -50750,12 +50870,7 @@ const AreaChart = _ref => {
       areaStyle: {
         fillOpacity
       },
-      legend: isPdf ? _objectSpread2({
-        itemName: {
-          formatter: text => t(text)
-        },
-        position: 'bottom'
-      }, extraLegendConfig) : hasLegendConfig || false,
+      legend: false,
       line: false
     }, rest);
     if (!chartRef.current) {
@@ -50773,21 +50888,26 @@ const AreaChart = _ref => {
       }
     };
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("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: isPdf,
+        isPdf: false,
         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"];
+const _excluded$2 = ["data", "xFieldKey", "yFieldKey", "seriesField", "renderTooltipContent", "tooltipConfig", "animated", "color", "formattedYAxis", "formattedXAxis", "score", "height", "isPdf", "legendConfig"];
 const {
   useToken: useToken$9
 } = antd.theme;
@@ -50808,7 +50928,9 @@ const RadarChart = _ref => {
         min: 0,
         max: 100
       },
-      height
+      height,
+      isPdf = false,
+      legendConfig = {}
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$2);
   const containerRef = React.useRef(null);
@@ -50816,6 +50938,17 @@ const RadarChart = _ref => {
   const {
     token
   } = useToken$9();
+  const {
+    legendEnabled,
+    legendItems,
+    legendPosition,
+    legendLayout,
+    legendInteractive,
+    legendStyle
+  } = useLegendConfig({
+    legendConfig,
+    isPdf
+  });
   React.useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -50900,15 +51033,20 @@ const RadarChart = _ref => {
       }
     };
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("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
+    })]
   });
 };
 
@@ -50927,13 +51065,26 @@ function DualAxesChart(_ref) {
     formattedLeftAxis = s => s,
     formattedRightAxis = s => s,
     formattedXAxis = s => s,
-    color
+    color,
+    legendConfig = {},
+    isPdf = false
   } = _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) {
@@ -51001,15 +51152,20 @@ function DualAxesChart(_ref) {
       }
     };
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("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
+    })]
   });
 }
 
@@ -54050,7 +54206,6 @@ function AddUserModal({
       setAccountUsed(true);
     }).catch(() => {});
   };
-  console.log("hellooooooooooooooooooooooooo");
   return /*#__PURE__*/jsxRuntime.jsx(Modal, {
     open: isOpen,
     title: "admin::edit-user",
@@ -54094,6 +54249,13 @@ 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"),
@@ -56904,8 +57066,7 @@ function NewUser({
   isOpen,
   onClose,
   defaultData,
-  userRoles = [],
-  addUser = () => {}
+  userRoles = []
 }) {
   const [MainForm] = antd.Form.useForm();
   const [accountUsed, setAccountUsed] = React.useState(false);
@@ -56919,26 +57080,8 @@ function NewUser({
   }, [defaultData]);
   const onSubmit = () => {
     MainForm.validateFields().then(val => {
-      // 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();
+      console.log(val);
+      setAccountUsed(true);
     }).catch(() => {});
   };
   return /*#__PURE__*/jsxRuntime.jsx(Modal, {
@@ -56984,6 +57127,13 @@ 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"),
@@ -57122,8 +57272,6 @@ 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,
@@ -57256,7 +57404,6 @@ function Users({
   accountStatuses,
   deleteUser = () => {},
   updateUser = () => {},
-  addUser = () => {},
   transferAdmin = () => {}
 }) {
   const [hasError, setHasError] = React.useState(false);
@@ -57379,8 +57526,7 @@ function Users({
       t: t,
       isOpen: newUserModalVisible,
       onClose: () => setNewUserModalVisible(false),
-      userRoles: userRoles,
-      addUser: addUser
+      userRoles: userRoles
     })]
   });
 }
@@ -57616,15 +57762,6 @@ 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"),
@@ -57671,7 +57808,6 @@ function Edit({
       onCancel: () => {}
     });
   };
-  console.log("good morning", module);
   const renderItem = item => {
     if (item.type === "users") {
       return /*#__PURE__*/jsxRuntime.jsx(Users, {
@@ -57683,7 +57819,6 @@ function Edit({
         userRoles: userRoles,
         deleteUser: deleteUser,
         updateUser: updateUser,
-        addUser: addUser,
         goTo: goTo,
         accountStatuses: accountStatuses,
         transferAdmin: transferAdmin