sag_components 1.0.1034 → 1.0.1036
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/stories/components/Heatmap.js +153 -0
- package/dist/stories/components/Heatmap.style.js +146 -0
- package/dist/stories/components/PieChart.style.js +3 -3
- package/dist/stories/components/ReportTable.js +2 -7
- package/dist/stories/components/ReportTable.style.js +9 -2
- package/dist/stories/components/TotalHorizontalCharts.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _framerMotion = require("framer-motion");
|
|
10
|
+
var _Heatmap = require("./Heatmap.style");
|
|
11
|
+
var _NoDataFoundMessage = require("./NoDataFoundMessage");
|
|
12
|
+
const Heatmap = props => {
|
|
13
|
+
const {
|
|
14
|
+
title,
|
|
15
|
+
data,
|
|
16
|
+
lowLimit,
|
|
17
|
+
barHeight
|
|
18
|
+
} = props;
|
|
19
|
+
const [tooltip, setTooltip] = (0, _react.useState)(null);
|
|
20
|
+
const [barHeightState, setBarHeightState] = (0, _react.useState)(barHeight);
|
|
21
|
+
const barRefs = (0, _react.useRef)([]); // Array to store refs for each bar
|
|
22
|
+
const barsContainerRef = (0, _react.useRef)(null);
|
|
23
|
+
const [tooltipPosition, setTooltipPosition] = (0, _react.useState)({
|
|
24
|
+
x: 0,
|
|
25
|
+
y: 0
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
// Filter data based on lowLimit
|
|
29
|
+
const filteredData = data.filter(item => item.value >= lowLimit);
|
|
30
|
+
|
|
31
|
+
// Calculate the total value of all bars
|
|
32
|
+
const totalValue = filteredData.reduce((sum, item) => sum + item.value, 0);
|
|
33
|
+
|
|
34
|
+
// Reset tooltip when height changes
|
|
35
|
+
(0, _react.useEffect)(() => {
|
|
36
|
+
setBarHeightState(barHeight);
|
|
37
|
+
setTooltip(null);
|
|
38
|
+
}, [barHeight]);
|
|
39
|
+
|
|
40
|
+
// Function to render Tooltip
|
|
41
|
+
const renderTooltip = item => {
|
|
42
|
+
if (tooltip && tooltipPosition && tooltip.label === `${item.label} - ${Math.round(item.value / totalValue * 100)}%`) {
|
|
43
|
+
const top = `${tooltipPosition.y}px`;
|
|
44
|
+
const left = `${tooltipPosition.x - 10}px`;
|
|
45
|
+
return /*#__PURE__*/_react.default.createElement(_Heatmap.TooltipContainer, {
|
|
46
|
+
className: "TooltipContainer",
|
|
47
|
+
top: top,
|
|
48
|
+
left: left
|
|
49
|
+
}, item.label, ' ', "-", ' ', /*#__PURE__*/_react.default.createElement("span", null, Math.round(item.value / totalValue * 100), "%"));
|
|
50
|
+
}
|
|
51
|
+
return null;
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
// Function to render the bars and BarsContainer
|
|
55
|
+
const renderBars = () => /*#__PURE__*/_react.default.createElement(_Heatmap.BarsContainer, {
|
|
56
|
+
ref: barsContainerRef,
|
|
57
|
+
className: "BarsContainer",
|
|
58
|
+
height: barHeightState
|
|
59
|
+
}, filteredData.map((item, index) => {
|
|
60
|
+
const barWidth = item.value / totalValue * 100;
|
|
61
|
+
return /*#__PURE__*/_react.default.createElement(_Heatmap.BarWrapper, {
|
|
62
|
+
className: "BarWrapper"
|
|
63
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
64
|
+
,
|
|
65
|
+
key: index,
|
|
66
|
+
width: `${barWidth}%`,
|
|
67
|
+
height: barHeightState
|
|
68
|
+
}, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, /*#__PURE__*/_react.default.createElement(_Heatmap.BarContainer, {
|
|
69
|
+
ref: el => {
|
|
70
|
+
barRefs.current[index] = el;
|
|
71
|
+
} // Attach ref
|
|
72
|
+
,
|
|
73
|
+
className: "BarContainer",
|
|
74
|
+
height: barHeightState,
|
|
75
|
+
color: item.color,
|
|
76
|
+
initial: {
|
|
77
|
+
width: '0%'
|
|
78
|
+
},
|
|
79
|
+
animate: {
|
|
80
|
+
width: '100%'
|
|
81
|
+
},
|
|
82
|
+
exit: {
|
|
83
|
+
width: '0%'
|
|
84
|
+
},
|
|
85
|
+
transition: {
|
|
86
|
+
duration: 0.4
|
|
87
|
+
},
|
|
88
|
+
onMouseEnter: e => {
|
|
89
|
+
var _barRefs$current$inde;
|
|
90
|
+
const barRect = (_barRefs$current$inde = barRefs.current[index]) === null || _barRefs$current$inde === void 0 ? void 0 : _barRefs$current$inde.getBoundingClientRect();
|
|
91
|
+
if (barRect && e.clientX > barRect.x && e.clientX < barRect.x + barRect.width && e.clientY > barRect.y && e.clientY < barRect.y + barRect.height) {
|
|
92
|
+
setTooltip({
|
|
93
|
+
label: `${item.label} - ${Math.round(item.value / totalValue * 100)}%`
|
|
94
|
+
});
|
|
95
|
+
setTooltipPosition({
|
|
96
|
+
x: e.clientX,
|
|
97
|
+
y: e.clientY
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
onMouseLeave: e => {
|
|
102
|
+
var _barRefs$current$inde2;
|
|
103
|
+
const barRect = (_barRefs$current$inde2 = barRefs.current[index]) === null || _barRefs$current$inde2 === void 0 ? void 0 : _barRefs$current$inde2.getBoundingClientRect();
|
|
104
|
+
if (!barRect || e.clientX < barRect.x || e.clientX > barRect.x + barRect.width || e.clientY < barRect.y || e.clientY > barRect.y + barRect.height) {
|
|
105
|
+
setTooltip(null);
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
onMouseMove: e => {
|
|
109
|
+
var _barRefs$current$inde3;
|
|
110
|
+
const barRect = (_barRefs$current$inde3 = barRefs.current[index]) === null || _barRefs$current$inde3 === void 0 ? void 0 : _barRefs$current$inde3.getBoundingClientRect();
|
|
111
|
+
if (barRect && e.clientX > barRect.x && e.clientX < barRect.x + barRect.width && e.clientY > barRect.y && e.clientY < barRect.y + barRect.height) {
|
|
112
|
+
setTooltipPosition({
|
|
113
|
+
x: e.clientX,
|
|
114
|
+
y: e.clientY
|
|
115
|
+
});
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}, /*#__PURE__*/_react.default.createElement(_Heatmap.BarLabel, {
|
|
119
|
+
className: "BarLabel"
|
|
120
|
+
}, Math.round(item.value / totalValue * 100), "%")), renderTooltip(item)));
|
|
121
|
+
}));
|
|
122
|
+
|
|
123
|
+
// Function to render the Legend Area
|
|
124
|
+
const renderLegend = () => /*#__PURE__*/_react.default.createElement(_Heatmap.LegendContainer, {
|
|
125
|
+
className: "LegendContainer"
|
|
126
|
+
}, filteredData.map((item, index) =>
|
|
127
|
+
/*#__PURE__*/
|
|
128
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
129
|
+
_react.default.createElement(_Heatmap.LegendItem, {
|
|
130
|
+
className: "LegendItem",
|
|
131
|
+
key: index
|
|
132
|
+
}, /*#__PURE__*/_react.default.createElement(_Heatmap.LegendColorBox, {
|
|
133
|
+
className: "LegendColorBox",
|
|
134
|
+
style: {
|
|
135
|
+
backgroundColor: item.color
|
|
136
|
+
}
|
|
137
|
+
}), /*#__PURE__*/_react.default.createElement(_Heatmap.LegendLabel, {
|
|
138
|
+
className: "LegendLabel"
|
|
139
|
+
}, item.label))));
|
|
140
|
+
return /*#__PURE__*/_react.default.createElement(_Heatmap.HeatmapContainer, {
|
|
141
|
+
className: "HeatmapContainer"
|
|
142
|
+
}, !data || data.length === 0 ? /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
|
|
143
|
+
className: "NoDataFoundMessage",
|
|
144
|
+
noDataText: ""
|
|
145
|
+
}) : /*#__PURE__*/_react.default.createElement(_Heatmap.HeatmapWrapper, {
|
|
146
|
+
className: "HeatmapWrapper"
|
|
147
|
+
}, /*#__PURE__*/_react.default.createElement(_Heatmap.TitleContainer, {
|
|
148
|
+
className: "TitleContainer"
|
|
149
|
+
}, /*#__PURE__*/_react.default.createElement(_Heatmap.Title, {
|
|
150
|
+
className: "Title"
|
|
151
|
+
}, title)), renderBars(), renderLegend()));
|
|
152
|
+
};
|
|
153
|
+
var _default = exports.default = Heatmap;
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.TooltipContainer = exports.TitleContainer = exports.Title = exports.LegendLabel = exports.LegendItem = exports.LegendContainer = exports.LegendColorBox = exports.HeatmapWrapper = exports.HeatmapContainer = exports.BarsContainer = exports.BarWrapper = exports.BarLabel = exports.BarContainer = void 0;
|
|
8
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
+
var _framerMotion = require("framer-motion");
|
|
10
|
+
const HeatmapContainer = exports.HeatmapContainer = _styledComponents.default.div`
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
justify-content: flex-start;
|
|
14
|
+
position: relative;
|
|
15
|
+
height: ${props => props.height};
|
|
16
|
+
width: 100%;
|
|
17
|
+
font-family: "Poppins", sans-serif;
|
|
18
|
+
`;
|
|
19
|
+
const HeatmapWrapper = exports.HeatmapWrapper = _styledComponents.default.div`
|
|
20
|
+
display: flex;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
padding: 20px;
|
|
23
|
+
height: ${props => props.height};
|
|
24
|
+
`;
|
|
25
|
+
const TitleContainer = exports.TitleContainer = _styledComponents.default.div`
|
|
26
|
+
display: flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
justify-content: flex-start;
|
|
29
|
+
margin: 0 0 10px 0;
|
|
30
|
+
`;
|
|
31
|
+
const Title = exports.Title = _styledComponents.default.h3`
|
|
32
|
+
user-select: none;
|
|
33
|
+
text-align: left;
|
|
34
|
+
margin: 0;
|
|
35
|
+
font-family: "Poppins", sans-serif;
|
|
36
|
+
font-weight: 400;
|
|
37
|
+
font-size: 18px;
|
|
38
|
+
@media (max-width: 1536px) {
|
|
39
|
+
font-size: 16px;
|
|
40
|
+
}
|
|
41
|
+
@media (max-width: 1366px) {
|
|
42
|
+
font-size: 14px;
|
|
43
|
+
}
|
|
44
|
+
`;
|
|
45
|
+
const BarsContainer = exports.BarsContainer = _styledComponents.default.div`
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
justify-content: flex-start;
|
|
49
|
+
width: 100%;
|
|
50
|
+
height: ${props => props.height};
|
|
51
|
+
`;
|
|
52
|
+
const BarWrapper = exports.BarWrapper = _styledComponents.default.div`
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-direction: column;
|
|
55
|
+
/* align-items: center; */
|
|
56
|
+
justify-content: flex-start;
|
|
57
|
+
align-items: stretch; /* Ensures full vertical stretch */
|
|
58
|
+
width: ${props => props.width};
|
|
59
|
+
height: ${props => props.height};
|
|
60
|
+
`;
|
|
61
|
+
const BarContainer = exports.BarContainer = (0, _styledComponents.default)(_framerMotion.motion.div)`
|
|
62
|
+
background-color: ${props => props.color};
|
|
63
|
+
display: flex;
|
|
64
|
+
align-items: center;
|
|
65
|
+
justify-content: center;
|
|
66
|
+
height: ${props => props.height};
|
|
67
|
+
width: 0%; /* Starts at 0% for animation */
|
|
68
|
+
`;
|
|
69
|
+
const BarLabel = exports.BarLabel = _styledComponents.default.span`
|
|
70
|
+
color: white;
|
|
71
|
+
font-size: 14px;
|
|
72
|
+
font-weight: 400;
|
|
73
|
+
user-select: none;
|
|
74
|
+
`;
|
|
75
|
+
const TooltipContainer = exports.TooltipContainer = _styledComponents.default.div`
|
|
76
|
+
position: absolute;
|
|
77
|
+
|
|
78
|
+
top: ${props => props.top};
|
|
79
|
+
left: ${props => props.left};
|
|
80
|
+
transition: left 0.8s ease, top 0.8s ease;
|
|
81
|
+
|
|
82
|
+
background-color: white;
|
|
83
|
+
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
|
|
84
|
+
font-weight: 400;
|
|
85
|
+
font-size: 14px;
|
|
86
|
+
line-height: 21px;
|
|
87
|
+
padding: 8px 12px;
|
|
88
|
+
border-radius: 4px;
|
|
89
|
+
z-index: 10;
|
|
90
|
+
font-family: "Poppins", sans-serif;
|
|
91
|
+
user-select: none;
|
|
92
|
+
|
|
93
|
+
// Make the percentage bold
|
|
94
|
+
span {
|
|
95
|
+
font-weight: bold;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
// treeangle on the bottom
|
|
99
|
+
/* &:before {
|
|
100
|
+
content: "";
|
|
101
|
+
position: absolute;
|
|
102
|
+
bottom: -12px;
|
|
103
|
+
left: 50%;
|
|
104
|
+
transform: translateX(-50%);
|
|
105
|
+
width: 0;
|
|
106
|
+
height: 0;
|
|
107
|
+
border-left: 8px solid transparent;
|
|
108
|
+
border-right: 8px solid transparent;
|
|
109
|
+
border-top: 12px solid white;
|
|
110
|
+
} */
|
|
111
|
+
`;
|
|
112
|
+
const LegendContainer = exports.LegendContainer = _styledComponents.default.div`
|
|
113
|
+
display: flex;
|
|
114
|
+
align-items: center;
|
|
115
|
+
justify-content: center;
|
|
116
|
+
flex-wrap: wrap;
|
|
117
|
+
gap: 24px;
|
|
118
|
+
margin-top: 10px;
|
|
119
|
+
width: 100%;
|
|
120
|
+
flex-shrink: 0;
|
|
121
|
+
`;
|
|
122
|
+
const LegendItem = exports.LegendItem = _styledComponents.default.div`
|
|
123
|
+
display: flex;
|
|
124
|
+
align-items: center;
|
|
125
|
+
margin-right: 15px;
|
|
126
|
+
`;
|
|
127
|
+
const LegendColorBox = exports.LegendColorBox = _styledComponents.default.div`
|
|
128
|
+
width: 16px;
|
|
129
|
+
height: 16px;
|
|
130
|
+
margin-right: 8px;
|
|
131
|
+
background-color: ${props => props.color};
|
|
132
|
+
border-radius: 2px;
|
|
133
|
+
`;
|
|
134
|
+
const LegendLabel = exports.LegendLabel = _styledComponents.default.span`
|
|
135
|
+
user-select: none;
|
|
136
|
+
font-family: "Poppins", sans-serif;
|
|
137
|
+
color: #212121;
|
|
138
|
+
font-weight: 400;
|
|
139
|
+
font-size: 14px;
|
|
140
|
+
@media (max-width: 1536px) {
|
|
141
|
+
font-size: 12px;
|
|
142
|
+
}
|
|
143
|
+
@media (max-width: 1366px) {
|
|
144
|
+
font-size: 10px;
|
|
145
|
+
}
|
|
146
|
+
`;
|
|
@@ -110,8 +110,8 @@ const TextAfterValue = exports.TextAfterValue = _styledComponents.default.span`
|
|
|
110
110
|
`;
|
|
111
111
|
const DoughnutChartAndLegendContainer = exports.DoughnutChartAndLegendContainer = _styledComponents.default.div`
|
|
112
112
|
display: flex;
|
|
113
|
-
gap:
|
|
114
|
-
width:
|
|
113
|
+
gap: 2%;
|
|
114
|
+
width: 80%;
|
|
115
115
|
min-height: 200px;
|
|
116
116
|
margin: auto;
|
|
117
117
|
padding: 0 20px;
|
|
@@ -145,7 +145,7 @@ const LegendTitle = exports.LegendTitle = _styledComponents.default.h5`
|
|
|
145
145
|
font-size: 14px;
|
|
146
146
|
margin: 0;
|
|
147
147
|
display: flex;
|
|
148
|
-
gap:
|
|
148
|
+
gap: 20px;
|
|
149
149
|
justify-content: space-between;
|
|
150
150
|
`;
|
|
151
151
|
const LegendFormattedValue = exports.LegendFormattedValue = _styledComponents.default.span`
|
|
@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.default = exports.ReportTable = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
-
var _ArrowSelectIcon = _interopRequireDefault(require("./icons/ArrowSelectIcon"));
|
|
11
|
-
var _Duplicate = _interopRequireDefault(require("./icons/Duplicate"));
|
|
12
10
|
var _CheckBoxCheckedIcon = require("./icons/CheckBoxCheckedIcon");
|
|
13
11
|
var _CheckBoxNotCheckedIcon = require("./icons/CheckBoxNotCheckedIcon");
|
|
14
12
|
var _SortIcon = require("./icons/SortIcon");
|
|
@@ -18,9 +16,6 @@ var _ReportTable = require("./ReportTable.style");
|
|
|
18
16
|
var _InfoIcon = require("./icons/InfoIcon");
|
|
19
17
|
var _ChevronLeftIcon = require("./icons/ChevronLeftIcon");
|
|
20
18
|
var _ChevronRightIcon = require("./icons/ChevronRightIcon");
|
|
21
|
-
/* eslint-disable import/no-unresolved */
|
|
22
|
-
/* eslint-disable import/extensions */
|
|
23
|
-
|
|
24
19
|
const ReportTable = props => {
|
|
25
20
|
const {
|
|
26
21
|
tableData,
|
|
@@ -285,7 +280,7 @@ const ReportTable = props => {
|
|
|
285
280
|
content: getTooltipText(value),
|
|
286
281
|
direction: "top",
|
|
287
282
|
topFactor: value !== null ? -getTopFactor(Math.ceil(value.length / 50)) : -getTopFactor(1)
|
|
288
|
-
}, truncateString(value, 30)) : value ? truncateString(value, 30) : "N/A", " "))))))), enablePagination && /*#__PURE__*/_react.default.createElement(_ReportTable.RecordDisplay, null, getRecordRangeDisplay()), enablePagination && /*#__PURE__*/_react.default.createElement(_ReportTable.PaginationContainer, null, totalPages > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
|
|
283
|
+
}, truncateString(value, 30)) : value ? truncateString(value, 30) : "N/A", " "))))))), /*#__PURE__*/_react.default.createElement(_ReportTable.PaginationWrapper, null, enablePagination && /*#__PURE__*/_react.default.createElement(_ReportTable.RecordDisplay, null, getRecordRangeDisplay()), enablePagination && /*#__PURE__*/_react.default.createElement(_ReportTable.PaginationContainer, null, totalPages > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
|
|
289
284
|
className: `arrow ${currentPage === 1 ? "disabled" : ""}`,
|
|
290
285
|
onClick: () => currentPage > 1 && handlePageChange(currentPage - 1)
|
|
291
286
|
}, /*#__PURE__*/_react.default.createElement(_ChevronLeftIcon.ChevronLeftIcon, {
|
|
@@ -349,7 +344,7 @@ const ReportTable = props => {
|
|
|
349
344
|
onClick: () => currentPage < totalPages && handlePageChange(currentPage + 1)
|
|
350
345
|
}, /*#__PURE__*/_react.default.createElement(_ChevronRightIcon.ChevronRightIcon, {
|
|
351
346
|
disabled: currentPage === totalPages
|
|
352
|
-
})))), isLoading && enablePagination && /*#__PURE__*/_react.default.createElement(_ReportTable.LoaderWrapper, {
|
|
347
|
+
}))))), isLoading && enablePagination && /*#__PURE__*/_react.default.createElement(_ReportTable.LoaderWrapper, {
|
|
353
348
|
id: "LoaderWrapper"
|
|
354
349
|
}, /*#__PURE__*/_react.default.createElement(_ReportTable.Loader, {
|
|
355
350
|
loaderColor: "#1B30AA"
|
|
@@ -4,7 +4,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.Tr = exports.Th = exports.Td = exports.TableWrapper = exports.Table = exports.ReportTableWrapper = exports.RecordDisplay = exports.PaginationContainer = exports.LoaderWrapper = exports.Loader = exports.InfoText = exports.InfoBlock = void 0;
|
|
7
|
+
exports.Tr = exports.Th = exports.Td = exports.TableWrapper = exports.Table = exports.ReportTableWrapper = exports.RecordDisplay = exports.PaginationWrapper = exports.PaginationContainer = exports.LoaderWrapper = exports.Loader = exports.InfoText = exports.InfoBlock = void 0;
|
|
8
8
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
9
|
const scrollableStyles = `
|
|
10
10
|
overflow-y: auto;
|
|
@@ -128,6 +128,7 @@ const PaginationContainer = exports.PaginationContainer = _styledComponents.defa
|
|
|
128
128
|
align-items: center;
|
|
129
129
|
gap: 10px;
|
|
130
130
|
margin-top: 20px;
|
|
131
|
+
margin-right: 315px;
|
|
131
132
|
|
|
132
133
|
.page-number {
|
|
133
134
|
padding: 5px 10px;
|
|
@@ -184,6 +185,13 @@ const RecordDisplay = exports.RecordDisplay = _styledComponents.default.div`
|
|
|
184
185
|
font-size: 14px;
|
|
185
186
|
font-weight: 400;
|
|
186
187
|
font-family: "Poppins";
|
|
188
|
+
margin-left: 20px;
|
|
189
|
+
margin-top: 20px;
|
|
190
|
+
`;
|
|
191
|
+
const PaginationWrapper = exports.PaginationWrapper = _styledComponents.default.div`
|
|
192
|
+
display: flex;
|
|
193
|
+
align-items: center;
|
|
194
|
+
justify-content: space-between;
|
|
187
195
|
`;
|
|
188
196
|
const LoaderWrapper = exports.LoaderWrapper = _styledComponents.default.div`
|
|
189
197
|
position: absolute;
|
|
@@ -198,7 +206,6 @@ const LoaderWrapper = exports.LoaderWrapper = _styledComponents.default.div`
|
|
|
198
206
|
z-index: 10;
|
|
199
207
|
width: 100%;
|
|
200
208
|
height: 100%;
|
|
201
|
-
|
|
202
209
|
@media (max-width: 1536px) {
|
|
203
210
|
font-size: 14px;
|
|
204
211
|
}
|
|
@@ -162,6 +162,7 @@ const TotalHorizontalCharts = props => {
|
|
|
162
162
|
}, currencySign && /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.CurrencySign, {
|
|
163
163
|
className: "CurrencySign"
|
|
164
164
|
}, (0, _CommonFunctions.getCurrencySign)(currencyType, value)), dotCut ? (0, _CommonFunctions.getFormattedValue)(value && Math.abs(value) > 0 && value % 1 !== 0 ? value === null || value === void 0 ? void 0 : value.toFixed(2) : value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : '') : '') : '', /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, null, /*#__PURE__*/_react.default.createElement(_recharts.ComposedChart, {
|
|
165
|
+
height: 250,
|
|
165
166
|
layout: "vertical",
|
|
166
167
|
data: chartsData,
|
|
167
168
|
margin: {
|