impaktapps-design 0.1.6 → 0.1.8

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
         })
@@ -35843,6 +35854,10 @@ const SpeedoMeter = ({
   value
 }) => {
   var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n2, _o, _p, _q, _r, _s, _t2, _u, _v;
+  const [speedoValue, setspeedoValue] = useState(value.main.data);
+  useEffect(() => {
+    setspeedoValue(value.main.data);
+  }, [value.main.data]);
   return /* @__PURE__ */ jsxs("div", {
     style: {
       ...(_a2 = value == null ? void 0 : value.style) == null ? void 0 : _a2.containerStyle
@@ -35867,7 +35882,7 @@ const SpeedoMeter = ({
         ReactSpeedometer,
         {
           segmentColors: (_d = value == null ? void 0 : value.style) == null ? void 0 : _d.segmentColors,
-          maxValue: ((_f = (_e2 = value == null ? void 0 : value.main) == null ? void 0 : _e2.data) == null ? void 0 : _f.maxValue) || 500,
+          maxValue: ((_f = (_e2 = speedoValue == null ? void 0 : speedoValue.main) == null ? void 0 : _e2.data) == null ? void 0 : _f.maxValue) || 500,
           width: ((_g = value == null ? void 0 : value.style) == null ? void 0 : _g.width) || 500,
           needleHeightRatio: ((_h = value == null ? void 0 : value.style) == null ? void 0 : _h.needleHeightRatio) || 0.7,
           currentValueText: (_i = value == null ? void 0 : value.main) == null ? void 0 : _i.currentValueText,
@@ -35875,9 +35890,9 @@ const SpeedoMeter = ({
           ringWidth: ((_k = value == null ? void 0 : value.style) == null ? void 0 : _k.ringWidth) || 37,
           needleTransitionDuration: ((_l = value == null ? void 0 : value.style) == null ? void 0 : _l.needleTransitionDuration) || 5333,
           needleTransition: ((_m = value == null ? void 0 : value.style) == null ? void 0 : _m.needleTransition) || "easeElastic",
-          value: ((_o = (_n2 = value == null ? void 0 : value.main) == null ? void 0 : _n2.data) == null ? void 0 : _o.value) || 473,
+          value: ((_o = (_n2 = speedoValue == null ? void 0 : speedoValue.main) == null ? void 0 : _n2.data) == null ? void 0 : _o.value) || 473,
           needleColor: ((_p = value == null ? void 0 : value.style) == null ? void 0 : _p.needleColor) || "red",
-          minValue: ((_r = (_q = value == null ? void 0 : value.main) == null ? void 0 : _q.data) == null ? void 0 : _r.minValue) || 0,
+          minValue: ((_r = (_q = speedoValue == null ? void 0 : speedoValue.main) == null ? void 0 : _q.data) == null ? void 0 : _r.minValue) || 0,
           startColor: ((_s = value == null ? void 0 : value.style) == null ? void 0 : _s.startColor) || "red",
           segments: ((_t2 = value == null ? void 0 : value.main) == null ? void 0 : _t2.segments) || 5,
           endColor: ((_u = value == null ? void 0 : value.style) == null ? void 0 : _u.endColor) || "green",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impaktapps-design",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "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/SpeedoMeter/SpeedoMeter.tsx

@@ -1,7 +1,11 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import ReactSpeedometer from "react-d3-speedometer";
 
 const SpeedoMeter = ({ value }: any) => {
+  const [speedoValue, setspeedoValue] = useState(value.main.data);
+useEffect(()=>{
+ setspeedoValue(value.main.data)
+},[value.main.data])
   return (
     <div style={{ ...value?.style?.containerStyle }}>
       {value?.main?.header && (
@@ -22,7 +26,7 @@ const SpeedoMeter = ({ value }: any) => {
         <ReactSpeedometer
           // needleTransition=''
           segmentColors={value?.style?.segmentColors}
-          maxValue={value?.main?.data?.maxValue || 500}
+          maxValue={speedoValue?.main?.data?.maxValue || 500}
           width={value?.style?.width || 500}
           needleHeightRatio={value?.style?.needleHeightRatio || 0.7}
           currentValueText={value?.main?.currentValueText}
@@ -32,9 +36,9 @@ const SpeedoMeter = ({ value }: any) => {
             value?.style?.needleTransitionDuration || 5333
           }
           needleTransition={value?.style?.needleTransition || "easeElastic"}
-          value={value?.main?.data?.value || 473}
+          value={speedoValue?.main?.data?.value || 473}
           needleColor={value?.style?.needleColor || "red"}
-          minValue={value?.main?.data?.minValue || 0}
+          minValue={speedoValue?.main?.data?.minValue || 0}
           startColor={value?.style?.startColor || "red"}
           segments={value?.main?.segments || 5}
           endColor={value?.style?.endColor || "green"}

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",
         }}