impaktapps-design 0.1.3 → 0.1.4

package/dist/impaktapps-design.es.js

@@ -10472,43 +10472,6 @@ const LeftAxis = ({
     }
   });
 };
-const BottomAxis = ({
-  data,
-  yMax,
-  value,
-  xScale,
-  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 == 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,
-    scale: xScale,
-    stroke: (_f = (_e2 = value.style) == null ? void 0 : _e2.labelStyle) == null ? void 0 : _f.tickColor,
-    labelOffset: (_h = (_g = value.style) == null ? void 0 : _g.labelStyle) == null ? void 0 : _h.bottomLabelOffset,
-    label: (_i = value.main) == null ? void 0 : _i.bottomLabel,
-    labelProps: {
-      fill: (_k = (_j = value.style) == null ? void 0 : _j.labelStyle) == null ? void 0 : _k.labelColor,
-      fontSize: (_m = (_l = value.style) == null ? void 0 : _l.labelStyle) == null ? void 0 : _m.fontSize,
-      fontWeight: (_o = (_n2 = value.style) == null ? void 0 : _n2.labelStyle) == null ? void 0 : _o.fontWeight,
-      fontFamily: (_q = (_p = value.style) == null ? void 0 : _p.labelStyle) == null ? void 0 : _q.fontWeight
-    },
-    tickStroke: (_s = (_r = value.style) == null ? void 0 : _r.labelStyle) == null ? void 0 : _s.tickColor,
-    tickLabelProps: () => {
-      var _a3, _b3, _c3, _d2;
-      return {
-        fill: (_b3 = (_a3 = value.style) == null ? void 0 : _a3.labelStyle) == null ? void 0 : _b3.tickLabelColor,
-        fontSize: ((_d2 = (_c3 = value.style) == null ? void 0 : _c3.labelStyle) == null ? void 0 : _d2.tickFontSize) || 11,
-        textAnchor: "middle"
-      };
-    }
-  });
-};
 var _excluded$r = ["tooltipOpen"];
 function _objectWithoutPropertiesLoose$r(source, excluded) {
   if (source == null)
@@ -10907,7 +10870,6 @@ Tooltip$1.propTypes = {
   unstyled: _pt.bool
 };
 Tooltip$1.displayName = "Tooltip";
-var Tooltip$2 = Tooltip$1;
 function _extends$C() {
   _extends$C = Object.assign ? Object.assign.bind() : function(target) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
@@ -11059,7 +11021,7 @@ function TooltipWithBounds(_ref) {
     top2 = Math.round(top2);
     transform2 = "translate(" + left2 + "px, " + top2 + "px)";
   }
-  return /* @__PURE__ */ React__default.createElement(Tooltip$2, _extends$B({
+  return /* @__PURE__ */ React__default.createElement(Tooltip$1, _extends$B({
     ref: nodeRef,
     style: _extends$B({
       left: 0,
@@ -11104,7 +11066,7 @@ function useTooltipInPortal(_temp) {
       var _ref2$left = _ref2.left, containerLeft = _ref2$left === void 0 ? 0 : _ref2$left, _ref2$top = _ref2.top, containerTop = _ref2$top === void 0 ? 0 : _ref2$top, detectBoundsProp = _ref2.detectBounds, zIndexProp = _ref2.zIndex, tooltipProps = _objectWithoutPropertiesLoose$o(_ref2, _excluded2$1);
       var detectBounds = detectBoundsProp == null ? detectBoundsOption : detectBoundsProp;
       var zIndex = zIndexProp == null ? zIndexOption : zIndexProp;
-      var TooltipComponent = detectBounds ? TooltipWithBounds$1 : Tooltip$2;
+      var TooltipComponent = detectBounds ? TooltipWithBounds$1 : Tooltip$1;
       var scrollX = isSsr ? 0 : window.scrollX;
       var scrollY = isSsr ? 0 : window.scrollY;
       var portalLeft = containerLeft + (containerBounds.left || 0) + scrollX;
@@ -11126,6 +11088,43 @@ function useTooltipInPortal(_temp) {
     TooltipInPortal
   };
 }
+const BottomAxis = ({
+  data,
+  yMax,
+  value,
+  xScale,
+  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 == 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,
+    scale: xScale,
+    stroke: (_f = (_e2 = value.style) == null ? void 0 : _e2.labelStyle) == null ? void 0 : _f.tickColor,
+    labelOffset: (_h = (_g = value.style) == null ? void 0 : _g.labelStyle) == null ? void 0 : _h.bottomLabelOffset,
+    label: (_i = value.main) == null ? void 0 : _i.bottomLabel,
+    labelProps: {
+      fill: (_k = (_j = value.style) == null ? void 0 : _j.labelStyle) == null ? void 0 : _k.labelColor,
+      fontSize: (_m = (_l = value.style) == null ? void 0 : _l.labelStyle) == null ? void 0 : _m.fontSize,
+      fontWeight: (_o = (_n2 = value.style) == null ? void 0 : _n2.labelStyle) == null ? void 0 : _o.fontWeight,
+      fontFamily: (_q = (_p = value.style) == null ? void 0 : _p.labelStyle) == null ? void 0 : _q.fontWeight
+    },
+    tickStroke: (_s = (_r = value.style) == null ? void 0 : _r.labelStyle) == null ? void 0 : _s.tickColor,
+    tickLabelProps: () => {
+      var _a3, _b3, _c3, _d2;
+      return {
+        fill: (_b3 = (_a3 = value.style) == null ? void 0 : _a3.labelStyle) == null ? void 0 : _b3.tickLabelColor,
+        fontSize: ((_d2 = (_c3 = value.style) == null ? void 0 : _c3.labelStyle) == null ? void 0 : _d2.tickFontSize) || 11,
+        textAnchor: "middle"
+      };
+    }
+  });
+};
 const ToolTip = ({
   style: style2,
   top: top2,
@@ -11143,27 +11142,27 @@ const ToolTip = ({
     left: left2,
     children: /* @__PURE__ */ jsxs("div", {
       style: {
-        height: "auto",
-        width: "auto",
         textAlign: "center",
         background: "black",
         padding: "10px",
         boxShadow: "2px 2px 5px black",
         color: "#6c5efb",
-        backgroundColor: (style2 == null ? void 0 : style2.tooltipbackground) || "black",
+        backgroundColor: "black",
         ...style2 == null ? void 0 : style2.tooltipStyle,
         margin: "-20px"
       },
       children: [/* @__PURE__ */ jsx("div", {
         style: {
           padding: "4px 10px",
-          backgroundColor: "black",
-          color: "white",
-          borderRadius: "5px"
+          color: (style2 == null ? void 0 : style2.tooltipbackground) || "white",
+          borderRadius: "5px",
+          fontWeight: 700
         },
         children: tooltipData[0]
       }), /* @__PURE__ */ jsx("div", {
         style: {
+          padding: "4px 10px",
+          borderRadius: "5px",
           marginTop: "10px",
           fontWeight: 700
         },
@@ -11539,17 +11538,23 @@ function Ordinal(props) {
   return /* @__PURE__ */ React__default.createElement(Legend$1, props);
 }
 function Legend({
-  value
+  value,
+  colorRange,
+  dataKeyArray
 }) {
   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
+    domain: dataKeyArray || ((_c2 = value == null ? void 0 : value.main) == null ? void 0 : _c2.tooltipDataKey),
+    range: colorRange || ((_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,
+    style: {
+      paddingLeft: "40px",
+      paddingRight: "40px",
+      ...(_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,
@@ -11592,6 +11597,12 @@ function Legend({
     })]
   });
 }
+const tooltipStyles = {
+  ...defaultStyles,
+  minWidth: 60,
+  backgroundColor: "rgba(0,0,0,0.9)",
+  color: "white"
+};
 const defaultMargin = {
   top: 20,
   right: 0,
@@ -11605,10 +11616,18 @@ function DrawBarGraph({
   margin = defaultMargin,
   value
 }) {
-  var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j, _k;
+  var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n2, _o, _p, _q, _r, _s, _t2, _u, _v, _w;
   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 temperatureTotals = data.reduce((allTotals, currentDate) => {
+    const totalTemperature = keys2.reduce((dailyTotal, k2) => {
+      dailyTotal += Number(currentDate[k2]);
+      return dailyTotal;
+    }, 0);
+    allTotals.push(totalTemperature);
+    return allTotals;
+  }, []);
   const dateScale = createBandScale({
     domain: data.map(getDate),
     padding: 0.2
@@ -11618,14 +11637,15 @@ function DrawBarGraph({
     padding: 0.1
   });
   const tempScale = createLinearScale({
-    domain: [0, Math.max(...data.map((d2) => Math.max(...keys2.map((key) => Number(d2[key])))))]
+    domain: ((_b2 = value == null ? void 0 : value.main) == null ? void 0 : _b2.type) === "StackBarGraph" ? [0, Math.max(...temperatureTotals)] : [0, Math.max(...data.map((d2) => Math.max(...keys2.map((key) => Number(d2[key])))))],
+    nice: true
   });
   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"]
+    range: [((_e2 = (_d = (_c2 = value.style) == null ? void 0 : _c2.barStyle) == null ? void 0 : _d.color) == null ? void 0 : _e2.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"]
   });
   const xMax = width - margin.left - margin.right;
-  const yMax = height - margin.top - margin.bottom;
+  const yMax = height - margin.top - margin.bottom - 0;
   dateScale.rangeRound([0, xMax]);
   cityScale.rangeRound([0, dateScale.bandwidth()]);
   tempScale.range([yMax, 0]);
@@ -11638,17 +11658,47 @@ function DrawBarGraph({
     hideTooltip
   } = useTooltip();
   const handleMouse = (event, datum2) => {
+    var _a3;
     console.log(datum2);
     showTooltip({
       tooltipLeft: event.clientX,
       tooltipTop: event.clientY,
-      tooltipData: [datum2.key, datum2.value, datum2.color]
+      tooltipData: ((_a3 = value == null ? void 0 : value.main) == null ? void 0 : _a3.type) === "StackBarGraph" ? {
+        label: datum2.bar.data.label,
+        key: datum2.key,
+        value: datum2.bar.data[datum2.key],
+        color: datum2.color
+      } : [datum2.key, datum2.value, datum2.color]
+    });
+  };
+  const {
+    TooltipInPortal,
+    containerRef
+  } = useTooltipInPortal({
+    detectBounds: true,
+    scroll: true
+  });
+  const stachHandleMouse = (event, datum2) => {
+    console.log(datum2);
+    showTooltip({
+      tooltipLeft: event.clientX,
+      tooltipTop: event.clientY,
+      tooltipData: {
+        label: datum2.bar.data.label,
+        key: datum2.key,
+        value: datum2.bar.data[datum2.key],
+        color: 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, {
+    style: {},
+    children: [((_l = value == null ? void 0 : value.main) == null ? void 0 : _l.legendAvailable) && /* @__PURE__ */ jsx(Legend, {
+      dataKeyArray: keys2,
+      colorRange: [((_o = (_n2 = (_m = value.style) == null ? void 0 : _m.barStyle) == null ? void 0 : _n2.color) == null ? void 0 : _o.firstBarColor) || "#aeeef8", ((_r = (_q = (_p = value.style) == null ? void 0 : _p.barStyle) == null ? void 0 : _q.color) == null ? void 0 : _r.secondBarColor) || "#e5fd3d", ((_u = (_t2 = (_s = value.style) == null ? void 0 : _s.barStyle) == null ? void 0 : _t2.color) == null ? void 0 : _u.thirdBarColor) || "#9caff6"],
       value
     }), /* @__PURE__ */ jsxs("svg", {
+      ref: containerRef,
       width,
       height,
       children: [/* @__PURE__ */ jsx("rect", {
@@ -11665,7 +11715,27 @@ function DrawBarGraph({
           value,
           yScale: tempScale,
           parentWidth: width
-        }), /* @__PURE__ */ jsx(BarGroup, {
+        }), ((_v = value == null ? void 0 : value.main) == null ? void 0 : _v.type) === "StackBarGraph" ? /* @__PURE__ */ jsx(BarStack, {
+          data,
+          keys: keys2,
+          x: getDate,
+          xScale: dateScale,
+          yScale: tempScale,
+          color: colorScale,
+          children: (barStacks) => barStacks.map((barStack) => barStack.bars.map((bar) => /* @__PURE__ */ jsx("rect", {
+            x: bar.x,
+            y: bar.y,
+            height: bar.height,
+            width: bar.width,
+            fill: bar.color,
+            onClick: () => {
+              if (events)
+                alert(`clicked: ${JSON.stringify(bar)}`);
+            },
+            onMouseOver: (e3) => stachHandleMouse(e3, bar),
+            onMouseOut: hideTooltip
+          }, `bar-stack-${barStack.index}-${bar.index}`)))
+        }) : /* @__PURE__ */ jsx(BarGroup, {
           data,
           keys: keys2,
           height: yMax,
@@ -11707,7 +11777,25 @@ function DrawBarGraph({
         xScale: dateScale,
         parentWidth: width
       })]
-    }), tooltipOpen && /* @__PURE__ */ jsx(ToolTip, {
+    }), ((_w = value == null ? void 0 : value.main) == null ? void 0 : _w.type) === "StackBarGraph" ? tooltipOpen && tooltipData && /* @__PURE__ */ jsxs(TooltipInPortal, {
+      top: tooltipTop,
+      left: tooltipLeft,
+      style: tooltipStyles,
+      children: [/* @__PURE__ */ jsx("div", {
+        style: {
+          color: tooltipData.color
+        },
+        children: /* @__PURE__ */ jsx("strong", {
+          children: tooltipData.label
+        })
+      }), /* @__PURE__ */ jsx("div", {
+        children: tooltipData.key
+      }), /* @__PURE__ */ jsx("div", {
+        children: /* @__PURE__ */ jsx("small", {
+          children: tooltipData.value
+        })
+      })]
+    }) : tooltipOpen && /* @__PURE__ */ jsx(ToolTip, {
       style: {
         ...value == null ? void 0 : value.style,
         tooltipbackground: tooltipData[2]
@@ -11970,7 +12058,7 @@ const Product1 = [
   { 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;
+  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, _F;
   switch (type2) {
     case "BarGraph":
       return {
@@ -11980,6 +12068,7 @@ const finalDataProvider = (type2, value) => {
           header: "Bar Graph",
           bottomLabel: "Name of Employe",
           numTicks: 6,
+          legendAvailable: true,
           leftLabel: "Value",
           axisLeft: true,
           axisBottom: true,
@@ -11987,7 +12076,14 @@ const finalDataProvider = (type2, value) => {
           hideLeftAxisLine: false,
           hideBottomAxisLine: false,
           bottomAxisWidth: "10px",
-          ...value.main
+          ...value.main,
+          legend: {
+            labelColor: "green",
+            legendTitle: "Our Assests",
+            direction: "row",
+            align: "right",
+            ...(_b2 = value == null ? void 0 : value.main) == null ? void 0 : _b2.legend
+          }
         },
         style: {
           containerStyle: {
@@ -11996,7 +12092,7 @@ const finalDataProvider = (type2, value) => {
             height: "300",
             borderRadius: "20px",
             padding: "10px 0 2px 0",
-            ...(_b2 = value == null ? void 0 : value.style) == null ? void 0 : _b2.containerStyle
+            ...(_c2 = value == null ? void 0 : value.style) == null ? void 0 : _c2.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -12006,12 +12102,12 @@ const finalDataProvider = (type2, value) => {
             padding: "15px 0 1px 20px",
             width: "100%",
             fontSize: "18px",
-            ...(_c2 = value == null ? void 0 : value.style) == null ? void 0 : _c2.headerStyle
+            ...(_d = value == null ? void 0 : value.style) == null ? void 0 : _d.headerStyle
           },
           tooltipStyle: {
             padding: "6px",
             borderRadius: "2px",
-            ...(_d = value == null ? void 0 : value.style) == null ? void 0 : _d.tooltipStyle
+            ...(_e2 = value == null ? void 0 : value.style) == null ? void 0 : _e2.tooltipStyle
           },
           labelStyle: {
             leftLabelMargin: "75",
@@ -12024,20 +12120,20 @@ const finalDataProvider = (type2, value) => {
             tickColor: "black",
             rightAxisWidth: "0.3px",
             fontSize: "10px",
-            ...(_e2 = value == null ? void 0 : value.style) == null ? void 0 : _e2.labelStyle
+            ...(_f = value == null ? void 0 : value.style) == null ? void 0 : _f.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
+            ...(_g = value == null ? void 0 : value.style) == null ? void 0 : _g.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 }],
+          data: ((_h = value == null ? void 0 : value.main) == null ? void 0 : _h.data) || [{ branch: "Kotak", value: 500 }, { branch: "SBI", value: 700 }, { branch: "HDFC", value: 900 }],
           header: "Pie Graph",
           bottomLabel: "Name of Employe",
           leftLabel: "Value",
@@ -12051,7 +12147,7 @@ const finalDataProvider = (type2, value) => {
             legendTitle: "Our Assests",
             direction: "row",
             align: "right",
-            ...(_h = value == null ? void 0 : value.main) == null ? void 0 : _h.legend
+            ...(_i = value == null ? void 0 : value.main) == null ? void 0 : _i.legend
           }
         },
         style: {
@@ -12061,7 +12157,7 @@ const finalDataProvider = (type2, value) => {
             height: "310",
             borderRadius: "20px",
             padding: "10px 0 2px 0",
-            ...(_i = value == null ? void 0 : value.style) == null ? void 0 : _i.containerStyle
+            ...(_j = value == null ? void 0 : value.style) == null ? void 0 : _j.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -12071,17 +12167,17 @@ const finalDataProvider = (type2, value) => {
             padding: "15px 0 1px 20px",
             width: "100%",
             fontSize: "18px",
-            ...(_j = value == null ? void 0 : value.style) == null ? void 0 : _j.headerStyle
+            ...(_k = value == null ? void 0 : value.style) == null ? void 0 : _k.headerStyle
           },
           tooltipStyle: {
-            ...(_k = value == null ? void 0 : value.style) == null ? void 0 : _k.tooltipStyle
+            ...(_l = value == null ? void 0 : value.style) == null ? void 0 : _l.tooltipStyle
           },
           labelStyle: {
             labelColor: "black",
             labelOffset: 45,
             leftLabelMargin: "70",
             topLabelMargin: "-40",
-            ...(_l = value == null ? void 0 : value.style) == null ? void 0 : _l.labelStyle
+            ...(_m = value == null ? void 0 : value.style) == null ? void 0 : _m.labelStyle
           },
           legendStyle: {
             legend: {
@@ -12094,14 +12190,14 @@ const finalDataProvider = (type2, value) => {
               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
+              ...(_o = (_n2 = value == null ? void 0 : value.style) == null ? void 0 : _n2.legendStyle) == null ? void 0 : _o.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
+              ...(_q = (_p = value == null ? void 0 : value.style) == null ? void 0 : _p.legendStyle) == null ? void 0 : _q.legendTitle
             }
           },
           pieStyle: {
@@ -12110,14 +12206,14 @@ const finalDataProvider = (type2, value) => {
             innerRadius: 60,
             cornerRadius: 2,
             padAngle: 6e-3,
-            ...(_q = value == null ? void 0 : value.style) == null ? void 0 : _q.pieStyle
+            ...(_r = value == null ? void 0 : value.style) == null ? void 0 : _r.pieStyle
           }
         }
       };
     case "LineGraph":
       return {
         main: {
-          data: ((_r = value == null ? void 0 : value.main) == null ? void 0 : _r.data) || [Product1],
+          data: ((_s = value == null ? void 0 : value.main) == null ? void 0 : _s.data) || [Product1],
           header: "Line Graph Dynamic",
           bottomLabel: "Name of Employe",
           leftLabel: "Value",
@@ -12135,7 +12231,7 @@ const finalDataProvider = (type2, value) => {
             direction: "row",
             align: "right",
             colorRectWidth: 20,
-            ...(_s = value == null ? void 0 : value.main) == null ? void 0 : _s.legend
+            ...(_t2 = value == null ? void 0 : value.main) == null ? void 0 : _t2.legend
           }
         },
         style: {
@@ -12145,7 +12241,7 @@ const finalDataProvider = (type2, value) => {
             height: "300",
             borderRadius: "20px",
             padding: "10px 0 2px 0",
-            ...(_t2 = value == null ? void 0 : value.style) == null ? void 0 : _t2.containerStyle
+            ...(_u = value == null ? void 0 : value.style) == null ? void 0 : _u.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -12155,35 +12251,35 @@ const finalDataProvider = (type2, value) => {
             padding: "15px 0 1px 20px",
             width: "100%",
             fontSize: "18px",
-            ...(_u = value == null ? void 0 : value.style) == null ? void 0 : _u.headerStyle
+            ...(_v = value == null ? void 0 : value.style) == null ? void 0 : _v.headerStyle
           },
           labelStyle: {
             labelColor: "black",
             bottomLabelOffset: 20,
             leftLabelOffset: 50,
             leftLabelMargin: 80,
-            ...(_v = value == null ? void 0 : value.style) == null ? void 0 : _v.labelStyle
+            ...(_w = value == null ? void 0 : value.style) == null ? void 0 : _w.labelStyle
           },
           lineStyle: {
             colorRange: ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)"],
             lineAreaColor: "none",
             lineAreaOpacity: 0.2,
-            ...(_w = value == null ? void 0 : value.style) == null ? void 0 : _w.lineStyle
+            ...(_x = value == null ? void 0 : value.style) == null ? void 0 : _x.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 }],
+          data: ((_y = value == null ? void 0 : value.main) == null ? void 0 : _y.data) || [{ y: "Anant Sharma", x: 60 }, { y: "Pankaj Chauhan", x: 60 }, { y: "satendra Raghav", x: 150 }, { y: "Vivek Pahadi", x: 80 }, { y: "Siddarth verma", x: 100 }],
           header: " ",
           bottomLabel: "Name of Employe",
           leftLabel: "Value",
           axisLeft: true,
           axisBottom: true,
           hideBottomTicks: false,
-          hideLeftTicks: ((_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,
+          hideLeftTicks: ((_z = value == null ? void 0 : value.main) == null ? void 0 : _z.data) ? true : false,
+          hideLeftAxisLine: ((_A = value == null ? void 0 : value.main) == null ? void 0 : _A.data) ? true : false,
           hideBottomAxisLine: false,
           bottomAxisWidth: "10px",
           ...value.main
@@ -12195,7 +12291,7 @@ const finalDataProvider = (type2, value) => {
             height: "300",
             borderRadius: "20px",
             padding: "10px 0 2px 0",
-            ...(_A = value == null ? void 0 : value.style) == null ? void 0 : _A.containerStyle
+            ...(_B = value == null ? void 0 : value.style) == null ? void 0 : _B.containerStyle
           },
           headerStyle: {
             fontWeight: 500,
@@ -12205,12 +12301,12 @@ const finalDataProvider = (type2, value) => {
             padding: "15px 0 1px 20px",
             width: "100%",
             fontSize: "18px",
-            ...(_B = value == null ? void 0 : value.style) == null ? void 0 : _B.headerStyle
+            ...(_C = value == null ? void 0 : value.style) == null ? void 0 : _C.headerStyle
           },
           tooltipStyle: {
             padding: "6px",
             borderRadius: "2px",
-            ...(_C = value == null ? void 0 : value.style) == null ? void 0 : _C.tooltipStyle
+            ...(_D = value == null ? void 0 : value.style) == null ? void 0 : _D.tooltipStyle
           },
           labelStyle: {
             margin: { top: 10, left: 110, right: 40, bottom: 40 },
@@ -12221,11 +12317,11 @@ const finalDataProvider = (type2, value) => {
             tickColor: "#6c5efb",
             rightAxisWidth: "0.3px",
             fontSize: "10px",
-            ...(_D = value == null ? void 0 : value.style) == null ? void 0 : _D.labelStyle
+            ...(_E = value == null ? void 0 : value.style) == null ? void 0 : _E.labelStyle
           },
           barStyle: {
             color: "#6c5efb",
-            ...(_E = value == null ? void 0 : value.style) == null ? void 0 : _E.barStyle
+            ...(_F = value == null ? void 0 : value.style) == null ? void 0 : _F.barStyle
           }
         }
       };
@@ -18278,7 +18374,7 @@ var DrawHorizontalBarGraph = withTooltip(({
   var _a2, _b2, _c2;
   const xMax = width - margin.left - margin.right;
   const yMax = height - margin.top - margin.bottom;
-  const tooltipStyles = {
+  const tooltipStyles2 = {
     ...defaultStyles,
     padding: "12px",
     minWidth: 60,
@@ -18371,10 +18467,10 @@ var DrawHorizontalBarGraph = withTooltip(({
           parentWidth: 500
         })]
       })]
-    }), tooltipOpen && tooltipData && /* @__PURE__ */ jsxs(Tooltip$2, {
+    }), tooltipOpen && tooltipData && /* @__PURE__ */ jsxs(Tooltip$1, {
       top: tooltipTop,
       left: tooltipLeft,
-      style: tooltipStyles,
+      style: tooltipStyles2,
       children: [/* @__PURE__ */ jsx("div", {
         style: {
           marginBottom: "5px"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impaktapps-design",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "dependencies": {
     "@babel/core": "^7.16.12",
     "@visx/visx": "^3.1.2",

package/src/component/BarGraph/DrawBarGraph.tsx

@@ -1,8 +1,10 @@
 import React from "react";
 import { Group } from "@visx/group";
 import { BarGroup } from "@visx/shape";
+import { BarStack } from "@visx/shape";
 import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
 import LeftAxis from "../LeftAxis";
+import { useTooltipInPortal,defaultStyles } from "@visx/tooltip";
 import BottomAxis from "../BottomAxis";
 import { BarGroupProps } from "../../interface/interface";
 import { useTooltip } from "@visx/tooltip";
@@ -10,6 +12,12 @@ import ToolTip from "../ToolTip";
 import Legend from "../Legend";
 
 type barValuesType = any;
+const tooltipStyles = {
+  ...defaultStyles,
+  minWidth: 60,
+  backgroundColor: "rgba(0,0,0,0.9)",
+  color: "white"
+};
 const defaultMargin = { top: 20, right: 0, bottom: 40, left:40  };
 export default function DrawBarGraph({
   width,
@@ -23,7 +31,14 @@ const keys = Object.keys(data[0]).filter((d) => d !== "label") as barValuesType[
 
 // accessors
 const getDate = (d: any) => d.label;
-
+const temperatureTotals = data.reduce((allTotals, currentDate) => {
+  const totalTemperature = keys.reduce((dailyTotal, k) => {
+    dailyTotal += Number(currentDate[k]);
+    return dailyTotal;
+  }, 0);
+  allTotals.push(totalTemperature);
+  return allTotals;
+}, [] as number[]);
 // scales
 const dateScale = scaleBand<string>({
   domain: data.map(getDate),
@@ -34,20 +49,25 @@ const cityScale = scaleBand<string>({
   padding: 0.1
 });
 const tempScale = scaleLinear<number>({
-  domain: [
+  domain:value?.main?.type === "StackBarGraph"?
+  [0,Math.max(...temperatureTotals)]:
+  [
     0,
     Math.max(...data.map((d:any) => Math.max(...keys.map((key) => Number(d[key])))))
   ]
+  ,
+  nice:true
+
 });
 const colorScale = scaleOrdinal<string, string>({
   domain: keys,
   range: [value.style?.barStyle?.color?.firstBarColor||"#aeeef8" ,
-  value.style?.barStyle?.color?.secondBarColor||"e5fd3d" , 
+  value.style?.barStyle?.color?.secondBarColor||"#e5fd3d" , 
   value.style?.barStyle?.color?.thirdBarColor||"#9caff6" ]
 });
   // bounds
   const xMax = width - margin.left - margin.right;
-  const yMax = height - margin.top - margin.bottom;
+  const yMax = height - margin.top - margin.bottom - 0;
 
   // update scale output dimensions
   dateScale.rangeRound([0, xMax]);
@@ -66,18 +86,38 @@ const colorScale = scaleOrdinal<string, string>({
     showTooltip({
       tooltipLeft: event.clientX,
       tooltipTop: event.clientY,
-      tooltipData: [datum.key,datum.value,datum.color],
-    //   [datum["label"], datum["v1"]],
+      tooltipData: value?.main?.type === "StackBarGraph"?
+      {label:datum.bar.data.label,key:datum.key,value:datum.bar.data[datum.key],color:datum.color}
+      :
+      [datum.key,datum.value,datum.color],
+    
+    });
+  };
+  const {TooltipInPortal,  containerRef} = useTooltipInPortal({
+    detectBounds: true,
+    scroll: true,
+  });
+  const stachHandleMouse = (event: any, datum: any) => {
+    console.log(datum)
+    showTooltip({
+      tooltipLeft: event.clientX,
+      tooltipTop: event.clientY,
+      tooltipData:{label:datum.bar.data.label,key:datum.key,value:datum.bar.data[datum.key],color:datum.color}
+    
     });
   };
   return width < 10 ? null : (
-    <div>
-       {value?.main?.legendAvailable && (
+    <div style={{  }}>
+       {value?.main?.legendAvailable && 
         <Legend
-          value={value}
+        dataKeyArray={keys}
+        colorRange={[value.style?.barStyle?.color?.firstBarColor||"#aeeef8" ,
+        value.style?.barStyle?.color?.secondBarColor||"#e5fd3d" , 
+        value.style?.barStyle?.color?.thirdBarColor||"#9caff6" ]}
+         value={value}
         />
-      )}
-    <svg width={width} height={height}>
+     } 
+    <svg ref={containerRef} width={width} height={height}>
       <rect
         x={0}
         y={0}
@@ -88,6 +128,37 @@ const colorScale = scaleOrdinal<string, string>({
       />    
       <Group top={margin.top} left={margin.left}>
       <LeftAxis value={value} yScale={tempScale} parentWidth={width} />
+      {
+      value?.main?.type === "StackBarGraph"?
+      <BarStack<any, any>
+            data={data}
+            keys={keys}
+            x={getDate}
+            xScale={dateScale}
+            yScale={tempScale}
+            color={colorScale}
+          >
+            {(barStacks) =>
+              barStacks.map((barStack) =>
+                barStack.bars.map((bar) => (
+                  <rect
+                    key={`bar-stack-${barStack.index}-${bar.index}`}
+                    x={bar.x}
+                    y={bar.y}
+                    height={bar.height}
+                    width={bar.width}
+                    fill={bar.color}
+                    onClick={() => {
+                      if (events) alert(`clicked: ${JSON.stringify(bar)}`);
+                    }}
+                    onMouseOver={(e) => stachHandleMouse(e, bar)}
+                                        onMouseOut={hideTooltip}
+                
+                  />
+                )),
+              )
+            }
+          </BarStack> :
         <BarGroup
           data={data}
           keys={keys}
@@ -126,6 +197,7 @@ const colorScale = scaleOrdinal<string, string>({
             ))
           }
         </BarGroup>
+}
       </Group>
    <BottomAxis 
    yMax={yMax + margin.top}
@@ -136,7 +208,25 @@ const colorScale = scaleOrdinal<string, string>({
    />
 
     </svg>
-    {tooltipOpen &&
+    {  
+     value?.main?.type === "StackBarGraph"?
+      tooltipOpen && tooltipData && (
+      
+        <TooltipInPortal
+          top={tooltipTop}
+          left={tooltipLeft}
+          style={tooltipStyles}
+        >
+          <div style={{ color:tooltipData.color }}>
+            <strong>{tooltipData.label}</strong>
+          </div>
+          <div>{tooltipData.key}</div>
+          <div>
+            <small>{tooltipData.value}</small>
+          </div>
+        </TooltipInPortal>
+      ):
+    tooltipOpen &&
         <ToolTip
           style={{...value?.style,tooltipbackground:tooltipData[2]}}
           top={tooltipTop}

package/src/component/Legend.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import { LegendOrdinal, LegendItem, LegendLabel } from "@visx/legend";
 import { scaleOrdinal } from "@visx/scale";
-export function Legend({ value }: any) {
+export function Legend({ value ,colorRange,dataKeyArray}: any) {
   const legendGlyphSize = value?.main?.legend?.colorRectWidth || 15;
   const ordinalColorScale = scaleOrdinal({
-    domain: value?.main?.tooltipDataKey,
-    range: value?.style?.pieStyle?.colorRange,
+    domain:dataKeyArray||value?.main?.tooltipDataKey,
+    range:colorRange|| value?.style?.pieStyle?.colorRange,
   });
   return (
-    <div className="legend" style={value?.style?.legendStyle?.legend}>
+    <div className="legend" style={{paddingLeft:"40px",paddingRight:"40px",...value?.style?.legendStyle?.legend}}>
       <div className="title" style={value?.style?.legendStyle?.legendTitle}>
         {value?.main?.legend?.legendTitle}
       </div>

package/src/component/ToolTip.tsx

@@ -13,25 +13,25 @@ const ToolTip = ({ style, top, left, tooltipData }: tooltipProps) => {
       >
       <div
         style={{
-          height: "auto",
-          width:"auto",
+          // height: "50px",
           textAlign:"center",
           background:"black",
           padding:"10px",
          boxShadow:"2px 2px 5px black",
           color:"#6c5efb",
+          backgroundColor:"black",
           // padding:"5px",
-          backgroundColor:style?.tooltipbackground||"black",
+          // backgroundColor:style?.tooltipbackground||"black",
           ...style?.tooltipStyle,
           margin:"-20px",
         }}
       >
-        <div style={{padding:"4px 10px",backgroundColor:"black",color:"white",borderRadius:"5px"}}>
+        <div style={{padding:"4px 10px",color:style?.tooltipbackground||"white",borderRadius:"5px",fontWeight:700}}>
         {tooltipData[0]}
         </div>
        
       
-      <div style={{marginTop:"10px",fontWeight:700}}>
+      <div style={{padding:"4px 10px",borderRadius:"5px",marginTop:"10px",fontWeight:700}}>
         {tooltipData[1]}
       </div>
       </div>

package/src/utils/finalDataProvider.ts

@@ -17,6 +17,7 @@ export const finalDataProvider = (type: string, value: any) => {
                     header: "Bar Graph",
                     bottomLabel: "Name of Employe",
                     numTicks: 6,
+                    legendAvailable:true,
                     leftLabel: "Value",
                     axisLeft: true,
                     axisBottom: true,
@@ -25,7 +26,14 @@ export const finalDataProvider = (type: string, value: any) => {
                     hideLeftAxisLine: false,
                     hideBottomAxisLine: false,
                     bottomAxisWidth: "10px",
-                    ...value.main
+                    ...value.main,
+                    legend: {
+                        labelColor: "green",
+                        legendTitle: "Our Assests",
+                        direction: "row",
+                        align: "right",
+                        ...value?.main?.legend,
+                    },
                 },
                 style: {
                     containerStyle: {