sag_components 1.0.207 → 1.0.209

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 (15) hide show
  1. package/dist/stories/components/Benchmark.js +5 -0
  2. package/dist/stories/components/Benchmark.style.js +1 -1
  3. package/dist/stories/components/Datepicker.js +4 -1
  4. package/dist/stories/components/Dropdown.js +5 -1
  5. package/dist/stories/components/InfoIcon.js +38 -0
  6. package/dist/stories/components/TextField.js +9 -10
  7. package/dist/stories/components/TitleDescription.js +7 -14
  8. package/dist/stories/components/TitleDescription.style.js +13 -5
  9. package/dist/stories/components/TotalBenchmark.js +3 -6
  10. package/dist/stories/components/TotalBenchmark.style.js +3 -3
  11. package/dist/stories/components/TotalBenchmarkArrows.style.js +1 -1
  12. package/dist/stories/components/TotalBenchmarkBarchart.js +71 -30
  13. package/dist/stories/components/TotalDoughnutChart.js +2 -2
  14. package/dist/stories/components/TotalDoughnutChart.style.js +2 -2
  15. package/package.json +1 -1
package/dist/stories/components/Benchmark.js CHANGED
@@ -90,9 +90,11 @@ var Benchmark = function Benchmark(_ref) {
90
90
  return /*#__PURE__*/_react.default.createElement("h", null, tooltipLabel, tooltipLabel ? ": " : "", (_getFormattedValue = (0, _CommonFunctions.getFormattedValue)(benchmarkValue)) === null || _getFormattedValue === void 0 ? void 0 : _getFormattedValue.toString(), (_getFormattedUnits = (0, _CommonFunctions.getFormattedUnits)(benchmarkValue)) === null || _getFormattedUnits === void 0 ? void 0 : _getFormattedUnits.toString());
91
91
  };
92
92
  return /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.ControlsContainer, {
93
+ id: "ControlsContainer",
93
94
  height: height,
94
95
  width: width
95
96
  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
97
+ id: "Tooltip",
96
98
  content: getTooltipText(),
97
99
  direction: tooltipDirection
98
100
  }, /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.Controls, {
@@ -100,15 +102,18 @@ var Benchmark = function Benchmark(_ref) {
100
102
  height: height,
101
103
  width: width
102
104
  }, /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.BackgroundValueRectangle, {
105
+ id: "BackgroundValueRectangle",
103
106
  height: height,
104
107
  width: width,
105
108
  color: backgroundColor
106
109
  }), /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.CurrentValueRectangle, {
110
+ id: "CurrentValueRectangle",
107
111
  height: height,
108
112
  width: getCurrentValueRectangleWidth(),
109
113
  color: getUnderAvarageColor(),
110
114
  linearGradientColor: getUnderAvaragelinearGradientColor()
111
115
  }), /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.AvarageDelimiter, {
116
+ id: "AvarageDelimiter",
112
117
  height: height + 4,
113
118
  width: 0,
114
119
  top: -2,
package/dist/stories/components/Benchmark.style.js CHANGED
@@ -8,7 +8,7 @@ exports.CurrentValueRectangle = exports.ControlsContainer = exports.Controls = e
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
11
- var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n margin: 0px 0 0px;\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n width: ", ";\n height: ", ";\n //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n border-radius: 100px;\n //border: 1px solid red;\n"])), function (props) {
11
+ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n margin: 0px 0 0px;\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n width: ", ";\n height: ", ";\n //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n border-radius: 100px;\n //border: 1px solid red;\n align-items: center;\n"])), function (props) {
12
12
  return props.width.toString().concat("", "px");
13
13
  }, function (props) {
14
14
  return props.height.toString().concat("", "px");
package/dist/stories/components/Datepicker.js CHANGED
@@ -27,7 +27,9 @@ var Datepicker = function Datepicker(_ref) {
27
27
  shape = _ref.shape,
28
28
  _onChange = _ref.onChange,
29
29
  value = _ref.value,
30
- disableClearable = _ref.disableClearable;
30
+ disableClearable = _ref.disableClearable,
31
+ _ref$disabled = _ref.disabled,
32
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled;
31
33
  /**
32
34
  * SAG Datepicker
33
35
  */
@@ -101,6 +103,7 @@ var Datepicker = function Datepicker(_ref) {
101
103
  }, /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
102
104
  value: valueState,
103
105
  clearable: true,
106
+ disabled: disabled,
104
107
  onChange: function onChange(newValue) {
105
108
  setvalueState(newValue);
106
109
  console.log("newValue onChange", newValue === null || newValue === void 0 ? void 0 : newValue.format("YYYY-MM-DD").toString());
package/dist/stories/components/Dropdown.js CHANGED
@@ -61,7 +61,9 @@ var Dropdown = function Dropdown(_ref) {
61
61
  _ref$reset = _ref.reset,
62
62
  reset = _ref$reset === void 0 ? false : _ref$reset,
63
63
  _ref$disableClearable = _ref.disableClearable,
64
- disableClearable = _ref$disableClearable === void 0 ? false : _ref$disableClearable;
64
+ disableClearable = _ref$disableClearable === void 0 ? false : _ref$disableClearable,
65
+ _ref$disabled = _ref.disabled,
66
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled;
65
67
  /**
66
68
  * SAG Dropdown
67
69
  */
@@ -185,6 +187,7 @@ var Dropdown = function Dropdown(_ref) {
185
187
  onInputChange: function onInputChange(event, newInputValue) {
186
188
  onInputChangeHandler(event, newInputValue);
187
189
  },
190
+ disabled: disabled,
188
191
  disablePortal: true,
189
192
  disableClearable: disableClearable
190
193
  // value={defaultValue && !currentOption?.newValue ? defaultValue : currentOption?.newValue}
@@ -265,6 +268,7 @@ var Dropdown = function Dropdown(_ref) {
265
268
  limitTags: limitTagsOnMultiSelect,
266
269
  id: "checkboxes-tags",
267
270
  options: options,
271
+ disabled: disabled,
268
272
  disableCloseOnSelect: true,
269
273
  disableClearable: disableClearable,
270
274
  getOptionLabel: function getOptionLabel(option) {
package/dist/stories/components/InfoIcon.js ADDED
@@ -0,0 +1,38 @@
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.InfoIcon = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var InfoIcon = function InfoIcon(_ref) {
10
+ var clicked = _ref.clicked;
11
+ return /*#__PURE__*/_react.default.createElement("svg", {
12
+ xmlns: "http://www.w3.org/2000/svg",
13
+ viewBox: "0 0 24 24",
14
+ fill: "none",
15
+ stroke: clicked ? "white" : "black",
16
+ strokeWidth: "2",
17
+ strokeLinecap: "round",
18
+ strokeLinejoin: "round",
19
+ className: "feather feather-info"
20
+ }, /*#__PURE__*/_react.default.createElement("circle", {
21
+ cx: "12",
22
+ cy: "12",
23
+ r: "10"
24
+ }), /*#__PURE__*/_react.default.createElement("line", {
25
+ x1: "12",
26
+ y1: "16",
27
+ x2: "12",
28
+ y2: "12"
29
+ }), /*#__PURE__*/_react.default.createElement("line", {
30
+ x1: "12",
31
+ y1: "8",
32
+ x2: "12",
33
+ y2: "8"
34
+ }));
35
+ };
36
+ exports.InfoIcon = InfoIcon;
37
+ var _default = InfoIcon;
38
+ exports.default = _default;
package/dist/stories/components/TextField.js CHANGED
@@ -38,8 +38,6 @@ var TextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
38
38
  defaultValue = _ref.defaultValue,
39
39
  resetDefaultValue = _ref.resetDefaultValue,
40
40
  required = _ref.required,
41
- _ref$delayOnChange = _ref.delayOnChange,
42
- delayOnChange = _ref$delayOnChange === void 0 ? 1000 : _ref$delayOnChange,
43
41
  inputRef = _ref.inputRef,
44
42
  _ref$allowedInput = _ref.allowedInput,
45
43
  allowedInput = _ref$allowedInput === void 0 ? "all" : _ref$allowedInput,
@@ -57,14 +55,15 @@ var TextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
57
55
  return !show;
58
56
  });
59
57
  };
60
- (0, _react.useEffect)(function () {
61
- var delayDebounceFn = setTimeout(function () {
62
- onChange(currentInputValue);
63
- }, delayOnChange);
64
- return function () {
65
- return clearTimeout(delayDebounceFn);
66
- };
67
- }, [currentInputValue]);
58
+
59
+ // useEffect(() => {
60
+ // const delayDebounceFn = setTimeout(() => {
61
+ // onChange(currentInputValue);
62
+ // }, delayOnChange);
63
+
64
+ // return () => clearTimeout(delayDebounceFn);
65
+ // }, [currentInputValue]);
66
+
68
67
  var onChangeHandler = function onChangeHandler(event) {
69
68
  onChange(event);
70
69
  setCurrentInputValue({
package/dist/stories/components/TitleDescription.js CHANGED
@@ -16,22 +16,22 @@ var _HannafordIcon = require("./icons/HannafordIcon");
16
16
  var _StopAndShopIcon = require("./icons/StopAndShopIcon");
17
17
  var _TheGiantCompanyIcon = require("./icons/TheGiantCompanyIcon");
18
18
  var _TitleDescriptionStyle = require("./TitleDescription.style.js");
19
- var _excluded = ["showRetailerIcon", "data", "infoButtonOnClick", "objectivesShowMoreOnClick", "viewCreativeOnClick", "downloadButtonOnClick", "width", "height", "textColor"];
19
+ var _excluded = ["showRetailerIcon", "data", "viewCreativeOnClick", "width", "height", "textColor", "disabled"];
20
20
  /*TitleDescription*/
21
21
  var TitleDescription = function TitleDescription(_ref) {
22
+ var _data$objectivesDescr;
22
23
  var _ref$showRetailerIcon = _ref.showRetailerIcon,
23
24
  showRetailerIcon = _ref$showRetailerIcon === void 0 ? true : _ref$showRetailerIcon,
24
25
  data = _ref.data,
25
- infoButtonOnClick = _ref.infoButtonOnClick,
26
- objectivesShowMoreOnClick = _ref.objectivesShowMoreOnClick,
27
26
  viewCreativeOnClick = _ref.viewCreativeOnClick,
28
- downloadButtonOnClick = _ref.downloadButtonOnClick,
29
27
  _ref$width = _ref.width,
30
28
  width = _ref$width === void 0 ? "100%" : _ref$width,
31
29
  _ref$height = _ref.height,
32
30
  height = _ref$height === void 0 ? "100%" : _ref$height,
33
31
  _ref$textColor = _ref.textColor,
34
32
  textColor = _ref$textColor === void 0 ? "#212121" : _ref$textColor,
33
+ _ref$disabled = _ref.disabled,
34
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
35
35
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
36
36
  var getRetailerIcon = function getRetailerIcon(retailerName) {
37
37
  switch (retailerName) {
@@ -91,7 +91,8 @@ var TitleDescription = function TitleDescription(_ref) {
91
91
  id: "EventName"
92
92
  }, data.eventName, " "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.ViewCreativeContainer, {
93
93
  onClick: viewCreativeOnClick,
94
- id: "ViewCreativeContainer"
94
+ id: "ViewCreativeContainer",
95
+ disabled: disabled
95
96
  }, /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
96
97
  width: "12",
97
98
  height: "12"
@@ -127,15 +128,7 @@ var TitleDescription = function TitleDescription(_ref) {
127
128
  id: "ObjectivesDescription"
128
129
  }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.ObjectivesTitle, {
129
130
  id: "ObjectivesTitle"
130
- }, "Objectives:", " "), data.objectivesDescription, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.ObjectivesShowMore, {
131
- id: "ObjectivesShowMore",
132
- onClick: function onClick(event) {
133
- objectivesShowMoreOnClick({
134
- eventName: "objectivesShowMoreOnClick",
135
- event: event
136
- });
137
- }
138
- }, " ", " show more ..."))), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodsContainer, {
131
+ }, (data === null || data === void 0 ? void 0 : (_data$objectivesDescr = data.objectivesDescription) === null || _data$objectivesDescr === void 0 ? void 0 : _data$objectivesDescr.length) > 0 ? "Objectives: " : ""), data.objectivesDescription)), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodsContainer, {
139
132
  id: "PeriodsContainer"
140
133
  }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.SubLineContainer, {
141
134
  id: "SubLineContainer"
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 width: 100%;\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 1rem 1rem 3rem;\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;
@@ -24,7 +24,11 @@ var EventNameViewCreativeSubContainer = _styledComponents.default.div(_templateO
24
24
  exports.EventNameViewCreativeSubContainer = EventNameViewCreativeSubContainer;
25
25
  var EventName = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 700;\n font-size: 1.2rem;\n margin: 0;\n"])));
26
26
  exports.EventName = EventName;
27
- var ViewCreativeContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 12px;\n border: 1px solid #ccc;\n margin-left: 10px;\n padding: 3px 10px;\n &:hover {\n cursor: pointer;\n }\n"])));
27
+ var ViewCreativeContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 12px;\n border: 1px solid #ccc;\n margin-left: 10px;\n padding: 3px 10px;\n color: ", ";\n &:hover {\n cursor: ", ";\n }\n"])), function (props) {
28
+ return props.disabled ? "#B1B1B1" : "#212121";
29
+ }, function (props) {
30
+ return !props.disabled ? "pointer" : "default";
31
+ });
28
32
  exports.ViewCreativeContainer = ViewCreativeContainer;
29
33
  var ViewCreativeTextField = _styledComponents.default.h4(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin: 0 5px;\n"])));
30
34
  exports.ViewCreativeTextField = ViewCreativeTextField;
@@ -32,7 +36,7 @@ var FilterValuesContainer = _styledComponents.default.div(_templateObject8 || (_
32
36
  exports.FilterValuesContainer = FilterValuesContainer;
33
37
  var FilterValue = _styledComponents.default.p(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n color: #1b30aa;\n margin: 0;\n"])));
34
38
  exports.FilterValue = FilterValue;
35
- var FieldsDelimiter = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)([" \n color: #ccc;\n margin: 0;\n"])));
39
+ var FieldsDelimiter = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n color: #ccc;\n margin: 0;\n"])));
36
40
  exports.FieldsDelimiter = FieldsDelimiter;
37
41
  var Retailer = _styledComponents.default.p(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n color: #1b30aa;\n margin: 0;\n margin-inline-end: 5px;\n"])));
38
42
  exports.Retailer = Retailer;
@@ -46,9 +50,13 @@ var ObjectiesAndPeriodsContainer = _styledComponents.default.div(_templateObject
46
50
  exports.ObjectiesAndPeriodsContainer = ObjectiesAndPeriodsContainer;
47
51
  var ObjectivesTitle = _styledComponents.default.strong(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)([""])));
48
52
  exports.ObjectivesTitle = ObjectivesTitle;
49
- var ObjectivesDescription = _styledComponents.default.p(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0; \n \n"])));
53
+ var ObjectivesDescription = _styledComponents.default.p(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0;\n"])));
50
54
  exports.ObjectivesDescription = ObjectivesDescription;
51
- var ObjectivesShowMore = _styledComponents.default.a(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n color: #1b30aa;\n &:hover {\n cursor: pointer;\n }\n"])));
55
+ var ObjectivesShowMore = _styledComponents.default.a(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n &:hover {\n cursor: ", ";\n }\n"])), function (props) {
56
+ return props.disabled ? "#B1B1B1" : "#1b30aa";
57
+ }, function (props) {
58
+ return !props.disabled ? "pointer" : "default";
59
+ });
52
60
  exports.ObjectivesShowMore = ObjectivesShowMore;
53
61
  var BottonsContainer = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: flex-end;\n min-height: 1.5rem;\n"])));
54
62
  exports.BottonsContainer = BottonsContainer;
package/dist/stories/components/TotalBenchmark.js CHANGED
@@ -72,22 +72,19 @@ var TotalBenchmark = function TotalBenchmark(_ref) {
72
72
  }, dotCut ? (0, _CommonFunctions.getFormattedValue)(item.value) : (0, _CommonFunctions.getNumberWithCommas)(item.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(item.value) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.BenchmarkContainer, {
73
73
  id: "BenchmarkContainer",
74
74
  width: width
75
- }, item.totalValue && /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
75
+ }, item.totalValue ? /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
76
76
  id: "Benchmark",
77
77
  totalValue: item.totalValue,
78
78
  currentValue: item.value,
79
79
  benchmarkValue: item.benchmarkValue,
80
80
  height: 12 * getSizeFactor(),
81
- width: 85 * getSizeFactor()
82
- // height={14 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT)}
83
- // width={115 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT)}
84
- ,
81
+ width: 85 * getSizeFactor(),
85
82
  color: "#79DB95",
86
83
  linearGradientColor: "#C3EFD0",
87
84
  linearGradientUnderAvarageColor: "#FDB1B1",
88
85
  underAvarageColor: "#FD5959",
89
86
  backgroundColor: "#F2F2F2"
90
- })))));
87
+ }) : ""))));
91
88
  }) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
92
89
  noDataText: noDataText
93
90
  }));
package/dist/stories/components/TotalBenchmark.style.js CHANGED
@@ -20,7 +20,7 @@ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templ
20
20
  return props.height;
21
21
  });
22
22
  exports.ControlsContainer = ControlsContainer;
23
- var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n //display: flex;\n border-radius: 12px;\n /* width: 90%;\n height: 40%; */\n //justify-content: center; \n //align-items: flex-start;\n background: #ffffff;\n margin-bottom: 1rem;\n padding: 0px 0.8rem;\n"])));
23
+ var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n //display: flex;\n border-radius: 12px;\n /* width: 90%;\n height: 40%; */\n //justify-content: center; \n //align-items: flex-start;\n background: #ffffff;\n margin-bottom: 2rem;\n padding: 0px 0.8rem;\n"])));
24
24
  exports.Controls = Controls;
25
25
  var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n //display: flex;\n //flex-direction: column;\n width: 100%;\n"])));
26
26
  exports.TitleAndValueContainer = TitleAndValueContainer;
@@ -28,7 +28,7 @@ var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4
28
28
  exports.Title = Title;
29
29
  var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n font-weight: 500;\n font-size: 2.22rem;\n"])));
30
30
  exports.FormattedValue = FormattedValue;
31
- var BenchmarkContainerParent = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n"])));
31
+ var BenchmarkContainerParent = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex; \n align-items: baseline;\n width: 100%;\n height: 100%;\n margin: 0;\n\n"])));
32
32
  exports.BenchmarkContainerParent = BenchmarkContainerParent;
33
- var BenchmarkContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n margin-top: 0;\n margin-left: 1rem;\n height: 0.9rem;\n"])));
33
+ var BenchmarkContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n margin-top: 0;\n margin-left: 1rem;\n height: 0.9rem;\n //margin: 0;\n"])));
34
34
  exports.BenchmarkContainer = BenchmarkContainer;
package/dist/stories/components/TotalBenchmarkArrows.style.js CHANGED
@@ -22,7 +22,7 @@ var Controls = _styledComponents.default.div(_templateObject2 || (_templateObjec
22
22
  exports.Controls = Controls;
23
23
  var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n /* width: 14rem; */\n font-weight: 600;\n font-size: 1rem;\n margin-bottom: 1rem;\n"])));
24
24
  exports.Title = Title;
25
- var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: baseline;\n /* width: 14rem; */\n height: 50%;\n"])));
25
+ var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: baseline;\n /* width: 14rem; */\n height: 45%;\n"])));
26
26
  exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
27
27
  var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.1rem;\n font-weight: 500;\n font-size: 2.2rem;\n"])));
28
28
  exports.FormattedValue = FormattedValue;
package/dist/stories/components/TotalBenchmarkBarchart.js CHANGED
@@ -48,30 +48,50 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
48
48
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
49
49
  heightFactor = _useState4[0],
50
50
  setHeightFactor = _useState4[1];
51
- var _useState5 = (0, _react.useState)([]),
52
- _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
53
- formattedBarChartData = _useState6[0],
54
- setFormattedBarChartData = _useState6[1];
51
+
52
+ //const [formattedBarChartData, setFormattedBarChartData] = useState([]);
53
+
55
54
  var controlsContainerRef = (0, _react.useRef)();
56
- (0, _react.useEffect)(function () {
57
- var tempFormattedBarChartData = [];
58
- var currencySign = currency == true ? (0, _CommonFunctions.getCurrencySign)(currencyType).toString() : "";
59
- if (barChartData && barChartData.length === 2) {
60
- tempFormattedBarChartData.push({
61
- title1: barChartData[0].title,
62
- value1: barChartData[0].value,
63
- formattedValue1: currencySign.concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[0].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[0].value)),
64
- color1: barChartData[0].color ? barChartData[0].color : "#79DB95",
65
- title2: barChartData[1].title,
66
- value2: barChartData[1].value,
67
- formattedValue2: currencySign.concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[1].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[1].value)),
68
- color2: barChartData[1].color ? barChartData[1].color : "#D4C0FF"
69
- });
70
- console.log("barChartData changed", barChartData);
71
- setFormattedBarChartData(tempFormattedBarChartData);
72
- console.log("tempFormattedBarChartData changed", tempFormattedBarChartData);
73
- }
74
- }, [barChartData, currency, currencyType]);
55
+
56
+ // useEffect(() => {
57
+ // let tempFormattedBarChartData = [];
58
+
59
+ // const currencySign =
60
+ // currency == true ? getCurrencySign(currencyType).toString() : "";
61
+
62
+ // if (barChartData && barChartData.length === 2) {
63
+ // tempFormattedBarChartData.push({
64
+ // title1: barChartData[0].title,
65
+ // value1: barChartData[0].value,
66
+ // formattedValue1: currencySign.concat(
67
+ // "",
68
+ // getFormattedValue(barChartData[0].value),
69
+ // "",
70
+ // getFormattedUnits(barChartData[0].value)
71
+ // ),
72
+
73
+ // color1: barChartData[0].color ? barChartData[0].color : "#79DB95",
74
+
75
+ // title2: barChartData[1].title,
76
+ // value2: barChartData[1].value,
77
+ // formattedValue2: currencySign.concat(
78
+ // "",
79
+ // getFormattedValue(barChartData[1].value),
80
+ // "",
81
+ // getFormattedUnits(barChartData[1].value)
82
+ // ),
83
+ // color2: barChartData[1].color ? barChartData[1].color : "#D4C0FF",
84
+ // });
85
+
86
+ // console.log("barChartData changed", barChartData);
87
+ // setFormattedBarChartData(tempFormattedBarChartData);
88
+ // console.log(
89
+ // "tempFormattedBarChartData changed",
90
+ // tempFormattedBarChartData
91
+ // );
92
+ // }
93
+ // }, [barChartData, currency, currencyType]);
94
+
75
95
  (0, _react.useEffect)(function () {
76
96
  var offsetWidth = controlsContainerRef.current.offsetWidth;
77
97
  setRootFont(getRootFont(offsetWidth));
@@ -89,6 +109,27 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
89
109
  var getSizeFactor = function getSizeFactor() {
90
110
  return rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT;
91
111
  };
112
+ var getFormattedBarChartData = function getFormattedBarChartData() {
113
+ var tempFormattedBarChartData = [];
114
+ var currencySign = currency == true ? (0, _CommonFunctions.getCurrencySign)(currencyType).toString() : "";
115
+ if (barChartData && barChartData.length === 2) {
116
+ tempFormattedBarChartData.push({
117
+ title1: barChartData[0].title,
118
+ value1: barChartData[0].value,
119
+ formattedValue1: currencySign.concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[0].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[0].value)),
120
+ color1: barChartData[0].color ? barChartData[0].color : "#79DB95",
121
+ title2: barChartData[1].title,
122
+ value2: barChartData[1].value,
123
+ formattedValue2: currencySign.concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[1].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[1].value)),
124
+ color2: barChartData[1].color ? barChartData[1].color : "#D4C0FF"
125
+ });
126
+
127
+ //console.log("barChartData changed", barChartData);
128
+ //setFormattedBarChartData(tempFormattedBarChartData);
129
+ console.log("tempFormattedBarChartData changed", tempFormattedBarChartData);
130
+ return tempFormattedBarChartData;
131
+ }
132
+ };
92
133
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.ControlsContainer, {
93
134
  id: "ControlsContainer",
94
135
  height: height,
@@ -123,10 +164,10 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
123
164
  backgroundColor: "#F2F2F2"
124
165
  })) : "")), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BarchartContainer, {
125
166
  id: "BarchartContainer"
126
- }, formattedBarChartData && formattedBarChartData.length === 1 && /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
167
+ }, getFormattedBarChartData().length === 1 && /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
127
168
  width: 224 * getSizeFactor(),
128
169
  height: 150 * heightFactor,
129
- data: formattedBarChartData,
170
+ data: getFormattedBarChartData(),
130
171
  margin: {
131
172
  top: 40 * heightFactor,
132
173
  right: -25 * getSizeFactor(),
@@ -138,7 +179,7 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
138
179
  vertical: false
139
180
  }), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
140
181
  dataKey: "value1",
141
- fill: formattedBarChartData[0].color1,
182
+ fill: getFormattedBarChartData()[0].color1,
142
183
  name: "Actual",
143
184
  maxBarSize: 60 * getSizeFactor(),
144
185
  radius: [5, 5, 0, 0]
@@ -148,7 +189,7 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
148
189
  fill: textColor
149
190
  })), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
150
191
  dataKey: "value2",
151
- fill: formattedBarChartData[0].color2,
192
+ fill: getFormattedBarChartData()[0].color2,
152
193
  name: "Base Line",
153
194
  maxBarSize: 60 * getSizeFactor(),
154
195
  radius: [5, 5, 0, 0],
@@ -157,13 +198,13 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
157
198
  dataKey: "formattedValue2",
158
199
  position: "top",
159
200
  fill: textColor
160
- }))), formattedBarChartData && formattedBarChartData.length > 0 ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowContainer, {
201
+ }))), getFormattedBarChartData().length > 0 ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowContainer, {
161
202
  id: "BottomDetailsRowContainer"
162
203
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowTitle, {
163
204
  id: "BottomDetailsRowTitle1"
164
- }, formattedBarChartData[0].title1), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowTitle, {
205
+ }, getFormattedBarChartData()[0].title1), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowTitle, {
165
206
  id: "BottomDetailsRowTitle2"
166
- }, formattedBarChartData[0].title2)) : "")) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
207
+ }, getFormattedBarChartData()[0].title2)) : "")) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
167
208
  noDataText: noDataText
168
209
  }));
169
210
  };
package/dist/stories/components/TotalDoughnutChart.js CHANGED
@@ -97,8 +97,8 @@ var TotalDoughnutChart = function TotalDoughnutChart(_ref) {
97
97
  onMouseEnter: onPieEnterHandler
98
98
  }, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
99
99
  data: legendData,
100
- outerRadius: 35 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT),
101
- innerRadius: 24 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT),
100
+ outerRadius: 37 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT),
101
+ innerRadius: 26 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT),
102
102
  fill: "#8884d8",
103
103
  dataKey: "value"
104
104
  }, legendData.map(function (row, index) {
package/dist/stories/components/TotalDoughnutChart.style.js CHANGED
@@ -34,9 +34,9 @@ var CurrencySign = _styledComponents.default.div(_templateObject8 || (_templateO
34
34
  exports.CurrencySign = CurrencySign;
35
35
  var FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 2.22rem;\n"])));
36
36
  exports.FormattedValue = FormattedValue;
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"])));
37
+ var DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n width: 95%;\n height: 37%;\n margin-top: 1em; // 35px;\n margin-bottom: 1em; // 35px;\n"])));
38
38
  exports.DoughnutChartAndLegendContainer = DoughnutChartAndLegendContainer;
39
- var DoughnutChart = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n width: 34%;\n height: 100%;\n min-width: 96px;\n min-height: 96px;\n"])));
39
+ var DoughnutChart = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n width: 34%;\n height: 100%;\n min-width: 105px;\n min-height: 105px;\n"])));
40
40
  exports.DoughnutChart = DoughnutChart;
41
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"])));
42
42
  exports.LegendContainer = LegendContainer;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.207",
3
+ "version": "1.0.209",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {