impaktapps-design 0.2.4 → 0.2.51

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",
@@ -12116,12 +12116,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 +12147,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 +12156,7 @@ const finalDataProvider = (type2, value) => {
         },
         style: {
           containerStyle: {
-            background: "white",
+            background: theme.palette.secondary.main,
             width: "100%",
             height: "310",
             borderRadius: "20px",
@@ -12177,7 +12177,7 @@ const finalDataProvider = (type2, value) => {
             ...(_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 +12186,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 +12230,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 +12240,7 @@ const finalDataProvider = (type2, value) => {
         },
         style: {
           containerStyle: {
-            background: "white",
+            background: theme.palette.secondary.main,
             width: "90%",
             height: "300",
             borderRadius: "20px",
@@ -12258,7 +12258,7 @@ const finalDataProvider = (type2, value) => {
             ...(_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 +12290,7 @@ const finalDataProvider = (type2, value) => {
         },
         style: {
           containerStyle: {
-            background: "white",
+            background: theme.palette.secondary.main,
             width: "90%",
             height: "300",
             borderRadius: "20px",
@@ -12314,11 +12314,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 +12332,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;
@@ -12460,10 +12461,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 +18350,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 +18495,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,7 +18526,8 @@ 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;
   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);
@@ -35851,13 +35856,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: "scroll"
+      background: theme.palette.secondary.main
     },
     children: [((_b2 = value == null ? void 0 : value.main) == null ? void 0 : _b2.header) && /* @__PURE__ */ jsx("div", {
       style: {
@@ -35875,7 +35881,7 @@ const SpeedoMeter = ({
         minWidth: 500,
         display: "flex",
         justifyContent: "center",
-        overflow: "scroll"
+        overflow: "auto"
       },
       children: /* @__PURE__ */ jsx(ReactSpeedometer, {
         forceRender: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impaktapps-design",
-  "version": "0.2.4",
+  "version": "0.2.51",
   "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) => (

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

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:"scroll" }}>
+    <div style={{ ...value?.style?.containerStyle,background:theme.palette.secondary.main }}>
       {value?.main?.header && (
         <div
           style={{
@@ -18,7 +18,7 @@ const SpeedoMeter = ({ value }: any) => {
           {value.main.header}
         </div>
       )}
-      <div style={{ width:"100%",minWidth:500,display: "flex", justifyContent: "center",overflow:"scroll"  }}>
+      <div style={{ width:"100%",minWidth:500,display: "flex", justifyContent: "center",overflow:"auto"  }}>
         <ReactSpeedometer
           forceRender={true}
           segmentColors={value?.style?.segmentColors}

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",
@@ -62,12 +62,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 +97,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 +107,7 @@ export const finalDataProvider = (type: string, value: any) => {
 
                 style: {
                     containerStyle: {
-                        background: "white",
+                        background:theme.palette.secondary.main,
                         width: "100%",
                         height: "310",
                         borderRadius: "20px",
@@ -129,7 +129,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 +138,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 +185,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 +195,7 @@ export const finalDataProvider = (type: string, value: any) => {
                 },
                 style: {
                     containerStyle: {
-                        background: "white",
+                        background:theme.palette.secondary.main,
                         width: "90%",
                         height: "300",
                         borderRadius: "20px",
@@ -213,7 +213,7 @@ export const finalDataProvider = (type: string, value: any) => {
                         ...value?.style?.headerStyle
                     },
                     labelStyle: {
-                        labelColor: "black",
+                        labelColor:theme.palette.text.primary,
                         bottomLabelOffset: 20,
                         leftLabelOffset: 50,
                         leftLabelMargin: 80,
@@ -249,7 +249,7 @@ export const finalDataProvider = (type: string, value: any) => {
                 },
                 style: {
                     containerStyle: {
-                        background: "white",
+                        background: theme.palette.secondary.main,
                         width: "90%",
                         height: "300",
                         borderRadius: "20px",
@@ -273,11 +273,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",