impaktapps-design 0.2.94 → 0.2.96-alpha.1

package/dist/impaktapps-design.es.js

@@ -10459,7 +10459,8 @@ const ToolTip = ({
   style: style2,
   top: top2,
   left: left2,
-  tooltipData
+  tooltipData,
+  getLetterFrequencyColor
 }) => {
   const {
     TooltipInPortal
@@ -10467,37 +10468,34 @@ 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: {
-        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",
+          backgroundColor: getLetterFrequencyColor(tooltipData[0]),
+          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());
@@ -10873,23 +10871,23 @@ function Legend({
   colorRange,
   dataKeyArray
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
   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.pieStyle) == null ? void 0 : _e.colorRange)
+    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)
   });
   return /* @__PURE__ */ jsxs("div", {
     className: "legend",
     style: {
       paddingLeft: "40px",
       paddingRight: "40px",
-      ...(_g = (_f = value == null ? void 0 : value.style) == null ? void 0 : _f.legendStyle) == null ? void 0 : _g.legend
+      ...(_k = (_j = value == null ? void 0 : value.style) == null ? void 0 : _j.legendStyle) == null ? void 0 : _k.legend
     },
     children: [/* @__PURE__ */ jsx("div", {
       className: "title",
-      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
+      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
     }), /* @__PURE__ */ jsx(Ordinal, {
       scale: ordinalColorScale,
       labelFormat: (label) => `${label.toUpperCase()}`,
@@ -10898,16 +10896,18 @@ 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"
+            flexDirection: ((_b2 = (_a2 = value == null ? void 0 : value.main) == null ? void 0 : _a2.legend) == null ? void 0 : _b2.direction) || "row",
+            flexWrap: "wrap"
           },
           children: labels.map((label, i) => {
-            var _a3, _b3;
+            var _a3, _b3, _c2, _d2;
             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: `${((_b3 = (_a3 = value == null ? void 0 : value.main) == null ? void 0 : _a3.legend) == null ? void 0 : _b3.align) || "left"}`,
+                align: `${((_d2 = (_c2 = value == null ? void 0 : value.main) == null ? void 0 : _c2.legend) == null ? void 0 : _d2.align) || "left"}`,
                 margin: "0 0 0 4px",
                 children: label.text
               })]
@@ -11384,15 +11384,32 @@ ParentSize$1.propTypes = {
   children: PropTypes.func.isRequired
 };
 const Product1 = [
-  { x: "a", y: 100 },
-  { x: "b", y: 50 },
-  { x: "c", y: 100 },
-  { x: "d", y: 80 },
-  { x: "f", y: 100 },
-  { x: "g", y: 50 }
+  {
+    "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 }
+    ]
+  }
 ];
 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, _H, _I;
   switch (type2) {
     case "BarGraph":
     case "StackBarGraph":
@@ -11468,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) || [{ 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",
@@ -11482,7 +11499,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: {
@@ -11492,7 +11509,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,
@@ -11503,17 +11520,22 @@ 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
+            width: "100%",
+            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: {
@@ -11526,33 +11548,40 @@ 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
+            },
+            legendVertical: {
+              paddingBottom: "8px",
+              flexDirection: "row",
+              display: "flex",
+              alignItems: "center"
             },
             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: {
-            colorRange: ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)"],
+            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)"],
             outerRadius: 120,
-            innerRadius: 60,
+            innerRadius: 63,
             cornerRadius: 2,
             padAngle: 6e-3,
-            ...(_r = value == null ? void 0 : value.style) == null ? void 0 : _r.pieStyle
+            ...(_t5 = value == null ? void 0 : value.style) == null ? void 0 : _t5.pieStyle
           }
         }
       };
     case "LineGraph":
       return {
         main: {
-          data: ((_s = value == null ? void 0 : value.main) == null ? void 0 : _s.data) || [Product1],
+          data: ((_u = value == null ? void 0 : value.main) == null ? void 0 : _u.data) || Product1,
           header: "Line Graph Dynamic",
           bottomLabel: "Name of Employe",
           leftLabel: "Value",
+          legendAvailable: true,
           gridHidden: true,
           numHidden: false,
           tooltipDataKey: ["MAMA New Project", "Second", "Third"],
@@ -11563,11 +11592,10 @@ 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,
-            ...(_t5 = value == null ? void 0 : value.main) == null ? void 0 : _t5.legend
+            ...(_v = value == null ? void 0 : value.main) == null ? void 0 : _v.legend
           }
         },
         style: {
@@ -11577,7 +11605,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
+            ...(_w = value == null ? void 0 : value.style) == null ? void 0 : _w.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -11588,35 +11616,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
+            ...(_x = value == null ? void 0 : value.style) == null ? void 0 : _x.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
+            ...(_y = value == null ? void 0 : value.style) == null ? void 0 : _y.labelStyle
           },
           lineStyle: {
-            colorRange: ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)"],
+            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)"],
             lineAreaColor: "none",
             lineAreaOpacity: 0.2,
