sag_components 1.0.33 → 1.0.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/stories/components/CommonFunctions.js +50 -0
  2. package/dist/stories/components/TotalBenchmark.js +55 -0
  3. package/dist/stories/components/TotalBenchmark.style.js +38 -0
  4. package/dist/stories/components/TotalDoughnutChart.js +14 -109
  5. package/dist/stories/components/TotalDoughnutChart.style.js +55 -13
  6. package/package.json +1 -1
package/dist/stories/components/CommonFunctions.js ADDED
@@ -0,0 +1,50 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getNumberWithCommas = exports.getFormattedValue = exports.getFormattedUnits = exports.getCurrencySign = void 0;
7
+ var getCurrencySign = function getCurrencySign(currencyTypeToConvert, value) {
8
+ if (!currencyTypeToConvert) return "";
9
+ var currencySign = "";
10
+ var currencyFormatter = new Intl.NumberFormat("en-US", {
11
+ style: "currency",
12
+ currency: currencyTypeToConvert
13
+ });
14
+ currencySign = currencyFormatter.format(value).substring(0, 1);
15
+ return currencySign;
16
+ };
17
+ exports.getCurrencySign = getCurrencySign;
18
+ var getFormattedUnits = function getFormattedUnits(num) {
19
+ if (Math.abs(num) >= 1000000000) {
20
+ return "B";
21
+ }
22
+ if (Math.abs(num) >= 1000000) {
23
+ return "M";
24
+ }
25
+ if (Math.abs(num) >= 1000) {
26
+ return "K";
27
+ }
28
+ return "";
29
+ };
30
+ exports.getFormattedUnits = getFormattedUnits;
31
+ var getFormattedValue = function getFormattedValue(num) {
32
+ if (Math.abs(num) >= 1000000000) {
33
+ return (num / 1000000000).toFixed(1).replace(/\.0$/, "");
34
+ }
35
+ if (Math.abs(num) >= 1000000) {
36
+ return (num / 1000000).toFixed(1).replace(/\.0$/, "");
37
+ }
38
+ if (Math.abs(num) >= 1000) {
39
+ return (num / 1000).toFixed(1).replace(/\.0$/, "");
40
+ }
41
+ return num;
42
+ };
43
+ exports.getFormattedValue = getFormattedValue;
44
+ var getNumberWithCommas = function getNumberWithCommas(x) {
45
+ x = x.toString();
46
+ var pattern = /(-?\d+)(\d{3})/;
47
+ while (pattern.test(x)) x = x.replace(pattern, "$1,$2");
48
+ return x;
49
+ };
50
+ exports.getNumberWithCommas = getNumberWithCommas;
package/dist/stories/components/TotalBenchmark.js ADDED
@@ -0,0 +1,55 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = exports.TotalBenchmark = void 0;
8
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
9
+ var _react = _interopRequireDefault(require("react"));
10
+ var _CommonFunctions = require("./CommonFunctions");
11
+ var _Benchmark = require("./Benchmark");
12
+ var _TotalBenchmarkStyle = require("./TotalBenchmark.style.js");
13
+ var _excluded = ["data", "dotCut", "width", "height", "textColor"];
14
+ /*TotalBenchmark*/
15
+ var TotalBenchmark = function TotalBenchmark(_ref) {
16
+ var data = _ref.data,
17
+ _ref$dotCut = _ref.dotCut,
18
+ dotCut = _ref$dotCut === void 0 ? true : _ref$dotCut,
19
+ _ref$width = _ref.width,
20
+ width = _ref$width === void 0 ? 260 : _ref$width,
21
+ _ref$height = _ref.height,
22
+ height = _ref$height === void 0 ? 350 : _ref$height,
23
+ _ref$textColor = _ref.textColor,
24
+ textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
25
+ props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
26
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.ControlsContainer, {
27
+ height: height,
28
+ width: width,
29
+ textColor: textColor
30
+ }, data.map(function (item, index) {
31
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.Controls, {
32
+ index: index,
33
+ width: width
34
+ }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.Title, {
35
+ width: width
36
+ }, item.title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.FormattedValue, {
37
+ width: width
38
+ }, dotCut ? (0, _CommonFunctions.getFormattedValue)(item.value) : (0, _CommonFunctions.getNumberWithCommas)(item.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(item.value) : ""), item.totalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.BenchmarkContainer, {
39
+ width: width
40
+ }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
41
+ totalValue: item.totalValue,
42
+ currentValue: item.value,
43
+ height: 12,
44
+ width: 100,
45
+ color: "#79DB95",
46
+ linearGradientColor: "#C3EFD0",
47
+ linearGradientUnderAvarageColor: "#FDB1B1",
48
+ underAvarageColor: "#FD5959",
49
+ backgroundColor: "#F2F2F2"
50
+ })) : "");
51
+ }));
52
+ };
53
+ exports.TotalBenchmark = TotalBenchmark;
54
+ var _default = TotalBenchmark;
55
+ exports.default = _default;
package/dist/stories/components/TotalBenchmark.style.js ADDED
@@ -0,0 +1,38 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.Title = exports.FormattedValue = exports.ControlsContainer = exports.Controls = exports.BenchmarkContainer = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
11
+ var MIN_HEIGHT = 300;
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 //border: 1px solid red;\n"])), function (props) {
14
+ return props.textColor;
15
+ }, function (props) {
16
+ return (props.width - MIN_WIDTH <= 0 ? MIN_WIDTH : props.width).toString().concat("", "px");
17
+ }, function (props) {
18
+ return (props.height - MIN_HEIGHT <= 0 ? MIN_HEIGHT : props.height).toString().concat("", "px");
19
+ });
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: 100px;\n top: ", ";\n left: 40px;\n background: #ffffff;\n //border: 1px solid blue;\n"])), function (props) {
22
+ return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
23
+ }, function (props) {
24
+ return (68 + 120 * props.index).toString().concat("", "px");
25
+ });
26
+ 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: 18px;\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
+ });
30
+ 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 ? 200 : 200 + (props.width - MIN_WIDTH)).toString().concat("", "px");
33
+ });
34
+ exports.FormattedValue = FormattedValue;
35
+ var BenchmarkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 100px;\n height: 12px;\n left: ", ";\n top: 66px;\n //border: 1px solid red;\n"])), function (props) {
36
+ return (props.width - MIN_WIDTH <= 0 ? 115 : 115 + (props.width - MIN_WIDTH)).toString().concat("", "px");
37
+ });
38
+ exports.BenchmarkContainer = BenchmarkContainer;
package/dist/stories/components/TotalDoughnutChart.js CHANGED
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = exports.TotalDoughnutChart = void 0;
8
8
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
9
9
  var _react = _interopRequireDefault(require("react"));
10
+ var _CommonFunctions = require("./CommonFunctions");
10
11
  var _recharts = require("recharts");
11
12
  var _TotalDoughnutChartStyle = require("./TotalDoughnutChart.style.js");
12
13
  var _excluded = ["title", "value", "dotCut", "currency", "currencyType", "legendData", "width", "height", "textColor"];
@@ -30,124 +31,28 @@ var TotalDoughnutChart = function TotalDoughnutChart(_ref) {
30
31
  _ref$textColor = _ref.textColor,
31
32
  textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
32
33
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
33
- var MIN_WIDTH = 260;
34
- var MIN_HEIGHT = 300;
35
- var getCurrencySign = function getCurrencySign(currencyTypeToConvert) {
36
- if (!currencyTypeToConvert) return "";
37
- var currencySign = "";
38
- var currencyFormatter = new Intl.NumberFormat("en-US", {
39
- style: "currency",
40
- currency: currencyTypeToConvert
41
- });
42
- currencySign = currencyFormatter.format(value).substring(0, 1);
43
- return currencySign;
44
- };
45
- var getFormattedUnits = function getFormattedUnits(num) {
46
- if (Math.abs(num) >= 1000000000) {
47
- return "B";
48
- }
49
- if (Math.abs(num) >= 1000000) {
50
- return "M";
51
- }
52
- if (Math.abs(num) >= 1000) {
53
- return "K";
54
- }
55
- return "";
56
- };
57
- var getFormattedValue = function getFormattedValue(num) {
58
- if (Math.abs(num) >= 1000000000) {
59
- return (num / 1000000000).toFixed(1).replace(/\.0$/, "");
60
- }
61
- if (Math.abs(num) >= 1000000) {
62
- return (num / 1000000).toFixed(1).replace(/\.0$/, "");
63
- }
64
- if (Math.abs(num) >= 1000) {
65
- return (num / 1000).toFixed(1).replace(/\.0$/, "");
66
- }
67
- return num;
68
- };
69
- var getNumberWithCommas = function getNumberWithCommas(x) {
70
- x = x.toString();
71
- var pattern = /(-?\d+)(\d{3})/;
72
- while (pattern.test(x)) x = x.replace(pattern, "$1,$2");
73
- return x;
74
- };
75
- var getDoughnutChartLeft = function getDoughnutChartLeft() {
76
- if (width <= 260) {
77
- return 10;
78
- }
79
- ;
80
- if (width >= 290) {
81
- return 40;
82
- }
83
- ;
84
- return 10 + (width - MIN_WIDTH);
85
- };
86
- var getLegendControlsLeft = function getLegendControlsLeft() {
87
- if (width <= 260) {
88
- return 100;
89
- }
90
- ;
91
- if (width >= 300) {
92
- return 140;
93
- }
94
- ;
95
- return 100 + (width - MIN_WIDTH);
96
- };
97
- var getDoughnutChartTop = function getDoughnutChartTop() {
98
- if (height <= 300) {
99
- return 180;
100
- }
101
- ;
102
- if (height >= 340) {
103
- return 220;
104
- }
105
- ;
106
- return 180 + (height - MIN_HEIGHT);
107
- };
108
- var getLegendControlsTop = function getLegendControlsTop() {
109
- if (height <= 300) {
110
- return 180;
111
- }
112
- ;
113
- if (height >= 340) {
114
- return 220;
115
- }
116
- ;
117
- return 180 + (height - MIN_HEIGHT);
118
- };
119
- var getControlsLeft = function getControlsLeft() {
120
- if (width - MIN_WIDTH <= 0) {
121
- return MIN_WIDTH;
122
- }
123
- ;
124
- return width;
125
- };
126
- var getControlsTop = function getControlsTop() {
127
- if (height - MIN_HEIGHT <= 0) {
128
- return MIN_HEIGHT;
129
- }
130
- ;
131
- return height;
132
- };
133
34
  var onPieEnterHandler = function onPieEnterHandler() {};
134
35
  return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.ControlsContainer, {
135
- height: getControlsTop(),
136
- width: getControlsLeft(),
36
+ height: height,
37
+ width: width,
137
38
  textColor: textColor
138
39
  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.Controls, {
139
40
  height: height,
140
- width: getControlsLeft
141
- }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.Title, null, title), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.CurrencySign, null, "".concat(currency ? getCurrencySign(currencyType) : "")), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.FormattedValue, null, "".concat(dotCut ? getFormattedValue(value) : getNumberWithCommas(value)), "".concat(dotCut ? getFormattedUnits(value) : "")), legendData.map(function (row, index) {
41
+ width: width
42
+ }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.Title, {
43
+ width: width
44
+ }, title), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.CurrencySign, null, currency ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ""), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.FormattedValue, {
45
+ width: width
46
+ }, dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ""), legendData.map(function (row, index) {
142
47
  return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendControls, {
143
- left: getLegendControlsLeft(),
144
- top: getLegendControlsTop()
48
+ width: width,
49
+ height: height
145
50
  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendColorRectangle, {
146
51
  color: row.color
147
- }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendTitle, null, row.name), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendCurrencySign, null, "".concat(currency ? getCurrencySign(currencyType) : "")), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendFormattedValue, null, "".concat(dotCut ? getFormattedValue(row.value) : getNumberWithCommas(row.value)), "".concat(dotCut ? getFormattedUnits(row.value) : "")));
52
+ }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendTitle, null, row.name), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendCurrencySign, null, currency ? (0, _CommonFunctions.getCurrencySign)(currencyType) : ""), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendFormattedValue, null, dotCut ? (0, _CommonFunctions.getFormattedValue)(row.value) : (0, _CommonFunctions.getNumberWithCommas)(row.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(row.value) : ""));
148
53
  }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.DoughnutChart, {
149
- left: getDoughnutChartLeft(),
150
- top: getDoughnutChartTop()
54
+ width: width,
55
+ height: height
151
56
  }, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, {
152
57
  width: 90,
153
58
  height: 90,
package/dist/stories/components/TotalDoughnutChart.style.js CHANGED
@@ -8,36 +8,78 @@ exports.Title = exports.LegendTitle = exports.LegendFormattedValue = exports.Leg
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;
11
+ var MIN_WIDTH = 260;
12
+ var MIN_HEIGHT = 300;
13
+ var getLegendControlsTop = function getLegendControlsTop(height) {
14
+ if (height <= 300) {
15
+ return 180;
16
+ }
17
+ if (height >= 340) {
18
+ return 220;
19
+ }
20
+ return 180 + (height - MIN_HEIGHT);
21
+ };
22
+ var getLegendControlsLeft = function getLegendControlsLeft(width) {
23
+ if (width <= 260) {
24
+ return 100;
25
+ }
26
+ if (width >= 300) {
27
+ return 140;
28
+ }
29
+ return 100 + (width - MIN_WIDTH);
30
+ };
31
+ var getDoughnutChartTop = function getDoughnutChartTop(height) {
32
+ if (height <= 300) {
33
+ return 180;
34
+ }
35
+ if (height >= 340) {
36
+ return 220;
37
+ }
38
+ return 180 + (height - MIN_HEIGHT);
39
+ };
40
+ var getDoughnutChartLeft = function getDoughnutChartLeft(width) {
41
+ if (width <= 260) {
42
+ return 10;
43
+ }
44
+ if (width >= 290) {
45
+ return 40;
46
+ }
47
+ return 10 + (width - MIN_WIDTH);
48
+ };
11
49
  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) {
12
50
  return props.textColor;
13
51
  }, function (props) {
14
- return props.width.toString().concat("", "px");
52
+ return (props.width - MIN_WIDTH <= 0 ? MIN_WIDTH : props.width).toString().concat("", "px");
15
53
  }, function (props) {
16
- return props.height.toString().concat("", "px");
54
+ return (props.height - MIN_HEIGHT <= 0 ? MIN_HEIGHT : props.height).toString().concat("", "px");
17
55
  });
18
56
  exports.ControlsContainer = ControlsContainer;
19
57
  var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n border-radius: 12px;\n width: ", ";\n height: ", ";\n background: #ffffff;\n //border: 1px solid blue;\n"])), function (props) {
20
- return props.width.toString().concat("", "px");
58
+ return (props.width - MIN_WIDTH <= 0 ? MIN_WIDTH : props.width).toString().concat("", "px");
21
59
  }, function (props) {
22
- return props.height.toString().concat("", "px");
60
+ return (props.height - MIN_HEIGHT <= 0 ? MIN_HEIGHT : props.height).toString().concat("", "px");
23
61
  });
24
62
  exports.Controls = Controls;
25
- var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 150px;\n height: 22px;\n left: 40px;\n top: 81px;\n font-weight: 600;\n font-size: 18px;\n line-height: 22px;\n //border: 1px solid red;\n"])));
63
+ var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: ", ";\n height: 22px;\n left: 40px;\n top: 68px;\n font-weight: 600;\n font-size: 18px;\n line-height: 22px;\n //border: 1px solid red;\n"])), function (props) {
64
+ return (props.width - MIN_WIDTH <= 0 ? 210 : 210 + (props.width - MIN_WIDTH)).toString().concat("", "px");
65
+ });
26
66
  exports.Title = Title;
