impaktapps-design 0.1.6 → 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",
@@ -11686,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,
@@ -11708,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,
@@ -11770,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.6",
+  "version": "0.1.7",
   "dependencies": {
     "@babel/core": "^7.16.12",
     "@visx/visx": "^3.1.2",

package/src/component/BarGraph/DrawBarGraph.tsx

@@ -104,15 +104,7 @@ const colorScale = scaleOrdinal<string, string>({
   };
   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}
@@ -204,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",
         }}