sag_components 1.0.545 → 1.0.546
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.
|
@@ -13,10 +13,7 @@ var _HannafordNewIcon = require("./icons/HannafordNewIcon");
|
|
|
13
13
|
var _StopAndShopIcon = require("./icons/StopAndShopIcon");
|
|
14
14
|
var _GiantFoodIcon = require("./icons/GiantFoodIcon");
|
|
15
15
|
var _TheGiantCompanyIcon = require("./icons/TheGiantCompanyIcon");
|
|
16
|
-
var _reactHookForm = require("react-hook-form");
|
|
17
16
|
var _PopupCharts = require("./PopupCharts.style");
|
|
18
|
-
// import PopupChartsContent from "./PopupChartsContent";
|
|
19
|
-
|
|
20
17
|
const PopupCharts = props => {
|
|
21
18
|
const {
|
|
22
19
|
title,
|
|
@@ -26,14 +23,9 @@ const PopupCharts = props => {
|
|
|
26
23
|
height,
|
|
27
24
|
borderColor,
|
|
28
25
|
subtitleTextColor,
|
|
29
|
-
onOverlayClick
|
|
30
|
-
children,
|
|
31
|
-
onChange
|
|
26
|
+
onOverlayClick
|
|
32
27
|
} = props;
|
|
33
28
|
const [IsPopupChartsOpen, setIsPopupChartsOpen] = (0, _react.useState)(isPopupChartsOpen);
|
|
34
|
-
const useFormMethods = (0, _reactHookForm.useForm)({
|
|
35
|
-
mode: "onChange"
|
|
36
|
-
});
|
|
37
29
|
const divRef = (0, _react.useRef)(null);
|
|
38
30
|
const [divHeight, setDivHeight] = (0, _react.useState)(0);
|
|
39
31
|
(0, _react.useEffect)(() => {
|
|
@@ -54,7 +46,6 @@ const PopupCharts = props => {
|
|
|
54
46
|
};
|
|
55
47
|
const closePopupCharts = e => {
|
|
56
48
|
setIsPopupChartsOpen(false);
|
|
57
|
-
console.log("closePopupCharts");
|
|
58
49
|
onOverlayClick(e);
|
|
59
50
|
};
|
|
60
51
|
const displayRetailerIcon = retailer => {
|
|
@@ -85,52 +76,25 @@ const PopupCharts = props => {
|
|
|
85
76
|
return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TotalDoughnutChart, {
|
|
86
77
|
currencySign: true,
|
|
87
78
|
dotCut: true,
|
|
88
|
-
legendData:
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}, {
|
|
93
|
-
color: "#82B3B4",
|
|
94
|
-
name: "Hannaford",
|
|
95
|
-
value: 650000
|
|
96
|
-
}, {
|
|
97
|
-
color: "#90CE9C",
|
|
98
|
-
name: "The Giant Company",
|
|
99
|
-
value: 500000
|
|
100
|
-
}, {
|
|
101
|
-
color: "#5FCC70",
|
|
102
|
-
name: "Giant Food",
|
|
103
|
-
value: 200000
|
|
104
|
-
}, {
|
|
105
|
-
color: "#229E38",
|
|
106
|
-
name: "Stop&Shop",
|
|
107
|
-
value: 250000
|
|
108
|
-
}],
|
|
109
|
-
noDataText: "The selected event is a TPR or has no offer, therefore there is no redeemers data to display.",
|
|
110
|
-
title: "Total Cost",
|
|
111
|
-
value: 565000,
|
|
79
|
+
legendData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.legendData,
|
|
80
|
+
noDataText: rowsData.noDataText,
|
|
81
|
+
title: rowsData.title,
|
|
82
|
+
value: rowsData.value,
|
|
112
83
|
width: "500px",
|
|
113
|
-
height: "
|
|
84
|
+
height: "290px",
|
|
114
85
|
itemsValuesSeparateLine: false
|
|
115
86
|
});
|
|
116
87
|
};
|
|
117
88
|
const ChartItem = _ref => {
|
|
118
|
-
var _children$props, _children$props2;
|
|
119
89
|
let {
|
|
120
90
|
title,
|
|
121
|
-
rowsData
|
|
122
|
-
children
|
|
91
|
+
rowsData
|
|
123
92
|
} = _ref;
|
|
124
|
-
const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
|
|
125
|
-
const handleToggle = () => {
|
|
126
|
-
setIsItemOpen(!IsItemOpen);
|
|
127
|
-
};
|
|
128
93
|
return /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemMainContainer, {
|
|
129
94
|
id: "ChartItemMainContainer",
|
|
130
95
|
borderColor: borderColor
|
|
131
96
|
}, /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemContainer, {
|
|
132
97
|
id: "ChartItemContainer",
|
|
133
|
-
onClick: handleToggle,
|
|
134
98
|
style: {
|
|
135
99
|
cursor: "pointer"
|
|
136
100
|
}
|
|
@@ -141,33 +105,13 @@ const PopupCharts = props => {
|
|
|
141
105
|
subtitleTextColor: subtitleTextColor
|
|
142
106
|
}, title)), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartContentContainer, {
|
|
143
107
|
id: "ChartContentContainer"
|
|
144
|
-
},
|
|
145
|
-
};
|
|
146
|
-
const Chart = _ref2 => {
|
|
147
|
-
let {
|
|
148
|
-
items,
|
|
149
|
-
children
|
|
150
|
-
} = _ref2;
|
|
151
|
-
return /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartContainer, {
|
|
152
|
-
id: "ChartContainer",
|
|
153
|
-
maxHeight: divHeight ? divHeight.toString().concat("", "px") : null
|
|
154
|
-
}, items.map((item, index) => {
|
|
155
|
-
var _item$rowsData;
|
|
156
|
-
return /*#__PURE__*/_react.default.createElement(ChartItem, {
|
|
157
|
-
key: index,
|
|
158
|
-
title: item.title,
|
|
159
|
-
rowsData: ((_item$rowsData = item.rowsData) === null || _item$rowsData === void 0 ? void 0 : _item$rowsData.length) > 0 ? item.rowsData : []
|
|
160
|
-
}, children);
|
|
161
|
-
}));
|
|
108
|
+
}, displayDoughnutChart(rowsData === null || rowsData === void 0 ? void 0 : rowsData.TotalDoughnutChartDetails)));
|
|
162
109
|
};
|
|
163
110
|
return /*#__PURE__*/_react.default.createElement(_PopupCharts.MainContainer, {
|
|
164
111
|
id: "MainContainer"
|
|
165
|
-
}, IsPopupChartsOpen && /*#__PURE__*/_react.default.createElement(
|
|
166
|
-
onSubmit: useFormMethods.handleSubmit(submittedValues => console.log("submittedValues", submittedValues))
|
|
167
|
-
}, /*#__PURE__*/_react.default.createElement(_PopupCharts.ModalOverlay, {
|
|
112
|
+
}, IsPopupChartsOpen && /*#__PURE__*/_react.default.createElement(_PopupCharts.ModalOverlay, {
|
|
168
113
|
id: "ModalOverlay",
|
|
169
114
|
className: "modal-overlay"
|
|
170
|
-
//onClick={(e) => closePopupCharts(e)}
|
|
171
115
|
}, /*#__PURE__*/_react.default.createElement(_PopupCharts.ModalContent, {
|
|
172
116
|
id: "ModalContent",
|
|
173
117
|
ref: divRef,
|
|
@@ -180,9 +124,14 @@ const PopupCharts = props => {
|
|
|
180
124
|
}, /*#__PURE__*/_react.default.createElement(_PopupCharts.Title, null, title), /*#__PURE__*/_react.default.createElement(_PopupCharts.CloseXIconContainer, {
|
|
181
125
|
id: "CloseXIconContainer",
|
|
182
126
|
onClick: e => closePopupCharts(e)
|
|
183
|
-
}, /*#__PURE__*/_react.default.createElement(_CloseXIcon.CloseXIcon, null))), /*#__PURE__*/_react.default.createElement(
|
|
184
|
-
|
|
185
|
-
|
|
127
|
+
}, /*#__PURE__*/_react.default.createElement(_CloseXIcon.CloseXIcon, null))), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartContainer, {
|
|
128
|
+
id: "ChartContainer",
|
|
129
|
+
maxHeight: divHeight ? (divHeight - 160).toString().concat("", "px") : null
|
|
130
|
+
}, PopupChartsItemsData.map((item, index) => /*#__PURE__*/_react.default.createElement(ChartItem, {
|
|
131
|
+
key: index,
|
|
132
|
+
title: item.title,
|
|
133
|
+
rowsData: item.rowsData
|
|
134
|
+
}))))));
|
|
186
135
|
};
|
|
187
136
|
var _default = exports.default = PopupCharts;
|
|
188
137
|
PopupCharts.defaultProps = {
|
|
@@ -15,7 +15,7 @@ const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_t
|
|
|
15
15
|
const Title = exports.Title = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 24px;\n margin: 0;\n"])));
|
|
16
16
|
const ChartContainer = exports.ChartContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n overflow-y: auto;\n padding: 0 10px 0 0;\n max-height: ", ";\n"])), props => props.maxHeight);
|
|
17
17
|
const ChartItemMainContainer = exports.ChartItemMainContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin: 10px 10px 10px 10px;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n border-radius: 12px;\n /* width: 565px;\n height: 365px;\n max-width: 565px;\n max-height: 365px; */\n\n"])));
|
|
18
|
-
const ChartItemContainer = exports.ChartItemContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin: 10px;\n"])));
|
|
18
|
+
const ChartItemContainer = exports.ChartItemContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin: 10px 10px 10px 10px;\n"])));
|
|
19
19
|
const ChartItemTitle = exports.ChartItemTitle = _styledComponents.default.h3(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 16px;\n line-height: 24px;\n margin: 0 10px;\n color: ", ";\n"])), props => props.subtitleTextColor);
|
|
20
20
|
const ChartItemIconContainer = exports.ChartItemIconContainer = _styledComponents.default.h3(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 0 0 10px;\n"])));
|
|
21
21
|
const ChartContentContainer = exports.ChartContentContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 14px;\n margin: 0;\n \n"])));
|
|
@@ -10,7 +10,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
10
10
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
|
|
11
11
|
const scrollableStyles = "\n overflow-y: auto;\n\n &::-webkit-scrollbar {\n width: 8px;\n }\n\n &::-webkit-scrollbar-track {\n background: #E8E8E8;\n border-radius: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #D0D0D0;\n border-radius: 5px;\n }\n";
|
|
12
12
|
const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-size: ", ";\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n display: flex;\n align-items: center;\n @media (max-width: 1536px) {\n ", "\n }\n\n > * {\n box-sizing: border-box;\n }\n"])), props => props.rootFont, props => props.textColor, props => props.width, props => props.height, scrollableStyles);
|
|
13
|
-
const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n background: white;\n"])));
|
|
13
|
+
const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n background: white;\n border-radius: 12px;\n"])));
|
|
14
14
|
const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n background: white;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n border-radius: 5px;\n padding: 6px 10px;\n margin: 0;\n"])));
|
|
15
15
|
const TooltipLabel = exports.TooltipLabel = _styledComponents.default.p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n font-weight: 400;\n font-style: normal;\n width: max-content; // fit-content;\n line-height: normal;\n margin: 0;\n"])));
|
|
16
16
|
const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n padding: 0 20px;\n"])));
|