datastake-daf 0.6.308 → 0.6.310

package/package.json

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

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

@@ -72,11 +72,15 @@ const AreaChart = ({
 	formattedXAxis = (s) => s,
 	fillOpacity = 0.7,
 	height,
+	t = (s) => s,
+	isPdf = false,
+	extraLegendConfig = {},
 	...rest
 }) => {
 	const containerRef = useRef(null);
 	const chartRef = useRef(null);
 	const { token } = useToken();
+	const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
 
 	useEffect(() => {
 		if (!containerRef.current) {
@@ -117,7 +121,15 @@ const AreaChart = ({
 			areaStyle: {
 				fillOpacity,
 			},
-			legend: false,
+			legend: isPdf
+			? {
+				itemName: {
+				  formatter: (text) => t(text),
+				},
+				position: 'bottom',
+				...extraLegendConfig,
+			  }
+			: hasLegendConfig || false,
 			line: false,
 			...rest,
 		};

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

@@ -84,11 +84,16 @@ export default function BarChart({
 	formattedXAxis = (s) => s,
 	color,
 	height,
+	t = (s) => s,
+	isPdf = false,
+	extraLegendConfig = {},
+	...rest
 }) {
 	const containerRef = React.useRef(null);
 	const chartRef = React.useRef(null);
 	const { token } = useToken();
-
+	const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
+	
 	React.useEffect(() => {
 		if (!containerRef.current) {
 			return;
@@ -129,7 +134,15 @@ export default function BarChart({
 			isStack,
 			color: color || token.colorPrimary7,
 			seriesField,
-			legend: false,
+			legend: isPdf
+			? {
+				itemName: {
+				  formatter: (text) => t(text),
+				},
+				position: 'bottom',
+				...extraLegendConfig,
+			  }
+			: hasLegendConfig || false,
 			animation: animated,
 		};
 

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

@@ -232,20 +232,23 @@ export const Percentage = {
 	},
 };
 
-const colorConfig = {
+export const colorConfig = {
 	governance: {
-		evaluation: "#4b6ae7",
-		improvement: "#96b1ff",
+		improvement: "#4b6ae7",
+		evaluation: "#96b1ff",
+		negative: "#F04438",
 	},
 	social: {
-		evaluation: "#864dd7",
-		improvement: "#bf92ef",
+		improvement: "#864dd7",
+		evaluation: "#bf92ef",
+		negative: "#F04438",
 	},
 	environmental: {
-		evaluation: "#f9b836",
-		improvement: "#fedb7e",
+		improvement: "#f9b836",
+		evaluation: "#fedb7e",
+		negative: "#F04438",
 	},
-};
+}
 
 export const functionColor = {
 	name: "Function Color",
@@ -301,3 +304,160 @@ export const functionColor = {
 		},
 	},
 };
+
+const getChartColor = (chartData, currentSelectedOption) => (s) => {
+	const all = chartData;
+	const [category, type] = s.groupBy.split("-");
+	const evaluationItem = all.find(
+		(item) => item.groupBy === `${category}-Baseline`,
+	);
+	const improvementItem = all.find(
+		(item) => item.groupBy === `${category}-Improvement`,
+	);
+	const isImprovementNegative =
+		improvementItem?.total - evaluationItem?.evaluationScore < 0;
+
+	if (currentSelectedOption === "aggregate") {
+		return (
+			(isImprovementNegative && type === "Improvement"
+				? colorConfig?.[category].negative
+				: colorConfig?.[category]?.[
+						type === "Baseline" ? "evaluation" : type.toLowerCase()
+				]) || "#BFBFBF"
+		);
+	} else {
+		return (
+			(isImprovementNegative && type === "Improvement"
+				? colorConfig?.[
+						currentSelectedOption.includes("governance")
+							? "governance"
+							: currentSelectedOption
+				].negative
+				: colorConfig?.[
+						currentSelectedOption.includes("governance")
+							? "governance"
+							: currentSelectedOption
+				]?.[type === "Baseline" ? "evaluation" : type.toLowerCase()]) ||
+			"#BFBFBF"
+		);
+	}
+};
+const graphData = [
+	{
+		"label": "Governance & Organisational Capacity",
+		"type": "Improvement",
+		"combinedKey": "governance-Improvement",
+		"groupBy": "governance-Improvement",
+		"value": 31,
+		"improvementScore": -31,
+		"evaluationScore": 76,
+		"color": "#F04438",
+		"total": 45,
+		"isNa": false
+	},
+	{
+		"label": "Governance & Organisational Capacity",
+		"type": "Baseline",
+		"combinedKey": "governance-Baseline",
+		"groupBy": "governance-Baseline",
+		"value": 45,
+		"evaluationScore": 76,
+		"color": "#96b1ff",
+		"total": 45,
+		"isNa": false
+	},
+	{
+		"label": "Social",
+		"type": "Improvement",
+		"combinedKey": "social-Improvement",
+		"groupBy": "social-Improvement",
+		"value": 61,
+		"improvementScore": -61,
+		"evaluationScore": 94,
+		"color": "#F04438",
+		"total": 33,
+		"isNa": false
+	},
+	{
+		"label": "Social",
+		"type": "Baseline",
+		"combinedKey": "social-Baseline",
+		"groupBy": "social-Baseline",
+		"value": 33,
+		"evaluationScore": 94,
+		"color": "#bf92ef",
+		"total": 33,
+		"isNa": false
+	},
+	{
+		"label": "Environmental",
+		"type": "Improvement",
+		"combinedKey": "environmental-Improvement",
+		"groupBy": "environmental-Improvement",
+		"value": 0,
+		"improvementScore": 0,
+		"evaluationScore": 100,
+		"color": "#f9b836",
+		"total": 100,
+		"isNa": false
+	},
+	{
+		"label": "Environmental",
+		"type": "Baseline",
+		"combinedKey": "environmental-Baseline",
+		"groupBy": "environmental-Baseline",
+		"value": 100,
+		"evaluationScore": 100,
+		"color": "#fedb7e",
+		"total": 100,
+		"isNa": false
+	}
+]
+
+const renderTooltipContent = (title, data) => {
+	const baselineItem = data.find((item) => item?.data?.type === "Baseline");
+	const improvementItem = data.find((item) => item?.data?.type === "Improvement");
+	const baseline = Number(baselineItem?.data?.evaluationScore) || 0;
+	const improvement = Number(improvementItem?.data?.improvementScore);
+	const total = Math.min(100, baseline + improvement);
+
+	return {
+		title,
+		items: [
+			{
+				label: "sbg::current",
+				value: improvementItem?.data?.isNa ? "N/A" : `${total}%`,
+			},
+			{
+				label: improvement < 0 ? "sbg::deterioration" : "sbg::improvement",
+				value: improvementItem?.data?.isNa ? "N/A" : `${improvement}%`,
+				color: improvementItem?.data?.color || "green",
+			},
+			{
+				label: "sbg::baseline",
+				value: baselineItem?.data?.isNa ? "N/A" : `${baseline}%`,
+				color: baselineItem?.data?.color || "blue",
+			},
+		],
+	};
+}
+
+export const Pdf = {
+	name: "Pdf",
+	args: {
+		data: graphData,
+		isPdf: true,
+		xFieldKey: "label",
+		yFieldKey: "value",
+		isStack: true,
+        seriesField:"groupBy",
+        groupField:"combinedKey",
+		color: getChartColor(graphData, "aggregate"),
+		renderTooltipContent: renderTooltipContent,
+		showBackground: true,
+		isPercentage: true,
+	},
+	render: (args) => {
+		return <ColumnChart {...args} />;
+	},
+}

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

@@ -86,10 +86,15 @@ export default function ColumnChart({
 	color,
 	height,
 	groupField,
+	t = (s) => s,
+	isPdf = false,
+	extraLegendConfig = {},
+	...rest
 }) {
 	const containerRef = React.useRef(null);
 	const chartRef = React.useRef(null);
 	const { token } = useToken();
+	const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
 
 	React.useEffect(() => {
 		if (!containerRef.current) {
@@ -137,7 +142,15 @@ export default function ColumnChart({
 						: formattedYAxis,
 				},
 			},
-			legend: false,
+			legend: isPdf
+			? {
+				itemName: {
+				  formatter: (text) => t(text),
+				},
+				position: 'bottom',
+				...extraLegendConfig,
+			  }
+			: hasLegendConfig || false,
 			// Add background pattern only when showBackground is true and isPercentage is true
 			...(showBackground && isPercentage && {
 				columnBackground: {

package/src/@daf/core/components/Charts/DonutPie/index.js

@@ -71,12 +71,16 @@ export default function DonutPie({
 	tooltipConfig = {},
 	meta,
 	animation = false,
+	t = (s) => s,
+	isPdf = false,
+	extraLegendConfig = {},
 	...rest
 }) {
 	const containerRef = useRef(null);
 	const chartRef = useRef(null);
 	const { token } = useToken();
-
+	const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
+	
 	// Memoize processed data for progress mode
 	const processedData = useMemo(() => {
 		if (!data || data.length === 0) {
@@ -108,7 +112,15 @@ export default function DonutPie({
 			color: color || [token.colorPrimary7, "#E8EDF3"],
 			radius,
 			innerRadius,
-			legend,
+			legend: isPdf
+			? {
+				itemName: {
+				  formatter: (text) => t(text),
+				},
+				position: 'bottom',
+				...extraLegendConfig,
+			  }
+			: hasLegendConfig || false,
 			label,
 			statistic,
 			tooltip: tooltipOption,

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

@@ -82,11 +82,16 @@ export default function LineChart({
 	isPercentage = false,
 	height,
 	autoHideXLabel = true,
+	t = (s) => s,
+	isPdf = false,
+	extraLegendConfig = {},
+	...rest
 }) {
 	const containerRef = React.useRef(null);
 	const chartRef = React.useRef(null);
 	const { token } = useToken();
-
+	const hasLegendConfig = Object.keys(extraLegendConfig).length > 0;
+	
 	React.useEffect(() => {
 		if (!containerRef.current) {
 			return;
@@ -140,7 +145,15 @@ export default function LineChart({
 					fillOpacity: isArea ? 0.15 : 0,
 				},
 			},
-			legend: false,
+			legend: isPdf
+			? {
+				itemName: {
+				  formatter: (text) => t(text),
+				},
+				position: 'bottom',
+				...extraLegendConfig,
+			  }
+			: hasLegendConfig || false,
 		};
 
 		if (!chartRef.current) {
@@ -165,6 +178,9 @@ export default function LineChart({
 		isPercentage,
 		renderTooltipContent,
 		tooltipConfig,
+		isPdf,
+		extraLegendConfig,
+		t,
 	]);
 
 	React.useEffect(() => {

package/src/@daf/core/components/Charts/PieChart/PieChart.stories.js

@@ -20,20 +20,27 @@ export const Primary = {
 		data: [
 			{
 				"percent": 0.8333333333333334,
+				"label": "Label 1",
 				"color": "#F5C2AC"
 			},
 			{
 				"percent": 0.06666666666666667,
+				"label": "Label 2",
 				"color": "#F0A888"
 			},
 			{
 				"percent": 0.06666666666666667,
+				"label": "Label 3",
 				"color": "#DF571E"
 			},
 			{
 				"percent": 0.03333333333333333,
+				"label": "Label 4",
 				"color": "#C04B19"
 			}
 		],
+		legend: false,
+		isPdf: true,
+		isPercentage: true,
 	},
 };

package/src/@daf/core/components/Charts/PieChart/chart.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React, { useCallback, useMemo, useRef, useState, Fragment } from 'react';
 import Tooltip from './tooltip.jsx';
-import { ChartStyle } from './style.js';
+import { ChartStyle, LegendStyle } from './style.js';
 
 const Chart = ({
   data = [],
@@ -16,6 +16,9 @@ const Chart = ({
   mouseXOffset = 30,
   mouseYOffset = 50,
   children = null,
+  legend,
+  isPdf = false,
+  isPercentage = false,
 }) => {
   const [hoveredGroup, setHoveredGroup] = useState(null);
   const svgRef = useRef();
@@ -50,68 +53,121 @@ const Chart = ({
     setMouseX(x);
 
     if (hoveredGroup === null) {
-      setHoveredGroup({ ...hG, id });
+      setHoveredGroup({ ...hG, id, fromLegend: false });
     }
   }, [svgRef, containerRef, hoveredGroup, mouseLocked]);
 
+  const legendConfig = 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 = useMemo(() => {
+    const items = Array.isArray(data) ? data : [];
+
+    if (!legendConfig) {
+      return [];
+    }
+
+    const { itemName } = legendConfig;
+    const getName = typeof itemName?.formatter === 'function'
+      ? (item, index) => itemName.formatter(item.name || item.label || `Item ${index + 1}`, item, index)
+      : (item, index) => item.name || item.label || `Item ${index + 1}`;
+
+    return items.map((item, index) => ({
+      ...item,
+      label: getName(item, index),
+    }));
+  }, [data, legendConfig]);
+
   const dataToShow = 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 ${startX} ${startY}`,
         `A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY}`,
         `L 0 0`,
       ].join(' ');
-
-      const borderPathData = [
-        `M ${borderStartX} ${borderStartY}`,
-        `A 1 1 0 0 1 ${borderEndX} ${borderEndY}`,
-        `L 0 0`,
-      ].join(' ');
-
+    
       return (
         <Fragment key={i.toString()}>
           <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
+                ? hoveredGroup === null
+                  ? 1
+                  : hoveredGroup.id === i
+                  ? 1
+                  : 0.4
                 : 1,
             }}
             onMouseEnter={() => {
-              if (mouseLocked) {
-                return;
+              if (!mouseLocked) {
+                setHoveredGroup({ ...d, id: i });
               }
-
-              setHoveredGroup({ ...d, id: i })
             }}
             onMouseLeave={() => {
-              if (mouseLocked) {
-                return;
+              if (!mouseLocked) {
+                setHoveredGroup(null);
               }
-
-              setHoveredGroup(null)
             }}
             onMouseMove={(e) => onMouseLeaveHandler(e, d, i)}
             onClick={() => setMouseLocked((prev) => !prev)}
           />
-          <path
-            d={borderPathData}
-            fill="white"
-          />
+    
+          {/* White border if needed */}
+          <path d={pathData} fill="none" stroke="white" strokeWidth="0.001" />
+    
+          {/* Label */}
+          {isPdf ? <text
+            x={labelX * 0.6}
+            y={labelY * 0.6}
+            textAnchor="middle"
+            dominantBaseline="middle"
+            fontSize="0.1"
+            fill="#000"
+            transform={`rotate(${getRotationAngle(midPercent)}, ${labelX * 0.6}, ${labelY * 0.6})`}
+          >
+            {d.percent ?  isPercentage ? `${Math.round(d.percent * 100)}%` : d.percent : d.label}
+          </text> : null}
         </Fragment>
       );
     });
@@ -163,6 +219,61 @@ const Chart = ({
         {dataToShow}
       </svg>
       {tooltip}
+      {!!legendConfig && legendItems.length > 0 && (
+        <LegendStyle className={legendConfig?.className} data-position={legendConfig?.position || 'bottom'}>
+          {legendItems.map((item, index) => {
+            const markerStyle = legendConfig?.marker || {};
+
+            return (
+              <li
+                key={item.id ?? index}
+                className={item.className}
+                onMouseEnter={() => {
+                  if (mouseLocked) {
+                    return;
+                  }
+
+                  setHoveredGroup({ ...item, id: index, fromLegend: true });
+                }}
+                onMouseLeave={() => {
+                  if (mouseLocked) {
+                    return;
+                  }
+
+                  setHoveredGroup(null);
+                }}
+                onClick={() => {
+                  if (!changeOpacityOnHover) {
+                    return;
+                  }
+
+                  if (hoveredGroup?.id === index && hoveredGroup?.fromLegend) {
+                    setHoveredGroup(null);
+                    setMouseLocked(false);
+                    return;
+                  }
+
+                  setHoveredGroup({ ...item, id: index, fromLegend: true });
+                  setMouseLocked((prev) => !prev);
+                }}
+              >
+                <span
+                  className="legend-marker"
+                  style={{
+                    backgroundColor: item.color,
+                    width: markerStyle?.size || 12,
+                    height: markerStyle?.size || 12,
+                    borderRadius: markerStyle?.shape === 'square' ? 2 : '50%',
+                    border: markerStyle?.style === 'line' ? `2px solid ${item.color}` : undefined,
+                    background: markerStyle?.style === 'line' ? 'transparent' : item.color,
+                  }}
+                />
+                <span>{item.label}</span>
+              </li>
+            );
+          })}
+        </LegendStyle>
+      )}
       {children}
     </ChartStyle>
   );

package/src/@daf/core/components/Charts/PieChart/style.js

@@ -197,4 +197,29 @@ export const TooltipStyle = styled.div`
 
 `;
 
+export const LegendStyle = styled.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%;
+    }
+  }
+`;
+
 export default Style;

package/src/@daf/core/components/Dashboard/Widget/WidgetImage/index.jsx

@@ -8,6 +8,7 @@ export default function ImageWidget({
 	description,
 	imgAlt,
 	noDescriptionText,
+	isPdf = false,
 	...props
 }) {
 	return (
@@ -42,7 +43,7 @@ export default function ImageWidget({
 
 				<div
 					style={{
-						maxHeight: "195px",
+						maxHeight: isPdf ? "100%" : "195px",
 						paddingRight: "20px",
 						overflowY: "auto",
 						scrollbarWidth: "thin",

package/src/@daf/core/components/Dashboard/Widget/WidgetImage/index.stories.jsx

@@ -23,6 +23,7 @@ export const Primary = {
 		image: "https://picsum.photos/200/300",
 		description:
 			"This is a description of the image widget. It can be long and scrollable. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+		isPdf: true,
 	},
 };