impaktapps-design 0.2.5 → 0.2.52

package/dist/impaktapps-design.es.js

@@ -12061,7 +12061,7 @@ const Product1 = [
   { x: "f", y: 100 },
   { x: "g", y: 50 }
 ];
-const finalDataProvider = (type2, value) => {
+const finalDataProvider = (type2, value, theme) => {
   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":
@@ -12091,7 +12091,7 @@ const finalDataProvider = (type2, value) => {
         },
         style: {
           containerStyle: {
-            background: "white",
+            background: theme.palette.secondary.main,
             width: "90%",
             height: "300",
             borderRadius: "20px",
@@ -12106,6 +12106,7 @@ const finalDataProvider = (type2, value) => {
             padding: "15px 0 1px 20px",
             width: "100%",
             fontSize: "18px",
+            color: theme.palette.text.primary,
             ...(_d = value == null ? void 0 : value.style) == null ? void 0 : _d.headerStyle
           },
           tooltipStyle: {
@@ -12116,12 +12117,12 @@ const finalDataProvider = (type2, value) => {
           labelStyle: {
             leftLabelMargin: "75",
             topLabelMargin: "-6",
-            labelColor: "black",
+            labelColor: theme.palette.text.primary,
             leftLabelOffset: 50,
             bottomLabelOffset: 45,
-            tickLabelColor: "balck",
+            tickLabelColor: theme.palette.text.primary,
             tickFontSize: "10px",
-            tickColor: "black",
+            tickColor: theme.palette.text.primary,
             rightAxisWidth: "0.3px",
             fontSize: "10px",
             ...(_f = value == null ? void 0 : value.style) == null ? void 0 : _f.labelStyle
@@ -12147,7 +12148,7 @@ const finalDataProvider = (type2, value) => {
           legendAvailable: true,
           ...value == null ? void 0 : value.main,
           legend: {
-            labelColor: "green",
+            labelColor: theme.palette.text.primary,
             legendTitle: "Our Assests",
             direction: "row",
             align: "right",
@@ -12156,7 +12157,7 @@ const finalDataProvider = (type2, value) => {
         },
         style: {
           containerStyle: {
-            background: "white",
+            background: theme.palette.secondary.main,
             width: "100%",
             height: "310",
             borderRadius: "20px",
@@ -12171,13 +12172,14 @@ const finalDataProvider = (type2, value) => {
             padding: "15px 0 1px 20px",
             width: "100%",
             fontSize: "18px",
+            color: theme.palette.text.primary,
             ...(_k = value == null ? void 0 : value.style) == null ? void 0 : _k.headerStyle
           },
           tooltipStyle: {
             ...(_l = value == null ? void 0 : value.style) == null ? void 0 : _l.tooltipStyle
           },
           labelStyle: {
-            labelColor: "black",
+            labelColor: theme.palette.text.primary,
             labelOffset: 45,
             leftLabelMargin: "70",
             topLabelMargin: "-40",
@@ -12186,7 +12188,7 @@ const finalDataProvider = (type2, value) => {
           legendStyle: {
             legend: {
               lineHeight: "0.9em",
-              color: "black",
+              color: theme.palette.text.primary,
               fontSize: "10px",
               fontFamily: "arial",
               padding: "10px 10px",
@@ -12230,7 +12232,7 @@ const finalDataProvider = (type2, value) => {
           hideBottomAxisLine: false,
           ...value == null ? void 0 : value.main,
           legend: {
-            labelColor: "green",
+            labelColor: theme.palette.text.primary,
             legendTitle: "Our Assests",
             direction: "row",
             align: "right",
@@ -12240,7 +12242,7 @@ const finalDataProvider = (type2, value) => {
         },
         style: {
           containerStyle: {
-            background: "white",
+            background: theme.palette.secondary.main,
             width: "90%",
             height: "300",
             borderRadius: "20px",
@@ -12255,10 +12257,11 @@ const finalDataProvider = (type2, value) => {
             padding: "15px 0 1px 20px",
             width: "100%",
             fontSize: "18px",
+            color: theme.palette.text.primary,
             ...(_v = value == null ? void 0 : value.style) == null ? void 0 : _v.headerStyle
           },
           labelStyle: {
-            labelColor: "black",
+            labelColor: theme.palette.text.primary,
             bottomLabelOffset: 20,
             leftLabelOffset: 50,
             leftLabelMargin: 80,
@@ -12290,7 +12293,7 @@ const finalDataProvider = (type2, value) => {
         },
         style: {
           containerStyle: {
-            background: "white",
+            background: theme.palette.secondary.main,
             width: "90%",
             height: "300",
             borderRadius: "20px",
@@ -12305,6 +12308,7 @@ const finalDataProvider = (type2, value) => {
             padding: "15px 0 1px 20px",
             width: "100%",
             fontSize: "18px",
+            color: theme.palette.text.primary,
             ...(_C = value == null ? void 0 : value.style) == null ? void 0 : _C.headerStyle
           },
           tooltipStyle: {
@@ -12314,11 +12318,11 @@ const finalDataProvider = (type2, value) => {
           },
           labelStyle: {
             margin: { top: 10, left: 110, right: 40, bottom: 40 },
-            tickLabelColor: "#6c5efb",
+            tickLabelColor: theme.palette.text.primary,
             leftLabelOffset: 140,
             bottomLabelOffset: 14,
             tickFontSize: "10px",
-            tickColor: "#6c5efb",
+            tickColor: theme.palette.text.primary,
             rightAxisWidth: "0.3px",
             fontSize: "10px",
             ...(_E = value == null ? void 0 : value.style) == null ? void 0 : _E.labelStyle
@@ -12332,10 +12336,11 @@ const finalDataProvider = (type2, value) => {
   }
 };
 const BarGraph = ({
-  value
+  value,
+  theme
 }) => {
   var _a2, _b2, _c2, _d, _e2;
-  const barData = finalDataProvider((_a2 = value == null ? void 0 : value.main) == null ? void 0 : _a2.type, value);
+  const barData = finalDataProvider((_a2 = value == null ? void 0 : value.main) == null ? void 0 : _a2.type, value, theme);
   let GraphRender = /* @__PURE__ */ jsx(ParentSize$1, {
     children: (parent) => {
       var _a3, _b3, _c3, _d2, _e3, _f, _g, _h, _i, _j, _k, _l, _m, _n2;
@@ -12357,12 +12362,6 @@ const BarGraph = ({
     children: [((_c2 = barData == null ? void 0 : barData.main) == null ? void 0 : _c2.header) && /* @__PURE__ */ jsx("div", {
       style: {
         fontWeight: 500,
-        textAlign: "left",
-        fontFamily: "inherit",
-        marginBottom: "20px",
-        padding: "15px 0 1px 20px",
-        fontSize: "18px",
-        color: "#121926",
         ...(_d = barData == null ? void 0 : barData.style) == null ? void 0 : _d.headerStyle
       },
       children: (_e2 = barData == null ? void 0 : barData.main) == null ? void 0 : _e2.header
@@ -12460,10 +12459,11 @@ const DrawPieGraph = ({
   });
 };
 const PieGraph = ({
-  value
+  value,
+  theme
 }) => {
   var _a2, _b2;
-  const pieData = finalDataProvider("PieGraph", value);
+  const pieData = finalDataProvider("PieGraph", value, theme);
   let PieRender = /* @__PURE__ */ jsx(ParentSize$1, {
     children: (parent) => /* @__PURE__ */ jsx(DrawPieGraph, {
       parentWidth: parent.width,
@@ -18348,10 +18348,11 @@ const DrawGraph = ({
   });
 };
 const LineGraph = ({
-  value
+  value,
+  theme
 }) => {
   var _a2, _b2, _c2, _d;
-  const lineData = finalDataProvider("LineGraph", value);
+  const lineData = finalDataProvider("LineGraph", value, theme);
   return /* @__PURE__ */ jsxs("div", {
     style: (_a2 = lineData == null ? void 0 : lineData.style) == null ? void 0 : _a2.containerStyle,
     children: [((_b2 = lineData == null ? void 0 : lineData.main) == null ? void 0 : _b2.header) && /* @__PURE__ */ jsx("div", {
@@ -18492,10 +18493,11 @@ var DrawHorizontalBarGraph = withTooltip(({
   });
 });
 const HorizontalBarGraph = ({
-  value
+  value,
+  theme
 }) => {
   var _a2, _b2;
-  const barData = finalDataProvider("HorizontalBarGraph", value);
+  const barData = finalDataProvider("HorizontalBarGraph", value, theme);
   let GraphRender = /* @__PURE__ */ jsx(ParentSize$1, {
     children: (parent) => {
       var _a3, _b3, _c2, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n2;
@@ -18522,9 +18524,10 @@ const HorizontalBarGraph = ({
 };
 var style = "";
 const ProgressBar = ({
-  value
+  value,
+  theme
 }) => {
-  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;
+  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, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S;
   const [progress, setProgress] = useState(((_b2 = (_a2 = value == null ? void 0 : value.main) == null ? void 0 : _a2.data) == null ? void 0 : _b2.achieved) / ((_d = (_c2 = value == null ? void 0 : value.main) == null ? void 0 : _c2.data) == null ? void 0 : _d.total) * 100);
   useEffect(() => {
     var _a3, _b3, _c3, _d2;
@@ -18565,7 +18568,8 @@ const ProgressBar = ({
   return /* @__PURE__ */ jsxs("div", {
     className: "container",
     style: {
-      backgroundColor: "white",
+      backgroundColor: (_h = theme == null ? void 0 : theme.palette) == null ? void 0 : _h.secondary.main,
+      color: (_j = (_i = theme == null ? void 0 : theme.palette) == null ? void 0 : _i.text) == null ? void 0 : _j.primary,
       borderRadius: "20px",
       width: "auto",
       height: "auto",
@@ -18580,9 +18584,9 @@ const ProgressBar = ({
         textAlign: "left",
         fontFamily: "inherit",
         fontSize: "18px",
-        color: "#121926"
+        color: ((_l = (_k = theme == null ? void 0 : theme.palette) == null ? void 0 : _k.text) == null ? void 0 : _l.primary) || "#121926"
       },
-      children: (_h = value == null ? void 0 : value.main) == null ? void 0 : _h.heading
+      children: (_m = value == null ? void 0 : value.main) == null ? void 0 : _m.heading
     }), /* @__PURE__ */ jsxs("div", {
       style: {
         paddingBottom: "25px",
@@ -18602,7 +18606,8 @@ const ProgressBar = ({
             textAlign: "center",
             fontWeight: 700,
             marginBottom: "20px",
-            fontSize: "24px"
+            fontSize: "24px",
+            color: "inherit"
           },
           children: [progress.toFixed(2), "%"]
         }), /* @__PURE__ */ jsx("div", {
@@ -18628,6 +18633,7 @@ const ProgressBar = ({
       }), /* @__PURE__ */ jsxs("div", {
         style: {
           display: "flex",
+          color: (_o = (_n2 = theme == null ? void 0 : theme.palette) == null ? void 0 : _n2.text) == null ? void 0 : _o.primary,
           paddingTop: "40px",
           width: "90%",
           margin: "auto"
@@ -18639,18 +18645,18 @@ const ProgressBar = ({
           children: [/* @__PURE__ */ jsx("div", {
             style: {
               textAlign: "left",
-              color: "#697586",
               fontSize: "10px",
+              color: (_q = (_p = theme == null ? void 0 : theme.palette) == null ? void 0 : _p.text) == null ? void 0 : _q.inputLabel,
               marginBottom: "10px"
             },
-            children: ((_i = value == null ? void 0 : value.main) == null ? void 0 : _i.bottomLabel_1) || "Target"
+            children: ((_r = value == null ? void 0 : value.main) == null ? void 0 : _r.bottomLabel_1) || "Target"
           }), /* @__PURE__ */ jsx("div", {
             style: {
-              color: "#121926",
+              color: ((_t2 = (_s = theme == null ? void 0 : theme.palette) == null ? void 0 : _s.text) == null ? void 0 : _t2.primary) || "#121926",
               textAlign: "left",
               fontWeight: 500
             },
-            children: ((_k = (_j = value == null ? void 0 : value.main) == null ? void 0 : _j.data) == null ? void 0 : _k.total) || ((_m = (_l = value == null ? void 0 : value.main) == null ? void 0 : _l.data) == null ? void 0 : _m.bottomLabel_1_value)
+            children: ((_v = (_u = value == null ? void 0 : value.main) == null ? void 0 : _u.data) == null ? void 0 : _v.total) || ((_x = (_w = value == null ? void 0 : value.main) == null ? void 0 : _w.data) == null ? void 0 : _x.bottomLabel_1_value)
           })]
         }), /* @__PURE__ */ jsxs("div", {
           style: {
@@ -18659,18 +18665,18 @@ const ProgressBar = ({
           children: [/* @__PURE__ */ jsx("div", {
             style: {
               textAlign: "center",
-              color: "#697586",
+              color: ((_z = (_y = theme == null ? void 0 : theme.palette) == null ? void 0 : _y.text) == null ? void 0 : _z.inputLabel) || "#697586",
               fontSize: "10px",
               marginBottom: "10px"
             },
-            children: ((_n2 = value == null ? void 0 : value.main) == null ? void 0 : _n2.bottomLabel_2) || "Achieved"
+            children: ((_A = value == null ? void 0 : value.main) == null ? void 0 : _A.bottomLabel_2) || "Achieved"
           }), /* @__PURE__ */ jsx("div", {
             style: {
               textAlign: "center",
-              color: "#121926",
+              color: ((_C = (_B = theme == null ? void 0 : theme.palette) == null ? void 0 : _B.text) == null ? void 0 : _C.primary) || "#121926",
               fontWeight: 500
             },
-            children: ((_p = (_o = value == null ? void 0 : value.main) == null ? void 0 : _o.data) == null ? void 0 : _p.achieved) || ((_r = (_q = value == null ? void 0 : value.main) == null ? void 0 : _q.data) == null ? void 0 : _r.bottomLabel_2_value)
+            children: ((_E = (_D = value == null ? void 0 : value.main) == null ? void 0 : _D.data) == null ? void 0 : _E.achieved) || ((_G = (_F = value == null ? void 0 : value.main) == null ? void 0 : _F.data) == null ? void 0 : _G.bottomLabel_2_value)
           })]
         }), /* @__PURE__ */ jsxs("div", {
           style: {
@@ -18679,18 +18685,18 @@ const ProgressBar = ({
           children: [/* @__PURE__ */ jsx("div", {
             style: {
               textAlign: "right",
-              color: "#697586",
+              color: ((_I = (_H = theme == null ? void 0 : theme.palette) == null ? void 0 : _H.text) == null ? void 0 : _I.inputLabel) || "#697586",
               fontSize: "10px",
               marginBottom: "10px"
             },
-            children: ((_s = value == null ? void 0 : value.main) == null ? void 0 : _s.bottomLabel_3) || "Average"
+            children: ((_J = value == null ? void 0 : value.main) == null ? void 0 : _J.bottomLabel_3) || "Average"
           }), /* @__PURE__ */ jsx("div", {
             style: {
               textAlign: "right",
-              color: "#121926",
+              color: ((_L = (_K = theme == null ? void 0 : theme.palette) == null ? void 0 : _K.text) == null ? void 0 : _L.primary) || "#121926",
               fontWeight: 500
             },
-            children: ((_t2 = value == null ? void 0 : value.main) == null ? void 0 : _t2.daysCount) ? Math.round(((_v = (_u = value == null ? void 0 : value.main) == null ? void 0 : _u.data) == null ? void 0 : _v.achieved) / ((_w = value == null ? void 0 : value.main) == null ? void 0 : _w.daysCount)) + ((_x = value == null ? void 0 : value.main) == null ? void 0 : _x.bottomLabel_3_averageLabel) || "/day" : (_z = (_y = value == null ? void 0 : value.main) == null ? void 0 : _y.data) == null ? void 0 : _z.bottomLabel_3_value
+            children: ((_M = value == null ? void 0 : value.main) == null ? void 0 : _M.daysCount) ? Math.round(((_O = (_N = value == null ? void 0 : value.main) == null ? void 0 : _N.data) == null ? void 0 : _O.achieved) / ((_P = value == null ? void 0 : value.main) == null ? void 0 : _P.daysCount)) + ((_Q = value == null ? void 0 : value.main) == null ? void 0 : _Q.bottomLabel_3_averageLabel) || "/day" : (_S = (_R = value == null ? void 0 : value.main) == null ? void 0 : _R.data) == null ? void 0 : _S.bottomLabel_3_value
           })]
         })]
       })]
@@ -35851,13 +35857,14 @@ var require$$1 = /* @__PURE__ */ getAugmentedNamespace(memoizeOne_esm);
 })(dist$1);
 var ReactSpeedometer = /* @__PURE__ */ getDefaultExportFromCjs(dist$1);
 const SpeedoMeter = ({
-  value
+  value,
+  theme
 }) => {
   var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n2, _o, _p, _q, _r, _s, _t2, _u, _v, _w;
   return /* @__PURE__ */ jsxs("div", {
     style: {
       ...(_a2 = value == null ? void 0 : value.style) == null ? void 0 : _a2.containerStyle,
-      overflow: "auto"
+      background: theme.palette.secondary.main
     },
     children: [((_b2 = value == null ? void 0 : value.main) == null ? void 0 : _b2.header) && /* @__PURE__ */ jsx("div", {
       style: {
@@ -35865,7 +35872,7 @@ const SpeedoMeter = ({
         textAlign: "left",
         fontFamily: "inherit",
         fontSize: "18px",
-        color: "#121926",
+        color: theme.palette.text.primary || "#121926",
         ...(_c2 = value == null ? void 0 : value.style) == null ? void 0 : _c2.headerStyle
       },
       children: value.main.header

package/package.json

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

package/src/component/BarGraph/BarGraph.tsx

@@ -3,8 +3,8 @@ import DrawBarGraph from "./DrawBarGraph";
 import { ParentSize } from "@visx/responsive";
 import { finalDataProvider } from "../../utils/finalDataProvider";
 
-const BarGraph = ({ value }:any) => {
-  const barData:any = finalDataProvider(value?.main?.type,value)
+const BarGraph = ({ value,theme}:any) => {
+  const barData:any = finalDataProvider(value?.main?.type,value,theme)
   let GraphRender = (
     <ParentSize>
       {(parent) => (
@@ -19,13 +19,7 @@ const BarGraph = ({ value }:any) => {
   );
 
   return <div style={barData?.style?.containerStyle}>
-    {barData?.main?.header && <div style={{ fontWeight: 500,
-      textAlign: "left",
-      fontFamily: "inherit",
-      marginBottom:"20px",
-      padding: "15px 0 1px 20px",
-      fontSize: "18px",
-      color: "#121926",...barData?.style?.headerStyle}}>{barData?.main?.header}</div> }
+    {barData?.main?.header && <div style={{ fontWeight: 500,...barData?.style?.headerStyle}}>{barData?.main?.header}</div> }
     {GraphRender}
   </div>;
 };

package/src/component/BarGraph/HorizontalBarGraph.tsx

@@ -3,8 +3,8 @@ import { finalDataProvider } from "../../utils/finalDataProvider";
 import DrawHorizontalBarGraph from "./DrawHorizontalBarGraph";
 import { ParentSize } from "@visx/responsive";
 
-const HorizontalBarGraph = ({ value }:any) => {
-  const barData:any = finalDataProvider("HorizontalBarGraph",value)
+const HorizontalBarGraph = ({ value,theme }:any) => {
+  const barData:any = finalDataProvider("HorizontalBarGraph",value,theme)
 
   let GraphRender = (
     <ParentSize>

package/src/component/LineGraph/LineGraph.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import DrawLineGraph from "./DrawLineGraph";
 import { finalDataProvider } from "../../utils/finalDataProvider";
 
-const LineGraph = ({ value }:any) => {
-  const lineData = finalDataProvider("LineGraph", value);
+const LineGraph = ({ value,theme }:any) => {
+  const lineData = finalDataProvider("LineGraph", value,theme);
   return (
     <div style={lineData?.style?.containerStyle}>
       {lineData?.main?.header && (

package/src/component/PieGraph/PieGraph.tsx

@@ -3,8 +3,8 @@ import DrawPieGraph from "./DrawPieGraph";
 import { ParentSize } from "@visx/responsive";
 import { finalDataProvider } from "../../utils/finalDataProvider";
 
-const PieGraph = ({ value }: any) => {
-  const pieData: any = finalDataProvider("PieGraph", value);
+const PieGraph = ({ value,theme }: any) => {
+  const pieData: any = finalDataProvider("PieGraph", value,theme);
   let PieRender = (
     <ParentSize>
       {(parent) => (

package/src/component/ProgressBar/ProgressBar.tsx

@@ -1,7 +1,7 @@
 import React, { useState , useEffect } from "react";
 import "./style.css";
 
-const ProgressBar = ({value} : any) => {
+const ProgressBar = ({value,theme} : any) => {
   const [progress, setProgress] = useState(
       (value?.main?.data?.achieved / value?.main?.data?.total) *
         100
@@ -15,7 +15,6 @@ const ProgressBar = ({value} : any) => {
       return ["#e2b6b6","#ff0000"];
     }
     if (progress < 70) {
-    //   return "#ffa500";  
     return ["#b6bce2","#3f51b5"]; 
     } else {
       return ["#b6e2c2","#2ecc71"];
@@ -37,11 +36,9 @@ const ProgressBar = ({value} : any) => {
       style={{
         width: `${progress}%`,
         backgroundColor:value?.style?.progressBarFillColor|| getColor()[1],
-        // backgroundColor: "#3f51b5",
         height: "100%",
         borderRadius: "10px",
         marginBottom: "20px",
-        // backgroundColor: "#2ecc71",
         transition: "width 0.5 ease-out",
       }}
     ></div>
@@ -51,7 +48,8 @@ const ProgressBar = ({value} : any) => {
     <div
       className="container"
       style={{
-        backgroundColor: "white",
+        backgroundColor:theme?.palette?.secondary.main ,
+        color: theme?.palette?.text?.primary,
         borderRadius: "20px",
         width: "auto",
         height: "auto",
@@ -68,7 +66,7 @@ const ProgressBar = ({value} : any) => {
           textAlign: "left",
           fontFamily: "inherit",
           fontSize: "18px",
-          color: "#121926",
+          color: theme?.palette?.text?.primary||"#121926",
         }}
       >
         {value?.main?.heading}
@@ -92,6 +90,7 @@ const ProgressBar = ({value} : any) => {
               fontWeight: 700,
               marginBottom: "20px",
               fontSize: "24px",
+              color:"inherit"
             }}
           >
             {progress.toFixed(2)}%
@@ -126,6 +125,7 @@ const ProgressBar = ({value} : any) => {
         <div
           style={{
             display: "flex",
+            color: theme?.palette?.text?.primary,
             paddingTop: "40px",
             width: "90%",
             margin: "auto",
@@ -135,8 +135,8 @@ const ProgressBar = ({value} : any) => {
             <div
               style={{
                 textAlign:"left",
-                color: "#697586",
                 fontSize: "10px",
+                color: theme?.palette?.text?.inputLabel,
                 marginBottom: "10px",
               }}
             >
@@ -144,7 +144,7 @@ const ProgressBar = ({value} : any) => {
             </div>
             <div
               style={{
-                color: "#121926",
+                color: theme?.palette?.text?.primary||"#121926",
                 textAlign:"left",
                 fontWeight: 500,
               }}
@@ -156,7 +156,7 @@ const ProgressBar = ({value} : any) => {
             <div
               style={{
                 textAlign:"center",
-                color: "#697586",
+                color: theme?.palette?.text?.inputLabel||"#697586",
                 fontSize: "10px",
                 marginBottom: "10px",
               }}
@@ -166,7 +166,7 @@ const ProgressBar = ({value} : any) => {
             <div
               style={{
                 textAlign:"center",
-                color: "#121926",
+                color: theme?.palette?.text?.primary|| "#121926",
                 fontWeight: 500,
               }}
             >
@@ -177,7 +177,7 @@ const ProgressBar = ({value} : any) => {
             <div
               style={{
                 textAlign:"right",
-                color: "#697586",
+                color: theme?.palette?.text?.inputLabel||"#697586",
                 fontSize: "10px",
                 marginBottom: "10px",
               }}
@@ -187,7 +187,7 @@ const ProgressBar = ({value} : any) => {
             <div
               style={{
                 textAlign:"right",
-                color: "#121926",
+                color: theme?.palette?.text?.primary||"#121926",
                 fontWeight: 500,
               }}
             >

package/src/component/ProgressBar/style.css

@@ -5,36 +5,4 @@
     box-sizing: border-box;
     /* background-color: #eef6f8; */
     font-family: "Roboto", sans-serif;
-} 
-
-/* body{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.container {
-    width: 200px;
-    margin-top: 100px;
-}
-
-.progress-bar{
-    width: 100%;
-    height: 30px;
-    border-radius: 10px;
-    background-color: #003441;
-    margin-bottom: 10px;
-}
-
-.progress-bar-fill{
-    height: 100%;
-    border-radius: 10px;
-    background-color: #2ecc71;
-
-}
-.progress-label{
-    margin-top: 10px;
-    font-size: 24px;
-    font-weight: bold;
-    color: #444444;
-} */
+} 

package/src/component/SpeedoMeter/SpeedoMeter.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import ReactSpeedometer from "react-d3-speedometer";
 
-const SpeedoMeter = ({ value }: any) => {
+const SpeedoMeter = ({ value,theme }: any) => {
   return (
-    <div style={{ ...value?.style?.containerStyle,overflow:"auto" }}>
+    <div style={{ ...value?.style?.containerStyle,background:theme.palette.secondary.main }}>
       {value?.main?.header && (
         <div
           style={{
@@ -11,7 +11,7 @@ const SpeedoMeter = ({ value }: any) => {
             textAlign: "left",
             fontFamily: "inherit",
             fontSize: "18px",
-            color: "#121926",
+            color:theme.palette.text.primary||"#121926",
             ...value?.style?.headerStyle,
           }}
         >

package/src/utils/finalDataProvider.ts

@@ -6,7 +6,7 @@ const Product1 = [
     { x: "f", y: 100 },
     { x: "g", y: 50 },
 ];
-export const finalDataProvider = (type: string, value: any) => {
+export const finalDataProvider = (type: string, value: any,theme?:any) => {
     switch (type) {
         case "BarGraph":
             case "StackBarGraph":    
@@ -38,7 +38,7 @@ export const finalDataProvider = (type: string, value: any) => {
                 },
                 style: {
                     containerStyle: {
-                        background: "white",
+                        background: theme.palette.secondary.main,
                         width: "90%",
                         height: "300",
                         borderRadius: "20px",
@@ -53,6 +53,7 @@ export const finalDataProvider = (type: string, value: any) => {
                         padding: "15px 0 1px 20px",
                         width: "100%",
                         fontSize: "18px",
+                        color:theme.palette.text.primary,
                         ...value?.style?.headerStyle
                     },
                     tooltipStyle: {
@@ -62,12 +63,12 @@ export const finalDataProvider = (type: string, value: any) => {
                     labelStyle: {
                         leftLabelMargin: "75",
                         topLabelMargin: "-6",
-                        labelColor: "black",
+                        labelColor: theme.palette.text.primary,
                         leftLabelOffset: 50,
                         bottomLabelOffset: 45,
-                        tickLabelColor: "balck",
+                        tickLabelColor:theme.palette.text.primary,
                         tickFontSize: "10px",
-                        tickColor: "black",
+                        tickColor:theme.palette.text.primary,
                         rightAxisWidth: "0.3px",
                         fontSize: "10px",
                         
@@ -97,7 +98,7 @@ export const finalDataProvider = (type: string, value: any) => {
                     legendAvailable: true,
                     ...value?.main,
                     legend: {
-                        labelColor: "green",
+                        labelColor:theme.palette.text.primary,
                         legendTitle: "Our Assests",
                         direction: "row",
                         align: "right",
@@ -107,7 +108,7 @@ export const finalDataProvider = (type: string, value: any) => {
 
                 style: {
                     containerStyle: {
-                        background: "white",
+                        background:theme.palette.secondary.main,
                         width: "100%",
                         height: "310",
                         borderRadius: "20px",
@@ -122,6 +123,7 @@ export const finalDataProvider = (type: string, value: any) => {
                         padding: "15px 0 1px 20px",
                         width: "100%",
                         fontSize: "18px",
+                        color:theme.palette.text.primary,
                         ...value?.style?.headerStyle
                     },
                     tooltipStyle: {
@@ -129,7 +131,7 @@ export const finalDataProvider = (type: string, value: any) => {
                         ...value?.style?.tooltipStyle,
                     },
                     labelStyle: {
-                        labelColor: "black",
+                        labelColor:theme.palette.text.primary,
                         labelOffset: 45,
                         leftLabelMargin: "70",
                         topLabelMargin: "-40",
@@ -138,7 +140,7 @@ export const finalDataProvider = (type: string, value: any) => {
                     legendStyle: {
                         legend: {
                             lineHeight: "0.9em",
-                            color: "black",
+                            color: theme.palette.text.primary,
                             fontSize: "10px",
 
                             fontFamily: "arial",
@@ -185,7 +187,7 @@ export const finalDataProvider = (type: string, value: any) => {
                     hideBottomAxisLine: false,
                     ...value?.main,
                     legend: {
-                        labelColor: "green",
+                        labelColor:theme.palette.text.primary,
                         legendTitle: "Our Assests",
                         direction: "row",
                         align: "right",
@@ -195,7 +197,7 @@ export const finalDataProvider = (type: string, value: any) => {
                 },
                 style: {
                     containerStyle: {
-                        background: "white",
+                        background:theme.palette.secondary.main,
                         width: "90%",
                         height: "300",
                         borderRadius: "20px",
@@ -210,10 +212,11 @@ export const finalDataProvider = (type: string, value: any) => {
                         padding: "15px 0 1px 20px",
                         width: "100%",
                         fontSize: "18px",
+                        color:theme.palette.text.primary,
                         ...value?.style?.headerStyle
                     },
                     labelStyle: {
-                        labelColor: "black",
+                        labelColor:theme.palette.text.primary,
                         bottomLabelOffset: 20,
                         leftLabelOffset: 50,
                         leftLabelMargin: 80,
@@ -249,7 +252,7 @@ export const finalDataProvider = (type: string, value: any) => {
                 },
                 style: {
                     containerStyle: {
-                        background: "white",
+                        background: theme.palette.secondary.main,
                         width: "90%",
                         height: "300",
                         borderRadius: "20px",
@@ -264,6 +267,7 @@ export const finalDataProvider = (type: string, value: any) => {
                         padding: "15px 0 1px 20px",
                         width: "100%",
                         fontSize: "18px",
+                        color:theme.palette.text.primary,
                         ...value?.style?.headerStyle
                     },
                     tooltipStyle: {
@@ -273,11 +277,11 @@ export const finalDataProvider = (type: string, value: any) => {
                     },
                     labelStyle: {
                         margin: { top: 10, left: 110, right: 40, bottom: 40 },
-                        tickLabelColor: "#6c5efb",
+                        tickLabelColor: theme.palette.text.primary,
                         leftLabelOffset: 140,
                         bottomLabelOffset: 14,
                         tickFontSize: "10px",
-                        tickColor: "#6c5efb",
+                        tickColor:theme.palette.text.primary,
                         rightAxisWidth: "0.3px",
                         fontSize: "10px",