sag_components 1.0.80 → 1.0.82

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/TotalBenchmark.js +29 -9
  2. package/dist/stories/components/TotalBenchmark.style.js +8 -6
  3. package/dist/stories/components/TotalBenchmarkBarchart.js +61 -44
  4. package/dist/stories/components/TotalBenchmarkBarchart.style.js +18 -32
  5. package/dist/stories/components/TotalDoughnutChart.js +26 -6
  6. package/dist/stories/components/TotalDoughnutChart.style.js +18 -16
  7. package/package.json +1 -1
package/dist/stories/components/TotalBenchmark.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.TotalBenchmark = 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 _CommonFunctions = require("./CommonFunctions");
11
13
  var _Benchmark = require("./Benchmark");
12
14
  var _TotalBenchmarkStyle = require("./TotalBenchmark.style.js");
@@ -23,11 +25,29 @@ var TotalBenchmark = function TotalBenchmark(_ref) {
23
25
  _ref$textColor = _ref.textColor,
24
26
  textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
25
27
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
28
+ var DEFAULT_ROOT_FONT = 16;
29
+ var DEFAULT_COMPONENT_WIDTH = 250;
30
+ var _useState = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat("", "px")),
31
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
32
+ rootFont = _useState2[0],
33
+ setRootFont = _useState2[1];
34
+ var controlsContainerRef = (0, _react.useRef)();
35
+ (0, _react.useEffect)(function () {
36
+ var offsetWidth = controlsContainerRef.current.offsetWidth;
37
+ setRootFont(getRootFont(offsetWidth));
38
+ }, [width]);
39
+ var getRootFont = function getRootFont(width) {
40
+ var relation = width.toString().replace("px", "").replace("%", "") / DEFAULT_COMPONENT_WIDTH;
41
+ var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
42
+ return fontRoot;
43
+ };
26
44
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.ControlsContainer, {
27
45
  id: "ControlsContainer",
28
46
  height: height,
29
47
  width: width,
30
- textColor: textColor
48
+ textColor: textColor,
49
+ ref: controlsContainerRef,
50
+ rootFont: rootFont
31
51
  }, data.map(function (item, index) {
32
52
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.Controls, {
33
53
  id: "Controls",
@@ -38,12 +58,12 @@ var TotalBenchmark = function TotalBenchmark(_ref) {
38
58
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.Title, {
39
59
  id: "Title",
40
60
  width: width
41
- }, item.title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.FormattedValue, {
61
+ }, item.title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.BenchmarkContainerParent, {
62
+ id: "BenchmarkContainerParent"
63
+ }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.FormattedValue, {
42
64
  id: "FormattedValue",
43
65
  width: width
44
- }, dotCut ? (0, _CommonFunctions.getFormattedValue)(item.value) : (0, _CommonFunctions.getNumberWithCommas)(item.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(item.value) : "")), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.BenchmarkContainerParent, {
45
- id: "BenchmarkContainerParent"
46
- }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.BenchmarkContainer, {
66
+ }, dotCut ? (0, _CommonFunctions.getFormattedValue)(item.value) : (0, _CommonFunctions.getNumberWithCommas)(item.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(item.value) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.BenchmarkContainer, {
47
67
  id: "BenchmarkContainer",
48
68
  width: width
49
69
  }, item.totalValue && /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
@@ -51,14 +71,14 @@ var TotalBenchmark = function TotalBenchmark(_ref) {
51
71
  totalValue: item.totalValue,
52
72
  currentValue: item.value,
53
73
  benchmarkValue: item.benchmarkValue,
54
- height: 6,
55
- width: 50,
74
+ height: 14 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT),
75
+ width: 115 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT),
56
76
  color: "#79DB95",
57
77
  linearGradientColor: "#C3EFD0",
58
78
  linearGradientUnderAvarageColor: "#FDB1B1",
59
79
  underAvarageColor: "#FD5959",
60
80
  backgroundColor: "#F2F2F2"
61
- }))));
81
+ })))));
62
82
  }));
63
83
  };
64
84
  exports.TotalBenchmark = TotalBenchmark;
package/dist/stories/components/TotalBenchmark.style.js CHANGED
@@ -10,7 +10,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
11
11
  var MIN_HEIGHT = 300;
12
12
  var MIN_WIDTH = 260;
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 align-content: center;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n //border: 1px solid red;\n"])), function (props) {
13
+ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n font-family: \"Lato\", sans-serif;\n font-style: normal;\n font-size: ", ";\n color: ", ";\n width: ", ";\n height: ", ";\n //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n border-radius: 12px;\n align-content: center;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])), function (props) {
14
+ return props.rootFont;
15
+ }, function (props) {
14
16
  return props.textColor;
15
17
  }, function (props) {
16
18
  return props.width;
@@ -20,13 +22,13 @@ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templ
20
22
  exports.ControlsContainer = ControlsContainer;
21
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 background: #ffffff;\n"])));
22
24
  exports.Controls = Controls;
23
- var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 50%;\n"])));
25
+ var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 100%;\n"])));
24
26
  exports.TitleAndValueContainer = TitleAndValueContainer;
25
- var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 14px;\n"])));
27
+ var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 1em;\n"])));
26
28
  exports.Title = Title;
27
- var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 48px;\n font-weight: 500;\n font-size:2.4vw;\n //border: 1px solid red;\n"])));
29
+ var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n font-weight: 500;\n font-size: 2.22em;\n"])));
28
30
  exports.FormattedValue = FormattedValue;
29
- var BenchmarkContainerParent = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n width: 30%;\n height: 100%;\n"])));
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"])));
30
32
  exports.BenchmarkContainerParent = BenchmarkContainerParent;
31
- var BenchmarkContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n width: 50%;\n height: 12px;\n"])));
33
+ var BenchmarkContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n margin-top: 0.7em;\n height: 0.9em;\n"])));
32
34
  exports.BenchmarkContainer = BenchmarkContainer;
package/dist/stories/components/TotalBenchmarkBarchart.js CHANGED
@@ -1,13 +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.TotalBenchmarkBarchart = void 0;
8
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
9
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
9
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
10
- var _react = _interopRequireDefault(require("react"));
11
+ var _react = _interopRequireWildcard(require("react"));
11
12
  var _recharts = require("recharts");
12
13
  var _CommonFunctions = require("./CommonFunctions");
13
14
  var _Benchmark = require("./Benchmark");
@@ -27,12 +28,38 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
27
28
  _ref$dotCut = _ref.dotCut,
28
29
  dotCut = _ref$dotCut === void 0 ? true : _ref$dotCut,
29
30
  _ref$width = _ref.width,
30
- width = _ref$width === void 0 ? 260 : _ref$width,
31
+ width = _ref$width === void 0 ? "250px" : _ref$width,
31
32
  _ref$height = _ref.height,
32
- height = _ref$height === void 0 ? 350 : _ref$height,
33
+ height = _ref$height === void 0 ? "280px" : _ref$height,
33
34
  _ref$textColor = _ref.textColor,
34
35
  textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
35
36
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
37
+ var DEFAULT_ROOT_FONT = 16;
38
+ var DEFAULT_COMPONENT_WIDTH = 250;
39
+ var DEFAULT_COMPONENT_HEIGHT = 280;
40
+ var _useState = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat("", "px")),
41
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
42
+ rootFont = _useState2[0],
43
+ setRootFont = _useState2[1];
44
+ var _useState3 = (0, _react.useState)(1),
45
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
46
+ heightFactor = _useState4[0],
47
+ setHeightFactor = _useState4[1];
48
+ var controlsContainerRef = (0, _react.useRef)();
49
+ (0, _react.useEffect)(function () {
50
+ var offsetWidth = controlsContainerRef.current.offsetWidth;
51
+ setRootFont(getRootFont(offsetWidth));
52
+ }, [width]);
53
+ (0, _react.useEffect)(function () {
54
+ var offsetHeight = controlsContainerRef.current.offsetHeight;
55
+ var factor = offsetHeight / DEFAULT_COMPONENT_HEIGHT;
56
+ setHeightFactor(factor);
57
+ }, [height]);
58
+ var getRootFont = function getRootFont(width) {
59
+ var relation = width.toString().replace("px", "").replace("%", "") / DEFAULT_COMPONENT_WIDTH;
60
+ var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
61
+ return fontRoot;
62
+ };
36
63
  var formattedBarChartData = [];
