sag_components 1.0.82 → 1.0.83

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 (7) hide show
  1. package/dist/stories/components/TotalBenchmarkAreachart.js +57 -29
  2. package/dist/stories/components/TotalBenchmarkAreachart.style.js +16 -32
  3. package/dist/stories/components/TotalBenchmarkArrows.js +72 -41
  4. package/dist/stories/components/TotalBenchmarkArrows.style.js +21 -39
  5. package/dist/stories/components/TotalBenchmarkBarchart.js +2 -2
  6. package/dist/stories/components/TotalBenchmarkBarchart.style.js +1 -1
  7. package/package.json +1 -1
package/dist/stories/components/TotalBenchmarkAreachart.js CHANGED
@@ -1,13 +1,15 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.default = exports.TotalBenchmarkAreachart = void 0;
8
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
9
11
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
10
- var _react = _interopRequireDefault(require("react"));
12
+ var _react = _interopRequireWildcard(require("react"));
11
13
  var _ArrowUpIcon = require("./icons/ArrowUpIcon");
12
14
  var _ArrowDownIcon = require("./icons/ArrowDownIcon");
13
15
  var _recharts = require("recharts");
@@ -25,9 +27,9 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
25
27
  benchmarkValue = _ref.benchmarkValue,
26
28
  areaChartData = _ref.areaChartData,
27
29
  _ref$width = _ref.width,
28
- width = _ref$width === void 0 ? 260 : _ref$width,
30
+ width = _ref$width === void 0 ? "250px" : _ref$width,
29
31
  _ref$height = _ref.height,
30
- height = _ref$height === void 0 ? 350 : _ref$height,
32
+ height = _ref$height === void 0 ? "280px" : _ref$height,
31
33
  _ref$textColor = _ref.textColor,
32
34
  textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
33
35
  _ref$areaChart1Color = _ref.areaChart1Color,
@@ -35,23 +37,56 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
35
37
  _ref$areaChart2Color = _ref.areaChart2Color,
36
38
  areaChart2Color = _ref$areaChart2Color === void 0 ? "#96B4FF" : _ref$areaChart2Color,
37
39
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
40
+ var DEFAULT_ROOT_FONT = 16;
41
+ var DEFAULT_COMPONENT_WIDTH = 250;
42
+ var DEFAULT_COMPONENT_HEIGHT = 280;
43
+ var _useState = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat("", "px")),
44
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
45
+ rootFont = _useState2[0],
46
+ setRootFont = _useState2[1];
47
+ var _useState3 = (0, _react.useState)(1),
48
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
49
+ heightFactor = _useState4[0],
50
+ setHeightFactor = _useState4[1];
51
+ var controlsContainerRef = (0, _react.useRef)();
52
+ (0, _react.useEffect)(function () {
53
+ var offsetWidth = controlsContainerRef.current.offsetWidth;
54
+ setRootFont(getRootFont(offsetWidth));
55
+ }, [width]);
56
+ (0, _react.useEffect)(function () {
57
+ var offsetHeight = controlsContainerRef.current.offsetHeight;
58
+ var factor = offsetHeight / DEFAULT_COMPONENT_HEIGHT;
59
+ setHeightFactor(factor);
60
+ }, [height]);
61
+ var getRootFont = function getRootFont(width) {
62
+ var relation = width.toString().replace("px", "").replace("%", "") / DEFAULT_COMPONENT_WIDTH;
63
+ var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
64
+ return fontRoot;
65
+ };
66
+ var getSizeFactor = function getSizeFactor() {
67
+ return rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT;
68
+ };
38
69
  var getArrowSign = function getArrowSign(arrowSign) {
39
70
  if (!arrowSign) {
40
71
  return "";
41
72
  }
42
73
  if (arrowSign == "up") {
43
- return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.DetailsRowArrow, {
44
- value: value
74
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.DetailsRowArrowContainer, {
75
+ id: "DetailsRowArrowContainer",
76
+ value: value,
77
+ height: 25 * getSizeFactor
45
78
  }, /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, {
46
- width: "25",
47
- height: "25"
79
+ width: 25 * getSizeFactor(),
80
+ height: 25 * getSizeFactor
48
81
  }));
49
82
  } else {
50
- return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.DetailsRowArrow, {
51
- value: value
83
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.DetailsRowArrowContainer, {
84
+ id: "DetailsRowArrowContainer",
85
+ value: value,
86
+ height: 25 * getSizeFactor
52
87
  }, /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, {
53
- width: "25",
54
- height: "25"
88
+ width: 25 * getSizeFactor(),
89
+ height: 25 * getSizeFactor()
55
90
  }));
