impaktapps-design 0.2.93 → 0.2.94-alpha.1

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());
@@ -10871,43 +10873,40 @@ function Legend({
   colorRange,
   dataKeyArray
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const legendGlyphSize = ((_b = (_a = value == null ? void 0 : value.main) == null ? void 0 : _a.legend) == null ? void 0 : _b.colorRectWidth) || 15;
   const ordinalColorScale = createOrdinalScale$1({
     domain: dataKeyArray || ((_c = value == null ? void 0 : value.main) == null ? void 0 : _c.tooltipDataKey),
-    range: colorRange || ((_e = (_d = value == null ? void 0 : value.style) == null ? void 0 : _d.barStyle) == null ? void 0 : _e.colorRange) || ((_g = (_f = value == null ? void 0 : value.style) == null ? void 0 : _f.pieStyle) == null ? void 0 : _g.colorRange) || ((_i = (_h = value == null ? void 0 : value.style) == null ? void 0 : _h.lineStyle) == null ? void 0 : _i.colorRange)
+    range: colorRange || ((_e = (_d = value == null ? void 0 : value.style) == null ? void 0 : _d.pieStyle) == null ? void 0 : _e.colorRange)
   });
   return /* @__PURE__ */ jsxs("div", {
     className: "legend",
     style: {
       paddingLeft: "40px",
       paddingRight: "40px",
-      ...(_k = (_j = value == null ? void 0 : value.style) == null ? void 0 : _j.legendStyle) == null ? void 0 : _k.legend
+      ...(_g = (_f = value == null ? void 0 : value.style) == null ? void 0 : _f.legendStyle) == null ? void 0 : _g.legend
     },
     children: [/* @__PURE__ */ jsx("div", {
       className: "title",
-      style: (_m = (_l = value == null ? void 0 : value.style) == null ? void 0 : _l.legendStyle) == null ? void 0 : _m.legendTitle,
-      children: (_o = (_n = value == null ? void 0 : value.main) == null ? void 0 : _n.legend) == null ? void 0 : _o.legendTitle
+      style: (_i = (_h = value == null ? void 0 : value.style) == null ? void 0 : _h.legendStyle) == null ? void 0 : _i.legendTitle,
+      children: (_k = (_j = value == null ? void 0 : value.main) == null ? void 0 : _j.legend) == null ? void 0 : _k.legendTitle
     }), /* @__PURE__ */ jsx(Ordinal, {
       scale: ordinalColorScale,
-      labelFormat: (label) => `${label.toUpperCase()}`,
       children: (labels) => {
         var _a2, _b2;
         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 +10916,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 +10975,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 - 100;
   dateScale.rangeRound([0, xMax]);
   cityScale.rangeRound([0, dateScale.bandwidth()]);
   tempScale.range([yMax, 0]);
@@ -11384,32 +11383,15 @@ ParentSize$1.propTypes = {
   children: PropTypes.func.isRequired
 };
 const Product1 = [
-  {
-    "key": "key1",
-    "value": [
-      { "x": "01:00", "y": 123 },
-      { "x": "02:00", "y": 118 },
-      { "x": "03:00", "y": 141 },
-      { "x": "04:00", "y": 114 },
-      { "x": "05:00", "y": 108 },
-      { "x": "06:00", "y": 123 },
-      { "x": "07:00", "y": 128 },
-      { "x": "08:00", "y": 134 },
-      { "x": "09:00", "y": 131 },
-      { "x": "10:00", "y": 134 },
-      { "x": "11:00", "y": 118 },
-      { "x": "11:00", "y": 10 },
-      { "x": "12:00", "y": 130 },
-      { "x": "13:00", "y": 133 },
-      { "x": "14:00", "y": 132 },
-      { "x": "15:00", "y": 1 },
-      { "x": "15:00", "y": 137 },
-      { "x": "16:00", "y": 120 }
-    ]
-  }
+  { x: "a", y: 100 },
+  { x: "b", y: 50 },
+  { x: "c", y: 100 },
+  { x: "d", y: 80 },
+  { x: "f", y: 100 },
+  { x: "g", y: 50 }
 ];
 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;
   switch (type2) {
     case "BarGraph":
     case "StackBarGraph":
@@ -11485,7 +11467,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) || [{ branch: "Kotak", value: 500 }, { branch: "SBI", value: 700 }, { branch: "HDFC", value: 900 }],
           header: "Pie Graph",
           bottomLabel: "Name of Employe",
           leftLabel: "Value",
@@ -11499,7 +11481,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
+            ...(_i = value == null ? void 0 : value.main) == null ? void 0 : _i.legend
           }
         },
         style: {
@@ -11509,7 +11491,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
+            ...(_j = value == null ? void 0 : value.style) == null ? void 0 : _j.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -11520,22 +11502,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
+            ...(_k = value == null ? void 0 : value.style) == null ? void 0 : _k.headerStyle
           },
           tooltipStyle: {
-            width: "100%",
-            minWidth: 80,
-            height: 20,
-            backgroundColor: "lightgrey",
-            color: "black",
-            ...(_m = value == null ? void 0 : value.style) == null ? void 0 : _m.tooltipStyle
+            ...(_l = value == null ? void 0 : value.style) == null ? void 0 : _l.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
+            ...(_m = value == null ? void 0 : value.style) == null ? void 0 : _m.labelStyle
           },
           legendStyle: {
             legend: {
@@ -11548,40 +11525,33 @@ 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"
+              ...(_o = (_n = value == null ? void 0 : value.style) == null ? void 0 : _n.legendStyle) == null ? void 0 : _o.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
+              ...(_q = (_p = value == null ? void 0 : value.style) == null ? void 0 : _p.legendStyle) == null ? void 0 : _q.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: ["#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
+            ...(_r = value == null ? void 0 : value.style) == null ? void 0 : _r.pieStyle
           }
         }
       };
     case "LineGraph":
       return {
         main: {
-          data: ((_u = value == null ? void 0 : value.main) == null ? void 0 : _u.data) || Product1,
+          data: ((_s = value == null ? void 0 : value.main) == null ? void 0 : _s.data) || [Product1],
           header: "Line Graph Dynamic",
           bottomLabel: "Name of Employe",
           leftLabel: "Value",
-          legendAvailable: true,
           gridHidden: true,
           numHidden: false,
           tooltipDataKey: ["MAMA New Project", "Second", "Third"],
@@ -11592,10 +11562,11 @@ const finalDataProvider = (type2, value, theme) => {
           ...value == null ? void 0 : value.main,
           legend: {
             labelColor: theme.palette.text.primary,
+            legendTitle: "Our Assests",
             direction: "row",
             align: "right",
             colorRectWidth: 20,
-            ...(_v = value == null ? void 0 : value.main) == null ? void 0 : _v.legend
+            ...(_t5 = value == null ? void 0 : value.main) == null ? void 0 : _t5.legend
           }
         },
         style: {
@@ -11605,7 +11576,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
+            ...(_u = value == null ? void 0 : value.style) == null ? void 0 : _u.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -11616,35 +11587,35 @@ 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
+            ...(_v = value == null ? void 0 : value.style) == null ? void 0 : _v.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
+            ...(_w = value == null ? void 0 : value.style) == null ? void 0 : _w.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: ["#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
+            ...(_x = value == null ? void 0 : value.style) == null ? void 0 : _x.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: ((_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 }],
           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: ((_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,
           hideBottomAxisLine: false,
           bottomAxisWidth: "10px",
           ...value.main
@@ -11656,7 +11627,7 @@ const finalDataProvider = (type2, value, theme) => {
             height: "300",
             borderRadius: "20px",
             padding: "10px 0 2px 0",
-            ...(_E = value == null ? void 0 : value.style) == null ? void 0 : _E.containerStyle
+            ...(_B = value == null ? void 0 : value.style) == null ? void 0 : _B.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -11667,12 +11638,12 @@ const finalDataProvider = (type2, value, theme) => {
             width: "100%",
             fontSize: "18px",
             color: theme.palette.text.primary,
-            ...(_F = value == null ? void 0 : value.style) == null ? void 0 : _F.headerStyle
+            ...(_C = value == null ? void 0 : value.style) == null ? void 0 : _C.headerStyle
           },
           tooltipStyle: {
             padding: "6px",
             borderRadius: "2px",
-            ...(_G = value == null ? void 0 : value.style) == null ? void 0 : _G.tooltipStyle
+            ...(_D = value == null ? void 0 : value.style) == null ? void 0 : _D.tooltipStyle
           },
           labelStyle: {
             margin: { top: 10, left: 110, right: 40, bottom: 40 },
@@ -11683,11 +11654,11 @@ const finalDataProvider = (type2, value, theme) => {
             tickColor: theme.palette.text.primary,
             rightAxisWidth: "0.3px",
             fontSize: "10px",
-            ...(_H = value == null ? void 0 : value.style) == null ? void 0 : _H.labelStyle
+            ...(_E = value == null ? void 0 : value.style) == null ? void 0 : _E.labelStyle
           },
           barStyle: {
             color: "#6c5efb",
-            ...(_I = value == null ? void 0 : value.style) == null ? void 0 : _I.barStyle
+            ...(_F = value == null ? void 0 : value.style) == null ? void 0 : _F.barStyle
           }
         }
       };
@@ -11732,18 +11703,13 @@ const DrawPieGraph = ({
   parentHeight
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
-  const [active2, setActive] = useState(null);
   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 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[labelKeyIndex]]),
+    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 dataKeyArray = letters.map((data) => data.label);
   const {
     tooltipData,
     tooltipLeft,
@@ -11752,12 +11718,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 +11732,59 @@ 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: [((_h = value == null ? void 0 : value.main) == null ? void 0 : _h.legendAvailable) && /* @__PURE__ */ jsx(Legend, {
+      value
+    }), /* @__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: (_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,
+          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 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]];
+              const [centriodX, centriodY] = pie2.path.centroid(arc2);
+              const arcPath = pie2.path(arc2);
+              const arcFill = getLetterFrequencyColor(letter);
+              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 = ({
@@ -19843,16 +19775,14 @@ const DrawGraph = ({
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const data = (_a = value == null ? void 0 : value.main) == null ? void 0 : _a.data;
-  const arr = value.main.xAxisValue && value.main.yAxisValue ? [value.main.xAxisValue, value.main.yAxisValue] : Object.keys(data[0].value[0]);
+  const arr = value.main.xAxisValue && value.main.yAxisValue ? [value.main.xAxisValue, value.main.yAxisValue] : Object.keys(data[0][0]);
   const accessors = {
     xAccessor: (d2) => d2[arr[0]],
     yAccessor: (d2) => d2[arr[1]]
   };
-  const dataKeyArray = data.map((ele) => ele.key);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [value.main.legendAvailable && /* @__PURE__ */ jsx(Legend, {
-      value,
-      dataKeyArray
+      value
     }), /* @__PURE__ */ jsxs(XYChart, {
       height: parseInt((_c = (_b = value.style) == null ? void 0 : _b.containerStyle) == null ? void 0 : _c.height),
       xScale: {
@@ -19894,12 +19824,12 @@ const DrawGraph = ({
         labelOffset: ((_q = (_p = value.style) == null ? void 0 : _p.labelStyle) == null ? void 0 : _q.bottomLabelOffset) || 32
       }), /* @__PURE__ */ jsx(AnimatedGrid, {
         columns: value.main.grid,
-        numTicks: value.main.numHidden ? 0 : ((_r = value.main) == null ? void 0 : _r.data[0].value.length) - 1
+        numTicks: value.main.numHidden ? 0 : ((_r = value.main) == null ? void 0 : _r.data[0].length) - 1
       }), (_s = value.main) == null ? void 0 : _s.data.map((elem, i) => {
         var _a2, _b2, _c2, _d2, _e2, _f2;
         return /* @__PURE__ */ jsx(AnimatedLineSeries, {
-          dataKey: elem.key,
-          data: elem.value,
+          dataKey: value.main.tooltipDataKey[i],
+          data: elem,
           fill: (_b2 = (_a2 = value.style) == null ? void 0 : _a2.lineStyle) == null ? void 0 : _b2.lineAreaColor,
           fillOpacity: (_d2 = (_c2 = value.style) == null ? void 0 : _c2.lineStyle) == null ? void 0 : _d2.lineAreaOpacity,
           floodColor: "green",
@@ -19960,7 +19890,7 @@ var DrawHorizontalBarGraph = withTooltip(({
   barValue
 }) => {
   var _a, _b, _c;
-  const xMax = width2 - margin2.left - margin2.right;
+  const xMax = width2 - margin2.left - margin2.right + 100;
   const yMax = height2 - margin2.top - margin2.bottom;
   const tooltipStyles2 = {
     ...defaultStyles,
@@ -20114,7 +20044,7 @@ const ProgressBar = ({
   const [progress2, setProgress] = useState(((_b = (_a = value == null ? void 0 : value.main) == null ? void 0 : _a.data) == null ? void 0 : _b.achieved) / ((_d = (_c = value == null ? void 0 : value.main) == null ? void 0 : _c.data) == null ? void 0 : _d.total) * 100);
   useEffect(() => {
     var _a2, _b2, _c2, _d2;
-    setProgress(Math.min(100, ((_b2 = (_a2 = value == null ? void 0 : value.main) == null ? void 0 : _a2.data) == null ? void 0 : _b2.achieved) / ((_d2 = (_c2 = value == null ? void 0 : value.main) == null ? void 0 : _c2.data) == null ? void 0 : _d2.total) * 100));
+    setProgress(((_b2 = (_a2 = value == null ? void 0 : value.main) == null ? void 0 : _a2.data) == null ? void 0 : _b2.achieved) / ((_d2 = (_c2 = value == null ? void 0 : value.main) == null ? void 0 : _c2.data) == null ? void 0 : _d2.total) * 100);
   }, [value.main.data]);
   const getColor = () => {
     if (progress2 < 40) {
@@ -20138,7 +20068,7 @@ const ProgressBar = ({
       children: /* @__PURE__ */ jsx("div", {
         className: "progress-bar-fill",
         style: {
-          width: `${progress2 > 100 ? 100 : progress2}%`,
+          width: progress2 > 100 ? "100%" : `${progress2}%`,
           backgroundColor: ((_g = value == null ? void 0 : value.style) == null ? void 0 : _g.progressBarFillColor) || getColor()[1],
           height: "100%",
           borderRadius: "10px",
@@ -20204,7 +20134,7 @@ const ProgressBar = ({
           children: /* @__PURE__ */ jsx("div", {
             className: "progress-bar-fill",
             style: {
-              width: `${progress2}%`,
+              width: progress2 > 100 ? "100%" : `${progress2}%`,
               backgroundColor: getColor()[1],
               height: "100%",
               borderRadius: "10px",
@@ -44043,4 +43973,3 @@ const CustomTimer = ({
   });
 };
 export { BarGraph, ImpaktAppsCard as Card, HorizontalBarGraph, LineGraph, PieGraph, ProgressBar, SpeedoMeter, CustomTimer as Timer };
-//# sourceMappingURL=impaktapps-design.es.js.map