37
64
  if (barChartData && barChartData.length === 2) {
38
65
  formattedBarChartData.push({
@@ -46,54 +73,52 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
46
73
  color2: barChartData[1].color ? barChartData[1].color : "#D4C0FF"
47
74
  });
48
75
  }
76
+ var getSizeFactor = function getSizeFactor() {
77
+ return rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT;
78
+ };
49
79
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.ControlsContainer, {
50
80
  id: "ControlsContainer",
51
81
  height: height,
52
82
  width: width,
53
- textColor: textColor
83
+ textColor: textColor,
84
+ ref: controlsContainerRef,
85
+ rootFont: rootFont
54
86
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.Controls, {
55
- id: "Controls",
56
- height: height,
57
- width: width
87
+ id: "Controls"
88
+ }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.TitleAndValueContainer, {
89
+ id: "TitleAndValueContainer"
58
90
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.Title, {
59
- id: "Title",
60
- width: width
61
- }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.ValueAndBenchmarkContainer, {
62
- id: "ValueAndBenchmarkContainer",
63
- height: height,
64
- width: width
91
+ id: "Title"
92
+ }, title)), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.ValueAndBenchmarkContainer, {
93
+ id: "ValueAndBenchmarkContainer"
65
94
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.CurrencySign, {
66
95
  id: "CurrencySign"
67
96
  }, currency ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.FormattedValue, {
68
- id: "FormattedValue",
69
- width: width
97
+ id: "FormattedValue"
70
98
  }, dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ""), benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BenchmarkContainer, {
71
- id: "BenchmarkContainer",
72
- width: width
99
+ id: "BenchmarkContainer"
73
100
  }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
74
101
  totalValue: benchmarkTotalValue,
75
102
  currentValue: value,
76
103
  benchmarkValue: benchmarkValue,
77
- height: 12,
78
- width: 75,
104
+ height: 15 * getSizeFactor(),
105
+ width: 92 * getSizeFactor(),
79
106
  color: "#79DB95",
80
107
  linearGradientColor: "#C3EFD0",
81
108
  linearGradientUnderAvarageColor: "#FDB1B1",
82
109
  underAvarageColor: "#FD5959",
83
110
  backgroundColor: "#F2F2F2"
84
111
  })) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BarchartContainer, {
85
- id: "BarchartContainer",
86
- height: height,
87
- width: width
112
+ id: "BarchartContainer"
88
113
  }, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
89
- width: 240,
90
- height: 120,
114
+ width: 224 * getSizeFactor(),
115
+ height: 126 * heightFactor,
91
116
  data: formattedBarChartData,
92
117
  margin: {
93
- top: 20,
94
- right: -20,
118
+ top: 40 * heightFactor,
119
+ right: -25 * getSizeFactor(),
95
120
  bottom: 0,
96
- left: -20
121
+ left: -25 * getSizeFactor()
97
122
  }
98
123
  }, /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
99
124
  strokeDasharray: "3 3",
@@ -102,38 +127,30 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
102
127
  dataKey: "value1",
103
128
  fill: formattedBarChartData[0].color1,
104
129
  name: "Actual",
105
- maxBarSize: 60,
130
+ maxBarSize: 60 * getSizeFactor(),
106
131
  radius: [5, 5, 0, 0]
107
132
  }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
108
133
  dataKey: "formattedValue1",
109
134
  position: "top",