56
91
  }
57
92
  };
@@ -59,40 +94,33 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
59
94
  id: "ControlsContainer",
60
95
  height: height,
61
96
  width: width,
62
- textColor: textColor
97
+ textColor: textColor,
98
+ ref: controlsContainerRef,
99
+ rootFont: rootFont
63
100
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.Controls, {
64
- id: "Controls",
65
- height: height,
66
- width: width
101
+ id: "Controls"
67
102
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.Title, {
68
- id: "Title",
69
- width: width
103
+ id: "Title"
70
104
  }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.ValueAndBenchmarkContainer, {
71
- id: "ValueAndBenchmarkContainer",
72
- height: height,
73
- width: width
105
+ id: "ValueAndBenchmarkContainer"
74
106
  }, getArrowSign(arrowSign), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.FormattedValue, {
75
- id: "FormattedValue",
76
- width: width
107
+ id: "FormattedValue"
77
108
  }, value, "%"), benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.BenchmarkContainer, {
78
- id: "BenchmarkContainer",
79
- width: width
109
+ id: "BenchmarkContainer"
80
110
  }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
81
111
  id: "Benchmark",
82
112
  totalValue: benchmarkTotalValue,
83
113
  currentValue: value,
84
114
  benchmarkValue: benchmarkValue,
85
- height: 12,
86
- width: 75,
115
+ height: 12 * getSizeFactor(),
116
+ width: 85 * getSizeFactor(),
87
117
  color: "#79DB95",
88
118
  linearGradientColor: "#C3EFD0",
89
119
  linearGradientUnderAvarageColor: "#FDB1B1",
90
120
  underAvarageColor: "#FD5959",
91
121
  backgroundColor: "#F2F2F2"
92
122
  })) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.AreaChartContainer, {
93
- id: "AreaChartContainer",
94
- height: height,
95
- width: width
123
+ id: "AreaChartContainer"
96
124
  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
97
125
  id: "ResponsiveContainer",
98
126
  width: "100%",
package/dist/stories/components/TotalBenchmarkAreachart.style.js CHANGED
@@ -4,51 +4,35 @@ 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.DetailsRowArrow = exports.ControlsContainer = exports.Controls = exports.BottomDetailsRowTitle = exports.BottomDetailsRowContainer = exports.BenchmarkContainer = exports.AreaChartContainer = void 0;
7
+ exports.ValueAndBenchmarkContainer = 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
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
11
- var MIN_HEIGHT = 230;
12
- var MIN_WIDTH = 250;
13
- var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n margin: 0px 0 0px;\n font-family: \"Lato\", sans-serif;\n font-style: normal;\n color: ", ";\n width: ", ";\n height: ", ";\n //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n border-radius: 12px;\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 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
+ return props.rootFont;
13
+ }, function (props) {
14
14
  return props.textColor;
15
15
  }, function (props) {
16
- return (props.width - MIN_WIDTH <= 0 ? MIN_WIDTH : props.width).toString().concat("", "px");
16
+ return props.width;
17
17
  }, function (props) {
18
- return (props.height - MIN_HEIGHT <= 0 ? MIN_HEIGHT : props.height).toString().concat("", "px");
18
+ return props.height;
19
19
  });
20
20
  exports.ControlsContainer = ControlsContainer;
21
- var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n border-radius: 12px;\n width: ", ";\n height: ", ";\n top: 20px;\n left: 20px;\n background: #ffffff;\n //border: 1px solid yellow;\n"])), function (props) {
22
- return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
23
- }, function (props) {
24
- return (props.height - MIN_HEIGHT <= 0 ? 200 : 200 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
25
- });
21
+ var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n border-radius: 12px;\n width: 90%;\n height: 90%;\n background: #ffffff;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n"])));
26
22
  exports.Controls = Controls;
27
- var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: ", ";\n height: 22px;\n left: 0px;\n top: 0px;\n font-weight: 600;\n font-size: 16px;\n line-height: 22px;\n //border: 1px solid red;\n"])), function (props) {
28
- return (props.width - MIN_WIDTH <= 0 ? 200 : 200 + (props.width - MIN_WIDTH)).toString().concat("", "px");
29
- });
23
+ var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n font-weight: 600;\n font-size: 1em;\n"])));
30
24
  exports.Title = Title;
31
- var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n display: inline-flex;\n width: ", ";\n height: ", ";\n left: 0px;\n top: 30px;\n //border: 1px solid green;\n"])), function (props) {
32
- return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
33
- }, function (props) {
34
- return (props.height - MIN_HEIGHT <= 0 ? 0 : 0 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
35
- });
25
+ var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n width: 14em;\n height: 20%;\n"])));
36
26
  exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
37
- var DetailsRowArrow = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([" \n margin-left: 0px;\n margin-top: 12px; \n margin-right: 2px;\n height: 25px; \n font-size: 12px;\n line-height: 14px; \n //border: 1px solid red;\n"])));
38
- exports.DetailsRowArrow = DetailsRowArrow;
39
- var FormattedValue = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n //position: absolute;\n margin-left: 2px;\n width: ", ";\n height: 48px;\n left: 0px;\n top: 40px;\n font-weight: 500;\n font-size: 40px;\n line-height: 48px;\n //border: 1px solid red;\n"])), function (props) {
40
- return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
41
- });
27
+ var DetailsRowArrowContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([" \n display: flex;\n width: 1.2em; \n align-items: flex-end;\n"])));
28
+ exports.DetailsRowArrowContainer = DetailsRowArrowContainer;
29
+ var FormattedValue = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.1em;\n font-weight: 500;\n font-size: 2.2em; \n"])));
42
30
  exports.FormattedValue = FormattedValue;
43
- var BenchmarkContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n //position: absolute;\n margin-left: 10px;\n margin-top: 26px;\n width: 100px;\n height: 12px;\n left: ", ";\n //top: 24px;\n //border: 1px solid red;\n"])), function (props) {
44
- return (props.width - MIN_WIDTH <= 0 ? 115 : 115 + (props.width - MIN_WIDTH)).toString().concat("", "px");
45
- });
31
+ var BenchmarkContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 0.7em;\n width: 5.35em;\n"])));
46
32
  exports.BenchmarkContainer = BenchmarkContainer;
47
- var AreaChartContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n // display: inline-flex;\n //width: 240 px;\n margin-left: -20px;\n margin-top: 0px; \n margin-right: -10px;\n height: ", ";\n left: 0px;\n top: 100px;\n //border: 1px solid green;\n"])), function (props) {
48
- return (props.height - MIN_HEIGHT <= 0 ? 100 : 100 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
49
- });
33
+ var AreaChartContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n height: 50%;\n\n"])));
50
34
  exports.AreaChartContainer = AreaChartContainer;
51
- var BottomDetailsRowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n //width: 245px;\n height: 20px;\n left: 0px;\n top: 3px;\n \n //border: 1px solid brown;\n"])));
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 height: 20%;\n"])));
52
36
  exports.BottomDetailsRowContainer = BottomDetailsRowContainer;
