sag_components 1.0.66 → 1.0.68

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/TitleDescription.js +162 -0
  2. package/dist/stories/components/TitleDescription.style.js +78 -0
  3. package/dist/stories/components/TotalBenchmark.js +12 -2
  4. package/dist/stories/components/TotalBenchmark.style.js +1 -1
  5. package/dist/stories/components/TotalDoughnutChart.js +39 -12
  6. package/dist/stories/components/TotalDoughnutChart.style.js +30 -68
  7. package/package.json +1 -1
package/dist/stories/components/TitleDescription.js ADDED
@@ -0,0 +1,162 @@
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.TitleDescription = 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 _IconButton = require("./IconButton");
12
+ var _TitleDescriptionStyle = require("./TitleDescription.style.js");
13
+ var _excluded = ["mainTitle", "infoButtonText", "infoButtonOnClick", "eventLinkLabel", "eventLinkLabelOnClick", "retailerLinkLabel", "retailerLinkLabelOnClick", "objectivesTitle", "objectivesDescriptionLine1", "objectivesDescriptionLine2", "objectivesShowMoreLabel", "objectivesShowMoreOnClick", "RightPanelLine2Title", "RightPanelLine2Value", "RightPanelLine3Title", "RightPanelLine3Value1", "RightPanelLine3Value2", "downloadButtonOnClick", "flyButtonOnClick", "width", "height", "textColor"];
14
+ /*TitleDescription*/
15
+ var TitleDescription = function TitleDescription(_ref) {
16
+ var mainTitle = _ref.mainTitle,
17
+ infoButtonText = _ref.infoButtonText,
18
+ infoButtonOnClick = _ref.infoButtonOnClick,
19
+ eventLinkLabel = _ref.eventLinkLabel,
20
+ eventLinkLabelOnClick = _ref.eventLinkLabelOnClick,
21
+ retailerLinkLabel = _ref.retailerLinkLabel,
22
+ retailerLinkLabelOnClick = _ref.retailerLinkLabelOnClick,
23
+ objectivesTitle = _ref.objectivesTitle,
24
+ objectivesDescriptionLine1 = _ref.objectivesDescriptionLine1,
25
+ objectivesDescriptionLine2 = _ref.objectivesDescriptionLine2,
26
+ objectivesShowMoreLabel = _ref.objectivesShowMoreLabel,
27
+ objectivesShowMoreOnClick = _ref.objectivesShowMoreOnClick,
28
+ RightPanelLine2Title = _ref.RightPanelLine2Title,
29
+ RightPanelLine2Value = _ref.RightPanelLine2Value,
30
+ RightPanelLine3Title = _ref.RightPanelLine3Title,
31
+ RightPanelLine3Value1 = _ref.RightPanelLine3Value1,
32
+ RightPanelLine3Value2 = _ref.RightPanelLine3Value2,
33
+ downloadButtonOnClick = _ref.downloadButtonOnClick,
34
+ flyButtonOnClick = _ref.flyButtonOnClick,
35
+ _ref$width = _ref.width,
36
+ width = _ref$width === void 0 ? "100%" : _ref$width,
37
+ _ref$height = _ref.height,
38
+ height = _ref$height === void 0 ? "100%" : _ref$height,
39
+ _ref$textColor = _ref.textColor,
40
+ textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
41
+ props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
42
+ return /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.MainContainer, {
43
+ id: "MainContainer",
44
+ height: height,
45
+ width: width,
46
+ textColor: textColor
47
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.LeftPanelContainer, {
48
+ id: "LeftPanelContainer"
49
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.LeftPanelLine1Container, {
50
+ id: "LeftPanelLine1Container"
51
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.LeftPanelLine1Field1, {
52
+ id: "LeftPanelLine1Field1"
53
+ }, mainTitle, " "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.LeftPanelLine1IconButtonContainer, {
54
+ id: "LeftPanelLine1IconButtonContainer"
55
+ }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
56
+ id: "IconButton",
57
+ height: 18,
58
+ width: 18,
59
+ iconName: "eye",
60
+ onClick: function onClick(event) {
61
+ infoButtonOnClick({
62
+ eventName: "infoButtonOnClick",
63
+ event: event
64
+ });
65
+ }
66
+ }), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.LeftPanelLine1InfoButtonText, {
67
+ id: "LeftPanelLine1InfoButtonText"
68
+ }, " ", infoButtonText, " "))), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.LeftPanelLine2Container, {
69
+ id: "LeftPanelLine2Container"
70
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.LeftPanelLine2Field1, {
71
+ id: "LeftPanelLine2Field1",
72
+ onClick: function onClick(event) {
73
+ eventLinkLabelOnClick({
74
+ eventName: "eventLinkLabelOnClick",
75
+ event: event
76
+ });
77
+ }
78
+ }, eventLinkLabel), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.FieldsDelimiter, {
79
+ id: "FieldsDelimiter"
80
+ }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.LeftPanelLine2Field3, {
81
+ id: "LeftPanelLine2Field3",
82
+ onClick: function onClick(event) {
83
+ retailerLinkLabelOnClick({
84
+ eventName: "retailerLinkLabelOnClick",
85
+ event: event
86
+ });
87
+ }
88
+ }, retailerLinkLabel)), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.LeftPanelLine3Container, {
89
+ id: "LeftPanelLine3Container"
90
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.LeftPanelLine3SubLine1Container, {
91
+ id: "LeftPanelLine3SubLine1Container"
92
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.LeftPanelLine3SubLine1Field1, {
93
+ id: "LeftPanelLine3SubLine1Field1"
94
+ }, objectivesTitle, " "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.LeftPanelLine3SubLine1Field2, {
95
+ id: "LeftPanelLine3SubLine1Field2"
96
+ }, objectivesDescriptionLine1)), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.LeftPanelLine3SubLine2Container, {
97
+ id: "LeftPanelLine3SubLine2Container"
98
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.LeftPanelLine3SubLine2Field1, {
99
+ id: "LeftPanelLine3SubLine2Field1"
100
+ }, objectivesDescriptionLine2, " ", " "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.LeftPanelLine3SubLine2Field2, {
101
+ id: "LeftPanelLine3SubLine2Field2",
102
+ onClick: function onClick(event) {
103
+ objectivesShowMoreOnClick({
104
+ eventName: "objectivesShowMoreOnClick",
105
+ event: event
106
+ });
107
+ }
108
+ }, objectivesShowMoreLabel)))), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RightPanelContainer, {
109
+ id: "RightPanelContainer"
110
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RightPanelLine1Container, {
111
+ id: "RightPanelLine1Container"
112
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RightPanelLine1DownloadIconButtonContainer, {
113
+ id: "RightPanelLine1DownloadIconButtonContainer"
114
+ }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
115
+ id: "IconButton",
116
+ height: 20,
117
+ width: 20,
118
+ iconName: "download",
119
+ onClick: function onClick(event) {
120
+ downloadButtonOnClick({
121
+ eventName: "downloadButtonOnClick",
122
+ event: event
123
+ });
124
+ }
125
+ })), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RightPanelLine1FlyIconButtonContainer, {
126
+ id: "RightPanelLine1FlyIconButtonContainer"
127
+ }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
128
+ id: "IconButton",
129
+ height: 20,
130
+ width: 20,
131
+ iconName: "fly",
132
+ onClick: function onClick(event) {
133
+ flyButtonOnClick({
134
+ eventName: "flyButtonOnClick",
135
+ event: event
136
+ });
137
+ }
138
+ }))), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RightPanelLine2Container, {
139
+ id: "RightPanelLine2Container"
140
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RightPanelLine2Field1EmptyFiller, null, " ")), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RightPanelLine3Container, {
141
+ id: "RightPanelLine3Container"
142
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RightPanelLine3SubLine1Container, {
143
+ id: "RightPanelLine3SubLine1Container"
144
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RightPanelLine3SubLine1Field1, {
145
+ id: "RightPanelLine3SubLine1Field1"
146
+ }, RightPanelLine2Title, " "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RightPanelLine3SubLine1Field2, {
147
+ id: "RightPanelLine3SubLine1Field2"
148
+ }, RightPanelLine2Value)), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RightPanelLine3SubLine2Container, {
149
+ id: "RightPanelLine3SubLine2Container"
150
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RightPanelLine3SubLine2Field1, {
151
+ id: "RightPanelLine3SubLine2Field1"
152
+ }, RightPanelLine3Title, " ", " "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RightPanelLine3SubLine2Field2, {
153
+ id: "RightPanelLine3SubLine2Field2"
154
+ }, RightPanelLine3Value1), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.FieldsDelimiter, {
155
+ id: "FieldsDelimiter"
156
+ }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RightPanelLine3SubLine2Field3, {
157
+ id: "RightPanelLine3SubLine2Field3"
158
+ }, RightPanelLine3Value2)))));
159
+ };
160
+ exports.TitleDescription = TitleDescription;
161
+ var _default = TitleDescription;
162
+ exports.default = _default;
package/dist/stories/components/TitleDescription.style.js ADDED
@@ -0,0 +1,78 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.RightPanelLine3SubLine2Field3 = exports.RightPanelLine3SubLine2Field2 = exports.RightPanelLine3SubLine2Field1 = exports.RightPanelLine3SubLine2Container = exports.RightPanelLine3SubLine1Field2 = exports.RightPanelLine3SubLine1Field1 = exports.RightPanelLine3SubLine1Container = exports.RightPanelLine3Container = exports.RightPanelLine2Field1EmptyFiller = exports.RightPanelLine2Container = exports.RightPanelLine1FlyIconButtonContainer = exports.RightPanelLine1DownloadIconButtonContainer = exports.RightPanelLine1Container = exports.RightPanelContainer = exports.MainContainer = exports.LeftPanelLine3SubLine2Field2 = exports.LeftPanelLine3SubLine2Field1 = exports.LeftPanelLine3SubLine2Container = exports.LeftPanelLine3SubLine1Field2 = exports.LeftPanelLine3SubLine1Field1 = exports.LeftPanelLine3SubLine1Container = exports.LeftPanelLine3Container = exports.LeftPanelLine2Field3 = exports.LeftPanelLine2Field1 = exports.LeftPanelLine2Container = exports.LeftPanelLine1InfoButtonText = exports.LeftPanelLine1IconButtonContainer = exports.LeftPanelLine1Field1 = exports.LeftPanelLine1Container = exports.LeftPanelContainer = exports.FieldsDelimiter = 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, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
11
+ var MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\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\n //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n border-radius: 12px;\n align-content: center;\n\n justify-content: center;\n align-items: center;\n\n // border: 1px solid red;\n"])), function (props) {
12
+ return props.textColor ? props.textColor : "#000";
13
+ }, function (props) {
14
+ return props.width;
15
+ }, function (props) {
16
+ return props.height;
17
+ });
18
+ exports.MainContainer = MainContainer;
19
+ var LeftPanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 12px;\n width: 50%;\n height: 100%;\n background: #ffffff;\n //border: 1px solid red;\n"])));
20
+ exports.LeftPanelContainer = LeftPanelContainer;
21
+ var LeftPanelLine1Container = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n overflow: hidden;\n width: 100%;\n height: 40px;\n margin-left: 20px;\n border-radius: 12px;\n//border: 1px solid brown;\n"])));
22
+ exports.LeftPanelLine1Container = LeftPanelLine1Container;
23
+ var LeftPanelLine1Field1 = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n white-space: pre-wrap;\n font-weight: 700;\n font-size: 18px;\n"])));
24
+ exports.LeftPanelLine1Field1 = LeftPanelLine1Field1;
25
+ var LeftPanelLine1IconButtonContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center \n height: 60px; \n font-weight: 500; \n border-radius: 12px;\n border: 1px solid #ccc;\n"])));
26
+ exports.LeftPanelLine1IconButtonContainer = LeftPanelLine1IconButtonContainer;
27
+ var LeftPanelLine1InfoButtonText = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n margin-left: 10px;\n margin-right: 10px;\n"])));
28
+ exports.LeftPanelLine1InfoButtonText = LeftPanelLine1InfoButtonText;
29
+ var LeftPanelLine2Container = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n overflow: hidden;\n width: 100%;\n height: 40px;\n margin-left: 20px;\n border-radius: 12px;\n//border: 1px solid #1b30aa;\n"])));
30
+ exports.LeftPanelLine2Container = LeftPanelLine2Container;
31
+ var LeftPanelLine2Field1 = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #1b30aa;\n &:hover {\n cursor: pointer;\n }\n"])));
32
+ exports.LeftPanelLine2Field1 = LeftPanelLine2Field1;
33
+ var FieldsDelimiter = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n white-space: pre-wrap;\n color: #ccc;\n"])));
34
+ exports.FieldsDelimiter = FieldsDelimiter;
35
+ var LeftPanelLine2Field3 = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #1b30aa;\n &:hover {\n cursor: pointer;\n }\n"])));
36
+ exports.LeftPanelLine2Field3 = LeftPanelLine2Field3;
37
+ var LeftPanelLine3Container = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n overflow: hidden;\n width: 100%;\n height: 60px;\n margin-left: 20px;\n border-radius: 12px;\n//border: 1px solid red;\n"])));
38
+ exports.LeftPanelLine3Container = LeftPanelLine3Container;
39
+ var LeftPanelLine3SubLine1Field1 = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 700;\n font-size: 14px;\n line-height: 20px;\n white-space: pre-wrap;\n"])));
40
+ exports.LeftPanelLine3SubLine1Field1 = LeftPanelLine3SubLine1Field1;
41
+ var LeftPanelLine3SubLine1Container = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n"])));
42
+ exports.LeftPanelLine3SubLine1Container = LeftPanelLine3SubLine1Container;
43
+ var LeftPanelLine3SubLine1Field2 = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n"])));
44
+ exports.LeftPanelLine3SubLine1Field2 = LeftPanelLine3SubLine1Field2;
45
+ var LeftPanelLine3SubLine2Container = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n"])));
46
+ exports.LeftPanelLine3SubLine2Container = LeftPanelLine3SubLine2Container;
47
+ var LeftPanelLine3SubLine2Field1 = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n white-space: pre-wrap;\n"])));
48
+ exports.LeftPanelLine3SubLine2Field1 = LeftPanelLine3SubLine2Field1;
49
+ var LeftPanelLine3SubLine2Field2 = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #1b30aa;\n &:hover {\n cursor: pointer;\n }\n"])));
50
+ exports.LeftPanelLine3SubLine2Field2 = LeftPanelLine3SubLine2Field2;
51
+ var RightPanelContainer = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n\n border-radius: 12px;\n width: 50%;\n height: 100%;\n background: #ffffff;\n\n //border: 1px solid red;\n"])));
52
+ exports.RightPanelContainer = RightPanelContainer;
53
+ var RightPanelLine1Container = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: flex-end;\n overflow: hidden;\n width: 100%;\n height: 40px;\n border-radius: 12px;\n//border: 1px solid brown;\n"])));
54
+ exports.RightPanelLine1Container = RightPanelLine1Container;
55
+ var RightPanelLine1DownloadIconButtonContainer = _styledComponents.default.div(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 5px;\n margin-right: 5px;\n"])));
56
+ exports.RightPanelLine1DownloadIconButtonContainer = RightPanelLine1DownloadIconButtonContainer;
57
+ var RightPanelLine1FlyIconButtonContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 5px;\n margin-right: 5px;\n"])));
58
+ exports.RightPanelLine1FlyIconButtonContainer = RightPanelLine1FlyIconButtonContainer;
59
+ var RightPanelLine2Container = _styledComponents.default.div(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n overflow: hidden;\n width: 100%;\n height: 40px;\n border-radius: 12px;\n//border: 1px solid #1b30aa;\n"])));
60
+ exports.RightPanelLine2Container = RightPanelLine2Container;
61
+ var RightPanelLine2Field1EmptyFiller = _styledComponents.default.div(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n white-space: pre-wrap;\n"])));
62
+ exports.RightPanelLine2Field1EmptyFiller = RightPanelLine2Field1EmptyFiller;
63
+ var RightPanelLine3Container = _styledComponents.default.div(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n overflow: hidden;\n width: 100%;\n height: 60px;\n border-radius: 12px;\n//border: 1px solid red;\n"])));
64
+ exports.RightPanelLine3Container = RightPanelLine3Container;
65
+ var RightPanelLine3SubLine1Container = _styledComponents.default.div(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 100%;\n //height: 100%;\n"])));
66
+ exports.RightPanelLine3SubLine1Container = RightPanelLine3SubLine1Container;
67
+ var RightPanelLine3SubLine1Field1 = _styledComponents.default.div(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 700;\n font-size: 14px;\n line-height: 20px;\n white-space: pre-wrap;\n margin-left: 10px;\n"])));
68
+ exports.RightPanelLine3SubLine1Field1 = RightPanelLine3SubLine1Field1;
69
+ var RightPanelLine3SubLine1Field2 = _styledComponents.default.div(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n"])));
70
+ exports.RightPanelLine3SubLine1Field2 = RightPanelLine3SubLine1Field2;
71
+ var RightPanelLine3SubLine2Container = _styledComponents.default.div(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n"])));
72
+ exports.RightPanelLine3SubLine2Container = RightPanelLine3SubLine2Container;
73
+ var RightPanelLine3SubLine2Field1 = _styledComponents.default.div(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 700;\n font-size: 14px;\n line-height: 20px;\n white-space: pre-wrap;\n margin-left: 10px;\n"])));
74
+ exports.RightPanelLine3SubLine2Field1 = RightPanelLine3SubLine2Field1;
75
+ var RightPanelLine3SubLine2Field2 = _styledComponents.default.div(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n"])));
76
+ exports.RightPanelLine3SubLine2Field2 = RightPanelLine3SubLine2Field2;
77
+ var RightPanelLine3SubLine2Field3 = _styledComponents.default.div(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n"])));
78
+ exports.RightPanelLine3SubLine2Field3 = RightPanelLine3SubLine2Field3;
package/dist/stories/components/TotalBenchmark.js CHANGED
@@ -24,20 +24,30 @@ var TotalBenchmark = function TotalBenchmark(_ref) {
24
24
  textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
25
25
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
26
26
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.ControlsContainer, {
27
+ id: "ControlsContainer",
27
28
  height: height,
28
29
  width: width,
29
30
  textColor: textColor
30
31
  }, data.map(function (item, index) {
31
32
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.Controls, {
33
+ id: "Controls",
32
34
  index: index,
33
35
  width: width
34
- }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.TitleAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.Title, {
36
+ }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.TitleAndValueContainer, {
37
+ id: "TitleAndValueContainer"
38
+ }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.Title, {
39
+ id: "Title",
35
40
  width: width
36
41
  }, item.title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.FormattedValue, {
42
+ id: "FormattedValue",
37
43
  width: width
38
- }, dotCut ? (0, _CommonFunctions.getFormattedValue)(item.value) : (0, _CommonFunctions.getNumberWithCommas)(item.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(item.value) : "")), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.BenchmarkContainerParent, null, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.BenchmarkContainer, {
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, {
47
+ id: "BenchmarkContainer",
39
48
  width: width
40
49
  }, item.totalValue && /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
50
+ id: "Benchmark",
41
51
  totalValue: item.totalValue,
42
52
  currentValue: item.value,
43
53
  benchmarkValue: item.benchmarkValue,
package/dist/stories/components/TotalBenchmark.style.js CHANGED
@@ -10,7 +10,7 @@ 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 //border: 1px solid red;\n align-content: center;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])), function (props) {
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) {
14
14
  return props.textColor;
15
15
  }, function (props) {
16
16
  return props.width;
package/dist/stories/components/TotalDoughnutChart.js CHANGED
@@ -25,32 +25,38 @@ var TotalDoughnutChart = function TotalDoughnutChart(_ref) {
25
25
  currencyType = _ref$currencyType === void 0 ? "USD" : _ref$currencyType,
26
26
  legendData = _ref.legendData,
27
27
  _ref$width = _ref.width,
28
- width = _ref$width === void 0 ? 260 : _ref$width,
28
+ width = _ref$width === void 0 ? "100%" : _ref$width,
29
29
  _ref$height = _ref.height,
30
- height = _ref$height === void 0 ? 350 : _ref$height,
30
+ height = _ref$height === void 0 ? "100%" : _ref$height,
31
31
  _ref$textColor = _ref.textColor,
32
32
  textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
33
33
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
34
34
  var onPieEnterHandler = function onPieEnterHandler() {};
35
35
  return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.ControlsContainer, {
36
+ id: "ControlsContainer",
36
37
  height: height,
37
38
  width: width,
38
39
  textColor: textColor
39
40
  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.Controls, {
41
+ id: "Controls",
40
42
  height: height,
41
43
  width: width
44
+ }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.TitleAndValueContainer, {
45
+ id: "TitleAndValueContainer"
42
46
  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.Title, {
47
+ id: "Title",
43
48
  width: width
44
- }, title), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.CurrencySign, null, currency ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ""), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.FormattedValue, {
49
+ }, title), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.CurrencySignAndFormattedValueContainer, {
50
+ id: "CurrencySignAndFormattedValueContainer"
51
+ }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.CurrencySign, {
52
+ id: "CurrencySign"
53
+ }, currency ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ""), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.FormattedValue, {
54
+ id: "FormattedValue",
45
55
  width: width
46
- }, dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ""), legendData.map(function (row, index) {
47
- return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendControls, {
48
- width: width,
49
- height: height
50
- }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendColorRectangle, {
51
- color: row.color
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) : ""));
53
- }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.DoughnutChart, {
56
+ }, dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ""))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.DoughnutChartAndLegendContainer, {
57
+ id: "DoughnutChartAndLegendContainer"
58
+ }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.DoughnutChart, {
59
+ id: "DoughnutChart",
54
60
  width: width,
55
61
  height: height
56
62
  }, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, {
@@ -68,7 +74,28 @@ var TotalDoughnutChart = function TotalDoughnutChart(_ref) {
68
74
  key: "cell-".concat(index),
69
75
  fill: row.color
70
76
  });
71
- })), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))));
77
+ })), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendContainer, {
78
+ id: "LegendContainer"
79
+ }, legendData.map(function (row, index) {
80
+ return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendControlsContainer, {
81
+ id: "LegendControlsContainer",
82
+ width: width,
83
+ height: height
84
+ }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendColorRectangle, {
85
+ id: "LegendColorRectangle",
86
+ color: row.color
87
+ }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendTitleAndFormatedValueContainer, {
88
+ id: "LegendTitleAndFormatedValueContainer"
89
+ }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendTitle, {
90
+ id: "LegendTitle"
91
+ }, row.name), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendFormatedValueContainer, {
92
+ id: "LegendFormatedValueContainer"
93
+ }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendCurrencySign, {
94
+ id: "LegendCurrencySign"
95
+ }, currency ? (0, _CommonFunctions.getCurrencySign)(currencyType) : ""), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendFormattedValue, {
96
+ id: "LegendFormattedValue"
97
+ }, dotCut ? (0, _CommonFunctions.getFormattedValue)(row.value) : (0, _CommonFunctions.getNumberWithCommas)(row.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(row.value) : ""))));
98
+ })))));
72
99
  };
73
100
  exports.TotalDoughnutChart = TotalDoughnutChart;
74
101
  var _default = TotalDoughnutChart;
package/dist/stories/components/TotalDoughnutChart.style.js CHANGED
@@ -4,91 +4,53 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.Title = exports.LegendTitle = exports.LegendFormattedValue = exports.LegendCurrencySign = exports.LegendControls = exports.LegendColorRectangle = exports.FormattedValue = exports.DoughnutChart = exports.CurrencySign = exports.ControlsContainer = exports.Controls = void 0;
7
+ exports.TitleAndValueContainer = exports.Title = exports.LegendTitleAndFormatedValueContainer = exports.LegendTitle = exports.LegendFormattedValue = exports.LegendFormatedValueContainer = exports.LegendCurrencySign = exports.LegendControlsContainer = exports.LegendContainer = exports.LegendColorRectangle = exports.FormattedValue = exports.DoughnutChartAndLegendContainer = exports.DoughnutChart = exports.CurrencySignAndFormattedValueContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = 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;
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
- };
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) {
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) {
50
12
  return props.textColor;
51
13
  }, function (props) {
52
- return (props.width - MIN_WIDTH <= 0 ? MIN_WIDTH : props.width).toString().concat("", "px");
14
+ return props.width;
53
15
  }, function (props) {
54
- return (props.height - MIN_HEIGHT <= 0 ? MIN_HEIGHT : props.height).toString().concat("", "px");
16
+ return props.height;
55
17
  });
56
18
  exports.ControlsContainer = ControlsContainer;
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) {
58
- return (props.width - MIN_WIDTH <= 0 ? MIN_WIDTH : props.width).toString().concat("", "px");
19
+ var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n border-radius: 12px;\n width: ", ";\n height: ", ";\n background: #ffffff;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n //border: 1px solid blue;\n"])), function (props) {
20
+ return props.width;
59
21
  }, function (props) {
60
- return (props.height - MIN_HEIGHT <= 0 ? MIN_HEIGHT : props.height).toString().concat("", "px");
22
+ return props.height;
61
23
  });
62
24
  exports.Controls = Controls;
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
- });
25
+ var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 250px; \n margin-top: 35px;\n"])));
26
+ exports.TitleAndValueContainer = TitleAndValueContainer;
27
+ var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%; \n height: 30px;\n font-weight: 600;\n font-size: 18px;\n line-height: 22px;\n"])));
66
28
  exports.Title = Title;
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"])));
29
+ var CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n"])));
30
+ exports.CurrencySignAndFormattedValueContainer = CurrencySignAndFormattedValueContainer;
31
+ 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"])));
68
32
  exports.CurrencySign = CurrencySign;
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
- });
33
+ var FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 40px;\n line-height: 48px;\n //border: 1px solid red;\n"])));
72
34
  exports.FormattedValue = FormattedValue;
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");
75
- }, function (props) {
76
- return getDoughnutChartTop(props.height).toString().concat("", "px");
77
- });
35
+ var DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n width: 250px;\n margin-top: 35px;\n margin-bottom: 35px;\n"])));
36
+ exports.DoughnutChartAndLegendContainer = DoughnutChartAndLegendContainer;
37
+ var DoughnutChart = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n width: 90px;\n height: 90px;\n //border: 1px solid red;\n"])));
78
38
  exports.DoughnutChart = DoughnutChart;
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");
81
- }, function (props) {
82
- return getLegendControlsTop(props.height).toString().concat("", "px");
83
- });
84
- exports.LegendControls = LegendControls;
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) {
39
+ var LegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n align-items: left;\n justify-content: space-between;\n //border: 1px solid blue;\n"])));
40
+ exports.LegendContainer = LegendContainer;
41
+ var LegendControlsContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 100%;\n flex-direction: row;\n align-items: center;\n //border: 1px solid blue;\n"])));
42
+ exports.LegendControlsContainer = LegendControlsContainer;
43
+ var LegendTitleAndFormatedValueContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 170px;\n flex-direction: column;\n //border: 1px solid blue;\n"])));
44
+ exports.LegendTitleAndFormatedValueContainer = LegendTitleAndFormatedValueContainer;
45
+ var LegendFormatedValueContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n //border: 1px solid blue;\n"])));
46
+ exports.LegendFormatedValueContainer = LegendFormatedValueContainer;
47
+ var LegendColorRectangle = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n width: 16px;\n height: 16px;\n left: 8px;\n top: 14px;\n margin-left: 20px;\n margin-right: 20px;\n background: ", ";\n"])), function (props) {
86
48
  return props.color;
87
49
  });
88
50
  exports.LegendColorRectangle = LegendColorRectangle;
89
- var LegendTitle = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 150px;\n height: 18px;\n left: 30px;\n top: 1px;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n //border: 1px solid red;\n"])));
51
+ var LegendTitle = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n //border: 1px solid red;\n"])));
90
52
  exports.LegendTitle = LegendTitle;
91
- var LegendCurrencySign = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 11px;\n height: 19px;\n left: 30px;\n top: 21px;\n font-weight: 600;\n font-size: 16px;\n line-height: 19px;\n //border: 1px solid red;\n"])));
53
+ var LegendCurrencySign = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 16px;\n line-height: 19px;\n //border: 1px solid red;\n"])));
92
54
  exports.LegendCurrencySign = LegendCurrencySign;
93
- var LegendFormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 120px;\n height: 19px;\n left: 40px;\n top: 21px;\n font-weight: 600;\n font-size: 16px;\n line-height: 19px;\n //border: 1px solid red;\n"])));
55
+ var LegendFormattedValue = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 16px;\n line-height: 19px;\n //border: 1px solid red;\n"])));
94
56
  exports.LegendFormattedValue = LegendFormattedValue;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.66",
3
+ "version": "1.0.68",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {