impaktapps-design 0.2.51 → 0.2.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/impaktapps-design.es.js +25 -24
  2. package/package.json +1 -1
  3. package/src/component/BarGraph/BarGraph.tsx +1 -7
  4. package/src/component/ProgressBar/ProgressBar.tsx +11 -11
  5. package/src/component/ProgressBar/style.css +1 -33
  6. package/src/component/SpeedoMeter/SpeedoMeter.tsx +1 -1
  7. package/src/utils/finalDataProvider.ts +4 -0
package/dist/impaktapps-design.es.js CHANGED
@@ -12106,6 +12106,7 @@ const finalDataProvider = (type2, value, theme) => {
12106
12106
  padding: "15px 0 1px 20px",
12107
12107
  width: "100%",
12108
12108
  fontSize: "18px",
12109
+ color: theme.palette.text.primary,
12109
12110
  ...(_d = value == null ? void 0 : value.style) == null ? void 0 : _d.headerStyle
12110
12111
  },
12111
12112
  tooltipStyle: {
@@ -12171,6 +12172,7 @@ const finalDataProvider = (type2, value, theme) => {
12171
12172
  padding: "15px 0 1px 20px",
12172
12173
  width: "100%",
12173
12174
  fontSize: "18px",
12175
+ color: theme.palette.text.primary,
12174
12176
  ...(_k = value == null ? void 0 : value.style) == null ? void 0 : _k.headerStyle
12175
12177
  },
12176
12178
  tooltipStyle: {
@@ -12255,6 +12257,7 @@ const finalDataProvider = (type2, value, theme) => {
12255
12257
  padding: "15px 0 1px 20px",
12256
12258
  width: "100%",
12257
12259
  fontSize: "18px",
12260
+ color: theme.palette.text.primary,
12258
12261
  ...(_v = value == null ? void 0 : value.style) == null ? void 0 : _v.headerStyle
12259
12262
  },
12260
12263
  labelStyle: {
@@ -12305,6 +12308,7 @@ const finalDataProvider = (type2, value, theme) => {
12305
12308
  padding: "15px 0 1px 20px",
12306
12309
  width: "100%",
12307
12310
  fontSize: "18px",
12311
+ color: theme.palette.text.primary,
12308
12312
  ...(_C = value == null ? void 0 : value.style) == null ? void 0 : _C.headerStyle
12309
12313
  },
12310
12314
  tooltipStyle: {
@@ -12358,12 +12362,6 @@ const BarGraph = ({
12358
12362
  children: [((_c2 = barData == null ? void 0 : barData.main) == null ? void 0 : _c2.header) && /* @__PURE__ */ jsx("div", {
12359
12363
  style: {
12360
12364
  fontWeight: 500,
12361
- textAlign: "left",
12362
- fontFamily: "inherit",
12363
- marginBottom: "20px",
12364
- padding: "15px 0 1px 20px",
12365
- fontSize: "18px",
12366
- color: "#121926",
12367
12365
  ...(_d = barData == null ? void 0 : barData.style) == null ? void 0 : _d.headerStyle
12368
12366
  },
12369
12367
  children: (_e2 = barData == null ? void 0 : barData.main) == null ? void 0 : _e2.header
@@ -18529,7 +18527,7 @@ const ProgressBar = ({
18529
18527
  value,
18530
18528
  theme
18531
18529
  }) => {
18532
- 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;
18530
+ 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;
18533
18531
  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);
18534
18532
  useEffect(() => {
18535
18533
  var _a3, _b3, _c3, _d2;
@@ -18570,7 +18568,8 @@ const ProgressBar = ({
18570
18568
  return /* @__PURE__ */ jsxs("div", {
18571
18569
  className: "container",
18572
18570
  style: {
18573
- backgroundColor: "white",
18571
+ backgroundColor: (_h = theme == null ? void 0 : theme.palette) == null ? void 0 : _h.secondary.main,
18572
+ color: (_j = (_i = theme == null ? void 0 : theme.palette) == null ? void 0 : _i.text) == null ? void 0 : _j.primary,
18574
18573
  borderRadius: "20px",
18575
18574
  width: "auto",
18576
18575
  height: "auto",
@@ -18585,9 +18584,9 @@ const ProgressBar = ({
18585
18584
  textAlign: "left",
18586
18585
  fontFamily: "inherit",
18587
18586
  fontSize: "18px",
18588
- color: "#121926"
18587
+ color: ((_l = (_k = theme == null ? void 0 : theme.palette) == null ? void 0 : _k.text) == null ? void 0 : _l.primary) || "#121926"
18589
18588
  },
18590
- children: (_h = value == null ? void 0 : value.main) == null ? void 0 : _h.heading
18589
+ children: (_m = value == null ? void 0 : value.main) == null ? void 0 : _m.heading
18591
18590
  }), /* @__PURE__ */ jsxs("div", {
18592
18591
  style: {
18593
18592
  paddingBottom: "25px",
@@ -18607,7 +18606,8 @@ const ProgressBar = ({
18607
18606
  textAlign: "center",
18608
18607
  fontWeight: 700,
18609
18608
  marginBottom: "20px",
18610
- fontSize: "24px"
18609
+ fontSize: "24px",
18610
+ color: "inherit"
18611
18611
  },
18612
18612
  children: [progress.toFixed(2), "%"]
18613
18613
  }), /* @__PURE__ */ jsx("div", {
@@ -18633,6 +18633,7 @@ const ProgressBar = ({
18633
18633
  }), /* @__PURE__ */ jsxs("div", {
18634
18634
  style: {
18635
18635
  display: "flex",
18636
+ color: (_o = (_n2 = theme == null ? void 0 : theme.palette) == null ? void 0 : _n2.text) == null ? void 0 : _o.primary,
18636
18637
  paddingTop: "40px",
18637
18638
  width: "90%",
18638
18639
  margin: "auto"
@@ -18644,18 +18645,18 @@ const ProgressBar = ({
18644
18645
  children: [/* @__PURE__ */ jsx("div", {
18645
18646
  style: {
18646
18647
  textAlign: "left",
18647
- color: "#697586",
18648
18648
  fontSize: "10px",
18649
+ color: (_q = (_p = theme == null ? void 0 : theme.palette) == null ? void 0 : _p.text) == null ? void 0 : _q.inputLabel,
18649
18650
  marginBottom: "10px"
18650
18651
  },
18651
- children: ((_i = value == null ? void 0 : value.main) == null ? void 0 : _i.bottomLabel_1) || "Target"
18652
+ children: ((_r = value == null ? void 0 : value.main) == null ? void 0 : _r.bottomLabel_1) || "Target"
18652
18653
  }), /* @__PURE__ */ jsx("div", {
18653
18654
  style: {
18654
- color: "#121926",
18655
+ color: ((_t2 = (_s = theme == null ? void 0 : theme.palette) == null ? void 0 : _s.text) == null ? void 0 : _t2.primary) || "#121926",
18655
18656
  textAlign: "left",
18656
18657
  fontWeight: 500
18657
18658
  },
18658
- 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)
18659
+ 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)
18659
18660
  })]
18660
18661
  }), /* @__PURE__ */ jsxs("div", {
18661
18662
  style: {
@@ -18664,18 +18665,18 @@ const ProgressBar = ({
18664
18665
  children: [/* @__PURE__ */ jsx("div", {
18665
18666
  style: {
18666
18667
  textAlign: "center",
18667
- color: "#697586",
18668
+ color: ((_z = (_y = theme == null ? void 0 : theme.palette) == null ? void 0 : _y.text) == null ? void 0 : _z.inputLabel) || "#697586",
18668
18669
  fontSize: "10px",
18669
18670
  marginBottom: "10px"
18670
18671
  },
18671
- children: ((_n2 = value == null ? void 0 : value.main) == null ? void 0 : _n2.bottomLabel_2) || "Achieved"
18672
+ children: ((_A = value == null ? void 0 : value.main) == null ? void 0 : _A.bottomLabel_2) || "Achieved"
18672
18673
  }), /* @__PURE__ */ jsx("div", {
18673
18674
  style: {
18674
18675
  textAlign: "center",
18675
- color: "#121926",
18676
+ color: ((_C = (_B = theme == null ? void 0 : theme.palette) == null ? void 0 : _B.text) == null ? void 0 : _C.primary) || "#121926",
18676
18677
  fontWeight: 500
18677
18678
  },
18678
- 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)
18679
+ 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)
18679
18680
  })]
18680
18681
  }), /* @__PURE__ */ jsxs("div", {
18681
18682
  style: {
@@ -18684,18 +18685,18 @@ const ProgressBar = ({
18684
18685
  children: [/* @__PURE__ */ jsx("div", {
18685
18686
  style: {
18686
18687
  textAlign: "right",
18687
- color: "#697586",
18688
+ color: ((_I = (_H = theme == null ? void 0 : theme.palette) == null ? void 0 : _H.text) == null ? void 0 : _I.inputLabel) || "#697586",
18688
18689
  fontSize: "10px",
18689
18690
  marginBottom: "10px"
18690
18691
  },
18691
- children: ((_s = value == null ? void 0 : value.main) == null ? void 0 : _s.bottomLabel_3) || "Average"
18692
+ children: ((_J = value == null ? void 0 : value.main) == null ? void 0 : _J.bottomLabel_3) || "Average"
18692
18693
  }), /* @__PURE__ */ jsx("div", {
18693
18694
  style: {
18694
18695
  textAlign: "right",
18695
- color: "#121926",
18696
+ color: ((_L = (_K = theme == null ? void 0 : theme.palette) == null ? void 0 : _K.text) == null ? void 0 : _L.primary) || "#121926",
18696
18697
  fontWeight: 500
18697
18698
  },
18698
- 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
18699
+ 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
18699
18700
  })]
18700
18701
  })]
18701
18702
  })]
@@ -35871,7 +35872,7 @@ const SpeedoMeter = ({
35871
35872
  textAlign: "left",
35872
35873
  fontFamily: "inherit",
35873
35874
  fontSize: "18px",
35874
- color: "#121926",
35875
+ color: theme.palette.text.primary || "#121926",
35875
35876
  ...(_c2 = value == null ? void 0 : value.style) == null ? void 0 : _c2.headerStyle
35876
35877
  },
35877
35878
  children: value.main.header
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "impaktapps-design",
3
- "version": "0.2.51",
3
+ "version": "0.2.53",
4
4
  "dependencies": {
5
5
  "@babel/core": "^7.16.12",
6
6
  "@visx/visx": "^3.1.2",
package/src/component/BarGraph/BarGraph.tsx CHANGED
@@ -19,13 +19,7 @@ const BarGraph = ({ value,theme}:any) => {
19
19
  );
20
20
 
21
21
  return <div style={barData?.style?.containerStyle}>
22
- {barData?.main?.header && <div style={{ fontWeight: 500,
23
- textAlign: "left",
24
- fontFamily: "inherit",
25
- marginBottom:"20px",
26
- padding: "15px 0 1px 20px",
27
- fontSize: "18px",
28
- color: "#121926",...barData?.style?.headerStyle}}>{barData?.main?.header}</div> }
22
+ {barData?.main?.header && <div style={{ fontWeight: 500,...barData?.style?.headerStyle}}>{barData?.main?.header}</div> }
29
23
  {GraphRender}
30
24
  </div>;
31
25
  };
package/src/component/ProgressBar/ProgressBar.tsx CHANGED
@@ -15,7 +15,6 @@ const ProgressBar = ({value,theme} : any) => {
15
15
  return ["#e2b6b6","#ff0000"];
16
16
  }
17
17
  if (progress < 70) {
18
- // return "#ffa500";
19
18
  return ["#b6bce2","#3f51b5"];
20
19
  } else {
21
20
  return ["#b6e2c2","#2ecc71"];
@@ -37,11 +36,9 @@ const ProgressBar = ({value,theme} : any) => {
37
36
  style={{
38
37
  width: `${progress}%`,
39
38
  backgroundColor:value?.style?.progressBarFillColor|| getColor()[1],
40
- // backgroundColor: "#3f51b5",
41
39
  height: "100%",
42
40
  borderRadius: "10px",
43
41
  marginBottom: "20px",
44
- // backgroundColor: "#2ecc71",
45
42
  transition: "width 0.5 ease-out",
46
43
  }}
47
44
  ></div>
@@ -51,7 +48,8 @@ const ProgressBar = ({value,theme} : any) => {
51
48
  <div
52
49
  className="container"
53
50
  style={{
54
- backgroundColor: "white",
51
+ backgroundColor:theme?.palette?.secondary.main ,
52
+ color: theme?.palette?.text?.primary,
55
53
  borderRadius: "20px",
56
54
  width: "auto",
57
55
  height: "auto",
@@ -68,7 +66,7 @@ const ProgressBar = ({value,theme} : any) => {
68
66
  textAlign: "left",
69
67
  fontFamily: "inherit",
70
68
  fontSize: "18px",
71
- color: "#121926",
69
+ color: theme?.palette?.text?.primary||"#121926",
72
70
  }}
73
71
  >
74
72
  {value?.main?.heading}
@@ -92,6 +90,7 @@ const ProgressBar = ({value,theme} : any) => {
92
90
  fontWeight: 700,
93
91
  marginBottom: "20px",
94
92
  fontSize: "24px",
93
+ color:"inherit"
95
94
  }}
96
95
  >
97
96
  {progress.toFixed(2)}%
@@ -126,6 +125,7 @@ const ProgressBar = ({value,theme} : any) => {
126
125
  <div
127
126
  style={{
128
127
  display: "flex",
128
+ color: theme?.palette?.text?.primary,
129
129
  paddingTop: "40px",
130
130
  width: "90%",
131
131
  margin: "auto",
@@ -135,8 +135,8 @@ const ProgressBar = ({value,theme} : any) => {
135
135
  <div
136
136
  style={{
137
137
  textAlign:"left",
138
- color: "#697586",
139
138
  fontSize: "10px",
139
+ color: theme?.palette?.text?.inputLabel,
140
140
  marginBottom: "10px",
141
141
  }}
142
142
  >
@@ -144,7 +144,7 @@ const ProgressBar = ({value,theme} : any) => {
144
144
  </div>
145
145
  <div
146
146
  style={{
147
- color: "#121926",
147
+ color: theme?.palette?.text?.primary||"#121926",
148
148
  textAlign:"left",
149
149
  fontWeight: 500,
150
150
  }}
@@ -156,7 +156,7 @@ const ProgressBar = ({value,theme} : any) => {
156
156
  <div
157
157
  style={{
158
158
  textAlign:"center",
159
- color: "#697586",
159
+ color: theme?.palette?.text?.inputLabel||"#697586",
160
160
  fontSize: "10px",
161
161
  marginBottom: "10px",
162
162
  }}
@@ -166,7 +166,7 @@ const ProgressBar = ({value,theme} : any) => {
166
166
  <div
167
167
  style={{
168
168
  textAlign:"center",
169
- color: "#121926",
169
+ color: theme?.palette?.text?.primary|| "#121926",
170
170
  fontWeight: 500,
171
171
  }}
172
172
  >
@@ -177,7 +177,7 @@ const ProgressBar = ({value,theme} : any) => {
177
177
  <div
178
178
  style={{
179
179
  textAlign:"right",
180
- color: "#697586",
180
+ color: theme?.palette?.text?.inputLabel||"#697586",
181
181
  fontSize: "10px",
182
182
  marginBottom: "10px",
183
183
  }}
@@ -187,7 +187,7 @@ const ProgressBar = ({value,theme} : any) => {
187
187
  <div
188
188
  style={{
189
189
  textAlign:"right",
190
- color: "#121926",
190
+ color: theme?.palette?.text?.primary||"#121926",
191
191
  fontWeight: 500,
192
192
  }}
193
193
  >
package/src/component/ProgressBar/style.css CHANGED
@@ -5,36 +5,4 @@
5
5
  box-sizing: border-box;
6
6
  /* background-color: #eef6f8; */
7
7
  font-family: "Roboto", sans-serif;
8
- }
9
-
10
- /* body{
11
- display: flex;
12
- justify-content: center;
13
- align-items: center;
14
- }
15
-
16
- .container {
17
- width: 200px;
18
- margin-top: 100px;
19
- }
20
-
21
- .progress-bar{
22
- width: 100%;
23
- height: 30px;
24
- border-radius: 10px;
25
- background-color: #003441;
26
- margin-bottom: 10px;
27
- }
28
-
29
- .progress-bar-fill{
30
- height: 100%;
31
- border-radius: 10px;
32
- background-color: #2ecc71;
33
-
34
- }
35
- .progress-label{
36
- margin-top: 10px;
37
- font-size: 24px;
38
- font-weight: bold;
39
- color: #444444;
40
- } */
8
+ }
package/src/component/SpeedoMeter/SpeedoMeter.tsx CHANGED
@@ -11,7 +11,7 @@ const SpeedoMeter = ({ value,theme }: any) => {
11
11
  textAlign: "left",
12
12
  fontFamily: "inherit",
13
13
  fontSize: "18px",
14
- color: "#121926",
14
+ color:theme.palette.text.primary||"#121926",
15
15
  ...value?.style?.headerStyle,
16
16
  }}
17
17
  >
package/src/utils/finalDataProvider.ts CHANGED
@@ -53,6 +53,7 @@ export const finalDataProvider = (type: string, value: any,theme?:any) => {
53
53
  padding: "15px 0 1px 20px",
54
54
  width: "100%",
55
55
  fontSize: "18px",
56
+ color:theme.palette.text.primary,
56
57
  ...value?.style?.headerStyle
57
58
  },
58
59
  tooltipStyle: {
@@ -122,6 +123,7 @@ export const finalDataProvider = (type: string, value: any,theme?:any) => {
122
123
  padding: "15px 0 1px 20px",
123
124
  width: "100%",
124
125
  fontSize: "18px",
126
+ color:theme.palette.text.primary,
125
127
  ...value?.style?.headerStyle
126
128
  },
127
129
  tooltipStyle: {
@@ -210,6 +212,7 @@ export const finalDataProvider = (type: string, value: any,theme?:any) => {
210
212
  padding: "15px 0 1px 20px",
211
213
  width: "100%",
212
214
  fontSize: "18px",
215
+ color:theme.palette.text.primary,
213
216
  ...value?.style?.headerStyle
214
217
  },
215
218
  labelStyle: {
@@ -264,6 +267,7 @@ export const finalDataProvider = (type: string, value: any,theme?:any) => {
264
267
  padding: "15px 0 1px 20px",
265
268
  width: "100%",
266
269
  fontSize: "18px",
270
+ color:theme.palette.text.primary,
267
271
  ...value?.style?.headerStyle
268
272
  },
269
273
  tooltipStyle: {