110
- fill: textColor,
111
- style: (0, _defineProperty2.default)({}, "font-size", "16px")
135
+ fill: textColor
112
136
  })), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
113
137
  dataKey: "value2",
114
138
  fill: formattedBarChartData[0].color2,
115
139
  name: "Base Line",
116
- maxBarSize: 60,
140
+ maxBarSize: 60 * getSizeFactor(),
117
141
  radius: [5, 5, 0, 0],
118
142
  label: "aaa"
119
143
  }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
120
144
  dataKey: "formattedValue2",
121
145
  position: "top",
122
- fill: textColor,
123
- style: (0, _defineProperty2.default)({}, "font-size", "16px")
146
+ fill: textColor
124
147
  }))), formattedBarChartData && formattedBarChartData.length > 0 ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowContainer, {
125
- id: "BottomDetailsRowContainer",
126
- height: height,
127
- width: width
148
+ id: "BottomDetailsRowContainer"
128
149
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowTitle, {
129
- id: "BottomDetailsRowTitle",
130
- height: height,
131
- width: width
150
+ id: "BottomDetailsRowTitle1"
132
151
  }, formattedBarChartData[0].title1), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowTitle, {
133
- id: "BottomDetailsRowTitle",
134
- height: height,
135
- width: width
136
- }, formattedBarChartData[0].title2)) : ""), ";"));
152
+ id: "BottomDetailsRowTitle2"
153
+ }, formattedBarChartData[0].title2)) : "")));
137
154
  };
138
155
  exports.TotalBenchmarkBarchart = TotalBenchmarkBarchart;
139
156
  var _default = TotalBenchmarkBarchart;
package/dist/stories/components/TotalBenchmarkBarchart.style.js CHANGED
@@ -4,51 +4,37 @@ 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.CurrencySign = exports.ControlsContainer = exports.Controls = exports.BottomDetailsRowTitle = exports.BottomDetailsRowContainer = exports.BenchmarkContainer = exports.BarchartContainer = void 0;
7
+ exports.ValueAndBenchmarkContainer = exports.TitleAndValueContainer = exports.Title = exports.FormattedValue = exports.CurrencySign = exports.ControlsContainer = exports.Controls = exports.BottomDetailsRowTitle = exports.BottomDetailsRowContainer = exports.BenchmarkContainer = exports.BarchartContainer = 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;
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;
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: 10px;\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 TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 14em;\n height: 10%;\n"])));
24
+ exports.TitleAndValueContainer = TitleAndValueContainer;
25
+ var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n font-weight: 600;\n font-size: 1em;\n"])));
30
26
  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
- });
27
+ var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n align-items: baseline;\n width: 14em;\n height: 20%;\n"])));
36
28
  exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
37
- var CurrencySign = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n //position: absolute;\n margin-left: 0px;\n margin-top: 19px;\n width: 11px;\n height: 22px;\n left: 40px;\n top: 10px;\n font-weight: 500;\n font-size: 18px;\n line-height: 22px;\n //border: 1px solid red;\n"])));
29
+ var CurrencySign = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n width: 0.8em;\n font-weight: 500;\n font-size: 1em;\n"])));
38
30
  exports.CurrencySign = CurrencySign;
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
- });
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"])));
42
32
  exports.FormattedValue = FormattedValue;
43
- var BenchmarkContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n //position: absolute;\n margin-left: 4px;\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
- });
33
+ var BenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.7em;\n width: 5.8em;\n"])));
46
34
  exports.BenchmarkContainer = BenchmarkContainer;
47
- var BarchartContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n // display: inline-flex;\n width: 200 px;\n height: ", ";\n left: 0px;\n top: 100px;\n //border: 1px solid green;\n"])), function (props) {
48
- return (props.height - MIN_HEIGHT <= 0 ? 70 : 70 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
49
- });
35
+ var BarchartContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\n width: 14em;\n height: 50%;\n\n"])));
50
36
  exports.BarchartContainer = BarchartContainer;
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"])));
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 height: 20%;\n\n"])));
52
38
  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"])));
