impaktapps-design 0.2.79 → 0.2.86

package/dist/impaktapps-design.es.js

@@ -10418,7 +10418,6 @@ function useTooltipInPortal(_temp) {
     TooltipInPortal
   };
 }
-var style$3 = "";
 const BottomAxis = ({
   data,
   yMax,
@@ -10428,38 +10427,32 @@ const BottomAxis = ({
   left: left2
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: /* @__PURE__ */ jsx(AxisBottom$2, {
-      numTicks: data == null ? void 0 : data.length,
-      top: yMax,
-      left: left2,
-      labelClassName: "axisBottom",
-      tickClassName: "axisBottom",
-      axisClassName: "axisBottom",
-      hideTicks: (_a = value.main) == null ? void 0 : _a.hideTicks,
-      hideAxisLine: (_b = value.main) == null ? void 0 : _b.hideBottomAxisLine,
-      strokeWidth: (_d = (_c = value.style) == null ? void 0 : _c.labelStyle) == null ? void 0 : _d.bottomAxisWidth,
-      scale: xScale,
-      stroke: (_f = (_e = value.style) == null ? void 0 : _e.labelStyle) == null ? void 0 : _f.tickColor,
-      labelOffset: (_h = (_g = value.style) == null ? void 0 : _g.labelStyle) == null ? void 0 : _h.bottomLabelOffset,
-      label: (_i = value.main) == null ? void 0 : _i.bottomLabel,
-      labelProps: {
-        fill: (_k = (_j = value.style) == null ? void 0 : _j.labelStyle) == null ? void 0 : _k.labelColor,
-        fontSize: (_m = (_l = value.style) == null ? void 0 : _l.labelStyle) == null ? void 0 : _m.fontSize,
-        fontWeight: (_o = (_n = value.style) == null ? void 0 : _n.labelStyle) == null ? void 0 : _o.fontWeight,
-        fontFamily: (_q = (_p = value.style) == null ? void 0 : _p.labelStyle) == null ? void 0 : _q.fontWeight
-      },
-      tickStroke: (_s = (_r = value.style) == null ? void 0 : _r.labelStyle) == null ? void 0 : _s.tickColor,
-      tickLabelProps: () => {
-        var _a2, _b2, _c2, _d2;
-        return {
-          display: innerWidth < 600 ? "none" : "inline-block",
-          fill: (_b2 = (_a2 = value.style) == null ? void 0 : _a2.labelStyle) == null ? void 0 : _b2.tickLabelColor,
-          fontSize: ((_d2 = (_c2 = value.style) == null ? void 0 : _c2.labelStyle) == null ? void 0 : _d2.tickFontSize) || 11,
-          textAnchor: "middle"
-        };
-      }
-    })
+  return /* @__PURE__ */ jsx(AxisBottom$2, {
+    numTicks: data == null ? void 0 : data.length,
+    top: yMax,
+    left: left2,
+    hideTicks: (_a = value.main) == null ? void 0 : _a.hideTicks,
+    hideAxisLine: (_b = value.main) == null ? void 0 : _b.hideBottomAxisLine,
+    strokeWidth: (_d = (_c = value.style) == null ? void 0 : _c.labelStyle) == null ? void 0 : _d.bottomAxisWidth,
+    scale: xScale,
+    stroke: (_f = (_e = value.style) == null ? void 0 : _e.labelStyle) == null ? void 0 : _f.tickColor,
+    labelOffset: (_h = (_g = value.style) == null ? void 0 : _g.labelStyle) == null ? void 0 : _h.bottomLabelOffset,
+    label: (_i = value.main) == null ? void 0 : _i.bottomLabel,
+    labelProps: {
+      fill: (_k = (_j = value.style) == null ? void 0 : _j.labelStyle) == null ? void 0 : _k.labelColor,
+      fontSize: (_m = (_l = value.style) == null ? void 0 : _l.labelStyle) == null ? void 0 : _m.fontSize,
+      fontWeight: (_o = (_n = value.style) == null ? void 0 : _n.labelStyle) == null ? void 0 : _o.fontWeight,
+      fontFamily: (_q = (_p = value.style) == null ? void 0 : _p.labelStyle) == null ? void 0 : _q.fontWeight
+    },
+    tickStroke: (_s = (_r = value.style) == null ? void 0 : _r.labelStyle) == null ? void 0 : _s.tickColor,
+    tickLabelProps: () => {
+      var _a2, _b2, _c2, _d2;
+      return {
+        fill: (_b2 = (_a2 = value.style) == null ? void 0 : _a2.labelStyle) == null ? void 0 : _b2.tickLabelColor,
+        fontSize: ((_d2 = (_c2 = value.style) == null ? void 0 : _c2.labelStyle) == null ? void 0 : _d2.tickFontSize) || 11,
+        textAnchor: "middle"
+      };
+    }
   });
 };
 const ToolTip = ({
@@ -10880,23 +10873,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()}`,
@@ -10912,6 +10905,8 @@ function Legend({
             return /* @__PURE__ */ jsxs(LegendItem, {
               margin: "0 5px",
               onClick: (events) => {
+                if (events)
+                  alert(`clicked: ${JSON.stringify(label)}`);
               },
               children: [/* @__PURE__ */ jsx("svg", {
                 width: legendGlyphSize,
@@ -11389,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, _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":
@@ -11542,7 +11554,7 @@ const finalDataProvider = (type2, value, theme) => {
             }
           },
           pieStyle: {
-            colorRange: ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)", "#3f84b5", "#b5993f", "#fc6f6f"],
+            colorRange: theme.chartColours.pieChartColours,
             outerRadius: 120,
             innerRadius: 60,
             cornerRadius: 2,
@@ -11554,31 +11566,31 @@ const finalDataProvider = (type2, value, theme) => {
     case "LineGraph":
       return {
         main: {
-          data: ((_s = value == null ? void 0 : value.main) == null ? void 0 : _s.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"],
           axisLeft: true,
-          legendAvailable: true,
           axisBottom: true,
           hideLeftAxisLine: false,
           hideBottomAxisLine: false,
           ...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
           }
         },
         style: {
           containerStyle: {
             background: theme.palette.secondary.main,
-            width: "100%",
+            width: "90%",
             height: "300",
             borderRadius: "20px",
             padding: "10px 0 2px 0",
@@ -11595,54 +11607,33 @@ const finalDataProvider = (type2, value, theme) => {
             color: theme.palette.text.primary,
             ...(_v = value == null ? void 0 : value.style) == null ? void 0 : _v.headerStyle
           },
-          legendStyle: {
-            legend: {
-              lineHeight: "0.9em",
-              color: theme.palette.text.primary,
-              fontSize: "10px",
-              fontFamily: "arial",
-              padding: "10px 10px",
-              float: "left",
-              border: "1px solid rgba(255, 255, 255, 0.3)",
-              borderRadius: " 8px",
-              margin: "5px 5px",
-              ...(_x = (_w = value == null ? void 0 : value.style) == null ? void 0 : _w.legendStyle) == null ? void 0 : _x.legend
-            },
-            legendTitle: {
-              fontWeight: 500,
-              marginBottom: "5px",
-              fontFamily: "roboto",
-              fontSize: "10px",
-              ...(_z = (_y = value == null ? void 0 : value.style) == null ? void 0 : _y.legendStyle) == null ? void 0 : _z.legendTitle
-            }
-          },
           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: ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)"],
+            colorRange: theme.chartColours.lineChartColours,
             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
@@ -11654,7 +11645,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,
@@ -11665,12 +11656,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 },
@@ -11681,11 +11672,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
           }
         }
       };
@@ -11729,13 +11720,12 @@ const DrawPieGraph = ({
   parentWidth,
   parentHeight
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+  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 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 labelArray = letters.map((l2) => l2[arr[0]]);
   const getLetterFrequencyColor = createOrdinalScale$1({
-    domain: labelArray,
+    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 {
@@ -11753,18 +11743,16 @@ const DrawPieGraph = ({
       tooltipData: [datum2[arr[0]], datum2[arr[1]]]
     });
   };
-  const innerWidth2 = parentWidth - 40;
+  const innerWidth = parentWidth - 40;
   const innerHeight = parentHeight - 40;
-  const centerX = innerWidth2 / 2;
+  const centerX = innerWidth / 2;
   const centerY = innerHeight / 2;
   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,
-      colorRange: (_j = (_i = value == null ? void 0 : value.style) == null ? void 0 : _i.pieStyle) == null ? void 0 : _j.colorRange,
-      dataKeyArray: labelArray
+      value
     }), /* @__PURE__ */ jsx("svg", {
       width: parentWidth,
       height: parentHeight,
@@ -11776,17 +11764,17 @@ const DrawPieGraph = ({
           data: letters,
           pieSortValues,
           pieValue: frequency,
-          outerRadius: (_l = (_k = value == null ? void 0 : value.style) == null ? void 0 : _k.pieStyle) == null ? void 0 : _l.outerRadius,
-          innerRadius: (_n = (_m = value == null ? void 0 : value.style) == null ? void 0 : _m.pieStyle) == null ? void 0 : _n.innerRadius,
-          cornerRadius: (_p = (_o = value == null ? void 0 : value.style) == null ? void 0 : _o.pieStyle) == null ? void 0 : _p.cornerRadius,
-          padAngle: (_r = (_q = value == null ? void 0 : value.style) == null ? void 0 : _q.pieStyle) == null ? void 0 : _r.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 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(arc2.data[arr[0]]);
+              const arcFill = getLetterFrequencyColor(letter);
               return /* @__PURE__ */ jsxs("g", {
                 onMouseOut: hideTooltip,
                 onMouseOver: (e3) => handleMouse(e3, arc2.data),
@@ -11834,11 +11822,9 @@ const PieGraph = ({
   });
   return /* @__PURE__ */ jsxs("div", {
     style: pieData.style.containerStyle,
-    children: [((_a = pieData == null ? void 0 : pieData.main) == null ? void 0 : _a.header) && /* @__PURE__ */ jsx(Fragment, {
-      children: /* @__PURE__ */ jsx("div", {
-        style: pieData.style.headerStyle,
-        children: (_b = pieData == null ? void 0 : pieData.main) == null ? void 0 : _b.header
-      })
+    children: [((_a = pieData == null ? void 0 : pieData.main) == null ? void 0 : _a.header) && /* @__PURE__ */ jsx("div", {
+      style: pieData.style.headerStyle,
+      children: (_b = pieData == null ? void 0 : pieData.main) == null ? void 0 : _b.header
     }), PieRender]
   });
 };
@@ -17268,13 +17254,13 @@ function _objectWithoutPropertiesLoose$7(source, excluded) {
 }
 function BaseGrid(_ref) {
   var _ref$rows = _ref.rows, rows = _ref$rows === void 0 ? true : _ref$rows, _ref$columns = _ref.columns, columns = _ref$columns === void 0 ? true : _ref$columns, GridRowsComponent = _ref.GridRowsComponent, GridColumnsComponent = _ref.GridColumnsComponent, props = _objectWithoutPropertiesLoose$7(_ref, _excluded$o);
-  var _useContext = useContext(DataContext$1), theme = _useContext.theme, columnsScale = _useContext.xScale, rowsScale = _useContext.yScale, margin2 = _useContext.margin, innerWidth2 = _useContext.innerWidth, innerHeight = _useContext.innerHeight;
+  var _useContext = useContext(DataContext$1), theme = _useContext.theme, columnsScale = _useContext.xScale, rowsScale = _useContext.yScale, margin2 = _useContext.margin, innerWidth = _useContext.innerWidth, innerHeight = _useContext.innerHeight;
   var gridLineStyles = theme == null ? void 0 : theme.gridStyles;
   return /* @__PURE__ */ jsxs(Fragment, {
-    children: [rows && rowsScale && innerWidth2 != null && /* @__PURE__ */ jsx(GridRowsComponent, {
+    children: [rows && rowsScale && innerWidth != null && /* @__PURE__ */ jsx(GridRowsComponent, {
       left: margin2 == null ? void 0 : margin2.left,
       lineStyle: gridLineStyles,
-      width: innerWidth2,
+      width: innerWidth,
       scale: rowsScale,
       ...props
     }), columns && columnsScale && innerHeight != null && /* @__PURE__ */ jsx(GridColumnsComponent, {
@@ -17399,7 +17385,7 @@ function defaultRenderGlyph$1(props) {
 function TooltipInner(_ref2) {
   var _tooltipContext$toolt, _nearestDatum$key, _ref12, _theme$gridStyles$str, _theme$gridStyles2, _theme$htmlLabel3, _ref13, _theme$gridStyles$str2, _theme$gridStyles3, _theme$htmlLabel4, _theme$backgroundColo, _theme$htmlLabel5, _theme$htmlLabel6;
   var debounce2 = _ref2.debounce, detectBounds = _ref2.detectBounds, horizontalCrosshairStyle = _ref2.horizontalCrosshairStyle, glyphStyle = _ref2.glyphStyle, renderTooltip = _ref2.renderTooltip, _ref2$renderGlyph = _ref2.renderGlyph, renderGlyph = _ref2$renderGlyph === void 0 ? defaultRenderGlyph$1 : _ref2$renderGlyph, resizeObserverPolyfillProp = _ref2.resizeObserverPolyfill, _ref2$scroll = _ref2.scroll, scroll = _ref2$scroll === void 0 ? true : _ref2$scroll, _ref2$showDatumGlyph = _ref2.showDatumGlyph, showDatumGlyph = _ref2$showDatumGlyph === void 0 ? false : _ref2$showDatumGlyph, _ref2$showHorizontalC = _ref2.showHorizontalCrosshair, showHorizontalCrosshair = _ref2$showHorizontalC === void 0 ? false : _ref2$showHorizontalC, _ref2$showSeriesGlyph = _ref2.showSeriesGlyphs, showSeriesGlyphs = _ref2$showSeriesGlyph === void 0 ? false : _ref2$showSeriesGlyph, _ref2$showVerticalCro = _ref2.showVerticalCrosshair, showVerticalCrosshair = _ref2$showVerticalCro === void 0 ? false : _ref2$showVerticalCro, _ref2$snapTooltipToDa = _ref2.snapTooltipToDatumX, snapTooltipToDatumX = _ref2$snapTooltipToDa === void 0 ? false : _ref2$snapTooltipToDa, _ref2$snapTooltipToDa2 = _ref2.snapTooltipToDatumY, snapTooltipToDatumY = _ref2$snapTooltipToDa2 === void 0 ? false : _ref2$snapTooltipToDa2, verticalCrosshairStyle = _ref2.verticalCrosshairStyle, zIndex2 = _ref2.zIndex, tooltipProps = _objectWithoutPropertiesLoose$5(_ref2, _excluded$m);
-  var _ref3 = useContext(DataContext$1) || {}, colorScale = _ref3.colorScale, theme = _ref3.theme, innerHeight = _ref3.innerHeight, innerWidth2 = _ref3.innerWidth, margin2 = _ref3.margin, xScale = _ref3.xScale, yScale = _ref3.yScale, dataRegistry = _ref3.dataRegistry, resizeObserverPolyfill = _ref3.resizeObserverPolyfill;
+  var _ref3 = useContext(DataContext$1) || {}, colorScale = _ref3.colorScale, theme = _ref3.theme, innerHeight = _ref3.innerHeight, innerWidth = _ref3.innerWidth, margin2 = _ref3.margin, xScale = _ref3.xScale, yScale = _ref3.yScale, dataRegistry = _ref3.dataRegistry, resizeObserverPolyfill = _ref3.resizeObserverPolyfill;
   var tooltipContext = useContext(TooltipContext$1);
   var _useTooltipInPortal = useTooltipInPortal({
     debounce: debounce2,
@@ -17526,12 +17512,12 @@ function TooltipInner(_ref2) {
         detectBounds: false,
         style: TOOLTIP_NO_STYLE,
         children: /* @__PURE__ */ jsx("svg", {
-          width: innerWidth2,
+          width: innerWidth,
           height: "1",
           overflow: "visible",
           children: /* @__PURE__ */ jsx("line", {
             x1: 0,
-            x2: innerWidth2,
+            x2: innerWidth,
             y1: 0,
             y2: 0,
             strokeWidth: 1.5,
@@ -18527,7 +18513,7 @@ function DataProvider(_ref) {
   var contextTheme = useContext(ThemeContext$2);
   var theme = propsTheme || contextTheme;
   var _useDimensions = useDimensions(initialDimensions), _useDimensions$ = _useDimensions[0], width2 = _useDimensions$.width, height2 = _useDimensions$.height, margin2 = _useDimensions$.margin, setDimensions = _useDimensions[1];
-  var innerWidth2 = Math.max(0, width2 - margin2.left - margin2.right);
+  var innerWidth = Math.max(0, width2 - margin2.left - margin2.right);
   var innerHeight = Math.max(0, height2 - margin2.top - margin2.bottom);
   var dataRegistry = useDataRegistry();
   var _useScales = useScales({
@@ -18558,14 +18544,14 @@ function DataProvider(_ref) {
         width: width2,
         height: height2,
         margin: margin2,
-        innerWidth: innerWidth2,
+        innerWidth,
         innerHeight,
         setDimensions,
         horizontal,
         resizeObserverPolyfill
       };
     },
-    [colorScale, dataRegistry, height2, horizontal, innerHeight, innerWidth2, margin2, setDimensions, theme, width2, xScale, yScale, resizeObserverPolyfill]
+    [colorScale, dataRegistry, height2, horizontal, innerHeight, innerWidth, margin2, setDimensions, theme, width2, xScale, yScale, resizeObserverPolyfill]
   );
   return /* @__PURE__ */ jsx(DataContext$1.Provider, {
     value,
@@ -19803,24 +19789,22 @@ function AnimatedLineSeries(props) {
   }));
 }
 const DrawGraph = ({
-  value,
-  parentWidth,
-  parentHeight
+  value
 }) => {
   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]]
   };
-  return /* @__PURE__ */ jsxs("div", {
+  const dataKeyArray = data.map((ele) => ele.key);
+  return /* @__PURE__ */ jsxs(Fragment, {
     children: [value.main.legendAvailable && /* @__PURE__ */ jsx(Legend, {
       value,
-      colorRange: (_c = (_b = value == null ? void 0 : value.style) == null ? void 0 : _b.lineStyle) == null ? void 0 : _c.colorRange
+      dataKeyArray
     }), /* @__PURE__ */ jsxs(XYChart, {
-      width: parentWidth,
-      height: parentHeight,
+      height: parseInt((_c = (_b = value.style) == null ? void 0 : _b.containerStyle) == null ? void 0 : _c.height),
       xScale: {
         type: "band"
       },
@@ -19860,12 +19844,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",
@@ -19902,23 +19886,14 @@ const LineGraph = ({
 }) => {
   var _a, _b, _c, _d;
   const lineData = finalDataProvider("LineGraph", value, theme);
-  let LineRender = /* @__PURE__ */ jsx(ParentSize$1, {
-    children: (parent) => /* @__PURE__ */ jsx(DrawGraph, {
-      parentWidth: parent.width,
-      parentHeight: parseInt(lineData.style.containerStyle.height),
-      parentRef: parent.ref,
-      resizeParent: parent.resize,
-      value: lineData
-    })
-  });
   return /* @__PURE__ */ jsxs("div", {
-    style: {
-      ...(_a = lineData == null ? void 0 : lineData.style) == null ? void 0 : _a.containerStyle
-    },
+    style: (_a = lineData == null ? void 0 : lineData.style) == null ? void 0 : _a.containerStyle,
     children: [((_b = lineData == null ? void 0 : lineData.main) == null ? void 0 : _b.header) && /* @__PURE__ */ jsx("div", {
       style: (_c = lineData == null ? void 0 : lineData.style) == null ? void 0 : _c.headerStyle,
       children: (_d = lineData == null ? void 0 : lineData.main) == null ? void 0 : _d.header
-    }), LineRender]
+    }), /* @__PURE__ */ jsx(DrawGraph, {
+      value: lineData
+    })]
   });
 };
 var DrawHorizontalBarGraph = withTooltip(({
@@ -20085,7 +20060,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;
+  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;
   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;
@@ -20113,7 +20088,7 @@ const ProgressBar = ({
       children: /* @__PURE__ */ jsx("div", {
         className: "progress-bar-fill",
         style: {
-          width: `${progress2 < 100 ? progress2 : 100}%`,
+          width: `${progress2}%`,
           backgroundColor: ((_g = value == null ? void 0 : value.style) == null ? void 0 : _g.progressBarFillColor) || getColor()[1],
           height: "100%",
           borderRadius: "10px",
@@ -20179,7 +20154,7 @@ const ProgressBar = ({
           children: /* @__PURE__ */ jsx("div", {
             className: "progress-bar-fill",
             style: {
-              width: `${progress2 < 100 ? progress2 : 100}%`,
+              width: `${progress2}%`,
               backgroundColor: getColor()[1],
               height: "100%",
               borderRadius: "10px",
@@ -20247,14 +20222,14 @@ const ProgressBar = ({
               fontSize: "10px",
               marginBottom: "10px"
             },
-            children: ((_J = value == null ? void 0 : value.main) == null ? void 0 : _J.bottomLabel_3) || "Remaining"
+            children: ((_J = value == null ? void 0 : value.main) == null ? void 0 : _J.bottomLabel_3) || "Average"
           }), /* @__PURE__ */ jsx("div", {
             style: {
               textAlign: "right",
               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.bottomLabel_3_value
+            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
           })]
         })]
       })]
@@ -38828,49 +38803,51 @@ const SpeedoMeter = ({
   value,
   theme
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
-  return /* @__PURE__ */ jsx("div", {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t5, _u, _v, _w;
+  return /* @__PURE__ */ jsxs("div", {
     style: {
       ...(_a = value == null ? void 0 : value.style) == null ? void 0 : _a.containerStyle,
-      width: "100%",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      paddingTop: "50px",
-      paddingBottom: "50px",
-      marginLeft: "auto",
-      marginRight: "auto",
-      height: "auto",
       background: theme.palette.secondary.main
     },
-    children: /* @__PURE__ */ jsx("div", {
+    children: [((_b = value == null ? void 0 : value.main) == null ? void 0 : _b.header) && /* @__PURE__ */ jsx("div", {
+      style: {
+        fontWeight: 700,
+        textAlign: "left",
+        fontFamily: "inherit",
+        fontSize: "18px",
+        color: theme.palette.text.primary || "#121926",
+        ...(_c = value == null ? void 0 : value.style) == null ? void 0 : _c.headerStyle
+      },
+      children: value.main.header
+    }), /* @__PURE__ */ jsx("div", {
       style: {
         width: "100%",
+        minWidth: 500,
         display: "flex",
         justifyContent: "center",
-        alignItems: "center",
-        overflowX: "auto"
+        overflow: "auto"
       },
       children: /* @__PURE__ */ jsx(ReactSpeedometer, {
         forceRender: true,
-        segmentColors: (_b = value == null ? void 0 : value.style) == null ? void 0 : _b.segmentColors,
-        maxValue: ((_d = (_c = value == null ? void 0 : value.main) == null ? void 0 : _c.data) == null ? void 0 : _d.maxValue) || 500,
-        width: window.innerWidth > 750 ? 450 : 280,
-        needleHeightRatio: ((_e = value == null ? void 0 : value.style) == null ? void 0 : _e.needleHeightRatio) || 0.7,
-        currentValueText: ((_f = value == null ? void 0 : value.main) == null ? void 0 : _f.currentValueText) || "Your Score",
-        customSegmentLabels: (_g = value == null ? void 0 : value.main) == null ? void 0 : _g.customSegmentLabels,
-        ringWidth: ((_h = value == null ? void 0 : value.style) == null ? void 0 : _h.ringWidth) || 37,
-        needleTransitionDuration: ((_i = value == null ? void 0 : value.style) == null ? void 0 : _i.needleTransitionDuration) || 5333,
-        needleTransition: ((_j = value == null ? void 0 : value.style) == null ? void 0 : _j.needleTransition) || "easeElastic",
-        value: ((_l = (_k = value == null ? void 0 : value.main) == null ? void 0 : _k.data) == null ? void 0 : _l.value) || 473,
-        needleColor: ((_m = value == null ? void 0 : value.style) == null ? void 0 : _m.needleColor) || "red",
-        minValue: ((_o = (_n = value == null ? void 0 : value.main) == null ? void 0 : _n.data) == null ? void 0 : _o.minValue) || 0,
-        startColor: ((_p = value == null ? void 0 : value.style) == null ? void 0 : _p.startColor) || "red",
-        segments: +((_q = value == null ? void 0 : value.main) == null ? void 0 : _q.segments) || 5,
-        endColor: ((_r = value == null ? void 0 : value.style) == null ? void 0 : _r.endColor) || "green",
-        textColor: ((_s = value == null ? void 0 : value.style) == null ? void 0 : _s.textColor) || "black"
+        segmentColors: (_d = value == null ? void 0 : value.style) == null ? void 0 : _d.segmentColors,
+        maxValue: ((_f = (_e = value == null ? void 0 : value.main) == null ? void 0 : _e.data) == null ? void 0 : _f.maxValue) || 500,
+        width: ((_g = value == null ? void 0 : value.style) == null ? void 0 : _g.width) || 450,
+        needleHeightRatio: ((_h = value == null ? void 0 : value.style) == null ? void 0 : _h.needleHeightRatio) || 0.7,
+        currentValueText: (_i = value == null ? void 0 : value.main) == null ? void 0 : _i.currentValueText,
+        customSegmentLabels: (_j = value == null ? void 0 : value.main) == null ? void 0 : _j.customSegmentLabel,
+        ringWidth: ((_k = value == null ? void 0 : value.style) == null ? void 0 : _k.ringWidth) || 37,
+        needleTransitionDuration: ((_l = value == null ? void 0 : value.style) == null ? void 0 : _l.needleTransitionDuration) || 5333,
+        height: (_m = value == null ? void 0 : value.style) == null ? void 0 : _m.height,
+        needleTransition: ((_n = value == null ? void 0 : value.style) == null ? void 0 : _n.needleTransition) || "easeElastic",
+        value: ((_p = (_o = value == null ? void 0 : value.main) == null ? void 0 : _o.data) == null ? void 0 : _p.value) || 473,
+        needleColor: ((_q = value == null ? void 0 : value.style) == null ? void 0 : _q.needleColor) || "red",
+        minValue: ((_s = (_r = value == null ? void 0 : value.main) == null ? void 0 : _r.data) == null ? void 0 : _s.minValue) || 0,
+        startColor: ((_t5 = value == null ? void 0 : value.style) == null ? void 0 : _t5.startColor) || "red",
+        segments: ((_u = value == null ? void 0 : value.main) == null ? void 0 : _u.segments) || 5,
+        endColor: ((_v = value == null ? void 0 : value.style) == null ? void 0 : _v.endColor) || "green",
+        textColor: ((_w = value == null ? void 0 : value.style) == null ? void 0 : _w.textColor) || "black"
       })
-    })
+    })]
   });
 };
 function _extends() {
@@ -39187,7 +39164,7 @@ function memoize$1(fn) {
     return cache[arg];
   };
 }
-var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
 var isPropValid = /* @__PURE__ */ memoize$1(
   function(prop) {
     return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
@@ -43897,9 +43874,9 @@ const CustomTimer = ({
   const [hour2, setHours] = useState(0);
   const [interval2, setInter] = useState();
   useEffect(() => {
-    if ((data == null ? void 0 : data.startDate) && (data == null ? void 0 : data.endDate) && new Date(data == null ? void 0 : data.startDate).getTime() <= new Date(data == null ? void 0 : data.endDate).getTime() && new Date().getTime() >= new Date(data == null ? void 0 : data.startDate).getTime() && new Date().getTime() <= new Date(data == null ? void 0 : data.endDate).getTime()) {
+    if (new Date(data.startDate).getTime() < new Date().getTime() && new Date(data.startDate).getTime() < new Date(data.endDate).getTime()) {
       let currentDate = new Date();
-      const Difference_In_Time = new Date(data == null ? void 0 : data.endDate).getTime() - currentDate.getTime();
+      const Difference_In_Time = new Date(data.endDate).getTime() - currentDate.getTime();
       const Difference_In_Days = Difference_In_Time / (1e3 * 3600 * 24);
       setDays(Math.floor(Difference_In_Days));
       setInter(setInterval(() => {
@@ -43908,21 +43885,16 @@ const CustomTimer = ({
         setMin(currdate.getMinutes());
         setSec(currdate.getSeconds());
       }, 1e3));
+      return () => {
+        clearInterval(interval2);
+      };
     } else {
-      clearInterval(interval2);
       setDays(0);
       setHours(0);
       setMin(0);
       setSec(0);
     }
-    return () => {
-      clearInterval(interval2);
-      setDays(0);
-      setHours(0);
-      setMin(0);
-      setSec(0);
-    };
-  }, [data == null ? void 0 : data.startDate, data == null ? void 0 : data.endDate]);
+  }, [data]);
   const containerStyle = {
     display: "flex",
     flexDirection: "column",
@@ -43969,7 +43941,7 @@ const CustomTimer = ({
       children: [/* @__PURE__ */ jsx(Box$1, {
         component: "h1",
         style: containerLabelColor,
-        children: new Date().getTime() >= new Date(data == null ? void 0 : data.startDate).getTime() && new Date().getTime() <= new Date(data == null ? void 0 : data.endDate).getTime() ? "Contest ends in..." : new Date().getTime() < new Date(data == null ? void 0 : data.startDate).getTime() ? "Program Not Started" : "Program Over"
+        children: new Date().getTime() >= new Date(data == null ? void 0 : data.startDate).getTime() && new Date().getTime() <= new Date(data.endDate).getTime() ? "Contest ends in..." : new Date().getTime() < new Date(data.startDate).getTime() ? "Program Not Started Yet" : "Program Over"
       }), /* @__PURE__ */ jsxs(Box$1, {
         style: {
           display: "flex",
@@ -44021,3 +43993,4 @@ const CustomTimer = ({
   });
 };
 export { BarGraph, ImpaktAppsCard as Card, HorizontalBarGraph, LineGraph, PieGraph, ProgressBar, SpeedoMeter, CustomTimer as Timer };
+//# sourceMappingURL=impaktapps-design.es.js.map