impaktapps-design 0.2.97-alpha.70 → 0.2.991

package/dist/impaktapps-design.es.js

@@ -10459,8 +10459,7 @@ const ToolTip = ({
   style: style2,
   top: top2,
   left: left2,
-  tooltipData,
-  getLetterFrequencyColor
+  tooltipData
 }) => {
   const {
     TooltipInPortal
@@ -10468,34 +10467,37 @@ const ToolTip = ({
     detectBounds: true,
     scroll: true
   });
-  const tooltipStyles2 = {
-    ...defaultStyles,
-    minWidth: 100,
-    height: 20,
-    backgroundColor: "lightgrey",
-    color: "black"
-  };
-  console.log("ver 0.2.89-alpha.407");
   return /* @__PURE__ */ jsx(TooltipInPortal, {
     top: top2,
     left: left2,
-    style: tooltipStyles2,
     children: /* @__PURE__ */ jsxs("div", {
       style: {
-        display: "flex",
-        alignItems: "center"
+        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"
       },
       children: [/* @__PURE__ */ jsx("div", {
         style: {
-          width: "12px",
-          height: "12px",
-          backgroundColor: getLetterFrequencyColor(tooltipData[0]),
-          marginRight: "8px"
-        }
+          padding: "4px 10px",
+          color: (style2 == null ? void 0 : style2.tooltipbackground) || "white",
+          borderRadius: "5px",
+          fontWeight: 700
+        },
+        children: tooltipData[0]
       }), /* @__PURE__ */ jsx("div", {
-        children: /* @__PURE__ */ jsx("strong", {
-          children: `${tooltipData[0]}: ${tooltipData[1]}`
-        })
+        style: {
+          padding: "4px 10px",
+          borderRadius: "5px",
+          marginTop: "10px",
+          fontWeight: 700
+        },
+        children: tooltipData[1]
       })]
     })
   }, Math.random());
@@ -10896,18 +10898,16 @@ function Legend({
         return /* @__PURE__ */ jsx("div", {
           style: {
             display: "flex",
-            flexDirection: ((_b2 = (_a2 = value == null ? void 0 : value.main) == null ? void 0 : _a2.legend) == null ? void 0 : _b2.direction) || "row",
-            flexWrap: "wrap"
+            flexDirection: ((_b2 = (_a2 = value == null ? void 0 : value.main) == null ? void 0 : _a2.legend) == null ? void 0 : _b2.direction) || "row"
           },
           children: labels.map((label, i) => {
-            var _a3, _b3, _c2, _d2;
+            var _a3, _b3;
             return /* @__PURE__ */ jsxs(LegendItem, {
               margin: "0 5px",
               onClick: (events) => {
                 if (events)
                   alert(`clicked: ${JSON.stringify(label)}`);
               },
-              style: (_b3 = (_a3 = value == null ? void 0 : value.style) == null ? void 0 : _a3.legendStyle) == null ? void 0 : _b3.legendVertical,
               children: [/* @__PURE__ */ jsx("svg", {
                 width: legendGlyphSize,
                 height: legendGlyphSize,
@@ -10917,7 +10917,7 @@ function Legend({
                   height: legendGlyphSize
                 })
               }), /* @__PURE__ */ jsx(LegendLabel, {
-                align: `${((_d2 = (_c2 = value == null ? void 0 : value.main) == null ? void 0 : _c2.legend) == null ? void 0 : _d2.align) || "left"}`,
+                align: `${((_b3 = (_a3 = value == null ? void 0 : value.main) == null ? void 0 : _a3.legend) == null ? void 0 : _b3.align) || "left"}`,
                 margin: "0 0 0 4px",
                 children: label.text
               })]
@@ -10976,7 +10976,7 @@ function DrawBarGraph({
     range: [((_e = (_d = (_c = value.style) == null ? void 0 : _c.barStyle) == null ? void 0 : _d.color) == null ? void 0 : _e.firstBarColor) || "#aeeef8", ((_h = (_g = (_f = value.style) == null ? void 0 : _f.barStyle) == null ? void 0 : _g.color) == null ? void 0 : _h.secondBarColor) || "#e5fd3d", ((_k = (_j = (_i = value.style) == null ? void 0 : _i.barStyle) == null ? void 0 : _j.color) == null ? void 0 : _k.thirdBarColor) || "#9caff6"]
   });
   const xMax = width2 - margin2.left - margin2.right;
-  const yMax = height2 - margin2.top - margin2.bottom - 0;
+  const yMax = height2 - margin2.top - 80;
   dateScale.rangeRound([0, xMax]);
   cityScale.rangeRound([0, dateScale.bandwidth()]);
   tempScale.range([yMax, 0]);
@@ -11409,7 +11409,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, _G, _H, _I;
+  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, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R;
   switch (type2) {
     case "BarGraph":
     case "StackBarGraph":
@@ -11485,7 +11485,7 @@ const finalDataProvider = (type2, value, theme) => {
     case "PieGraph":
       return {
         main: {
-          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 }],
+          data: ((_h = value == null ? void 0 : value.main) == null ? void 0 : _h.data) && ((_i = value.main.data) == null ? void 0 : _i.length) > 0 ? (_j = value == null ? void 0 : value.main) == null ? void 0 : _j.data : [{ label: "Kotak", value: 500 }, { label: "SBI", value: 700 }, { label: "HDFC", value: 900 }],
           header: "Pie Graph",
           bottomLabel: "Name of Employe",
           leftLabel: "Value",
@@ -11499,7 +11499,7 @@ const finalDataProvider = (type2, value, theme) => {
             legendTitle: "Our Assests",
             direction: "row",
             align: "right",
-            ...(_j = value == null ? void 0 : value.main) == null ? void 0 : _j.legend
+            ...(_k = value == null ? void 0 : value.main) == null ? void 0 : _k.legend
           }
         },
         style: {
@@ -11509,7 +11509,7 @@ const finalDataProvider = (type2, value, theme) => {
             height: "310",
             borderRadius: "20px",
             padding: "10px 0 2px 0",
-            ...(_k = value == null ? void 0 : value.style) == null ? void 0 : _k.containerStyle
+            ...(_l = value == null ? void 0 : value.style) == null ? void 0 : _l.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -11520,22 +11520,17 @@ const finalDataProvider = (type2, value, theme) => {
             width: "100%",
             fontSize: "18px",
             color: theme.palette.text.primary,
-            ...(_l = value == null ? void 0 : value.style) == null ? void 0 : _l.headerStyle
+            ...(_m = value == null ? void 0 : value.style) == null ? void 0 : _m.headerStyle
           },
           tooltipStyle: {
-            width: "100%",
-            minWidth: 80,
-            height: 20,
-            backgroundColor: "lightgrey",
-            color: "black",
-            ...(_m = value == null ? void 0 : value.style) == null ? void 0 : _m.tooltipStyle
+            ...(_n = value == null ? void 0 : value.style) == null ? void 0 : _n.tooltipStyle
           },
           labelStyle: {
             labelColor: theme.palette.text.primary,
             labelOffset: 45,
             leftLabelMargin: "70",
             topLabelMargin: "-40",
-            ...(_n = value == null ? void 0 : value.style) == null ? void 0 : _n.labelStyle
+            ...(_o = value == null ? void 0 : value.style) == null ? void 0 : _o.labelStyle
           },
           legendStyle: {
             legend: {
@@ -11548,36 +11543,30 @@ const finalDataProvider = (type2, value, theme) => {
               border: "1px solid rgba(255, 255, 255, 0.3)",
               borderRadius: " 8px",
               margin: "5px 5px",
-              ...(_p = (_o = value == null ? void 0 : value.style) == null ? void 0 : _o.legendStyle) == null ? void 0 : _p.legend
-            },
-            legendVertical: {
-              paddingBottom: "8px",
-              flexDirection: "row",
-              display: "flex",
-              alignItems: "center"
+              ...(_q = (_p = value == null ? void 0 : value.style) == null ? void 0 : _p.legendStyle) == null ? void 0 : _q.legend
             },
             legendTitle: {
               fontWeight: 500,
               marginBottom: "5px",
               fontFamily: "roboto",
               fontSize: "10px",
-              ...(_r = (_q = value == null ? void 0 : value.style) == null ? void 0 : _q.legendStyle) == null ? void 0 : _r.legendTitle
+              ...(_s = (_r = value == null ? void 0 : value.style) == null ? void 0 : _r.legendStyle) == null ? void 0 : _s.legendTitle
             }
           },
           pieStyle: {
-            colorRange: ((_s = theme == null ? void 0 : theme.chartColours) == null ? void 0 : _s.pieChartColours) || ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)"],
+            colorRange: ((_t5 = theme == null ? void 0 : theme.chartColours) == null ? void 0 : _t5.pieChartColours) || ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)"],
             outerRadius: 120,
-            innerRadius: 63,
+            innerRadius: 60,
             cornerRadius: 2,
             padAngle: 6e-3,
-            ...(_t5 = value == null ? void 0 : value.style) == null ? void 0 : _t5.pieStyle
+            ...(_u = value == null ? void 0 : value.style) == null ? void 0 : _u.pieStyle
           }
         }
       };
     case "LineGraph":
       return {
         main: {
-          data: ((_u = value == null ? void 0 : value.main) == null ? void 0 : _u.data) || Product1,
+          data: ((_w = (_v = value == null ? void 0 : value.main) == null ? void 0 : _v.data) == null ? void 0 : _w.length) > 0 ? (_x = value == null ? void 0 : value.main) == null ? void 0 : _x.data : Product1,
           header: "Line Graph Dynamic",
           bottomLabel: "Name of Employe",
           leftLabel: "Value",
@@ -11595,7 +11584,7 @@ const finalDataProvider = (type2, value, theme) => {
             direction: "row",
             align: "right",
             colorRectWidth: 20,
-            ...(_v = value == null ? void 0 : value.main) == null ? void 0 : _v.legend
+            ...(_y = value == null ? void 0 : value.main) == null ? void 0 : _y.legend
           }
         },
         style: {
@@ -11605,7 +11594,7 @@ const finalDataProvider = (type2, value, theme) => {
             height: "300",
             borderRadius: "20px",
             padding: "10px 0 2px 0",
-            ...(_w = value == null ? void 0 : value.style) == null ? void 0 : _w.containerStyle
+            ...(_z = value == null ? void 0 : value.style) == null ? void 0 : _z.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -11616,47 +11605,47 @@ const finalDataProvider = (type2, value, theme) => {
             width: "100%",
             fontSize: "18px",
             color: theme.palette.text.primary,
-            ...(_x = value == null ? void 0 : value.style) == null ? void 0 : _x.headerStyle
+            ...(_A = value == null ? void 0 : value.style) == null ? void 0 : _A.headerStyle
           },
           labelStyle: {
             labelColor: theme.palette.text.primary,
             bottomLabelOffset: 20,
             leftLabelOffset: 50,
             leftLabelMargin: 80,
-            ...(_y = value == null ? void 0 : value.style) == null ? void 0 : _y.labelStyle
+            ...(_B = value == null ? void 0 : value.style) == null ? void 0 : _B.labelStyle
           },
           lineStyle: {
-            colorRange: ((_z = theme == null ? void 0 : theme.chartColours) == null ? void 0 : _z.lineChartColours) || ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)"],
+            colorRange: ((_C = theme == null ? void 0 : theme.chartColours) == null ? void 0 : _C.lineChartColours) || ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)"],
             lineAreaColor: "none",
             lineAreaOpacity: 0.2,
-            ...(_A = value == null ? void 0 : value.style) == null ? void 0 : _A.lineStyle
+            ...(_D = value == null ? void 0 : value.style) == null ? void 0 : _D.lineStyle
           }
         }
       };
     case "HorizontalBarGraph":
       return {
         main: {
-          data: ((_B = value == null ? void 0 : value.main) == null ? void 0 : _B.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: ((_E = value == null ? void 0 : value.main) == null ? void 0 : _E.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: ((_C = value == null ? void 0 : value.main) == null ? void 0 : _C.data) ? true : false,
-          hideLeftAxisLine: ((_D = value == null ? void 0 : value.main) == null ? void 0 : _D.data) ? true : false,
+          hideLeftTicks: ((_F = value == null ? void 0 : value.main) == null ? void 0 : _F.data) ? true : false,
+          hideLeftAxisLine: ((_G = value == null ? void 0 : value.main) == null ? void 0 : _G.data) ? true : false,
           hideBottomAxisLine: false,
           bottomAxisWidth: "10px",
           ...value.main
         },
         style: {
           containerStyle: {
-            background: theme.palette.secondary.main,
+            background: (_I = (_H = theme == null ? void 0 : theme.palette) == null ? void 0 : _H.secondary) == null ? void 0 : _I.main,
             width: "90%",
             height: "300",
             borderRadius: "20px",
             padding: "10px 0 2px 0",
-            ...(_E = value == null ? void 0 : value.style) == null ? void 0 : _E.containerStyle
+            ...(_J = value == null ? void 0 : value.style) == null ? void 0 : _J.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -11666,28 +11655,28 @@ const finalDataProvider = (type2, value, theme) => {
             padding: "15px 0 1px 20px",
             width: "100%",
             fontSize: "18px",
-            color: theme.palette.text.primary,
-            ...(_F = value == null ? void 0 : value.style) == null ? void 0 : _F.headerStyle
+            color: (_L = (_K = theme == null ? void 0 : theme.palette) == null ? void 0 : _K.text) == null ? void 0 : _L.primary,
+            ...(_M = value == null ? void 0 : value.style) == null ? void 0 : _M.headerStyle
           },
           tooltipStyle: {
             padding: "6px",
             borderRadius: "2px",
-            ...(_G = value == null ? void 0 : value.style) == null ? void 0 : _G.tooltipStyle
+            ...(_N = value == null ? void 0 : value.style) == null ? void 0 : _N.tooltipStyle
           },
           labelStyle: {
-            margin: { top: 10, left: 110, right: 40, bottom: 40 },
-            tickLabelColor: theme.palette.text.primary,
-            leftLabelOffset: 140,
+            margin: { top: 10, left: 125, right: 40, bottom: 40 },
+            tickLabelColor: (_P = (_O = theme == null ? void 0 : theme.palette) == null ? void 0 : _O.text) == null ? void 0 : _P.primary,
+            leftLabelOffset: 100,
             bottomLabelOffset: 14,
             tickFontSize: "10px",
             tickColor: theme.palette.text.primary,
             rightAxisWidth: "0.3px",
             fontSize: "10px",
-            ...(_H = value == null ? void 0 : value.style) == null ? void 0 : _H.labelStyle
+            ...(_Q = value == null ? void 0 : value.style) == null ? void 0 : _Q.labelStyle
           },
           barStyle: {
             color: "#6c5efb",
-            ...(_I = value == null ? void 0 : value.style) == null ? void 0 : _I.barStyle
+            ...(_R = value == null ? void 0 : value.style) == null ? void 0 : _R.barStyle
           }
         }
       };
@@ -11731,18 +11720,20 @@ const DrawPieGraph = ({
   parentWidth,
   parentHeight
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
-  const [active2, setActive] = useState(null);
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
   const letters = (_a = value == null ? void 0 : value.main) == null ? void 0 : _a.data;
   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 = createOrdinalScale$1({
-    domain: letters.map((l2) => l2[arr[labelKeyIndex]]),
-    range: (_g = (_f = value == null ? void 0 : value.style) == null ? void 0 : _f.pieStyle) == null ? void 0 : _g.colorRange
-  });
+  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,
@@ -11752,12 +11743,11 @@ const DrawPieGraph = ({
     showTooltip,
     hideTooltip
   } = useTooltip();
-  const handleMouse = (event, arc2, datum2) => {
-    setActive(datum2);
+  const handleMouse = (event, datum2) => {
     showTooltip({
       tooltipLeft: event.clientX,
       tooltipTop: event.clientY,
-      tooltipData: [datum2[arr[labelKeyIndex]], datum2[arr[valueKeyIndex]]]
+      tooltipData: [datum2[arr[0]], datum2[arr[1]]]
     });
   };
   const innerWidth = parentWidth - 40;
@@ -11767,92 +11757,61 @@ const DrawPieGraph = ({
   const left2 = centerX + 20;
   const top2 = centerY + 20;
   const pieSortValues = (a2, b10) => a2 - b10;
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: /* @__PURE__ */ jsxs("div", {
-      style: {
-        display: "flex",
-        justifyContent: "space-between"
-      },
-      children: [/* @__PURE__ */ jsx("svg", {
-        width: parentWidth,
-        height: parentHeight,
-        className: "pieGraphContainer",
-        children: /* @__PURE__ */ jsxs(Group, {
-          top: top2,
-          left: left2,
-          children: [/* @__PURE__ */ jsx(Pie, {
-            data: letters,
-            pieValue: frequency,
-            outerRadius: ((_i = (_h = value == null ? void 0 : value.style) == null ? void 0 : _h.pieStyle) == null ? void 0 : _i.outerRadius) - 35,
-            innerRadius: ((_k = (_j = value == null ? void 0 : value.style) == null ? void 0 : _j.pieStyle) == null ? void 0 : _k.innerRadius) - 5,
-            padAngle: 0.05,
-            children: (pie2) => {
-              return pie2.arcs.map((arc2, index2) => {
-                const letter = arc2.data[arr[labelKeyIndex]];
-                pie2.path.centroid(arc2);
-                const arcPath = pie2.path(arc2);
-                const arcFill = getLetterFrequencyColor(letter);
-                return /* @__PURE__ */ jsx("g", {
-                  children: /* @__PURE__ */ jsx("path", {
-                    d: arcPath,
-                    fill: arcFill
-                  })
-                }, `arc-${letter}-${index2}`);
-              });
-            }
-          }), /* @__PURE__ */ jsx(Pie, {
-            data: letters,
-            pieSortValues,
-            pieValue: frequency,
-            outerRadius: ({
-              data
-            }) => {
+  return /* @__PURE__ */ jsxs(Fragment, {
+    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,
+      className: "pieGraphContainer",
+      children: /* @__PURE__ */ jsx(Group, {
+        top: top2,
+        left: left2,
+        children: /* @__PURE__ */ jsx(Pie, {
+          data: letters,
+          pieSortValues,
+          pieValue: frequency,
+          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 size = active2 && active2.label == data.label ? (_b2 = (_a2 = value == null ? void 0 : value.style) == null ? void 0 : _a2.pieStyle) == null ? void 0 : _b2.outerRadius : ((_d2 = (_c2 = value == null ? void 0 : value.style) == null ? void 0 : _c2.pieStyle) == null ? void 0 : _d2.outerRadius) - 3;
-              return size;
-            },
-            innerRadius: (_m = (_l = value == null ? void 0 : value.style) == null ? void 0 : _l.pieStyle) == null ? void 0 : _m.innerRadius,
-            cornerRadius: (_o = (_n = value == null ? void 0 : value.style) == null ? void 0 : _n.pieStyle) == null ? void 0 : _o.cornerRadius,
-            children: (pie2) => {
-              return pie2.arcs.map((arc2, index2) => {
-                console.log("arc.data", arc2.data);
-                const letter = arc2.data[arr[labelKeyIndex]];
-                pie2.path.centroid(arc2);
-                const arcPath = pie2.path(arc2);
-                const arcFill = getLetterFrequencyColor(letter);
-                return /* @__PURE__ */ jsx("g", {
-                  onMouseOut: hideTooltip,
-                  onMouseLeave: () => setActive(null),
-                  onMouseOver: (e3) => handleMouse(e3, arc2, arc2.data),
-                  className: "pieTooltipHolder",
-                  children: /* @__PURE__ */ jsx("path", {
-                    d: arcPath,
-                    fill: arcFill
-                  })
-                }, `arc-${letter}-${index2}`);
-              });
-            }
-          })]
-        })
-      }), tooltipOpen && /* @__PURE__ */ jsx(ToolTip, {
-        style: value == null ? void 0 : value.style,
-        top: tooltipTop,
-        left: tooltipLeft,
-        tooltipData,
-        getLetterFrequencyColor
-      }), /* @__PURE__ */ jsx("div", {
-        style: {
-          width: "100px",
-          display: "flex",
-          marginTop: "20px",
-          marginRight: "130px"
-        },
-        children: ((_p = value == null ? void 0 : value.main) == null ? void 0 : _p.legendAvailable) && /* @__PURE__ */ jsx(Legend, {
-          value,
-          dataKeyArray
+              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]];
+              const [centriodX, centriodY] = pie2.path.centroid(arc2);
+              const arcPath = pie2.path(arc2);
+              const arcFill = getLetterFrequencyColor(letter, indexParam);
+              return /* @__PURE__ */ jsxs("g", {
+                onMouseOut: hideTooltip,
+                onMouseOver: (e3) => handleMouse(e3, arc2.data),
+                className: "pieTooltipHolder",
+                children: [/* @__PURE__ */ jsx("path", {
+                  d: arcPath,
+                  fill: arcFill
+                }), /* @__PURE__ */ jsx(Text, {
+                  x: centriodX,
+                  y: centriodY,
+                  dy: "0.33em",
+                  fontSize: 14,
+                  fill: ((_d2 = (_c2 = value == null ? void 0 : value.style) == null ? void 0 : _c2.pieStyle) == null ? void 0 : _d2.pieLabelColor) || "white",
+                  textAnchor: "middle",
+                  pointerEvents: "none",
+                  children: letter
+                })]
+              }, `arc-${letter}-${index2}`);
+            });
+          }
         })
-      })]
-    })
+      })
+    }), tooltipOpen && /* @__PURE__ */ jsx(ToolTip, {
+      style: value == null ? void 0 : value.style,
+      top: tooltipTop,
+      left: tooltipLeft,
+      tooltipData
+    })]
   });
 };
 const PieGraph = ({
@@ -20143,7 +20102,7 @@ const ProgressBar = ({
           height: "100%",
           borderRadius: "10px",
           marginBottom: "20px",
-          transition: "width 0.5s ease-out"
+          transition: "width 0.5 ease-out"
         }
       })
     });