impaktapps-design 0.2.87 → 0.2.89-alpha.400

package/dist/impaktapps-design.es.js

@@ -10461,46 +10461,32 @@ const ToolTip = ({
   left: left2,
   tooltipData
 }) => {
-  const {
-    TooltipInPortal
-  } = useTooltipInPortal({
+  useTooltipInPortal({
     detectBounds: true,
     scroll: true
   });
-  return /* @__PURE__ */ jsx(TooltipInPortal, {
+  return /* @__PURE__ */ jsx(Tooltip$1, {
     top: top2,
     left: left2,
+    style: style2 == null ? void 0 : style2.tooltipStyle,
     children: /* @__PURE__ */ jsxs("div", {
       style: {
-        minWidth: 60,
-        textAlign: "center",
-        background: "black",
-        padding: "10px",
-        boxShadow: "2px 2px 5px black",
-        color: "#6c5efb",
-        backgroundColor: "black",
-        ...style2 == null ? void 0 : style2.tooltipStyle,
-        margin: "-20px"
+        display: "flex",
+        alignItems: "center"
       },
       children: [/* @__PURE__ */ jsx("div", {
         style: {
-          padding: "4px 10px",
-          color: (style2 == null ? void 0 : style2.tooltipbackground) || "white",
-          borderRadius: "5px",
-          fontWeight: 700
-        },
-        children: tooltipData[0]
+          width: "12px",
+          height: "12px",
+          marginRight: "8px"
+        }
       }), /* @__PURE__ */ jsx("div", {
-        style: {
-          padding: "4px 10px",
-          borderRadius: "5px",
-          marginTop: "10px",
-          fontWeight: 700
-        },
-        children: tooltipData[1]
+        children: /* @__PURE__ */ jsx("strong", {
+          children: `${tooltipData[0]}: ${tooltipData[1]}`
+        })
       })]
     })
-  }, Math.random());
+  });
 };
 var _excluded$F = ["flexDirection", "alignItems", "margin", "display", "children"];
 function _extends$B() {
@@ -11409,7 +11395,7 @@ const Product1 = [
   }
 ];
 const finalDataProvider = (type2, value, theme) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t5, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t5, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G;
   switch (type2) {
     case "BarGraph":
     case "StackBarGraph":
@@ -11485,7 +11471,7 @@ const finalDataProvider = (type2, value, theme) => {
     case "PieGraph":
       return {
         main: {
-          data: ((_h = value == null ? void 0 : value.main) == null ? void 0 : _h.data) || [{ branch: "Kotak", value: 500 }, { branch: "SBI", value: 700 }, { branch: "HDFC", value: 900 }],
+          data: ((_h = value == null ? void 0 : value.main) == null ? void 0 : _h.data) && value.main.data.length > 0 ? (_i = value == null ? void 0 : value.main) == null ? void 0 : _i.data : [{ label: "Kotak", value: 500 }, { label: "SBI", value: 700 }, { label: "HDFC", value: 900 }],
           header: "Pie Graph",
           bottomLabel: "Name of Employe",
           leftLabel: "Value",
@@ -11499,7 +11485,7 @@ const finalDataProvider = (type2, value, theme) => {
             legendTitle: "Our Assests",
             direction: "row",
             align: "right",
-            ...(_i = value == null ? void 0 : value.main) == null ? void 0 : _i.legend
+            ...(_j = value == null ? void 0 : value.main) == null ? void 0 : _j.legend
           }
         },
         style: {
@@ -11509,7 +11495,7 @@ const finalDataProvider = (type2, value, theme) => {
             height: "310",
             borderRadius: "20px",
             padding: "10px 0 2px 0",
-            ...(_j = value == null ? void 0 : value.style) == null ? void 0 : _j.containerStyle
+            ...(_k = value == null ? void 0 : value.style) == null ? void 0 : _k.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -11520,17 +11506,21 @@ const finalDataProvider = (type2, value, theme) => {
             width: "100%",
             fontSize: "18px",
             color: theme.palette.text.primary,
-            ...(_k = value == null ? void 0 : value.style) == null ? void 0 : _k.headerStyle
+            ...(_l = value == null ? void 0 : value.style) == null ? void 0 : _l.headerStyle
           },
           tooltipStyle: {
-            ...(_l = value == null ? void 0 : value.style) == null ? void 0 : _l.tooltipStyle
+            minWidth: 80,
+            height: 20,
+            backgroundColor: "lightgrey",
+            color: "black",
+            ...(_m = value == null ? void 0 : value.style) == null ? void 0 : _m.tooltipStyle
           },
           labelStyle: {
             labelColor: theme.palette.text.primary,
             labelOffset: 45,
             leftLabelMargin: "70",
             topLabelMargin: "-40",
-            ...(_m = value == null ? void 0 : value.style) == null ? void 0 : _m.labelStyle
+            ...(_n = value == null ? void 0 : value.style) == null ? void 0 : _n.labelStyle
           },
           legendStyle: {
             legend: {
@@ -11543,14 +11533,14 @@ const finalDataProvider = (type2, value, theme) => {
               border: "1px solid rgba(255, 255, 255, 0.3)",
               borderRadius: " 8px",
               margin: "5px 5px",
-              ...(_o = (_n = value == null ? void 0 : value.style) == null ? void 0 : _n.legendStyle) == null ? void 0 : _o.legend
+              ...(_p = (_o = value == null ? void 0 : value.style) == null ? void 0 : _o.legendStyle) == null ? void 0 : _p.legend
             },
             legendTitle: {
               fontWeight: 500,
               marginBottom: "5px",
               fontFamily: "roboto",
               fontSize: "10px",
-              ...(_q = (_p = value == null ? void 0 : value.style) == null ? void 0 : _p.legendStyle) == null ? void 0 : _q.legendTitle
+              ...(_r = (_q = value == null ? void 0 : value.style) == null ? void 0 : _q.legendStyle) == null ? void 0 : _r.legendTitle
             }
           },
           pieStyle: {
@@ -11559,14 +11549,14 @@ const finalDataProvider = (type2, value, theme) => {
             innerRadius: 60,
             cornerRadius: 2,
             padAngle: 6e-3,
-            ...(_r = value == null ? void 0 : value.style) == null ? void 0 : _r.pieStyle
+            ...(_s = value == null ? void 0 : value.style) == null ? void 0 : _s.pieStyle
           }
         }
       };
     case "LineGraph":
       return {
         main: {
-          data: ((_s = value == null ? void 0 : value.main) == null ? void 0 : _s.data) || Product1,
+          data: ((_t5 = value == null ? void 0 : value.main) == null ? void 0 : _t5.data) || Product1,
           header: "Line Graph Dynamic",
           bottomLabel: "Name of Employe",
           leftLabel: "Value",
@@ -11584,7 +11574,7 @@ const finalDataProvider = (type2, value, theme) => {
             direction: "row",
             align: "right",
             colorRectWidth: 20,
-            ...(_t5 = value == null ? void 0 : value.main) == null ? void 0 : _t5.legend
+            ...(_u = value == null ? void 0 : value.main) == null ? void 0 : _u.legend
           }
         },
         style: {
@@ -11594,7 +11584,7 @@ const finalDataProvider = (type2, value, theme) => {
             height: "300",
             borderRadius: "20px",
             padding: "10px 0 2px 0",
-            ...(_u = value == null ? void 0 : value.style) == null ? void 0 : _u.containerStyle
+            ...(_v = value == null ? void 0 : value.style) == null ? void 0 : _v.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -11605,35 +11595,35 @@ const finalDataProvider = (type2, value, theme) => {
             width: "100%",
             fontSize: "18px",
             color: theme.palette.text.primary,
-            ...(_v = value == null ? void 0 : value.style) == null ? void 0 : _v.headerStyle
+            ...(_w = value == null ? void 0 : value.style) == null ? void 0 : _w.headerStyle
           },
           labelStyle: {
             labelColor: theme.palette.text.primary,
             bottomLabelOffset: 20,
             leftLabelOffset: 50,
             leftLabelMargin: 80,
-            ...(_w = value == null ? void 0 : value.style) == null ? void 0 : _w.labelStyle
+            ...(_x = value == null ? void 0 : value.style) == null ? void 0 : _x.labelStyle
           },
           lineStyle: {
             colorRange: theme.chartColours.lineChartColours || ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)"],
             lineAreaColor: "none",
             lineAreaOpacity: 0.2,
-            ...(_x = value == null ? void 0 : value.style) == null ? void 0 : _x.lineStyle
+            ...(_y = value == null ? void 0 : value.style) == null ? void 0 : _y.lineStyle
           }
         }
       };
     case "HorizontalBarGraph":
       return {
         main: {
-          data: ((_y = value == null ? void 0 : value.main) == null ? void 0 : _y.data) || [{ y: "Anant Sharma", x: 60 }, { y: "Pankaj Chauhan", x: 60 }, { y: "satendra Raghav", x: 150 }, { y: "Vivek Pahadi", x: 80 }, { y: "Siddarth verma", x: 100 }],
+          data: ((_z = value == null ? void 0 : value.main) == null ? void 0 : _z.data) || [{ y: "Anant Sharma", x: 60 }, { y: "Pankaj Chauhan", x: 60 }, { y: "satendra Raghav", x: 150 }, { y: "Vivek Pahadi", x: 80 }, { y: "Siddarth verma", x: 100 }],
           header: " ",
           bottomLabel: "Name of Employe",
           leftLabel: "Value",
           axisLeft: true,
           axisBottom: true,
           hideBottomTicks: false,
-          hideLeftTicks: ((_z = value == null ? void 0 : value.main) == null ? void 0 : _z.data) ? true : false,
-          hideLeftAxisLine: ((_A = value == null ? void 0 : value.main) == null ? void 0 : _A.data) ? true : false,
+          hideLeftTicks: ((_A = value == null ? void 0 : value.main) == null ? void 0 : _A.data) ? true : false,
+          hideLeftAxisLine: ((_B = value == null ? void 0 : value.main) == null ? void 0 : _B.data) ? true : false,
           hideBottomAxisLine: false,
           bottomAxisWidth: "10px",
           ...value.main
@@ -11645,7 +11635,7 @@ const finalDataProvider = (type2, value, theme) => {
             height: "300",
             borderRadius: "20px",
             padding: "10px 0 2px 0",
-            ...(_B = value == null ? void 0 : value.style) == null ? void 0 : _B.containerStyle
+            ...(_C = value == null ? void 0 : value.style) == null ? void 0 : _C.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -11656,12 +11646,12 @@ const finalDataProvider = (type2, value, theme) => {
             width: "100%",
             fontSize: "18px",
             color: theme.palette.text.primary,
-            ...(_C = value == null ? void 0 : value.style) == null ? void 0 : _C.headerStyle
+            ...(_D = value == null ? void 0 : value.style) == null ? void 0 : _D.headerStyle
           },
           tooltipStyle: {
             padding: "6px",
             borderRadius: "2px",
-            ...(_D = value == null ? void 0 : value.style) == null ? void 0 : _D.tooltipStyle
+            ...(_E = value == null ? void 0 : value.style) == null ? void 0 : _E.tooltipStyle
           },
           labelStyle: {
             margin: { top: 10, left: 110, right: 40, bottom: 40 },
@@ -11672,11 +11662,11 @@ const finalDataProvider = (type2, value, theme) => {
             tickColor: theme.palette.text.primary,
             rightAxisWidth: "0.3px",
             fontSize: "10px",
-            ...(_E = value == null ? void 0 : value.style) == null ? void 0 : _E.labelStyle
+            ...(_F = value == null ? void 0 : value.style) == null ? void 0 : _F.labelStyle
           },
           barStyle: {
             color: "#6c5efb",
-            ...(_F = value == null ? void 0 : value.style) == null ? void 0 : _F.barStyle
+            ...(_G = value == null ? void 0 : value.style) == null ? void 0 : _G.barStyle
           }
         }
       };
@@ -11720,14 +11710,22 @@ const DrawPieGraph = ({
   parentWidth,
   parentHeight
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  const [active2, setActive] = useState(null);
   const letters = (_a = value == null ? void 0 : value.main) == null ? void 0 : _a.data;
-  const arr = ((_b = value == null ? void 0 : value.main) == null ? void 0 : _b.xAxisValue) && ((_c = value == null ? void 0 : value.main) == null ? void 0 : _c.yAxisValue) ? [(_d = value == null ? void 0 : value.main) == null ? void 0 : _d.xAxisValue, (_e = value == null ? void 0 : value.main) == null ? void 0 : _e.yAxisValue] : Object.keys(letters[0]);
-  const frequency = (d2) => d2[arr[1]];
-  const getLetterFrequencyColor = createOrdinalScale$1({
-    domain: letters.map((l2) => l2[arr[0]]),
-    range: (_g = (_f = value == null ? void 0 : value.style) == null ? void 0 : _f.pieStyle) == null ? void 0 : _g.colorRange
-  });
+  const keys2 = Object.keys(letters[0]);
+  const arr = ((_b = value == null ? void 0 : value.main) == null ? void 0 : _b.xAxisValue) && ((_c = value == null ? void 0 : value.main) == null ? void 0 : _c.yAxisValue) ? [(_d = value == null ? void 0 : value.main) == null ? void 0 : _d.xAxisValue, (_e = value == null ? void 0 : value.main) == null ? void 0 : _e.yAxisValue] : keys2;
+  const labelKeyIndex = keys2.indexOf("label");
+  const valueKeyIndex = labelKeyIndex === 0 ? 1 : 0;
+  const frequency = (d2) => d2[arr[valueKeyIndex]];
+  const getLetterFrequencyColor = (letter, index2) => {
+    var _a2, _b2;
+    return createOrdinalScale$1({
+      domain: letters.map((l2) => l2[arr[index2]]),
+      range: (_b2 = (_a2 = value == null ? void 0 : value.style) == null ? void 0 : _a2.pieStyle) == null ? void 0 : _b2.colorRange
+    })(letter);
+  };
+  const dataKeyArray = letters.map((data) => data.label);
   const {
     tooltipData,
     tooltipLeft,
@@ -11751,8 +11749,9 @@ const DrawPieGraph = ({
   const top2 = centerY + 20;
   const pieSortValues = (a2, b10) => a2 - b10;
   return /* @__PURE__ */ jsxs(Fragment, {
-    children: [((_h = value == null ? void 0 : value.main) == null ? void 0 : _h.legendAvailable) && /* @__PURE__ */ jsx(Legend, {
-      value
+    children: [((_f = value == null ? void 0 : value.main) == null ? void 0 : _f.legendAvailable) && /* @__PURE__ */ jsx(Legend, {
+      value,
+      dataKeyArray
     }), /* @__PURE__ */ jsx("svg", {
       width: parentWidth,
       height: parentHeight,
@@ -11764,20 +11763,26 @@ const DrawPieGraph = ({
           data: letters,
           pieSortValues,
           pieValue: frequency,
-          outerRadius: (_j = (_i = value == null ? void 0 : value.style) == null ? void 0 : _i.pieStyle) == null ? void 0 : _j.outerRadius,
-          innerRadius: (_l = (_k = value == null ? void 0 : value.style) == null ? void 0 : _k.pieStyle) == null ? void 0 : _l.innerRadius,
-          cornerRadius: (_n = (_m = value == null ? void 0 : value.style) == null ? void 0 : _m.pieStyle) == null ? void 0 : _n.cornerRadius,
-          padAngle: (_p = (_o = value == null ? void 0 : value.style) == null ? void 0 : _o.pieStyle) == null ? void 0 : _p.padAngle,
+          outerRadius: (_h = (_g = value == null ? void 0 : value.style) == null ? void 0 : _g.pieStyle) == null ? void 0 : _h.outerRadius,
+          innerRadius: (_j = (_i = value == null ? void 0 : value.style) == null ? void 0 : _i.pieStyle) == null ? void 0 : _j.innerRadius,
+          cornerRadius: (_l = (_k = value == null ? void 0 : value.style) == null ? void 0 : _k.pieStyle) == null ? void 0 : _l.cornerRadius,
+          padAngle: (_n = (_m = value == null ? void 0 : value.style) == null ? void 0 : _m.pieStyle) == null ? void 0 : _n.padAngle,
           children: (pie2) => {
             return pie2.arcs.map((arc2, index2) => {
               var _a2, _b2, _c2, _d2;
-              const letter = ((_b2 = (_a2 = value == null ? void 0 : value.style) == null ? void 0 : _a2.pieStyle) == null ? void 0 : _b2.showPieLabel) ? arc2.data[arr[0]] : arc2.data[arr[1]];
+              console.log("arc.data", arc2.data);
+              const indexParam = ((_b2 = (_a2 = value == null ? void 0 : value.style) == null ? void 0 : _a2.pieStyle) == null ? void 0 : _b2.showPieLabel) ? labelKeyIndex : valueKeyIndex;
+              const letter = arc2.data[arr[indexParam]];
+              console.log("arc.data[arr[indexParam]]", arc2.data[arr[indexParam]]);
               const [centriodX, centriodY] = pie2.path.centroid(arc2);
               const arcPath = pie2.path(arc2);
-              const arcFill = getLetterFrequencyColor(letter);
+              const arcFill = getLetterFrequencyColor(letter, indexParam);
               return /* @__PURE__ */ jsxs("g", {
                 onMouseOut: hideTooltip,
                 onMouseOver: (e3) => handleMouse(e3, arc2.data),
+                onMouseEnter: (e3) => {
+                  setActive(arc2.data);
+                },
                 className: "pieTooltipHolder",
                 children: [/* @__PURE__ */ jsx("path", {
                   d: arcPath,