-            ...(_x = value == null ? void 0 : value.style) == null ? void 0 : _x.lineStyle
+            ...(_A = value == null ? void 0 : value.style) == null ? void 0 : _A.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: ((_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 }],
           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: ((_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,
           hideBottomAxisLine: false,
           bottomAxisWidth: "10px",
           ...value.main
@@ -11628,7 +11656,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
+            ...(_E = value == null ? void 0 : value.style) == null ? void 0 : _E.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -11639,12 +11667,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
+            ...(_F = value == null ? void 0 : value.style) == null ? void 0 : _F.headerStyle
           },
           tooltipStyle: {
             padding: "6px",
             borderRadius: "2px",
-            ...(_D = value == null ? void 0 : value.style) == null ? void 0 : _D.tooltipStyle
+            ...(_G = value == null ? void 0 : value.style) == null ? void 0 : _G.tooltipStyle
           },
           labelStyle: {
             margin: { top: 10, left: 110, right: 40, bottom: 40 },
@@ -11655,11 +11683,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
+            ...(_H = value == null ? void 0 : value.style) == null ? void 0 : _H.labelStyle
           },
           barStyle: {
             color: "#6c5efb",
-            ...(_F = value == null ? void 0 : value.style) == null ? void 0 : _F.barStyle
+            ...(_I = value == null ? void 0 : value.style) == null ? void 0 : _I.barStyle
           }
         }
       };
@@ -11704,13 +11732,18 @@ 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 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 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[0]]),
+    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 dataKeyArray = letters.map((data) => data.label);
   const {
     tooltipData,
     tooltipLeft,
@@ -11719,11 +11752,12 @@ const DrawPieGraph = ({
     showTooltip,
     hideTooltip
   } = useTooltip();
-  const handleMouse = (event, datum2) => {
+  const handleMouse = (event, arc2, datum2) => {
+    setActive(datum2);
     showTooltip({
       tooltipLeft: event.clientX,
       tooltipTop: event.clientY,
-      tooltipData: [datum2[arr[0]], datum2[arr[1]]]
+      tooltipData: [datum2[arr[labelKeyIndex]], datum2[arr[valueKeyIndex]]]
     });
   };
   const innerWidth = parentWidth - 40;
@@ -11733,59 +11767,92 @@ const DrawPieGraph = ({
   const left2 = centerX + 20;
   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
-    }), /* @__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) => {
+  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
+            }) => {
               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]];
-              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}`);
-            });
-          }
+              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
-    })]
+      }), 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 PieGraph = ({
@@ -19776,14 +19843,16 @@ 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][0]);
+  const arr = value.main.xAxisValue && value.main.yAxisValue ? [value.main.xAxisValue, value.main.yAxisValue] : Object.keys(data[0].value[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
+      value,
+      dataKeyArray
     }), /* @__PURE__ */ jsxs(XYChart, {
       height: parseInt((_c = (_b = value.style) == null ? void 0 : _b.containerStyle) == null ? void 0 : _c.height),
       xScale: {
@@ -19825,12 +19894,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].length) - 1
+        numTicks: value.main.numHidden ? 0 : ((_r = value.main) == null ? void 0 : _r.data[0].value.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: value.main.tooltipDataKey[i],
-          data: elem,
+          dataKey: elem.key,
+          data: elem.value,
           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",
@@ -20069,12 +20138,12 @@ const ProgressBar = ({
       children: /* @__PURE__ */ jsx("div", {
         className: "progress-bar-fill",
         style: {
-          width: `${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",
           marginBottom: "20px",
-          transition: "width 0.5 ease-out"
+          transition: "width 0.5s ease-out"
         }
       })
     });
@@ -20210,7 +20279,7 @@ const ProgressBar = ({
               color: ((_L = (_K = theme == null ? void 0 : theme.palette) == null ? void 0 : _K.text) == null ? void 0 : _L.primary) || "#121926",
               fontWeight: 500
             },
-            children: ((_N = (_M = value == null ? void 0 : value.main) == null ? void 0 : _M.data) == null ? void 0 : _N.remaining) || ((_P = (_O = value == null ? void 0 : value.main) == null ? void 0 : _O.data) == null ? void 0 : _P.total) - ((_R = (_Q = value == null ? void 0 : value.main) == null ? void 0 : _Q.data) == null ? void 0 : _R.achieved)
+            children: Math.max(0, ((_N = (_M = value == null ? void 0 : value.main) == null ? void 0 : _M.data) == null ? void 0 : _N.remaining) || ((_P = (_O = value == null ? void 0 : value.main) == null ? void 0 : _O.data) == null ? void 0 : _P.total) - ((_R = (_Q = value == null ? void 0 : value.main) == null ? void 0 : _Q.data) == null ? void 0 : _R.achieved))
           })]
         })]
       })]
@@ -43974,3 +44043,4 @@ const CustomTimer = ({
   });
 };
 export { BarGraph, ImpaktAppsCard as Card, HorizontalBarGraph, LineGraph, PieGraph, ProgressBar, SpeedoMeter, CustomTimer as Timer };
+//# sourceMappingURL=impaktapps-design.es.js.map