sag_components 1.0.142 → 1.0.144

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.
Files changed (9) hide show
  1. package/dist/stories/components/Datepicker.js +37 -0
  2. package/dist/stories/components/Datepicker.style.js +16 -0
  3. package/dist/stories/components/OneColumnContainer.js +13 -5
  4. package/dist/stories/components/TextField.js +23 -16
  5. package/dist/stories/components/TitleDescription.js +2 -18
  6. package/dist/stories/components/TitleDescription.style.js +6 -6
  7. package/dist/stories/components/TotalDoughnutChart.js +13 -1
  8. package/dist/stories/components/TotalDoughnutChart.style.js +21 -17
  9. package/package.json +3 -1
package/dist/stories/components/Datepicker.js ADDED
@@ -0,0 +1,37 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = exports.Datepicker = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _DatepickerStyle = require("./Datepicker.style.js");
10
+ var _AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
11
+ var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
12
+ var _DatePicker = require("@mui/x-date-pickers/DatePicker");
13
+ var _demo = require("@mui/x-date-pickers/internals/demo");
14
+ /**
15
+ * SAG Datepicker
16
+ */
17
+ var Datepicker = function Datepicker(_ref) {
18
+ var _ref$width = _ref.width,
19
+ width = _ref$width === void 0 ? "100%" : _ref$width,
20
+ text = _ref.text;
21
+ /**
22
+ * SAG Datepicker
23
+ */
24
+
25
+ return /*#__PURE__*/_react.default.createElement(_DatepickerStyle.DatepickerContainer, {
26
+ width: width
27
+ }, /*#__PURE__*/_react.default.createElement(_LocalizationProvider.LocalizationProvider, {
28
+ dateAdapter: _AdapterDayjs.AdapterDayjs
29
+ }, /*#__PURE__*/_react.default.createElement(_demo.DemoContainer, {
30
+ components: ['DatePicker']
31
+ }, /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
32
+ label: text
33
+ }))));
34
+ };
35
+ exports.Datepicker = Datepicker;
36
+ var _default = Datepicker;
37
+ exports.default = _default;
package/dist/stories/components/Datepicker.style.js ADDED
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.DatepickerContainer = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _templateObject;
11
+ //import './font.css';
12
+
13
+ var DatepickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: ", "; \n text-align: left; \n position: relative; \n align-items: center;\n justify-content: center;\n font-family: Lato; \n font-size: \"14px\";\n"])), function (props) {
14
+ return props.width;
15
+ });
16
+ exports.DatepickerContainer = DatepickerContainer;
package/dist/stories/components/OneColumnContainer.js CHANGED
@@ -20,7 +20,6 @@ var _excluded = ["children", "display", "isLoading", "gridTemplateColumns", "nod
20
20
  * Primary UI component for user interaction
21
21
  */
22
22
  var OneColumnContainer = function OneColumnContainer(_ref) {
23
- var _nodeRef$current$offs, _nodeRef$current, _nodeRef$current$offs2, _nodeRef$current2;
24
23
  var children = _ref.children,
25
24
  _ref$display = _ref.display,
26
25
  display = _ref$display === void 0 ? "flex" : _ref$display,
@@ -44,6 +43,15 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
44
43
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
45
44
  hover = _useState2[0],
46
45
  setHover = _useState2[1];
46
+ var _useState3 = (0, _react.useState)(null),
47
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
48
+ offsetWidth = _useState4[0],
49
+ setOffsetWidth = _useState4[1];
50
+ var anotherRef = (0, _react.useRef)(null);
51
+ (0, _react.useEffect)(function () {
52
+ setOffsetWidth(anotherRef.current.offsetWidth);
53
+ console.log(anotherRef.current.offsetWidth);
54
+ }, [anotherRef]);
47
55
  return /*#__PURE__*/_react.default.createElement(_OneColumnContainer.StyledContainer, {
48
56
  className: (0, _classnames.default)(itemClass, overStyle, draggingStyle, children && droppedStyle, divStyle),
49
57
  width: width,
@@ -59,20 +67,20 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
59
67
  display: display,
60
68
  gridTemplateColumns: gridTemplateColumns
61
69
  },
62
- ref: nodeRef
63
- }, isLoading && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.LoadingDiv, {
70
+ ref: anotherRef
71
+ }, console.log(anotherRef), isLoading && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.LoadingDiv, {
64
72
  id: "loadingDiv"
65
73
  }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.SkeletonTheme, {
66
74
  baseColor: "#EAEAEA"
67
75
  }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
68
76
  enableAnimation: true,
69
- width: ((_nodeRef$current$offs = nodeRef === null || nodeRef === void 0 ? void 0 : (_nodeRef$current = nodeRef.current) === null || _nodeRef$current === void 0 ? void 0 : _nodeRef$current.offsetWidth) !== null && _nodeRef$current$offs !== void 0 ? _nodeRef$current$offs : 300) * 0.76,
77
+ width: (offsetWidth !== null && offsetWidth !== void 0 ? offsetWidth : 200) * 0.76,
70
78
  height: 45,
71
79
  containerClassName: "avatar-skeleton"
72
80
  }), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
73
81
  enableAnimation: true,
74
82
  count: 4,
75
- width: ((_nodeRef$current$offs2 = nodeRef === null || nodeRef === void 0 ? void 0 : (_nodeRef$current2 = nodeRef.current) === null || _nodeRef$current2 === void 0 ? void 0 : _nodeRef$current2.offsetWidth) !== null && _nodeRef$current$offs2 !== void 0 ? _nodeRef$current$offs2 : 300) * 0.76,
83
+ width: (offsetWidth !== null && offsetWidth !== void 0 ? offsetWidth : 200) * 0.76,
76
84
  height: 10,
77
85
  containerClassName: "avatar-skeleton"
78
86
  }))), !isLoading && !hover && children, !disableInfo && !isLoading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hover && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextContainer, {
package/dist/stories/components/TextField.js CHANGED
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.default = exports.TextField = void 0;
9
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
9
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
10
11
  var _react = _interopRequireWildcard(require("react"));
11
12
  var _TextFieldStyle = require("./TextField.style.js");
@@ -23,12 +24,15 @@ var _styles = require("@mui/material/styles");
23
24
  * SAG TextField
24
25
  */
25
26
  var TextField = function TextField(_ref) {
27
+ var _React$createElement;
26
28
  var _ref$width = _ref.width,
27
29
  width = _ref$width === void 0 ? "100%" : _ref$width,
28
30
  _ref$height = _ref.height,
29
- height = _ref$height === void 0 ? "100%" : _ref$height,
31
+ height = _ref$height === void 0 ? "49px" : _ref$height,
30
32
  label = _ref.label,
33
+ labelColor = _ref.labelColor,
31
34
  shape = _ref.shape,
35
+ size = _ref.size,
32
36
  _ref$placeHolder = _ref.placeHolder,
33
37
  placeHolder = _ref$placeHolder === void 0 ? "Type..." : _ref$placeHolder,
34
38
  _ref$passwordField = _ref.passwordField,
@@ -88,7 +92,6 @@ var TextField = function TextField(_ref) {
88
92
  // round
89
93
  return {
90
94
  "& .MuiOutlinedInput-root": {
91
- //m: 1,
92
95
  width: {
93
96
  width: width
94
97
  },
@@ -97,6 +100,7 @@ var TextField = function TextField(_ref) {
97
100
  },
98
101
  paddingTop: 0,
99
102
  marginTop: 0,
103
+ borderColor: "green",
100
104
  borderRadius: "12px",
101
105
  legend: {
102
106
  marginLeft: "6px"
@@ -107,13 +111,16 @@ var TextField = function TextField(_ref) {
107
111
  borderRadius: "12px"
108
112
  },
109
113
  "& .MuiInputLabel-outlined": {
110
- paddingLeft: "10px"
114
+ paddingLeft: "10px",
115
+ color: labelColor,
116
+ paddingTop: "4px"
111
117
  },
112
118
  "& .MuiInputLabel-shrink": {
113
119
  marginLeft: "1px",
114
120
  paddingLeft: "4px",
115
121
  paddingRight: 0,
116
- background: "white"
122
+ background: "white",
123
+ paddingTop: 0
117
124
  }
118
125
  };
119
126
  } else {
@@ -151,9 +158,10 @@ var TextField = function TextField(_ref) {
151
158
  key: resetDefaultValue,
152
159
  label: label,
153
160
  defaultValue: defaultValue,
154
- placeHolder: placeHolder,
161
+ placeholder: placeHolder,
155
162
  id: "outlined-start-adornment",
156
163
  sx: getTextFieldStyle(),
164
+ size: size,
157
165
  required: required,
158
166
  inputRef: inputRef !== null && inputRef !== void 0 ? inputRef : null,
159
167
  onKeyDown: function onKeyDown(event) {
@@ -169,9 +177,10 @@ var TextField = function TextField(_ref) {
169
177
  variant: "outlined"
170
178
  }, /*#__PURE__*/_react.default.createElement(_InputLabel.default, {
171
179
  htmlFor: "outlined-adornment-password"
172
- }, label), /*#__PURE__*/_react.default.createElement(_OutlinedInput.default, {
180
+ }, label), /*#__PURE__*/_react.default.createElement(_OutlinedInput.default, (_React$createElement = {
173
181
  id: "outlined-adornment-password",
174
182
  type: showPassword ? "text" : "password",
183
+ size: size,
175
184
  endAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
176
185
  position: "end"
177
186
  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
@@ -180,17 +189,15 @@ var TextField = function TextField(_ref) {
180
189
  onMouseDown: handleMouseDownPassword,
181
190
  edge: "end"
182
191
  }, showPassword ? /*#__PURE__*/_react.default.createElement(_Visibility.default, null) : /*#__PURE__*/_react.default.createElement(_VisibilityOff.default, null))),
183
- label: label,
184
- inputRef: inputRef !== null && inputRef !== void 0 ? inputRef : null,
185
- onKeyDown: function onKeyDown(event) {
186
- if (!isInputAllowed(event.key)) {
187
- event.preventDefault();
188
- }
189
- },
190
- onChange: function onChange(event) {
191
- onChangeHandler(event);
192
+ defaultValue: defaultValue,
193
+ label: label
194
+ }, (0, _defineProperty2.default)(_React$createElement, "defaultValue", defaultValue), (0, _defineProperty2.default)(_React$createElement, "inputRef", inputRef !== null && inputRef !== void 0 ? inputRef : null), (0, _defineProperty2.default)(_React$createElement, "onKeyDown", function onKeyDown(event) {
195
+ if (!isInputAllowed(event.key)) {
196
+ event.preventDefault();
192
197
  }
193
- }))))));
198
+ }), (0, _defineProperty2.default)(_React$createElement, "onChange", function onChange(event) {
199
+ onChangeHandler(event);
200
+ }), _React$createElement)))))));
194
201
  };
195
202
  exports.TextField = TextField;
196
203
  var _default = TextField;
package/dist/stories/components/TitleDescription.js CHANGED
@@ -147,7 +147,7 @@ var TitleDescription = function TitleDescription(_ref) {
147
147
  event: event
148
148
  });
149
149
  }
150
- }, "show more ..."))), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodsContainer, {
150
+ }, " ", " show more ..."))), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodsContainer, {
151
151
  id: "PeriodsContainer"
152
152
  }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.SubLineContainer, {
153
153
  id: "SubLineContainer"
@@ -157,23 +157,7 @@ var TitleDescription = function TitleDescription(_ref) {
157
157
  id: "PeriodLabel"
158
158
  }, "Event Dates: "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodValue, {
159
159
  id: "PeriodValue"
160
- }, data.eventDatesValue)), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.SubLineContainer, {
161
- id: "SubLineContainer"
162
- }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodLabel, {
163
- id: "PeriodLabel"
164
- }, "In Ad: "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodValue, {
165
- id: "PeriodValue"
166
- }, data.inAdValue)), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.SubLineContainer, {
167
- id: "SubLineContainer"
168
- }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodLabel, {
169
- id: "PeriodLabel"
170
- }, "On Display: "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodValue, {
171
- id: "PeriodValue"
172
- }, data.onDisplayValue1), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.FieldsDelimiter, {
173
- id: "FieldsDelimiter"
174
- }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodValue, {
175
- id: "PeriodValue"
176
- }, data.onDisplayValue2))))));
160
+ }, data.eventDatesValue))))));
177
161
  };
