impaktapps-design 0.1.0 → 0.1.2

package/dist/impaktapps-design.es.js

@@ -10477,12 +10477,14 @@ const BottomAxis = ({
   yMax,
   value,
   xScale,
-  parentWidth
+  parentWidth,
+  left: left2
 }) => {
   var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n2, _o, _p, _q, _r, _s;
   return /* @__PURE__ */ jsx(AxisBottom$2, {
-    numTicks: data.length,
+    numTicks: data == null ? void 0 : data.length,
     top: yMax,
+    left: left2,
     hideTicks: (_a2 = value.main) == null ? void 0 : _a2.hideTicks,
     hideAxisLine: (_b2 = value.main) == null ? void 0 : _b2.hideBottomAxisLine,
     strokeWidth: (_d = (_c2 = value.style) == null ? void 0 : _c2.labelStyle) == null ? void 0 : _d.bottomAxisWidth,
@@ -11169,273 +11171,286 @@ const ToolTip = ({
     })
   }, Math.random());
 };
-const defaultMargin = {
-  top: 20,
-  right: 0,
-  bottom: 40,
-  left: 40
-};
-function DrawBarGraph({
-  width,
-  height,
-  events = false,
-  margin = defaultMargin,
-  value
-}) {
-  var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j;
-  const data = (_a2 = value.main) == null ? void 0 : _a2.data;
-  const keys2 = Object.keys(data[0]).filter((d2) => d2 !== "label");
-  const getDate = (d2) => d2.label;
-  const dateScale = createBandScale({
-    domain: data.map(getDate),
-    padding: 0.2
-  });
-  const cityScale = createBandScale({
-    domain: keys2,
-    padding: 0.1
-  });
-  const tempScale = createLinearScale({
-    domain: [0, Math.max(...data.map((d2) => Math.max(...keys2.map((key) => Number(d2[key])))))]
-  });
-  const colorScale = createOrdinalScale$1({
-    domain: keys2,
-    range: [((_d = (_c2 = (_b2 = value.style) == null ? void 0 : _b2.barStyle) == null ? void 0 : _c2.color) == null ? void 0 : _d.firstBarColor) || "#aeeef8", ((_g = (_f = (_e2 = value.style) == null ? void 0 : _e2.barStyle) == null ? void 0 : _f.color) == null ? void 0 : _g.secondBarColor) || "e5fd3d", ((_j = (_i = (_h = value.style) == null ? void 0 : _h.barStyle) == null ? void 0 : _i.color) == null ? void 0 : _j.thirdBarColor) || "#9caff6"]
-  });
-  const xMax = width - margin.left - margin.right;
-  const yMax = height - margin.top - margin.bottom;
-  dateScale.rangeRound([0, xMax]);
-  cityScale.rangeRound([0, dateScale.bandwidth()]);
-  tempScale.range([yMax, 0]);
-  const {
-    tooltipData,
-    tooltipLeft,
-    tooltipTop,
-    tooltipOpen,
-    showTooltip,
-    hideTooltip
-  } = useTooltip();
-  const handleMouse = (event, datum2) => {
-    console.log(datum2);
-    showTooltip({
-      tooltipLeft: event.clientX,
-      tooltipTop: event.clientY,
-      tooltipData: [datum2.key, datum2.value, datum2.color]
-    });
+var _excluded$n = ["flexDirection", "alignItems", "margin", "display", "children"];
+function _extends$A() {
+  _extends$A = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
   };
-  return width < 10 ? null : /* @__PURE__ */ jsxs("div", {
-    children: [/* @__PURE__ */ jsxs("svg", {
-      width,
-      height,
-      children: [/* @__PURE__ */ jsx("rect", {
-        x: 0,
-        y: 0,
-        width,
-        height,
-        fill: value.style.containerStyle.background || "#612efb",
-        rx: 14
-      }), /* @__PURE__ */ jsxs(Group, {
-        top: margin.top,
-        left: margin.left,
-        children: [/* @__PURE__ */ jsx(LeftAxis, {
-          value,
-          yScale: tempScale,
-          parentWidth: width
-        }), /* @__PURE__ */ jsx(BarGroup, {
-          data,
-          keys: keys2,
-          height: yMax,
-          x0: getDate,
-          x0Scale: dateScale,
-          x1Scale: cityScale,
-          yScale: tempScale,
-          color: colorScale,
-          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,
-              rx: 4,
-              onMouseOver: (e3) => handleMouse(e3, bar),
-              onMouseOut: hideTooltip,
-              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}`))
-          }, `bar-group-${barGroup.index}-${barGroup.x0}`))
-        })]
-      }), /* @__PURE__ */ jsx(BottomAxis, {
-        yMax: yMax + margin.top,
-        value,
-        left: margin.left,
-        xScale: dateScale,
-        parentWidth: width
-      })]
-    }), tooltipOpen && /* @__PURE__ */ jsx(ToolTip, {
-      style: {
-        ...value == null ? void 0 : value.style,
-        tooltipbackground: tooltipData[2]
-      },
-      top: tooltipTop,
-      left: tooltipLeft,
-      tooltipData
-    })]
-  });
+  return _extends$A.apply(this, arguments);
 }
-var root$4 = _root;
-var now$2 = function() {
-  return root$4.Date.now();
-};
-var now_1 = now$2;
-var reWhitespace$1 = /\s/;
-function trimmedEndIndex$2(string2) {
-  var index2 = string2.length;
-  while (index2-- && reWhitespace$1.test(string2.charAt(index2))) {
+function _objectWithoutPropertiesLoose$n(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
   }
-  return index2;
-}
-var _trimmedEndIndex = trimmedEndIndex$2;
-var trimmedEndIndex$1 = _trimmedEndIndex;
-var reTrimStart$1 = /^\s+/;
-function baseTrim$2(string2) {
-  return string2 ? string2.slice(0, trimmedEndIndex$1(string2) + 1).replace(reTrimStart$1, "") : string2;
+  return target;
 }
-var _baseTrim = baseTrim$2;
-function isObjectLike$2(value) {
-  return value != null && typeof value == "object";
+function LegendItem(_ref) {
+  var _ref$flexDirection = _ref.flexDirection, flexDirection = _ref$flexDirection === void 0 ? "row" : _ref$flexDirection, _ref$alignItems = _ref.alignItems, alignItems = _ref$alignItems === void 0 ? "center" : _ref$alignItems, _ref$margin = _ref.margin, margin = _ref$margin === void 0 ? "0" : _ref$margin, _ref$display = _ref.display, display = _ref$display === void 0 ? "flex" : _ref$display, children2 = _ref.children, restProps = _objectWithoutPropertiesLoose$n(_ref, _excluded$n);
+  return /* @__PURE__ */ React__default.createElement("div", _extends$A({
+    className: "visx-legend-item",
+    style: {
+      display,
+      alignItems,
+      flexDirection,
+      margin
+    }
+  }, restProps), children2);
 }
-var isObjectLike_1 = isObjectLike$2;
-var baseGetTag$1 = _baseGetTag, isObjectLike$1 = isObjectLike_1;
-var symbolTag$1 = "[object Symbol]";
-function isSymbol$2(value) {
-  return typeof value == "symbol" || isObjectLike$1(value) && baseGetTag$1(value) == symbolTag$1;
+LegendItem.propTypes = {
+  alignItems: _pt.string,
+  margin: _pt.oneOfType([_pt.string, _pt.number]),
+  children: _pt.node,
+  display: _pt.string
+};
+var _excluded$m = ["flex", "label", "margin", "align", "children"];
+function _extends$z() {
+  _extends$z = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$z.apply(this, arguments);
 }
-var isSymbol_1 = isSymbol$2;
-var baseTrim$1 = _baseTrim, isObject$2 = isObject_1, isSymbol$1 = isSymbol_1;
-var NAN$1 = 0 / 0;
-var reIsBadHex$1 = /^[-+]0x[0-9a-f]+$/i;
-var reIsBinary$1 = /^0b[01]+$/i;
-var reIsOctal$1 = /^0o[0-7]+$/i;
-var freeParseInt$1 = parseInt;
-function toNumber$2(value) {
-  if (typeof value == "number") {
-    return value;
-  }
-  if (isSymbol$1(value)) {
-    return NAN$1;
-  }
-  if (isObject$2(value)) {
-    var other = typeof value.valueOf == "function" ? value.valueOf() : value;
-    value = isObject$2(other) ? other + "" : other;
-  }
-  if (typeof value != "string") {
-    return value === 0 ? value : +value;
+function _objectWithoutPropertiesLoose$m(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
   }
-  value = baseTrim$1(value);
-  var isBinary = reIsBinary$1.test(value);
-  return isBinary || reIsOctal$1.test(value) ? freeParseInt$1(value.slice(2), isBinary ? 2 : 8) : reIsBadHex$1.test(value) ? NAN$1 : +value;
+  return target;
 }
-var toNumber_1 = toNumber$2;
-var isObject$1 = isObject_1, now$1 = now_1, toNumber$1 = toNumber_1;
-var FUNC_ERROR_TEXT = "Expected a function";
-var nativeMax = Math.max, nativeMin$1 = Math.min;
-function debounce(func, wait, options) {
-  var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
-  if (typeof func != "function") {
-    throw new TypeError(FUNC_ERROR_TEXT);
-  }
-  wait = toNumber$1(wait) || 0;
-  if (isObject$1(options)) {
-    leading = !!options.leading;
-    maxing = "maxWait" in options;
-    maxWait = maxing ? nativeMax(toNumber$1(options.maxWait) || 0, wait) : maxWait;
-    trailing = "trailing" in options ? !!options.trailing : trailing;
-  }
-  function invokeFunc(time2) {
-    var args = lastArgs, thisArg = lastThis;
-    lastArgs = lastThis = void 0;
-    lastInvokeTime = time2;
-    result = func.apply(thisArg, args);
-    return result;
-  }
-  function leadingEdge(time2) {
-    lastInvokeTime = time2;
-    timerId = setTimeout(timerExpired, wait);
-    return leading ? invokeFunc(time2) : result;
-  }
-  function remainingWait(time2) {
-    var timeSinceLastCall = time2 - lastCallTime, timeSinceLastInvoke = time2 - lastInvokeTime, timeWaiting = wait - timeSinceLastCall;
-    return maxing ? nativeMin$1(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
-  }
-  function shouldInvoke(time2) {
-    var timeSinceLastCall = time2 - lastCallTime, timeSinceLastInvoke = time2 - lastInvokeTime;
-    return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
-  }
-  function timerExpired() {
-    var time2 = now$1();
-    if (shouldInvoke(time2)) {
-      return trailingEdge(time2);
+function LegendLabel(_ref) {
+  var _ref$flex = _ref.flex, flex = _ref$flex === void 0 ? "1" : _ref$flex, label = _ref.label, _ref$margin = _ref.margin, margin = _ref$margin === void 0 ? "5px 0" : _ref$margin, _ref$align = _ref.align, align2 = _ref$align === void 0 ? "left" : _ref$align, children2 = _ref.children, restProps = _objectWithoutPropertiesLoose$m(_ref, _excluded$m);
+  return /* @__PURE__ */ React__default.createElement("div", _extends$z({
+    className: "visx-legend-label",
+    style: {
+      justifyContent: align2,
+      display: "flex",
+      flex,
+      margin
     }
-    timerId = setTimeout(timerExpired, remainingWait(time2));
-  }
-  function trailingEdge(time2) {
-    timerId = void 0;
-    if (trailing && lastArgs) {
-      return invokeFunc(time2);
+  }, restProps), children2 || label);
+}
+LegendLabel.propTypes = {
+  align: _pt.string,
+  label: _pt.node,
+  flex: _pt.oneOfType([_pt.string, _pt.number]),
+  margin: _pt.oneOfType([_pt.string, _pt.number]),
+  children: _pt.node
+};
+function _extends$y() {
+  _extends$y = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
     }
-    lastArgs = lastThis = void 0;
-    return result;
-  }
-  function cancel() {
-    if (timerId !== void 0) {
-      clearTimeout(timerId);
+    return target;
+  };
+  return _extends$y.apply(this, arguments);
+}
+function ShapeRect(_ref) {
+  var fill = _ref.fill, width = _ref.width, height = _ref.height, style2 = _ref.style;
+  return /* @__PURE__ */ React__default.createElement("div", {
+    style: _extends$y({
+      width,
+      height,
+      background: fill
+    }, style2)
+  });
+}
+ShapeRect.propTypes = {
+  fill: _pt.string,
+  width: _pt.oneOfType([_pt.string, _pt.number]),
+  height: _pt.oneOfType([_pt.string, _pt.number])
+};
+function ShapeCircle(_ref) {
+  var fill = _ref.fill, width = _ref.width, height = _ref.height, style2 = _ref.style;
+  var cleanWidth = typeof width === "string" || typeof width === "undefined" ? 0 : width;
+  var cleanHeight = typeof height === "string" || typeof height === "undefined" ? 0 : height;
+  var size = Math.max(cleanWidth, cleanHeight);
+  var radius = size / 2;
+  return /* @__PURE__ */ React__default.createElement("svg", {
+    width: size,
+    height: size
+  }, /* @__PURE__ */ React__default.createElement(Group, {
+    top: radius,
+    left: radius
+  }, /* @__PURE__ */ React__default.createElement("circle", {
+    r: radius,
+    fill,
+    style: style2
+  })));
+}
+ShapeCircle.propTypes = {
+  fill: _pt.string,
+  width: _pt.oneOfType([_pt.string, _pt.number]),
+  height: _pt.oneOfType([_pt.string, _pt.number])
+};
+function ShapeLine(_ref) {
+  var fill = _ref.fill, width = _ref.width, height = _ref.height, style2 = _ref.style;
+  var cleanHeight = typeof height === "string" || typeof height === "undefined" ? 0 : height;
+  var lineThickness = typeof (style2 == null ? void 0 : style2.strokeWidth) === "number" ? style2 == null ? void 0 : style2.strokeWidth : 2;
+  return /* @__PURE__ */ React__default.createElement("svg", {
+    width,
+    height
+  }, /* @__PURE__ */ React__default.createElement(Group, {
+    top: cleanHeight / 2 - lineThickness / 2
+  }, /* @__PURE__ */ React__default.createElement("line", {
+    x1: 0,
+    x2: width,
+    y1: 0,
+    y2: 0,
+    stroke: fill,
+    strokeWidth: lineThickness,
+    style: style2
+  })));
+}
+ShapeLine.propTypes = {
+  fill: _pt.string,
+  width: _pt.oneOfType([_pt.string, _pt.number]),
+  height: _pt.oneOfType([_pt.string, _pt.number])
+};
+function _extends$x() {
+  _extends$x = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
     }
-    lastInvokeTime = 0;
-    lastArgs = lastCallTime = lastThis = timerId = void 0;
+    return target;
+  };
+  return _extends$x.apply(this, arguments);
+}
+var NO_OP = function NO_OP2() {
+  return void 0;
+};
+function renderShape(_ref) {
+  var _ref$shape = _ref.shape, shape = _ref$shape === void 0 ? "rect" : _ref$shape, _ref$fill = _ref.fill, fill = _ref$fill === void 0 ? NO_OP : _ref$fill, _ref$size = _ref.size, size = _ref$size === void 0 ? NO_OP : _ref$size, width = _ref.width, height = _ref.height, label = _ref.label, item = _ref.item, itemIndex = _ref.itemIndex, _ref$shapeStyle = _ref.shapeStyle, shapeStyle = _ref$shapeStyle === void 0 ? NO_OP : _ref$shapeStyle;
+  var props = {
+    width,
+    height,
+    item,
+    itemIndex,
+    label,
+    fill: fill(_extends$x({}, label)),
+    size: size(_extends$x({}, label)),
+    style: shapeStyle(_extends$x({}, label))
+  };
+  if (typeof shape === "string") {
+    if (shape === "circle") {
+      return /* @__PURE__ */ React__default.createElement(ShapeCircle, props);
+    }
+    if (shape === "line") {
+      return /* @__PURE__ */ React__default.createElement(ShapeLine, props);
+    }
+    return /* @__PURE__ */ React__default.createElement(ShapeRect, props);
   }
-  function flush() {
-    return timerId === void 0 ? result : trailingEdge(now$1());
+  if (/* @__PURE__ */ React__default.isValidElement(shape)) {
+    return /* @__PURE__ */ React__default.cloneElement(shape, props);
   }
-  function debounced() {
-    var time2 = now$1(), isInvoking = shouldInvoke(time2);
-    lastArgs = arguments;
-    lastThis = this;
-    lastCallTime = time2;
-    if (isInvoking) {
-      if (timerId === void 0) {
-        return leadingEdge(lastCallTime);
-      }
-      if (maxing) {
-        clearTimeout(timerId);
-        timerId = setTimeout(timerExpired, wait);
-        return invokeFunc(lastCallTime);
+  if (shape) {
+    return /* @__PURE__ */ React__default.createElement(shape, props);
+  }
+  return null;
+}
+function _extends$w() {
+  _extends$w = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
       }
     }
-    if (timerId === void 0) {
-      timerId = setTimeout(timerExpired, wait);
+    return target;
+  };
+  return _extends$w.apply(this, arguments);
+}
+function LegendShape(_ref) {
+  var _ref$shape = _ref.shape, shape = _ref$shape === void 0 ? ShapeRect : _ref$shape, width = _ref.width, height = _ref.height, margin = _ref.margin, label = _ref.label, item = _ref.item, itemIndex = _ref.itemIndex, fill = _ref.fill, size = _ref.size, shapeStyle = _ref.shapeStyle;
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: "visx-legend-shape",
+    style: {
+      display: "flex",
+      width: size ? size(_extends$w({}, label)) : width,
+      height: size ? size(_extends$w({}, label)) : height,
+      margin
     }
-    return result;
-  }
-  debounced.cancel = cancel;
-  debounced.flush = flush;
-  return debounced;
+  }, renderShape({
+    shape,
+    item,
+    itemIndex,
+    label,
+    width,
+    height,
+    fill,
+    shapeStyle
+  }));
 }
-var debounce_1 = debounce;
-var debounce$1 = debounce_1;
-var _excluded$n = ["className", "children", "debounceTime", "ignoreDimensions", "parentSizeStyles", "enableDebounceLeadingCall", "resizeObserverPolyfill"];
-function _extends$A() {
-  _extends$A = Object.assign ? Object.assign.bind() : function(target) {
+LegendShape.propTypes = {
+  itemIndex: _pt.number.isRequired,
+  margin: _pt.oneOfType([_pt.string, _pt.number]),
+  width: _pt.oneOfType([_pt.string, _pt.number]),
+  height: _pt.oneOfType([_pt.string, _pt.number])
+};
+function valueOrIdentity(_2) {
+  if (_2 && typeof _2 === "object" && "value" in _2 && typeof _2.value !== "undefined")
+    return _2.value;
+  return _2;
+}
+function valueOrIdentityString(_2) {
+  return String(valueOrIdentity(_2));
+}
+function labelTransformFactory(_ref) {
+  var scale = _ref.scale, labelFormat = _ref.labelFormat;
+  return function(d2, i2) {
+    return {
+      datum: d2,
+      index: i2,
+      text: "" + labelFormat(d2, i2),
+      value: scale(d2)
+    };
+  };
+}
+var _excluded$l = ["className", "style", "scale", "shape", "domain", "fill", "size", "labelFormat", "labelTransform", "shapeWidth", "shapeHeight", "shapeMargin", "shapeStyle", "labelAlign", "labelFlex", "labelMargin", "itemMargin", "direction", "itemDirection", "legendLabelProps", "children"];
+function _extends$v() {
+  _extends$v = Object.assign ? Object.assign.bind() : function(target) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
       var source = arguments[i2];
       for (var key in source) {
@@ -11446,9 +11461,9 @@ function _extends$A() {
     }
     return target;
   };
-  return _extends$A.apply(this, arguments);
+  return _extends$v.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$n(source, excluded) {
+function _objectWithoutPropertiesLoose$l(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -11462,438 +11477,389 @@ function _objectWithoutPropertiesLoose$n(source, excluded) {
   }
   return target;
 }
-var defaultIgnoreDimensions$1 = [];
-var defaultParentSizeStyles$1 = {
-  width: "100%",
-  height: "100%"
+var defaultStyle = {
+  display: "flex"
 };
-function ParentSize$1(_ref) {
-  var className = _ref.className, children2 = _ref.children, _ref$debounceTime = _ref.debounceTime, debounceTime = _ref$debounceTime === void 0 ? 300 : _ref$debounceTime, _ref$ignoreDimensions = _ref.ignoreDimensions, ignoreDimensions = _ref$ignoreDimensions === void 0 ? defaultIgnoreDimensions$1 : _ref$ignoreDimensions, _ref$parentSizeStyles = _ref.parentSizeStyles, parentSizeStyles = _ref$parentSizeStyles === void 0 ? defaultParentSizeStyles$1 : _ref$parentSizeStyles, _ref$enableDebounceLe = _ref.enableDebounceLeadingCall, enableDebounceLeadingCall = _ref$enableDebounceLe === void 0 ? true : _ref$enableDebounceLe, resizeObserverPolyfill = _ref.resizeObserverPolyfill, restProps = _objectWithoutPropertiesLoose$n(_ref, _excluded$n);
-  var target = useRef(null);
-  var animationFrameID = useRef(0);
-  var _useState = useState({
-    width: 0,
-    height: 0,
-    top: 0,
-    left: 0
-  }), state = _useState[0], setState = _useState[1];
-  var resize = useMemo(function() {
-    var normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions];
-    return debounce$1(function(incoming) {
-      setState(function(existing) {
-        var stateKeys = Object.keys(existing);
-        var keysWithChanges = stateKeys.filter(function(key) {
-          return existing[key] !== incoming[key];
-        });
-        var shouldBail = keysWithChanges.every(function(key) {
-          return normalized.includes(key);
-        });
-        return shouldBail ? existing : incoming;
-      });
-    }, debounceTime, {
-      leading: enableDebounceLeadingCall
-    });
-  }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]);
-  useEffect(function() {
-    var LocalResizeObserver = resizeObserverPolyfill || window.ResizeObserver;
-    var observer = new LocalResizeObserver(function(entries) {
-      entries.forEach(function(entry) {
-        var _entry$contentRect;
-        var _ref2 = (_entry$contentRect = entry == null ? void 0 : entry.contentRect) != null ? _entry$contentRect : {}, left2 = _ref2.left, top2 = _ref2.top, width = _ref2.width, height = _ref2.height;
-        animationFrameID.current = window.requestAnimationFrame(function() {
-          resize({
-            width,
-            height,
-            top: top2,
-            left: left2
-          });
-        });
-      });
-    });
-    if (target.current)
-      observer.observe(target.current);
-    return function() {
-      window.cancelAnimationFrame(animationFrameID.current);
-      observer.disconnect();
-      resize.cancel();
-    };
-  }, [resize, resizeObserverPolyfill]);
-  return /* @__PURE__ */ jsx("div", {
-    style: parentSizeStyles,
-    ref: target,
-    className,
-    ...restProps,
-    children: children2(_extends$A({}, state, {
-      ref: target.current,
-      resize
-    }))
+function Legend$1(_ref) {
+  var className = _ref.className, _ref$style = _ref.style, style2 = _ref$style === void 0 ? defaultStyle : _ref$style, scale = _ref.scale, shape = _ref.shape, inputDomain = _ref.domain, _ref$fill = _ref.fill, fill = _ref$fill === void 0 ? valueOrIdentityString : _ref$fill, _ref$size = _ref.size, size = _ref$size === void 0 ? valueOrIdentityString : _ref$size, _ref$labelFormat = _ref.labelFormat, labelFormat = _ref$labelFormat === void 0 ? valueOrIdentity : _ref$labelFormat, _ref$labelTransform = _ref.labelTransform, labelTransform = _ref$labelTransform === void 0 ? labelTransformFactory : _ref$labelTransform, _ref$shapeWidth = _ref.shapeWidth, shapeWidth = _ref$shapeWidth === void 0 ? 15 : _ref$shapeWidth, _ref$shapeHeight = _ref.shapeHeight, shapeHeight = _ref$shapeHeight === void 0 ? 15 : _ref$shapeHeight, _ref$shapeMargin = _ref.shapeMargin, shapeMargin = _ref$shapeMargin === void 0 ? "2px 4px 2px 0" : _ref$shapeMargin, shapeStyle = _ref.shapeStyle, _ref$labelAlign = _ref.labelAlign, labelAlign = _ref$labelAlign === void 0 ? "left" : _ref$labelAlign, _ref$labelFlex = _ref.labelFlex, labelFlex = _ref$labelFlex === void 0 ? "1" : _ref$labelFlex, _ref$labelMargin = _ref.labelMargin, labelMargin = _ref$labelMargin === void 0 ? "0 4px" : _ref$labelMargin, _ref$itemMargin = _ref.itemMargin, itemMargin = _ref$itemMargin === void 0 ? "0" : _ref$itemMargin, _ref$direction = _ref.direction, direction = _ref$direction === void 0 ? "column" : _ref$direction, _ref$itemDirection = _ref.itemDirection, itemDirection = _ref$itemDirection === void 0 ? "row" : _ref$itemDirection, legendLabelProps = _ref.legendLabelProps, children2 = _ref.children, legendItemProps = _objectWithoutPropertiesLoose$l(_ref, _excluded$l);
+  var domain2 = inputDomain || ("domain" in scale ? scale.domain() : []);
+  var labelFormatter = labelTransform({
+    scale,
+    labelFormat
   });
+  var labels = domain2.map(labelFormatter);
+  if (children2)
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children2(labels));
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: cx("visx-legend", className),
+    style: _extends$v({}, style2, {
+      flexDirection: direction
+    })
+  }, labels.map(function(label, i2) {
+    return /* @__PURE__ */ React__default.createElement(LegendItem, _extends$v({
+      key: "legend-" + label.text + "-" + i2,
+      margin: itemMargin,
+      flexDirection: itemDirection
+    }, legendItemProps), /* @__PURE__ */ React__default.createElement(LegendShape, {
+      shape,
+      height: shapeHeight,
+      width: shapeWidth,
+      margin: shapeMargin,
+      item: domain2[i2],
+      itemIndex: i2,
+      label,
+      fill,
+      size,
+      shapeStyle
+    }), /* @__PURE__ */ React__default.createElement(LegendLabel, _extends$v({
+      label: label.text,
+      flex: labelFlex,
+      margin: labelMargin,
+      align: labelAlign
+    }, legendLabelProps)));
+  }));
 }
-ParentSize$1.propTypes = {
+Legend$1.propTypes = {
+  children: _pt.func,
   className: _pt.string,
-  debounceTime: _pt.number,
-  enableDebounceLeadingCall: _pt.bool,
-  ignoreDimensions: _pt.oneOfType([_pt.any, _pt.arrayOf(_pt.any)]),
-  children: _pt.func.isRequired
+  domain: _pt.array,
+  shapeWidth: _pt.oneOfType([_pt.string, _pt.number]),
+  shapeHeight: _pt.oneOfType([_pt.string, _pt.number]),
+  shapeMargin: _pt.oneOfType([_pt.string, _pt.number]),
+  labelAlign: _pt.string,
+  labelFlex: _pt.oneOfType([_pt.string, _pt.number]),
+  labelMargin: _pt.oneOfType([_pt.string, _pt.number]),
+  itemMargin: _pt.oneOfType([_pt.string, _pt.number]),
+  fill: _pt.func,
+  size: _pt.func,
+  shapeStyle: _pt.func
 };
-const Product1 = [
-  { x: "a", y: 100 },
-  { x: "b", y: 50 },
-  { x: "c", y: 100 },
-  { x: "d", y: 80 },
-  { x: "f", y: 100 },
-  { x: "g", y: 50 }
-];
-const finalDataProvider = (type2, value) => {
-  var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n2, _o, _p, _q, _r, _s, _t2, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E;
-  switch (type2) {
-    case "BarGraph":
-      return {
-        main: {
-          type: "barGraph",
-          data: ((_a2 = value == null ? void 0 : value.main) == null ? void 0 : _a2.data) || [{ x: "ASM", y: 100 }, { x: "SDM", y: 60 }, { x: "DCM", y: 40 }, { x: "RCM", y: 70 }],
-          header: "Bar Graph",
-          bottomLabel: "Name of Employe",
-          numTicks: 6,
-          leftLabel: "Value",
-          axisLeft: true,
-          axisBottom: true,
-          hideTicks: true,
-          hideLeftAxisLine: false,
-          hideBottomAxisLine: false,
-          bottomAxisWidth: "10px",
-          ...value.main
-        },
-        style: {
-          containerStyle: {
-            background: "white",
-            width: "90%",
-            height: "300",
-            borderRadius: "20px",
-            padding: "10px 0 2px 0",
-            ...(_b2 = value == null ? void 0 : value.style) == null ? void 0 : _b2.containerStyle
-          },
-          headerStyle: {
-            fontWeight: 500,
-            textAlign: "left",
-            fontFamily: "inherit",
-            marginBottom: "20px",
-            padding: "15px 0 1px 20px",
-            width: "100%",
-            fontSize: "18px",
-            ...(_c2 = value == null ? void 0 : value.style) == null ? void 0 : _c2.headerStyle
-          },
-          tooltipStyle: {
-            padding: "6px",
-            borderRadius: "2px",
-            ...(_d = value == null ? void 0 : value.style) == null ? void 0 : _d.tooltipStyle
-          },
-          labelStyle: {
-            leftLabelMargin: "75",
-            topLabelMargin: "-6",
-            labelColor: "black",
-            leftLabelOffset: 50,
-            bottomLabelOffset: 10,
-            tickLabelColor: "balck",
-            tickFontSize: "10px",
-            tickColor: "black",
-            rightAxisWidth: "0.3px",
-            fontSize: "10px",
-            ...(_e2 = value == null ? void 0 : value.style) == null ? void 0 : _e2.labelStyle
-          },
-          barStyle: {
-            mediumValueColor: "rgba(63, 81, 181, 0.85)",
-            highValueColor: "rgba(63, 81, 181, 0.85)",
-            lowValueColor: "rgba(63, 81, 181, 0.85)",
-            ...(_f = value == null ? void 0 : value.style) == null ? void 0 : _f.barStyle
-          }
-        }
-      };
-    case "PieGraph":
-      return {
-        main: {
-          data: ((_g = value == null ? void 0 : value.main) == null ? void 0 : _g.data) || [{ branch: "Kotak", value: 500 }, { branch: "SBI", value: 700 }, { branch: "HDFC", value: 900 }],
-          header: "Pie Graph",
-          bottomLabel: "Name of Employe",
-          leftLabel: "Value",
-          tooltipDataKey: ["First", "Second", "Third"],
-          axisLeft: true,
-          axisBottom: true,
-          legendAvailable: true,
-          ...value == null ? void 0 : value.main,
-          legend: {
-            labelColor: "green",
-            legendTitle: "Our Assests",
-            direction: "row",
-            align: "right",
-            ...(_h = value == null ? void 0 : value.main) == null ? void 0 : _h.legend
-          }
-        },
-        style: {
-          containerStyle: {
-            background: "white",
-            width: "100%",
-            height: "310",
-            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",
-            ...(_j = value == null ? void 0 : value.style) == null ? void 0 : _j.headerStyle
-          },
-          tooltipStyle: {
-            ...(_k = value == null ? void 0 : value.style) == null ? void 0 : _k.tooltipStyle
+function Ordinal(props) {
+  return /* @__PURE__ */ React__default.createElement(Legend$1, props);
+}
+function Legend({
+  value
+}) {
+  var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j, _k;
+  const legendGlyphSize = ((_b2 = (_a2 = value == null ? void 0 : value.main) == null ? void 0 : _a2.legend) == null ? void 0 : _b2.colorRectWidth) || 15;
+  const ordinalColorScale = createOrdinalScale$1({
+    domain: (_c2 = value == null ? void 0 : value.main) == null ? void 0 : _c2.tooltipDataKey,
+    range: (_e2 = (_d = value == null ? void 0 : value.style) == null ? void 0 : _d.pieStyle) == null ? void 0 : _e2.colorRange
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    className: "legend",
+    style: (_g = (_f = value == null ? void 0 : value.style) == null ? void 0 : _f.legendStyle) == null ? void 0 : _g.legend,
+    children: [/* @__PURE__ */ jsx("div", {
+      className: "title",
+      style: (_i = (_h = value == null ? void 0 : value.style) == null ? void 0 : _h.legendStyle) == null ? void 0 : _i.legendTitle,
+      children: (_k = (_j = value == null ? void 0 : value.main) == null ? void 0 : _j.legend) == null ? void 0 : _k.legendTitle
+    }), /* @__PURE__ */ jsx(Ordinal, {
+      scale: ordinalColorScale,
+      labelFormat: (label) => `${label.toUpperCase()}`,
+      children: (labels) => {
+        var _a3, _b3;
+        return /* @__PURE__ */ jsx("div", {
+          style: {
+            display: "flex",
+            flexDirection: ((_b3 = (_a3 = value == null ? void 0 : value.main) == null ? void 0 : _a3.legend) == null ? void 0 : _b3.direction) || "row"
           },
-          labelStyle: {
-            labelColor: "black",
-            labelOffset: 45,
-            leftLabelMargin: "70",
-            topLabelMargin: "-40",
-            ...(_l = value == null ? void 0 : value.style) == null ? void 0 : _l.labelStyle
-          },
-          legendStyle: {
-            legend: {
-              lineHeight: "0.9em",
-              color: "black",
-              fontSize: "10px",
-              fontFamily: "arial",
-              padding: "10px 10px",
-              float: "left",
-              border: "1px solid rgba(255, 255, 255, 0.3)",
-              borderRadius: " 8px",
-              margin: "5px 5px",
-              ...(_n2 = (_m = value == null ? void 0 : value.style) == null ? void 0 : _m.legendStyle) == null ? void 0 : _n2.legend
-            },
-            legendTitle: {
-              fontWeight: 500,
-              marginBottom: "5px",
-              fontFamily: "roboto",
-              fontSize: "10px",
-              ...(_p = (_o = value == null ? void 0 : value.style) == null ? void 0 : _o.legendStyle) == null ? void 0 : _p.legendTitle
-            }
-          },
-          pieStyle: {
-            colorRange: ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)"],
-            outerRadius: 120,
-            innerRadius: 60,
-            cornerRadius: 2,
-            padAngle: 6e-3,
-            ...(_q = value == null ? void 0 : value.style) == null ? void 0 : _q.pieStyle
-          }
-        }
-      };
-    case "LineGraph":
-      return {
-        main: {
-          data: ((_r = value == null ? void 0 : value.main) == null ? void 0 : _r.data) || [Product1],
-          header: "Line Graph Dynamic",
-          bottomLabel: "Name of Employe",
-          leftLabel: "Value",
-          gridHidden: true,
-          numHidden: false,
-          tooltipDataKey: ["MAMA New Project", "Second", "Third"],
-          axisLeft: true,
-          axisBottom: true,
-          hideLeftAxisLine: false,
-          hideBottomAxisLine: false,
-          ...value == null ? void 0 : value.main,
-          legend: {
-            labelColor: "green",
-            legendTitle: "Our Assests",
-            direction: "row",
-            align: "right",
-            colorRectWidth: 20,
-            ...(_s = value == null ? void 0 : value.main) == null ? void 0 : _s.legend
-          }
-        },
-        style: {
-          containerStyle: {
-            background: "white",
-            width: "90%",
-            height: "300",
-            borderRadius: "20px",
-            padding: "10px 0 2px 0",
-            ...(_t2 = value == null ? void 0 : value.style) == null ? void 0 : _t2.containerStyle
-          },
-          headerStyle: {
-            fontWeight: 500,
-            textAlign: "left",
-            fontFamily: "inherit",
-            marginBottom: "20px",
-            padding: "15px 0 1px 20px",
-            width: "100%",
-            fontSize: "18px",
-            ...(_u = value == null ? void 0 : value.style) == null ? void 0 : _u.headerStyle
-          },
-          labelStyle: {
-            labelColor: "black",
-            bottomLabelOffset: 20,
-            leftLabelOffset: 50,
-            leftLabelMargin: 80,
-            ...(_v = value == null ? void 0 : value.style) == null ? void 0 : _v.labelStyle
-          },
-          lineStyle: {
-            colorRange: ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)"],
-            lineAreaColor: "none",
-            lineAreaOpacity: 0.2,
-            ...(_w = value == null ? void 0 : value.style) == null ? void 0 : _w.lineStyle
-          }
-        }
-      };
-    case "HorizontalBarGraph":
-      return {
-        main: {
-          data: ((_x = value == null ? void 0 : value.main) == null ? void 0 : _x.data) || [{ y: "Anant Sharma", x: 60 }, { y: "Pankaj Chauhan", x: 60 }, { y: "satendra Raghav", x: 150 }, { y: "Vivek Pahadi", x: 80 }, { y: "Siddarth verma", x: 100 }],
-          header: " ",
-          bottomLabel: "Name of Employe",
-          leftLabel: "Value",
-          axisLeft: true,
-          axisBottom: true,
-          hideBottomTicks: false,
-          hideLeftTicks: ((_y = value == null ? void 0 : value.main) == null ? void 0 : _y.data) ? true : false,
-          hideLeftAxisLine: ((_z = value == null ? void 0 : value.main) == null ? void 0 : _z.data) ? true : false,
-          hideBottomAxisLine: false,
-          bottomAxisWidth: "10px",
-          ...value.main
-        },
-        style: {
-          containerStyle: {
-            background: "white",
-            width: "90%",
-            height: "300",
-            borderRadius: "20px",
-            padding: "10px 0 2px 0",
-            ...(_A = value == null ? void 0 : value.style) == null ? void 0 : _A.containerStyle
-          },
-          headerStyle: {
-            fontWeight: 500,
-            textAlign: "left",
-            fontFamily: "inherit",
-            marginBottom: "20px",
-            padding: "15px 0 1px 20px",
-            width: "100%",
-            fontSize: "18px",
-            ...(_B = value == null ? void 0 : value.style) == null ? void 0 : _B.headerStyle
-          },
-          tooltipStyle: {
-            padding: "6px",
-            borderRadius: "2px",
-            ...(_C = value == null ? void 0 : value.style) == null ? void 0 : _C.tooltipStyle
-          },
-          labelStyle: {
-            margin: { top: 10, left: 110, right: 40, bottom: 40 },
-            tickLabelColor: "#6c5efb",
-            leftLabelOffset: 140,
-            bottomLabelOffset: 14,
-            tickFontSize: "10px",
-            tickColor: "#6c5efb",
-            rightAxisWidth: "0.3px",
-            fontSize: "10px",
-            ...(_D = value == null ? void 0 : value.style) == null ? void 0 : _D.labelStyle
-          },
-          barStyle: {
-            color: "#6c5efb",
-            ...(_E = value == null ? void 0 : value.style) == null ? void 0 : _E.barStyle
-          }
-        }
-      };
-  }
+          children: labels.map((label, i2) => {
+            var _a4, _b4;
+            return /* @__PURE__ */ jsxs(LegendItem, {
+              margin: "0 5px",
+              onClick: (events) => {
+                if (events)
+                  alert(`clicked: ${JSON.stringify(label)}`);
+              },
+              children: [/* @__PURE__ */ jsx("svg", {
+                width: legendGlyphSize,
+                height: legendGlyphSize,
+                children: /* @__PURE__ */ jsx("rect", {
+                  fill: label.value,
+                  width: legendGlyphSize,
+                  height: legendGlyphSize
+                })
+              }), /* @__PURE__ */ jsx(LegendLabel, {
+                align: `${((_b4 = (_a4 = value == null ? void 0 : value.main) == null ? void 0 : _a4.legend) == null ? void 0 : _b4.align) || "left"}`,
+                margin: "0 0 0 4px",
+                children: label.text
+              })]
+            }, `legend-quantile-${i2}`);
+          })
+        });
+      }
+    })]
+  });
+}
+const defaultMargin = {
+  top: 20,
+  right: 0,
+  bottom: 40,
+  left: 40
 };
-const BarGraph = ({
+function DrawBarGraph({
+  width,
+  height,
+  events = false,
+  margin = defaultMargin,
   value
-}) => {
-  var _a2, _b2, _c2, _d;
-  const barData = finalDataProvider("BarGraph", value);
-  let GraphRender = /* @__PURE__ */ jsx(ParentSize$1, {
-    children: (parent) => {
-      var _a3, _b3, _c3, _d2, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n2;
-      return /* @__PURE__ */ jsx(DrawBarGraph, {
-        width: parent.width || 400,
-        height: ((_b3 = (_a3 = barData == null ? void 0 : barData.style) == null ? void 0 : _a3.containerStyle) == null ? void 0 : _b3.height) | 400,
-        margin: {
-          top: ((_e2 = (_d2 = (_c3 = barData == null ? void 0 : barData.style) == null ? void 0 : _c3.labelStyle) == null ? void 0 : _d2.margin) == null ? void 0 : _e2.top) || 10,
-          right: ((_h = (_g = (_f = barData == null ? void 0 : barData.style) == null ? void 0 : _f.labelStyle) == null ? void 0 : _g.margin) == null ? void 0 : _h.right) || 10,
-          bottom: ((_k = (_j = (_i = barData == null ? void 0 : barData.style) == null ? void 0 : _i.labelStyle) == null ? void 0 : _j.margin) == null ? void 0 : _k.bottom) || 20,
-          left: ((_n2 = (_m = (_l = barData == null ? void 0 : barData.style) == null ? void 0 : _l.labelStyle) == null ? void 0 : _m.margin) == null ? void 0 : _n2.left) || 60
-        },
-        value: barData
-      });
-    }
+}) {
+  var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j, _k;
+  const data = (_a2 = value.main) == null ? void 0 : _a2.data;
+  const keys2 = Object.keys(data[0]).filter((d2) => d2 !== "label");
+  const getDate = (d2) => d2.label;
+  const dateScale = createBandScale({
+    domain: data.map(getDate),
+    padding: 0.2
   });
-  return /* @__PURE__ */ jsxs("div", {
-    style: (_a2 = barData == null ? void 0 : barData.style) == null ? void 0 : _a2.containerStyle,
-    children: [((_b2 = barData == null ? void 0 : barData.main) == null ? void 0 : _b2.header) && /* @__PURE__ */ jsx("div", {
-      style: {
-        fontWeight: 500,
-        textAlign: "left",
-        fontFamily: "inherit",
-        marginBottom: "20px",
-        padding: "15px 0 1px 20px",
-        fontSize: "18px",
-        color: "#121926",
-        ...(_c2 = barData == null ? void 0 : barData.style) == null ? void 0 : _c2.headerStyle
-      },
-      children: (_d = barData == null ? void 0 : barData.main) == null ? void 0 : _d.header
-    }), GraphRender]
+  const cityScale = createBandScale({
+    domain: keys2,
+    padding: 0.1
   });
-};
-var _excluded$m = ["flexDirection", "alignItems", "margin", "display", "children"];
-function _extends$z() {
-  _extends$z = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i2 = 1; i2 < arguments.length; i2++) {
-      var source = arguments[i2];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$z.apply(this, arguments);
-}
-function _objectWithoutPropertiesLoose$m(source, excluded) {
-  if (source == null)
-    return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i2;
-  for (i2 = 0; i2 < sourceKeys.length; i2++) {
-    key = sourceKeys[i2];
-    if (excluded.indexOf(key) >= 0)
-      continue;
-    target[key] = source[key];
+  const tempScale = createLinearScale({
+    domain: [0, Math.max(...data.map((d2) => Math.max(...keys2.map((key) => Number(d2[key])))))]
+  });
+  const colorScale = createOrdinalScale$1({
+    domain: keys2,
+    range: [((_d = (_c2 = (_b2 = value.style) == null ? void 0 : _b2.barStyle) == null ? void 0 : _c2.color) == null ? void 0 : _d.firstBarColor) || "#aeeef8", ((_g = (_f = (_e2 = value.style) == null ? void 0 : _e2.barStyle) == null ? void 0 : _f.color) == null ? void 0 : _g.secondBarColor) || "e5fd3d", ((_j = (_i = (_h = value.style) == null ? void 0 : _h.barStyle) == null ? void 0 : _i.color) == null ? void 0 : _j.thirdBarColor) || "#9caff6"]
+  });
+  const xMax = width - margin.left - margin.right;
+  const yMax = height - margin.top - margin.bottom;
+  dateScale.rangeRound([0, xMax]);
+  cityScale.rangeRound([0, dateScale.bandwidth()]);
+  tempScale.range([yMax, 0]);
+  const {
+    tooltipData,
+    tooltipLeft,
+    tooltipTop,
+    tooltipOpen,
+    showTooltip,
+    hideTooltip
+  } = useTooltip();
+  const handleMouse = (event, datum2) => {
+    console.log(datum2);
+    showTooltip({
+      tooltipLeft: event.clientX,
+      tooltipTop: event.clientY,
+      tooltipData: [datum2.key, datum2.value, datum2.color]
+    });
+  };
+  return width < 10 ? null : /* @__PURE__ */ jsxs("div", {
+    children: [((_k = value == null ? void 0 : value.main) == null ? void 0 : _k.legendAvailable) && /* @__PURE__ */ jsx(Legend, {
+      value
+    }), /* @__PURE__ */ jsxs("svg", {
+      width,
+      height,
+      children: [/* @__PURE__ */ jsx("rect", {
+        x: 0,
+        y: 0,
+        width,
+        height,
+        fill: value.style.containerStyle.background || "#612efb",
+        rx: 14
+      }), /* @__PURE__ */ jsxs(Group, {
+        top: margin.top,
+        left: margin.left,
+        children: [/* @__PURE__ */ jsx(LeftAxis, {
+          value,
+          yScale: tempScale,
+          parentWidth: width
+        }), /* @__PURE__ */ jsx(BarGroup, {
+          data,
+          keys: keys2,
+          height: yMax,
+          x0: getDate,
+          x0Scale: dateScale,
+          x1Scale: cityScale,
+          yScale: tempScale,
+          color: colorScale,
+          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,
+              rx: 4,
+              onMouseOver: (e3) => handleMouse(e3, bar),
+              onMouseOut: hideTooltip,
+              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}`))
+          }, `bar-group-${barGroup.index}-${barGroup.x0}`))
+        })]
+      }), /* @__PURE__ */ jsx(BottomAxis, {
+        yMax: yMax + margin.top,
+        value,
+        left: margin.left,
+        xScale: dateScale,
+        parentWidth: width
+      })]
+    }), tooltipOpen && /* @__PURE__ */ jsx(ToolTip, {
+      style: {
+        ...value == null ? void 0 : value.style,
+        tooltipbackground: tooltipData[2]
+      },
+      top: tooltipTop,
+      left: tooltipLeft,
+      tooltipData
+    })]
+  });
+}
+var root$4 = _root;
+var now$2 = function() {
+  return root$4.Date.now();
+};
+var now_1 = now$2;
+var reWhitespace$1 = /\s/;
+function trimmedEndIndex$2(string2) {
+  var index2 = string2.length;
+  while (index2-- && reWhitespace$1.test(string2.charAt(index2))) {
   }
-  return target;
+  return index2;
 }
