impaktapps-design 0.2.75 → 0.2.76

package/dist/impaktapps-design.es.js

@@ -10418,6 +10418,7 @@ function useTooltipInPortal(_temp) {
     TooltipInPortal
   };
 }
+var style$3 = "";
 const BottomAxis = ({
   data,
   yMax,
@@ -10427,32 +10428,37 @@ 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(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"
-      };
-    }
+  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 {
+          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 = ({
@@ -10905,8 +10911,6 @@ function Legend({
             return /* @__PURE__ */ jsxs(LegendItem, {
               margin: "0 5px",
               onClick: (events) => {
-                if (events)
-                  alert(`clicked: ${JSON.stringify(label)}`);
               },
               children: [/* @__PURE__ */ jsx("svg", {
                 width: legendGlyphSize,
@@ -11392,7 +11396,7 @@ const Product1 = [
   { x: "g", y: 50 }
 ];
 const finalDataProvider = (type2, value, theme) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t5, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F;
+  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;
   switch (type2) {
     case "BarGraph":
     case "StackBarGraph":
@@ -11537,7 +11541,7 @@ const finalDataProvider = (type2, value, theme) => {
             }
           },
           pieStyle: {
-            colorRange: ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)"],
+            colorRange: ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)", "#3f84b5", "#b5993f", "#fc6f6f"],
             outerRadius: 120,
             innerRadius: 60,
             cornerRadius: 2,
@@ -11557,6 +11561,7 @@ const finalDataProvider = (type2, value, theme) => {
           numHidden: false,
           tooltipDataKey: ["MAMA New Project", "Second", "Third"],
           axisLeft: true,
+          legendAvailable: true,
           axisBottom: true,
           hideLeftAxisLine: false,
           hideBottomAxisLine: false,
@@ -11566,14 +11571,13 @@ const finalDataProvider = (type2, value, theme) => {
             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: "90%",
+            width: "100%",
             height: "300",
             borderRadius: "20px",
             padding: "10px 0 2px 0",
@@ -11590,33 +11594,54 @@ 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,
-            ...(_w = value == null ? void 0 : value.style) == null ? void 0 : _w.labelStyle
+            ...(_A = value == null ? void 0 : value.style) == null ? void 0 : _A.labelStyle
           },
           lineStyle: {
             colorRange: ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)"],
             lineAreaColor: "none",
             lineAreaOpacity: 0.2,
-            ...(_x = value == null ? void 0 : value.style) == null ? void 0 : _x.lineStyle
+            ...(_B = value == null ? void 0 : value.style) == null ? void 0 : _B.lineStyle
           }
         }
       };
     case "HorizontalBarGraph":
       return {
         main: {
-          data: ((_y = value == null ? void 0 : value.main) == null ? void 0 : _y.data) || [{ y: "Anant Sharma", x: 60 }, { y: "Pankaj Chauhan", x: 60 }, { y: "satendra Raghav", x: 150 }, { y: "Vivek Pahadi", x: 80 }, { y: "Siddarth verma", x: 100 }],
+          data: ((_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 }],
           header: " ",
           bottomLabel: "Name of Employe",
           leftLabel: "Value",
           axisLeft: true,
           axisBottom: true,
           hideBottomTicks: false,
-          hideLeftTicks: ((_z = value == null ? void 0 : value.main) == null ? void 0 : _z.data) ? true : false,
-          hideLeftAxisLine: ((_A = value == null ? void 0 : value.main) == null ? void 0 : _A.data) ? true : false,
+          hideLeftTicks: ((_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,
           hideBottomAxisLine: false,
           bottomAxisWidth: "10px",
           ...value.main
@@ -11628,7 +11653,7 @@ const finalDataProvider = (type2, value, theme) => {
             height: "300",
             borderRadius: "20px",
             padding: "10px 0 2px 0",
-            ...(_B = value == null ? void 0 : value.style) == null ? void 0 : _B.containerStyle
+            ...(_F = value == null ? void 0 : value.style) == null ? void 0 : _F.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -11639,12 +11664,12 @@ const finalDataProvider = (type2, value, theme) => {
             width: "100%",
             fontSize: "18px",
             color: theme.palette.text.primary,
-            ...(_C = value == null ? void 0 : value.style) == null ? void 0 : _C.headerStyle
+            ...(_G = value == null ? void 0 : value.style) == null ? void 0 : _G.headerStyle
           },
           tooltipStyle: {
             padding: "6px",
             borderRadius: "2px",
-            ...(_D = value == null ? void 0 : value.style) == null ? void 0 : _D.tooltipStyle
+            ...(_H = value == null ? void 0 : value.style) == null ? void 0 : _H.tooltipStyle
           },
           labelStyle: {
             margin: { top: 10, left: 110, right: 40, bottom: 40 },
@@ -11655,11 +11680,11 @@ const finalDataProvider = (type2, value, theme) => {
             tickColor: theme.palette.text.primary,
             rightAxisWidth: "0.3px",
             fontSize: "10px",
-            ...(_E = value == null ? void 0 : value.style) == null ? void 0 : _E.labelStyle
+            ...(_I = value == null ? void 0 : value.style) == null ? void 0 : _I.labelStyle
           },
           barStyle: {
             color: "#6c5efb",
-            ...(_F = value == null ? void 0 : value.style) == null ? void 0 : _F.barStyle
+            ...(_J = value == null ? void 0 : value.style) == null ? void 0 : _J.barStyle
           }
         }
       };
@@ -11703,12 +11728,13 @@ const DrawPieGraph = ({
   parentWidth,
   parentHeight
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
   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: letters.map((l2) => l2[arr[0]]),
+    domain: labelArray,
     range: (_g = (_f = value == null ? void 0 : value.style) == null ? void 0 : _f.pieStyle) == null ? void 0 : _g.colorRange
   });
   const {
@@ -11735,7 +11761,9 @@ const DrawPieGraph = ({
   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
+      value,
+      colorRange: (_j = (_i = value == null ? void 0 : value.style) == null ? void 0 : _i.pieStyle) == null ? void 0 : _j.colorRange,
+      dataKeyArray: labelArray
     }), /* @__PURE__ */ jsx("svg", {
       width: parentWidth,
       height: parentHeight,
@@ -11747,10 +11775,10 @@ const DrawPieGraph = ({
           data: letters,
           pieSortValues,
           pieValue: frequency,
-          outerRadius: (_j = (_i = value == null ? void 0 : value.style) == null ? void 0 : _i.pieStyle) == null ? void 0 : _j.outerRadius,
-          innerRadius: (_l = (_k = value == null ? void 0 : value.style) == null ? void 0 : _k.pieStyle) == null ? void 0 : _l.innerRadius,
-          cornerRadius: (_n = (_m = value == null ? void 0 : value.style) == null ? void 0 : _m.pieStyle) == null ? void 0 : _n.cornerRadius,
-          padAngle: (_p = (_o = value == null ? void 0 : value.style) == null ? void 0 : _o.pieStyle) == null ? void 0 : _p.padAngle,
+          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,
           children: (pie2) => {
             return pie2.arcs.map((arc2, index2) => {
               var _a2, _b2, _c2, _d2;
@@ -11805,9 +11833,11 @@ 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("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(Fragment, {
+      children: /* @__PURE__ */ jsx("div", {
+        style: pieData.style.headerStyle,
+        children: (_b = pieData == null ? void 0 : pieData.main) == null ? void 0 : _b.header
+      })
     }), PieRender]
   });
 };
@@ -19772,7 +19802,9 @@ function AnimatedLineSeries(props) {
   }));
 }
 const DrawGraph = ({
-  value
+  value,
+  parentWidth,
+  parentHeight
 }) => {
   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;
@@ -19781,11 +19813,13 @@ const DrawGraph = ({
     xAccessor: (d2) => d2[arr[0]],
     yAccessor: (d2) => d2[arr[1]]
   };
-  return /* @__PURE__ */ jsxs(Fragment, {
+  return /* @__PURE__ */ jsxs("div", {
     children: [value.main.legendAvailable && /* @__PURE__ */ jsx(Legend, {
-      value
+      value,
+      colorRange: (_c = (_b = value == null ? void 0 : value.style) == null ? void 0 : _b.lineStyle) == null ? void 0 : _c.colorRange
     }), /* @__PURE__ */ jsxs(XYChart, {
-      height: parseInt((_c = (_b = value.style) == null ? void 0 : _b.containerStyle) == null ? void 0 : _c.height),
+      width: parentWidth,
+      height: parentHeight,
       xScale: {
         type: "band"
       },
@@ -19867,14 +19901,23 @@ 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
-    }), /* @__PURE__ */ jsx(DrawGraph, {
-      value: lineData
-    })]
+    }), LineRender]
   });
 };
 var DrawHorizontalBarGraph = withTooltip(({
@@ -20041,7 +20084,7 @@ const ProgressBar = ({
   value,
   theme
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t5, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t5, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N;
   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;
@@ -20203,14 +20246,14 @@ const ProgressBar = ({
               fontSize: "10px",
               marginBottom: "10px"
             },
-            children: ((_J = value == null ? void 0 : value.main) == null ? void 0 : _J.bottomLabel_3) || "Average"
+            children: ((_J = value == null ? void 0 : value.main) == null ? void 0 : _J.bottomLabel_3) || "Remaining"
           }), /* @__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: ((_M = value == null ? void 0 : value.main) == null ? void 0 : _M.daysCount) ? Math.round(((_O = (_N = value == null ? void 0 : value.main) == null ? void 0 : _N.data) == null ? void 0 : _O.achieved) / ((_P = value == null ? void 0 : value.main) == null ? void 0 : _P.daysCount)) + ((_Q = value == null ? void 0 : value.main) == null ? void 0 : _Q.bottomLabel_3_averageLabel) || "/day" : (_S = (_R = value == null ? void 0 : value.main) == null ? void 0 : _R.data) == null ? void 0 : _S.bottomLabel_3_value
+            children: (_N = (_M = value == null ? void 0 : value.main) == null ? void 0 : _M.data) == null ? void 0 : _N.bottomLabel_3_value
           })]
         })]
       })]
@@ -38784,51 +38827,49 @@ const SpeedoMeter = ({
   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;
-  return /* @__PURE__ */ jsxs("div", {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
+  return /* @__PURE__ */ jsx("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: [((_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", {
+    children: /* @__PURE__ */ jsx("div", {
       style: {
         width: "100%",
-        minWidth: 500,
         display: "flex",
         justifyContent: "center",
-        overflow: "auto"
+        alignItems: "center",
+        overflowX: "auto"
       },
       children: /* @__PURE__ */ jsx(ReactSpeedometer, {
         forceRender: true,
-        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"
+        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"
       })
-    })]
+    })
   });
 };
 function _extends() {