impaktapps-design 0.2.92 → 0.2.94-alpha.1

package/dist/impaktapps-design.es.js

@@ -10873,26 +10873,25 @@ 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", {
@@ -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, _J;
+  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) && ((_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 }],
+          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",
-            ...(_k = value == null ? void 0 : value.main) == null ? void 0 : _k.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",
-            ...(_l = value == null ? void 0 : value.style) == null ? void 0 : _l.containerStyle
+            ...(_j = value == null ? void 0 : value.style) == null ? void 0 : _j.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -11520,17 +11502,17 @@ const finalDataProvider = (type2, value, theme) => {
             width: "100%",
             fontSize: "18px",
             color: theme.palette.text.primary,
-            ...(_m = value == null ? void 0 : value.style) == null ? void 0 : _m.headerStyle
+            ...(_k = value == null ? void 0 : value.style) == null ? void 0 : _k.headerStyle
           },
           tooltipStyle: {
-            ...(_n = value == null ? void 0 : value.style) == null ? void 0 : _n.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",
-            ...(_o = value == null ? void 0 : value.style) == null ? void 0 : _o.labelStyle
+            ...(_m = value == null ? void 0 : value.style) == null ? void 0 : _m.labelStyle
           },
           legendStyle: {
             legend: {
@@ -11543,34 +11525,33 @@ const finalDataProvider = (type2, value, theme) => {
               border: "1px solid rgba(255, 255, 255, 0.3)",
               borderRadius: " 8px",
               margin: "5px 5px",
-              ...(_q = (_p = value == null ? void 0 : value.style) == null ? void 0 : _p.legendStyle) == null ? void 0 : _q.legend
+              ...(_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",
-              ...(_s = (_r = value == null ? void 0 : value.style) == null ? void 0 : _r.legendStyle) == null ? void 0 : _s.legendTitle
+              ...(_q = (_p = value == null ? void 0 : value.style) == null ? void 0 : _p.legendStyle) == null ? void 0 : _q.legendTitle
             }
           },
           pieStyle: {
-            colorRange: theme.chartColours.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: 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: ((_v = (_u = value == null ? void 0 : value.main) == null ? void 0 : _u.data) == null ? void 0 : _v.length) > 0 ? (_w = value == null ? void 0 : value.main) == null ? void 0 : _w.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"],
@@ -11581,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,
-            ...(_x = value == null ? void 0 : value.main) == null ? void 0 : _x.legend
+            ...(_t5 = value == null ? void 0 : value.main) == null ? void 0 : _t5.legend
           }
         },
         style: {
@@ -11594,7 +11576,7 @@ const finalDataProvider = (type2, value, theme) => {
             height: "300",
             borderRadius: "20px",
             padding: "10px 0 2px 0",
-            ...(_y = value == null ? void 0 : value.style) == null ? void 0 : _y.containerStyle
+            ...(_u = value == null ? void 0 : value.style) == null ? void 0 : _u.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -11605,35 +11587,35 @@ const finalDataProvider = (type2, value, theme) => {
             width: "100%",
             fontSize: "18px",
             color: theme.palette.text.primary,
-            ...(_z = value == null ? void 0 : value.style) == null ? void 0 : _z.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,
-            ...(_A = value == null ? void 0 : value.style) == null ? void 0 : _A.labelStyle
+            ...(_w = value == null ? void 0 : value.style) == null ? void 0 : _w.labelStyle
           },
           lineStyle: {
-            colorRange: theme.chartColours.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,
-            ...(_B = value == null ? void 0 : value.style) == null ? void 0 : _B.lineStyle
+            ...(_x = value == null ? void 0 : value.style) == null ? void 0 : _x.lineStyle
           }
         }
       };
     case "HorizontalBarGraph":
       return {
         main: {
-          data: ((_C = value == null ? void 0 : value.main) == null ? void 0 : _C.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: ((_D = value == null ? void 0 : value.main) == null ? void 0 : _D.data) ? true : false,
-          hideLeftAxisLine: ((_E = value == null ? void 0 : value.main) == null ? void 0 : _E.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
@@ -11645,7 +11627,7 @@ const finalDataProvider = (type2, value, theme) => {
             height: "300",
             borderRadius: "20px",
             padding: "10px 0 2px 0",
-            ...(_F = value == null ? void 0 : value.style) == null ? void 0 : _F.containerStyle
+            ...(_B = value == null ? void 0 : value.style) == null ? void 0 : _B.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -11656,12 +11638,12 @@ const finalDataProvider = (type2, value, theme) => {
             width: "100%",
             fontSize: "18px",
             color: theme.palette.text.primary,
-            ...(_G = value == null ? void 0 : value.style) == null ? void 0 : _G.headerStyle
+            ...(_C = value == null ? void 0 : value.style) == null ? void 0 : _C.headerStyle
           },
           tooltipStyle: {
             padding: "6px",
             borderRadius: "2px",
-            ...(_H = value == null ? void 0 : value.style) == null ? void 0 : _H.tooltipStyle
+            ...(_D = value == null ? void 0 : value.style) == null ? void 0 : _D.tooltipStyle
           },
           labelStyle: {
             margin: { top: 10, left: 110, right: 40, bottom: 40 },
@@ -11672,11 +11654,11 @@ const finalDataProvider = (type2, value, theme) => {
             tickColor: theme.palette.text.primary,
             rightAxisWidth: "0.3px",
             fontSize: "10px",
-            ...(_I = value == null ? void 0 : value.style) == null ? void 0 : _I.labelStyle
+            ...(_E = value == null ? void 0 : value.style) == null ? void 0 : _E.labelStyle
           },
           barStyle: {
             color: "#6c5efb",
-            ...(_J = value == null ? void 0 : value.style) == null ? void 0 : _J.barStyle
+            ...(_F = value == null ? void 0 : value.style) == null ? void 0 : _F.barStyle
           }
         }
       };
@@ -11720,21 +11702,14 @@ const DrawPieGraph = ({
   parentWidth,
   parentHeight
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
   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 = (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 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 {
     tooltipData,
     tooltipLeft,
@@ -11758,9 +11733,8 @@ const DrawPieGraph = ({
   const top2 = centerY + 20;
   const pieSortValues = (a2, b10) => a2 - b10;
   return /* @__PURE__ */ jsxs(Fragment, {
-    children: [((_f = value == null ? void 0 : value.main) == null ? void 0 : _f.legendAvailable) && /* @__PURE__ */ jsx(Legend, {
-      value,
-      dataKeyArray
+    children: [((_h = value == null ? void 0 : value.main) == null ? void 0 : _h.legendAvailable) && /* @__PURE__ */ jsx(Legend, {
+      value
     }), /* @__PURE__ */ jsx("svg", {
       width: parentWidth,
       height: parentHeight,
@@ -11772,18 +11746,17 @@ const DrawPieGraph = ({
           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,
+          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 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 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, indexParam);
+              const arcFill = getLetterFrequencyColor(letter);
               return /* @__PURE__ */ jsxs("g", {
                 onMouseOut: hideTooltip,
                 onMouseOver: (e3) => handleMouse(e3, arc2.data),
@@ -19802,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: {
@@ -19853,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",
@@ -19919,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,
@@ -20069,7 +20040,7 @@ const ProgressBar = ({
   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, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S;
+  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;
   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;
@@ -20097,7 +20068,7 @@ 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",
@@ -20163,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",
@@ -20238,7 +20209,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: ((_M = value == null ? void 0 : value.main) == null ? void 0 : _M.daysCount) ? Math.round(((_O = (_N = value == null ? void 0 : value.main) == null ? void 0 : _N.data) == null ? void 0 : _O.achieved) / ((_P = value == null ? void 0 : value.main) == null ? void 0 : _P.daysCount)) + ((_Q = value == null ? void 0 : value.main) == null ? void 0 : _Q.bottomLabel_3_averageLabel) || "/day" : (_S = (_R = value == null ? void 0 : value.main) == null ? void 0 : _R.data) == null ? void 0 : _S.bottomLabel_3_value
+            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))
           })]
         })]
       })]
@@ -44002,4 +43973,3 @@ const CustomTimer = ({
   });
 };
 export { BarGraph, ImpaktAppsCard as Card, HorizontalBarGraph, LineGraph, PieGraph, ProgressBar, SpeedoMeter, CustomTimer as Timer };
-//# sourceMappingURL=impaktapps-design.es.js.map