-function LegendItem(_ref) {
-  var _ref$flexDirection = _ref.flexDirection, flexDirection = _ref$flexDirection === void 0 ? "row" : _ref$flexDirection, _ref$alignItems = _ref.alignItems, alignItems = _ref$alignItems === void 0 ? "center" : _ref$alignItems, _ref$margin = _ref.margin, margin = _ref$margin === void 0 ? "0" : _ref$margin, _ref$display = _ref.display, display = _ref$display === void 0 ? "flex" : _ref$display, children2 = _ref.children, restProps = _objectWithoutPropertiesLoose$m(_ref, _excluded$m);
-  return /* @__PURE__ */ React__default.createElement("div", _extends$z({
-    className: "visx-legend-item",
-    style: {
-      display,
-      alignItems,
-      flexDirection,
-      margin
+var _trimmedEndIndex = trimmedEndIndex$2;
+var trimmedEndIndex$1 = _trimmedEndIndex;
+var reTrimStart$1 = /^\s+/;
+function baseTrim$2(string2) {
+  return string2 ? string2.slice(0, trimmedEndIndex$1(string2) + 1).replace(reTrimStart$1, "") : string2;
+}
+var _baseTrim = baseTrim$2;
+function isObjectLike$2(value) {
+  return value != null && typeof value == "object";
+}
+var isObjectLike_1 = isObjectLike$2;
+var baseGetTag$1 = _baseGetTag, isObjectLike$1 = isObjectLike_1;
+var symbolTag$1 = "[object Symbol]";
+function isSymbol$2(value) {
+  return typeof value == "symbol" || isObjectLike$1(value) && baseGetTag$1(value) == symbolTag$1;
+}
+var isSymbol_1 = isSymbol$2;
+var baseTrim$1 = _baseTrim, isObject$2 = isObject_1, isSymbol$1 = isSymbol_1;
+var NAN$1 = 0 / 0;
+var reIsBadHex$1 = /^[-+]0x[0-9a-f]+$/i;
+var reIsBinary$1 = /^0b[01]+$/i;
+var reIsOctal$1 = /^0o[0-7]+$/i;
+var freeParseInt$1 = parseInt;
+function toNumber$2(value) {
+  if (typeof value == "number") {
+    return value;
+  }
+  if (isSymbol$1(value)) {
+    return NAN$1;
+  }
+  if (isObject$2(value)) {
+    var other = typeof value.valueOf == "function" ? value.valueOf() : value;
+    value = isObject$2(other) ? other + "" : other;
+  }
+  if (typeof value != "string") {
+    return value === 0 ? value : +value;
+  }
+  value = baseTrim$1(value);
+  var isBinary = reIsBinary$1.test(value);
+  return isBinary || reIsOctal$1.test(value) ? freeParseInt$1(value.slice(2), isBinary ? 2 : 8) : reIsBadHex$1.test(value) ? NAN$1 : +value;
+}
+var toNumber_1 = toNumber$2;
+var isObject$1 = isObject_1, now$1 = now_1, toNumber$1 = toNumber_1;
+var FUNC_ERROR_TEXT = "Expected a function";
+var nativeMax = Math.max, nativeMin$1 = Math.min;
+function debounce(func, wait, options) {
+  var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
+  if (typeof func != "function") {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  wait = toNumber$1(wait) || 0;
+  if (isObject$1(options)) {
+    leading = !!options.leading;
+    maxing = "maxWait" in options;
+    maxWait = maxing ? nativeMax(toNumber$1(options.maxWait) || 0, wait) : maxWait;
+    trailing = "trailing" in options ? !!options.trailing : trailing;
+  }
+  function invokeFunc(time2) {
+    var args = lastArgs, thisArg = lastThis;
+    lastArgs = lastThis = void 0;
+    lastInvokeTime = time2;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+  function leadingEdge(time2) {
+    lastInvokeTime = time2;
+    timerId = setTimeout(timerExpired, wait);
+    return leading ? invokeFunc(time2) : result;
+  }
+  function remainingWait(time2) {
+    var timeSinceLastCall = time2 - lastCallTime, timeSinceLastInvoke = time2 - lastInvokeTime, timeWaiting = wait - timeSinceLastCall;
+    return maxing ? nativeMin$1(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
+  }
+  function shouldInvoke(time2) {
+    var timeSinceLastCall = time2 - lastCallTime, timeSinceLastInvoke = time2 - lastInvokeTime;
+    return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
+  }
+  function timerExpired() {
+    var time2 = now$1();
+    if (shouldInvoke(time2)) {
+      return trailingEdge(time2);
     }
-  }, restProps), children2);
+    timerId = setTimeout(timerExpired, remainingWait(time2));
+  }
+  function trailingEdge(time2) {
+    timerId = void 0;
+    if (trailing && lastArgs) {
+      return invokeFunc(time2);
+    }
+    lastArgs = lastThis = void 0;
+    return result;
+  }
+  function cancel() {
+    if (timerId !== void 0) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = void 0;
+  }
+  function flush() {
+    return timerId === void 0 ? result : trailingEdge(now$1());
+  }
+  function debounced() {
+    var time2 = now$1(), isInvoking = shouldInvoke(time2);
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time2;
+    if (isInvoking) {
+      if (timerId === void 0) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === void 0) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
 }
-LegendItem.propTypes = {
-  alignItems: _pt.string,
-  margin: _pt.oneOfType([_pt.string, _pt.number]),
-  children: _pt.node,
-  display: _pt.string
-};
-var _excluded$l = ["flex", "label", "margin", "align", "children"];
-function _extends$y() {
-  _extends$y = Object.assign ? Object.assign.bind() : function(target) {
+var debounce_1 = debounce;
+var debounce$1 = debounce_1;
+var _excluded$k = ["className", "children", "debounceTime", "ignoreDimensions", "parentSizeStyles", "enableDebounceLeadingCall", "resizeObserverPolyfill"];
+function _extends$u() {
+  _extends$u = Object.assign ? Object.assign.bind() : function(target) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
       var source = arguments[i2];
       for (var key in source) {
@@ -11904,9 +11870,9 @@ function _extends$y() {
     }
     return target;
   };
-  return _extends$y.apply(this, arguments);
+  return _extends$u.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$l(source, excluded) {
+function _objectWithoutPropertiesLoose$k(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -11920,350 +11886,388 @@ function _objectWithoutPropertiesLoose$l(source, excluded) {
   }
   return target;
 }
-function LegendLabel(_ref) {
-  var _ref$flex = _ref.flex, flex = _ref$flex === void 0 ? "1" : _ref$flex, label = _ref.label, _ref$margin = _ref.margin, margin = _ref$margin === void 0 ? "5px 0" : _ref$margin, _ref$align = _ref.align, align2 = _ref$align === void 0 ? "left" : _ref$align, children2 = _ref.children, restProps = _objectWithoutPropertiesLoose$l(_ref, _excluded$l);
-  return /* @__PURE__ */ React__default.createElement("div", _extends$y({
-    className: "visx-legend-label",
-    style: {
-      justifyContent: align2,
-      display: "flex",
-      flex,
-      margin
-    }
-  }, restProps), children2 || label);
-}
-LegendLabel.propTypes = {
-  align: _pt.string,
-  label: _pt.node,
-  flex: _pt.oneOfType([_pt.string, _pt.number]),
-  margin: _pt.oneOfType([_pt.string, _pt.number]),
-  children: _pt.node
+var defaultIgnoreDimensions$1 = [];
+var defaultParentSizeStyles$1 = {
+  width: "100%",
+  height: "100%"
 };
-function _extends$x() {
-  _extends$x = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i2 = 1; i2 < arguments.length; i2++) {
-      var source = arguments[i2];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$x.apply(this, arguments);
-}
-function ShapeRect(_ref) {
-  var fill = _ref.fill, width = _ref.width, height = _ref.height, style2 = _ref.style;
-  return /* @__PURE__ */ React__default.createElement("div", {
-    style: _extends$x({
-      width,
-      height,
-      background: fill
-    }, style2)
+function ParentSize$1(_ref) {
+  var className = _ref.className, children2 = _ref.children, _ref$debounceTime = _ref.debounceTime, debounceTime = _ref$debounceTime === void 0 ? 300 : _ref$debounceTime, _ref$ignoreDimensions = _ref.ignoreDimensions, ignoreDimensions = _ref$ignoreDimensions === void 0 ? defaultIgnoreDimensions$1 : _ref$ignoreDimensions, _ref$parentSizeStyles = _ref.parentSizeStyles, parentSizeStyles = _ref$parentSizeStyles === void 0 ? defaultParentSizeStyles$1 : _ref$parentSizeStyles, _ref$enableDebounceLe = _ref.enableDebounceLeadingCall, enableDebounceLeadingCall = _ref$enableDebounceLe === void 0 ? true : _ref$enableDebounceLe, resizeObserverPolyfill = _ref.resizeObserverPolyfill, restProps = _objectWithoutPropertiesLoose$k(_ref, _excluded$k);
+  var target = useRef(null);
+  var animationFrameID = useRef(0);
+  var _useState = useState({
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0
+  }), state = _useState[0], setState = _useState[1];
+  var resize = useMemo(function() {
+    var normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions];
+    return debounce$1(function(incoming) {
+      setState(function(existing) {
+        var stateKeys = Object.keys(existing);
+        var keysWithChanges = stateKeys.filter(function(key) {
+          return existing[key] !== incoming[key];
+        });
+        var shouldBail = keysWithChanges.every(function(key) {
+          return normalized.includes(key);
+        });
+        return shouldBail ? existing : incoming;
+      });
+    }, debounceTime, {
+      leading: enableDebounceLeadingCall
+    });
+  }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]);
+  useEffect(function() {
+    var LocalResizeObserver = resizeObserverPolyfill || window.ResizeObserver;
+    var observer = new LocalResizeObserver(function(entries) {
+      entries.forEach(function(entry) {
+        var _entry$contentRect;
+        var _ref2 = (_entry$contentRect = entry == null ? void 0 : entry.contentRect) != null ? _entry$contentRect : {}, left2 = _ref2.left, top2 = _ref2.top, width = _ref2.width, height = _ref2.height;
+        animationFrameID.current = window.requestAnimationFrame(function() {
+          resize({
+            width,
+            height,
+            top: top2,
+            left: left2
+          });
+        });
+      });
+    });
+    if (target.current)
+      observer.observe(target.current);
+    return function() {
+      window.cancelAnimationFrame(animationFrameID.current);
+      observer.disconnect();
+      resize.cancel();
+    };
+  }, [resize, resizeObserverPolyfill]);
+  return /* @__PURE__ */ jsx("div", {
+    style: parentSizeStyles,
+    ref: target,
+    className,
+    ...restProps,
+    children: children2(_extends$u({}, state, {
+      ref: target.current,
+      resize
+    }))
   });
 }
-ShapeRect.propTypes = {
-  fill: _pt.string,
-  width: _pt.oneOfType([_pt.string, _pt.number]),
-  height: _pt.oneOfType([_pt.string, _pt.number])
-};
-function ShapeCircle(_ref) {
-  var fill = _ref.fill, width = _ref.width, height = _ref.height, style2 = _ref.style;
-  var cleanWidth = typeof width === "string" || typeof width === "undefined" ? 0 : width;
-  var cleanHeight = typeof height === "string" || typeof height === "undefined" ? 0 : height;
-  var size = Math.max(cleanWidth, cleanHeight);
-  var radius = size / 2;
-  return /* @__PURE__ */ React__default.createElement("svg", {
-    width: size,
-    height: size
-  }, /* @__PURE__ */ React__default.createElement(Group, {
-    top: radius,
-    left: radius
-  }, /* @__PURE__ */ React__default.createElement("circle", {
-    r: radius,
-    fill,
-    style: style2
-  })));
-}
-ShapeCircle.propTypes = {
-  fill: _pt.string,
-  width: _pt.oneOfType([_pt.string, _pt.number]),
-  height: _pt.oneOfType([_pt.string, _pt.number])
-};
-function ShapeLine(_ref) {
-  var fill = _ref.fill, width = _ref.width, height = _ref.height, style2 = _ref.style;
-  var cleanHeight = typeof height === "string" || typeof height === "undefined" ? 0 : height;
-  var lineThickness = typeof (style2 == null ? void 0 : style2.strokeWidth) === "number" ? style2 == null ? void 0 : style2.strokeWidth : 2;
-  return /* @__PURE__ */ React__default.createElement("svg", {
-    width,
-    height
-  }, /* @__PURE__ */ React__default.createElement(Group, {
-    top: cleanHeight / 2 - lineThickness / 2
-  }, /* @__PURE__ */ React__default.createElement("line", {
-    x1: 0,
-    x2: width,
-    y1: 0,
-    y2: 0,
-    stroke: fill,
-    strokeWidth: lineThickness,
-    style: style2
-  })));
-}
-ShapeLine.propTypes = {
-  fill: _pt.string,
-  width: _pt.oneOfType([_pt.string, _pt.number]),
-  height: _pt.oneOfType([_pt.string, _pt.number])
+ParentSize$1.propTypes = {
+  className: _pt.string,
+  debounceTime: _pt.number,
+  enableDebounceLeadingCall: _pt.bool,
+  ignoreDimensions: _pt.oneOfType([_pt.any, _pt.arrayOf(_pt.any)]),
+  children: _pt.func.isRequired
 };
-function _extends$w() {
-  _extends$w = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i2 = 1; i2 < arguments.length; i2++) {
-      var source = arguments[i2];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
+const Product1 = [
+  { x: "a", y: 100 },
+  { x: "b", y: 50 },
+  { x: "c", y: 100 },
+  { x: "d", y: 80 },
+  { x: "f", y: 100 },
+  { x: "g", y: 50 }
+];
+const finalDataProvider = (type2, value) => {
+  var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n2, _o, _p, _q, _r, _s, _t2, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E;
+  switch (type2) {
+    case "BarGraph":
+      return {
+        main: {
+          type: "barGraph",
+          data: ((_a2 = value == null ? void 0 : value.main) == null ? void 0 : _a2.data) || [{ x: "ASM", y: 100 }, { x: "SDM", y: 60 }, { x: "DCM", y: 40 }, { x: "RCM", y: 70 }],
+          header: "Bar Graph",
+          bottomLabel: "Name of Employe",
+          numTicks: 6,
+          leftLabel: "Value",
+          axisLeft: true,
+          axisBottom: true,
+          hideTicks: true,
+          hideLeftAxisLine: false,
+          hideBottomAxisLine: false,
+          bottomAxisWidth: "10px",
+          ...value.main
+        },
+        style: {
+          containerStyle: {
+            background: "white",
+            width: "90%",
+            height: "300",
+            borderRadius: "20px",
+            padding: "10px 0 2px 0",
+            ...(_b2 = value == null ? void 0 : value.style) == null ? void 0 : _b2.containerStyle
+          },
+          headerStyle: {
+            fontWeight: 500,
+            textAlign: "left",
+            fontFamily: "inherit",
+            marginBottom: "20px",
+            padding: "15px 0 1px 20px",
+            width: "100%",
+            fontSize: "18px",
+            ...(_c2 = value == null ? void 0 : value.style) == null ? void 0 : _c2.headerStyle
+          },
+          tooltipStyle: {
+            padding: "6px",
+            borderRadius: "2px",
+            ...(_d = value == null ? void 0 : value.style) == null ? void 0 : _d.tooltipStyle
+          },
+          labelStyle: {
+            leftLabelMargin: "75",
+            topLabelMargin: "-6",
+            labelColor: "black",
+            leftLabelOffset: 50,
+            bottomLabelOffset: 45,
+            tickLabelColor: "balck",
+            tickFontSize: "10px",
+            tickColor: "black",
+            rightAxisWidth: "0.3px",
+            fontSize: "10px",
+            ...(_e2 = value == null ? void 0 : value.style) == null ? void 0 : _e2.labelStyle
+          },
+          barStyle: {
+            mediumValueColor: "rgba(63, 81, 181, 0.85)",
+            highValueColor: "rgba(63, 81, 181, 0.85)",
+            lowValueColor: "rgba(63, 81, 181, 0.85)",
+            ...(_f = value == null ? void 0 : value.style) == null ? void 0 : _f.barStyle
+          }
         }
-      }
-    }
-    return target;
-  };
-  return _extends$w.apply(this, arguments);
-}
-var NO_OP = function NO_OP2() {
-  return void 0;
-};
-function renderShape(_ref) {
-  var _ref$shape = _ref.shape, shape = _ref$shape === void 0 ? "rect" : _ref$shape, _ref$fill = _ref.fill, fill = _ref$fill === void 0 ? NO_OP : _ref$fill, _ref$size = _ref.size, size = _ref$size === void 0 ? NO_OP : _ref$size, width = _ref.width, height = _ref.height, label = _ref.label, item = _ref.item, itemIndex = _ref.itemIndex, _ref$shapeStyle = _ref.shapeStyle, shapeStyle = _ref$shapeStyle === void 0 ? NO_OP : _ref$shapeStyle;
-  var props = {
-    width,
-    height,
-    item,
-    itemIndex,
-    label,
-    fill: fill(_extends$w({}, label)),
-    size: size(_extends$w({}, label)),
-    style: shapeStyle(_extends$w({}, label))
-  };
-  if (typeof shape === "string") {
-    if (shape === "circle") {
-      return /* @__PURE__ */ React__default.createElement(ShapeCircle, props);
-    }
-    if (shape === "line") {
-      return /* @__PURE__ */ React__default.createElement(ShapeLine, props);
-    }
-    return /* @__PURE__ */ React__default.createElement(ShapeRect, props);
-  }
-  if (/* @__PURE__ */ React__default.isValidElement(shape)) {
-    return /* @__PURE__ */ React__default.cloneElement(shape, props);
-  }
-  if (shape) {
-    return /* @__PURE__ */ React__default.createElement(shape, props);
-  }
-  return null;
-}
-function _extends$v() {
-  _extends$v = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i2 = 1; i2 < arguments.length; i2++) {
-      var source = arguments[i2];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
+      };
+    case "PieGraph":
+      return {
+        main: {
+          data: ((_g = value == null ? void 0 : value.main) == null ? void 0 : _g.data) || [{ branch: "Kotak", value: 500 }, { branch: "SBI", value: 700 }, { branch: "HDFC", value: 900 }],
+          header: "Pie Graph",
+          bottomLabel: "Name of Employe",
+          leftLabel: "Value",
+          tooltipDataKey: ["First", "Second", "Third"],
+          axisLeft: true,
+          axisBottom: true,
+          legendAvailable: true,
+          ...value == null ? void 0 : value.main,
+          legend: {
+            labelColor: "green",
+            legendTitle: "Our Assests",
+            direction: "row",
+            align: "right",
+            ...(_h = value == null ? void 0 : value.main) == null ? void 0 : _h.legend
+          }
+        },
+        style: {
+          containerStyle: {
+            background: "white",
+            width: "100%",
+            height: "310",
+            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",
+            ...(_j = value == null ? void 0 : value.style) == null ? void 0 : _j.headerStyle
+          },
+          tooltipStyle: {
+            ...(_k = value == null ? void 0 : value.style) == null ? void 0 : _k.tooltipStyle
+          },
+          labelStyle: {
+            labelColor: "black",
+            labelOffset: 45,
+            leftLabelMargin: "70",
+            topLabelMargin: "-40",
+            ...(_l = value == null ? void 0 : value.style) == null ? void 0 : _l.labelStyle
+          },
+          legendStyle: {
+            legend: {
+              lineHeight: "0.9em",
+              color: "black",
+              fontSize: "10px",
+              fontFamily: "arial",
+              padding: "10px 10px",
+              float: "left",
+              border: "1px solid rgba(255, 255, 255, 0.3)",
+              borderRadius: " 8px",
+              margin: "5px 5px",
+              ...(_n2 = (_m = value == null ? void 0 : value.style) == null ? void 0 : _m.legendStyle) == null ? void 0 : _n2.legend
+            },
+            legendTitle: {
+              fontWeight: 500,
+              marginBottom: "5px",
+              fontFamily: "roboto",
+              fontSize: "10px",
+              ...(_p = (_o = value == null ? void 0 : value.style) == null ? void 0 : _o.legendStyle) == null ? void 0 : _p.legendTitle
+            }
+          },
+          pieStyle: {
+            colorRange: ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)"],
+            outerRadius: 120,
+            innerRadius: 60,
+            cornerRadius: 2,
+            padAngle: 6e-3,
+            ...(_q = value == null ? void 0 : value.style) == null ? void 0 : _q.pieStyle
+          }
         }
-      }
-    }
-    return target;
-  };
-  return _extends$v.apply(this, arguments);
-}
-function LegendShape(_ref) {
-  var _ref$shape = _ref.shape, shape = _ref$shape === void 0 ? ShapeRect : _ref$shape, width = _ref.width, height = _ref.height, margin = _ref.margin, label = _ref.label, item = _ref.item, itemIndex = _ref.itemIndex, fill = _ref.fill, size = _ref.size, shapeStyle = _ref.shapeStyle;
-  return /* @__PURE__ */ React__default.createElement("div", {
-    className: "visx-legend-shape",
-    style: {
-      display: "flex",
-      width: size ? size(_extends$v({}, label)) : width,
-      height: size ? size(_extends$v({}, label)) : height,
-      margin
-    }
-  }, renderShape({
-    shape,
-    item,
-    itemIndex,
-    label,
-    width,
-    height,
-    fill,
-    shapeStyle
-  }));
-}
-LegendShape.propTypes = {
-  itemIndex: _pt.number.isRequired,
-  margin: _pt.oneOfType([_pt.string, _pt.number]),
-  width: _pt.oneOfType([_pt.string, _pt.number]),
-  height: _pt.oneOfType([_pt.string, _pt.number])
-};
-function valueOrIdentity(_2) {
-  if (_2 && typeof _2 === "object" && "value" in _2 && typeof _2.value !== "undefined")
-    return _2.value;
-  return _2;
-}
-function valueOrIdentityString(_2) {
-  return String(valueOrIdentity(_2));
-}
-function labelTransformFactory(_ref) {
-  var scale = _ref.scale, labelFormat = _ref.labelFormat;
-  return function(d2, i2) {
-    return {
-      datum: d2,
-      index: i2,
-      text: "" + labelFormat(d2, i2),
-      value: scale(d2)
-    };
-  };
-}
-var _excluded$k = ["className", "style", "scale", "shape", "domain", "fill", "size", "labelFormat", "labelTransform", "shapeWidth", "shapeHeight", "shapeMargin", "shapeStyle", "labelAlign", "labelFlex", "labelMargin", "itemMargin", "direction", "itemDirection", "legendLabelProps", "children"];
-function _extends$u() {
-  _extends$u = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i2 = 1; i2 < arguments.length; i2++) {
-      var source = arguments[i2];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
+      };
+    case "LineGraph":
+      return {
+        main: {
+          data: ((_r = value == null ? void 0 : value.main) == null ? void 0 : _r.data) || [Product1],
+          header: "Line Graph Dynamic",
+          bottomLabel: "Name of Employe",
+          leftLabel: "Value",
+          gridHidden: true,
+          numHidden: false,
+          tooltipDataKey: ["MAMA New Project", "Second", "Third"],
+          axisLeft: true,
+          axisBottom: true,
+          hideLeftAxisLine: false,
+          hideBottomAxisLine: false,
+          ...value == null ? void 0 : value.main,
+          legend: {
+            labelColor: "green",
+            legendTitle: "Our Assests",
+            direction: "row",
+            align: "right",
+            colorRectWidth: 20,
+            ...(_s = value == null ? void 0 : value.main) == null ? void 0 : _s.legend
+          }
+        },
+        style: {
+          containerStyle: {
+            background: "white",
+            width: "90%",
+            height: "300",
+            borderRadius: "20px",
+            padding: "10px 0 2px 0",
+            ...(_t2 = value == null ? void 0 : value.style) == null ? void 0 : _t2.containerStyle
+          },
+          headerStyle: {
+            fontWeight: 500,
+            textAlign: "left",
+            fontFamily: "inherit",
+            marginBottom: "20px",
+            padding: "15px 0 1px 20px",
+            width: "100%",
+            fontSize: "18px",
+            ...(_u = value == null ? void 0 : value.style) == null ? void 0 : _u.headerStyle
+          },
+          labelStyle: {
+            labelColor: "black",
+            bottomLabelOffset: 20,
+            leftLabelOffset: 50,
+            leftLabelMargin: 80,
+            ...(_v = value == null ? void 0 : value.style) == null ? void 0 : _v.labelStyle
+          },
+          lineStyle: {
+            colorRange: ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)"],
+            lineAreaColor: "none",
+            lineAreaOpacity: 0.2,
+            ...(_w = value == null ? void 0 : value.style) == null ? void 0 : _w.lineStyle
+          }
         }
-      }
-    }
-    return target;
-  };
-  return _extends$u.apply(this, arguments);
-}
-function _objectWithoutPropertiesLoose$k(source, excluded) {
-  if (source == null)
-    return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i2;
-  for (i2 = 0; i2 < sourceKeys.length; i2++) {
-    key = sourceKeys[i2];
-    if (excluded.indexOf(key) >= 0)
-      continue;
-    target[key] = source[key];
+      };
+    case "HorizontalBarGraph":
+      return {
+        main: {
+          data: ((_x = value == null ? void 0 : value.main) == null ? void 0 : _x.data) || [{ y: "Anant Sharma", x: 60 }, { y: "Pankaj Chauhan", x: 60 }, { y: "satendra Raghav", x: 150 }, { y: "Vivek Pahadi", x: 80 }, { y: "Siddarth verma", x: 100 }],
+          header: " ",
+          bottomLabel: "Name of Employe",
+          leftLabel: "Value",
+          axisLeft: true,
+          axisBottom: true,
+          hideBottomTicks: false,
+          hideLeftTicks: ((_y = value == null ? void 0 : value.main) == null ? void 0 : _y.data) ? true : false,
+          hideLeftAxisLine: ((_z = value == null ? void 0 : value.main) == null ? void 0 : _z.data) ? true : false,
+          hideBottomAxisLine: false,
+          bottomAxisWidth: "10px",
+          ...value.main
+        },
+        style: {
+          containerStyle: {
+            background: "white",
+            width: "90%",
+            height: "300",
+            borderRadius: "20px",
+            padding: "10px 0 2px 0",
+            ...(_A = value == null ? void 0 : value.style) == null ? void 0 : _A.containerStyle
+          },
+          headerStyle: {
+            fontWeight: 500,
+            textAlign: "left",
+            fontFamily: "inherit",
+            marginBottom: "20px",
+            padding: "15px 0 1px 20px",
+            width: "100%",
+            fontSize: "18px",
+            ...(_B = value == null ? void 0 : value.style) == null ? void 0 : _B.headerStyle
+          },
+          tooltipStyle: {
+            padding: "6px",
+            borderRadius: "2px",
+            ...(_C = value == null ? void 0 : value.style) == null ? void 0 : _C.tooltipStyle
+          },
+          labelStyle: {
+            margin: { top: 10, left: 110, right: 40, bottom: 40 },
+            tickLabelColor: "#6c5efb",
+            leftLabelOffset: 140,
+            bottomLabelOffset: 14,
+            tickFontSize: "10px",
+            tickColor: "#6c5efb",
+            rightAxisWidth: "0.3px",
+            fontSize: "10px",
+            ...(_D = value == null ? void 0 : value.style) == null ? void 0 : _D.labelStyle
+          },
+          barStyle: {
+            color: "#6c5efb",
+            ...(_E = value == null ? void 0 : value.style) == null ? void 0 : _E.barStyle
+          }
+        }
+      };
   }
-  return target;
-}
-var defaultStyle = {
-  display: "flex"
-};
-function Legend$1(_ref) {
-  var className = _ref.className, _ref$style = _ref.style, style2 = _ref$style === void 0 ? defaultStyle : _ref$style, scale = _ref.scale, shape = _ref.shape, inputDomain = _ref.domain, _ref$fill = _ref.fill, fill = _ref$fill === void 0 ? valueOrIdentityString : _ref$fill, _ref$size = _ref.size, size = _ref$size === void 0 ? valueOrIdentityString : _ref$size, _ref$labelFormat = _ref.labelFormat, labelFormat = _ref$labelFormat === void 0 ? valueOrIdentity : _ref$labelFormat, _ref$labelTransform = _ref.labelTransform, labelTransform = _ref$labelTransform === void 0 ? labelTransformFactory : _ref$labelTransform, _ref$shapeWidth = _ref.shapeWidth, shapeWidth = _ref$shapeWidth === void 0 ? 15 : _ref$shapeWidth, _ref$shapeHeight = _ref.shapeHeight, shapeHeight = _ref$shapeHeight === void 0 ? 15 : _ref$shapeHeight, _ref$shapeMargin = _ref.shapeMargin, shapeMargin = _ref$shapeMargin === void 0 ? "2px 4px 2px 0" : _ref$shapeMargin, shapeStyle = _ref.shapeStyle, _ref$labelAlign = _ref.labelAlign, labelAlign = _ref$labelAlign === void 0 ? "left" : _ref$labelAlign, _ref$labelFlex = _ref.labelFlex, labelFlex = _ref$labelFlex === void 0 ? "1" : _ref$labelFlex, _ref$labelMargin = _ref.labelMargin, labelMargin = _ref$labelMargin === void 0 ? "0 4px" : _ref$labelMargin, _ref$itemMargin = _ref.itemMargin, itemMargin = _ref$itemMargin === void 0 ? "0" : _ref$itemMargin, _ref$direction = _ref.direction, direction = _ref$direction === void 0 ? "column" : _ref$direction, _ref$itemDirection = _ref.itemDirection, itemDirection = _ref$itemDirection === void 0 ? "row" : _ref$itemDirection, legendLabelProps = _ref.legendLabelProps, children2 = _ref.children, legendItemProps = _objectWithoutPropertiesLoose$k(_ref, _excluded$k);
-  var domain2 = inputDomain || ("domain" in scale ? scale.domain() : []);
-  var labelFormatter = labelTransform({
-    scale,
-    labelFormat
-  });
-  var labels = domain2.map(labelFormatter);
-  if (children2)
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children2(labels));
-  return /* @__PURE__ */ React__default.createElement("div", {
-    className: cx("visx-legend", className),
-    style: _extends$u({}, style2, {
-      flexDirection: direction
-    })
-  }, labels.map(function(label, i2) {
-    return /* @__PURE__ */ React__default.createElement(LegendItem, _extends$u({
-      key: "legend-" + label.text + "-" + i2,
-      margin: itemMargin,
-      flexDirection: itemDirection
-    }, legendItemProps), /* @__PURE__ */ React__default.createElement(LegendShape, {
-      shape,
-      height: shapeHeight,
-      width: shapeWidth,
-      margin: shapeMargin,
-      item: domain2[i2],
-      itemIndex: i2,
-      label,
-      fill,
-      size,
-      shapeStyle
-    }), /* @__PURE__ */ React__default.createElement(LegendLabel, _extends$u({
-      label: label.text,
-      flex: labelFlex,
-      margin: labelMargin,
-      align: labelAlign
-    }, legendLabelProps)));
-  }));
-}
-Legend$1.propTypes = {
-  children: _pt.func,
-  className: _pt.string,
-  domain: _pt.array,
-  shapeWidth: _pt.oneOfType([_pt.string, _pt.number]),
-  shapeHeight: _pt.oneOfType([_pt.string, _pt.number]),
-  shapeMargin: _pt.oneOfType([_pt.string, _pt.number]),
-  labelAlign: _pt.string,
-  labelFlex: _pt.oneOfType([_pt.string, _pt.number]),
-  labelMargin: _pt.oneOfType([_pt.string, _pt.number]),
-  itemMargin: _pt.oneOfType([_pt.string, _pt.number]),
-  fill: _pt.func,
-  size: _pt.func,
-  shapeStyle: _pt.func
 };
-function Ordinal(props) {
-  return /* @__PURE__ */ React__default.createElement(Legend$1, props);
-}
-function Legend({
+const BarGraph = ({
   value
-}) {
-  var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j, _k;
-  const legendGlyphSize = ((_b2 = (_a2 = value == null ? void 0 : value.main) == null ? void 0 : _a2.legend) == null ? void 0 : _b2.colorRectWidth) || 15;
-  const ordinalColorScale = createOrdinalScale$1({
-    domain: (_c2 = value == null ? void 0 : value.main) == null ? void 0 : _c2.tooltipDataKey,
-    range: (_e2 = (_d = value == null ? void 0 : value.style) == null ? void 0 : _d.pieStyle) == null ? void 0 : _e2.colorRange
+}) => {
+  var _a2, _b2, _c2, _d;
+  const barData = finalDataProvider("BarGraph", value);
+  let GraphRender = /* @__PURE__ */ jsx(ParentSize$1, {
+    children: (parent) => {
+      var _a3, _b3, _c3, _d2, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n2;
+      return /* @__PURE__ */ jsx(DrawBarGraph, {
+        width: parent.width || 400,
+        height: ((_b3 = (_a3 = barData == null ? void 0 : barData.style) == null ? void 0 : _a3.containerStyle) == null ? void 0 : _b3.height) | 400,
+        margin: {
+          top: ((_e2 = (_d2 = (_c3 = barData == null ? void 0 : barData.style) == null ? void 0 : _c3.labelStyle) == null ? void 0 : _d2.margin) == null ? void 0 : _e2.top) || 10,
+          right: ((_h = (_g = (_f = barData == null ? void 0 : barData.style) == null ? void 0 : _f.labelStyle) == null ? void 0 : _g.margin) == null ? void 0 : _h.right) || 10,
+          bottom: ((_k = (_j = (_i = barData == null ? void 0 : barData.style) == null ? void 0 : _i.labelStyle) == null ? void 0 : _j.margin) == null ? void 0 : _k.bottom) || 20,
+          left: ((_n2 = (_m = (_l = barData == null ? void 0 : barData.style) == null ? void 0 : _l.labelStyle) == null ? void 0 : _m.margin) == null ? void 0 : _n2.left) || 60
+        },
+        value: barData
+      });
+    }
   });
   return /* @__PURE__ */ jsxs("div", {
-    className: "legend",
-    style: (_g = (_f = value == null ? void 0 : value.style) == null ? void 0 : _f.legendStyle) == null ? void 0 : _g.legend,
-    children: [/* @__PURE__ */ jsx("div", {
-      className: "title",
-      style: (_i = (_h = value == null ? void 0 : value.style) == null ? void 0 : _h.legendStyle) == null ? void 0 : _i.legendTitle,
-      children: (_k = (_j = value == null ? void 0 : value.main) == null ? void 0 : _j.legend) == null ? void 0 : _k.legendTitle
-    }), /* @__PURE__ */ jsx(Ordinal, {
-      scale: ordinalColorScale,
-      labelFormat: (label) => `${label.toUpperCase()}`,
-      children: (labels) => {
-        var _a3, _b3;
-        return /* @__PURE__ */ jsx("div", {
-          style: {
-            display: "flex",
-            flexDirection: ((_b3 = (_a3 = value == null ? void 0 : value.main) == null ? void 0 : _a3.legend) == null ? void 0 : _b3.direction) || "row"
-          },
-          children: labels.map((label, i2) => {
-            var _a4, _b4;
-            return /* @__PURE__ */ jsxs(LegendItem, {
-              margin: "0 5px",
-              onClick: (events) => {
-                if (events)
-                  alert(`clicked: ${JSON.stringify(label)}`);
-              },
-              children: [/* @__PURE__ */ jsx("svg", {
-                width: legendGlyphSize,
-                height: legendGlyphSize,
-                children: /* @__PURE__ */ jsx("rect", {
-                  fill: label.value,
-                  width: legendGlyphSize,
-                  height: legendGlyphSize
-                })
-              }), /* @__PURE__ */ jsx(LegendLabel, {
-                align: `${((_b4 = (_a4 = value == null ? void 0 : value.main) == null ? void 0 : _a4.legend) == null ? void 0 : _b4.align) || "left"}`,
-                margin: "0 0 0 4px",
-                children: label.text
-              })]
-            }, `legend-quantile-${i2}`);
-          })
-        });
-      }
-    })]
+    style: (_a2 = barData == null ? void 0 : barData.style) == null ? void 0 : _a2.containerStyle,
+    children: [((_b2 = barData == null ? void 0 : barData.main) == null ? void 0 : _b2.header) && /* @__PURE__ */ jsx("div", {
+      style: {
+        fontWeight: 500,
+        textAlign: "left",
+        fontFamily: "inherit",
+        marginBottom: "20px",
+        padding: "15px 0 1px 20px",
+        fontSize: "18px",
+        color: "#121926",
+        ...(_c2 = barData == null ? void 0 : barData.style) == null ? void 0 : _c2.headerStyle
+      },
+      children: (_d = barData == null ? void 0 : barData.main) == null ? void 0 : _d.header
+    }), GraphRender]
   });
-}
+};
 const DrawPieGraph = ({
   value,
   parentWidth,