impaktapps-design 0.1.5 → 0.1.7

package/dist/impaktapps-design.es.js

@@ -11142,6 +11142,7 @@ const ToolTip = ({
     left: left2,
     children: /* @__PURE__ */ jsxs("div", {
       style: {
+        minWidth: 60,
         textAlign: "center",
         background: "black",
         padding: "10px",
@@ -11658,17 +11659,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 +11673,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,
@@ -11693,11 +11687,7 @@ function DrawBarGraph({
   };
   return width < 10 ? null : /* @__PURE__ */ jsxs("div", {
     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", {
+    children: [/* @__PURE__ */ jsxs("svg", {
       ref: containerRef,
       width,
       height,
@@ -11715,7 +11705,7 @@ function DrawBarGraph({
           value,
           yScale: tempScale,
           parentWidth: width
-        }), ((_v = value == null ? void 0 : value.main) == null ? void 0 : _v.type) === "StackBarGraph" ? /* @__PURE__ */ jsx(BarStack, {
+        }), ((_l = value == null ? void 0 : value.main) == null ? void 0 : _l.type) === "StackBarGraph" ? /* @__PURE__ */ jsx(BarStack, {
           data,
           keys: keys2,
           x: getDate,
@@ -11732,7 +11722,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, {
@@ -11777,20 +11767,34 @@ function DrawBarGraph({
         xScale: dateScale,
         parentWidth: width
       })]
+    }), ((_m = value == null ? void 0 : value.main) == null ? void 0 : _m.legendAvailable) && keys2.length > 1 && /* @__PURE__ */ jsx(Legend, {
+      dataKeyArray: keys2,
+      colorRange: [((_p = (_o = (_n2 = value.style) == null ? void 0 : _n2.barStyle) == null ? void 0 : _o.color) == null ? void 0 : _p.firstBarColor) || "#aeeef8", ((_s = (_r = (_q = value.style) == null ? void 0 : _q.barStyle) == null ? void 0 : _r.color) == null ? void 0 : _s.secondBarColor) || "#e5fd3d", ((_v = (_u = (_t2 = value.style) == null ? void 0 : _t2.barStyle) == null ? void 0 : _u.color) == null ? void 0 : _v.thirdBarColor) || "#9caff6"],
+      value
     }), ((_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
+          color: tooltipData.color,
+          marginBottom: "10px",
+          width: "100%",
+          padding: "2px 1px",
+          borderBottom: "1px solid gray"
         },
         children: /* @__PURE__ */ jsx("strong", {
           children: tooltipData.label
         })
       }), /* @__PURE__ */ jsx("div", {
+        style: {
+          padding: "1px 1px 5px 5px"
+        },
         children: tooltipData.key
       }), /* @__PURE__ */ jsx("div", {
+        style: {
+          padding: "1px 1px 5px 5px"
+        },
         children: /* @__PURE__ */ jsx("small", {
           children: tooltipData.value
         })

package/package.json

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

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,26 +94,17 @@ 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}
     
     });
   };
   return width < 10 ? null : (
     <div style={{  }}>
-       {value?.main?.legendAvailable && 
-        <Legend
-        dataKeyArray={keys}
-        colorRange={[value.style?.barStyle?.color?.firstBarColor||"#aeeef8" ,
-        value.style?.barStyle?.color?.secondBarColor||"#e5fd3d" , 
-        value.style?.barStyle?.color?.thirdBarColor||"#9caff6" ]}
-         value={value}
-        />
-     } 
+      
     <svg ref={containerRef} width={width} height={height}>
       <rect
         x={0}
@@ -151,8 +139,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}
                 
                   />
                 )),
@@ -208,23 +196,31 @@ const colorScale = scaleOrdinal<string, string>({
    />
 
     </svg>
+    {value?.main?.legendAvailable && keys.length >1 &&
+        <Legend
+        dataKeyArray={keys}
+        colorRange={[value.style?.barStyle?.color?.firstBarColor||"#aeeef8" ,
+        value.style?.barStyle?.color?.secondBarColor||"#e5fd3d" , 
+        value.style?.barStyle?.color?.thirdBarColor||"#9caff6" ]}
+         value={value}
+        />
+     } 
     {  
      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>
+        top={tooltipTop}
+        left={tooltipLeft}
+        style={tooltipStyles}
+      >
+        <div style={{ color:tooltipData.color,marginBottom:"10px",width:"100%",padding:"2px 1px",borderBottom:"1px solid gray" }}>
+          <strong>{tooltipData.label}</strong>
+        </div>
+        <div style={{padding:"1px 1px 5px 5px"}}>{tooltipData.key}</div>
+        <div style={{padding:"1px 1px 5px 5px"}}>
+          <small>{tooltipData.value}</small>
+        </div>
+      </TooltipInPortal>
       ):
     tooltipOpen &&
         <ToolTip

package/src/component/ToolTip.tsx

@@ -13,15 +13,13 @@ const ToolTip = ({ style, top, left, tooltipData }: tooltipProps) => {
       >
       <div
         style={{
-          // height: "50px",
+        minWidth:60,
           textAlign:"center",
           background:"black",
           padding:"10px",
          boxShadow:"2px 2px 5px black",
           color:"#6c5efb",
           backgroundColor:"black",
-          // padding:"5px",
-          // backgroundColor:style?.tooltipbackground||"black",
           ...style?.tooltipStyle,
           margin:"-20px",
         }}