impaktapps-design 0.2.992 → 0.2.993-alpha.10

package/dist/impaktapps-design.es.js

@@ -123,7 +123,7 @@ var classnames = { exports: {} };
   })();
 })(classnames);
 var cx = classnames.exports;
-var _excluded$S = ["top", "left", "transform", "className", "children", "innerRef"];
+var _excluded$T = ["top", "left", "transform", "className", "children", "innerRef"];
 function _extends$J() {
   _extends$J = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -138,7 +138,7 @@ function _extends$J() {
   };
   return _extends$J.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$w(source, excluded) {
+function _objectWithoutPropertiesLoose$x(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -153,7 +153,7 @@ function _objectWithoutPropertiesLoose$w(source, excluded) {
   return target;
 }
 function Group(_ref) {
-  var _ref$top = _ref.top, top2 = _ref$top === void 0 ? 0 : _ref$top, _ref$left = _ref.left, left2 = _ref$left === void 0 ? 0 : _ref$left, transform2 = _ref.transform, className = _ref.className, children2 = _ref.children, innerRef = _ref.innerRef, restProps = _objectWithoutPropertiesLoose$w(_ref, _excluded$S);
+  var _ref$top = _ref.top, top2 = _ref$top === void 0 ? 0 : _ref$top, _ref$left = _ref.left, left2 = _ref$left === void 0 ? 0 : _ref$left, transform2 = _ref.transform, className = _ref.className, children2 = _ref.children, innerRef = _ref.innerRef, restProps = _objectWithoutPropertiesLoose$x(_ref, _excluded$T);
   return /* @__PURE__ */ React__default.createElement("g", _extends$J({
     ref: innerRef,
     className: cx("visx-group", className),
@@ -1947,7 +1947,7 @@ function pie$2(_temp4) {
     setNumberOrNumberAccessor$2(path2.endAngle, endAngle);
   return path2;
 }
-var _excluded$R = ["className", "top", "left", "data", "centroid", "innerRadius", "outerRadius", "cornerRadius", "startAngle", "endAngle", "padAngle", "padRadius", "pieSort", "pieSortValues", "pieValue", "children", "fill"];
+var _excluded$S = ["className", "top", "left", "data", "centroid", "innerRadius", "outerRadius", "cornerRadius", "startAngle", "endAngle", "padAngle", "padRadius", "pieSort", "pieSortValues", "pieValue", "children", "fill"];
 function _extends$I() {
   _extends$I = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -1962,7 +1962,7 @@ function _extends$I() {
   };
   return _extends$I.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$v(source, excluded) {
+function _objectWithoutPropertiesLoose$w(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -1977,7 +1977,7 @@ function _objectWithoutPropertiesLoose$v(source, excluded) {
   return target;
 }
 function Pie(_ref) {
-  var className = _ref.className, top2 = _ref.top, left2 = _ref.left, _ref$data = _ref.data, data = _ref$data === void 0 ? [] : _ref$data, centroid2 = _ref.centroid, _ref$innerRadius = _ref.innerRadius, innerRadius = _ref$innerRadius === void 0 ? 0 : _ref$innerRadius, outerRadius = _ref.outerRadius, cornerRadius = _ref.cornerRadius, startAngle = _ref.startAngle, endAngle = _ref.endAngle, padAngle = _ref.padAngle, padRadius = _ref.padRadius, pieSort = _ref.pieSort, pieSortValues = _ref.pieSortValues, pieValue = _ref.pieValue, children2 = _ref.children, _ref$fill = _ref.fill, fill = _ref$fill === void 0 ? "" : _ref$fill, restProps = _objectWithoutPropertiesLoose$v(_ref, _excluded$R);
+  var className = _ref.className, top2 = _ref.top, left2 = _ref.left, _ref$data = _ref.data, data = _ref$data === void 0 ? [] : _ref$data, centroid2 = _ref.centroid, _ref$innerRadius = _ref.innerRadius, innerRadius = _ref$innerRadius === void 0 ? 0 : _ref$innerRadius, outerRadius = _ref.outerRadius, cornerRadius = _ref.cornerRadius, startAngle = _ref.startAngle, endAngle = _ref.endAngle, padAngle = _ref.padAngle, padRadius = _ref.padRadius, pieSort = _ref.pieSort, pieSortValues = _ref.pieSortValues, pieValue = _ref.pieValue, children2 = _ref.children, _ref$fill = _ref.fill, fill = _ref$fill === void 0 ? "" : _ref$fill, restProps = _objectWithoutPropertiesLoose$w(_ref, _excluded$S);
   var path2 = arc$2({
     innerRadius,
     outerRadius,
@@ -2013,7 +2013,7 @@ function Pie(_ref) {
     }, restProps)), centroid2 == null ? void 0 : centroid2(path2.centroid(arc2), arc2));
   }));
 }
-var _excluded$Q = ["from", "to", "fill", "className", "innerRef"];
+var _excluded$R = ["from", "to", "fill", "className", "innerRef"];
 function _extends$H() {
   _extends$H = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -2028,7 +2028,7 @@ function _extends$H() {
   };
   return _extends$H.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$u(source, excluded) {
+function _objectWithoutPropertiesLoose$v(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2049,7 +2049,7 @@ function Line$2(_ref) {
   } : _ref$from, _ref$to = _ref.to, to = _ref$to === void 0 ? {
     x: 1,
     y: 1
-  } : _ref$to, _ref$fill = _ref.fill, fill = _ref$fill === void 0 ? "transparent" : _ref$fill, className = _ref.className, innerRef = _ref.innerRef, restProps = _objectWithoutPropertiesLoose$u(_ref, _excluded$Q);
+  } : _ref$to, _ref$fill = _ref.fill, fill = _ref$fill === void 0 ? "transparent" : _ref$fill, className = _ref.className, innerRef = _ref.innerRef, restProps = _objectWithoutPropertiesLoose$v(_ref, _excluded$R);
   var isRectilinear = from2.x === to.x || from2.y === to.y;
   return /* @__PURE__ */ React__default.createElement("line", _extends$H({
     ref: innerRef,
@@ -2062,7 +2062,7 @@ function Line$2(_ref) {
     shapeRendering: isRectilinear ? "crispEdges" : "auto"
   }, restProps));
 }
-var _excluded$P = ["className", "innerRef"];
+var _excluded$Q = ["className", "innerRef"];
 function _extends$G() {
   _extends$G = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -2077,7 +2077,7 @@ function _extends$G() {
   };
   return _extends$G.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$t(source, excluded) {
+function _objectWithoutPropertiesLoose$u(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2092,7 +2092,7 @@ function _objectWithoutPropertiesLoose$t(source, excluded) {
   return target;
 }
 function Bar(_ref) {
-  var className = _ref.className, innerRef = _ref.innerRef, restProps = _objectWithoutPropertiesLoose$t(_ref, _excluded$P);
+  var className = _ref.className, innerRef = _ref.innerRef, restProps = _objectWithoutPropertiesLoose$u(_ref, _excluded$Q);
   return /* @__PURE__ */ React__default.createElement("rect", _extends$G({
     ref: innerRef,
     className: cx("visx-bar", className)
@@ -2106,7 +2106,7 @@ function getBandwidth(scale) {
   var domain2 = scale.domain();
   return Math.abs(range2[range2.length - 1] - range2[0]) / domain2.length;
 }
-var _excluded$O = ["data", "className", "top", "left", "x0", "x0Scale", "x1Scale", "yScale", "color", "keys", "height", "children"];
+var _excluded$P = ["data", "className", "top", "left", "x0", "x0Scale", "x1Scale", "yScale", "color", "keys", "height", "children"];
 function _extends$F() {
   _extends$F = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -2121,7 +2121,7 @@ function _extends$F() {
   };
   return _extends$F.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$s(source, excluded) {
+function _objectWithoutPropertiesLoose$t(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2136,7 +2136,7 @@ function _objectWithoutPropertiesLoose$s(source, excluded) {
   return target;
 }
 function BarGroup(_ref) {
-  var data = _ref.data, className = _ref.className, top2 = _ref.top, left2 = _ref.left, x02 = _ref.x0, x0Scale = _ref.x0Scale, x1Scale = _ref.x1Scale, yScale = _ref.yScale, color2 = _ref.color, keys2 = _ref.keys, height2 = _ref.height, children2 = _ref.children, restProps = _objectWithoutPropertiesLoose$s(_ref, _excluded$O);
+  var data = _ref.data, className = _ref.className, top2 = _ref.top, left2 = _ref.left, x02 = _ref.x0, x0Scale = _ref.x0Scale, x1Scale = _ref.x1Scale, yScale = _ref.yScale, color2 = _ref.color, keys2 = _ref.keys, height2 = _ref.height, children2 = _ref.children, restProps = _objectWithoutPropertiesLoose$t(_ref, _excluded$P);
   var barWidth = getBandwidth(x1Scale);
   var barGroups = data.map(function(group2, i) {
     return {
@@ -2179,6 +2179,83 @@ function BarGroup(_ref) {
     }));
   }));
 }
+var _excluded$O = ["data", "className", "top", "left", "x", "y0", "y0Scale", "y1Scale", "xScale", "color", "keys", "width", "children"];
+function _extends$E() {
+  _extends$E = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$E.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose$s(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function BarGroupHorizontal(_ref) {
+  var data = _ref.data, className = _ref.className, top2 = _ref.top, left2 = _ref.left, _ref$x = _ref.x, x2 = _ref$x === void 0 ? function() {
+    return 0;
+  } : _ref$x, y02 = _ref.y0, y0Scale = _ref.y0Scale, y1Scale = _ref.y1Scale, xScale = _ref.xScale, color2 = _ref.color, keys2 = _ref.keys;
+  _ref.width;
+  var children2 = _ref.children, restProps = _objectWithoutPropertiesLoose$s(_ref, _excluded$O);
+  var barHeight = getBandwidth(y1Scale);
+  var barGroups = data.map(function(group2, i) {
+    return {
+      index: i,
+      y0: y0Scale(y02(group2)) || 0,
+      bars: keys2.map(function(key, j) {
+        var value = group2[key];
+        return {
+          index: j,
+          key,
+          value,
+          height: barHeight,
+          x: x2(value) || 0,
+          y: y1Scale(key) || 0,
+          color: color2(key, j),
+          width: xScale(value) || 0
+        };
+      })
+    };
+  });
+  if (children2)
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children2(barGroups));
+  return /* @__PURE__ */ React__default.createElement(Group, {
+    className: cx("visx-bar-group-horizontal", className),
+    top: top2,
+    left: left2
+  }, barGroups.map(function(barGroup) {
+    return /* @__PURE__ */ React__default.createElement(Group, {
+      key: "bar-group-" + barGroup.index + "-" + barGroup.y0,
+      top: barGroup.y0
+    }, barGroup.bars.map(function(bar) {
+      return /* @__PURE__ */ React__default.createElement(Bar, _extends$E({
+        key: "bar-group-bar-" + barGroup.index + "-" + bar.index + "-" + bar.value + "-" + bar.key,
+        x: bar.x,
+        y: bar.y,
+        width: bar.width,
+        height: bar.height,
+        fill: bar.color
+      }, restProps));
+    }));
+  }));
+}
 function getFirstItem(d2) {
   return d2 == null ? void 0 : d2[0];
 }
@@ -2186,8 +2263,8 @@ function getSecondItem(d2) {
   return d2 == null ? void 0 : d2[1];
 }
 var _excluded$N = ["data", "className", "top", "left", "x", "y0", "y1", "xScale", "yScale", "color", "keys", "value", "order", "offset", "children"];
-function _extends$E() {
-  _extends$E = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$D() {
+  _extends$D = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2198,7 +2275,7 @@ function _extends$E() {
     }
     return target;
   };
-  return _extends$E.apply(this, arguments);
+  return _extends$D.apply(this, arguments);
 }
 function _objectWithoutPropertiesLoose$r(source, excluded) {
   if (source == null)
@@ -2257,7 +2334,7 @@ function BarStack(_ref) {
     left: left2
   }, barStacks.map(function(barStack) {
     return barStack.bars.map(function(bar) {
-      return /* @__PURE__ */ React__default.createElement(Bar, _extends$E({
+      return /* @__PURE__ */ React__default.createElement(Bar, _extends$D({
         key: "bar-stack-" + barStack.index + "-" + bar.index,
         x: bar.x,
         y: bar.y,
@@ -2269,8 +2346,8 @@ function BarStack(_ref) {
   }));
 }
 var _excluded$M = ["data", "className", "top", "left", "y", "x0", "x1", "xScale", "yScale", "color", "keys", "value", "order", "offset", "children"];
-function _extends$D() {
-  _extends$D = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$C() {
+  _extends$C = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2281,7 +2358,7 @@ function _extends$D() {
     }
     return target;
   };
-  return _extends$D.apply(this, arguments);
+  return _extends$C.apply(this, arguments);
 }
 function _objectWithoutPropertiesLoose$q(source, excluded) {
   if (source == null)
@@ -2340,7 +2417,7 @@ function BarStackHorizontal(_ref) {
     left: left2
   }, barStacks.map(function(barStack) {
     return barStack.bars.map(function(bar) {
-      return /* @__PURE__ */ React__default.createElement(Bar, _extends$D({
+      return /* @__PURE__ */ React__default.createElement(Bar, _extends$C({
         key: "bar-stack-" + barStack.index + "-" + bar.index,
         x: bar.x,
         y: bar.y,
@@ -7572,8 +7649,8 @@ function useText(props) {
   };
 }
 var _excluded$K = ["dx", "dy", "textAnchor", "innerRef", "innerTextRef", "verticalAnchor", "angle", "lineHeight", "scaleToFit", "capHeight", "width"];
-function _extends$C() {
-  _extends$C = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$B() {
+  _extends$B = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -7584,7 +7661,7 @@ function _extends$C() {
     }
     return target;
   };
-  return _extends$C.apply(this, arguments);
+  return _extends$B.apply(this, arguments);
 }
 function _objectWithoutPropertiesLoose$o(source, excluded) {
   if (source == null)
@@ -7620,7 +7697,7 @@ function Text(props) {
     y: dy,
     fontSize,
     style: SVG_STYLE
-  }, wordsByLines.length > 0 ? /* @__PURE__ */ React__default.createElement("text", _extends$C({
+  }, wordsByLines.length > 0 ? /* @__PURE__ */ React__default.createElement("text", _extends$B({
     ref: innerTextRef,
     transform: transform2
   }, textProps, {
@@ -7661,8 +7738,8 @@ function getLabelTransform(_ref) {
     transform: transform2
   };
 }
-function _extends$B() {
-  _extends$B = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$A() {
+  _extends$A = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -7673,7 +7750,7 @@ function _extends$B() {
     }
     return target;
   };
-  return _extends$B.apply(this, arguments);
+  return _extends$A.apply(this, arguments);
 }
 function Ticks(_ref) {
   var hideTicks = _ref.hideTicks, horizontal = _ref.horizontal, orientation = _ref.orientation, tickClassName = _ref.tickClassName, tickComponent = _ref.tickComponent, allTickLabelProps = _ref.tickLabelProps, _ref$tickStroke = _ref.tickStroke, tickStroke = _ref$tickStroke === void 0 ? "#222" : _ref$tickStroke, tickTransform = _ref.tickTransform, ticks2 = _ref.ticks, strokeWidth = _ref.strokeWidth, tickLineProps = _ref.tickLineProps;
@@ -7687,24 +7764,24 @@ function Ticks(_ref) {
       key: "visx-tick-" + value + "-" + index2,
       className: cx("visx-axis-tick", tickClassName),
       transform: tickTransform
-    }, !hideTicks && /* @__PURE__ */ React__default.createElement(Line$2, _extends$B({
+    }, !hideTicks && /* @__PURE__ */ React__default.createElement(Line$2, _extends$A({
       from: from2,
       to,
       stroke: tickStroke,
       strokeWidth,
       strokeLinecap: "square"
-    }, tickLineProps)), tickComponent ? tickComponent(_extends$B({}, tickLabelProps, {
+    }, tickLineProps)), tickComponent ? tickComponent(_extends$A({}, tickLabelProps, {
       x: to.x,
       y: tickYCoord,
       formattedValue
-    })) : /* @__PURE__ */ React__default.createElement(Text, _extends$B({
+    })) : /* @__PURE__ */ React__default.createElement(Text, _extends$A({
       x: to.x,
       y: tickYCoord
     }, tickLabelProps), formattedValue));
   });
 }
-function _extends$A() {
-  _extends$A = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$z() {
+  _extends$z = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -7715,7 +7792,7 @@ function _extends$A() {
     }
     return target;
   };
-  return _extends$A.apply(this, arguments);
+  return _extends$z.apply(this, arguments);
 }
 var defaultTextProps = {
   textAnchor: "middle",
@@ -7725,7 +7802,7 @@ var defaultTextProps = {
 };
 function AxisRenderer(_ref) {
   var axisFromPoint = _ref.axisFromPoint, axisLineClassName = _ref.axisLineClassName, axisToPoint = _ref.axisToPoint, hideAxisLine = _ref.hideAxisLine, hideTicks = _ref.hideTicks, horizontal = _ref.horizontal, _ref$label = _ref.label, label = _ref$label === void 0 ? "" : _ref$label, labelClassName = _ref.labelClassName, _ref$labelOffset = _ref.labelOffset, labelOffset = _ref$labelOffset === void 0 ? 14 : _ref$labelOffset, _ref$labelProps = _ref.labelProps, labelProps = _ref$labelProps === void 0 ? defaultTextProps : _ref$labelProps, _ref$orientation = _ref.orientation, orientation = _ref$orientation === void 0 ? Orientation$1.bottom : _ref$orientation, scale = _ref.scale, _ref$stroke = _ref.stroke, stroke = _ref$stroke === void 0 ? "#222" : _ref$stroke, strokeDasharray = _ref.strokeDasharray, _ref$strokeWidth = _ref.strokeWidth, strokeWidth = _ref$strokeWidth === void 0 ? 1 : _ref$strokeWidth, tickClassName = _ref.tickClassName, tickComponent = _ref.tickComponent, tickLineProps = _ref.tickLineProps, tickLabelProps = _ref.tickLabelProps, _ref$tickLength = _ref.tickLength, tickLength = _ref$tickLength === void 0 ? 8 : _ref$tickLength, _ref$tickStroke = _ref.tickStroke, tickStroke = _ref$tickStroke === void 0 ? "#222" : _ref$tickStroke, tickTransform = _ref.tickTransform, ticks2 = _ref.ticks, _ref$ticksComponent = _ref.ticksComponent, ticksComponent = _ref$ticksComponent === void 0 ? Ticks : _ref$ticksComponent;
-  var tickLabelPropsDefault = _extends$A({}, defaultTextProps, typeof tickLabelProps === "object" ? tickLabelProps : null);
+  var tickLabelPropsDefault = _extends$z({}, defaultTextProps, typeof tickLabelProps === "object" ? tickLabelProps : null);
   var allTickLabelProps = ticks2.map(function(_ref2) {
     var value = _ref2.value, index2 = _ref2.index;
     return typeof tickLabelProps === "function" ? tickLabelProps(value, index2, ticks2) : tickLabelPropsDefault;
@@ -7753,7 +7830,7 @@ function AxisRenderer(_ref) {
     stroke,
     strokeWidth,
     strokeDasharray
-  }), label && /* @__PURE__ */ React__default.createElement(Text, _extends$A({
+  }), label && /* @__PURE__ */ React__default.createElement(Text, _extends$z({
     className: cx("visx-axis-label", labelClassName)
   }, getLabelTransform({
     labelOffset,
@@ -7837,8 +7914,8 @@ function createPoint(_ref, horizontal) {
     y: x2
   });
 }
-function _extends$z() {
-  _extends$z = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$y() {
+  _extends$y = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -7849,7 +7926,7 @@ function _extends$z() {
     }
     return target;
   };
-  return _extends$z.apply(this, arguments);
+  return _extends$y.apply(this, arguments);
 }
 var defaultAxisRangePadding = 0;
 function getAxisRangePaddingConfig(originalRangePadding) {
@@ -7859,14 +7936,14 @@ function getAxisRangePaddingConfig(originalRangePadding) {
   return typeof originalRangePadding === "number" ? {
     start: originalRangePadding,
     end: originalRangePadding
-  } : _extends$z({
+  } : _extends$y({
     start: defaultAxisRangePadding,
     end: defaultAxisRangePadding
   }, originalRangePadding);
 }
 var _excluded$J = ["children", "axisClassName", "hideAxisLine", "hideTicks", "hideZero", "left", "numTicks", "orientation", "rangePadding", "scale", "tickFormat", "tickLength", "tickValues", "top"];
-function _extends$y() {
-  _extends$y = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$x() {
+  _extends$x = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -7877,7 +7954,7 @@ function _extends$y() {
     }
     return target;
   };
-  return _extends$y.apply(this, arguments);
+  return _extends$x.apply(this, arguments);
 }
 function _objectWithoutPropertiesLoose$n(source, excluded) {
   if (source == null)
@@ -7940,7 +8017,7 @@ function Axis$1(_ref) {
     className: cx("visx-axis", axisClassName),
     top: top2,
     left: left2
-  }, children2(_extends$y({}, restProps, {
+  }, children2(_extends$x({}, restProps, {
     axisFromPoint,
     axisToPoint,
     hideAxisLine,
@@ -7959,8 +8036,8 @@ function Axis$1(_ref) {
   })));
 }
 var _excluded$I = ["axisClassName", "labelOffset", "tickLength", "tickLabelProps"];
-function _extends$x() {
-  _extends$x = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$w() {
+  _extends$w = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -7971,7 +8048,7 @@ function _extends$x() {
     }
     return target;
   };
-  return _extends$x.apply(this, arguments);
+  return _extends$w.apply(this, arguments);
 }
 function _objectWithoutPropertiesLoose$m(source, excluded) {
   if (source == null)
@@ -7997,8 +8074,8 @@ var leftTickLabelProps = {
 };
 function AxisLeft(_ref) {
   var axisClassName = _ref.axisClassName, _ref$labelOffset = _ref.labelOffset, labelOffset = _ref$labelOffset === void 0 ? 36 : _ref$labelOffset, _ref$tickLength = _ref.tickLength, tickLength = _ref$tickLength === void 0 ? 8 : _ref$tickLength, tickLabelProps = _ref.tickLabelProps, restProps = _objectWithoutPropertiesLoose$m(_ref, _excluded$I);
-  var tickLabelPropsFinal = typeof tickLabelProps === "function" ? tickLabelProps : _extends$x({}, leftTickLabelProps, tickLabelProps);
-  return /* @__PURE__ */ React__default.createElement(Axis$1, _extends$x({
+  var tickLabelPropsFinal = typeof tickLabelProps === "function" ? tickLabelProps : _extends$w({}, leftTickLabelProps, tickLabelProps);
+  return /* @__PURE__ */ React__default.createElement(Axis$1, _extends$w({
     axisClassName: cx("visx-axis-left", axisClassName),
     labelOffset,
     orientation: Orientation$1.left,
@@ -8007,8 +8084,8 @@ function AxisLeft(_ref) {
   }, restProps));
 }
 var _excluded$H = ["axisClassName", "labelOffset", "tickLength", "tickLabelProps"];
-function _extends$w() {
-  _extends$w = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$v() {
+  _extends$v = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -8019,7 +8096,7 @@ function _extends$w() {
     }
     return target;
   };
-  return _extends$w.apply(this, arguments);
+  return _extends$v.apply(this, arguments);
 }
 function _objectWithoutPropertiesLoose$l(source, excluded) {
   if (source == null)
@@ -8044,8 +8121,8 @@ var bottomTickLabelProps = {
 };
 function AxisBottom(_ref) {
   var axisClassName = _ref.axisClassName, _ref$labelOffset = _ref.labelOffset, labelOffset = _ref$labelOffset === void 0 ? 8 : _ref$labelOffset, _ref$tickLength = _ref.tickLength, tickLength = _ref$tickLength === void 0 ? 8 : _ref$tickLength, tickLabelProps = _ref.tickLabelProps, restProps = _objectWithoutPropertiesLoose$l(_ref, _excluded$H);
-  var tickLabelPropsFinal = typeof tickLabelProps === "function" ? tickLabelProps : _extends$w({}, bottomTickLabelProps, tickLabelProps);
-  return /* @__PURE__ */ React__default.createElement(Axis$1, _extends$w({
+  var tickLabelPropsFinal = typeof tickLabelProps === "function" ? tickLabelProps : _extends$v({}, bottomTickLabelProps, tickLabelProps);
+  return /* @__PURE__ */ React__default.createElement(Axis$1, _extends$v({
     axisClassName: cx("visx-axis-bottom", axisClassName),
     labelOffset,
     orientation: Orientation$1.bottom,
@@ -8086,6 +8163,37 @@ const LeftAxis = ({
     }
   });
 };
+const BottomAxis = ({
+  data,
+  yMax,
+  value,
+  xScale,
+  parentWidth,
+  left: left2
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  return /* @__PURE__ */ jsx(AxisBottom, {
+    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) !== void 0 ? (_c = value.main) == null ? void 0 : _c.hideBottomAxisLine : true,
+    strokeWidth: (_e = (_d = value.style) == null ? void 0 : _d.labelStyle) == null ? void 0 : _e.bottomAxisWidth,
+    scale: xScale,
+    stroke: (_g = (_f = value.style) == null ? void 0 : _f.labelStyle) == null ? void 0 : _g.tickColor,
+    labelOffset: (_i = (_h = value.style) == null ? void 0 : _h.labelStyle) == null ? void 0 : _i.bottomLabelOffset,
+    label: (_j = value.main) == null ? void 0 : _j.bottomLabel,
+    tickStroke: (_l = (_k = value.style) == null ? void 0 : _k.labelStyle) == null ? void 0 : _l.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) || 18,
+        textAnchor: "middle"
+      };
+    }
+  });
+};
 var _excluded$G = ["tooltipOpen"];
 function _objectWithoutPropertiesLoose$k(source, excluded) {
   if (source == null)
@@ -8101,8 +8209,8 @@ function _objectWithoutPropertiesLoose$k(source, excluded) {
   }
   return target;
 }
-function _extends$v() {
-  _extends$v = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$u() {
+  _extends$u = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -8113,17 +8221,17 @@ function _extends$v() {
     }
     return target;
   };
-  return _extends$v.apply(this, arguments);
+  return _extends$u.apply(this, arguments);
 }
 function useTooltip(initialTooltipState) {
-  var _useState = useState(_extends$v({
+  var _useState = useState(_extends$u({
     tooltipOpen: false
   }, initialTooltipState)), tooltipState = _useState[0], setTooltipState = _useState[1];
   var showTooltip = useCallback(function(showArgs) {
     return setTooltipState(typeof showArgs === "function" ? function(_ref) {
       _ref.tooltipOpen;
       var show = _objectWithoutPropertiesLoose$k(_ref, _excluded$G);
-      return _extends$v({}, showArgs(show), {
+      return _extends$u({}, showArgs(show), {
         tooltipOpen: true
       });
     } : {
@@ -8151,41 +8259,6 @@ function useTooltip(initialTooltipState) {
     hideTooltip
   };
 }
-function _extends$u() {
-  _extends$u = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$u.apply(this, arguments);
-}
-function withTooltip(BaseComponent, containerProps, renderContainer) {
-  if (containerProps === void 0) {
-    containerProps = {
-      style: {
-        position: "relative",
-        width: "inherit",
-        height: "inherit"
-      }
-    };
-  }
-  if (renderContainer === void 0) {
-    renderContainer = function renderContainer2(children2, props) {
-      return /* @__PURE__ */ React__default.createElement("div", props, children2);
-    };
-  }
-  var WrappedComponent = function WrappedComponent2(props) {
-    var tooltipProps = useTooltip();
-    return renderContainer(/* @__PURE__ */ React__default.createElement(BaseComponent, _extends$u({}, tooltipProps, props)), containerProps);
-  };
-  return WrappedComponent;
-}
 function debounce$3(func, wait, immediate) {
   var timeout2, args, context, timestamp, result;
   if (null == wait)
@@ -8702,44 +8775,16 @@ function useTooltipInPortal(_temp) {
     TooltipInPortal
   };
 }
-const BottomAxis = ({
-  data,
-  yMax,
-  value,
-  xScale,
-  parentWidth,
-  left: left2
-}) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-  return /* @__PURE__ */ jsx(AxisBottom, {
-    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) !== void 0 ? (_c = value.main) == null ? void 0 : _c.hideBottomAxisLine : true,
-    strokeWidth: (_e = (_d = value.style) == null ? void 0 : _d.labelStyle) == null ? void 0 : _e.bottomAxisWidth,
-    scale: xScale,
-    stroke: (_g = (_f = value.style) == null ? void 0 : _f.labelStyle) == null ? void 0 : _g.tickColor,
-    labelOffset: (_i = (_h = value.style) == null ? void 0 : _h.labelStyle) == null ? void 0 : _i.bottomLabelOffset,
-    label: (_j = value.main) == null ? void 0 : _j.bottomLabel,
-    tickStroke: (_l = (_k = value.style) == null ? void 0 : _k.labelStyle) == null ? void 0 : _l.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) || 18,
-        textAnchor: "middle"
-      };
-    }
-  });
-};
 const ToolTip = ({
-  style: style2,
+  value,
+  theme,
   top: top2,
   left: left2,
   tooltipData,
   colorScale
 }) => {
+  const barGroup = tooltipData == null ? void 0 : tooltipData.groupData;
+  const highlightedBar = tooltipData == null ? void 0 : tooltipData.highlightedBar;
   const {
     TooltipInPortal
   } = useTooltipInPortal({
@@ -8747,23 +8792,43 @@ const ToolTip = ({
     scroll: true
   });
   return /* @__PURE__ */ jsx(TooltipInPortal, {
+    style: {
+      ...defaultStyles,
+      backgroundColor: theme.myTheme.palette.secondary.main
+    },
     top: top2,
     left: left2,
-    children: Object.keys(tooltipData).map((bar) => bar === "label" ? null : /* @__PURE__ */ jsxs("div", {
+    children: Object.keys(barGroup).map((bar) => bar === value.main.xAxisValue ? null : /* @__PURE__ */ jsxs("div", {
       style: {
         display: "flex",
         marginBottom: "2.5px",
         marginTop: "2.5px"
       },
       children: [/* @__PURE__ */ jsx("span", {
+        style: {
+          backgroundColor: colorScale(bar),
+          width: "15px",
+          height: "15px",
+          marginRight: "5px",
+          border: (highlightedBar == null ? void 0 : highlightedBar.key) === bar ? "1px solid black" : "1px solid transparent"
+        }
+      }), /* @__PURE__ */ jsx("span", {
         style: {
           marginRight: "5px"
         },
-        children: /* @__PURE__ */ jsxs("strong", {
+        children: /* @__PURE__ */ jsxs("span", {
+          style: {
+            fontWeight: (highlightedBar == null ? void 0 : highlightedBar.key) === bar ? "bold" : "normal",
+            color: "black"
+          },
           children: [bar, ": "]
         })
       }), /* @__PURE__ */ jsx("span", {
-        children: tooltipData[bar]
+        style: {
+          fontWeight: (highlightedBar == null ? void 0 : highlightedBar.key) === bar ? "bold" : "normal",
+          color: "black"
+        },
+        children: barGroup[bar]
       })]
     }))
   }, Math.random());
@@ -9629,12 +9694,6 @@ function stack$1(_ref6) {
     path2.offset((0, _stackOffset.default)(offset2));
   return path2;
 }
-const tooltipStyles = {
-  ...defaultStyles,
-  minWidth: 60,
-  backgroundColor: "rgba(0,0,0,0.9)",
-  color: "white"
-};
 const defaultMargin$1 = {
   top: 40,
   right: 0,
@@ -9642,17 +9701,21 @@ const defaultMargin$1 = {
   left: 0
 };
 function DrawBarGraph({
+  theme,
   width: width2,
   height: height2,
   events = false,
   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;
+  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 !== "label");
-  const [hovInd, setHovInd] = useState(null);
-  const getDate = (d2) => d2.label;
+  const keys2 = Object.keys(data[0]).filter((d2) => d2 !== value.main.xAxisValue);
+  const [hoveredBar, setHoveredBar] = useState({
+    date: null,
+    city: null
+  });
+  const getDate = (d2) => d2[value.main.xAxisValue];
   const temperatureTotals = data.reduce((allTotals, currentDate) => {
     const totalTemperature = keys2.reduce((dailyTotal, k2) => {
       dailyTotal += Number(currentDate[k2]);
@@ -9674,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;
@@ -9690,34 +9753,45 @@ function DrawBarGraph({
     hideTooltip
   } = useTooltip();
   const handleMouse = (event, bar, barGroup) => {
-    setHovInd(bar.index);
+    setHoveredBar({
+      date: barGroup,
+      city: bar.index
+    });
     showTooltip({
       tooltipLeft: event.clientX,
       tooltipTop: event.clientY,
-      tooltipData: data[barGroup.index]
+      tooltipData: {
+        groupData: data[barGroup.index],
+        highlightedBar: bar
+      }
     });
   };
   const handleMouseOut = (event) => {
-    setHovInd(null);
+    setHoveredBar({
+      date: null,
+      city: null
+    });
     hideTooltip();
   };
-  const {
-    TooltipInPortal,
-    containerRef
-  } = useTooltipInPortal({
-    detectBounds: true,
-    scroll: true
-  });
-  const stackhHandleMouse = (event, datum2, barGroup) => {
+  const stackhHandleMouse = (event, bar, barGroup) => {
+    setHoveredBar({
+      date: barGroup,
+      city: bar.index
+    });
     showTooltip({
-      tooltipLeft: barGroup.x + barGroup.width / 2,
-      tooltipTop: barGroup.y + barGroup.height / 2,
-      tooltipData: data[barGroup.index]
+      tooltipLeft: event.clientX,
+      tooltipTop: event.clientY,
+      tooltipData: {
+        groupData: data[bar.index],
+        highlightedBar: bar
+      }
     });
   };
+  function calcWidthofBar(date2) {
+    return date2 == null ? void 0 : date2.bars.reduce((totalWidth, bar) => totalWidth + Math.min(bar.width, 15), 0);
+  }
   return width2 < 10 ? null : /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsxs("svg", {
-      ref: containerRef,
       width: width2,
       height: height2,
       children: [/* @__PURE__ */ jsx("rect", {
@@ -9734,12 +9808,23 @@ function DrawBarGraph({
         width: width2 - margin2.left - margin2.right,
         height: yMax,
         stroke: "black",
-        strokeOpacity: 0.1,
-        xOffset: dateScale.bandwidth() / 50
+        xOffset: dateScale.bandwidth() / 50,
+        strokeDasharray: "8 3",
+        strokeOpacity: 0.2,
+        strokeWidth: 0.3
       }), /* @__PURE__ */ jsxs(Group, {
         top: margin2.top,
         left: margin2.left,
-        children: [/* @__PURE__ */ jsx(LeftAxis, {
+        children: [hoveredBar && /* @__PURE__ */ jsx("rect", {
+          style: {
+            display: hoveredBar.date ? "block" : "none"
+          },
+          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: (_k = (_j = value.style) == null ? void 0 : _j.barStyle) == null ? void 0 : _k.hoverBackgroundColor,
+          opacity: 1
+        }), /* @__PURE__ */ jsx(LeftAxis, {
           value,
           yScale: tempScale,
           parentWidth: width2
@@ -9751,17 +9836,14 @@ function DrawBarGraph({
           yScale: tempScale,
           color: colorScale,
           children: (barStacks) => barStacks.map((barStack) => barStack.bars.map((bar) => /* @__PURE__ */ jsx("rect", {
-            x: bar.x,
+            x: bar.x - (Math.min(bar.width, 15) - bar.width) / 2,
             y: bar.y,
             height: bar.height,
-            width: bar.width,
+            width: Math.min(bar.width, 15),
             fill: bar.color,
-            onClick: () => {
-              if (events)
-                alert(`clicked: ${JSON.stringify(bar)}`);
-            },
-            onMouseOver: (e3) => stackhHandleMouse(e3, barStack, bar),
-            onMouseOut: hideTooltip
+            onMouseOver: (e3) => stackhHandleMouse(e3, bar, barStack),
+            onMouseOut: (e3) => handleMouseOut(),
+            stroke: hoveredBar.city === bar.index ? "black" : "transparent"
           }, `bar-stack-${barStack.index}-${bar.index}`)))
         }) : /* @__PURE__ */ jsx(BarGroup, {
           data,
@@ -9774,31 +9856,24 @@ function DrawBarGraph({
           color: (key, index2) => {
             const color2 = colorScale(key);
             const opColor = `${colorScale(key)}50`;
-            return hovInd !== null ? index2 === hovInd ? color2 : opColor : color2;
+            return (hoveredBar == null ? void 0 : hoveredBar.city) !== null ? index2 === (hoveredBar == null ? void 0 : hoveredBar.city) ? color2 : opColor : color2;
           },
           children: (barGroups) => barGroups.map((barGroup) => /* @__PURE__ */ jsx(Group, {
             left: barGroup.x0,
-            children: barGroup.bars.map((bar) => /* @__PURE__ */ jsx("rect", {
-              x: bar.x,
-              y: bar.y,
-              width: bar.width,
-              height: bar.height,
-              fill: bar.color,
-              onMouseOver: (e3) => handleMouse(e3, bar, barGroup),
-              onMouseOut: (e3) => handleMouseOut(),
-              onClick: () => {
-                if (!events)
-                  return;
-                const {
-                  key,
-                  value: value2
-                } = bar;
-                alert(JSON.stringify({
-                  key,
-                  value: value2
-                }));
-              }
-            }, `bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`))
+            children: barGroup.bars.map((bar) => {
+              const barWidth = Math.min(bar.width, 15);
+              const barX = bar.index === 0 ? bar.x - (barWidth - bar.width) : bar.x;
+              return /* @__PURE__ */ jsx("rect", {
+                x: barX,
+                y: bar.y,
+                width: barWidth,
+                height: bar.height,
+                fill: bar.color,
+                onMouseOver: (e3) => handleMouse(e3, bar, barGroup),
+                onMouseOut: (e3) => handleMouseOut(),
+                stroke: hoveredBar.city === bar.index ? "black" : "transparent"
+              }, `bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`);
+            })
           }, `bar-group-${barGroup.index}-${barGroup.x0}`))
         })]
       }), /* @__PURE__ */ jsx(BottomAxis, {
@@ -9810,40 +9885,11 @@ function DrawBarGraph({
       })]
     }), ((_m = value == null ? void 0 : value.main) == null ? void 0 : _m.legendAvailable) && keys2.length > 1 && /* @__PURE__ */ jsx(Legend, {
       dataKeyArray: keys2,
-      colorRange: [((_p = (_o = (_n = value.style) == null ? void 0 : _n.barStyle) == null ? void 0 : _o.color) == null ? void 0 : _p.firstBarColor) || "#aeeef8", ((_s = (_r = (_q = value.style) == null ? void 0 : _q.barStyle) == null ? void 0 : _r.color) == null ? void 0 : _s.secondBarColor) || "#e5fd3d", ((_v = (_u = (_t5 = value.style) == null ? void 0 : _t5.barStyle) == null ? void 0 : _u.color) == null ? void 0 : _v.thirdBarColor) || "#9caff6"],
+      colorRange: value.style.barStyle.colorRange,
       value
-    }), ((_w = value == null ? void 0 : value.main) == null ? void 0 : _w.type) === "StackBarGraph" ? tooltipOpen && tooltipData && /* @__PURE__ */ jsx(TooltipInPortal, {
-      top: tooltipTop,
-      left: tooltipLeft,
-      style: tooltipStyles,
-      children: Object.keys(tooltipData).map((bar) => bar === "label" ? null : /* @__PURE__ */ jsxs("div", {
-        style: {
-          display: "flex",
-          marginBottom: "2.5px",
-          marginTop: "2.5px"
-        },
-        children: [/* @__PURE__ */ jsx("span", {
-          style: {
-            backgroundColor: colorScale(bar),
-            width: "20px",
-            height: "20px",
-            marginRight: "5px"
-          }
-        }), /* @__PURE__ */ jsx("span", {
-          style: {
-            marginRight: "5px"
-          },
-          children: /* @__PURE__ */ jsxs("strong", {
-            children: [bar, ": "]
-          })
-        }), /* @__PURE__ */ jsx("span", {
-          children: tooltipData[bar]
-        })]
-      }))
-    }) : tooltipOpen && /* @__PURE__ */ jsx(ToolTip, {
-      style: {
-        ...value == null ? void 0 : value.style
-      },
+    }), tooltipOpen && /* @__PURE__ */ jsx(ToolTip, {
+      value,
+      theme,
       top: tooltipTop,
       left: tooltipLeft,
       tooltipData,
@@ -10095,45 +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 },
-      { "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 }
-    ]
-  }
+  { 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, _E, _F;
   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,
@@ -10145,6 +10169,7 @@ const finalDataProvider = (type2, value, theme) => {
           hideLeftAxisLine: false,
           hideBottomAxisLine: false,
           bottomAxisWidth: "10px",
+          xAxisValue: "label",
           ...value.main,
           legend: {
             legendTitle: "",
@@ -10187,25 +10212,31 @@ const finalDataProvider = (type2, value, theme) => {
             tickLabelColor: theme.myTheme.palette.text.primary,
             tickFontSize: "14px",
             rightAxisWidth: "0.3px",
-            fontSize: "10px",
+            fontSize: "12px",
             ...(_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)",
-            ...(_g = value == null ? void 0 : value.style) == null ? void 0 : _g.barStyle
+            hoverBackgroundColor: `${theme.myTheme.palette.secondary.main}`,
+            ...(_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",
@@ -10213,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: {
@@ -10228,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,
@@ -10239,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%",
@@ -10247,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: {
@@ -10267,36 +10299,41 @@ 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",
               flexDirection: "row",
               display: "flex",
-              alignItems: "center"
+              alignItems: "center",
+              ...(_s = (_r = value == null ? void 0 : value.style) == null ? void 0 : _r.legendStyle) == null ? void 0 : _s.legendVertical
             },
             legendTitle: {
               fontWeight: 500,
               marginBottom: "5px",
               fontFamily: "roboto",
               fontSize: "10px",
-              ...(_r = (_q = value == null ? void 0 : value.style) == null ? void 0 : _q.legendStyle) == null ? void 0 : _r.legendTitle
+              ...(_u = (_t5 = value == null ? void 0 : value.style) == null ? void 0 : _t5.legendStyle) == null ? void 0 : _u.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: ((_v = theme == null ? void 0 : theme.chartColours) == null ? void 0 : _v.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
+            ...(_w = value == null ? void 0 : value.style) == null ? void 0 : _w.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: ((_y = (_x = value == null ? void 0 : value.main) == null ? void 0 : _x.data) == null ? void 0 : _y.length) > 0 ? (_z = value == null ? void 0 : value.main) == null ? void 0 : _z.data : Product1,
           header: "Line Graph Dynamic",
           bottomLabel: "Name of Employe",
           leftLabel: "Value",
@@ -10308,13 +10345,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
+            ...(_A = value == null ? void 0 : value.main) == null ? void 0 : _A.legend
           }
         },
         style: {
@@ -10324,7 +10362,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
+            ...(_B = value == null ? void 0 : value.style) == null ? void 0 : _B.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -10335,78 +10373,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
+            ...(_C = value == null ? void 0 : value.style) == null ? void 0 : _C.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
+            ...(_D = value == null ? void 0 : value.style) == null ? void 0 : _D.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: ((_E = theme == null ? void 0 : theme.chartColours) == null ? void 0 : _E.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",
-          ...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: "10px",
-            ...(_L = value == null ? void 0 : value.style) == null ? void 0 : _L.labelStyle
-          },
-          barStyle: {
-            color: theme.myTheme.palette.primary.main,
-            ...(_M = value == null ? void 0 : value.style) == null ? void 0 : _M.barStyle
+            ...(_F = value == null ? void 0 : value.style) == null ? void 0 : _F.lineStyle
           }
         }
       };
@@ -10417,12 +10401,12 @@ const BarGraph = ({
   theme
 }) => {
   var _a, _b, _c, _d, _e;
-  console.log("data of bar is ", value);
   const barData = finalDataProvider((_a = value == null ? void 0 : value.main) == null ? void 0 : _a.type, value, theme);
   let GraphRender = /* @__PURE__ */ jsx(ParentSize$1, {
     children: (parent) => {
       var _a2, _b2, _c2, _d2, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n;
       return /* @__PURE__ */ jsx(DrawBarGraph, {
+        theme,
         width: parent.width || 800,
         height: ((_b2 = (_a2 = barData == null ? void 0 : barData.style) == null ? void 0 : _a2.containerStyle) == null ? void 0 : _b2.height) || "450",
         margin: {
@@ -10447,23 +10431,33 @@ const BarGraph = ({
   });
 };
 const DrawPieGraph = ({
+  theme,
   value,
   parentWidth,
   parentHeight
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  const {
+    TooltipInPortal
+  } = useTooltipInPortal({
+    detectBounds: true,
+    scroll: true
+  });
   const [active2, setActive] = useState(null);
   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({
     domain: letters.map((l2) => l2[arr[labelKeyIndex]]),
     range: (_g = (_f = value == null ? void 0 : value.style) == null ? void 0 : _f.pieStyle) == null ? void 0 : _g.colorRange
   });
-  const dataKeyArray = letters.map((data) => data.label);
+  const getColor = (letter) => {
+    return getLetterFrequencyColor(letter);
+  };
+  const dataKeyArray = letters.map((data) => data[value.main.xAxisValue]);
   const {
     tooltipData,
     tooltipLeft,
@@ -10484,21 +10478,21 @@ const DrawPieGraph = ({
       }
     });
   };
-  const innerWidth = parentWidth - 40;
-  const innerHeight = parentHeight - 40;
+  const innerWidth = parentWidth - 60;
+  const innerHeight = parentHeight - 60;
   const centerX = innerWidth / 2;
   const centerY = innerHeight / 2;
-  const left2 = centerX + 20;
-  const top2 = centerY + 20;
+  const left2 = centerX;
+  const top2 = centerY;
   const pieSortValues = (a2, b10) => a2 - b10;
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
       style: {
         display: "flex",
-        justifyContent: "space-between"
+        justifyContent: "space-evenly"
       },
       children: [/* @__PURE__ */ jsx("svg", {
-        width: parentWidth,
+        width: 0.7 * parentWidth,
         height: parentHeight,
         className: "pieGraphContainer",
         children: /* @__PURE__ */ jsxs(Group, {
@@ -10532,7 +10526,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,
@@ -10557,17 +10551,46 @@ const DrawPieGraph = ({
             }
           })]
         })
-      }), tooltipOpen && /* @__PURE__ */ jsx(ToolTip, {
-        style: value == null ? void 0 : value.style,
+      }), tooltipOpen && /* @__PURE__ */ jsx(TooltipInPortal, {
+        style: {
+          ...defaultStyles,
+          backgroundColor: theme.myTheme.palette.secondary.main
+        },
         top: tooltipTop,
         left: tooltipLeft,
-        tooltipData
-      }), /* @__PURE__ */ jsx("div", {
+        children: Object.keys(tooltipData).map((bar) => /* @__PURE__ */ jsxs("div", {
+          style: {
+            display: "flex",
+            marginBottom: "2.5px",
+            marginTop: "2.5px"
+          },
+          children: [/* @__PURE__ */ jsx("span", {
+            style: {
+              backgroundColor: getColor(bar),
+              width: "15px",
+              height: "15px",
+              marginRight: "5px"
+            }
+          }), /* @__PURE__ */ jsx("span", {
+            style: {
+              marginRight: "5px"
+            },
+            children: /* @__PURE__ */ jsxs("strong", {
+              style: {
+                color: "black"
+              },
+              children: [bar, ": "]
+            })
+          }), /* @__PURE__ */ jsx("span", {
+            style: {
+              color: "black"
+            },
+            children: tooltipData[bar]
+          })]
+        }))
+      }, Math.random()), /* @__PURE__ */ jsx("div", {
         style: {
-          width: "100px",
-          display: "flex",
-          marginTop: "20px",
-          marginRight: "130px"
+          display: "flex"
         },
         children: ((_p = value == null ? void 0 : value.main) == null ? void 0 : _p.legendAvailable) && /* @__PURE__ */ jsx(Legend, {
           value,
@@ -10585,6 +10608,7 @@ const PieGraph = ({
   const pieData = finalDataProvider("PieGraph", value, theme);
   let PieRender = /* @__PURE__ */ jsx(ParentSize$1, {
     children: (parent) => /* @__PURE__ */ jsx(DrawPieGraph, {
+      theme,
       parentWidth: parent.width,
       parentHeight: parseInt(pieData.style.containerStyle.height),
       parentRef: parent.ref,
@@ -12962,43 +12986,51 @@ const defaultMargin = {
   left: 0
 };
 const DrawGraph = ({
+  theme,
   width: width2,
   height: height2,
   events = false,
-  margin: margin2 = defaultMargin,
   value
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
-  (_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 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) => arr.map((key) => d2[key])))]
+  });
+  const xMax = width2 - margin2.left - margin2.right;
+  const yMax = height2 - margin2.top - margin2.bottom;
+  xScale.rangeRound([50, xMax - 50]);
+  yScale.range([yMax - 10, 50]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [value.main.legendAvailable && /* @__PURE__ */ jsx(Legend, {
       value,
-      dataKeyArray
+      dataKeyArray: arr
     }), /* @__PURE__ */ jsxs(XYChart, {
       width: width2,
       height: height2,
       xScale: {
-        type: "band"
+        type: "band",
+        scale: xScale
       },
       yScale: {
-        type: "linear"
+        type: "linear",
+        scale: yScale
       },
       children: [/* @__PURE__ */ jsx(Axis, {
         orientation: "left",
         hideAxisLine: value.main.hideLeftAxisLine,
         label: value.main.leftLabel,
-        labelOffset: ((_d = (_c = value.style) == null ? void 0 : _c.labelStyle) == null ? void 0 : _d.leftLabelOffset) || 25,
+        labelOffset: ((_c = (_b = value.style) == null ? void 0 : _b.labelStyle) == null ? void 0 : _c.leftLabelOffset) || 25,
         labelProps: {
-          fill: ((_f = (_e = value.style) == null ? void 0 : _e.labelStyle) == null ? void 0 : _f.labelColor) || "black",
-          fontSize: ((_h = (_g = value.style) == null ? void 0 : _g.labelStyle) == null ? void 0 : _h.fontSize) || "14px",
+          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) => {
@@ -13015,8 +13047,8 @@ const DrawGraph = ({
         hideAxisLine: value.main.hideBottomAxisLine,
         label: value.main.bottomLabel,
         labelProps: {
-          fill: ((_j = (_i = value.style) == null ? void 0 : _i.labelStyle) == null ? void 0 : _j.labelColor) || "black",
-          fontSize: ((_l = (_k = value.style) == null ? void 0 : _k.labelStyle) == null ? void 0 : _l.fontSize) || "14px",
+          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) => {
@@ -13028,52 +13060,82 @@ const DrawGraph = ({
           };
         },
         tickStroke: "black",
-        labelOffset: ((_n = (_m = value.style) == null ? void 0 : _m.labelStyle) == null ? void 0 : _n.bottomLabelOffset) || 25
+        labelOffset: ((_m = (_l = value.style) == null ? void 0 : _l.labelStyle) == null ? void 0 : _m.bottomLabelOffset) || 25
       }), /* @__PURE__ */ jsx(Grid, {
-        strokeDasharray: "-",
         stroke: "black",
         lineStyle: {
-          opacity: 0.1
-        }
-      }), (_p = (_o = value.main) == null ? void 0 : _o.data) == null ? void 0 : _p.map((elem, i) => {
+          opacity: 0.2
+        },
+        strokeDasharray: "8 3",
+        strokeWidth: 0.3
+      }), arr == null ? void 0 : arr.map((elem, i) => {
         var _a2, _b2, _c2, _d2, _e2, _f2;
-        return /* @__PURE__ */ jsx(LineSeries, {
-          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",
-          floodOpacity: 1,
-          stroke: (_f2 = (_e2 = value.style) == null ? void 0 : _e2.lineStyle) == null ? void 0 : _f2.colorRange[i],
-          ...accessors
+        return /* @__PURE__ */ jsxs(Fragment, {
+          children: [/* @__PURE__ */ jsx(LineSeries, {
+            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],
+            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",
+            strokeWidth: 1
+          }, index2))]
         });
       }), /* @__PURE__ */ jsx(Tooltip$2, {
+        style: {
+          ...defaultStyles,
+          backgroundColor: theme.myTheme.palette.secondary.main
+        },
         snapTooltipToDatumX: true,
         snapTooltipToDatumY: true,
         showVerticalCrosshair: true,
         showSeriesGlyphs: true,
         renderTooltip: ({
-          tooltipData: tooltipData2,
-          colorScale
+          tooltipData: tooltipData2
         }) => {
-          var _a2, _b2;
-          console.log(tooltipData2);
-          return /* @__PURE__ */ jsxs("div", {
-            style: {
-              display: "flex",
-              marginBottom: "2.5px",
-              marginTop: "2.5px"
-            },
-            children: [/* @__PURE__ */ jsx("span", {
+          return Object.keys(tooltipData2.datumByKey).map((d2, i) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ jsxs("div", {
               style: {
-                marginRight: "5px"
+                display: "flex",
+                marginBottom: "2.5px",
+                marginTop: "2.5px"
               },
-              children: /* @__PURE__ */ jsxs("strong", {
-                children: [(_a2 = tooltipData2 == null ? void 0 : tooltipData2.nearestDatum) == null ? void 0 : _a2.datum.x, ": "]
-              })
-            }), /* @__PURE__ */ jsx("span", {
-              children: (_b2 = tooltipData2 == null ? void 0 : tooltipData2.nearestDatum) == null ? void 0 : _b2.datum.y
-            })]
+              children: [/* @__PURE__ */ jsx("span", {
+                style: {
+                  backgroundColor: (_b2 = (_a2 = value.style) == null ? void 0 : _a2.lineStyle) == null ? void 0 : _b2.colorRange[i],
+                  width: "15px",
+                  height: "15px",
+                  marginRight: "5px"
+                }
+              }), /* @__PURE__ */ jsx("span", {
+                style: {
+                  marginRight: "5px"
+                },
+                children: /* @__PURE__ */ jsxs("span", {
+                  style: {
+                    fontWeight: "normal",
+                    color: "black"
+                  },
+                  children: [d2, ": "]
+                })
+              }), /* @__PURE__ */ jsx("span", {
+                style: {
+                  fontWeight: "normal",
+                  color: "black"
+                },
+                children: tooltipData2.datumByKey[d2].datum[d2]
+              })]
+            });
           });
         }
       })]
@@ -13093,47 +13155,34 @@ const LineGraph = ({
       children: (_d = lineData == null ? void 0 : lineData.main) == null ? void 0 : _d.header
     }), /* @__PURE__ */ jsx(ParentSize$1, {
       children: (parent) => {
-        var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+        var _a2, _b2;
         return /* @__PURE__ */ jsx(DrawGraph, {
+          theme,
           width: parent.width || 800,
           height: ((_b2 = (_a2 = lineData == null ? void 0 : lineData.style) == null ? void 0 : _a2.containerStyle) == null ? void 0 : _b2.height) || "450",
-          margin: {
-            top: ((_e = (_d2 = (_c2 = lineData == null ? void 0 : lineData.style) == null ? void 0 : _c2.labelStyle) == null ? void 0 : _d2.margin) == null ? void 0 : _e.top) || 10,
-            right: ((_h = (_g = (_f = lineData == null ? void 0 : lineData.style) == null ? void 0 : _f.labelStyle) == null ? void 0 : _g.margin) == null ? void 0 : _h.right) || 10,
-            bottom: ((_k = (_j = (_i = lineData == null ? void 0 : lineData.style) == null ? void 0 : _i.labelStyle) == null ? void 0 : _j.margin) == null ? void 0 : _k.bottom) || 20,
-            left: ((_n = (_m = (_l = lineData == null ? void 0 : lineData.style) == null ? void 0 : _l.labelStyle) == null ? void 0 : _m.margin) == null ? void 0 : _n.left) || 60
-          },
           value: lineData
         });
       }
     })]
   });
 };
-var DrawHorizontalBarGraph = withTooltip(({
+var DrawHorizontalBarGraph = ({
+  theme,
   width: width2 = 600,
   height: height2 = 400,
   events = false,
   margin: margin2,
-  tooltipOpen,
-  tooltipLeft,
-  tooltipTop,
-  tooltipData,
-  hideTooltip,
-  showTooltip,
   barValue
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const [hoveredBar, setHoveredBar] = useState({
+    date: null,
+    city: null
+  });
   const xMax = width2 - margin2.left - margin2.right;
   const yMax = height2 - margin2.top - margin2.bottom;
-  const tooltipStyles2 = {
-    ...defaultStyles,
-    padding: "12px",
-    minWidth: 60,
-    backgroundColor: "yellow",
-    color: "black"
-  };
   const data = (_a = barValue == null ? void 0 : barValue.main) == null ? void 0 : _a.data;
-  const keys2 = Object.keys(data[0]).filter((y2) => y2 !== "y");
+  const keys2 = Object.keys(data[0]).filter((d2) => d2 !== barValue.main.xAxisValue);
   const temperatureTotals = data.reduce((allTotals, currentDate) => {
     const totalTemperature = keys2.reduce((dailyTotal, k2) => {
       dailyTotal += Number(currentDate[k2]);
@@ -13142,31 +13191,81 @@ var DrawHorizontalBarGraph = withTooltip(({
     allTotals.push(totalTemperature);
     return allTotals;
   }, []);
-  const getDate = (d2) => d2.y;
+  const getDate = (d2) => d2[barValue.main.xAxisValue];
   const temperatureScale = createLinearScale({
-    domain: [0, Math.max(...temperatureTotals)],
+    domain: ((_b = barValue == null ? void 0 : barValue.main) == null ? void 0 : _b.type) === "HorizontalStackBarGraph" ? [0, Math.max(...temperatureTotals)] : [0, Math.max(...data.map((d2) => Math.max(...keys2.map((key) => Number(d2[key])))))],
     nice: true
   });
   const dateScale = createBandScale({
     domain: data.map(getDate),
-    padding: 0.2
+    padding: 0.4
+  });
+  const cityScale = createBandScale({
+    domain: keys2
   });
   const colorScale = createOrdinalScale$1({
     domain: keys2,
-    range: [barValue.style.barStyle.color]
+    range: barValue.style.barStyle.colorRange
   });
-  let tooltipTimeout;
   temperatureScale.rangeRound([0, xMax]);
   dateScale.rangeRound([yMax, 0]);
+  cityScale.rangeRound([0, dateScale.bandwidth()]);
+  const {
+    tooltipData,
+    tooltipLeft,
+    tooltipTop,
+    tooltipOpen,
+    showTooltip,
+    hideTooltip
+  } = useTooltip();
+  const handleMouse = (event, bar, barGroup) => {
+    setHoveredBar({
+      date: barGroup,
+      city: bar.index
+    });
+    showTooltip({
+      tooltipLeft: event.clientX,
+      tooltipTop: event.clientY,
+      tooltipData: {
+        groupData: data[barGroup.index],
+        highlightedBar: bar
+      }
+    });
+  };
+  const handleMouseOut = (event) => {
+    setHoveredBar({
+      date: null,
+      city: null
+    });
+    hideTooltip();
+  };
+  const stackhHandleMouse = (event, bar, barGroup) => {
+    setHoveredBar({
+      date: barGroup,
+      city: bar.index
+    });
+    showTooltip({
+      tooltipLeft: event.clientX,
+      tooltipTop: event.clientY,
+      tooltipData: {
+        groupData: data[bar.index],
+        highlightedBar: bar
+      }
+    });
+  };
+  function calcWidthofBar(date2) {
+    return date2 == null ? void 0 : date2.bars.reduce((totalWidth, bar) => totalWidth + Math.min(bar.height, 15), 0);
+  }
   return width2 < 10 ? null : /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsxs("svg", {
       width: width2,
       height: height2,
       children: [/* @__PURE__ */ jsx("rect", {
+        x: 0,
+        y: 0,
         width: width2,
         height: height2,
-        fill: ((_c = (_b = barValue == null ? void 0 : barValue.style) == null ? void 0 : _b.containerStyle) == null ? void 0 : _c.background) || "#eaedff",
-        rx: 14
+        fill: barValue.style.containerStyle.background || "#612efb"
       }), /* @__PURE__ */ jsx(Grid$1, {
         top: margin2.top,
         left: margin2.left,
@@ -13175,11 +13274,23 @@ var DrawHorizontalBarGraph = withTooltip(({
         width: xMax,
         height: yMax,
         stroke: "black",
-        strokeOpacity: 0.1
+        xOffset: dateScale.bandwidth() / 50,
+        strokeDasharray: "8 3",
+        strokeOpacity: 0.2,
+        strokeWidth: 0.3
       }), /* @__PURE__ */ jsxs(Group, {
         top: margin2.top,
         left: margin2.left,
-        children: [/* @__PURE__ */ jsx(BarStackHorizontal, {
+        children: [hoveredBar && /* @__PURE__ */ jsx("rect", {
+          style: {
+            display: hoveredBar.date ? "block" : "none"
+          },
+          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((_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,
           keys: keys2,
           height: yMax,
@@ -13189,62 +13300,70 @@ var DrawHorizontalBarGraph = withTooltip(({
           color: colorScale,
           children: (barStacks) => barStacks.map((barStack) => barStack.bars.map((bar) => /* @__PURE__ */ jsx("rect", {
             x: bar.x,
-            y: bar.y,
+            y: bar.y - (Math.min(bar.height, 15) - bar.height) / 2,
             width: bar.width,
-            height: bar.height,
+            height: Math.min(bar.height, 15),
             fill: bar.color,
-            onClick: () => {
-              if (events)
-                alert(`clicked: ${JSON.stringify(bar)}`);
-            },
-            onMouseLeave: () => {
-              tooltipTimeout = window.setTimeout(() => {
-                hideTooltip();
-              }, 300);
-            },
-            onMouseMove: () => {
-              if (tooltipTimeout)
-                clearTimeout(tooltipTimeout);
-              const top2 = bar.y + margin2.top;
-              const left2 = bar.x + bar.width + margin2.left;
-              showTooltip({
-                tooltipData: bar,
-                tooltipTop: top2,
-                tooltipLeft: left2
-              });
-            }
+            onMouseOver: (e3) => stackhHandleMouse(e3, bar, barStack),
+            onMouseOut: (e3) => handleMouseOut(),
+            stroke: hoveredBar.city === bar.index ? "black" : "transparent"
           }, `barstack-horizontal-${barStack.index}-${bar.index}`)))
+        }) : /* @__PURE__ */ jsx(BarGroupHorizontal, {
+          data,
+          keys: keys2,
+          width: xMax,
+          height: yMax,
+          y0: getDate,
+          y0Scale: dateScale,
+          y1Scale: cityScale,
+          xScale: temperatureScale,
+          color: (key, index2) => {
+            const color2 = colorScale(key);
+            const opColor = `${colorScale(key)}50`;
+            return (hoveredBar == null ? void 0 : hoveredBar.city) !== null ? index2 === (hoveredBar == null ? void 0 : hoveredBar.city) ? color2 : opColor : color2;
+          },
+          children: (barGroups) => barGroups.map((barGroup) => /* @__PURE__ */ jsx(Group, {
+            top: barGroup.y0,
+            children: barGroup.bars.map((bar) => {
+              const barHeight = Math.min(bar.height, 15);
+              const barY = bar.index === 0 ? bar.y - (barHeight - bar.height) : bar.y;
+              return /* @__PURE__ */ jsx("rect", {
+                y: barY,
+                x: bar.x,
+                width: bar.width,
+                height: barHeight,
+                fill: bar.color,
+                onMouseOver: (e3) => handleMouse(e3, bar, barGroup),
+                onMouseOut: (e3) => handleMouseOut(),
+                stroke: hoveredBar.city === bar.index ? "black" : "transparent"
+              }, `bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`);
+            })
+          }, `bar-group-${barGroup.index}-${barGroup.y0}`))
         }), /* @__PURE__ */ jsx(LeftAxis, {
           value: barValue,
           yScale: dateScale,
-          parentWidth: 500
+          parentWidth: width2
         }), /* @__PURE__ */ jsx(BottomAxis, {
-          data,
           value: barValue,
           yMax,
           xScale: temperatureScale,
-          parentWidth: 500
+          parentWidth: width2
         })]
       })]
-    }), tooltipOpen && tooltipData && /* @__PURE__ */ jsx(Tooltip$3, {
+    }), ((_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,
       top: tooltipTop,
       left: tooltipLeft,
-      style: tooltipStyles2,
-      children: /* @__PURE__ */ jsxs("div", {
-        children: [/* @__PURE__ */ jsx("span", {
-          children: /* @__PURE__ */ jsxs("strong", {
-            children: [getDate(tooltipData.bar.data), ":"]
-          })
-        }), /* @__PURE__ */ jsx("span", {
-          style: {
-            marginLeft: "5px"
-          },
-          children: tooltipData.bar.data[tooltipData.key]
-        })]
-      })
+      tooltipData,
+      colorScale
     })]
   });
-});
+};
 const HorizontalBarGraph = ({
   value,
   theme
@@ -13255,6 +13374,7 @@ const HorizontalBarGraph = ({
     children: (parent) => {
       var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
       return /* @__PURE__ */ jsx(DrawHorizontalBarGraph, {
+        theme,
         width: parent.width,
         height: parseInt(((_b2 = (_a2 = barData == null ? void 0 : barData.style) == null ? void 0 : _a2.containerStyle) == null ? void 0 : _b2.height) || 400),
         margin: {
@@ -20925,14 +21045,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,
@@ -20942,60 +21062,62 @@ const ProgressBar = ({
     classes: {
       popper: className
     }
-  }))(({
-    theme: theme2
-  }) => ({
+  }))(({}) => ({
     [`& .${tooltipClasses$1.tooltip}`]: {
-      backgroundColor: theme2.palette.grey[300],
-      color: theme2.palette.text.primary,
-      boxShadow: theme2.shadows[0],
-      fontSize: 11
+      "& .MuiTooltip-arrow": {
+        color: theme.myTheme.palette.secondary.main
+      },
+      backgroundColor: theme.myTheme.palette.secondary.main,
+      color: theme.myTheme.palette.text.primary,
+      fontSize: 11,
+      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`
+          }
         })
       })
     });
@@ -21003,8 +21125,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"
@@ -21018,14 +21140,14 @@ const ProgressBar = ({
       },
       children: [/* @__PURE__ */ jsx("div", {
         style: {
-          padding: "25px 0px 0px 55px",
+          padding: "23px 0px 0px 60px",
           marginBottom: "-13px",
           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",
@@ -21033,7 +21155,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), "%"]
       })]
@@ -21064,18 +21186,24 @@ const ProgressBar = ({
             left: "12.5px"
           },
           children: /* @__PURE__ */ jsx(StyledTooltip, {
+            arrow: true,
             title: /* @__PURE__ */ jsxs(Fragment, {
-              children: [/* @__PURE__ */ jsx("div", {
-                children: " Target Achieved "
+              children: [/* @__PURE__ */ jsxs("div", {
+                style: {
+                  fontWeight: "normal",
+                  textAlign: "center"
+                },
+                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: {
@@ -21096,9 +21224,9 @@ const ProgressBar = ({
                   borderRadius: "50%",
                   width: "7px",
                   height: "7px",
-                  backgroundColor: `${theme.palette.common.white}`,
+                  backgroundColor: `${theme.myTheme.palette.common.white}`,
                   position: "absolute",
-                  top: "2.5px",
+                  top: "2px",
                   right: `2px`
                 }
               })
@@ -21109,7 +21237,7 @@ const ProgressBar = ({
             borderRadius: "50%",
             width: "30px",
             height: "30px",
-            backgroundColor: `${theme.palette.grey[300]}`,
+            backgroundColor: `${theme.myTheme.palette.grey[300]}`,
             position: "absolute",
             top: "0px"
           }
@@ -21117,7 +21245,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"
@@ -21130,15 +21258,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: {
@@ -21148,15 +21276,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: {
@@ -21166,15 +21294,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))
           })]
         })]
       })]
@@ -39894,14 +40022,67 @@ function ImpaktAppsCard({
     })
   });
 }
+const CircleArcRing = ({
+  strokeWidth = 10,
+  startAngle = 0,
+  endAngle = 180,
+  style: style2 = {},
+  theme
+}) => {
+  const size = 100;
+  const radius = (size - strokeWidth) / 2;
+  const arcPath = describeArc(size / 2, size / 2, radius, startAngle, endAngle);
+  return /* @__PURE__ */ jsx("div", {
+    style: {
+      ...style2,
+      position: "relative"
+    },
+    children: /* @__PURE__ */ jsxs("svg", {
+      viewBox: `0 0 ${size} ${size}`,
+      xmlns: "http://www.w3.org/2000/svg",
+      style: {
+        width: "100%",
+        height: "100%"
+      },
+      children: [/* @__PURE__ */ jsx("circle", {
+        cx: size / 2,
+        cy: size / 2,
+        r: radius,
+        fill: "none",
+        stroke: theme.palette.grey[300],
+        strokeWidth
+      }), /* @__PURE__ */ jsx("path", {
+        d: arcPath,
+        fill: "none",
+        stroke: theme.palette.primary.main,
+        strokeWidth
+      })]
+    })
+  });
+};
+const describeArc = (x2, y2, radius, startAngle, endAngle) => {
+  const start2 = polarToCartesian(x2, y2, radius, endAngle);
+  const end2 = polarToCartesian(x2, y2, radius, startAngle);
+  const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
+  return ["M", start2.x, start2.y, "A", radius, radius, 0, largeArcFlag, 0, end2.x, end2.y].join(" ");
+};
+const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
+  const angleInRadians = (angleInDegrees - 90) * Math.PI / 180;
+  return {
+    x: centerX + radius * Math.cos(angleInRadians),
+    y: centerY + radius * Math.sin(angleInRadians)
+  };
+};
 const CustomTimer = ({
-  value
+  value,
+  theme
 }) => {
   var _a;
   let {
     uischema,
     data
   } = value;
+  const Total_Days = Math.floor((new Date(data.endDate).getTime() - new Date(data.startDate).getTime()) / (1e3 * 3600 * 24));
   const uischemaStyle = (_a = uischema == null ? void 0 : uischema.config) == null ? void 0 : _a.style;
   const [days2, setDays] = useState(0);
   const [min2, setMin] = useState(0);
@@ -39933,47 +40114,44 @@ const CustomTimer = ({
   const containerStyle = {
     display: "flex",
     flexDirection: "column",
-    backgroundColor: "rgb(15,15,15)",
+    backgroundColor: "transport",
     justifyContent: "center",
     alignItems: "center",
-    height: "40vh",
     gap: "10px",
     ...uischemaStyle == null ? void 0 : uischemaStyle.container
   };
-  const boxStyle = {
-    backgroundColor: "rgb(51,51,51)",
-    width: "22%",
-    minWidth: "40px",
-    height: "100px",
-    padding: "10px",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    ...uischemaStyle == null ? void 0 : uischemaStyle.digitContainer
-  };
   const digitStyle = {
-    color: "rgb(0,253,199)",
-    fontSize: "19px",
-    fontWeight: "700",
-    padding: "6px",
+    position: "absolute",
+    textAlign: "center",
+    color: theme.palette.grey[600],
+    fontWeight: "bold",
+    fontSize: "clamp(1rem, 5cqw, 2rem)",
+    left: "50%",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+    lineHeight: 1,
     ...uischemaStyle == null ? void 0 : uischemaStyle.digit
   };
   const digitLabelStyle = {
-    color: "white",
-    fontSize: "19px",
-    fontWeight: "700",
+    fontSize: "0.8rem",
+    textAlign: "center",
+    fontWeight: "bold",
+    color: theme.palette.grey[600],
+    textTransform: "uppercase",
     ...uischemaStyle == null ? void 0 : uischemaStyle.digitLabel
   };
   const containerLabelColor = {
-    color: "white",
-    ...uischemaStyle.containerLabelColor
+    ...uischemaStyle == null ? void 0 : uischemaStyle.containerLabelColor
   };
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs(Box$1, {
       component: "div",
       sx: containerStyle,
       children: [/* @__PURE__ */ jsx(Box$1, {
+        sx: {
+          height: "50px"
+        }
+      }), /* @__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.endDate).getTime() ? "Contest ends in..." : new Date().getTime() < new Date(data.startDate).getTime() ? "Program Not Started Yet" : "Program Over"
@@ -39984,43 +40162,120 @@ const CustomTimer = ({
           width: "80%",
           maxWidth: "650px",
           marginLeft: "auto",
-          marginRight: "auto"
+          marginRight: "auto",
+          justifyContent: "center"
         },
         children: [/* @__PURE__ */ jsxs(Box$1, {
-          style: boxStyle,
+          sx: {
+            width: "20%",
+            height: "auto"
+          },
           children: [/* @__PURE__ */ jsxs(Box$1, {
-            style: digitStyle,
-            children: [days2 === 0 ? 0 : days2 < 10 ? 0 : Math.floor(days2 / 10), days2 === 0 ? 0 : days2 % 10]
+            sx: {
+              width: "100%",
+              height: "auto",
+              position: "relative"
+            },
+            children: [/* @__PURE__ */ jsx(CircleArcRing, {
+              strokeWidth: 10,
+              startAngle: 0,
+              endAngle: days2 / Total_Days * 360,
+              style: {
+                width: "100%",
+                height: "auto"
+              },
+              theme
+            }), /* @__PURE__ */ jsxs(Box$1, {
+              sx: digitStyle,
+              children: [days2 === 0 ? 0 : days2 < 10 ? 0 : Math.floor(days2 / 10), days2 === 0 ? 0 : days2 % 10]
+            })]
           }), /* @__PURE__ */ jsx(Box$1, {
-            style: digitLabelStyle,
+            sx: digitLabelStyle,
             children: "Days"
           })]
         }), /* @__PURE__ */ jsxs(Box$1, {
-          style: boxStyle,
+          sx: {
+            width: "20%",
+            height: "auto"
+          },
           children: [/* @__PURE__ */ jsxs(Box$1, {
-            style: digitStyle,
-            children: [hour2 === 0 ? 0 : 24 - hour2 < 10 ? 0 : Math.floor((24 - hour2) / 10), hour2 === 0 ? 0 : (24 - hour2) % 10]
+            sx: {
+              width: "100%",
+              height: "auto",
+              position: "relative"
+            },
+            children: [/* @__PURE__ */ jsx(CircleArcRing, {
+              strokeWidth: 10,
+              startAngle: 0,
+              endAngle: (24 - hour2) * 15,
+              style: {
+                width: "100%",
+                height: "auto"
+              },
+              theme
+            }), /* @__PURE__ */ jsxs(Box$1, {
+              sx: digitStyle,
+              children: [hour2 === 0 ? 0 : 24 - hour2 < 10 ? 0 : Math.floor((24 - hour2) / 10), hour2 === 0 ? 0 : (24 - hour2) % 10]
+            })]
           }), /* @__PURE__ */ jsx(Box$1, {
-            style: digitLabelStyle,
+            sx: digitLabelStyle,
             children: "Hours"
           })]
         }), /* @__PURE__ */ jsxs(Box$1, {
-          style: boxStyle,
+          sx: {
+            width: "20%",
+            height: "auto"
+          },
           children: [/* @__PURE__ */ jsxs(Box$1, {
-            style: digitStyle,
-            children: [min2 === 0 ? 0 : 60 - min2 < 10 ? 0 : Math.floor((60 - min2) / 10), min2 === 0 ? 0 : (60 - min2) % 10]
+            sx: {
+              width: "100%",
+              height: "auto",
+              position: "relative"
+            },
+            children: [/* @__PURE__ */ jsx(CircleArcRing, {
+              strokeWidth: 10,
+              startAngle: 0,
+              endAngle: (60 - min2) * 6,
+              style: {
+                width: "100%",
+                height: "auto"
+              },
+              theme
+            }), /* @__PURE__ */ jsxs(Box$1, {
+              sx: digitStyle,
+              children: [min2 === 0 ? 0 : 60 - min2 < 10 ? 0 : Math.floor((60 - min2) / 10), min2 === 0 ? 0 : (60 - min2) % 10]
+            })]
           }), /* @__PURE__ */ jsx(Box$1, {
-            style: digitLabelStyle,
-            children: "Mins"
+            sx: digitLabelStyle,
+            children: "Minutes"
           })]
         }), /* @__PURE__ */ jsxs(Box$1, {
-          style: boxStyle,
+          sx: {
+            width: "20%",
+            height: "auto"
+          },
           children: [/* @__PURE__ */ jsxs(Box$1, {
-            style: digitStyle,
-            children: [sec === 0 ? 0 : 60 - sec < 10 ? 0 : Math.floor((60 - sec) / 10), sec === 0 ? 0 : (60 - sec) % 10]
+            sx: {
+              width: "100%",
+              height: "auto",
+              position: "relative"
+            },
+            children: [/* @__PURE__ */ jsx(CircleArcRing, {
+              strokeWidth: 10,
+              startAngle: 0,
+              endAngle: (60 - sec) * 6,
+              style: {
+                width: "100%",
+                height: "auto"
+              },
+              theme
+            }), /* @__PURE__ */ jsxs(Box$1, {
+              sx: digitStyle,
+              children: [sec === 0 ? 0 : 60 - sec < 10 ? 0 : Math.floor((60 - sec) / 10), sec === 0 ? 0 : (60 - sec) % 10]
+            })]
           }), /* @__PURE__ */ jsx(Box$1, {
-            style: digitLabelStyle,
-            children: "Secs"
+            sx: digitLabelStyle,
+            children: "Seconds"
           })]
         })]
       })]