@ttoss/react-dashboard 0.3.4 → 0.3.5
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.
- package/dist/esm/index.js +25 -11
- package/package.json +3 -3
package/dist/esm/index.js
CHANGED
|
@@ -11,7 +11,7 @@ import { Divider as Divider2, Flex as Flex7 } from "@ttoss/ui";
|
|
|
11
11
|
|
|
12
12
|
// src/DashboardGrid.tsx
|
|
13
13
|
import "react-grid-layout/css/styles.css";
|
|
14
|
-
import { Box as Box3, Flex as Flex4, Spinner } from "@ttoss/ui";
|
|
14
|
+
import { Box as Box3, Flex as Flex4, Global, Spinner } from "@ttoss/ui";
|
|
15
15
|
import { Responsive, WidthProvider } from "react-grid-layout";
|
|
16
16
|
|
|
17
17
|
// src/Cards/BigNumber.tsx
|
|
@@ -80,9 +80,12 @@ var CardWrapper = /* @__PURE__ */__name(({
|
|
|
80
80
|
title
|
|
81
81
|
}, title), description && /* @__PURE__ */React.createElement(TooltipIcon, {
|
|
82
82
|
variant: "info",
|
|
83
|
-
icon: "
|
|
83
|
+
icon: "info",
|
|
84
84
|
tooltip: {
|
|
85
|
-
children: description
|
|
85
|
+
children: description,
|
|
86
|
+
sx: {
|
|
87
|
+
maxWidth: "300px"
|
|
88
|
+
}
|
|
86
89
|
},
|
|
87
90
|
sx: {
|
|
88
91
|
fontSize: "sm",
|
|
@@ -197,7 +200,7 @@ var BigNumber = /* @__PURE__ */__name(props => {
|
|
|
197
200
|
color: getTrendColor(props.trend).color,
|
|
198
201
|
backgroundColor: getTrendColor(props.trend).backgroundColor,
|
|
199
202
|
padding: "1",
|
|
200
|
-
fontSize: "
|
|
203
|
+
fontSize: "xs",
|
|
201
204
|
fontWeight: "bold",
|
|
202
205
|
borderRadius: "sm",
|
|
203
206
|
display: "flex",
|
|
@@ -205,17 +208,17 @@ var BigNumber = /* @__PURE__ */__name(props => {
|
|
|
205
208
|
}
|
|
206
209
|
}, props.trend.status === "positive" ? /* @__PURE__ */React.createElement(Icon, {
|
|
207
210
|
icon: "mdi:arrow-up",
|
|
208
|
-
width:
|
|
211
|
+
width: 12
|
|
209
212
|
}) : props.trend.status === "negative" ? /* @__PURE__ */React.createElement(Icon, {
|
|
210
213
|
icon: "mdi:arrow-down",
|
|
211
|
-
width:
|
|
214
|
+
width: 12
|
|
212
215
|
}) : /* @__PURE__ */React.createElement(Icon, {
|
|
213
216
|
icon: "mdi:minus",
|
|
214
|
-
width:
|
|
217
|
+
width: 12
|
|
215
218
|
}), props.trend.value.toFixed(1), "%", " "), /* @__PURE__ */React.createElement(Text, {
|
|
216
219
|
sx: {
|
|
217
220
|
color: "input.background.muted.disabled",
|
|
218
|
-
fontSize: "
|
|
221
|
+
fontSize: "xs",
|
|
219
222
|
fontWeight: "medium"
|
|
220
223
|
}
|
|
221
224
|
}, props.trend ? "vs. anterior" : "")), props.additionalInfo && /* @__PURE__ */React.createElement(Text, {
|
|
@@ -333,7 +336,13 @@ var DashboardGrid = /* @__PURE__ */__name(({
|
|
|
333
336
|
width: "100%",
|
|
334
337
|
height: "full"
|
|
335
338
|
}
|
|
336
|
-
},
|
|
339
|
+
}, /* @__PURE__ */React.createElement(Global, {
|
|
340
|
+
styles: {
|
|
341
|
+
".react-grid-item:has([data-tooltip-id]:hover)": {
|
|
342
|
+
zIndex: 1
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
}), loading ? /* @__PURE__ */React.createElement(Flex4, {
|
|
337
346
|
sx: {
|
|
338
347
|
width: "100%",
|
|
339
348
|
height: "full",
|
|
@@ -345,7 +354,7 @@ var DashboardGrid = /* @__PURE__ */__name(({
|
|
|
345
354
|
layouts,
|
|
346
355
|
breakpoints,
|
|
347
356
|
cols,
|
|
348
|
-
rowHeight:
|
|
357
|
+
rowHeight: 32,
|
|
349
358
|
margin: [10, 10],
|
|
350
359
|
containerPadding: [0, 0]
|
|
351
360
|
}, selectedTemplate.grid.map(item => {
|
|
@@ -424,6 +433,7 @@ import { FormFieldDatePicker } from "@ttoss/forms";
|
|
|
424
433
|
import { FormProvider, useForm } from "@ttoss/forms";
|
|
425
434
|
import * as React3 from "react";
|
|
426
435
|
var DateRangeFilter = /* @__PURE__ */__name(({
|
|
436
|
+
sx,
|
|
427
437
|
label,
|
|
428
438
|
value,
|
|
429
439
|
presets,
|
|
@@ -464,7 +474,8 @@ var DateRangeFilter = /* @__PURE__ */__name(({
|
|
|
464
474
|
return /* @__PURE__ */React3.createElement(FormProvider, formMethods, /* @__PURE__ */React3.createElement(FormFieldDatePicker, {
|
|
465
475
|
name: "dateRange",
|
|
466
476
|
label,
|
|
467
|
-
presets
|
|
477
|
+
presets,
|
|
478
|
+
sx
|
|
468
479
|
}));
|
|
469
480
|
}, "DateRangeFilter");
|
|
470
481
|
|
|
@@ -603,6 +614,9 @@ var DashboardFilters = /* @__PURE__ */__name(() => {
|
|
|
603
614
|
});
|
|
604
615
|
case "date-range":
|
|
605
616
|
return /* @__PURE__ */React6.createElement(DateRangeFilter, {
|
|
617
|
+
sx: {
|
|
618
|
+
minWidth: "auto"
|
|
619
|
+
},
|
|
606
620
|
label: filter.label,
|
|
607
621
|
key: filter.key,
|
|
608
622
|
value: filter.value,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ttoss/react-dashboard",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.5",
|
|
4
4
|
"description": "ttoss dashboard module for React apps.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "ttoss",
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
"react-grid-layout": "^1.5.2",
|
|
29
29
|
"@ttoss/components": "^2.12.6",
|
|
30
30
|
"@ttoss/forms": "^0.40.1",
|
|
31
|
+
"@ttoss/react-icons": "^0.5.7",
|
|
31
32
|
"@ttoss/react-i18n": "^2.0.26",
|
|
32
|
-
"@ttoss/ui": "^6.5.1"
|
|
33
|
-
"@ttoss/react-icons": "^0.5.7"
|
|
33
|
+
"@ttoss/ui": "^6.5.1"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": ">=16.8.0"
|