27
- var CurrencySign = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 11px;\n height: 22px;\n left: 42px;\n top: 135px;\n font-weight: 500;\n font-size: 18px;\n line-height: 22px;\n //border: 1px solid red;\n"])));
67
+ var CurrencySign = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 11px;\n height: 22px;\n left: 40px;\n top: 123px;\n font-weight: 500;\n font-size: 18px;\n line-height: 22px;\n //border: 1px solid red;\n"])));
28
68
  exports.CurrencySign = CurrencySign;
29
- var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 200px;\n height: 48px;\n left: 57px;\n top: 115px;\n font-weight: 500;\n font-size: 40px;\n line-height: 48px;\n //border: 1px solid red;\n"])));
69
+ var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 200px;\n width: ", ";\n height: 48px;\n left: 55px;\n top: 102px;\n font-weight: 500;\n font-size: 40px;\n line-height: 48px;\n //border: 1px solid red;\n"])), function (props) {
70
+ return (props.width - MIN_WIDTH <= 0 ? 200 : 200 + (props.width - MIN_WIDTH)).toString().concat("", "px");
71
+ });
30
72
  exports.FormattedValue = FormattedValue;
31
- var DoughnutChart = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 90px;\n height: 90px;\n left: ", ";\n top: ", "; \n //border: 1px solid red;\n"])), function (props) {
32
- return props.left.toString().concat("", "px"); //10px
73
+ var DoughnutChart = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 90px;\n height: 90px;\n left: ", ";\n top: ", ";\n //border: 1px solid red;\n"])), function (props) {
74
+ return getDoughnutChartLeft(props.width).toString().concat("", "px");
33
75
  }, function (props) {
34
- return props.top.toString().concat("", "px"); //top: 221px;
76
+ return getDoughnutChartTop(props.height).toString().concat("", "px");
35
77
  });
36
78
  exports.DoughnutChart = DoughnutChart;
37
- var LegendControls = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n border-radius: 12px;\n width: 150px;\n height: 47px; \n left: ", ";\n top: ", "; \n background: #ffffff;\n //border: 1px solid blue;\n"])), function (props) {
38
- return props.left.toString().concat("", "px"); //100px
79
+ var LegendControls = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n border-radius: 12px;\n width: 170px;\n height: 47px;\n left: ", ";\n top: ", ";\n background: #ffffff;\n //border: 1px solid blue;\n"])), function (props) {
80
+ return getLegendControlsLeft(props.width).toString().concat("", "px");
39
81
  }, function (props) {
40
- return props.top.toString().concat("", "px"); //top: 221px;
82
+ return getLegendControlsTop(props.height).toString().concat("", "px");
41
83
  });
42
84
  exports.LegendControls = LegendControls;
43
85
  var LegendColorRectangle = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 16px;\n height: 16px;\n left: 8px;\n top: 14px;\n background: ", ";\n"])), function (props) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.33",
3
+ "version": "1.0.35",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {