datastake-daf 0.6.309 → 0.6.310

package/dist/components/index.js

@@ -45782,7 +45782,9 @@ const Chart = _ref => {
     mouseXOffset = 30,
     mouseYOffset = 50,
     children = null,
-    legend
+    legend,
+    isPdf = false,
+    isPercentage = false
   } = _ref;
   const [hoveredGroup, setHoveredGroup] = React.useState(null);
   const svgRef = React.useRef();
@@ -45814,17 +45816,17 @@ const Chart = _ref => {
     }
   }, [svgRef, containerRef, hoveredGroup, mouseLocked]);
   const legendConfig = React.useMemo(() => {
-    if (legend === undefined || legend === null || legend === false) {
-      return null;
-    }
-    if (legend === true) {
-      return {};
+    if (legend === false || legend === null) {
+      return isPdf ? {} : null;
     }
     if (typeof legend === 'object') {
       return legend;
     }
+    if (legend === true || legend === undefined || isPdf) {
+      return {};
+    }
     return null;
-  }, [legend]);
+  }, [legend, isPdf]);
   const legendItems = React.useMemo(() => {
     const items = Array.isArray(data) ? data : [];
     if (!legendConfig) {
@@ -45840,46 +45842,61 @@ const Chart = _ref => {
   }, [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]);

package/package.json

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

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

@@ -39,6 +39,8 @@ export const Primary = {
 				"color": "#C04B19"
 			}
 		],
-		legend: true,
+		legend: false,
+		isPdf: true,
+		isPercentage: true,
 	},
 };

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

@@ -17,6 +17,8 @@ const Chart = ({
   mouseYOffset = 50,
   children = null,
   legend,
+  isPdf = false,
+  isPercentage = false,
 }) => {
   const [hoveredGroup, setHoveredGroup] = useState(null);
   const svgRef = useRef();
@@ -56,21 +58,22 @@ const Chart = ({
   }, [svgRef, containerRef, hoveredGroup, mouseLocked]);
 
   const legendConfig = useMemo(() => {
-    if (legend === undefined || legend === null || legend === false) {
-      return null;
+    if (legend === false || legend === null) {
+      return isPdf ? {} : null;
     }
-
-    if (legend === true) {
-      return {};
-    }
-
+  
     if (typeof legend === 'object') {
       return legend;
     }
-
+  
+    if (legend === true || legend === undefined || isPdf) {
+      return {};
+    }
+  
     return null;
-  }, [legend]);
-
+  }, [legend, isPdf]);
+  
+  
   const legendItems = useMemo(() => {
     const items = Array.isArray(data) ? data : [];
 
@@ -91,62 +94,80 @@ const Chart = ({
 
   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>
       );
     });