39
+ var BottomDetailsRowTitle = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (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
40
  exports.BottomDetailsRowTitle = BottomDetailsRowTitle;
package/dist/stories/components/TotalDoughnutChart.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.TotalDoughnutChart = 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 _CommonFunctions = require("./CommonFunctions");
11
13
  var _recharts = require("recharts");
12
14
  var _TotalDoughnutChartStyle = require("./TotalDoughnutChart.style.js");
@@ -25,18 +27,36 @@ var TotalDoughnutChart = function TotalDoughnutChart(_ref) {
25
27
  currencyType = _ref$currencyType === void 0 ? "USD" : _ref$currencyType,
26
28
  legendData = _ref.legendData,
27
29
  _ref$width = _ref.width,
28
- width = _ref$width === void 0 ? "100%" : _ref$width,
30
+ width = _ref$width === void 0 ? "250px" : _ref$width,
29
31
  _ref$height = _ref.height,
30
- height = _ref$height === void 0 ? "100%" : _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);
36
+ var DEFAULT_ROOT_FONT = 16;
37
+ var DEFAULT_COMPONENT_WIDTH = 250;
38
+ var _useState = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat("", "px")),
39
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
40
+ rootFont = _useState2[0],
41
+ setRootFont = _useState2[1];
42
+ var controlsContainerRef = (0, _react.useRef)();
43
+ (0, _react.useEffect)(function () {
44
+ var offsetWidth = controlsContainerRef.current.offsetWidth;
45
+ setRootFont(getRootFont(offsetWidth));
46
+ }, [width]);
47
+ var getRootFont = function getRootFont(width) {
48
+ var relation = width.toString().replace("px", "").replace("%", "") / DEFAULT_COMPONENT_WIDTH;
49
+ var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
50
+ return fontRoot;
51
+ };
34
52
  var onPieEnterHandler = function onPieEnterHandler() {};
35
53
  return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.ControlsContainer, {
36
54
  id: "ControlsContainer",
37
55
  height: height,
38
56
  width: width,
39
- textColor: textColor
57
+ textColor: textColor,
58
+ ref: controlsContainerRef,
59
+ rootFont: rootFont
40
60
  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.Controls, {
41
61
  id: "Controls",
42
62
  height: height,
@@ -63,8 +83,8 @@ var TotalDoughnutChart = function TotalDoughnutChart(_ref) {
63
83
  onMouseEnter: onPieEnterHandler
64
84
  }, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
65
85
  data: legendData,
66
- innerRadius: 23,
67
- outerRadius: 33,
86
+ outerRadius: 33 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT),
87
+ innerRadius: 23 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT),
68
88
  fill: "#8884d8",
69
89
  dataKey: "value"
70
90
  }, legendData.map(function (row, index) {
package/dist/stories/components/TotalDoughnutChart.style.js CHANGED
@@ -8,7 +8,9 @@ exports.TitleAndValueContainer = exports.Title = exports.LegendTitleAndFormatedV
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, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
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: \"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 align-content: center;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n //border: 1px solid blue;\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 //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n border-radius: 12px; \n align-content: center;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])), function (props) {
12
+ return props.rootFont;
13
+ }, function (props) {
12
14
  return props.textColor;
13
15
  }, function (props) {
14
16
  return props.width;
@@ -16,37 +18,37 @@ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templ
16
18
  return props.height;
17
19
  });
18
20
  exports.ControlsContainer = ControlsContainer;
19
- 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 justify-content: center;\n align-items: center;\n flex-direction: column;\n //border: 1px solid blue;\n"])));
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 justify-content: center;\n align-items: center;\n flex-direction: column; \n"])));
20
22
  exports.Controls = Controls;
21
- var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 80%;\n margin-top: 35px;\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: 35px;\n"])));
22
24
  exports.TitleAndValueContainer = TitleAndValueContainer;
