impaktapps-design 0.2.0 → 0.2.2

package/dist/impaktapps-design.es.js

@@ -35854,13 +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, _w;
-  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
+      ...(_a2 = value == null ? void 0 : value.style) == null ? void 0 : _a2.containerStyle,
+      overflow: "scroll"
     },
     children: [((_b2 = value == null ? void 0 : value.main) == null ? void 0 : _b2.header) && /* @__PURE__ */ jsx("div", {
       style: {
@@ -35875,25 +35872,27 @@ const SpeedoMeter = ({
     }), /* @__PURE__ */ jsx("div", {
       style: {
         width: "100%",
+        minWidth: 500,
         display: "flex",
-        justifyContent: "center"
+        justifyContent: "center",
+        overflow: "scroll"
       },
       children: /* @__PURE__ */ jsx(
         ReactSpeedometer,
         {
           segmentColors: (_d = value == null ? void 0 : value.style) == null ? void 0 : _d.segmentColors,
-          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,
+          maxValue: ((_f = (_e2 = value == null ? void 0 : value.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) || 450,
           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,
           customSegmentLabels: (_j = value == null ? void 0 : value.main) == null ? void 0 : _j.customSegmentLabel,
           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,
-          height: ((_m = value == null ? void 0 : value.style) == null ? void 0 : _m.height) || 300,
+          height: (_m = value == null ? void 0 : value.style) == null ? void 0 : _m.height,
           needleTransition: ((_n2 = value == null ? void 0 : value.style) == null ? void 0 : _n2.needleTransition) || "easeElastic",
-          value: ((_p = (_o = speedoValue == null ? void 0 : speedoValue.main) == null ? void 0 : _o.data) == null ? void 0 : _p.value) || 473,
+          value: ((_p = (_o = value == null ? void 0 : value.main) == null ? void 0 : _o.data) == null ? void 0 : _p.value) || 473,
           needleColor: ((_q = value == null ? void 0 : value.style) == null ? void 0 : _q.needleColor) || "red",
-          minValue: ((_s = (_r = speedoValue == null ? void 0 : speedoValue.main) == null ? void 0 : _r.data) == null ? void 0 : _s.minValue) || 0,
+          minValue: ((_s = (_r = value == null ? void 0 : value.main) == null ? void 0 : _r.data) == null ? void 0 : _s.minValue) || 0,
           startColor: ((_t2 = value == null ? void 0 : value.style) == null ? void 0 : _t2.startColor) || "red",
           segments: ((_u = value == null ? void 0 : value.main) == null ? void 0 : _u.segments) || 5,
           endColor: ((_v = value == null ? void 0 : value.style) == null ? void 0 : _v.endColor) || "green",

package/package.json

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

package/src/component/SpeedoMeter/SpeedoMeter.tsx

@@ -1,13 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React 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 }}>
+    <div style={{ ...value?.style?.containerStyle,overflow:"scroll" }}>
       {value?.main?.header && (
         <div
           style={{
@@ -22,12 +18,12 @@ useEffect(()=>{
           {value.main.header}
         </div>
       )}
-      <div style={{ width: "100%", display: "flex", justifyContent: "center" }}>
+      <div style={{ width:"100%",minWidth:500,display: "flex", justifyContent: "center",overflow:"scroll"  }}>
         <ReactSpeedometer
           // needleTransition=''
           segmentColors={value?.style?.segmentColors}
-          maxValue={speedoValue?.main?.data?.maxValue || 500}
-          width={value?.style?.width || 500}
+          maxValue={value?.main?.data?.maxValue || 500}
+          width={value?.style?.width || 450}
           needleHeightRatio={value?.style?.needleHeightRatio || 0.7}
           currentValueText={value?.main?.currentValueText}
           customSegmentLabels={value?.main?.customSegmentLabel}
@@ -35,11 +31,12 @@ useEffect(()=>{
           needleTransitionDuration={
             value?.style?.needleTransitionDuration || 5333
           }
-          height={value?.style?.height||300}
+          // fluidWidth={true}
+          height={value?.style?.height}
           needleTransition={value?.style?.needleTransition || "easeElastic"}
-          value={speedoValue?.main?.data?.value || 473}
+          value={value?.main?.data?.value || 473}
           needleColor={value?.style?.needleColor || "red"}
-          minValue={speedoValue?.main?.data?.minValue || 0}
+          minValue={value?.main?.data?.minValue || 0}
           startColor={value?.style?.startColor || "red"}
           segments={value?.main?.segments || 5}
           endColor={value?.style?.endColor || "green"}