sag_components 1.0.134 → 1.0.137

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/SegmentedButton.js +1 -1
  2. package/dist/stories/components/TotalBenchmark.style.js +2 -2
  3. package/dist/stories/components/TotalBenchmarkAreachart.js +5 -3
  4. package/dist/stories/components/TotalBenchmarkAreachart.style.js +12 -10
  5. package/dist/stories/components/TotalBenchmarkArrows.style.js +1 -1
  6. package/dist/stories/components/TotalBenchmarkBarchart.js +5 -3
  7. package/dist/stories/components/TotalBenchmarkBarchart.style.js +3 -3
  8. package/dist/stories/components/TotalDoughnutChart.style.js +3 -3
  9. 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/TotalBenchmark.style.js CHANGED
@@ -20,11 +20,11 @@ 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: 45%;\n justify-content: center;\n /* align-items: center; */\n align-items: flex-start;\n background: #ffffff;\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: center; */\n align-items: flex-start;\n background: #ffffff;\n margin: 1rem 0;\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;
27
- var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 1rem;\n"])));
27
+ var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 1rem;\n margin-bottom: 1rem;\n"])));
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;
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",
@@ -130,9 +132,9 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
130
132
  data: areaChartData,
131
133
  margin: {
132
134
  top: 0,
133
- right: 18,
135
+ right: 12,
134
136
  bottom: 0,
135
- left: 18
137
+ left: 12
136
138
  }
137
139
  }, /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
138
140
  strokeDasharray: "3 3",
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: 1rem;\n margin-bottom: 1rem;\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: 51%;\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/TotalBenchmarkArrows.style.js CHANGED
@@ -20,7 +20,7 @@ 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: 16px ;\n"])));
22
22
  exports.Controls = Controls;
23
- var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 14rem;\n font-weight: 600;\n font-size: 1rem;\n // margin-top: 17%;\n"])));
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
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"])));
26
26
  exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
package/dist/stories/components/TotalBenchmarkBarchart.js CHANGED
@@ -63,7 +63,9 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
63
63
  formattedValue2: currency ? (0, _CommonFunctions.getCurrencySign)(currencyType).toString().concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[1].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[1].value)) : "",
64
64
  color2: barChartData[1].color ? barChartData[1].color : "#D4C0FF"
65
65
  });
66
+ console.log("barChartData changed", barChartData);
66
67
  setFormattedBarChartData(tempFormattedBarChartData);
68
+ console.log("tempFormattedBarChartData changed", tempFormattedBarChartData);
67
69
  }
68
70
  }, [barChartData]);
69
71
  (0, _react.useEffect)(function () {
@@ -96,7 +98,7 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
96
98
  id: "TitleAndValueContainer"
97
99
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.Title, {
98
100
  id: "Title"
99
- }, title)), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.ValueAndBenchmarkContainer, {
101
+ }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.ValueAndBenchmarkContainer, {
100
102
  id: "ValueAndBenchmarkContainer"
101
103
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.CurrencySign, {
102
104
  id: "CurrencySign"
@@ -115,11 +117,11 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
115
117
  linearGradientUnderAvarageColor: "#FDB1B1",
116
118
  underAvarageColor: "#FD5959",
117
119
  backgroundColor: "#F2F2F2"
118
- })) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BarchartContainer, {
120
+ })) : "")), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BarchartContainer, {
119
121
  id: "BarchartContainer"
120
122
  }, formattedBarChartData && formattedBarChartData.length === 1 && /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
121
123
  width: 224 * getSizeFactor(),
122
- height: 104 * heightFactor,
124
+ height: 150 * heightFactor,
123
125
  data: formattedBarChartData,
124
126
  margin: {
125
127
  top: 40 * heightFactor,
package/dist/stories/components/TotalBenchmarkBarchart.style.js CHANGED
@@ -22,11 +22,11 @@ var Controls = _styledComponents.default.div(_templateObject2 || (_templateObjec
22
22
  exports.Controls = Controls;
23
23
  var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n \n"])));
24
24
  exports.TitleAndValueContainer = TitleAndValueContainer;
25
- var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 1rem; \n"])));
25
+ var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 1rem; \n margin-bottom: 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
- var CurrencySign = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n width: 0.8rem;\n font-weight: 500;\n font-size: 1rem;\n"])));
29
+ var CurrencySign = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n font-weight: 500;\n font-size: 1rem;\n"])));
30
30
  exports.CurrencySign = CurrencySign;
31
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"])));
32
32
  exports.FormattedValue = FormattedValue;
package/dist/stories/components/TotalDoughnutChart.style.js CHANGED
@@ -20,9 +20,9 @@ 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: 5%;\n"])));
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"])));
24
24
  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"])));
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"])));
26
26
  exports.Title = Title;
27
27
  var CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n"])));
28
28
  exports.CurrencySignAndFormattedValueContainer = CurrencySignAndFormattedValueContainer;
@@ -30,7 +30,7 @@ var CurrencySign = _styledComponents.default.div(_templateObject6 || (_templateO
30
30
  exports.CurrencySign = CurrencySign;
31
31
  var FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 2.22rem;\n"])));
32
32
  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: 2.18em; // 35px;\n margin-bottom: 2.18em; // 35px;\n"])));
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"])));
34
34
  exports.DoughnutChartAndLegendContainer = DoughnutChartAndLegendContainer;
35
35
  var DoughnutChart = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n width: 34%;\n height: 100%;\n"])));
36
36
  exports.DoughnutChart = DoughnutChart;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.134",
3
+ "version": "1.0.137",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {