@banyan_cloud/roots 2.0.14 → 2.0.16

package/dist/esm/index.js

@@ -16177,8 +16177,8 @@ var CapsulePolarChart = function CapsulePolarChart(_ref) {
   });
 };
 
-var css$12 = ".BasePieChart_module_root__1ce331ae {\n  width: 100%;\n  contain-intrinsic-height: 90%;\n  font-family: Poppins !important;\n}\n.BasePieChart_module_root__1ce331ae > canvas {\n  width: -moz-fit-content !important;\n  width: fit-content !important;\n}";
-var modules_c20882aa = {"root":"BasePieChart_module_root__1ce331ae"};
+var css$12 = ".BasePieChart_module_root__35ee6501 {\n  width: 100%;\n  contain-intrinsic-height: 90%;\n  font-family: Poppins !important;\n}\n.BasePieChart_module_root__35ee6501 > canvas {\n  width: -moz-fit-content !important;\n  width: fit-content !important;\n}\n\n.BasePieChart_module_legend__35ee6501 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: 0.625rem;\n}\n.BasePieChart_module_legend__35ee6501 > span {\n  width: 5rem !important;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  display: inline-block;\n}";
+var modules_c20882aa = {"root":"BasePieChart_module_root__35ee6501","legend":"BasePieChart_module_legend__35ee6501"};
 n(css$12,{});
 
 var css$11 = ".Skeleton_module_root__ecbd3e3d {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n}\n.Skeleton_module_root__ecbd3e3d > .Skeleton_module_outer__ecbd3e3d,\n.Skeleton_module_root__ecbd3e3d > .Skeleton_module_inner__ecbd3e3d {\n  max-width: 100%;\n  max-height: 100%;\n}\n.Skeleton_module_root__ecbd3e3d > .Skeleton_module_inner__ecbd3e3d {\n  position: absolute;\n  opacity: 1;\n}\n.Skeleton_module_root__ecbd3e3d span.Skeleton_module_line__ecbd3e3d {\n  opacity: 1;\n  height: 0.5rem;\n  position: absolute;\n  transform-origin: left;\n}\n.Skeleton_module_root__ecbd3e3d span.Skeleton_module_line__ecbd3e3d:nth-last-of-type(1) {\n  transform: translateX(3.25rem) rotate(45deg);\n}\n.Skeleton_module_root__ecbd3e3d span.Skeleton_module_line__ecbd3e3d:nth-last-of-type(2) {\n  transform: translateX(3.25rem) rotate(-75deg);\n}\n.Skeleton_module_root__ecbd3e3d span.Skeleton_module_line__ecbd3e3d:nth-last-of-type(3) {\n  transform: translateX(3.25rem) rotate(-10deg);\n}\n.Skeleton_module_root__ecbd3e3d.Skeleton_module_lightTheme__ecbd3e3d > .Skeleton_module_inner__ecbd3e3d {\n  background: var(--white);\n}\n.Skeleton_module_root__ecbd3e3d.Skeleton_module_lightTheme__ecbd3e3d span.Skeleton_module_line__ecbd3e3d {\n  background: var(--white);\n}\n.Skeleton_module_root__ecbd3e3d.Skeleton_module_darkTheme__ecbd3e3d > .Skeleton_module_inner__ecbd3e3d {\n  background: var(--menu-black);\n}\n.Skeleton_module_root__ecbd3e3d.Skeleton_module_darkTheme__ecbd3e3d span.Skeleton_module_line__ecbd3e3d {\n  background: var(--menu-black);\n}";
@@ -16221,7 +16221,7 @@ var ChartSkeleton$1 = function ChartSkeleton(_ref) {
 
 Chart.register(ArcElement, Tooltip$1, Legend, Title$1);
 var BasePieChart = function BasePieChart(props) {
-  var _seriesData$metaData, _seriesData$chartData, _seriesData$chartData4, _doughnut$, _doughnut$2, _chartOptions$respons, _legend$display, _tooltip$borderWidth, _tooltip$callbacks, _tooltip$bodySpacing, _tooltip$displayColor, _tooltip$colorBoxWidt, _tooltip$colorBoxHeig, _tooltip$usePointStyl, _tooltip$bodyFont$tit, _tooltip$bodyFont, _tooltip$bodyFont$col, _tooltip$bodyFont2;
+  var _seriesData$metaData, _seriesData$chartData, _seriesData$metaData2, _seriesData$chartData2, _seriesData$chartData5, _doughnut$, _doughnut$2, _chartOptions$respons, _legend$display, _tooltip$borderWidth, _tooltip$callbacks, _tooltip$bodySpacing, _tooltip$displayColor, _tooltip$colorBoxWidt, _tooltip$colorBoxHeig, _tooltip$usePointStyl, _tooltip$bodyFont$tit, _tooltip$bodyFont, _tooltip$bodyFont$col, _tooltip$bodyFont2;
   var loading = props.loading,
     title = props.title,
     tittleSize = props.tittleSize,
@@ -16254,7 +16254,7 @@ var BasePieChart = function BasePieChart(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     hoveredIndex = _useState4[0],
     setHoveredIndex = _useState4[1]; // Track the hovered legend index
-  var legendRef = useRef(null); // Reference to hold the custom legend
+  useRef(null); // Reference to hold the custom legend
 
   if (loading || fallback) {
     return /*#__PURE__*/jsx(ChartSkeleton$1, {
@@ -16276,33 +16276,48 @@ var BasePieChart = function BasePieChart(props) {
       return newIndices;
     });
   }, []);
+  var labels = seriesData !== null && seriesData !== void 0 && (_seriesData$metaData = seriesData.metaData) !== null && _seriesData$metaData !== void 0 && _seriesData$metaData.keyData ? Object.keys(seriesData.chartData).map(function (key) {
+    return seriesData.metaData.keyData[key];
+  }) : [];
+  var values = Object.keys((_seriesData$chartData = seriesData === null || seriesData === void 0 ? void 0 : seriesData.chartData) !== null && _seriesData$chartData !== void 0 ? _seriesData$chartData : {}).map(function (key) {
+    return seriesData.chartData[key];
+  });
+  var legendColors = seriesOption ? seriesOption.map(function (option) {
+    var _option$itemStyle;
+    var color = option === null || option === void 0 || (_option$itemStyle = option.itemStyle) === null || _option$itemStyle === void 0 ? void 0 : _option$itemStyle.color;
+    if (typeof color !== 'string' || !color.startsWith('linear-gradient')) {
+      return color;
+    }
+    var stops = color.match(/#(?:[0-9a-fA-F]{3}){1,2}/g);
+    return (stops === null || stops === void 0 ? void 0 : stops[0]) || '#000';
+  }) : [];
 
   // Data for the Pie Chart
   var data = {
-    labels: seriesData !== null && seriesData !== void 0 && (_seriesData$metaData = seriesData.metaData) !== null && _seriesData$metaData !== void 0 && _seriesData$metaData.keyData ? Object.keys(seriesData.chartData).map(function (key) {
+    labels: seriesData !== null && seriesData !== void 0 && (_seriesData$metaData2 = seriesData.metaData) !== null && _seriesData$metaData2 !== void 0 && _seriesData$metaData2.keyData ? Object.keys(seriesData.chartData).map(function (key) {
       return seriesData.metaData.keyData[key];
     }) : [],
     datasets: [_objectSpread2({
-      data: Object.keys((_seriesData$chartData = seriesData === null || seriesData === void 0 ? void 0 : seriesData.chartData) !== null && _seriesData$chartData !== void 0 ? _seriesData$chartData : {}).map(function (key) {
-        var _seriesData$chartData2;
-        return seriesData === null || seriesData === void 0 || (_seriesData$chartData2 = seriesData.chartData) === null || _seriesData$chartData2 === void 0 ? void 0 : _seriesData$chartData2[key];
+      data: Object.keys((_seriesData$chartData2 = seriesData === null || seriesData === void 0 ? void 0 : seriesData.chartData) !== null && _seriesData$chartData2 !== void 0 ? _seriesData$chartData2 : {}).map(function (key) {
+        var _seriesData$chartData3;
+        return seriesData === null || seriesData === void 0 || (_seriesData$chartData3 = seriesData.chartData) === null || _seriesData$chartData3 === void 0 ? void 0 : _seriesData$chartData3[key];
       }),
       backgroundColor: function backgroundColor(ctx) {
-        var _seriesData$chartData3;
+        var _seriesData$chartData4;
         return seriesOption ? seriesOption.map(function (option, index) {
-          var _option$itemStyle;
+          var _option$itemStyle2;
           if (hoveredIndex !== null && hoveredIndex !== index) {
             return '#D3D3D3';
           }
           if (excludedIndices.includes(index)) {
             return '#D3D3D3';
           }
-          var color = option === null || option === void 0 || (_option$itemStyle = option.itemStyle) === null || _option$itemStyle === void 0 ? void 0 : _option$itemStyle.color;
+          var color = option === null || option === void 0 || (_option$itemStyle2 = option.itemStyle) === null || _option$itemStyle2 === void 0 ? void 0 : _option$itemStyle2.color;
           if (typeof color === 'string' && color.startsWith('linear-gradient')) {
             return getColorGradient(ctx, color);
           }
           return color || '#000'; // Fallback solid color
-        }) : Object.keys((_seriesData$chartData3 = seriesData === null || seriesData === void 0 ? void 0 : seriesData.chartData) !== null && _seriesData$chartData3 !== void 0 ? _seriesData$chartData3 : {}).map(function (_, index) {
+        }) : Object.keys((_seriesData$chartData4 = seriesData === null || seriesData === void 0 ? void 0 : seriesData.chartData) !== null && _seriesData$chartData4 !== void 0 ? _seriesData$chartData4 : {}).map(function (_, index) {
           var defaultColors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'];
           if (hoveredIndex !== null && hoveredIndex !== index) {
             return '#D3D3D3';
@@ -16313,7 +16328,7 @@ var BasePieChart = function BasePieChart(props) {
       borderColor: seriesOption ? seriesOption.map(function (option, index) {
         return excludedIndices.includes(index) ? '#D3D3D3' // Grey for excluded items
         : option.itemStyle.color; // Normal color for other borders
-      }) : Object.keys((_seriesData$chartData4 = seriesData === null || seriesData === void 0 ? void 0 : seriesData.chartData) !== null && _seriesData$chartData4 !== void 0 ? _seriesData$chartData4 : {}).map(function (_, index) {
+      }) : Object.keys((_seriesData$chartData5 = seriesData === null || seriesData === void 0 ? void 0 : seriesData.chartData) !== null && _seriesData$chartData5 !== void 0 ? _seriesData$chartData5 : {}).map(function (_, index) {
         var defaultColors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'];
         return excludedIndices.includes(index) ? '#D3D3D3' // Grey for excluded items
         : defaultColors[index % defaultColors.length]; // Normal color for other borders
@@ -16531,62 +16546,6 @@ var BasePieChart = function BasePieChart(props) {
       ctx.restore();
     }
   };
-  var legendColors = seriesOption ? seriesOption.map(function (option) {
-    var _option$itemStyle2;
-    var color = option === null || option === void 0 || (_option$itemStyle2 = option.itemStyle) === null || _option$itemStyle2 === void 0 ? void 0 : _option$itemStyle2.color;
-    if (typeof color !== 'string' || !color.startsWith('linear-gradient')) {
-      return color; // return as-is if not a gradient
-    }
-    var colorStops = color.match(/#(?:[0-9a-fA-F]{3}){1,2}/g);
-
-    // Return the first color stop as fallback
-    return (colorStops === null || colorStops === void 0 ? void 0 : colorStops[0]) || '#000'; // Fallback to black
-  }) : [];
-  var customLegendPlugin = {
-    id: 'customLegend',
-    afterUpdate: function afterUpdate(chart) {
-      var ul = legendRef.current;
-      while (ul !== null && ul !== void 0 && ul.firstChild) {
-        ul.firstChild.remove();
-      }
-      chart.data.labels.forEach(function (label, index) {
-        var li = document.createElement('li');
-        li.style.display = 'flex';
-        li.style.alignItems = 'center';
-        li.style.cursor = 'pointer';
-
-        // Handle click for excluding/un-excluding slices
-        li.onclick = function (event) {
-          var legendItem = {
-            index: index
-          }; // Simulate legend item
-          handleLegendClick(event, legendItem); // Handle click
-          handleHover(index); // Set hover on legend click
-          chart.update('none'); // Update the chart without animation
-        };
-
-        // Handle hover on the legend item
-        li.onmouseenter = function () {
-          handleHover(index); // Set hover on legend hover
-          chart.update('none'); // Update the chart without animation
-        };
-
-        // Handle leave event to remove hover effect
-        li.onmouseleave = function () {
-          setHoveredIndex(null); // Reset hover index on leave
-          hoveredIndexRef.current = null;
-          chart.update('none'); // Update the chart without animation
-        };
-
-        // Apply grey color dynamically based on the hovered state
-        var isGreyedOut = hoveredIndexRef.current !== null && hoveredIndexRef.current !== index;
-        var displayColor = isGreyedOut ? '#D3D3D3' : legendColors[index];
-        var value = chart.data.datasets[0].data[index];
-        li.innerHTML = "\n\t\t\t\t\t<svg width=\"15\" height=\"15\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t<circle cx=\"15\" cy=\"15\" r=\"12\" stroke=\"".concat(displayColor, "\" stroke-width=\"6\"/>\n\t\t\t\t\t</svg>\n\t\t\t\t\t\n\t\t\t\t\t<span style=\"margin-left: 10px;\">\n\t\t\t\t\t\t<span>").concat(label, "</span>\n\t\t\t\t\t\t<span style=\"margin-left: 14px;\">").concat(value, "</span>\n\t\t\t\t\t</span>\n\t\t\t\t");
-        ul.appendChild(li);
-      });
-    }
-  };
   return /*#__PURE__*/jsxs("div", {
     className: classes(modules_c20882aa.root, className),
     onMouseLeave: function onMouseLeave() {
@@ -16604,10 +16563,70 @@ var BasePieChart = function BasePieChart(props) {
     children: [/*#__PURE__*/jsx(Pie, _objectSpread2({
       data: data,
       options: _objectSpread2({}, options),
-      plugins: [customLabel && centerTextPlugin, (legend === null || legend === void 0 ? void 0 : legend.icon) && (legend === null || legend === void 0 ? void 0 : legend.display) && customLegendPlugin].filter(Boolean)
+      plugins: [customLabel && centerTextPlugin].filter(Boolean)
     }, extra)), (legend === null || legend === void 0 ? void 0 : legend.icon) && (legend === null || legend === void 0 ? void 0 : legend.display) && /*#__PURE__*/jsx("ul", {
       style: _objectSpread2({}, legend === null || legend === void 0 ? void 0 : legend.legendStyles),
-      ref: legendRef
+      children: labels.map(function (label, index) {
+        var _legendColors$index, _legend$circle;
+        var value = values[index];
+        var color = hoveredIndex !== null && hoveredIndex !== index ? '#D3D3D3' : excludedIndices.includes(index) ? '#D3D3D3' : (_legendColors$index = legendColors[index]) !== null && _legendColors$index !== void 0 ? _legendColors$index : '#000';
+        return /*#__PURE__*/jsxs("li", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            cursor: 'pointer'
+          },
+          onClick: function onClick(e) {
+            handleLegendClick(e, {
+              index: index
+            });
+            handleHover(index);
+          },
+          onMouseEnter: function onMouseEnter() {
+            handleHover(index);
+          },
+          onMouseLeave: function onMouseLeave() {
+            setHoveredIndex(null);
+            hoveredIndexRef.current = null;
+          },
+          children: [((_legend$circle = legend === null || legend === void 0 ? void 0 : legend.circle) !== null && _legend$circle !== void 0 ? _legend$circle : true) && /*#__PURE__*/jsx("svg", {
+            width: "15",
+            height: "15",
+            viewBox: "0 0 30 30",
+            fill: "none",
+            children: /*#__PURE__*/jsx("circle", {
+              cx: "15",
+              cy: "15",
+              r: "12",
+              stroke: color,
+              strokeWidth: "6"
+            })
+          }), /*#__PURE__*/jsx("div", {
+            style: {
+              marginLeft: 10
+            },
+            children: legend !== null && legend !== void 0 && legend.customLabels ? legend === null || legend === void 0 ? void 0 : legend.customLabels({
+              label: label,
+              value: value,
+              index: index,
+              color: color
+            }) : /*#__PURE__*/jsxs("div", {
+              className: modules_c20882aa.legend,
+              children: [/*#__PURE__*/jsx("span", {
+                style: {
+                  color: '#333'
+                },
+                children: label
+              }), /*#__PURE__*/jsx("span", {
+                style: {
+                  marginLeft: 10
+                },
+                children: value
+              })]
+            })
+          })]
+        }, index);
+      })
     })]
   });
 };