datastake-daf 0.6.308 → 0.6.310

package/dist/components/index.js

@@ -3226,7 +3226,7 @@ const config$3 = {
   MagicWand: config$4
 };
 
-const _excluded$w = ["width", "height", "size", "name", "fill"];
+const _excluded$z = ["width", "height", "size", "name", "fill"];
 const CustomIcon = _ref => {
   let {
       width = 14,
@@ -3235,7 +3235,7 @@ const CustomIcon = _ref => {
       name = "",
       fill = "none"
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$w);
+    props = _objectWithoutProperties(_ref, _excluded$z);
   const conf = config$3[name];
   if (conf) {
     return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread2(_objectSpread2({}, props), {}, {
@@ -9437,7 +9437,7 @@ createCommonjsModule(function (module, exports) {
 !function(e,n){module.exports=n();}(commonjsGlobal,(function(){return {name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(e){var n=["th","st","nd","rd"],t=e%100;return "["+e+(n[(t-20)%10]||n[t]||n[0])+"]"}}}));
 });
 
-const _excluded$v = ["view", "module", "scope", "form", "meta"];
+const _excluded$y = ["view", "module", "scope", "form", "meta"];
 dayjs__default["default"].extend(customParseFormat);
 dayjs__default["default"].extend(utc);
 dayjs__default["default"].extend(utc);
@@ -9811,7 +9811,7 @@ const filterCreateData = data => {
       form,
       meta
     } = data,
-    rest = _objectWithoutProperties(data, _excluded$v);
+    rest = _objectWithoutProperties(data, _excluded$y);
   const _meta = isObjectEmpty(meta) ? undefined : meta;
   return _objectSpread2(_objectSpread2({}, rest), {}, {
     meta: _meta
@@ -10191,7 +10191,7 @@ SelectFilters.propTypes = {
   apiUrl: PropTypes__default["default"].string
 };
 
-const _excluded$u = ["columns", "data", "defaultFilters", "style", "pagination", "loading", "onChange", "onFilterChange", "selectOptions", "filtersConfig", "rowSelection", "setShowFilters", "rowKey", "showFilters", "hideOnLoading", "sourcesKey", "className", "projects", "t", "selectedProject", "sourceId", "projectSources", "language", "scrollX", "apiUrl", "app", "doEmptyRows"];
+const _excluded$x = ["columns", "data", "defaultFilters", "style", "pagination", "loading", "onChange", "onFilterChange", "selectOptions", "filtersConfig", "rowSelection", "setShowFilters", "rowKey", "showFilters", "hideOnLoading", "sourcesKey", "className", "projects", "t", "selectedProject", "sourceId", "projectSources", "language", "scrollX", "apiUrl", "app", "doEmptyRows"];
 function DAFTable(_ref) {
   let {
       columns = [],
@@ -10222,7 +10222,7 @@ function DAFTable(_ref) {
       app,
       doEmptyRows
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$u);
+    rest = _objectWithoutProperties(_ref, _excluded$x);
   const [source, setSource] = React.useState([]);
   const projectData = (projects || []).find(p => p.id === selectedProject);
   const [filtersInit, setFiltersInit] = React.useState(!loading);
@@ -11139,7 +11139,7 @@ function ComponentWithFocus(_ref) {
 }
 
 var _templateObject$c;
-const _excluded$t = ["size", "maxHeight", "containerHeight", "dataSource", "columns", "pagination", "doEmptyRows"];
+const _excluded$w = ["size", "maxHeight", "containerHeight", "dataSource", "columns", "pagination", "doEmptyRows"];
 function StickyTable(_ref) {
   let {
       size = "small",
@@ -11150,7 +11150,7 @@ function StickyTable(_ref) {
       pagination = false,
       doEmptyRows = true
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$t);
+    props = _objectWithoutProperties(_ref, _excluded$w);
   const data = React__default["default"].useMemo(() => {
     if (!doEmptyRows) {
       return dataSource;
@@ -11646,7 +11646,7 @@ const BTN_SIZE = {
   LG: 'large'
 };
 
-const _excluded$s = ["content", "size", "type", "icon", "onClick", "disabled", "loading", "title", "style", "className"];
+const _excluded$v = ["content", "size", "type", "icon", "onClick", "disabled", "loading", "title", "style", "className"];
 function DafButton(_ref) {
   let {
       content = '',
@@ -11660,7 +11660,7 @@ function DafButton(_ref) {
       style = {},
       className = ''
     } = _ref,
-    restProps = _objectWithoutProperties(_ref, _excluded$s);
+    restProps = _objectWithoutProperties(_ref, _excluded$v);
   return /*#__PURE__*/jsxRuntime.jsx(antd.Button, _objectSpread2(_objectSpread2({
     icon: icon,
     type: type,
@@ -11779,12 +11779,12 @@ const Style$I = dt.div`
   }
 `;
 
-const _excluded$r = ["children"];
+const _excluded$u = ["children"];
 const BorderedButton = _ref => {
   let {
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$u);
   return /*#__PURE__*/jsxRuntime.jsx(Style$I, {
     className: "d-btn-cont",
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -11924,12 +11924,12 @@ Badge.propTypes = {
   props: PropTypes__default["default"].object
 };
 
-const _excluded$q = ["icon"];
+const _excluded$t = ["icon"];
 function GetIcon(_ref) {
   let {
       icon
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$q);
+    props = _objectWithoutProperties(_ref, _excluded$t);
   let Icon = Icons__namespace.CloseOutlined;
   if (Icons__namespace[icon]) {
     Icon = Icons__namespace[icon];
@@ -12248,7 +12248,7 @@ GoToSelect.propTypes = {
   t: PropTypes__default["default"].func
 };
 
-const _excluded$p = ["options", "defaultSelected", "onChange", "textWhenMultiple", "withCount", "oneAlwaysSelected", "canUnselectLast", "isAvatarGroup", "maxAvatarCount", "dropDownWidth", "topAvatarValue", "isSingle", "selectionType"];
+const _excluded$s = ["options", "defaultSelected", "onChange", "textWhenMultiple", "withCount", "oneAlwaysSelected", "canUnselectLast", "isAvatarGroup", "maxAvatarCount", "dropDownWidth", "topAvatarValue", "isSingle", "selectionType"];
 const {
   useToken: useToken$l
 } = antd.theme;
@@ -12341,7 +12341,7 @@ function Multiselect(_ref) {
       isSingle = false,
       selectionType = SELECTION_TYPES.DEFAULT
     } = _ref,
-    restProps = _objectWithoutProperties(_ref, _excluded$p);
+    restProps = _objectWithoutProperties(_ref, _excluded$s);
   const {
     token
   } = useToken$l();
@@ -13057,7 +13057,7 @@ DAFHeader.propTypes = {
   filtersConfig: PropTypes__default["default"].any
 };
 
-const _excluded$o = ["tabs", "onChange", "value", "className"];
+const _excluded$r = ["tabs", "onChange", "value", "className"];
 function TabsHeader(_ref) {
   let {
       tabs = [],
@@ -13065,7 +13065,7 @@ function TabsHeader(_ref) {
       value = '',
       className = 'mt-2'
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$o);
+    rest = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: formatClassname(['daf-tabs-header pl-6 pr-6', className]),
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Tabs, _objectSpread2({
@@ -13162,7 +13162,7 @@ DrawerHeader.propTypes = {
   tabsConfig: PropTypes__default["default"].any
 };
 
-const _excluded$n = ["label", "onClick", "icon", "type", "tooltip", "disabled", "loading", "style", "className"];
+const _excluded$q = ["label", "onClick", "icon", "type", "tooltip", "disabled", "loading", "style", "className"];
 const useFooter = _ref => {
   let {
     leftContent,
@@ -13197,7 +13197,7 @@ const useFooter = _ref => {
                 style = {},
                 className = ""
               } = button,
-              restProps = _objectWithoutProperties(button, _excluded$n);
+              restProps = _objectWithoutProperties(button, _excluded$q);
             return /*#__PURE__*/jsxRuntime.jsx(DafButton, _objectSpread2({
               content: label,
               type: type,
@@ -16102,7 +16102,7 @@ Widget.propTypes = {
   description: PropTypes__default["default"].string
 };
 
-const _excluded$m = ["loading", "title", "image", "description", "imgAlt", "noDescriptionText"];
+const _excluded$p = ["loading", "title", "image", "description", "imgAlt", "noDescriptionText", "isPdf"];
 function ImageWidget(_ref) {
   let {
       loading = false,
@@ -16110,9 +16110,10 @@ function ImageWidget(_ref) {
       image,
       description,
       imgAlt,
-      noDescriptionText
+      noDescriptionText,
+      isPdf = false
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, _objectSpread2(_objectSpread2({
     loading: loading,
     title: title,
@@ -16144,7 +16145,7 @@ function ImageWidget(_ref) {
         })
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         style: {
-          maxHeight: "195px",
+          maxHeight: isPdf ? "100%" : "195px",
           paddingRight: "20px",
           overflowY: "auto",
           scrollbarWidth: "thin",
@@ -16169,7 +16170,7 @@ function ImageWidget(_ref) {
 }
 
 var _templateObject$9;
-const _excluded$l = ["title", "loading", "data", "current", "defaultActiveTab", "widgetClassname", "className", "direction"];
+const _excluded$o = ["title", "loading", "data", "current", "defaultActiveTab", "widgetClassname", "className", "direction"];
 function FlowWidget(_ref) {
   let {
       title,
@@ -16181,7 +16182,7 @@ function FlowWidget(_ref) {
       className,
       direction = "horizontal"
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$l);
+    rest = _objectWithoutProperties(_ref, _excluded$o);
   const [activeTab, setActiveTab] = React.useState();
   React.useEffect(() => {
     if (defaultActiveTab) {
@@ -19240,7 +19241,7 @@ Map$3.propTypes = {
   nameAsSiderTitle: PropTypes__default["default"].bool
 };
 
-const _excluded$k = ["isExpanded", "shouldRenderMap", "renderKey", "title", "loading", "t", "user", "data", "height", "widgetConfig"];
+const _excluded$n = ["isExpanded", "shouldRenderMap", "renderKey", "title", "loading", "t", "user", "data", "height", "widgetConfig"];
 function InExpandableWidgetMap(_ref) {
   let {
       isExpanded,
@@ -19254,7 +19255,7 @@ function InExpandableWidgetMap(_ref) {
       height,
       widgetConfig
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$k);
+    rest = _objectWithoutProperties(_ref, _excluded$n);
   const [mapKey, setMapKey] = React.useState(0);
   const [isMapReady, setIsMapReady] = React.useState(false);
   React.useEffect(() => {
@@ -21454,14 +21455,14 @@ const MapConfig = ({
   });
 };
 
-const _excluded$j = ["config", "title", "loading"];
+const _excluded$m = ["config", "title", "loading"];
 const Details = _ref => {
   let {
       config = [],
       title,
       loading = false
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$j);
+    rest = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, _objectSpread2(_objectSpread2({
     className: "with-border-header h-w-btn-header card",
     loading: loading,
@@ -21477,14 +21478,14 @@ const Details = _ref => {
   }));
 };
 
-const _excluded$i = ["config", "title", "loading"];
+const _excluded$l = ["config", "title", "loading"];
 const KeyIndicatorsDetails = _ref => {
   let {
       config,
       title,
       loading = false
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$i);
+    rest = _objectWithoutProperties(_ref, _excluded$l);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, _objectSpread2(_objectSpread2({
     className: "with-border-header h-w-btn-header",
     title: title,
@@ -21514,7 +21515,7 @@ const Style$y = dt.div`
     }    
 `;
 
-const _excluded$h = ["children", "config", "detailsTitle", "firstColumnWidth"];
+const _excluded$k = ["children", "config", "detailsTitle", "firstColumnWidth"];
 const DetailsSection = _ref => {
   let {
       children,
@@ -21522,7 +21523,7 @@ const DetailsSection = _ref => {
       detailsTitle,
       firstColumnWidth = "250px"
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$h);
+    rest = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/jsxRuntime.jsx(Style$y, {
     firstColumnWidth: firstColumnWidth,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -21698,14 +21699,14 @@ const getGoalConfig = () => {
 };
 
 var _templateObject$8;
-const _excluded$g = ["title", "activeSdgGoals", "t"];
+const _excluded$j = ["title", "activeSdgGoals", "t"];
 function SDGWidget(_ref) {
   let {
       title = "Sustainable Development Goals",
       activeSdgGoals = [],
       t = key => key
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   const sdgConfig = getGoalConfig();
   return /*#__PURE__*/jsxRuntime.jsx(Widget, _objectSpread2(_objectSpread2({
     title: title,
@@ -21923,7 +21924,7 @@ function SdgList({
   });
 }
 
-const _excluded$f = ["title", "description", "onLinkClick", "image", "linkIcon", "sdgList", "items", "onCardClick", "hideSDGList", "t"];
+const _excluded$i = ["title", "description", "onLinkClick", "image", "linkIcon", "sdgList", "items", "onCardClick", "hideSDGList", "t"];
 const {
   Meta
 } = antd.Card;
@@ -21943,7 +21944,7 @@ function ProjectWidget(_ref) {
       hideSDGList = false,
       t = x => x
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   const [isHovered, setIsHovered] = React__default["default"].useState(false);
   const {
     token
@@ -22188,13 +22189,13 @@ const WidgetCard = _ref => {
   });
 };
 
-const _excluded$e = ["title", "children"];
+const _excluded$h = ["title", "children"];
 const CarouselWidget = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       title,
       children
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$e);
+    rest = _objectWithoutProperties(_ref, _excluded$h);
   /**
    * Handles carousel slide change events
    * @param {number} currentSlide - The index of the current slide after change
@@ -22315,7 +22316,7 @@ const StyledCarouselWrapper = dt.div`
 
 `;
 
-const _excluded$d = ["title", "images", "height", "fallback", "activeDotColor", "inactiveDotColor", "arrowIconColor", "arrowHoverIconColor", "customArrows"];
+const _excluded$g = ["title", "images", "height", "fallback", "activeDotColor", "inactiveDotColor", "arrowIconColor", "arrowHoverIconColor", "customArrows"];
 function ImageCarousel(_ref) {
   let {
       title,
@@ -22328,7 +22329,7 @@ function ImageCarousel(_ref) {
       arrowHoverIconColor = "#1890ff",
       customArrows = false
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$d);
+    rest = _objectWithoutProperties(_ref, _excluded$g);
   const [previewVisible, setPreviewVisible] = React.useState(false);
   const [current, setCurrent] = React.useState(0);
   const carouselRef = React.useRef(null);
@@ -27676,7 +27677,7 @@ const RepeatableModals = ({
   }) : null;
 };
 
-const _excluded$c = ["viewGroup"],
+const _excluded$f = ["viewGroup"],
   _excluded2 = ["label", "icon", "position"];
 const Content = _ref => {
   let {
@@ -27745,7 +27746,7 @@ const Content = _ref => {
       if (groups[gKey].viewGroup === key) {
         // eslint-disable-next-line no-unused-vars
         const _groups$gKey = groups[gKey],
-          gCfg = _objectWithoutProperties(_groups$gKey, _excluded$c);
+          gCfg = _objectWithoutProperties(_groups$gKey, _excluded$f);
         items[gKey] = gCfg;
       }
       return items;
@@ -43924,7 +43925,7 @@ const getGrouContent = (form, values, i, formId, excludedKeys, getData, setValue
   });
 };
 
-const _excluded$b = ["icon"];
+const _excluded$e = ["icon"];
 function DynamicForm(_ref) {
   var _data$meta;
   let {
@@ -44479,7 +44480,7 @@ function DynamicForm(_ref) {
           let {
               icon: Icon
             } = _ref3,
-            form = _objectWithoutProperties(_ref3, _excluded$b);
+            form = _objectWithoutProperties(_ref3, _excluded$e);
           return /*#__PURE__*/jsxRuntime.jsxs(antd.Button, {
             type: "link",
             size: "large",
@@ -44755,7 +44756,7 @@ function MultiBarProgress(_ref) {
 }
 const Style$r = dt.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n\theight: 6px;\n\twidth: 100%;\n\tbackground: var(--base-gray-40);\n\tborder-radius: 8px;\n\tdisplay: flex;\n\toverflow: hidden;\n\tdiv {\n\t\theight: 100%;\n\t}\n"])));
 
-const _excluded$a = ["tooltipTitle", "percentage", "strokeColor", "showInfo"];
+const _excluded$d = ["tooltipTitle", "percentage", "strokeColor", "showInfo"];
 function MultiColorProgressBar(_ref) {
   let {
       tooltipTitle,
@@ -44767,7 +44768,7 @@ function MultiColorProgressBar(_ref) {
       },
       showInfo = false
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$a);
+    rest = _objectWithoutProperties(_ref, _excluded$d);
   return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
     title: tooltipTitle,
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Progress, _objectSpread2({
@@ -44814,7 +44815,7 @@ const SideIcon = _ref3 => {
   });
 };
 
-const _excluded$9 = ["value", "options", "onChange", "className", "width"];
+const _excluded$c = ["value", "options", "onChange", "className", "width"];
 const ProgressTabs = _ref => {
   let {
       value = 'setup',
@@ -44835,7 +44836,7 @@ const ProgressTabs = _ref => {
       className = '',
       width = '100%'
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$9);
+    rest = _objectWithoutProperties(_ref, _excluded$c);
   // Transform options to include icons and handle disabled state
   const transformedOptions = options.map(option => _objectSpread2(_objectSpread2({}, option), {}, {
     label: /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -45742,6 +45743,30 @@ dt.div`
   }
 
 `;
+const LegendStyle = dt.ul`
+  list-style: none;
+  margin: var(--size-lg) 0 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: center;
+
+  li {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    color: #344054;
+    white-space: nowrap;
+
+    .legend-marker {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+    }
+  }
+`;
 
 const Chart = _ref => {
   let {
@@ -45756,7 +45781,10 @@ const Chart = _ref => {
     xOffset = 230,
     mouseXOffset = 30,
     mouseYOffset = 50,
-    children = null
+    children = null,
+    legend,
+    isPdf = false,
+    isPercentage = false
   } = _ref;
   const [hoveredGroup, setHoveredGroup] = React.useState(null);
   const svgRef = React.useRef();
@@ -45782,52 +45810,93 @@ const Chart = _ref => {
     setMouseX(x);
     if (hoveredGroup === null) {
       setHoveredGroup(_objectSpread2(_objectSpread2({}, hG), {}, {
-        id
+        id,
+        fromLegend: false
       }));
     }
   }, [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 || legend === undefined || 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) {
+      let angle = percent * 360 - 90;
+      if (angle > 90 && angle < 270) {
+        angle += 180;
+      }
+      const tilt = 30;
+      return angle + tilt;
+    }
     return data.map((d, i) => {
       const [startX, startY] = getCoordinatesForPercent(cumulativePercent);
-      cumulativePercent += d.percent - 0;
+      const startPercent = cumulativePercent;
+      cumulativePercent += d.percent;
       const [endX, endY] = getCoordinatesForPercent(cumulativePercent);
-      const [borderStartX, borderStartY] = getCoordinatesForPercent(cumulativePercent);
-      cumulativePercent += 0;
-      const [borderEndX, borderEndY] = getCoordinatesForPercent(cumulativePercent);
-      const largeArcFlag = d.percent > .5 ? 1 : 0;
+
+      // Midpoint of this slice
+      const midPercent = startPercent + d.percent / 2;
+      const [labelX, labelY] = getCoordinatesForPercent(midPercent);
+      const largeArcFlag = d.percent > 0.5 ? 1 : 0;
       const pathData = ["M ".concat(startX, " ").concat(startY), "A 1 1 0 ".concat(largeArcFlag, " 1 ").concat(endX, " ").concat(endY), "L 0 0"].join(' ');
-      const borderPathData = ["M ".concat(borderStartX, " ").concat(borderStartY), "A 1 1 0 0 1 ".concat(borderEndX, " ").concat(borderEndY), "L 0 0"].join(' ');
       return /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsx("path", {
           d: pathData,
-          "data-bs-toggle": "tooltip",
-          "data-bs-placement": "top",
-          title: "Tooltip on top",
           fill: d.color,
           style: {
             opacity: changeOpacityOnHover ? hoveredGroup === null ? 1 : hoveredGroup.id === i ? 1 : 0.4 : 1
           },
           onMouseEnter: () => {
-            if (mouseLocked) {
-              return;
+            if (!mouseLocked) {
+              setHoveredGroup(_objectSpread2(_objectSpread2({}, d), {}, {
+                id: i
+              }));
             }
-            setHoveredGroup(_objectSpread2(_objectSpread2({}, d), {}, {
-              id: i
-            }));
           },
           onMouseLeave: () => {
-            if (mouseLocked) {
-              return;
+            if (!mouseLocked) {
+              setHoveredGroup(null);
             }
-            setHoveredGroup(null);
           },
           onMouseMove: e => onMouseLeaveHandler(e, d, i),
           onClick: () => setMouseLocked(prev => !prev)
         }), /*#__PURE__*/jsxRuntime.jsx("path", {
-          d: borderPathData,
-          fill: "white"
-        })]
+          d: pathData,
+          fill: "none",
+          stroke: "white",
+          strokeWidth: "0.001"
+        }), isPdf ? /*#__PURE__*/jsxRuntime.jsx("text", {
+          x: labelX * 0.6,
+          y: labelY * 0.6,
+          textAnchor: "middle",
+          dominantBaseline: "middle",
+          fontSize: "0.1",
+          fill: "#000",
+          transform: "rotate(".concat(getRotationAngle(midPercent), ", ").concat(labelX * 0.6, ", ").concat(labelY * 0.6, ")"),
+          children: d.percent ? isPercentage ? "".concat(Math.round(d.percent * 100), "%") : d.percent : d.label
+        }) : null]
       }, i.toString());
     });
   }, [data, hoveredGroup, getCoordinatesForPercent, mouseLocked]);
@@ -45870,7 +45939,60 @@ const Chart = _ref => {
       onMouseMove: e => onMouseLeaveHandler(e, {}, 0)
     } : {}), {}, {
       children: dataToShow
-    })), tooltip, children]
+    })), 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]
   });
 };
 Chart.propTypes = {
@@ -47148,7 +47270,7 @@ const renderRows = ({
   });
 };
 
-const _excluded$8 = ["page", "pageSize"];
+const _excluded$b = ["page", "pageSize"];
 function DataStoreTable$1(_ref) {
   let {
     mod,
@@ -47246,7 +47368,7 @@ function DataStoreTable$1(_ref) {
           page,
           pageSize
         } = activeFilters,
-        rest = _objectWithoutProperties(activeFilters, _excluded$8);
+        rest = _objectWithoutProperties(activeFilters, _excluded$b);
       const params = _objectSpread2({
         pagination: {
           page,
@@ -47566,7 +47688,7 @@ const getLinkedColumns = ({
   ellipsis: true
 }];
 
-const _excluded$7 = ["administrativeLevel1", "administrativeLevel2"];
+const _excluded$a = ["administrativeLevel1", "administrativeLevel2"];
 function DataStoreView(_ref) {
   let {
     mod,
@@ -47629,7 +47751,7 @@ function DataStoreView(_ref) {
           administrativeLevel1,
           administrativeLevel2
         } = _ref2,
-        rest = _objectWithoutProperties(_ref2, _excluded$7);
+        rest = _objectWithoutProperties(_ref2, _excluded$a);
       const levels = [administrativeLevel1, administrativeLevel2].filter(p => !!p);
       let levelsRes = {
         data: []
@@ -49107,14 +49229,14 @@ const TabsStyled = dt(antd.Tabs)`
 
 `;
 
-const _excluded$6 = ["defaultActiveKey", "items", "onChange"];
+const _excluded$9 = ["defaultActiveKey", "items", "onChange"];
 const StyledTabs = _ref => {
   let {
       defaultActiveKey,
       items,
       onChange
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$6);
+    rest = _objectWithoutProperties(_ref, _excluded$9);
   return /*#__PURE__*/jsxRuntime.jsx(TabsStyled, _objectSpread2({
     defaultActiveKey: defaultActiveKey,
     items: items,
@@ -49180,7 +49302,7 @@ function AvatarGroup(_ref) {
   });
 }
 
-const _excluded$5 = ["t", "open", "title", "children", "onClose", "onSuccess", "cancelBtnText", "saveBtnText", "className", "loading", "disabled", "withModalFormWrapper"];
+const _excluded$8 = ["t", "open", "title", "children", "onClose", "onSuccess", "cancelBtnText", "saveBtnText", "className", "loading", "disabled", "withModalFormWrapper"];
 function Modal(_ref) {
   let {
       t = text => text,
@@ -49196,7 +49318,7 @@ function Modal(_ref) {
       disabled = false,
       withModalFormWrapper = true
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   return /*#__PURE__*/jsxRuntime.jsxs(antd.Modal, _objectSpread2(_objectSpread2({
     width: 650,
     footer: null,
@@ -49239,6 +49361,7 @@ const Container$1 = dt.div`
 	width: calc(100% - 48px);
 `;
 
+const _excluded$7 = ["data", "xFieldKey", "yFieldKey", "renderTooltipContent", "tooltipConfig", "animated", "isStack", "isGroup", "isPercentage", "seriesField", "formattedYAxis", "formattedXAxis", "color", "height", "t", "isPdf", "extraLegendConfig"];
 const {
   useToken: useToken$e
 } = antd.theme;
@@ -49308,26 +49431,31 @@ const {
 
 function BarChart(_ref) {
   let {
-    data = [],
-    xFieldKey = "value",
-    yFieldKey = "label",
-    renderTooltipContent,
-    tooltipConfig = {},
-    animated = false,
-    isStack = false,
-    isGroup = false,
-    isPercentage = false,
-    seriesField,
-    formattedYAxis = s => s,
-    formattedXAxis = s => s,
-    color,
-    height
-  } = _ref;
+      data = [],
+      xFieldKey = "value",
+      yFieldKey = "label",
+      renderTooltipContent,
+      tooltipConfig = {},
+      animated = false,
+      isStack = false,
+      isGroup = false,
+      isPercentage = false,
+      seriesField,
+      formattedYAxis = s => s,
+      formattedXAxis = s => s,
+      color,
+      height,
+      t = s => s,
+      isPdf = false,
+      extraLegendConfig = {}
+    } = _ref;
+    _objectWithoutProperties(_ref, _excluded$7);
   const containerRef = React__default["default"].useRef(null);
   const chartRef = React__default["default"].useRef(null);
   const {
     token
   } = useToken$e();
+  const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
   React__default["default"].useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -49358,7 +49486,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) {
@@ -49388,6 +49521,7 @@ function BarChart(_ref) {
   });
 }
 
+const _excluded$6 = ["data", "xFieldKey", "yFieldKey", "renderTooltipContent", "tooltipConfig", "animated", "isSmooth", "seriesField", "isArea", "formattedYAxis", "formattedXAxis", "color", "isPercentage", "height", "autoHideXLabel", "t", "isPdf", "extraLegendConfig"];
 const {
   useToken: useToken$d
 } = antd.theme;
@@ -49454,27 +49588,32 @@ const {
 
 function LineChart(_ref) {
   let {
-    data = [],
-    xFieldKey = "label",
-    yFieldKey = "value",
-    renderTooltipContent,
-    tooltipConfig = {},
-    animated = false,
-    isSmooth = false,
-    seriesField,
-    isArea = false,
-    formattedYAxis = s => s,
-    formattedXAxis = s => s,
-    color,
-    isPercentage = false,
-    height,
-    autoHideXLabel = true
-  } = _ref;
+      data = [],
+      xFieldKey = "label",
+      yFieldKey = "value",
+      renderTooltipContent,
+      tooltipConfig = {},
+      animated = false,
+      isSmooth = false,
+      seriesField,
+      isArea = false,
+      formattedYAxis = s => s,
+      formattedXAxis = s => s,
+      color,
+      isPercentage = false,
+      height,
+      autoHideXLabel = true,
+      t = s => s,
+      isPdf = false,
+      extraLegendConfig = {}
+    } = _ref;
+    _objectWithoutProperties(_ref, _excluded$6);
   const containerRef = React__default["default"].useRef(null);
   const chartRef = React__default["default"].useRef(null);
   const {
     token
   } = useToken$d();
+  const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
   React__default["default"].useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -49518,7 +49657,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);
@@ -49526,7 +49670,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]);
+  }, [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) {
@@ -49547,6 +49691,7 @@ function LineChart(_ref) {
   });
 }
 
+const _excluded$5 = ["data", "xFieldKey", "yFieldKey", "renderTooltipContent", "tooltipConfig", "animated", "isStack", "isGroup", "seriesField", "isPercentage", "showBackground", "formattedYAxis", "formattedXAxis", "color", "height", "groupField", "t", "isPdf", "extraLegendConfig"];
 const {
   useToken: useToken$c
 } = antd.theme;
@@ -49615,28 +49760,33 @@ const {
 
 function ColumnChart(_ref) {
   let {
-    data = [],
-    xFieldKey = "label",
-    yFieldKey = "value",
-    renderTooltipContent,
-    tooltipConfig = {},
-    animated = false,
-    isStack = false,
-    isGroup = false,
-    seriesField,
-    isPercentage = false,
-    showBackground = false,
-    formattedYAxis = s => s,
-    formattedXAxis = s => s,
-    color,
-    height,
-    groupField
-  } = _ref;
+      data = [],
+      xFieldKey = "label",
+      yFieldKey = "value",
+      renderTooltipContent,
+      tooltipConfig = {},
+      animated = false,
+      isStack = false,
+      isGroup = false,
+      seriesField,
+      isPercentage = false,
+      showBackground = false,
+      formattedYAxis = s => s,
+      formattedXAxis = s => s,
+      color,
+      height,
+      groupField,
+      t = s => s,
+      isPdf = false,
+      extraLegendConfig = {}
+    } = _ref;
+    _objectWithoutProperties(_ref, _excluded$5);
   const containerRef = React__default["default"].useRef(null);
   const chartRef = React__default["default"].useRef(null);
   const {
     token
   } = useToken$c();
+  const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
   React__default["default"].useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -49671,7 +49821,12 @@ 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 => t(text)
+        },
+        position: 'bottom'
+      }, extraLegendConfig) : hasLegendConfig || false
     }, showBackground && isPercentage && {
       columnBackground: {
         style: {}
@@ -49859,7 +50014,7 @@ function RadialBarChart(_ref) {
   });
 }
 
-const _excluded$4 = ["data", "angleField", "colorField", "color", "height", "innerRadius", "radius", "legend", "label", "statistic", "tooltip", "renderTooltipContent", "tooltipConfig", "meta", "animation"];
+const _excluded$4 = ["data", "angleField", "colorField", "color", "height", "innerRadius", "radius", "legend", "label", "statistic", "tooltip", "renderTooltipContent", "tooltipConfig", "meta", "animation", "t", "isPdf", "extraLegendConfig"];
 const {
   useToken: useToken$a
 } = antd.theme;
@@ -49929,7 +50084,10 @@ function DonutPie(_ref) {
       renderTooltipContent,
       tooltipConfig = {},
       meta,
-      animation = false
+      animation = false,
+      t = s => s,
+      isPdf = false,
+      extraLegendConfig = {}
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$4);
   const containerRef = React.useRef(null);
@@ -49937,6 +50095,7 @@ function DonutPie(_ref) {
   const {
     token
   } = useToken$a();
+  const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
 
   // Memoize processed data for progress mode
   const processedData = React.useMemo(() => {
@@ -49962,7 +50121,12 @@ function DonutPie(_ref) {
       color: color || [token.colorPrimary7, "#E8EDF3"],
       radius,
       innerRadius,
-      legend,
+      legend: isPdf ? _objectSpread2({
+        itemName: {
+          formatter: text => t(text)
+        },
+        position: 'bottom'
+      }, extraLegendConfig) : hasLegendConfig || false,
       label,
       statistic,
       tooltip: tooltipOption,
@@ -50391,7 +50555,7 @@ function StackChart(_ref) {
   }));
 }
 
-const _excluded$3 = ["data", "xFieldKey", "yFieldKey", "seriesField", "renderTooltipContent", "tooltipConfig", "animated", "color", "formattedYAxis", "formattedXAxis", "fillOpacity", "height"];
+const _excluded$3 = ["data", "xFieldKey", "yFieldKey", "seriesField", "renderTooltipContent", "tooltipConfig", "animated", "color", "formattedYAxis", "formattedXAxis", "fillOpacity", "height", "t", "isPdf", "extraLegendConfig"];
 const {
   useToken: useToken$8
 } = antd.theme;
@@ -50462,7 +50626,10 @@ const AreaChart = _ref => {
       formattedYAxis = s => s,
       formattedXAxis = s => s,
       fillOpacity = 0.7,
-      height
+      height,
+      t = s => s,
+      isPdf = false,
+      extraLegendConfig = {}
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$3);
   const containerRef = React.useRef(null);
@@ -50470,6 +50637,7 @@ const AreaChart = _ref => {
   const {
     token
   } = useToken$8();
+  const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
   React.useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -50504,7 +50672,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) {