23
- var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%; \n height: 30px;\n font-weight: 600;\n font-size: 1.125rem;\n line-height: 22px;\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: 1em;\n"])));
24
26
  exports.Title = Title;
25
27
  var CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n"])));
26
28
  exports.CurrencySignAndFormattedValueContainer = CurrencySignAndFormattedValueContainer;
27
- var CurrencySign = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 18px;\n line-height: 22px;\n //border: 1px solid red;\n"])));
29
+ var CurrencySign = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 1em;\n"])));
28
30
  exports.CurrencySign = CurrencySign;
29
- var FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 2.5rem;\n line-height: 48px;\n \n //border: 1px solid red;\n"])));
31
+ var FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 2.22em; \n"])));
30
32
  exports.FormattedValue = FormattedValue;
31
- var DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n width: 80%;\n height: 27%;\n margin-top: 35px;\n margin-bottom: 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: 27%;\n margin-top: 2.18em; // 35px;\n margin-bottom: 2.18em; // 35px;\n"])));
32
34
  exports.DoughnutChartAndLegendContainer = DoughnutChartAndLegendContainer;
33
- var DoughnutChart = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n width: 34%;\n height: 100%;\n //border: 1px solid red;\n"])));
35
+ var DoughnutChart = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n width: 34%;\n height: 100%;\n"])));
34
36
  exports.DoughnutChart = DoughnutChart;
35
- var LegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 66%;\n padding-left: 10px;\n flex-direction: column;\n align-items: left;\n justify-content: space-between;\n\n //border: 1px solid blue;\n"])));
37
+ var LegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 66%;\n padding-left: 10px;\n flex-direction: column;\n align-items: left;\n justify-content: space-between;\n"])));
36
38
  exports.LegendContainer = LegendContainer;
37
- var LegendControlsContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 50%;\n width: 100%;\n //border: 1px solid blue;\n"])));
39
+ var LegendControlsContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 50%;\n width: 100%;\n"])));
38
40
  exports.LegendControlsContainer = LegendControlsContainer;
39
- var LegendTitleAndFormatedValueContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 80%;\n margin-left: 5px;\n flex-direction: column;\n //border: 1px solid blue;\n"])));
41
+ var LegendTitleAndFormatedValueContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 100%;\n height: 100%;\n margin-left: 0.1em; \n flex-direction: column;\n"])));
40
42
  exports.LegendTitleAndFormatedValueContainer = LegendTitleAndFormatedValueContainer;
41
- var LegendFormatedValueContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n \n //border: 1px solid blue;\n"])));
43
+ var LegendFormatedValueContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 50%;\n"])));
42
44
  exports.LegendFormatedValueContainer = LegendFormatedValueContainer;
43
- var LegendColorRectangle = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n width: 10px;\n height: 10px;\n background: ", ";\n"])), function (props) {
45
+ var LegendColorRectangle = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n width: 0.8em;\n height: 0.7em;\n margin-right:0.3em;\n background: ", ";\n"])), function (props) {
44
46
  return props.color;
45
47
  });
46
48
  exports.LegendColorRectangle = LegendColorRectangle;
47
- var LegendTitle = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 0.6vw;\n width: 90%;\n height: 50%;\n //border: 1px solid red;\n"])));
49
+ var LegendTitle = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 0.8em; \n width: 100%;\n height: 50%;\n"])));
48
50
  exports.LegendTitle = LegendTitle;
49
- var LegendCurrencySign = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 0.6vw;\n height: 50%;\n //border: 1px solid red;\n"])));
51
+ var LegendCurrencySign = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 0.8em; \n"])));
50
52
  exports.LegendCurrencySign = LegendCurrencySign;
51
- var LegendFormattedValue = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size:0.6vw;\n height: 50%;\n //border: 1px solid red;\n"])));
53
+ var LegendFormattedValue = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 0.8em; \n"])));
52
54
  exports.LegendFormattedValue = LegendFormattedValue;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.80",
3
+ "version": "1.0.82",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {