sag_components 1.0.132 → 1.0.136

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 (6) hide show
  1. package/dist/stories/components/SegmentedButton.js +1 -1
  2. package/dist/stories/components/TotalBenchmarkAreachart.js +3 -1
  3. package/dist/stories/components/TotalBenchmarkAreachart.style.js +12 -10
  4. package/dist/stories/components/TotalBenchmarkBarchart.js +26 -17
  5. package/dist/stories/components/TotalBenchmarkBarchart.style.js +1 -1
  6. package/package.json +1 -1
package/dist/stories/components/SegmentedButton.js CHANGED
@@ -44,7 +44,7 @@ var SegmentedButton = function SegmentedButton(_ref) {
44
44
  setActiveIndex = _useState2[1];
45
45
  var controlRef = (0, _react.useRef)();
46
46
  var componentReady = (0, _react.useRef)();
47
- var optionsRef = options.map(function (item, i) {
47
+ var optionsRef = options === null || options === void 0 ? void 0 : options.map(function (item, i) {
48
48
  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
49
49
  id: i,
50
50
  ref: (0, _react.useRef)()
package/dist/stories/components/TotalBenchmarkAreachart.js CHANGED
@@ -99,6 +99,8 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
99
99
  rootFont: rootFont
100
100
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.Controls, {
101
101
  id: "Controls"
102
+ }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.TitleAndValueContainer, {
103
+ id: "TitleAndValueContainer"
102
104
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.Title, {
103
105
  id: "Title"
104
106
  }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.ValueAndBenchmarkContainer, {
@@ -119,7 +121,7 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
119
121
  linearGradientUnderAvarageColor: "#FDB1B1",
120
122
  underAvarageColor: "#FD5959",
121
123
  backgroundColor: "#F2F2F2"
122
- })) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.AreaChartContainer, {
124
+ })) : "")), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.AreaChartContainer, {
123
125
  id: "AreaChartContainer"
124
126
  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
125
127
  id: "ResponsiveContainer",
package/dist/stories/components/TotalBenchmarkAreachart.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.ValueAndBenchmarkContainer = exports.Title = exports.FormattedValue = exports.DetailsRowArrowContainer = exports.ControlsContainer = exports.Controls = exports.BottomDetailsRowTitle = exports.BottomDetailsRowContainer = exports.BenchmarkContainer = exports.AreaChartContainer = void 0;
7
+ exports.ValueAndBenchmarkContainer = exports.TitleAndValueContainer = exports.Title = exports.FormattedValue = exports.DetailsRowArrowContainer = exports.ControlsContainer = exports.Controls = exports.BottomDetailsRowTitle = exports.BottomDetailsRowContainer = exports.BenchmarkContainer = exports.AreaChartContainer = 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;
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
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 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,19 +20,21 @@ 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 background: #ffffff;\n justify-content: center; \n flex-direction: column;\n flex-basis: 100%;\n padding: 0 16px;\n justify-content: space-between;\n"])));
22
22
  exports.Controls = Controls;
23
- var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([" \n font-weight: 600;\n font-size: 1rem; \n margin-left: 0.5rem;\n margin-top: 15px;\n"])));
23
+ var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n \n"])));
24
+ exports.TitleAndValueContainer = TitleAndValueContainer;
25
+ var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)([" \n font-weight: 600;\n font-size: 1rem; \n margin-left: 0.5rem;\n margin-top: 15px;\n"])));
24
26
  exports.Title = Title;
25
- var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n align-items: baseline; \n margin-left: 0.5rem;\n"])));
27
+ var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n align-items: baseline; \n margin-left: 0.5rem;\n"])));
26
28
  exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
27
- var DetailsRowArrowContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([" \n display: flex;\n width: 1.2rem; \n align-items: flex-end;\n"])));
29
+ var DetailsRowArrowContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n display: flex;\n width: 1.2rem; \n align-items: flex-end;\n"])));
28
30
  exports.DetailsRowArrowContainer = DetailsRowArrowContainer;
29
- var FormattedValue = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.1rem;\n font-weight: 500;\n font-size: 2.2rem; \n"])));
31
+ var FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.1rem;\n font-weight: 500;\n font-size: 2.2rem; \n"])));
30
32
  exports.FormattedValue = FormattedValue;
31
- var BenchmarkContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 0.7rem;\n /* width: 5.35rem; */\n"])));
33
+ var BenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 0.7rem;\n /* width: 5.35rem; */\n"])));
32
34
  exports.BenchmarkContainer = BenchmarkContainer;
33
- var AreaChartContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n width: 14rem;\n height: 50%;\n\n"])));
35
+ var AreaChartContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n width: 14rem;\n height: 70%;\n\n"])));
34
36
  exports.AreaChartContainer = AreaChartContainer;
35
- var BottomDetailsRowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-start;\n justify-content: center;\n text-align: center;\n"])));
37
+ var BottomDetailsRowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-start;\n justify-content: center;\n text-align: center;\n"])));
36
38
  exports.BottomDetailsRowContainer = BottomDetailsRowContainer;
37
- var BottomDetailsRowTitle = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 0.7rem;\n"])));
39
+ var BottomDetailsRowTitle = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 0.7rem;\n"])));
38
40
  exports.BottomDetailsRowTitle = BottomDetailsRowTitle;
package/dist/stories/components/TotalBenchmarkBarchart.js CHANGED
@@ -45,7 +45,29 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
45
45
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
46
46
  heightFactor = _useState4[0],
47
47
  setHeightFactor = _useState4[1];
48
+ var _useState5 = (0, _react.useState)([]),
49
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
50
+ formattedBarChartData = _useState6[0],
51
+ setFormattedBarChartData = _useState6[1];
48
52
  var controlsContainerRef = (0, _react.useRef)();
53
+ (0, _react.useEffect)(function () {
54
+ var tempFormattedBarChartData = [];
55
+ if (barChartData && barChartData.length === 2) {
56
+ tempFormattedBarChartData.push({
57
+ title1: barChartData[0].title,
58
+ value1: barChartData[0].value,
59
+ formattedValue1: currency ? (0, _CommonFunctions.getCurrencySign)(currencyType).toString().concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[0].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[0].value)) : "",
60
+ color1: barChartData[0].color ? barChartData[0].color : "#79DB95",
61
+ title2: barChartData[1].title,
62
+ value2: barChartData[1].value,
63
+ formattedValue2: currency ? (0, _CommonFunctions.getCurrencySign)(currencyType).toString().concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[1].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[1].value)) : "",
64
+ color2: barChartData[1].color ? barChartData[1].color : "#D4C0FF"
65
+ });
66
+ console.log("barChartData changed", barChartData);
67
+ setFormattedBarChartData(tempFormattedBarChartData);
68
+ console.log("tempFormattedBarChartData changed", tempFormattedBarChartData);
69
+ }
70
+ }, [barChartData]);
49
71
  (0, _react.useEffect)(function () {
50
72
  var offsetWidth = controlsContainerRef.current.offsetWidth;
51
73
  setRootFont(getRootFont(offsetWidth));
@@ -60,19 +82,6 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
60
82
  var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
61
83
  return fontRoot;
62
84
  };
63
- var formattedBarChartData = [];
64
- if (barChartData && barChartData.length === 2) {
65
- formattedBarChartData.push({
66
- title1: barChartData[0].title,
67
- value1: barChartData[0].value,
68
- formattedValue1: currency ? (0, _CommonFunctions.getCurrencySign)(currencyType).toString().concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[0].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[0].value)) : "",
69
- color1: barChartData[0].color ? barChartData[0].color : "#79DB95",
70
- title2: barChartData[1].title,
71
- value2: barChartData[1].value,
72
- formattedValue2: currency ? (0, _CommonFunctions.getCurrencySign)(currencyType).toString().concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[1].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[1].value)) : "",
73
- color2: barChartData[1].color ? barChartData[1].color : "#D4C0FF"
74
- });
75
- }
76
85
  var getSizeFactor = function getSizeFactor() {
77
86
  return rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT;
78
87
  };
@@ -89,7 +98,7 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
89
98
  id: "TitleAndValueContainer"
90
99
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.Title, {
91
100
  id: "Title"
92
- }, title)), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.ValueAndBenchmarkContainer, {
101
+ }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.ValueAndBenchmarkContainer, {
93
102
  id: "ValueAndBenchmarkContainer"
94
103
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.CurrencySign, {
95
104
  id: "CurrencySign"
@@ -108,11 +117,11 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
108
117
  linearGradientUnderAvarageColor: "#FDB1B1",
109
118
  underAvarageColor: "#FD5959",
110
119
  backgroundColor: "#F2F2F2"
111
- })) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BarchartContainer, {
120
+ })) : "")), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BarchartContainer, {
112
121
  id: "BarchartContainer"
113
- }, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
122
+ }, formattedBarChartData && formattedBarChartData.length === 1 && /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
114
123
  width: 224 * getSizeFactor(),
115
- height: 104 * heightFactor,
124
+ height: 170 * heightFactor,
116
125
  data: formattedBarChartData,
117
126
  margin: {
118
127
  top: 40 * heightFactor,
package/dist/stories/components/TotalBenchmarkBarchart.style.js CHANGED
@@ -24,7 +24,7 @@ var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (
24
24
  exports.TitleAndValueContainer = TitleAndValueContainer;
25
25
  var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 1rem; \n"])));
26
26
  exports.Title = Title;
27
- var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n align-items: baseline; \n\n"])));
27
+ var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: flex-start;\n align-items: baseline; \n\n"])));
28
28
  exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
29
29
  var CurrencySign = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n width: 0.8rem;\n font-weight: 500;\n font-size: 1rem;\n"])));
30
30
  exports.CurrencySign = CurrencySign;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.132",
3
+ "version": "1.0.136",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {