@cashub/ui 0.48.14 → 0.48.15
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/Tab/TabList.js +26 -38
- package/Tab/TabPanel.js +20 -13
- package/Tab/TabTab.js +25 -37
- package/Tab/index.js +6 -3
- package/Tab/subComponent/TabListV2.js +18 -11
- package/Tab/subComponent/TabPanelV2.js +20 -16
- package/Tab/subComponent/TabTabV2.js +21 -33
- package/VerticalTab/TabList.js +18 -13
- package/VerticalTab/TabPanel.js +20 -16
- package/VerticalTab/TabTab.js +21 -40
- package/VerticalTab/VerticalTab.js +4 -8
- package/alert/Alert.js +5 -12
- package/animate/Collapse.js +7 -5
- package/animate/Loader.js +7 -18
- package/animate/PulseRing.js +5 -18
- package/animate/Spinner.js +3 -8
- package/backdrop/BaseBackdrop.js +3 -9
- package/backdrop/LoadingBackdrop.js +3 -7
- package/backdrop/ModalBackdrop.js +3 -5
- package/badge/Badge.js +3 -15
- package/badge/BadgeDot.js +3 -8
- package/badge/BadgeFill.js +6 -24
- package/badge/BadgeWithText.js +3 -13
- package/billing/BarChart.js +1 -1
- package/breadcrumb/Breadcrumb.js +3 -42
- package/button/Button.js +20 -88
- package/button/ButtonGroup.js +9 -33
- package/button/IconButton.js +10 -37
- package/button/ScrollToTopButton.js +4 -12
- package/callout/Callout.js +8 -37
- package/chart/BarChart.js +21 -13
- package/chart/DoughnutChart.js +20 -34
- package/chart/LineChart.js +21 -13
- package/chart/SingleBarChart.js +5 -22
- package/chart/utils/centerTextPlugin.js +2 -2
- package/chart/utils/customTooltip.js +8 -8
- package/chart/utils/htmlLegendPlugin.js +1 -1
- package/chart/utils/yAxisTopTitlePlugin.js +1 -1
- package/container/FlexContainer.js +7 -15
- package/cropper/Cropper.js +2 -1
- package/datetimePicker/DatePicker.js +26 -80
- package/datetimePicker/DatePickerV2.js +36 -95
- package/datetimePicker/DatetimePicker.js +11 -174
- package/datetimePicker/DatetimePickerV2.js +33 -87
- package/datetimePicker/DatetimePickerV3.js +11 -174
- package/datetimePicker/TimeInput.js +10 -35
- package/datetimePicker/TimePicker.js +22 -77
- package/datetimePicker/TimePickerStyle.js +3 -53
- package/datetimePicker/TimePickerV2.js +21 -54
- package/datetimePicker/accordion/Month.js +16 -93
- package/datetimePicker/accordion/Year.js +18 -96
- package/datetimePicker/hooks/useChangeNumber.js +6 -3
- package/datetimePicker/hooks/useDecrease.js +6 -3
- package/datetimePicker/hooks/useIncrease.js +6 -3
- package/datetimePicker/subComponent/Accordion.js +20 -101
- package/descriptionList/DescriptionDetail.js +4 -15
- package/descriptionList/DescriptionList.js +4 -12
- package/descriptionList/DescriptionTerm.js +3 -5
- package/divider/Divider.js +6 -15
- package/dropdown/DropdownButtonOption.js +6 -22
- package/dropdown/DropdownContent.js +15 -29
- package/dropdown/DropdownDivOption.js +3 -17
- package/dropdown/DropdownLinkOption.js +3 -14
- package/dropdown/DropdownToggle.js +15 -7
- package/dropzone/FileDropzone.js +22 -121
- package/dropzone/ImageDropzone.js +14 -83
- package/dropzone/subComponent/Message.js +4 -11
- package/figure/IconFigure.js +7 -16
- package/figure/ImageFigure.js +6 -19
- package/file/HiddenFileInput.js +3 -3
- package/form/Checkbox.js +13 -74
- package/form/Fieldset.js +3 -9
- package/form/FormItem.js +5 -10
- package/form/Input.js +7 -40
- package/form/Label.js +10 -34
- package/form/MutedText.js +4 -8
- package/form/PasswordInput.js +13 -20
- package/form/RadioButton.js +8 -55
- package/form/SearchSelect.js +12 -64
- package/form/Searchbox.js +19 -45
- package/form/Slider.js +10 -28
- package/form/SwitchButton.js +14 -48
- package/form/Textarea.js +3 -30
- package/form/TreeView.js +6 -13
- package/grid/Column.js +10 -23
- package/grid/Grid.js +6 -14
- package/heading/Heading1.js +4 -8
- package/heading/Heading2.js +5 -11
- package/heading/Heading3.js +8 -20
- package/iconbox/ApplicationIconBox.js +12 -48
- package/iconbox/IconBox.js +7 -31
- package/iconbox/IconBoxV2.js +8 -33
- package/iconbox/subComponent/IconBoxFigure.js +9 -17
- package/iconbox/subComponent/IconBoxImage.js +8 -21
- package/image/ImageFluid.js +3 -7
- package/image/UploadImage.js +18 -66
- package/jsoneditor/JsonEditor.js +15 -121
- package/keyframe/Pulse.js +3 -13
- package/keyframe/Spin.js +3 -5
- package/layout/Aside.js +5 -30
- package/layout/Backdrop.js +4 -8
- package/layout/Container.js +5 -21
- package/layout/Footer.js +7 -26
- package/link/LinkSpan.js +19 -37
- package/map/GoogleMap.js +7 -3
- package/map/GoogleReverseGeolocation.js +3 -6
- package/map/LeafletMap.js +2 -2
- package/map/subComponent/GoogleMapContainer.js +4 -16
- package/map/subComponent/GoogleMapPopup.js +10 -7
- package/map/subComponent/GoogleMapWrapper.js +15 -8
- package/map/subComponent/LeafletDrawControl.js +7 -9
- package/map/subComponent/LeafletMapContainer.js +4 -159
- package/modal/StateModal.js +62 -69
- package/modal/TitleModal.js +29 -70
- package/package.json +1 -1
- package/page/Disclaimer.js +3 -119
- package/paginate/Paginate.js +12 -54
- package/popover/Popover.js +25 -30
- package/qrcode/QRCode.js +6 -20
- package/qrcode/QRCodeContainter.js +4 -12
- package/ribbon/Ribbon.js +4 -29
- package/section/Section.js +20 -68
- package/section/SectionBody.js +8 -29
- package/section/SectionHeader.js +11 -36
- package/section/SectionToolbar.js +3 -9
- package/section/SectionToolbarItem.js +3 -8
- package/select/InputSelect.js +23 -16
- package/select/Select.js +43 -112
- package/select/subComponent/Checkbox.js +5 -24
- package/select/subComponent/Footer.js +3 -4
- package/select/subComponent/ListBox.js +5 -12
- package/select/subComponent/Option.js +7 -27
- package/select/subComponent/OptionGroup.js +3 -13
- package/select/subComponent/Options.js +5 -18
- package/select/subComponent/SearchBox.js +12 -34
- package/select/subComponent/SelectedMultipleTags.js +3 -21
- package/select/subComponent/SelectedMultipleText.js +4 -20
- package/select/subComponent/SelectedSingle.js +3 -7
- package/styles/GlobalStyle.js +45 -156
- package/styles/mixin/backgroundColor.js +8 -16
- package/styles/mixin/borderColor.js +7 -13
- package/styles/mixin/color.js +7 -13
- package/styles/mixin/colorOnBackground.js +7 -13
- package/styles/mixin/inputPlaceholder.js +3 -20
- package/styles/mixin/media.js +3 -5
- package/styles/mixin/rounded.js +6 -10
- package/styles/mixin/scrollbar.js +3 -13
- package/styles/theme/dark.theme.js +14 -15
- package/styles/theme/light.theme.js +14 -15
- package/styles/theme/white.theme.js +14 -15
- package/table/GridTable.js +33 -71
- package/table/ImageBox.js +5 -15
- package/table/InfiniteGridTable.js +46 -92
- package/table/PermissionTable.js +10 -32
- package/table/SimpleGridTable.js +17 -52
- package/table/Table.js +48 -198
- package/table/__mock__/columns.js +1 -1
- package/table/subComponent/BaseTableHeadCell.js +8 -37
- package/table/subComponent/GridTableFooter.js +4 -10
- package/table/subComponent/GridTableHeadCell.js +4 -6
- package/table/subComponent/Resizer.js +4 -19
- package/table/subComponent/TableFooter.js +6 -15
- package/table/subComponent/TableFooterInfo.js +3 -4
- package/table/subComponent/TableFooterPager.js +6 -19
- package/table/subComponent/TableHeadCell.js +3 -9
- package/table/subComponent/TableSort.js +7 -17
- package/tagify/TagifyStyle.js +3 -49
- package/tagify/Tags.js +21 -37
- package/tagify/templates/getCreateButtonTemplate.js +2 -5
- package/text/Paragraph.js +12 -50
- package/timeline/Timeline.js +17 -94
- package/toast/CustomToastContainer.js +3 -35
- package/toast/MessageContainer.js +4 -22
- package/tooltip/Tooltip.js +19 -47
- package/treeView/TreeViewV2.js +1 -1
- package/treeView/TreeflexStyle.js +3 -38
- package/wizard/Wizard.js +6 -115
package/button/Button.js
CHANGED
|
@@ -7,130 +7,62 @@ exports.default = void 0;
|
|
|
7
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
8
|
var _backgroundColor = _interopRequireDefault(require("../styles/mixin/backgroundColor"));
|
|
9
9
|
var _colorOnBackground = _interopRequireDefault(require("../styles/mixin/colorOnBackground"));
|
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
10
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
12
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
13
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
14
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
13
15
|
const Button = _styledComponents.default.button.attrs(() => ({
|
|
14
16
|
primary: true
|
|
15
|
-
}))
|
|
16
|
-
display: flex;
|
|
17
|
-
align-items: center;
|
|
18
|
-
border: none;
|
|
19
|
-
font-size: var(--font-button);
|
|
20
|
-
line-height: var(--font-body1);
|
|
21
|
-
cursor: ${_ref => {
|
|
17
|
+
}))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n border: none;\n font-size: var(--font-button);\n line-height: var(--font-body1);\n cursor: ", ";\n border-radius: var(--border-radius-l);\n padding: 10px var(--spacing-s);\n text-transform: uppercase;\n\n > svg {\n margin-right: calc(var(--spacing-s) - 0.25rem);\n font-size: var(--font-body1);\n }\n\n &:hover {\n ", "\n }\n\n ", "\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), _ref => {
|
|
22
18
|
let {
|
|
23
19
|
disabled
|
|
24
20
|
} = _ref;
|
|
25
21
|
return disabled ? 'no-drop' : 'pointer';
|
|
26
|
-
}
|
|
27
|
-
border-radius: var(--border-radius-l);
|
|
28
|
-
padding: 10px var(--spacing-s);
|
|
29
|
-
text-transform: uppercase;
|
|
30
|
-
|
|
31
|
-
> svg {
|
|
32
|
-
margin-right: calc(var(--spacing-s) - 0.25rem);
|
|
33
|
-
font-size: var(--font-body1);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
&:hover {
|
|
37
|
-
${_ref2 => {
|
|
22
|
+
}, _ref2 => {
|
|
38
23
|
let {
|
|
39
24
|
disabled
|
|
40
25
|
} = _ref2;
|
|
41
|
-
return !disabled && (0, _styledComponents.css)
|
|
42
|
-
|
|
43
|
-
box-shadow: var(--box-shadow);
|
|
44
|
-
opacity: 0.9;
|
|
45
|
-
`;
|
|
46
|
-
}}
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
${_backgroundColor.default}
|
|
50
|
-
${_colorOnBackground.default}
|
|
51
|
-
|
|
52
|
-
${_ref3 => {
|
|
26
|
+
return !disabled && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n transition: 0.3s;\n box-shadow: var(--box-shadow);\n opacity: 0.9;\n "])));
|
|
27
|
+
}, _backgroundColor.default, _colorOnBackground.default, _ref3 => {
|
|
53
28
|
let {
|
|
54
29
|
secondary
|
|
55
30
|
} = _ref3;
|
|
56
|
-
return secondary && (0, _styledComponents.css)
|
|
57
|
-
|
|
58
|
-
color: var(--font-on-background);
|
|
59
|
-
`;
|
|
60
|
-
}}
|
|
61
|
-
|
|
62
|
-
${_ref4 => {
|
|
31
|
+
return secondary && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background: var(--color-background2);\n color: var(--font-on-background);\n "])));
|
|
32
|
+
}, _ref4 => {
|
|
63
33
|
let {
|
|
64
34
|
reverse
|
|
65
35
|
} = _ref4;
|
|
66
|
-
return reverse && (0, _styledComponents.css)
|
|
67
|
-
|
|
68
|
-
color: var(--font-on-background);
|
|
69
|
-
`;
|
|
70
|
-
}}
|
|
71
|
-
|
|
72
|
-
${_ref5 => {
|
|
36
|
+
return reverse && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background: var(--color-background1);\n color: var(--font-on-background);\n "])));
|
|
37
|
+
}, _ref5 => {
|
|
73
38
|
let {
|
|
74
39
|
disabled
|
|
75
40
|
} = _ref5;
|
|
76
|
-
return disabled && (0, _styledComponents.css)
|
|
77
|
-
|
|
78
|
-
`;
|
|
79
|
-
}}
|
|
80
|
-
|
|
81
|
-
${_ref6 => {
|
|
41
|
+
return disabled && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
|
|
42
|
+
}, _ref6 => {
|
|
82
43
|
let {
|
|
83
44
|
iconOnly
|
|
84
45
|
} = _ref6;
|
|
85
|
-
return iconOnly && (0, _styledComponents.css)
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
> svg {
|
|
89
|
-
margin-right: 0;
|
|
90
|
-
}
|
|
91
|
-
`;
|
|
92
|
-
}}
|
|
93
|
-
|
|
94
|
-
${_ref7 => {
|
|
46
|
+
return iconOnly && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n padding: 10px;\n\n > svg {\n margin-right: 0;\n }\n "])));
|
|
47
|
+
}, _ref7 => {
|
|
95
48
|
let {
|
|
96
49
|
fullWidth
|
|
97
50
|
} = _ref7;
|
|
98
51
|
return fullWidth && 'width: 100%;';
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
${_ref8 => {
|
|
52
|
+
}, _ref8 => {
|
|
102
53
|
let {
|
|
103
54
|
alignCenter
|
|
104
55
|
} = _ref8;
|
|
105
56
|
return alignCenter && 'justify-content: center;';
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
${_ref9 => {
|
|
57
|
+
}, _ref9 => {
|
|
109
58
|
let {
|
|
110
59
|
filterFocus
|
|
111
60
|
} = _ref9;
|
|
112
|
-
return filterFocus && (0, _styledComponents.css)
|
|
113
|
-
|
|
114
|
-
`;
|
|
115
|
-
}}
|
|
116
|
-
|
|
117
|
-
${_ref10 => {
|
|
61
|
+
return filterFocus && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n border: 2px solid var(--color-danger);\n "])));
|
|
62
|
+
}, _ref10 => {
|
|
118
63
|
let {
|
|
119
64
|
variant
|
|
120
65
|
} = _ref10;
|
|
121
|
-
return variant === 'link' && (0, _styledComponents.css)
|
|
122
|
-
|
|
123
|
-
background: transparent;
|
|
124
|
-
color: var(--color-primary);
|
|
125
|
-
border: none;
|
|
126
|
-
padding: 0;
|
|
127
|
-
text-decoration: underline;
|
|
128
|
-
text-transform: none;
|
|
129
|
-
&:hover {
|
|
130
|
-
opacity: 0.8;
|
|
131
|
-
box-shadow: none;
|
|
132
|
-
}
|
|
133
|
-
`;
|
|
134
|
-
}}
|
|
135
|
-
`;
|
|
66
|
+
return variant === 'link' && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n font-size: var(--font-body1);\n background: transparent;\n color: var(--color-primary);\n border: none;\n padding: 0;\n text-decoration: underline;\n text-transform: none;\n &:hover {\n opacity: 0.8;\n box-shadow: none;\n }\n "])));
|
|
67
|
+
});
|
|
136
68
|
var _default = exports.default = Button;
|
package/button/ButtonGroup.js
CHANGED
|
@@ -5,57 +5,33 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
var _templateObject;
|
|
8
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
-
|
|
10
|
-
display: flex
|
|
11
|
-
align-items: center;
|
|
12
|
-
|
|
13
|
-
> button:not(:first-child),
|
|
14
|
-
*:not(:first-child) {
|
|
15
|
-
margin-left: var(--spacing-s);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
${_ref => {
|
|
10
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
11
|
+
const ButtonGroup = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n\n > button:not(:first-child),\n *:not(:first-child) {\n margin-left: var(--spacing-s);\n }\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), _ref => {
|
|
19
12
|
let {
|
|
20
13
|
alignCenter
|
|
21
14
|
} = _ref;
|
|
22
15
|
return alignCenter && 'justify-content: center;';
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
${_ref2 => {
|
|
16
|
+
}, _ref2 => {
|
|
26
17
|
let {
|
|
27
18
|
alignRight
|
|
28
19
|
} = _ref2;
|
|
29
20
|
return alignRight && 'justify-content: flex-end;';
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
${_ref3 => {
|
|
21
|
+
}, _ref3 => {
|
|
33
22
|
let {
|
|
34
23
|
marginBottom
|
|
35
24
|
} = _ref3;
|
|
36
25
|
return marginBottom && 'margin-bottom: var(--spacing);';
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
${_ref4 => {
|
|
26
|
+
}, _ref4 => {
|
|
40
27
|
let {
|
|
41
28
|
vertical
|
|
42
29
|
} = _ref4;
|
|
43
|
-
return vertical &&
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
> button,
|
|
47
|
-
> * {
|
|
48
|
-
margin-left: 0 !important;
|
|
49
|
-
margin-bottom: var(--spacing-s);
|
|
50
|
-
}
|
|
51
|
-
`;
|
|
52
|
-
}}
|
|
53
|
-
|
|
54
|
-
${_ref5 => {
|
|
30
|
+
return vertical && "\n flex-direction: column;\n\n > button,\n > * {\n margin-left: 0 !important;\n margin-bottom: var(--spacing-s);\n }\n ";
|
|
31
|
+
}, _ref5 => {
|
|
55
32
|
let {
|
|
56
33
|
height100
|
|
57
34
|
} = _ref5;
|
|
58
35
|
return height100 && 'height: 100%;';
|
|
59
|
-
}
|
|
60
|
-
`;
|
|
36
|
+
});
|
|
61
37
|
var _default = exports.default = ButtonGroup;
|
package/button/IconButton.js
CHANGED
|
@@ -5,68 +5,41 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
|
+
var _templateObject, _templateObject2;
|
|
8
9
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
9
10
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
11
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
10
12
|
const IconButton = _styledComponents.default.div.attrs(() => ({
|
|
11
13
|
role: 'button'
|
|
12
|
-
}))
|
|
13
|
-
display: flex;
|
|
14
|
-
justify-content: center;
|
|
15
|
-
align-items: center;
|
|
16
|
-
width: 40px;
|
|
17
|
-
height: 40px;
|
|
18
|
-
transition: 0.3s;
|
|
19
|
-
position: relative;
|
|
20
|
-
border-radius: var(--border-radius-l);
|
|
21
|
-
color: ${_ref => {
|
|
14
|
+
}))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 40px;\n height: 40px;\n transition: 0.3s;\n position: relative;\n border-radius: var(--border-radius-l);\n color: ", ";\n cursor: ", ";\n margin: auto;\n\n ", "\n\n &:hover {\n ", "\n }\n\n > svg {\n font-size: 1.5rem;\n\n ", "\n\n ", "\n }\n"])), _ref => {
|
|
22
15
|
let {
|
|
23
16
|
disabled
|
|
24
17
|
} = _ref;
|
|
25
18
|
return disabled ? 'var(--color-grey)' : 'var(--font-on-background)';
|
|
26
|
-
}
|
|
27
|
-
cursor: ${_ref2 => {
|
|
19
|
+
}, _ref2 => {
|
|
28
20
|
let {
|
|
29
21
|
disabled
|
|
30
22
|
} = _ref2;
|
|
31
23
|
return disabled ? 'no-drop' : 'pointer';
|
|
32
|
-
}
|
|
33
|
-
margin: auto;
|
|
34
|
-
|
|
35
|
-
${_ref3 => {
|
|
24
|
+
}, _ref3 => {
|
|
36
25
|
let {
|
|
37
26
|
size
|
|
38
27
|
} = _ref3;
|
|
39
|
-
return size === 'small' && (0, _styledComponents.css)
|
|
40
|
-
|
|
41
|
-
height: 32px;
|
|
42
|
-
`;
|
|
43
|
-
}}
|
|
44
|
-
|
|
45
|
-
&:hover {
|
|
46
|
-
${_ref4 => {
|
|
28
|
+
return size === 'small' && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 32px;\n height: 32px;\n "])));
|
|
29
|
+
}, _ref4 => {
|
|
47
30
|
let {
|
|
48
31
|
disabled
|
|
49
32
|
} = _ref4;
|
|
50
33
|
return !disabled && 'background: var(--color-hover)';
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
> svg {
|
|
55
|
-
font-size: 1.5rem;
|
|
56
|
-
|
|
57
|
-
${_ref5 => {
|
|
34
|
+
}, _ref5 => {
|
|
58
35
|
let {
|
|
59
36
|
size
|
|
60
37
|
} = _ref5;
|
|
61
38
|
return size === 'small' && 'font-size: 1rem;';
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
${_ref6 => {
|
|
39
|
+
}, _ref6 => {
|
|
65
40
|
let {
|
|
66
41
|
size
|
|
67
42
|
} = _ref6;
|
|
68
43
|
return size === 'large' && 'font-size: 2rem;';
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
`;
|
|
44
|
+
});
|
|
72
45
|
var _default = exports.default = IconButton;
|
|
@@ -9,7 +9,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
9
9
|
var _md = require("react-icons/md");
|
|
10
10
|
var _Button = _interopRequireDefault(require("./Button"));
|
|
11
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
+
var _templateObject;
|
|
12
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
13
15
|
const ScrollToTopButton = () => {
|
|
14
16
|
const [$display, setDisplay] = (0, _react.useState)(false);
|
|
15
17
|
const toggleVisible = () => {
|
|
@@ -35,20 +37,10 @@ const ScrollToTopButton = () => {
|
|
|
35
37
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdOutlineArrowBackIosNew, {})
|
|
36
38
|
});
|
|
37
39
|
};
|
|
38
|
-
const StyledScrollToTopButton = (0, _styledComponents.default)(_Button.default)
|
|
39
|
-
position: fixed;
|
|
40
|
-
bottom: var(--spacing);
|
|
41
|
-
right: var(--spacing);
|
|
42
|
-
display: ${_ref => {
|
|
40
|
+
const StyledScrollToTopButton = (0, _styledComponents.default)(_Button.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: fixed;\n bottom: var(--spacing);\n right: var(--spacing);\n display: ", ";\n z-index: 30;\n\n > svg {\n transform: rotate(90deg);\n }\n"])), _ref => {
|
|
43
41
|
let {
|
|
44
42
|
$display
|
|
45
43
|
} = _ref;
|
|
46
44
|
return $display ? 'flex' : 'none';
|
|
47
|
-
}
|
|
48
|
-
z-index: 30;
|
|
49
|
-
|
|
50
|
-
> svg {
|
|
51
|
-
transform: rotate(90deg);
|
|
52
|
-
}
|
|
53
|
-
`;
|
|
45
|
+
});
|
|
54
46
|
var _default = exports.default = ScrollToTopButton;
|
package/callout/Callout.js
CHANGED
|
@@ -5,44 +5,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
8
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
-
|
|
10
|
-
padding: var(--spacing);
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
margin-bottom: var(--
|
|
14
|
-
|
|
15
|
-
const
|
|
16
|
-
display: flex;
|
|
17
|
-
align-items: center;
|
|
18
|
-
`;
|
|
19
|
-
const Content = _styledComponents.default.div`
|
|
20
|
-
flex: 2;
|
|
21
|
-
`;
|
|
22
|
-
const Title = _styledComponents.default.h3`
|
|
23
|
-
font-size: var(--font-h3);
|
|
24
|
-
font-weight: 500;
|
|
25
|
-
color: var(--font-on-background);
|
|
26
|
-
margin-bottom: var(--border-radius);
|
|
27
|
-
`;
|
|
28
|
-
const Description = _styledComponents.default.p`
|
|
29
|
-
font-size: var(--font-body1);
|
|
30
|
-
line-height: 1.5;
|
|
31
|
-
color: var(--font-on-mute);
|
|
32
|
-
padding-right: var(--spacing);
|
|
33
|
-
font-weight: 400;
|
|
34
|
-
|
|
35
|
-
&:last-child {
|
|
36
|
-
margin-bottom: 0;
|
|
37
|
-
}
|
|
38
|
-
`;
|
|
39
|
-
const Action = _styledComponents.default.div`
|
|
40
|
-
flex: 1;
|
|
41
|
-
display: flex;
|
|
42
|
-
flex-direction: column;
|
|
43
|
-
align-items: flex-end;
|
|
44
|
-
justify-content: center;
|
|
45
|
-
`;
|
|
10
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
11
|
+
const Callout = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: var(--spacing);\n border-radius: var(--border-radius);\n background: var(--color-background3);\n margin-bottom: var(--spacing);\n"])));
|
|
12
|
+
const Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
|
|
13
|
+
const Content = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex: 2;\n"])));
|
|
14
|
+
const Title = _styledComponents.default.h3(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: var(--font-h3);\n font-weight: 500;\n color: var(--font-on-background);\n margin-bottom: var(--border-radius);\n"])));
|
|
15
|
+
const Description = _styledComponents.default.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-size: var(--font-body1);\n line-height: 1.5;\n color: var(--font-on-mute);\n padding-right: var(--spacing);\n font-weight: 400;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
16
|
+
const Action = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n justify-content: center;\n"])));
|
|
46
17
|
var _default = exports.default = Object.assign(Callout, {
|
|
47
18
|
Body,
|
|
48
19
|
Content,
|
package/chart/BarChart.js
CHANGED
|
@@ -11,14 +11,22 @@ var _customTooltip = _interopRequireDefault(require("./utils/customTooltip"));
|
|
|
11
11
|
var _padEmptyChartBar = _interopRequireDefault(require("./utils/padEmptyChartBar"));
|
|
12
12
|
var _yAxisTopTitlePlugin = _interopRequireDefault(require("./utils/yAxisTopTitlePlugin"));
|
|
13
13
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
|
+
const _excluded = ["height", "data", "options"];
|
|
14
15
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
17
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
18
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
19
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
20
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
21
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
22
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
|
|
15
23
|
const BarChart = _ref => {
|
|
16
24
|
let {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
25
|
+
height = 300,
|
|
26
|
+
data,
|
|
27
|
+
options = {}
|
|
28
|
+
} = _ref,
|
|
29
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
22
30
|
const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
|
|
23
31
|
|
|
24
32
|
// fix: read value from theme
|
|
@@ -70,15 +78,16 @@ const BarChart = _ref => {
|
|
|
70
78
|
return context[0] ? context[0].label.match(/(.{1,20})/g) : '';
|
|
71
79
|
},
|
|
72
80
|
label(context) {
|
|
73
|
-
|
|
81
|
+
var _context$dataset$tool;
|
|
82
|
+
const tooltipLabel = (_context$dataset$tool = context.dataset.tooltipLabels) === null || _context$dataset$tool === void 0 ? void 0 : _context$dataset$tool[context.dataIndex];
|
|
74
83
|
if (tooltipLabel !== undefined) {
|
|
75
|
-
return
|
|
84
|
+
return "".concat(context.dataset.label, ": ").concat(tooltipLabel);
|
|
76
85
|
}
|
|
77
86
|
const label = context.dataset.data[context.dataIndex];
|
|
78
87
|
if (context.dataset.customLabel) {
|
|
79
88
|
return context.dataset.customLabel[context.dataIndex].toString();
|
|
80
89
|
}
|
|
81
|
-
return
|
|
90
|
+
return "".concat(context.dataset.label, ": ").concat(label.toString()).concat(customOptions.tooltipLabelPostfix);
|
|
82
91
|
},
|
|
83
92
|
labelTextColor(context) {
|
|
84
93
|
const {
|
|
@@ -109,7 +118,7 @@ const BarChart = _ref => {
|
|
|
109
118
|
minRotation: customOptions.rotateLabel ? 15 : 0,
|
|
110
119
|
callback(value) {
|
|
111
120
|
const label = this.getLabelForValue(value);
|
|
112
|
-
return label && label.length > 11 ?
|
|
121
|
+
return label && label.length > 11 ? "".concat(label.substr(0, 11), "...") : label;
|
|
113
122
|
}
|
|
114
123
|
}
|
|
115
124
|
},
|
|
@@ -137,12 +146,11 @@ const BarChart = _ref => {
|
|
|
137
146
|
}
|
|
138
147
|
};
|
|
139
148
|
}, [customOptions, theme.fontOnPrimary]);
|
|
140
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Bar, {
|
|
149
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Bar, _objectSpread({
|
|
141
150
|
height: height,
|
|
142
151
|
data: data,
|
|
143
152
|
options: defaultOptions,
|
|
144
|
-
plugins: [_padEmptyChartBar.default, _yAxisTopTitlePlugin.default]
|
|
145
|
-
|
|
146
|
-
});
|
|
153
|
+
plugins: [_padEmptyChartBar.default, _yAxisTopTitlePlugin.default]
|
|
154
|
+
}, props));
|
|
147
155
|
};
|
|
148
156
|
var _default = exports.default = BarChart;
|
package/chart/DoughnutChart.js
CHANGED
|
@@ -12,17 +12,27 @@ var _htmlLegendPlugin = _interopRequireDefault(require("./utils/htmlLegendPlugin
|
|
|
12
12
|
var _customTooltip = _interopRequireDefault(require("./utils/customTooltip"));
|
|
13
13
|
var _centerTextPlugin = _interopRequireDefault(require("./utils/centerTextPlugin"));
|
|
14
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
+
var _templateObject;
|
|
16
|
+
const _excluded = ["height", "data", "showCenterText", "centerTextTitle"];
|
|
15
17
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
18
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
17
19
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
20
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
21
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
22
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
23
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
24
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
25
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
26
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
27
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
|
|
18
28
|
const DoughnutChart = _ref => {
|
|
19
29
|
let {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
30
|
+
height = 300,
|
|
31
|
+
data,
|
|
32
|
+
showCenterText = false,
|
|
33
|
+
centerTextTitle
|
|
34
|
+
} = _ref,
|
|
35
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
26
36
|
const [legendContainerId] = (0, _react.useState)((0, _lodash.default)('legend-container-'));
|
|
27
37
|
const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
|
|
28
38
|
|
|
@@ -79,40 +89,16 @@ const DoughnutChart = _ref => {
|
|
|
79
89
|
}, [legendContainerId, theme.fontOnPrimary, showCenterText, centerTextTitle]);
|
|
80
90
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
81
91
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
82
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Doughnut, {
|
|
92
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Doughnut, _objectSpread({
|
|
83
93
|
height: height,
|
|
84
94
|
data: data,
|
|
85
95
|
options: defaultOptions,
|
|
86
|
-
plugins: [_htmlLegendPlugin.default, _centerTextPlugin.default]
|
|
87
|
-
|
|
88
|
-
})
|
|
96
|
+
plugins: [_htmlLegendPlugin.default, _centerTextPlugin.default]
|
|
97
|
+
}, props))
|
|
89
98
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(LegendWrapper, {
|
|
90
99
|
id: legendContainerId
|
|
91
100
|
})]
|
|
92
101
|
});
|
|
93
102
|
};
|
|
94
|
-
const LegendWrapper = _styledComponents.default.div
|
|
95
|
-
.custom-legend-tooltip {
|
|
96
|
-
position: relative;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.custom-legend-tooltip:hover::after {
|
|
100
|
-
content: attr(data-tooltip);
|
|
101
|
-
position: absolute;
|
|
102
|
-
top: calc(1rem + var(--spacing-xs));
|
|
103
|
-
left: 50%;
|
|
104
|
-
transform: translateX(-50%);
|
|
105
|
-
border: 1px solid var(--border-color);
|
|
106
|
-
color: var(--font-on-background);
|
|
107
|
-
background: var(--color-background2);
|
|
108
|
-
box-shadow: var(--box-shadow);
|
|
109
|
-
border-radius: calc(var(--border-radius) / 2);
|
|
110
|
-
padding: var(--spacing-xs);
|
|
111
|
-
font-size: var(--font-body1);
|
|
112
|
-
font-weight: var(--font-normal);
|
|
113
|
-
text-align: center;
|
|
114
|
-
width: max-content;
|
|
115
|
-
max-width: 50vw;
|
|
116
|
-
}
|
|
117
|
-
`;
|
|
103
|
+
const LegendWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .custom-legend-tooltip {\n position: relative;\n }\n\n .custom-legend-tooltip:hover::after {\n content: attr(data-tooltip);\n position: absolute;\n top: calc(1rem + var(--spacing-xs));\n left: 50%;\n transform: translateX(-50%);\n border: 1px solid var(--border-color);\n color: var(--font-on-background);\n background: var(--color-background2);\n box-shadow: var(--box-shadow);\n border-radius: calc(var(--border-radius) / 2);\n padding: var(--spacing-xs);\n font-size: var(--font-body1);\n font-weight: var(--font-normal);\n text-align: center;\n width: max-content;\n max-width: 50vw;\n }\n"])));
|
|
118
104
|
var _default = exports.default = DoughnutChart;
|
package/chart/LineChart.js
CHANGED
|
@@ -10,14 +10,22 @@ var _reactChartjs = require("react-chartjs-2");
|
|
|
10
10
|
var _customTooltip = _interopRequireDefault(require("./utils/customTooltip"));
|
|
11
11
|
var _yAxisTopTitlePlugin = _interopRequireDefault(require("./utils/yAxisTopTitlePlugin"));
|
|
12
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
const _excluded = ["height", "data", "options"];
|
|
13
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
16
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
17
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
18
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
19
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
20
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
21
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
|
|
14
22
|
const LineChart = _ref => {
|
|
15
23
|
let {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
24
|
+
height = 300,
|
|
25
|
+
data,
|
|
26
|
+
options = {}
|
|
27
|
+
} = _ref,
|
|
28
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
21
29
|
const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
|
|
22
30
|
|
|
23
31
|
// fix: read value from theme
|
|
@@ -66,16 +74,17 @@ const LineChart = _ref => {
|
|
|
66
74
|
callbacks: {
|
|
67
75
|
title(context) {
|
|
68
76
|
const content = context[0] ? context[0].label.match(/(.{1,20})/g) : '';
|
|
69
|
-
return
|
|
77
|
+
return "".concat(customOptions.tooltipTitlePrefix).concat(content);
|
|
70
78
|
},
|
|
71
79
|
label(context) {
|
|
80
|
+
var _context$dataset$tool;
|
|
72
81
|
const datasetLabel = context.dataset.label || '';
|
|
73
|
-
const tooltipLabel = context.dataset.tooltipLabels
|
|
82
|
+
const tooltipLabel = (_context$dataset$tool = context.dataset.tooltipLabels) === null || _context$dataset$tool === void 0 ? void 0 : _context$dataset$tool[context.dataIndex];
|
|
74
83
|
if (tooltipLabel !== undefined) {
|
|
75
|
-
return datasetLabel ?
|
|
84
|
+
return datasetLabel ? "".concat(datasetLabel, ": ").concat(tooltipLabel) : "".concat(tooltipLabel);
|
|
76
85
|
}
|
|
77
86
|
const content = context.dataset.data[context.dataIndex].toString();
|
|
78
|
-
return datasetLabel ?
|
|
87
|
+
return datasetLabel ? "".concat(datasetLabel, ": ").concat(customOptions.tooltipLabelPrefix).concat(content).concat(customOptions.tooltipLabelPostfix) : "".concat(customOptions.tooltipLabelPrefix).concat(content).concat(customOptions.tooltipLabelPostfix);
|
|
79
88
|
},
|
|
80
89
|
labelColor(context) {
|
|
81
90
|
const {
|
|
@@ -135,12 +144,11 @@ const LineChart = _ref => {
|
|
|
135
144
|
}
|
|
136
145
|
};
|
|
137
146
|
}, [customOptions, theme.fontOnPrimary]);
|
|
138
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Line, {
|
|
147
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Line, _objectSpread({
|
|
139
148
|
height: height,
|
|
140
149
|
data: data,
|
|
141
150
|
options: defaultOptions,
|
|
142
|
-
plugins: [_yAxisTopTitlePlugin.default]
|
|
143
|
-
|
|
144
|
-
});
|
|
151
|
+
plugins: [_yAxisTopTitlePlugin.default]
|
|
152
|
+
}, props));
|
|
145
153
|
};
|
|
146
154
|
var _default = exports.default = LineChart;
|
package/chart/SingleBarChart.js
CHANGED
|
@@ -6,37 +6,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
8
|
var _backgroundColor = _interopRequireDefault(require("../styles/mixin/backgroundColor"));
|
|
9
|
+
var _templateObject;
|
|
9
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
10
12
|
const SingleBarChart = _styledComponents.default.div.attrs(() => ({
|
|
11
13
|
primary: true
|
|
12
|
-
}))
|
|
13
|
-
position: relative;
|
|
14
|
-
width: 100%;
|
|
15
|
-
height: 1rem;
|
|
16
|
-
border-radius: var(--border-radius);
|
|
17
|
-
background: var(--color-background3);
|
|
18
|
-
|
|
19
|
-
&::before {
|
|
20
|
-
position: absolute;
|
|
21
|
-
content: '';
|
|
22
|
-
width: ${_ref => {
|
|
14
|
+
}))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n height: 1rem;\n border-radius: var(--border-radius);\n background: var(--color-background3);\n\n &::before {\n position: absolute;\n content: '';\n width: ", "%;\n border-radius: var(--border-radius);\n top: 0;\n bottom: 0;\n\n ", "\n }\n\n ", "\n"])), _ref => {
|
|
23
15
|
let {
|
|
24
16
|
percentage
|
|
25
17
|
} = _ref;
|
|
26
18
|
return percentage;
|
|
27
|
-
}
|
|
28
|
-
border-radius: var(--border-radius);
|
|
29
|
-
top: 0;
|
|
30
|
-
bottom: 0;
|
|
31
|
-
|
|
32
|
-
${_backgroundColor.default}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
${_ref2 => {
|
|
19
|
+
}, _backgroundColor.default, _ref2 => {
|
|
36
20
|
let {
|
|
37
21
|
marginTop
|
|
38
22
|
} = _ref2;
|
|
39
23
|
return marginTop && 'margin-top: var(--spacing-s)';
|
|
40
|
-
}
|
|
41
|
-
`;
|
|
24
|
+
});
|
|
42
25
|
var _default = exports.default = SingleBarChart;
|