impaktapps-design 0.1.4 → 0.1.6

package/dist/impaktapps-design.es.js

@@ -11658,17 +11658,11 @@ function DrawBarGraph({
     hideTooltip
   } = useTooltip();
   const handleMouse = (event, datum2) => {
-    var _a3;
     console.log(datum2);
     showTooltip({
       tooltipLeft: event.clientX,
       tooltipTop: event.clientY,
-      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]
+      tooltipData: [datum2.key, datum2.value, datum2.color]
     });
   };
   const {
@@ -11678,11 +11672,10 @@ function DrawBarGraph({
     detectBounds: true,
     scroll: true
   });
-  const stachHandleMouse = (event, datum2) => {
-    console.log(datum2);
+  const stackhHandleMouse = (event, datum2) => {
     showTooltip({
-      tooltipLeft: event.clientX,
-      tooltipTop: event.clientY,
+      tooltipLeft: datum2.x + datum2.width / 2,
+      tooltipTop: datum2.y + datum2.height / 2,
       tooltipData: {
         label: datum2.bar.data.label,
         key: datum2.key,
@@ -11732,7 +11725,7 @@ function DrawBarGraph({
               if (events)
                 alert(`clicked: ${JSON.stringify(bar)}`);
             },
-            onMouseOver: (e3) => stachHandleMouse(e3, bar),
+            onMouseOver: (e3) => stackhHandleMouse(e3, bar),
             onMouseOut: hideTooltip
           }, `bar-stack-${barStack.index}-${bar.index}`)))
         }) : /* @__PURE__ */ jsx(BarGroup, {
@@ -12061,9 +12054,9 @@ 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, _F;
   switch (type2) {
     case "BarGraph":
+    case "StackBarGraph":
       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",
@@ -12330,16 +12323,16 @@ const finalDataProvider = (type2, value) => {
 const BarGraph = ({
   value
 }) => {
-  var _a2, _b2, _c2, _d;
-  const barData = finalDataProvider("BarGraph", value);
+  var _a2, _b2, _c2, _d, _e2;
+  const barData = finalDataProvider((_a2 = value == null ? void 0 : value.main) == null ? void 0 : _a2.type, value);
   let GraphRender = /* @__PURE__ */ jsx(ParentSize$1, {
     children: (parent) => {
-      var _a3, _b3, _c3, _d2, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n2;
+      var _a3, _b3, _c3, _d2, _e3, _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,
+          top: ((_e3 = (_d2 = (_c3 = barData == null ? void 0 : barData.style) == null ? void 0 : _c3.labelStyle) == null ? void 0 : _d2.margin) == null ? void 0 : _e3.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
@@ -12349,8 +12342,8 @@ const BarGraph = ({
     }
   });
   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: (_b2 = barData == null ? void 0 : barData.style) == null ? void 0 : _b2.containerStyle,
+    children: [((_c2 = barData == null ? void 0 : barData.main) == null ? void 0 : _c2.header) && /* @__PURE__ */ jsx("div", {
       style: {
         fontWeight: 500,
         textAlign: "left",
@@ -12359,9 +12352,9 @@ const BarGraph = ({
         padding: "15px 0 1px 20px",
         fontSize: "18px",
         color: "#121926",
-        ...(_c2 = barData == null ? void 0 : barData.style) == null ? void 0 : _c2.headerStyle
+        ...(_d = barData == null ? void 0 : barData.style) == null ? void 0 : _d.headerStyle
       },
-      children: (_d = barData == null ? void 0 : barData.main) == null ? void 0 : _d.header
+      children: (_e2 = barData == null ? void 0 : barData.main) == null ? void 0 : _e2.header
     }), GraphRender]
   });
 };

package/package.json

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

package/src/component/BarGraph/BarGraph.tsx

@@ -4,7 +4,7 @@ import { ParentSize } from "@visx/responsive";
 import { finalDataProvider } from "../../utils/finalDataProvider";
 
 const BarGraph = ({ value }:any) => {
-  const barData:any = finalDataProvider("BarGraph",value)
+  const barData:any = finalDataProvider(value?.main?.type,value)
   let GraphRender = (
     <ParentSize>
       {(parent) => (

package/src/component/BarGraph/DrawBarGraph.tsx

@@ -86,10 +86,7 @@ const colorScale = scaleOrdinal<string, string>({
     showTooltip({
       tooltipLeft: event.clientX,
       tooltipTop: event.clientY,
-      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],
+      tooltipData:[datum.key,datum.value,datum.color],
     
     });
   };
@@ -97,11 +94,10 @@ const colorScale = scaleOrdinal<string, string>({
     detectBounds: true,
     scroll: true,
   });
-  const stachHandleMouse = (event: any, datum: any) => {
-    console.log(datum)
+  const stackhHandleMouse = (event: any, datum: any) => {
     showTooltip({
-      tooltipLeft: event.clientX,
-      tooltipTop: event.clientY,
+      tooltipLeft: datum.x+(datum.width/2),
+      tooltipTop: datum.y+(datum.height/2),
       tooltipData:{label:datum.bar.data.label,key:datum.key,value:datum.bar.data[datum.key],color:datum.color}
     
     });
@@ -151,8 +147,8 @@ const colorScale = scaleOrdinal<string, string>({
                     onClick={() => {
                       if (events) alert(`clicked: ${JSON.stringify(bar)}`);
                     }}
-                    onMouseOver={(e) => stachHandleMouse(e, bar)}
-                                        onMouseOut={hideTooltip}
+                    onMouseOver={(e) => stackhHandleMouse(e, bar)}
+                   onMouseOut={hideTooltip}
                 
                   />
                 )),

package/src/utils/finalDataProvider.ts

@@ -9,9 +9,10 @@ const Product1 = [
 export const finalDataProvider = (type: string, value: any) => {
     switch (type) {
         case "BarGraph":
+            case "StackBarGraph":    
             return {
                 main: {
-                    type: "barGraph",
+    
                     data: value?.main?.data || [{ x: "ASM", y: 100 }, { x: "SDM", y: 60 }, { x: "DCM", y: 40 }, { x: "RCM", y: 70 }],
                     // [{}] ,
                     header: "Bar Graph",