53
- var BottomDetailsRowTitle = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n margin-top: 1px;\n margin-left: 1px; \n margin-right: 1px;\n height: 19px;\n width: 115px;\n left: 0px;\n top: 0px;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n //border: 1px solid red;\n"])));
37
+ var BottomDetailsRowTitle = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center; \n margin-top: 0.2em;\n width: 14em;\n font-weight: 400;\n font-size: 0.7em;\n"])));
54
38
  exports.BottomDetailsRowTitle = BottomDetailsRowTitle;
package/dist/stories/components/TotalBenchmarkArrows.js CHANGED
@@ -1,12 +1,14 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.default = exports.TotalBenchmarkArrows = void 0;
9
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
8
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
9
- var _react = _interopRequireDefault(require("react"));
11
+ var _react = _interopRequireWildcard(require("react"));
10
12
  var _ArrowUpIcon = require("./icons/ArrowUpIcon");
11
13
  var _ArrowDownIcon = require("./icons/ArrowDownIcon");
12
14
  var _CommonFunctions = require("./CommonFunctions");
@@ -25,79 +27,108 @@ var TotalBenchmarkArrows = function TotalBenchmarkArrows(_ref) {
25
27
  _ref$dotCut = _ref.dotCut,
26
28
  dotCut = _ref$dotCut === void 0 ? true : _ref$dotCut,
27
29
  _ref$width = _ref.width,
28
- width = _ref$width === void 0 ? 260 : _ref$width,
30
+ width = _ref$width === void 0 ? "250px" : _ref$width,
29
31
  _ref$height = _ref.height,
30
- height = _ref$height === void 0 ? 350 : _ref$height,
32
+ height = _ref$height === void 0 ? "280px" : _ref$height,
31
33
  _ref$textColor = _ref.textColor,
32
34
  textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
33
35
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
34
- var getArrowSign = function getArrowSign(value) {
35
- if (!value) {
36
+ var DEFAULT_ROOT_FONT = 16;
37
+ var DEFAULT_COMPONENT_WIDTH = 250;
38
+ var DEFAULT_COMPONENT_HEIGHT = 280;
39
+ var _useState = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat("", "px")),
40
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
41
+ rootFont = _useState2[0],
42
+ setRootFont = _useState2[1];
43
+ var _useState3 = (0, _react.useState)(1),
44
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
45
+ heightFactor = _useState4[0],
46
+ setHeightFactor = _useState4[1];
47
+ var controlsContainerRef = (0, _react.useRef)();
48
+ (0, _react.useEffect)(function () {
49
+ var offsetWidth = controlsContainerRef.current.offsetWidth;
50
+ setRootFont(getRootFont(offsetWidth));
51
+ }, [width]);
52
+ (0, _react.useEffect)(function () {
53
+ var offsetHeight = controlsContainerRef.current.offsetHeight;
54
+ var factor = offsetHeight / DEFAULT_COMPONENT_HEIGHT;
55
+ setHeightFactor(factor);
56
+ }, [height]);
57
+ var getRootFont = function getRootFont(width) {
58
+ var relation = width.toString().replace("px", "").replace("%", "") / DEFAULT_COMPONENT_WIDTH;
59
+ var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
60
+ return fontRoot;
61
+ };
62
+ var getSizeFactor = function getSizeFactor() {
63
+ return rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT;
64
+ };
65
+ var getArrowSign = function getArrowSign(arrowSign) {
66
+ if (!arrowSign) {
36
67
  return "";
37
68
  }
38
- if (value >= 0) {
39
- return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowArrow, {
40
- value: value
41
- }, /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, null));
69
+ if (arrowSign == "up") {
70
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowArrowContainer, {
71
+ id: "DetailsRowArrowContainer",
72
+ value: value,
73
+ height: 12 * getSizeFactor
74
+ }, /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, {
75
+ width: 12 * getSizeFactor(),
76
+ height: 12 * getSizeFactor
77
+ }));
42
78
  } else {
43
- return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowArrow, {
44
- value: value
45
- }, /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, null));
79
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowArrowContainer, {
80
+ id: "DetailsRowArrowContainer",
81
+ value: value,
82
+ height: 12 * getSizeFactor
83
+ }, /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, {
84
+ width: 12 * getSizeFactor(),
85
+ height: 12 * getSizeFactor()
86
+ }));
46
87
  }
47
88
  };
48
89
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.ControlsContainer, {
49
90
  id: "ControlsContainer",
50
91
  height: height,
51
92
  width: width,
52
- textColor: textColor
93
+ textColor: textColor,
94
+ ref: controlsContainerRef,
95
+ rootFont: rootFont
53
96
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.Controls, {
54
- id: "Controls",
55
- height: height,
56
- width: width
97
+ id: "Controls"
57
98
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.Title, {
58
- id: "Title",
59
- width: width
60
- }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.FormattedValue, {
61
- id: "FormattedValue",
62
- width: width
99
+ id: "Title"
100
+ }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.ValueAndBenchmarkContainer, {
101
+ id: "ValueAndBenchmarkContainer"
102
+ }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.FormattedValue, {
103
+ id: "FormattedValue"
63
104
  }, dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ""), benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.BenchmarkContainer, {
64
- id: "BenchmarkContainer",
65
- width: width
105
+ id: "BenchmarkContainer"
66
106
  }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
67
107
  totalValue: benchmarkTotalValue,
68
108
  currentValue: value,
69
109
  benchmarkValue: benchmarkValue,
70
- height: 12,
71
- width: 75,
110
+ height: 12 * getSizeFactor(),
111
+ width: 85 * getSizeFactor(),
72
112
  color: "#79DB95",
73
113
  linearGradientColor: "#C3EFD0",
74
114
  linearGradientUnderAvarageColor: "#FDB1B1",
75
115
  underAvarageColor: "#FD5959",
76
116
  backgroundColor: "#F2F2F2"
77
- })) : "", /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsContainer, {
78
- id: "DetailsContainer",
79
- height: height,
80
- width: width
117
+ })) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsContainer, {
118
+ id: "DetailsContainer"
81
119
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsTitle, {
82
- id: "DetailsTitle",
83
- height: height,
84
- width: width
120
+ id: "DetailsTitle"
85
121
  }, detailsTitle), detailsData.map(function (item, index) {
86
122
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowContainer, {
87
- id: "DetailsRowContainer",
88
- height: height,
89
- width: width,
90
- index: index
123
+ id: "DetailsRowContainer"
91
124
  }, getArrowSign(item.value), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowFormattedValue, {
92
125
  id: "DetailsRowFormattedValue"
93
126
  }, item.value ? Math.abs(item.value) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowPercentSign, {
94
127
  id: "DetailsRowPercentSign"
95
- }, " % "), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowTitle, {
96
- id: "DetailsRowTitle",
97
- height: height,
98
- width: width
128
+ }, " ", "%", " "), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowTitle, {
129
+ id: "DetailsRowTitle"
99
130
  }, item.title));
100
- })), ";"));
131
+ }))));
101
132
  };
102
133
  exports.TotalBenchmarkArrows = TotalBenchmarkArrows;
103
134
  var _default = TotalBenchmarkArrows;
package/dist/stories/components/TotalBenchmarkArrows.style.js CHANGED
@@ -4,59 +4,41 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.Title = exports.FormattedValue = exports.DetailsTitle = exports.DetailsRowTitle = exports.DetailsRowPercentSign = exports.DetailsRowFormattedValue = exports.DetailsRowContainer = exports.DetailsRowArrow = exports.DetailsContainer = exports.ControlsContainer = exports.Controls = exports.BenchmarkContainer = void 0;
7
+ exports.ValueAndBenchmarkContainer = exports.Title = exports.FormattedValue = exports.DetailsTitle = exports.DetailsRowTitle = exports.DetailsRowPercentSign = exports.DetailsRowFormattedValue = exports.DetailsRowContainer = exports.DetailsRowArrowContainer = exports.DetailsContainer = exports.ControlsContainer = exports.Controls = exports.BenchmarkContainer = 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;
11
- var MIN_HEIGHT = 230;
12
- var MIN_WIDTH = 250;
13
- var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n margin: 0px 0 0px;\n font-family: \"Lato\", sans-serif;\n font-style: normal;\n color: ", ";\n width: ", ";\n height: ", ";\n //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n border-radius: 12px;\n //border: 1px solid red;\n"])), function (props) {
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
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
+ return props.rootFont;
13
+ }, function (props) {
14
14
  return props.textColor;
15
15
  }, function (props) {
16
- return (props.width - MIN_WIDTH <= 0 ? MIN_WIDTH : props.width).toString().concat("", "px");
16
+ return props.width;
17
17
  }, function (props) {
18
- return (props.height - MIN_HEIGHT <= 0 ? MIN_HEIGHT : props.height).toString().concat("", "px");
18
+ return props.height;
19
19
  });
20
20
  exports.ControlsContainer = ControlsContainer;
21
- var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n border-radius: 12px;\n width: ", ";\n height: ", ";\n top: 20px;\n left: 20px;\n background: #ffffff;\n //border: 1px solid yellow;\n"])), function (props) {
22
- return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
23
- }, function (props) {
24
- return (props.height - MIN_HEIGHT <= 0 ? 200 : 200 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
25
- });
21
+ var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n border-radius: 12px;\n width: 90%;\n height: 90%;\n background: #ffffff;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n"])));
26
22
  exports.Controls = Controls;
27
- var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: ", ";\n height: 22px;\n left: 0px;\n top: 0px;\n font-weight: 600;\n font-size: 16px;\n line-height: 22px;\n //border: 1px solid red;\n"])), function (props) {
28
- return (props.width - MIN_WIDTH <= 0 ? 230 : 230 + (props.width - MIN_WIDTH)).toString().concat("", "px");
29
- });
23
+ var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n font-weight: 600;\n font-size: 1em;\n"])));
30
24
  exports.Title = Title;
31
- var FormattedValue = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: ", ";\n height: 48px;\n left: 0px;\n top: 40px;\n font-weight: 500;\n font-size: 40px;\n line-height: 48px;\n //border: 1px solid red;\n"])), function (props) {
32
- return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
33
- });
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: 14em;\n height: 30%;\n"])));
26
+ exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
27
+ var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.1em;\n font-weight: 500;\n font-size: 2.2em;\n"])));
34
28
  exports.FormattedValue = FormattedValue;
35
- var BenchmarkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 75px;\n height: 12px;\n left: ", ";\n top: 66px;\n //border: 1px solid red;\n"])), function (props) {
36
- return (props.width - MIN_WIDTH <= 0 ? 140 : 140 + (props.width - MIN_WIDTH)).toString().concat("", "px");
37
- });
29
+ var BenchmarkContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 0.7em;\n width: 5.35em;\n"])));
38
30
  exports.BenchmarkContainer = BenchmarkContainer;
39
- var DetailsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: ", "; \n height: ", "; \n left: 0px;\n top: 120px;\n //border: 1px solid green;\n"])), function (props) {
40
- return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
41
- }, function (props) {
42
- return (props.height - MIN_HEIGHT <= 0 ? 80 : 80 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
43
- });
31
+ var DetailsContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n height: 50%;\n"])));
44
32
  exports.DetailsContainer = DetailsContainer;
45
- var DetailsTitle = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: ", ";\n height: 22px;\n left: 0px;\n top: 0px;\n font-weight: 600;\n font-size: 16px;\n line-height: 19px;\n //border: 1px solid red;\n"])), function (props) {
46
- return (props.width - MIN_WIDTH <= 0 ? 230 : 230 + (props.width - MIN_WIDTH)).toString().concat("", "px");
47
- });
33
+ var DetailsTitle = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n height: 25%;\n font-weight: 600;\n font-size: 1em;\n"])));
48
34
  exports.DetailsTitle = DetailsTitle;
49
- var DetailsRowContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n display: inline-flex;\n width: ", ";\n height: 35px;\n left: 0px;\n top: ", ";\n //border: 1px solid brown;\n"])), function (props) {
50
- return (props.width - MIN_WIDTH <= 0 ? 220 : 220 + (props.width - MIN_WIDTH)).toString().concat("", "px");
51
- }, function (props) {
52
- return (35 + 35 * props.index).toString().concat("", "px");
53
- });
35
+ var DetailsRowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n text-align: center;\n align-items: baseline;\n height: 25%;\n"])));
54
36
  exports.DetailsRowContainer = DetailsRowContainer;
55
- var DetailsRowArrow = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)([" \n margin-left: 0px;\n margin-top: 4px; \n height: 12px; \n font-size: 12px;\n line-height: 14px; \n //border: 1px solid red;\n"])));
56
- exports.DetailsRowArrow = DetailsRowArrow;
57
- var DetailsRowFormattedValue = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 5px;\n height: 19px;\n left: 0px;\n top: 0px;\n font-weight: 600;\n font-size: 16px;\n line-height: 19px;\n //border: 1px solid red;\n"])));
37
+ var DetailsRowArrowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 0.8em;\n align-items: flex-end;\n"])));
38
+ exports.DetailsRowArrowContainer = DetailsRowArrowContainer;
39
+ var DetailsRowFormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 0.3em;\n font-weight: 600;\n font-size: 0.88em;\n"])));
58
40
  exports.DetailsRowFormattedValue = DetailsRowFormattedValue;
59
- var DetailsRowPercentSign = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)([" \n margin-left: 5px;\n margin-top: 3px;\n margin-right: 10px;\n text-align: bottom;\n height: 16px;\n left: 32px;\n top: 5px;\n font-weight: 600;\n font-size: 12px;\n line-height: 14px;\n //border: 1px solid red;\n"])));
41
+ var DetailsRowPercentSign = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 0.3em;\n font-weight: 400;\n font-size: 0.88em;\n"])));
60
42
  exports.DetailsRowPercentSign = DetailsRowPercentSign;
61
- var DetailsRowTitle = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)([" \n height: 19px;\n left: 50px;\n top: 0px;\n font-weight: 400;\n font-size: 16px;\n line-height: 19px;\n //border: 1px solid red;\n"])));
43
+ var DetailsRowTitle = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 0.3em;\n font-weight: 400;\n font-size: 0.88em;\n"])));
62
44
  exports.DetailsRowTitle = DetailsRowTitle;
package/dist/stories/components/TotalBenchmarkBarchart.js CHANGED
@@ -101,8 +101,8 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
101
101
  totalValue: benchmarkTotalValue,
102
102
  currentValue: value,
103
103
  benchmarkValue: benchmarkValue,
104
- height: 15 * getSizeFactor(),
105
- width: 92 * getSizeFactor(),
104
+ height: 12 * getSizeFactor(),
105
+ width: 85 * getSizeFactor(),
106
106
  color: "#79DB95",
107
107
  linearGradientColor: "#C3EFD0",
108
108
  linearGradientUnderAvarageColor: "#FDB1B1",
package/dist/stories/components/TotalBenchmarkBarchart.style.js CHANGED
@@ -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 margin-left: 0.1em;\n font-weight: 500;\n font-size: 2.2em;\n"])));
32
32
  exports.FormattedValue = FormattedValue;
33
- var BenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.7em;\n width: 5.8em;\n"])));
33
+ var BenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.7em;\n width: 5.35em;\n"])));
34
34
  exports.BenchmarkContainer = BenchmarkContainer;
35
35
  var BarchartContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\n width: 14em;\n height: 50%;\n\n"])));
36
36
  exports.BarchartContainer = BarchartContainer;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.82",
3
+ "version": "1.0.83",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {