datastake-daf 0.6.320 → 0.6.322

package/dist/components/index.js

@@ -12771,6 +12771,7 @@ const useHeader = _ref => {
     };
   }, []);
   const maxWidth = React.useMemo(() => mainContWidth - buttonContWidth - 24, [mainContWidth, buttonContWidth]);
+  console.log(buttonContWidth, mainContWidth, maxWidth);
   const renderMainCont = () => /*#__PURE__*/jsxRuntime.jsxs("div", {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: formatClassname(["main-cont flex", className]),
@@ -12851,8 +12852,8 @@ const useHeader = _ref => {
         })]
       }), addedHeaderFirst ? /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex gap-2",
+        ref: buttonCont,
         children: [addedHeader, hasButtons && /*#__PURE__*/jsxRuntime.jsx("div", {
-          ref: buttonCont,
           children: /*#__PURE__*/jsxRuntime.jsx(Buttons, {
             extraButtons: extraButtons,
             actionButtons: actionButtons
@@ -12860,8 +12861,8 @@ const useHeader = _ref => {
         })]
       }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex gap-2",
+        ref: buttonCont,
         children: [hasButtons && /*#__PURE__*/jsxRuntime.jsx("div", {
-          ref: buttonCont,
           children: /*#__PURE__*/jsxRuntime.jsx(Buttons, {
             extraButtons: extraButtons,
             actionButtons: actionButtons
@@ -50198,7 +50199,6 @@ const Style$g = dt.div`
 		display: flex;
 		justify-content: space-between;
 		align-items: space-between;
-		${"" /* height: ${props => props.height || '300px'}; */}
 
 		.weekDay {
 			width: 16px;
@@ -50218,7 +50218,6 @@ const Style$g = dt.div`
 				overflow: hidden;
 				.event {
 					width: 100%;
-					${"" /* background: blue; */}
 					border-radius: 2px;
 					z-index: 1;
 					margin-top: 2px;
@@ -50245,6 +50244,30 @@ const Style$g = dt.div`
 		}
 	}
 `;
+const StyleWrapper = dt.div`
+	.legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 12px;
+		margin-top: 12px;
+		font-size: 12px;
+		color: #333;
+		justify-content: center;
+
+		.legend-item {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+
+			.legend-color {
+				width: 12px;
+				height: 12px;
+				border-radius: 2px;
+				display: inline-block;
+			}
+		}
+	}
+`;
 dt.div`
 	width: 200px;
 	display: flex;
@@ -50428,7 +50451,9 @@ function StackChart(_ref) {
     doConstraints = true,
     colors,
     valueField = "value",
-    height = 300
+    height = 300,
+    isPdf = false,
+    t = s => s
   } = _ref;
   const ref = React__default["default"].useRef();
   const {
@@ -50556,34 +50581,53 @@ function StackChart(_ref) {
       }));
     }
   }, [hoveredGroup]);
-  return /*#__PURE__*/jsxRuntime.jsxs(Style$g, _objectSpread2(_objectSpread2({}, isEmpty ? {
-    onMouseEnter: () => {
-      setHoveredGroup({
-        id: 0
-      });
-    },
-    onMouseLeave: () => {
-      setHoveredGroup(null);
-    },
-    onMouseMove: e => onMouseLeaveHandler(e, {}, 0)
-  } : {}), {}, {
-    className: formatClassname(["riskProfile", className]),
-    ref: ref,
-    style: {
-      height: "".concat(height, "px")
-    },
-    children: [typeof renderTooltip === "function" && !isEmpty ? hoveredGroup !== null ? renderTooltip({
-      mouseX,
-      mouseY,
-      item: hoveredGroup
-    }) : null : null, /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "timeline",
+  return /*#__PURE__*/jsxRuntime.jsxs(StyleWrapper, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(Style$g, _objectSpread2(_objectSpread2({}, isEmpty ? {
+      onMouseEnter: () => {
+        setHoveredGroup({
+          id: 0
+        });
+      },
+      onMouseLeave: () => {
+        setHoveredGroup(null);
+      },
+      onMouseMove: e => onMouseLeaveHandler(e, {}, 0)
+    } : {}), {}, {
+      className: formatClassname(["riskProfile", className]),
+      ref: ref,
       style: {
         height: "".concat(height, "px")
       },
-      children: content()
+      children: [typeof renderTooltip === "function" && !isEmpty ? hoveredGroup !== null ? renderTooltip({
+        mouseX,
+        mouseY,
+        item: hoveredGroup
+      }) : null : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "timeline",
+        style: {
+          height: "".concat(height, "px")
+        },
+        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);
+      })
     })]
-  }));
+  });
 }
 
 const _excluded$3 = ["data", "xFieldKey", "yFieldKey", "seriesField", "renderTooltipContent", "tooltipConfig", "animated", "color", "formattedYAxis", "formattedXAxis", "fillOpacity", "height", "t", "isPdf", "extraLegendConfig", "width"];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.320",
+	"version": "0.6.322",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Charts/StackChart/StackChart.stories.jsx

@@ -417,6 +417,7 @@ export const WithCustomObject = {
 			social: "#864dd7",
 			environmental: "#f9b836",
 		},
+		isPdf: true,
 	},
 	render: (args) => {
 		return <StackChart {...args} />;

package/src/@daf/core/components/Charts/StackChart/classes.js

@@ -4,7 +4,6 @@ export const Style = styled.div`
 		display: flex;
 		justify-content: space-between;
 		align-items: space-between;
-		${"" /* height: ${props => props.height || '300px'}; */}
 
 		.weekDay {
 			width: 16px;
@@ -24,7 +23,6 @@ export const Style = styled.div`
 				overflow: hidden;
 				.event {
 					width: 100%;
-					${"" /* background: blue; */}
 					border-radius: 2px;
 					z-index: 1;
 					margin-top: 2px;
@@ -52,6 +50,31 @@ export const Style = styled.div`
 	}
 `;
 
+export const StyleWrapper = styled.div`
+	.legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 12px;
+		margin-top: 12px;
+		font-size: 12px;
+		color: #333;
+		justify-content: center;
+
+		.legend-item {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+
+			.legend-color {
+				width: 12px;
+				height: 12px;
+				border-radius: 2px;
+				display: inline-block;
+			}
+		}
+	}
+`;
+
 export const EventsTooltip = styled.div`
 	width: 200px;
 	display: flex;

package/src/@daf/core/components/Charts/StackChart/index.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Style } from "./classes.js";
+import { Style, StyleWrapper } from "./classes.js";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 import { Popover, theme } from "antd";
 import { renderTooltipJsx as renderDafTooltip } from "../../../../utils/tooltip.js";
@@ -83,6 +83,8 @@ export default function StackChart({
 	colors,
 	valueField = "value",
 	height = 300,
+	isPdf = false,
+	t = (s) => s,
 }) {
 	const ref = React.useRef();
 	const { token } = useToken();
@@ -228,6 +230,7 @@ export default function StackChart({
 	);
 
 	return (
+		<StyleWrapper>
 		<Style
 			{...(isEmpty
 				? {
@@ -255,5 +258,19 @@ export default function StackChart({
 				{content()}
 			</div>
 		</Style>
+			{isPdf && (
+				<div className="legend">
+					{Object.entries(seriesColors).map(([series, color]) => (
+						<div key={series} className="legend-item">
+							<span
+								className="legend-color"
+								style={{ backgroundColor: color || token.colorPrimary7 }}
+							/>
+							<span className="legend-label">{t(series)}</span>
+						</div>
+					))}
+				</div>
+			)}
+		</StyleWrapper>
 	);
 }

package/src/@daf/core/components/Header/hook.js

@@ -150,6 +150,8 @@ export const useHeader = ({
 		[mainContWidth, buttonContWidth],
 	);
 
+	console.log(buttonContWidth, mainContWidth, maxWidth);
+
 	const renderMainCont = () => (
 		<div>
 			<div className={formatClassname(["main-cont flex", className])} ref={mainCont}>
@@ -243,10 +245,10 @@ export const useHeader = ({
 				</div>
 
 				{addedHeaderFirst ? (
-					<div className="flex gap-2">
+					<div className="flex gap-2" ref={buttonCont}>
 						{addedHeader}
 						{hasButtons && (
-							<div ref={buttonCont}>
+							<div>
 								<Buttons
 									extraButtons={extraButtons}
 									actionButtons={actionButtons}
@@ -255,9 +257,9 @@ export const useHeader = ({
 						)}
 					</div>
 				) : (
-					<div className="flex gap-2">
+					<div className="flex gap-2" ref={buttonCont}>
 						{hasButtons && (
-							<div ref={buttonCont}>
+							<div>
 								<Buttons
 									extraButtons={extraButtons}
 									actionButtons={actionButtons}