impaktapps-design 0.2.992-alpha.99 → 0.2.993

package/dist/impaktapps-design.es.js

@@ -9708,7 +9708,7 @@ function DrawBarGraph({
   margin: margin2 = defaultMargin$1,
   value
 }) {
-  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;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   const data = (_a = value.main) == null ? void 0 : _a.data;
   const keys2 = Object.keys(data[0]).filter((d2) => d2 !== value.main.xAxisValue);
   const [hoveredBar, setHoveredBar] = useState({
@@ -9737,7 +9737,7 @@ function DrawBarGraph({
   });
   const colorScale = createOrdinalScale$1({
     domain: keys2,
-    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"]
+    range: value.style.barStyle.colorRange
   });
   const xMax = width2 - margin2.left - margin2.right;
   const yMax = height2 - margin2.top - margin2.bottom;
@@ -9819,16 +9819,16 @@ function DrawBarGraph({
           style: {
             display: hoveredBar.date ? "block" : "none"
           },
-          x: value.main.type === "StackBarGraph" ? ((_l = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _l.bars[hoveredBar.city].x) - (Math.min((_m = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _m.bars[0].width, 15) - ((_n = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _n.bars[0].width)) / 2 : ((_o = hoveredBar.date) == null ? void 0 : _o.x0) - (Math.min((_p = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _p.bars[0].width, 15) - ((_q = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _q.bars[0].width)) || 0,
-          width: value.main.type !== "StackBarGraph" ? calcWidthofBar(hoveredBar == null ? void 0 : hoveredBar.date) : Math.min((_r = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _r.bars[0].width, 15),
+          x: value.main.type === "StackBarGraph" ? ((_c = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _c.bars[hoveredBar.city].x) - (Math.min((_d = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _d.bars[0].width, 15) - ((_e = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _e.bars[0].width)) / 2 : ((_f = hoveredBar.date) == null ? void 0 : _f.x0) - (Math.min((_g = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _g.bars[0].width, 15) - ((_h = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _h.bars[0].width)) || 0,
+          width: value.main.type !== "StackBarGraph" ? calcWidthofBar(hoveredBar == null ? void 0 : hoveredBar.date) : Math.min((_i = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _i.bars[0].width, 15),
           height: yMax,
-          fill: (_t5 = (_s = value.style) == null ? void 0 : _s.barStyle) == null ? void 0 : _t5.hoverBackgroundColor,
+          fill: (_k = (_j = value.style) == null ? void 0 : _j.barStyle) == null ? void 0 : _k.hoverBackgroundColor,
           opacity: 1
         }), /* @__PURE__ */ jsx(LeftAxis, {
           value,
           yScale: tempScale,
           parentWidth: width2
-        }), ((_u = value == null ? void 0 : value.main) == null ? void 0 : _u.type) === "StackBarGraph" ? /* @__PURE__ */ jsx(BarStack, {
+        }), ((_l = value == null ? void 0 : value.main) == null ? void 0 : _l.type) === "StackBarGraph" ? /* @__PURE__ */ jsx(BarStack, {
           data,
           keys: keys2,
           x: getDate,
@@ -9883,9 +9883,9 @@ function DrawBarGraph({
         xScale: dateScale,
         parentWidth: width2
       })]
-    }), ((_v = value == null ? void 0 : value.main) == null ? void 0 : _v.legendAvailable) && keys2.length > 1 && /* @__PURE__ */ jsx(Legend, {
+    }), ((_m = value == null ? void 0 : value.main) == null ? void 0 : _m.legendAvailable) && keys2.length > 1 && /* @__PURE__ */ jsx(Legend, {
       dataKeyArray: keys2,
-      colorRange: [((_y = (_x = (_w = value.style) == null ? void 0 : _w.barStyle) == null ? void 0 : _x.color) == null ? void 0 : _y.firstBarColor) || "#aeeef8", ((_B = (_A = (_z = value.style) == null ? void 0 : _z.barStyle) == null ? void 0 : _A.color) == null ? void 0 : _B.secondBarColor) || "#e5fd3d", ((_E = (_D = (_C = value.style) == null ? void 0 : _C.barStyle) == null ? void 0 : _D.color) == null ? void 0 : _E.thirdBarColor) || "#9caff6"],
+      colorRange: value.style.barStyle.colorRange,
       value
     }), tooltipOpen && /* @__PURE__ */ jsx(ToolTip, {
       value,
@@ -10141,51 +10141,23 @@ 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 }
-    ]
-  },
-  {
-    "key": "key2",
-    "value": [
-      { "x": "01:00", "y": 83 },
-      { "x": "02:00", "y": 108 },
-      { "x": "03:00", "y": 171 },
-      { "x": "04:00", "y": 94 },
-      { "x": "05:00", "y": 98 },
-      { "x": "06:00", "y": 153 },
-      { "x": "07:00", "y": 128 },
-      { "x": "08:00", "y": 144 },
-      { "x": "09:00", "y": 101 }
-    ]
-  }
+  { label: "B1", Budget: 5, Payout: 1 },
+  { label: "B2", Budget: 5, Payout: 2 },
+  { label: "B3", Budget: 8, Payout: 3 },
+  { label: "B4", Budget: 6, Payout: 4 },
+  { label: "B5", Budget: 7, Payout: 2 },
+  { label: "B6", Budget: 10, Payout: 5 }
 ];
 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, _K, _L, _M;
+  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;
   switch (type2) {
     case "BarGraph":
     case "StackBarGraph":
     case "HorizontalBarGraph":
+    case "HorizontalStackBarGraph":
       return {
         main: {
-          data: ((_a = value == null ? void 0 : value.main) == null ? void 0 : _a.data) || [
-            { "label": "B1", "Budget": 5, "Payout": 1 },
-            { "label": "B2", "Budget": 5, "Payout": 2 },
-            { "label": "B3", "Budget": 8, "Payout": 3 },
-            { "label": "B4", "Budget": 6, "Payout": 4 },
-            { "label": "B5", "Budget": 7, "Payout": 2 },
-            { "label": "B6", "Budget": 10, "Payout": 5 }
-          ],
+          data: ((_a = value == null ? void 0 : value.main) == null ? void 0 : _a.data) || Product1,
           header: "Bar Graph",
           bottomLabel: "Name of Employe",
           numTicks: 6,
@@ -10244,22 +10216,27 @@ const finalDataProvider = (type2, value, theme) => {
             ...(_f = value == null ? void 0 : value.style) == null ? void 0 : _f.labelStyle
           },
           barStyle: {
-            color: {
-              firstBarColor: theme.myTheme.palette.primary.main,
-              secondBarColor: theme.myTheme.palette.primary.dark
-            },
+            colorRange: ((_g = theme == null ? void 0 : theme.chartColours) == null ? void 0 : _g.barChartColours) || [
+              "#3f51b5",
+              "rgba(200,0,31,0.9)",
+              "rgba(25,200,205,0.6)"
+            ],
             mediumValueColor: "rgba(63, 81, 181, 0.85)",
             highValueColor: "rgba(63, 81, 181, 0.85)",
             lowValueColor: "rgba(63, 81, 181, 0.85)",
             hoverBackgroundColor: `${theme.myTheme.palette.secondary.main}`,
-            ...(_g = value == null ? void 0 : value.style) == null ? void 0 : _g.barStyle
+            ...(_h = value == null ? void 0 : value.style) == null ? void 0 : _h.barStyle
           }
         }
       };
     case "PieGraph":
       return {
         main: {
-          data: ((_h = value == null ? void 0 : value.main) == null ? void 0 : _h.data) && value.main.data.length > 0 ? (_i = value == null ? void 0 : value.main) == null ? void 0 : _i.data : [{ label: "Kotak", value: 500 }, { label: "SBI", value: 700 }, { label: "HDFC", value: 900 }],
+          data: ((_i = value == null ? void 0 : value.main) == null ? void 0 : _i.data) && value.main.data.length > 0 ? (_j = value == null ? void 0 : value.main) == null ? void 0 : _j.data : [
+            { label: "Kotak", value: 500 },
+            { label: "SBI", value: 700 },
+            { label: "HDFC", value: 900 }
+          ],
           header: "Pie Graph",
           bottomLabel: "Name of Employe",
           leftLabel: "Value",
@@ -10267,12 +10244,13 @@ const finalDataProvider = (type2, value, theme) => {
           axisLeft: true,
           axisBottom: true,
           legendAvailable: true,
+          xAxisValue: "label",
           ...value == null ? void 0 : value.main,
           legend: {
             labelColor: theme.myTheme.palette.text.primary,
             direction: "column",
             align: "left",
-            ...(_j = value == null ? void 0 : value.main) == null ? void 0 : _j.legend
+            ...(_k = value == null ? void 0 : value.main) == null ? void 0 : _k.legend
           }
         },
         style: {
@@ -10282,7 +10260,7 @@ const finalDataProvider = (type2, value, theme) => {
             height: "310",
             borderRadius: "20px",
             padding: "10px 0 2px 0",
-            ...(_k = value == null ? void 0 : value.style) == null ? void 0 : _k.containerStyle
+            ...(_l = value == null ? void 0 : value.style) == null ? void 0 : _l.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -10293,7 +10271,7 @@ const finalDataProvider = (type2, value, theme) => {
             width: "100%",
             fontSize: "18px",
             color: theme.myTheme.palette.text.primary,
-            ...(_l = value == null ? void 0 : value.style) == null ? void 0 : _l.headerStyle
+            ...(_m = value == null ? void 0 : value.style) == null ? void 0 : _m.headerStyle
           },
           tooltipStyle: {
             width: "100%",
@@ -10301,14 +10279,14 @@ const finalDataProvider = (type2, value, theme) => {
             height: 20,
             backgroundColor: "lightgrey",
             color: "black",
-            ...(_m = value == null ? void 0 : value.style) == null ? void 0 : _m.tooltipStyle
+            ...(_n = value == null ? void 0 : value.style) == null ? void 0 : _n.tooltipStyle
           },
           labelStyle: {
             labelColor: theme.myTheme.palette.text.primary,
             labelOffset: 45,
             leftLabelMargin: "70",
             topLabelMargin: "-40",
-            ...(_n = value == null ? void 0 : value.style) == null ? void 0 : _n.labelStyle
+            ...(_o = value == null ? void 0 : value.style) == null ? void 0 : _o.labelStyle
           },
           legendStyle: {
             legend: {
@@ -10321,7 +10299,7 @@ const finalDataProvider = (type2, value, theme) => {
               border: "1px solid rgba(255, 255, 255, 0.3)",
               borderRadius: " 8px",
               margin: "5px 5px",
-              ...(_p = (_o = value == null ? void 0 : value.style) == null ? void 0 : _o.legendStyle) == null ? void 0 : _p.legend
+              ...(_q = (_p = value == null ? void 0 : value.style) == null ? void 0 : _p.legendStyle) == null ? void 0 : _q.legend
             },
             legendVertical: {
               paddingBottom: "8px",
@@ -10334,23 +10312,27 @@ const finalDataProvider = (type2, value, theme) => {
               marginBottom: "5px",
               fontFamily: "roboto",
               fontSize: "10px",
-              ...(_r = (_q = value == null ? void 0 : value.style) == null ? void 0 : _q.legendStyle) == null ? void 0 : _r.legendTitle
+              ...(_s = (_r = value == null ? void 0 : value.style) == null ? void 0 : _r.legendStyle) == null ? void 0 : _s.legendTitle
             }
           },
           pieStyle: {
-            colorRange: ((_s = theme == null ? void 0 : theme.chartColours) == null ? void 0 : _s.pieChartColours) || ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)"],
+            colorRange: ((_t5 = theme == null ? void 0 : theme.chartColours) == null ? void 0 : _t5.pieChartColours) || [
+              "#3f51b5",
+              "rgba(200,0,31,0.9)",
+              "rgba(25,200,205,0.6)"
+            ],
             outerRadius: 120,
             innerRadius: 63,
             cornerRadius: 2,
             padAngle: 6e-3,
-            ...(_t5 = value == null ? void 0 : value.style) == null ? void 0 : _t5.pieStyle
+            ...(_u = value == null ? void 0 : value.style) == null ? void 0 : _u.pieStyle
           }
         }
       };
     case "LineGraph":
       return {
         main: {
-          data: ((_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: ((_w = (_v = value == null ? void 0 : value.main) == null ? void 0 : _v.data) == null ? void 0 : _w.length) > 0 ? (_x = value == null ? void 0 : value.main) == null ? void 0 : _x.data : Product1,
           header: "Line Graph Dynamic",
           bottomLabel: "Name of Employe",
           leftLabel: "Value",
@@ -10362,13 +10344,14 @@ const finalDataProvider = (type2, value, theme) => {
           axisBottom: true,
           hideLeftAxisLine: false,
           hideBottomAxisLine: false,
+          xAxisValue: "label",
           ...value == null ? void 0 : value.main,
           legend: {
             labelColor: theme.myTheme.palette.text.primary,
             direction: "row",
             align: "right",
             colorRectWidth: 20,
-            ...(_x = value == null ? void 0 : value.main) == null ? void 0 : _x.legend
+            ...(_y = value == null ? void 0 : value.main) == null ? void 0 : _y.legend
           }
         },
         style: {
@@ -10378,7 +10361,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
+            ...(_z = value == null ? void 0 : value.style) == null ? void 0 : _z.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -10389,81 +10372,24 @@ const finalDataProvider = (type2, value, theme) => {
             width: "100%",
             fontSize: "18px",
             color: theme.myTheme.palette.text.primary,
-            ...(_z = value == null ? void 0 : value.style) == null ? void 0 : _z.headerStyle
+            ...(_A = value == null ? void 0 : value.style) == null ? void 0 : _A.headerStyle
           },
           labelStyle: {
             labelColor: theme.myTheme.palette.text.primary,
             fontSize: "12px",
             bottomLabelOffset: 25,
             leftLabelOffset: 25,
-            ...(_A = value == null ? void 0 : value.style) == null ? void 0 : _A.labelStyle
+            ...(_B = value == null ? void 0 : value.style) == null ? void 0 : _B.labelStyle
           },
           lineStyle: {
-            colorRange: ((_B = theme == null ? void 0 : theme.chartColours) == null ? void 0 : _B.lineChartColours) || ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)"],
+            colorRange: ((_C = theme == null ? void 0 : theme.chartColours) == null ? void 0 : _C.lineChartColours) || [
+              "#3f51b5",
+              "rgba(200,0,31,0.9)",
+              "rgba(25,200,205,0.6)"
+            ],
             lineAreaColor: "none",
             lineAreaOpacity: 0.2,
-            ...(_C = value == null ? void 0 : value.style) == null ? void 0 : _C.lineStyle
-          }
-        }
-      };
-    case "HorizontalBarGraph":
-      return {
-        main: {
-          data: ((_D = value == null ? void 0 : value.main) == null ? void 0 : _D.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 Employee",
-          numTicks: 6,
-          leftLabel: "Value",
-          axisLeft: true,
-          axisBottom: true,
-          hideBottomTicks: false,
-          hideLeftTicks: ((_E = value == null ? void 0 : value.main) == null ? void 0 : _E.data) ? ((_F = value.main) == null ? void 0 : _F.hideLeftTicks) !== void 0 ? (_G = value.main) == null ? void 0 : _G.hideLeftTicks : true : false,
-          hideLeftAxisLine: ((_H = value == null ? void 0 : value.main) == null ? void 0 : _H.data) ? true : false,
-          hideBottomAxisLine: false,
-          bottomAxisWidth: "10px",
-          xAxisValue: "label",
-          ...value.main
-        },
-        style: {
-          containerStyle: {
-            background: theme.myTheme.palette.background.default,
-            width: "90%",
-            height: "300",
-            borderRadius: "20px",
-            padding: "10px 0 2px 0",
-            ...(_I = value == null ? void 0 : value.style) == null ? void 0 : _I.containerStyle
-          },
-          headerStyle: {
-            fontWeight: 500,
-            textAlign: "left",
-            fontFamily: "inherit",
-            marginBottom: "20px",
-            padding: "15px 0 1px 20px",
-            width: "100%",
-            fontSize: "18px",
-            color: theme.myTheme.palette.text.primary,
-            ...(_J = value == null ? void 0 : value.style) == null ? void 0 : _J.headerStyle
-          },
-          tooltipStyle: {
-            padding: "6px",
-            borderRadius: "2px",
-            ...(_K = value == null ? void 0 : value.style) == null ? void 0 : _K.tooltipStyle
-          },
-          labelStyle: {
-            margin: { top: 10, left: 180, right: 40, bottom: 40 },
-            tickLabelColor: theme.myTheme.palette.text.primary,
-            leftLabelOffset: 140,
-            bottomLabelOffset: 5,
-            tickFontSize: "10px",
-            tickColor: theme.myTheme.palette.text.primary,
-            rightAxisWidth: "0.3px",
-            fontSize: "12px",
-            ...(_L = value == null ? void 0 : value.style) == null ? void 0 : _L.labelStyle
-          },
-          barStyle: {
-            color: theme.myTheme.palette.primary.main,
-            hoverBackgroundColor: `${theme.myTheme.palette.secondary.main}`,
-            ...(_M = value == null ? void 0 : value.style) == null ? void 0 : _M.barStyle
+            ...(_D = value == null ? void 0 : value.style) == null ? void 0 : _D.lineStyle
           }
         }
       };
@@ -10520,7 +10446,7 @@ const DrawPieGraph = ({
   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 labelKeyIndex = keys2.indexOf(value.main.xAxisValue);
   const valueKeyIndex = labelKeyIndex === 0 ? 1 : 0;
   const frequency = (d2) => d2[arr[valueKeyIndex]];
   const getLetterFrequencyColor = createOrdinalScale$1({
@@ -10530,7 +10456,7 @@ const DrawPieGraph = ({
   const getColor = (letter) => {
     return getLetterFrequencyColor(letter);
   };
-  const dataKeyArray = letters.map((data) => data.label);
+  const dataKeyArray = letters.map((data) => data[value.main.xAxisValue]);
   const {
     tooltipData,
     tooltipLeft,
@@ -10599,7 +10525,7 @@ const DrawPieGraph = ({
               data
             }) => {
               var _a2, _b2, _c2, _d2;
-              const size = active2 && active2.label == data.label ? (_b2 = (_a2 = value == null ? void 0 : value.style) == null ? void 0 : _a2.pieStyle) == null ? void 0 : _b2.outerRadius : ((_d2 = (_c2 = value == null ? void 0 : value.style) == null ? void 0 : _c2.pieStyle) == null ? void 0 : _d2.outerRadius) - 3;
+              const size = active2 && active2[value.main.xAxisValue] == data[value.main.xAxisValue] ? (_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,
@@ -13068,27 +12994,17 @@ const DrawGraph = ({
   events = false,
   value
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
-  (_a = value == null ? void 0 : value.main) == null ? void 0 : _a.data;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   const margin2 = defaultMargin;
   useTooltip();
-  const data = (_b = value == null ? void 0 : value.main) == null ? void 0 : _b.data;
-  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);
-  const xValues = Array.from(new Set(data.flatMap((d2) => d2.value.map((v2) => v2.x))));
+  const data = (_a = value == null ? void 0 : value.main) == null ? void 0 : _a.data;
+  const arr = Object.keys(data[0]).filter((d2) => d2 !== value.main.xAxisValue);
+  const xValues = data.map((d2) => d2[value.main.xAxisValue]);
   const xScale = createBandScale({
     domain: xValues
   });
   const yScale = createLinearScale({
-    domain: [0, Math.max(...data.flatMap((d2) => d2.value.map((v2) => v2.y)))]
-  });
-  createOrdinalScale$1({
-    domain: dataKeyArray,
-    range: (_d = (_c = value.style) == null ? void 0 : _c.lineStyle) == null ? void 0 : _d.colorRange
+    domain: [0, Math.max(...data.flatMap((d2) => arr.map((key) => d2[key])))]
   });
   const xMax = width2 - margin2.left - margin2.right;
   const yMax = height2 - margin2.top - margin2.bottom;
@@ -13097,7 +13013,7 @@ const DrawGraph = ({
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [value.main.legendAvailable && /* @__PURE__ */ jsx(Legend, {
       value,
-      dataKeyArray
+      dataKeyArray: arr
     }), /* @__PURE__ */ jsxs(XYChart, {
       width: width2,
       height: height2,
@@ -13113,10 +13029,10 @@ const DrawGraph = ({
         orientation: "left",
         hideAxisLine: value.main.hideLeftAxisLine,
         label: value.main.leftLabel,
-        labelOffset: ((_f = (_e = value.style) == null ? void 0 : _e.labelStyle) == null ? void 0 : _f.leftLabelOffset) || 25,
+        labelOffset: ((_c = (_b = value.style) == null ? void 0 : _b.labelStyle) == null ? void 0 : _c.leftLabelOffset) || 25,
         labelProps: {
-          fill: ((_h = (_g = value.style) == null ? void 0 : _g.labelStyle) == null ? void 0 : _h.labelColor) || "black",
-          fontSize: ((_j = (_i = value.style) == null ? void 0 : _i.labelStyle) == null ? void 0 : _j.fontSize) || "12px",
+          fill: ((_e = (_d = value.style) == null ? void 0 : _d.labelStyle) == null ? void 0 : _e.labelColor) || "black",
+          fontSize: ((_g = (_f = value.style) == null ? void 0 : _f.labelStyle) == null ? void 0 : _g.fontSize) || "12px",
           fontWeight: "normal"
         },
         tickLabelProps: (e3) => {
@@ -13133,8 +13049,8 @@ const DrawGraph = ({
         hideAxisLine: value.main.hideBottomAxisLine,
         label: value.main.bottomLabel,
         labelProps: {
-          fill: ((_l = (_k = value.style) == null ? void 0 : _k.labelStyle) == null ? void 0 : _l.labelColor) || "black",
-          fontSize: ((_n = (_m = value.style) == null ? void 0 : _m.labelStyle) == null ? void 0 : _n.fontSize) || "12px",
+          fill: ((_i = (_h = value.style) == null ? void 0 : _h.labelStyle) == null ? void 0 : _i.labelColor) || "black",
+          fontSize: ((_k = (_j = value.style) == null ? void 0 : _j.labelStyle) == null ? void 0 : _k.fontSize) || "12px",
           fontWeight: "normal"
         },
         tickLabelProps: (e3) => {
@@ -13146,7 +13062,7 @@ const DrawGraph = ({
           };
         },
         tickStroke: "black",
-        labelOffset: ((_p = (_o = value.style) == null ? void 0 : _o.labelStyle) == null ? void 0 : _p.bottomLabelOffset) || 25
+        labelOffset: ((_m = (_l = value.style) == null ? void 0 : _l.labelStyle) == null ? void 0 : _m.bottomLabelOffset) || 25
       }), /* @__PURE__ */ jsx(Grid, {
         stroke: "black",
         lineStyle: {
@@ -13154,21 +13070,22 @@ const DrawGraph = ({
         },
         strokeDasharray: "8 3",
         strokeWidth: 0.3
-      }), (_r = (_q = value.main) == null ? void 0 : _q.data) == null ? void 0 : _r.map((elem, i) => {
+      }), arr == null ? void 0 : arr.map((elem, i) => {
         var _a2, _b2, _c2, _d2, _e2, _f2;
         return /* @__PURE__ */ jsxs(Fragment, {
           children: [/* @__PURE__ */ jsx(LineSeries, {
-            dataKey: elem.key,
-            data: elem.value,
+            dataKey: elem,
+            data,
             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",
             floodOpacity: 1,
             stroke: (_f2 = (_e2 = value.style) == null ? void 0 : _e2.lineStyle) == null ? void 0 : _f2.colorRange[i],
-            ...accessors
-          }), elem.value.map((datum2, index2) => /* @__PURE__ */ jsx("circle", {
-            cx: xScale(accessors.xAccessor(datum2)) + xScale.bandwidth() / 2,
-            cy: yScale(accessors.yAccessor(datum2)),
+            xAccessor: (d2) => d2[value.main.xAxisValue],
+            yAccessor: (d2) => d2[elem]
+          }), data.map((datum2, index2) => /* @__PURE__ */ jsx("circle", {
+            cx: xScale(datum2[value.main.xAxisValue]) + xScale.bandwidth() / 2,
+            cy: yScale(datum2[elem]),
             r: 3,
             fill: "white",
             stroke: "black",
@@ -13218,7 +13135,7 @@ const DrawGraph = ({
                   fontWeight: "normal",
                   color: "black"
                 },
-                children: tooltipData2.datumByKey[d2].datum.y
+                children: tooltipData2.datumByKey[d2].datum[d2]
               })]
             });
           });
@@ -13259,7 +13176,7 @@ var DrawHorizontalBarGraph = ({
   margin: margin2,
   barValue
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t5;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   const [hoveredBar, setHoveredBar] = useState({
     date: null,
     city: null
@@ -13290,7 +13207,7 @@ var DrawHorizontalBarGraph = ({
   });
   const colorScale = createOrdinalScale$1({
     domain: keys2,
-    range: [((_e = (_d = (_c = barValue.style) == null ? void 0 : _c.barStyle) == null ? void 0 : _d.color) == null ? void 0 : _e.firstBarColor) || "#aeeef8", ((_h = (_g = (_f = barValue.style) == null ? void 0 : _f.barStyle) == null ? void 0 : _g.color) == null ? void 0 : _h.secondBarColor) || "#e5fd3d", ((_k = (_j = (_i = barValue.style) == null ? void 0 : _i.barStyle) == null ? void 0 : _j.color) == null ? void 0 : _k.thirdBarColor) || "#9caff6"]
+    range: barValue.style.barStyle.colorRange
   });
   temperatureScale.rangeRound([0, xMax]);
   dateScale.rangeRound([yMax, 0]);
@@ -13370,10 +13287,10 @@ var DrawHorizontalBarGraph = ({
           style: {
             display: hoveredBar.date ? "block" : "none"
           },
-          y: barValue.main.type === "HorizontalStackBarGraph" ? ((_l = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _l.bars[hoveredBar.city].y) - (Math.min((_m = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _m.bars[0].height, 15) - ((_n = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _n.bars[0].height)) / 2 : ((_o = hoveredBar.date) == null ? void 0 : _o.y0) - (Math.min((_p = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _p.bars[0].height, 15) - ((_q = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _q.bars[0].height)) || 0,
+          y: barValue.main.type === "HorizontalStackBarGraph" ? ((_c = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _c.bars[hoveredBar.city].y) - (Math.min((_d = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _d.bars[0].height, 15) - ((_e = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _e.bars[0].height)) / 2 : ((_f = hoveredBar.date) == null ? void 0 : _f.y0) - (Math.min((_g = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _g.bars[0].height, 15) - ((_h = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _h.bars[0].height)) || 0,
           width: xMax,
-          height: barValue.main.type !== "HorizontalStackBarGraph" ? calcWidthofBar(hoveredBar == null ? void 0 : hoveredBar.date) : Math.min((_r = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _r.bars[0].height, 15),
-          fill: (_t5 = (_s = barValue.style) == null ? void 0 : _s.barStyle) == null ? void 0 : _t5.hoverBackgroundColor,
+          height: barValue.main.type !== "HorizontalStackBarGraph" ? calcWidthofBar(hoveredBar == null ? void 0 : hoveredBar.date) : Math.min((_i = hoveredBar == null ? void 0 : hoveredBar.date) == null ? void 0 : _i.bars[0].height, 15),
+          fill: (_k = (_j = barValue.style) == null ? void 0 : _j.barStyle) == null ? void 0 : _k.hoverBackgroundColor,
           opacity: 1
         }), barValue.main.type === "HorizontalStackBarGraph" ? /* @__PURE__ */ jsx(BarStackHorizontal, {
           data,
@@ -13435,6 +13352,10 @@ var DrawHorizontalBarGraph = ({
           parentWidth: width2
         })]
       })]
+    }), ((_l = barValue == null ? void 0 : barValue.main) == null ? void 0 : _l.legendAvailable) && keys2.length > 1 && /* @__PURE__ */ jsx(Legend, {
+      dataKeyArray: keys2,
+      colorRange: barValue.style.barStyle.colorRange,
+      value: barValue
     }), tooltipOpen && tooltipData && /* @__PURE__ */ jsx(ToolTip, {
       value: barValue,
       theme,
@@ -21126,14 +21047,14 @@ 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, _T, _U, _V, _W, _X, _Y, _Z, __;
   const [progress, setProgress] = useState(((_b = (_a = value == null ? void 0 : value.main) == null ? void 0 : _a.data) == null ? void 0 : _b.achieved) / ((_d = (_c = value == null ? void 0 : value.main) == null ? void 0 : _c.data) == null ? void 0 : _d.total) * 100);
   useEffect(() => {
     var _a2, _b2, _c2, _d2;
     setProgress(((_b2 = (_a2 = value == null ? void 0 : value.main) == null ? void 0 : _a2.data) == null ? void 0 : _b2.achieved) / ((_d2 = (_c2 = value == null ? void 0 : value.main) == null ? void 0 : _c2.data) == null ? void 0 : _d2.total) * 100);
   }, [value.main.data]);
   const getColor = () => {
-    return [`${theme.palette.grey[300]}`, `${theme.palette.primary.dark}`];
+    return [`${theme.myTheme.palette.grey[300]}`, `${theme.myTheme.palette.primary.dark}`];
   };
   const StyledTooltip = styled$1(({
     className,
@@ -21143,63 +21064,62 @@ const ProgressBar = ({
     classes: {
       popper: className
     }
-  }))(({
-    theme: theme2
-  }) => ({
+  }))(({}) => ({
     [`& .${tooltipClasses$1.tooltip}`]: {
       "& .MuiTooltip-arrow": {
-        color: theme2.palette.grey[300]
+        color: theme.myTheme.palette.secondary.main
       },
-      backgroundColor: theme2.palette.grey[300],
-      color: theme2.palette.text.primary,
+      backgroundColor: theme.myTheme.palette.secondary.main,
+      color: theme.myTheme.palette.text.primary,
       fontSize: 11,
-      boxShadow: `1px 2px ${theme2.palette.grey[400]}`
+      boxShadow: `1px 2px ${theme.myTheme.palette.secondary.dark}`
     }
   }));
   if ((_e = value == null ? void 0 : value.main) == null ? void 0 : _e.developOnlyProgresBar) {
-    return /* @__PURE__ */ jsx("div", {
-      style: {
-        width: "100%",
-        height: "6px",
-        margin: "auto",
-        borderRadius: "10px",
-        marginBottom: "15px",
-        position: "relative"
-      },
-      children: /* @__PURE__ */ jsx("div", {
-        style: {
-          width: "-webkit-fill-available",
-          height: "12px",
-          margin: "auto",
+    return /* @__PURE__ */ jsx(StyledTooltip, {
+      arrow: true,
+      title: /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsxs("div", {
+          style: {
+            fontWeight: "normal",
+            textAlign: "center"
+          },
+          children: [" ", "Target Achieved", " "]
+        }), /* @__PURE__ */ jsxs("div", {
+          style: {
+            fontWeight: "bold",
+            textAlign: "center"
+          },
+          children: [" ", (_g = (_f = value == null ? void 0 : value.main) == null ? void 0 : _f.data) == null ? void 0 : _g.achieved]
+        })]
+      }),
+      placement: "top-end",
+      theme,
+      children: /* @__PURE__ */ jsx(Box$1, {
+        className: "progress-bar-fill",
+        sx: {
+          width: progress > 100 ? "100%" : `${progress}%`,
+          backgroundColor: getColor()[1],
+          height: "100%",
           borderRadius: "10px",
-          backgroundColor: getColor()[0],
           marginBottom: "0px",
-          position: "absolute",
-          top: "10px",
-          left: "12.5px"
+          transition: "width 0.5 ease-out",
+          position: "relative",
+          border: "1px solid transparent",
+          "&:hover": {
+            border: "1px solid black"
+          }
         },
         children: /* @__PURE__ */ jsx("div", {
-          className: "progress-bar-fill",
           style: {
-            width: progress > 100 ? "100%" : `${progress}%`,
-            backgroundColor: getColor()[1],
-            height: "100%",
-            borderRadius: "10px",
-            marginBottom: "0px",
-            transition: "width 0.5 ease-out",
-            position: "relative"
-          },
-          children: /* @__PURE__ */ jsx("div", {
-            style: {
-              borderRadius: "50%",
-              width: "7px",
-              height: "7px",
-              backgroundColor: `${theme.palette.common.white}`,
-              position: "absolute",
-              top: "2.5px",
-              right: `2px`
-            }
-          })
+            borderRadius: "50%",
+            width: "7px",
+            height: "7px",
+            backgroundColor: `${theme.myTheme.palette.common.white}`,
+            position: "absolute",
+            top: "2px",
+            right: `2px`
+          }
         })
       })
     });
@@ -21207,8 +21127,8 @@ const ProgressBar = ({
   return /* @__PURE__ */ jsxs("div", {
     className: "container",
     style: {
-      backgroundColor: (_f = theme == null ? void 0 : theme.palette) == null ? void 0 : _f.background.main,
-      color: (_h = (_g = theme == null ? void 0 : theme.palette) == null ? void 0 : _g.text) == null ? void 0 : _h.primary,
+      backgroundColor: (_i = (_h = theme.myTheme) == null ? void 0 : _h.palette) == null ? void 0 : _i.background.main,
+      color: (_l = (_k = (_j = theme.myTheme) == null ? void 0 : _j.palette) == null ? void 0 : _k.text) == null ? void 0 : _l.primary,
       width: "auto",
       height: "auto",
       margin: "auto"
@@ -21227,9 +21147,9 @@ const ProgressBar = ({
           textAlign: "left",
           fontFamily: "inherit",
           fontSize: "16px",
-          color: ((_j = (_i = theme == null ? void 0 : theme.palette) == null ? void 0 : _i.text) == null ? void 0 : _j.secondary) || "#121926"
+          color: ((_o = (_n = (_m = theme.myTheme) == null ? void 0 : _m.palette) == null ? void 0 : _n.text) == null ? void 0 : _o.secondary) || "#121926"
         },
-        children: (_k = value == null ? void 0 : value.main) == null ? void 0 : _k.heading
+        children: (_p = value == null ? void 0 : value.main) == null ? void 0 : _p.heading
       }), /* @__PURE__ */ jsxs("div", {
         style: {
           padding: "25px 0px 0px 55px",
@@ -21237,7 +21157,7 @@ const ProgressBar = ({
           textAlign: "left",
           fontFamily: "inherit",
           fontSize: "16px",
-          color: ((_m = (_l = theme == null ? void 0 : theme.palette) == null ? void 0 : _l.text) == null ? void 0 : _m.primary) || "black"
+          color: ((_s = (_r = (_q = theme.myTheme) == null ? void 0 : _q.palette) == null ? void 0 : _r.text) == null ? void 0 : _s.primary) || "black"
         },
         children: [progress.toFixed(2), "%"]
       })]
@@ -21270,21 +21190,22 @@ const ProgressBar = ({
           children: /* @__PURE__ */ jsx(StyledTooltip, {
             arrow: true,
             title: /* @__PURE__ */ jsxs(Fragment, {
-              children: [/* @__PURE__ */ jsx("div", {
+              children: [/* @__PURE__ */ jsxs("div", {
                 style: {
                   fontWeight: "normal",
                   textAlign: "center"
                 },
-                children: " Target Achieved "
+                children: [" ", "Target Achieved", " "]
               }), /* @__PURE__ */ jsxs("div", {
                 style: {
                   fontWeight: "bold",
                   textAlign: "center"
                 },
-                children: [" ", (_o = (_n = value == null ? void 0 : value.main) == null ? void 0 : _n.data) == null ? void 0 : _o.achieved]
+                children: [" ", (_u = (_t5 = value == null ? void 0 : value.main) == null ? void 0 : _t5.data) == null ? void 0 : _u.achieved]
               })]
             }),
             placement: "top-end",
+            theme,
             children: /* @__PURE__ */ jsx(Box$1, {
               className: "progress-bar-fill",
               sx: {
@@ -21305,7 +21226,7 @@ const ProgressBar = ({
                   borderRadius: "50%",
                   width: "7px",
                   height: "7px",
-                  backgroundColor: `${theme.palette.common.white}`,
+                  backgroundColor: `${theme.myTheme.palette.common.white}`,
                   position: "absolute",
                   top: "2px",
                   right: `2px`
@@ -21318,7 +21239,7 @@ const ProgressBar = ({
             borderRadius: "50%",
             width: "30px",
             height: "30px",
-            backgroundColor: `${theme.palette.grey[300]}`,
+            backgroundColor: `${theme.myTheme.palette.grey[300]}`,
             position: "absolute",
             top: "0px"
           }
@@ -21326,7 +21247,7 @@ const ProgressBar = ({
       }), /* @__PURE__ */ jsxs("div", {
         style: {
           display: "flex",
-          color: (_q = (_p = theme == null ? void 0 : theme.palette) == null ? void 0 : _p.text) == null ? void 0 : _q.primary,
+          color: (_x = (_w = (_v = theme.myTheme) == null ? void 0 : _v.palette) == null ? void 0 : _w.text) == null ? void 0 : _x.primary,
           paddingLeft: "25px",
           width: "98%",
           margin: "auto"
@@ -21339,15 +21260,15 @@ const ProgressBar = ({
             style: {
               textAlign: "left",
               fontSize: "14px",
-              color: (_r = theme == null ? void 0 : theme.palette) == null ? void 0 : _r.grey[600]
+              color: (_z = (_y = theme.myTheme) == null ? void 0 : _y.palette) == null ? void 0 : _z.grey[600]
             },
-            children: ((_s = value == null ? void 0 : value.main) == null ? void 0 : _s.bottomLabel_1) || "Target"
+            children: ((_A = value == null ? void 0 : value.main) == null ? void 0 : _A.bottomLabel_1) || "Target"
           }), /* @__PURE__ */ jsx("div", {
             style: {
-              color: (_t5 = theme == null ? void 0 : theme.palette) == null ? void 0 : _t5.grey[600],
+              color: (_C = (_B = theme.myTheme) == null ? void 0 : _B.palette) == null ? void 0 : _C.grey[600],
               textAlign: "left"
             },
-            children: ((_v = (_u = value == null ? void 0 : value.main) == null ? void 0 : _u.data) == null ? void 0 : _v.total) || ((_x = (_w = value == null ? void 0 : value.main) == null ? void 0 : _w.data) == null ? void 0 : _x.bottomLabel_1_value)
+            children: ((_E = (_D = value == null ? void 0 : value.main) == null ? void 0 : _D.data) == null ? void 0 : _E.total) || ((_G = (_F = value == null ? void 0 : value.main) == null ? void 0 : _F.data) == null ? void 0 : _G.bottomLabel_1_value)
           })]
         }), /* @__PURE__ */ jsxs("div", {
           style: {
@@ -21357,15 +21278,15 @@ const ProgressBar = ({
             style: {
               textAlign: "center",
               fontSize: "14px",
-              color: (_y = theme == null ? void 0 : theme.palette) == null ? void 0 : _y.grey[600]
+              color: (_I = (_H = theme.myTheme) == null ? void 0 : _H.palette) == null ? void 0 : _I.grey[600]
             },
-            children: ((_z = value == null ? void 0 : value.main) == null ? void 0 : _z.bottomLabel_2) || "Achieved"
+            children: ((_J = value == null ? void 0 : value.main) == null ? void 0 : _J.bottomLabel_2) || "Achieved"
           }), /* @__PURE__ */ jsx("div", {
             style: {
               textAlign: "center",
-              color: (_A = theme == null ? void 0 : theme.palette) == null ? void 0 : _A.grey[600]
+              color: (_L = (_K = theme.myTheme) == null ? void 0 : _K.palette) == null ? void 0 : _L.grey[600]
             },
-            children: ((_C = (_B = value == null ? void 0 : value.main) == null ? void 0 : _B.data) == null ? void 0 : _C.achieved) || ((_E = (_D = value == null ? void 0 : value.main) == null ? void 0 : _D.data) == null ? void 0 : _E.bottomLabel_2_value)
+            children: ((_N = (_M = value == null ? void 0 : value.main) == null ? void 0 : _M.data) == null ? void 0 : _N.achieved) || ((_P = (_O = value == null ? void 0 : value.main) == null ? void 0 : _O.data) == null ? void 0 : _P.bottomLabel_2_value)
           })]
         }), /* @__PURE__ */ jsxs("div", {
           style: {
@@ -21375,15 +21296,15 @@ const ProgressBar = ({
             style: {
               textAlign: "right",
               fontSize: "14px",
-              color: (_F = theme == null ? void 0 : theme.palette) == null ? void 0 : _F.grey[600]
+              color: (_R = (_Q = theme.myTheme) == null ? void 0 : _Q.palette) == null ? void 0 : _R.grey[600]
             },
-            children: ((_G = value == null ? void 0 : value.main) == null ? void 0 : _G.bottomLabel_3) || "Average"
+            children: ((_S = value == null ? void 0 : value.main) == null ? void 0 : _S.bottomLabel_3) || "Remaining"
           }), /* @__PURE__ */ jsx("div", {
             style: {
               textAlign: "right",
-              color: (_H = theme == null ? void 0 : theme.palette) == null ? void 0 : _H.grey[600]
+              color: (_U = (_T = theme.myTheme) == null ? void 0 : _T.palette) == null ? void 0 : _U.grey[600]
             },
-            children: Math.max(0, ((_J = (_I = value == null ? void 0 : value.main) == null ? void 0 : _I.data) == null ? void 0 : _J.remaining) || ((_L = (_K = value == null ? void 0 : value.main) == null ? void 0 : _K.data) == null ? void 0 : _L.total) - ((_N = (_M = value == null ? void 0 : value.main) == null ? void 0 : _M.data) == null ? void 0 : _N.achieved))
+            children: Math.max(0, ((_W = (_V = value == null ? void 0 : value.main) == null ? void 0 : _V.data) == null ? void 0 : _W.remaining) || ((_Y = (_X = value == null ? void 0 : value.main) == null ? void 0 : _X.data) == null ? void 0 : _Y.total) - ((__ = (_Z = value == null ? void 0 : value.main) == null ? void 0 : _Z.data) == null ? void 0 : __.achieved))
           })]
         })]
       })]