178
162
  exports.TitleDescription = TitleDescription;
179
163
  var _default = TitleDescription;
package/dist/stories/components/TitleDescription.style.js CHANGED
@@ -16,7 +16,7 @@ var MainContainer = _styledComponents.default.div(_templateObject || (_templateO
16
16
  return props.height;
17
17
  });
18
18
  exports.MainContainer = MainContainer;
19
- var PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n border-radius: 12px;\n background: #ffffff;\n padding: 1rem;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.4;\n white-space: pre-wrap;\n overflow: hidden;\n"])));
19
+ var PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n border-radius: 12px;\n background: #ffffff;\n padding: 1rem;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.4;\n white-space: pre-wrap;\n overflow: hidden;\n width: 100%;\n"])));
20
20
  exports.PanelContainer = PanelContainer;
21
21
  var EventNameAndViewCreativeContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n"])));
22
22
  exports.EventNameAndViewCreativeContainer = EventNameAndViewCreativeContainer;
@@ -34,19 +34,19 @@ var FilterValue = _styledComponents.default.p(_templateObject9 || (_templateObje
34
34
  exports.FilterValue = FilterValue;
35
35
  var FieldsDelimiter = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)([" \n color: #ccc;\n margin: 0;\n"])));
36
36
  exports.FieldsDelimiter = FieldsDelimiter;
37
- var Retailer = _styledComponents.default.p(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n color: #1b30aa;\n margin: 0;\n"])));
37
+ var Retailer = _styledComponents.default.p(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n color: #1b30aa;\n margin: 0;\n margin-inline-end: 5px;\n"])));
38
38
  exports.Retailer = Retailer;
39
39
  var Space = _styledComponents.default.p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0;\n"])));
40
40
  exports.Space = Space;
41
41
  var RetailerIconContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n"])));
42
42
  exports.RetailerIconContainer = RetailerIconContainer;
43
- var ObjectiesContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: space-between;\n"])));
43
+ var ObjectiesContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: space-between;\n width: 75%;\n"])));
44
44
  exports.ObjectiesContainer = ObjectiesContainer;
45
- var ObjectiesAndPeriodsContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n"])));
45
+ var ObjectiesAndPeriodsContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 100%;\n"])));
46
46
  exports.ObjectiesAndPeriodsContainer = ObjectiesAndPeriodsContainer;
47
47
  var ObjectivesTitle = _styledComponents.default.strong(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)([""])));
48
48
  exports.ObjectivesTitle = ObjectivesTitle;
49
- var ObjectivesDescription = _styledComponents.default.p(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0;\n"])));
49
+ var ObjectivesDescription = _styledComponents.default.p(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0; \n \n"])));
50
50
  exports.ObjectivesDescription = ObjectivesDescription;
51
51
  var ObjectivesShowMore = _styledComponents.default.a(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n color: #1b30aa;\n &:hover {\n cursor: pointer;\n }\n"])));
52
52
  exports.ObjectivesShowMore = ObjectivesShowMore;
@@ -54,7 +54,7 @@ var BottonsContainer = _styledComponents.default.div(_templateObject19 || (_temp
54
54
  exports.BottonsContainer = BottonsContainer;
55
55
  var DownloadButtonContainer = _styledComponents.default.div(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)([""])));
56
56
  exports.DownloadButtonContainer = DownloadButtonContainer;
57
- var PeriodsContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-wrap: wrap;\n align-content: flex-start;\n justify-content: flex-start;\n margin-left: 20px;\n width: 100%;\n"])));
57
+ var PeriodsContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-wrap: wrap;\n align-content: flex-start;\n justify-content: flex-start;\n margin-left: 40px;\n width: 25%;\n"])));
58
58
  exports.PeriodsContainer = PeriodsContainer;
59
59
  var SubLineContainer = _styledComponents.default.div(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 100%;\n"])));
60
60
  exports.SubLineContainer = SubLineContainer;
package/dist/stories/components/TotalDoughnutChart.js CHANGED
@@ -49,6 +49,16 @@ var TotalDoughnutChart = function TotalDoughnutChart(_ref) {
49
49
  var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
50
50
  return fontRoot;
51
51
  };
52
+ var CustomTooltip = function CustomTooltip(_ref2) {
53
+ var active = _ref2.active,
54
+ payload = _ref2.payload,
55
+ label = _ref2.label;
56
+ if (active && payload && payload.length) {
57
+ console.log(active, payload, label);
58
+ return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.TooltipLabel, null, "".concat(payload[0].value)));
59
+ }
60
+ return null;
61
+ };
52
62
  var onPieEnterHandler = function onPieEnterHandler() {};
53
63
  return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.ControlsContainer, {
54
64
  id: "ControlsContainer",
@@ -92,7 +102,9 @@ var TotalDoughnutChart = function TotalDoughnutChart(_ref) {
92
102
  key: "cell-".concat(index),
93
103
  fill: row.color
94
104
  });
95
- })), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendContainer, {
105
+ })), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
106
+ content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
107
+ }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendContainer, {
96
108
  id: "LegendContainer"
97
109
  }, legendData.map(function (row, index) {
98
110
  return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendControlsContainer, {
package/dist/stories/components/TotalDoughnutChart.style.js CHANGED
@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.TitleAndValueContainer = exports.Title = exports.LegendTitleAndFormatedValueContainer = exports.LegendTitle = exports.LegendFormattedValue = exports.LegendFormatedValueContainer = exports.LegendCurrencySign = exports.LegendControlsContainer = exports.LegendContainer = exports.LegendColorRectangle = exports.FormattedValue = exports.DoughnutChartAndLegendContainer = exports.DoughnutChart = exports.CurrencySignAndFormattedValueContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = void 0;
7
+ exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.LegendTitleAndFormatedValueContainer = exports.LegendTitle = exports.LegendFormattedValue = exports.LegendFormatedValueContainer = exports.LegendCurrencySign = exports.LegendControlsContainer = exports.LegendContainer = exports.LegendColorRectangle = exports.FormattedValue = exports.DoughnutChartAndLegendContainer = exports.DoughnutChart = exports.CurrencySignAndFormattedValueContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
11
11
  var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n font-family: \"Lato\", sans-serif;\n font-style: normal;\n font-size: ", ";\n color: ", ";\n width: ", ";\n height: ", ";\n //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n border-radius: 12px;\n align-content: center;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])), function (props) {
12
12
  return props.rootFont;
13
13
  }, function (props) {
@@ -20,35 +20,39 @@ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templ
20
20
  exports.ControlsContainer = ControlsContainer;
21
21
  var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n border-radius: 12px;\n width: 100%;\n height: 100%;\n background: #ffffff;\n align-items: center;\n flex-direction: column;\n justify-content: space-between;\n"])));
22
22
  exports.Controls = Controls;
23
- var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 90%;\n margin-top: 6%;\n"])));
23
+ var TooltipDiv = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 5px;\n background: #FFF;\n"])));
24
+ exports.TooltipDiv = TooltipDiv;
25
+ var TooltipLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\ncolor: #212121;\nfont-family: Lato;\nfont-size: 14px;\nfont-style: normal;\nfont-weight: 600;\nline-height: normal;\n"])));
26
+ exports.TooltipLabel = TooltipLabel;
27
+ var TitleAndValueContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 90%;\n margin-top: 6%;\n"])));
24
28
  exports.TitleAndValueContainer = TitleAndValueContainer;
25
- var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n font-weight: 600;\n font-size: 1rem;\n margin-bottom: 1rem;\n"])));
29
+ var Title = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n font-weight: 600;\n font-size: 1rem;\n margin-bottom: 1rem;\n"])));
26
30
  exports.Title = Title;
27
- var CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n"])));
31
+ var CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n"])));
28
32
  exports.CurrencySignAndFormattedValueContainer = CurrencySignAndFormattedValueContainer;
29
- var CurrencySign = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 1rem;\n"])));
33
+ var CurrencySign = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 1rem;\n"])));
30
34
  exports.CurrencySign = CurrencySign;
31
- var FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 2.22rem;\n"])));
35
+ var FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 2.22rem;\n"])));
32
36
  exports.FormattedValue = FormattedValue;
33
- var DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n width: 90%;\n height: 37%;\n margin-top: 1em; // 35px;\n margin-bottom: 1em; // 35px;\n"])));
37
+ var DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n width: 90%;\n height: 37%;\n margin-top: 1em; // 35px;\n margin-bottom: 1em; // 35px;\n"])));
34
38
  exports.DoughnutChartAndLegendContainer = DoughnutChartAndLegendContainer;
35
- var DoughnutChart = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n width: 34%;\n height: 100%;\n"])));
39
+ var DoughnutChart = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n width: 34%;\n height: 100%;\n"])));
36
40
  exports.DoughnutChart = DoughnutChart;
37
- var LegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 66%;\n padding-left: 10px;\n flex-direction: column;\n align-items: left;\n justify-content: space-between;\n"])));
41
+ var LegendContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 66%;\n padding-left: 10px;\n flex-direction: column;\n align-items: left;\n justify-content: space-between;\n"])));
38
42
  exports.LegendContainer = LegendContainer;
39
- var LegendControlsContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 50%;\n width: 100%;\n"])));
43
+ var LegendControlsContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 50%;\n width: 100%;\n"])));
40
44
  exports.LegendControlsContainer = LegendControlsContainer;
41
- var LegendTitleAndFormatedValueContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 100%;\n height: 100%;\n margin-left: 0.1rem;\n flex-direction: column;\n"])));
45
+ var LegendTitleAndFormatedValueContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 100%;\n height: 100%;\n margin-left: 0.1rem;\n flex-direction: column;\n"])));
42
46
  exports.LegendTitleAndFormatedValueContainer = LegendTitleAndFormatedValueContainer;
43
- var LegendFormatedValueContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 50%;\n"])));
47
+ var LegendFormatedValueContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 50%;\n"])));
44
48
  exports.LegendFormatedValueContainer = LegendFormatedValueContainer;
45
- var LegendColorRectangle = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n width: 0.8rem;\n height: 0.7rem;\n margin-right: 0.3rem;\n background: ", ";\n"])), function (props) {
49
+ var LegendColorRectangle = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n width: 0.8rem;\n height: 0.7rem;\n margin-right: 0.3rem;\n background: ", ";\n"])), function (props) {
46
50
  return props.color;
47
51
  });
48
52
  exports.LegendColorRectangle = LegendColorRectangle;
49
- var LegendTitle = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 0.8rem;\n width: 100%;\n height: 50%;\n"])));
53
+ var LegendTitle = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 0.8rem;\n width: 100%;\n height: 50%;\n"])));
50
54
  exports.LegendTitle = LegendTitle;
51
- var LegendCurrencySign = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 0.8rem;\n"])));
55
+ var LegendCurrencySign = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 0.8rem;\n"])));
52
56
  exports.LegendCurrencySign = LegendCurrencySign;
53
- var LegendFormattedValue = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 0.8rem;\n"])));
57
+ var LegendFormattedValue = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 0.8rem;\n"])));
54
58
  exports.LegendFormattedValue = LegendFormattedValue;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.142",
3
+ "version": "1.0.144",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
@@ -49,8 +49,10 @@
49
49
  "@mui/icons-material": "^5.11.16",
50
50
  "@mui/material": "^5.13.0",
51
51
  "@mui/styled-engine-sc": "^5.12.0",
52
+ "@mui/x-date-pickers": "^6.11.1",
52
53
  "babel-plugin-react-css-modules": "^5.2.6",
53
54
  "classnames": "^2.3.2",
55
+ "dayjs": "^1.11.9",
54
56
  "hoopy": "^0.1.4",
55
57
  "react-css-modules": "^4.7.11",
56
58
  "react-loading-skeleton": "^3.3.1",