@visns-studio/visns-components 5.13.22 → 5.14.0
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/package.json
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"@nivo/pie": "^0.99.0",
|
|
14
14
|
"@tinymce/miniature": "^6.0.0",
|
|
15
15
|
"@tinymce/tinymce-react": "^6.2.1",
|
|
16
|
-
"@uiw/react-color": "^2.
|
|
16
|
+
"@uiw/react-color": "^2.7.1",
|
|
17
17
|
"@visns-studio/visns-datagrid-community": "1.1.0",
|
|
18
18
|
"@visns-studio/visns-datagrid-enterprise": "1.1.0",
|
|
19
19
|
"@vitejs/plugin-react": "^4.6.0",
|
|
@@ -24,13 +24,13 @@
|
|
|
24
24
|
"dayjs": "^1.11.13",
|
|
25
25
|
"fabric": "^6.7.0",
|
|
26
26
|
"file-saver": "^2.0.5",
|
|
27
|
-
"framer-motion": "^12.23.
|
|
27
|
+
"framer-motion": "^12.23.5",
|
|
28
28
|
"html-react-parser": "^5.2.5",
|
|
29
29
|
"lodash": "^4.17.21",
|
|
30
30
|
"lodash.debounce": "^4.0.8",
|
|
31
31
|
"lucide-react": "^0.525.0",
|
|
32
32
|
"moment": "^2.30.1",
|
|
33
|
-
"motion": "^12.23.
|
|
33
|
+
"motion": "^12.23.5",
|
|
34
34
|
"numeral": "^2.0.6",
|
|
35
35
|
"pluralize": "^8.0.0",
|
|
36
36
|
"qrcode.react": "^4.2.0",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"react-quill": "^2.0.0",
|
|
48
48
|
"react-reveal": "^1.2.2",
|
|
49
49
|
"react-router-dom": "^6.30.1",
|
|
50
|
-
"react-select": "^5.10.
|
|
50
|
+
"react-select": "^5.10.2",
|
|
51
51
|
"react-signature-pad-wrapper": "^4.1.1",
|
|
52
52
|
"react-slugify": "^4.0.1",
|
|
53
53
|
"react-sortable-hoc": "^2.0.0",
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
89
89
|
},
|
|
90
90
|
"name": "@visns-studio/visns-components",
|
|
91
|
-
"version": "5.
|
|
91
|
+
"version": "5.14.0",
|
|
92
92
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
93
93
|
"main": "src/index.js",
|
|
94
94
|
"files": [
|
|
@@ -905,24 +905,69 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
|
|
|
905
905
|
}, {});
|
|
906
906
|
widget.props.legendLabel = (e) =>
|
|
907
907
|
legendMapping[e.id] || e.id;
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
908
|
+
}
|
|
909
|
+
|
|
910
|
+
// Always add a tooltip for bar charts to enable hover functionality
|
|
911
|
+
const CustomTooltip = ({ id, value, color, indexValue }) => {
|
|
912
|
+
const label = legendMapping[id] || id;
|
|
913
|
+
return (
|
|
914
|
+
<div
|
|
915
|
+
style={{
|
|
916
|
+
background: 'rgba(255, 255, 255, 0.98)',
|
|
917
|
+
backdropFilter: 'blur(8px)',
|
|
918
|
+
border: 'none',
|
|
919
|
+
borderRadius: '8px',
|
|
920
|
+
padding: '12px 16px',
|
|
921
|
+
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.12)',
|
|
922
|
+
fontSize: '13px',
|
|
923
|
+
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
924
|
+
minWidth: '200px',
|
|
925
|
+
maxWidth: '320px',
|
|
926
|
+
whiteSpace: 'nowrap'
|
|
927
|
+
}}
|
|
928
|
+
>
|
|
929
|
+
<div
|
|
930
|
+
style={{
|
|
931
|
+
fontSize: '11px',
|
|
932
|
+
color: '#6B7280',
|
|
933
|
+
fontWeight: '500',
|
|
934
|
+
marginBottom: '8px',
|
|
935
|
+
textTransform: 'uppercase',
|
|
936
|
+
letterSpacing: '0.5px'
|
|
917
937
|
}}
|
|
918
938
|
>
|
|
919
|
-
|
|
920
|
-
{value}
|
|
939
|
+
{indexValue}
|
|
921
940
|
</div>
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
941
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
|
942
|
+
<div
|
|
943
|
+
style={{
|
|
944
|
+
width: '14px',
|
|
945
|
+
height: '14px',
|
|
946
|
+
backgroundColor: color,
|
|
947
|
+
borderRadius: '3px',
|
|
948
|
+
flexShrink: 0
|
|
949
|
+
}}
|
|
950
|
+
/>
|
|
951
|
+
<span style={{
|
|
952
|
+
color: '#1F2937',
|
|
953
|
+
fontWeight: '600',
|
|
954
|
+
fontSize: '14px'
|
|
955
|
+
}}>
|
|
956
|
+
{label}
|
|
957
|
+
</span>
|
|
958
|
+
<span style={{
|
|
959
|
+
color: '#374151',
|
|
960
|
+
fontWeight: '700',
|
|
961
|
+
fontSize: '16px',
|
|
962
|
+
marginLeft: 'auto'
|
|
963
|
+
}}>
|
|
964
|
+
{value}
|
|
965
|
+
</span>
|
|
966
|
+
</div>
|
|
967
|
+
</div>
|
|
968
|
+
);
|
|
969
|
+
};
|
|
970
|
+
widget.props.tooltip = CustomTooltip;
|
|
926
971
|
|
|
927
972
|
// Ensure barData is an array and has items
|
|
928
973
|
if (Array.isArray(barData) && barData.length > 0) {
|
|
@@ -57,8 +57,8 @@ input[type='radio'],
|
|
|
57
57
|
transition: border-color 0.2s ease-in-out !important;
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
/* Global checkbox styling */
|
|
61
|
-
input[type='checkbox'] {
|
|
60
|
+
/* Global checkbox styling - exclude react-toggle elements */
|
|
61
|
+
input[type='checkbox']:not([class*='react-toggle']) {
|
|
62
62
|
-webkit-appearance: none !important;
|
|
63
63
|
-moz-appearance: none !important;
|
|
64
64
|
appearance: none !important;
|
|
@@ -79,7 +79,7 @@ input[type='checkbox'] {
|
|
|
79
79
|
|
|
80
80
|
input[type='radio']:hover,
|
|
81
81
|
.radio-input:hover,
|
|
82
|
-
input[type='checkbox']:hover {
|
|
82
|
+
input[type='checkbox']:not([class*='react-toggle']):hover {
|
|
83
83
|
border-color: var(--primary-color, #0066cc) !important;
|
|
84
84
|
}
|
|
85
85
|
|
|
@@ -89,7 +89,7 @@ input[type='radio']:checked,
|
|
|
89
89
|
background-color: white !important;
|
|
90
90
|
}
|
|
91
91
|
|
|
92
|
-
input[type='checkbox']:checked {
|
|
92
|
+
input[type='checkbox']:not([class*='react-toggle']):checked {
|
|
93
93
|
border-color: var(--primary-color, #0066cc) !important;
|
|
94
94
|
background-color: white !important;
|
|
95
95
|
}
|
|
@@ -109,7 +109,7 @@ input[type='radio']:checked::after,
|
|
|
109
109
|
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) !important;
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
-
input[type='checkbox']:checked::after {
|
|
112
|
+
input[type='checkbox']:not([class*='react-toggle']):checked::after {
|
|
113
113
|
content: '✓' !important;
|
|
114
114
|
position: absolute !important;
|
|
115
115
|
top: 50% !important;
|
|
@@ -790,7 +790,7 @@ form div:has(.react-toggle) input[type='checkbox'] {
|
|
|
790
790
|
transition: border-color 0.2s ease-in-out !important;
|
|
791
791
|
}
|
|
792
792
|
|
|
793
|
-
input[type='checkbox'] {
|
|
793
|
+
input[type='checkbox']:not([class*='react-toggle']) {
|
|
794
794
|
-webkit-appearance: none !important;
|
|
795
795
|
appearance: none !important;
|
|
796
796
|
width: 14px !important;
|
|
@@ -810,7 +810,7 @@ form div:has(.react-toggle) input[type='checkbox'] {
|
|
|
810
810
|
|
|
811
811
|
input[type='radio']:hover,
|
|
812
812
|
.radio-input:hover,
|
|
813
|
-
input[type='checkbox']:hover {
|
|
813
|
+
input[type='checkbox']:not([class*='react-toggle']):hover {
|
|
814
814
|
border-color: var(--primary-color, #0066cc) !important;
|
|
815
815
|
}
|
|
816
816
|
|
|
@@ -820,7 +820,7 @@ form div:has(.react-toggle) input[type='checkbox'] {
|
|
|
820
820
|
background-color: white !important;
|
|
821
821
|
}
|
|
822
822
|
|
|
823
|
-
input[type='checkbox']:checked {
|
|
823
|
+
input[type='checkbox']:not([class*='react-toggle']):checked {
|
|
824
824
|
border-color: var(--primary-color, #0066cc) !important;
|
|
825
825
|
background-color: white !important;
|
|
826
826
|
}
|
|
@@ -840,7 +840,7 @@ form div:has(.react-toggle) input[type='checkbox'] {
|
|
|
840
840
|
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) !important;
|
|
841
841
|
}
|
|
842
842
|
|
|
843
|
-
input[type='checkbox']:checked::after {
|
|
843
|
+
input[type='checkbox']:not([class*='react-toggle']):checked::after {
|
|
844
844
|
content: '✓' !important;
|
|
845
845
|
position: absolute !important;
|
|
846
846
|
top: 50% !important;
|