sag_components 1.0.82 → 1.0.84

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 (11) hide show
  1. package/dist/index.js +0 -4
  2. package/dist/stories/components/Dropdown.js +71 -51
  3. package/dist/stories/components/Dropdown.style.js +2 -1
  4. package/dist/stories/components/TotalBenchmarkAreachart.js +57 -29
  5. package/dist/stories/components/TotalBenchmarkAreachart.style.js +16 -32
  6. package/dist/stories/components/TotalBenchmarkArrows.js +72 -41
  7. package/dist/stories/components/TotalBenchmarkArrows.style.js +21 -39
  8. package/dist/stories/components/TotalBenchmarkBarchart.js +2 -2
  9. package/dist/stories/components/TotalBenchmarkBarchart.style.js +4 -4
  10. package/dist/stories/components/TotalDoughnutChart.style.js +1 -1
  11. package/package.json +5 -3
package/dist/index.js CHANGED
@@ -5,10 +5,6 @@ var _react = _interopRequireDefault(require("react"));
5
5
  var _client = _interopRequireDefault(require("react-dom/client"));
6
6
  require("./index.css");
7
7
  var _App = _interopRequireDefault(require("./App"));
8
- // import '@fontsource/roboto/300.css';
9
- // import '@fontsource/roboto/400.css';
10
- // import '@fontsource/roboto/500.css';
11
- // import '@fontsource/roboto/700.css';
12
8
  var root = _client.default.createRoot(document.getElementById('root'));
13
9
  root.render( /*#__PURE__*/_react.default.createElement(_react.default.StrictMode, null, /*#__PURE__*/_react.default.createElement(_App.default, null)));
14
10
 
package/dist/stories/components/Dropdown.js CHANGED
@@ -30,11 +30,14 @@ var checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
30
30
  fontSize: "small"
31
31
  });
32
32
 
33
+ // import './fonts/Lato-Regular.ttf';
34
+
33
35
  /**
34
36
  * SAG Dropdown
35
37
  */
36
38
  var Dropdown = function Dropdown(_ref) {
37
- var width = _ref.width,
39
+ var _ref$width = _ref.width,
40
+ width = _ref$width === void 0 ? "300px" : _ref$width,
38
41
  size = _ref.size,
39
42
  text = _ref.text,
40
43
  shape = _ref.shape,
@@ -45,7 +48,9 @@ var Dropdown = function Dropdown(_ref) {
45
48
  showSearchIcon = _ref.showSearchIcon,
46
49
  options = _ref.options,
47
50
  onChange = _ref.onChange,
48
- onInputChange = _ref.onInputChange;
51
+ onInputChange = _ref.onInputChange,
52
+ _ref$labelColor = _ref.labelColor,
53
+ labelColor = _ref$labelColor === void 0 ? "#1B30AA" : _ref$labelColor;
49
54
  /**
50
55
  * SAG Dropdown
51
56
  */
@@ -72,14 +77,14 @@ var Dropdown = function Dropdown(_ref) {
72
77
  // round
73
78
  return {
74
79
  "& .MuiOutlinedInput-root": {
75
- borderRadius: "50px",
80
+ borderRadius: "12px",
76
81
  legend: {
77
- marginLeft: "30px"
82
+ marginLeft: "60px"
78
83
  }
79
84
  },
80
85
  "& .MuiAutocomplete-inputRoot": {
81
86
  paddingLeft: "20px !important",
82
- borderRadius: "50px"
87
+ borderRadius: "12px"
83
88
  },
84
89
  "& .MuiInputLabel-outlined": {
85
90
  paddingLeft: "20px"
@@ -103,8 +108,14 @@ var Dropdown = function Dropdown(_ref) {
103
108
  });
104
109
  };
105
110
  var onChangeHandler = function onChangeHandler(event, newValue) {
106
- setCurrentOption(newValue);
107
- onChange(event, newValue);
111
+ setCurrentOption({
112
+ syntheticBaseEvent: event,
113
+ newValue: newValue
114
+ });
115
+ onChange({
116
+ syntheticBaseEvent: event,
117
+ newValue: newValue
118
+ });
108
119
  };
109
120
  var getAutocompleteSingle = function getAutocompleteSingle() {
110
121
  return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
@@ -129,18 +140,38 @@ var Dropdown = function Dropdown(_ref) {
129
140
  sx: getTextFieldStyle(),
130
141
  placeholder: placeHolder,
131
142
  InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
143
+ style: {
144
+ fontSize: "14px",
145
+ fontFamily: "Lato"
146
+ },
132
147
  startAdornment: showSearchIcon ? /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
133
148
  position: "start"
134
149
  }, /*#__PURE__*/_react.default.createElement(_Search.default, {
135
150
  fontSize: "medium"
136
151
  })) : null
137
- })
152
+ }),
153
+ InputLabelProps: {
154
+ style: {
155
+ color: labelColor,
156
+ fontSize: "16px",
157
+ fontFamily: "Lato"
158
+ }
159
+ }
138
160
  }));
161
+ },
162
+ ListboxProps: {
163
+ style: {
164
+ fontSize: "14px",
165
+ fontFamily: "Lato"
166
+ }
139
167
  }
140
168
  });
141
169
  };
142
170
  var getAutocompleteMulti = function getAutocompleteMulti() {
143
171
  return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
172
+ style: {
173
+ width: width
174
+ },
144
175
  onChange: function onChange(event, newValue) {
145
176
  onChangeHandler(event, newValue);
146
177
  },
@@ -148,8 +179,9 @@ var Dropdown = function Dropdown(_ref) {
148
179
  onInputChangeHandler(event, newInputValue);
149
180
  },
150
181
  multiple: true,
151
- limitTags: limitTagsOnMultiSelect,
152
- size: size,
182
+ limitTags: limitTagsOnMultiSelect
183
+ //size={size}
184
+ ,
153
185
  id: "checkboxes-tags",
154
186
  options: options,
155
187
  disableCloseOnSelect: true,
@@ -163,14 +195,13 @@ var Dropdown = function Dropdown(_ref) {
163
195
  icon: icon,
164
196
  checkedIcon: checkedIcon,
165
197
  style: {
166
- marginRight: 8
198
+ marginRight: 8,
199
+ fontSize: "14px",
200
+ fontFamily: "Lato"
167
201
  },
168
202
  checked: selected
169
203
  }), option.label);
170
204
  },
171
- style: {
172
- width: width
173
- },
174
205
  renderInput: function renderInput(params) {
175
206
  return showSearchIcon && (!currentOption || currentOption && currentOption.length === 0) ? /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
176
207
  label: text,
@@ -178,18 +209,42 @@ var Dropdown = function Dropdown(_ref) {
178
209
  sx: getTextFieldStyle(),
179
210
  placeholder: placeHolder,
180
211
  InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
212
+ style: {
213
+ fontSize: "16px",
214
+ fontFamily: "Lato"
215
+ },
181
216
  startAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
182
217
  position: "start"
183
218
  }, /*#__PURE__*/_react.default.createElement(_Search.default, {
184
219
  fontSize: "medium"
185
220
  }))
186
- })
221
+ }),
222
+ InputLabelProps: {
223
+ style: {
224
+ color: labelColor,
225
+ fontSize: "16px",
226
+ fontFamily: "Lato"
227
+ }
228
+ }
187
229
  })) : /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
188
230
  label: text,
189
231
  size: size,
190
232
  sx: getTextFieldStyle(),
191
- placeholder: placeHolder
233
+ placeholder: placeHolder,
234
+ InputLabelProps: {
235
+ style: {
236
+ color: labelColor,
237
+ fontSize: "16px",
238
+ fontFamily: "Lato"
239
+ }
240
+ }
192
241
  }));
242
+ },
243
+ ListboxProps: {
244
+ style: {
245
+ fontSize: "14px",
246
+ fontFamily: "Lato"
247
+ }
193
248
  }
194
249
  });
195
250
  };
@@ -197,41 +252,6 @@ var Dropdown = function Dropdown(_ref) {
197
252
  width: width
198
253
  }, multiSelect ? getAutocompleteMulti() : getAutocompleteSingle());
199
254
  };
200
-
201
- // Dropdown.propTypes = {
202
- // /**
203
- // * dropdown width
204
- // */
205
- // width: PropTypes.string,
206
-
207
- // /**
208
- // * dropdown size: small/large
209
- // */
210
- // size: PropTypes.string,
211
-
212
- // /**
213
- // * dropdown initial input text
214
- // */
215
- // text: PropTypes.string,
216
-
217
- // /**
218
- // * arrayOf <T> - options array to load into dropdown
219
- // */
220
- // options: PropTypes.arrayOf,
221
-
222
- // /**
223
- // * shape: round/square
224
- // */
225
- // shape: PropTypes.string,
226
- // };
227
-
228
- // Dropdown.defaultProps = {
229
- // width: 300,
230
- // size: "small",
231
- // text: "Select retailer...",
232
- // options: [],
233
- // shape: "round",
234
- // };
235
255
  exports.Dropdown = Dropdown;
236
256
  var _default = Dropdown;
237
257
  exports.default = _default;
package/dist/stories/components/Dropdown.style.js CHANGED
@@ -7,8 +7,9 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.DropdownContainer = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ require("../../stories/components/font.css");
10
11
  var _templateObject;
11
- var DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: ", "; \n text-align: left; \n position: relative; \n align-items: center;\n justify-content: center;\n"])), function (props) {
12
+ var DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: ", "; \n text-align: left; \n position: relative; \n align-items: center;\n justify-content: center;\n font-family: Lato; \n font-size: \"14px\";\n"])), function (props) {
12
13
  return props.width;
13
14
  });
14
15
  exports.DropdownContainer = DropdownContainer;
package/dist/stories/components/TotalBenchmarkAreachart.js CHANGED
@@ -1,13 +1,15 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.default = exports.TotalBenchmarkAreachart = void 0;
8
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
9
11
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
10
- var _react = _interopRequireDefault(require("react"));
12
+ var _react = _interopRequireWildcard(require("react"));
11
13
  var _ArrowUpIcon = require("./icons/ArrowUpIcon");
12
14
  var _ArrowDownIcon = require("./icons/ArrowDownIcon");
13
15
  var _recharts = require("recharts");
@@ -25,9 +27,9 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
25
27
  benchmarkValue = _ref.benchmarkValue,
26
28
  areaChartData = _ref.areaChartData,
27
29
  _ref$width = _ref.width,
28
- width = _ref$width === void 0 ? 260 : _ref$width,
30
+ width = _ref$width === void 0 ? "250px" : _ref$width,
29
31
  _ref$height = _ref.height,
30
- height = _ref$height === void 0 ? 350 : _ref$height,
32
+ height = _ref$height === void 0 ? "280px" : _ref$height,
31
33
  _ref$textColor = _ref.textColor,
32
34
  textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
33
35
  _ref$areaChart1Color = _ref.areaChart1Color,
@@ -35,23 +37,56 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
35
37
  _ref$areaChart2Color = _ref.areaChart2Color,
36
38
  areaChart2Color = _ref$areaChart2Color === void 0 ? "#96B4FF" : _ref$areaChart2Color,
37
39
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
40
+ var DEFAULT_ROOT_FONT = 16;
41
+ var DEFAULT_COMPONENT_WIDTH = 250;
42
+ var DEFAULT_COMPONENT_HEIGHT = 280;
43
+ var _useState = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat("", "px")),
44
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
45
+ rootFont = _useState2[0],
46
+ setRootFont = _useState2[1];
47
+ var _useState3 = (0, _react.useState)(1),
48
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
49
+ heightFactor = _useState4[0],
50
+ setHeightFactor = _useState4[1];
51
+ var controlsContainerRef = (0, _react.useRef)();
52
+ (0, _react.useEffect)(function () {
53
+ var offsetWidth = controlsContainerRef.current.offsetWidth;
54
+ setRootFont(getRootFont(offsetWidth));
55
+ }, [width]);
56
+ (0, _react.useEffect)(function () {
57
+ var offsetHeight = controlsContainerRef.current.offsetHeight;
58
+ var factor = offsetHeight / DEFAULT_COMPONENT_HEIGHT;
59
+ setHeightFactor(factor);
60
+ }, [height]);
61
+ var getRootFont = function getRootFont(width) {
62
+ var relation = width.toString().replace("px", "").replace("%", "") / DEFAULT_COMPONENT_WIDTH;
63
+ var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
64
+ return fontRoot;
65
+ };
66
+ var getSizeFactor = function getSizeFactor() {
67
+ return rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT;
68
+ };
38
69
  var getArrowSign = function getArrowSign(arrowSign) {
39
70
  if (!arrowSign) {
40
71
  return "";
41
72
  }
42
73
  if (arrowSign == "up") {
43
- return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.DetailsRowArrow, {
44
- value: value
74
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.DetailsRowArrowContainer, {
75
+ id: "DetailsRowArrowContainer",
76
+ value: value,
77
+ height: 25 * getSizeFactor
45
78
  }, /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, {
46
- width: "25",
47
- height: "25"
79
+ width: 25 * getSizeFactor(),
80
+ height: 25 * getSizeFactor
48
81
  }));
49
82
  } else {
50
- return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.DetailsRowArrow, {
51
- value: value
83
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.DetailsRowArrowContainer, {
84
+ id: "DetailsRowArrowContainer",
85
+ value: value,
86
+ height: 25 * getSizeFactor
52
87
  }, /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, {
53
- width: "25",
54
- height: "25"
88
+ width: 25 * getSizeFactor(),
89
+ height: 25 * getSizeFactor()
55
90
  }));
56
91
  }
57
92
  };
@@ -59,40 +94,33 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
59
94
  id: "ControlsContainer",
60
95
  height: height,
61
96
  width: width,
62
- textColor: textColor
97
+ textColor: textColor,
98
+ ref: controlsContainerRef,
99
+ rootFont: rootFont
63
100
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.Controls, {
64
- id: "Controls",
65
- height: height,
66
- width: width
101
+ id: "Controls"
67
102
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.Title, {
68
- id: "Title",
69
- width: width
103
+ id: "Title"
70
104
  }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.ValueAndBenchmarkContainer, {
71
- id: "ValueAndBenchmarkContainer",
72
- height: height,
73
- width: width
105
+ id: "ValueAndBenchmarkContainer"
74
106
  }, getArrowSign(arrowSign), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.FormattedValue, {
75
- id: "FormattedValue",
76
- width: width
107
+ id: "FormattedValue"
77
108
  }, value, "%"), benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.BenchmarkContainer, {
78
- id: "BenchmarkContainer",
79
- width: width
109
+ id: "BenchmarkContainer"
80
110
  }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
81
111
  id: "Benchmark",
82
112
  totalValue: benchmarkTotalValue,
83
113
  currentValue: value,
84
114
  benchmarkValue: benchmarkValue,
85
- height: 12,
86
- width: 75,
115
+ height: 12 * getSizeFactor(),
116
+ width: 85 * getSizeFactor(),
87
117
  color: "#79DB95",
88
118
  linearGradientColor: "#C3EFD0",
89
119
  linearGradientUnderAvarageColor: "#FDB1B1",
90
120
  underAvarageColor: "#FD5959",
91
121
  backgroundColor: "#F2F2F2"
92
122
  })) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.AreaChartContainer, {
93
- id: "AreaChartContainer",
94
- height: height,
95
- width: width
123
+ id: "AreaChartContainer"
96
124
  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
97
125
  id: "ResponsiveContainer",
98
126
  width: "100%",
package/dist/stories/components/TotalBenchmarkAreachart.style.js CHANGED
@@ -4,51 +4,35 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.ValueAndBenchmarkContainer = exports.Title = exports.FormattedValue = exports.DetailsRowArrow = exports.ControlsContainer = exports.Controls = exports.BottomDetailsRowTitle = exports.BottomDetailsRowContainer = exports.BenchmarkContainer = exports.AreaChartContainer = void 0;
7
+ exports.ValueAndBenchmarkContainer = exports.Title = exports.FormattedValue = exports.DetailsRowArrowContainer = exports.ControlsContainer = exports.Controls = exports.BottomDetailsRowTitle = exports.BottomDetailsRowContainer = exports.BenchmarkContainer = exports.AreaChartContainer = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
11
- var MIN_HEIGHT = 230;
12
- var MIN_WIDTH = 250;
13
- var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n margin: 0px 0 0px;\n font-family: \"Lato\", sans-serif;\n font-style: normal;\n color: ", ";\n width: ", ";\n height: ", ";\n //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n border-radius: 12px;\n //border: 1px solid red;\n"])), function (props) {
11
+ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n font-family: \"Lato\", sans-serif;\n font-style: normal;\n font-size: ", ";\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n align-content: center;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])), function (props) {
12
+ return props.rootFont;
13
+ }, function (props) {
14
14
  return props.textColor;
15
15
  }, function (props) {
16
- return (props.width - MIN_WIDTH <= 0 ? MIN_WIDTH : props.width).toString().concat("", "px");
16
+ return props.width;
17
17
  }, function (props) {
18
- return (props.height - MIN_HEIGHT <= 0 ? MIN_HEIGHT : props.height).toString().concat("", "px");
18
+ return props.height;
19
19
  });
20
20
  exports.ControlsContainer = ControlsContainer;
21
- var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n border-radius: 12px;\n width: ", ";\n height: ", ";\n top: 20px;\n left: 20px;\n background: #ffffff;\n //border: 1px solid yellow;\n"])), function (props) {
22
- return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
23
- }, function (props) {
24
- return (props.height - MIN_HEIGHT <= 0 ? 200 : 200 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
25
- });
21
+ var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n border-radius: 12px;\n width: 90%;\n height: 90%;\n background: #ffffff;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n"])));
26
22
  exports.Controls = Controls;
27
- var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: ", ";\n height: 22px;\n left: 0px;\n top: 0px;\n font-weight: 600;\n font-size: 16px;\n line-height: 22px;\n //border: 1px solid red;\n"])), function (props) {
28
- return (props.width - MIN_WIDTH <= 0 ? 200 : 200 + (props.width - MIN_WIDTH)).toString().concat("", "px");
29
- });
23
+ var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n font-weight: 600;\n font-size: 1em;\n margin-top: 15%;\n"])));
30
24
  exports.Title = Title;
31
- var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n display: inline-flex;\n width: ", ";\n height: ", ";\n left: 0px;\n top: 30px;\n //border: 1px solid green;\n"])), function (props) {
32
- return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
33
- }, function (props) {
34
- return (props.height - MIN_HEIGHT <= 0 ? 0 : 0 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
35
- });
25
+ var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n width: 14em;\n height: 20%;\n"])));
36
26
  exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
37
- var DetailsRowArrow = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([" \n margin-left: 0px;\n margin-top: 12px; \n margin-right: 2px;\n height: 25px; \n font-size: 12px;\n line-height: 14px; \n //border: 1px solid red;\n"])));
38
- exports.DetailsRowArrow = DetailsRowArrow;
39
- var FormattedValue = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n //position: absolute;\n margin-left: 2px;\n width: ", ";\n height: 48px;\n left: 0px;\n top: 40px;\n font-weight: 500;\n font-size: 40px;\n line-height: 48px;\n //border: 1px solid red;\n"])), function (props) {
40
- return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
41
- });
27
+ var DetailsRowArrowContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([" \n display: flex;\n width: 1.2em; \n align-items: flex-end;\n"])));
28
+ exports.DetailsRowArrowContainer = DetailsRowArrowContainer;
29
+ var FormattedValue = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.1em;\n font-weight: 500;\n font-size: 2.2em; \n"])));
42
30
  exports.FormattedValue = FormattedValue;
43
- var BenchmarkContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n //position: absolute;\n margin-left: 10px;\n margin-top: 26px;\n width: 100px;\n height: 12px;\n left: ", ";\n //top: 24px;\n //border: 1px solid red;\n"])), function (props) {
44
- return (props.width - MIN_WIDTH <= 0 ? 115 : 115 + (props.width - MIN_WIDTH)).toString().concat("", "px");
45
- });
31
+ var BenchmarkContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 0.7em;\n width: 5.35em;\n"])));
46
32
  exports.BenchmarkContainer = BenchmarkContainer;
47
- var AreaChartContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n // display: inline-flex;\n //width: 240 px;\n margin-left: -20px;\n margin-top: 0px; \n margin-right: -10px;\n height: ", ";\n left: 0px;\n top: 100px;\n //border: 1px solid green;\n"])), function (props) {
48
- return (props.height - MIN_HEIGHT <= 0 ? 100 : 100 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
49
- });
33
+ var AreaChartContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n height: 50%;\n\n"])));
50
34
  exports.AreaChartContainer = AreaChartContainer;
51
- var BottomDetailsRowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n //width: 245px;\n height: 20px;\n left: 0px;\n top: 3px;\n \n //border: 1px solid brown;\n"])));
35
+ var BottomDetailsRowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-start;\n justify-content: center;\n text-align: center;\n height: 20%;\n"])));
52
36
  exports.BottomDetailsRowContainer = BottomDetailsRowContainer;
53
- var BottomDetailsRowTitle = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n margin-top: 1px;\n margin-left: 1px; \n margin-right: 1px;\n height: 19px;\n width: 115px;\n left: 0px;\n top: 0px;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n //border: 1px solid red;\n"])));
37
+ var BottomDetailsRowTitle = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center; \n margin-top: 0.2em;\n width: 14em;\n font-weight: 400;\n font-size: 0.7em;\n"])));
54
38
  exports.BottomDetailsRowTitle = BottomDetailsRowTitle;
package/dist/stories/components/TotalBenchmarkArrows.js CHANGED
@@ -1,12 +1,14 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.default = exports.TotalBenchmarkArrows = void 0;
9
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
8
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
9
- var _react = _interopRequireDefault(require("react"));
11
+ var _react = _interopRequireWildcard(require("react"));
10
12
  var _ArrowUpIcon = require("./icons/ArrowUpIcon");
11
13
  var _ArrowDownIcon = require("./icons/ArrowDownIcon");
12
14
  var _CommonFunctions = require("./CommonFunctions");
@@ -25,79 +27,108 @@ var TotalBenchmarkArrows = function TotalBenchmarkArrows(_ref) {
25
27
  _ref$dotCut = _ref.dotCut,
26
28
  dotCut = _ref$dotCut === void 0 ? true : _ref$dotCut,
27
29
  _ref$width = _ref.width,
28
- width = _ref$width === void 0 ? 260 : _ref$width,
30
+ width = _ref$width === void 0 ? "250px" : _ref$width,
29
31
  _ref$height = _ref.height,
30
- height = _ref$height === void 0 ? 350 : _ref$height,
32
+ height = _ref$height === void 0 ? "280px" : _ref$height,
31
33
  _ref$textColor = _ref.textColor,
32
34
  textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
33
35
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
34
- var getArrowSign = function getArrowSign(value) {
35
- if (!value) {
36
+ var DEFAULT_ROOT_FONT = 16;
37
+ var DEFAULT_COMPONENT_WIDTH = 250;
38
+ var DEFAULT_COMPONENT_HEIGHT = 280;
39
+ var _useState = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat("", "px")),
40
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
41
+ rootFont = _useState2[0],
42
+ setRootFont = _useState2[1];
43
+ var _useState3 = (0, _react.useState)(1),
44
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
45
+ heightFactor = _useState4[0],
46
+ setHeightFactor = _useState4[1];
47
+ var controlsContainerRef = (0, _react.useRef)();
48
+ (0, _react.useEffect)(function () {
49
+ var offsetWidth = controlsContainerRef.current.offsetWidth;
50
+ setRootFont(getRootFont(offsetWidth));
51
+ }, [width]);
52
+ (0, _react.useEffect)(function () {
53
+ var offsetHeight = controlsContainerRef.current.offsetHeight;
54
+ var factor = offsetHeight / DEFAULT_COMPONENT_HEIGHT;
55
+ setHeightFactor(factor);
56
+ }, [height]);
57
+ var getRootFont = function getRootFont(width) {
58
+ var relation = width.toString().replace("px", "").replace("%", "") / DEFAULT_COMPONENT_WIDTH;
59
+ var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
60
+ return fontRoot;
61
+ };
62
+ var getSizeFactor = function getSizeFactor() {
63
+ return rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT;
64
+ };
65
+ var getArrowSign = function getArrowSign(arrowSign) {
66
+ if (!arrowSign) {
36
67
  return "";
37
68
  }
38
- if (value >= 0) {
39
- return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowArrow, {
40
- value: value
41
- }, /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, null));
69
+ if (arrowSign == "up") {
70
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowArrowContainer, {
71
+ id: "DetailsRowArrowContainer",
72
+ value: value,
73
+ height: 12 * getSizeFactor
74
+ }, /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, {
75
+ width: 12 * getSizeFactor(),
76
+ height: 12 * getSizeFactor
77
+ }));
42
78
  } else {
43
- return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowArrow, {
44
- value: value
45
- }, /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, null));
79
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowArrowContainer, {
80
+ id: "DetailsRowArrowContainer",
81
+ value: value,
82
+ height: 12 * getSizeFactor
83
+ }, /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, {
84
+ width: 12 * getSizeFactor(),
85
+ height: 12 * getSizeFactor()
86
+ }));
46
87
  }
47
88
  };
48
89
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.ControlsContainer, {
49
90
  id: "ControlsContainer",
50
91
  height: height,
51
92
  width: width,
52
- textColor: textColor
93
+ textColor: textColor,
94
+ ref: controlsContainerRef,
95
+ rootFont: rootFont
53
96
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.Controls, {
54
- id: "Controls",
55
- height: height,
56
- width: width
97
+ id: "Controls"
57
98
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.Title, {
58
- id: "Title",
59
- width: width
60
- }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.FormattedValue, {
61
- id: "FormattedValue",
62
- width: width
99
+ id: "Title"
100
+ }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.ValueAndBenchmarkContainer, {
101
+ id: "ValueAndBenchmarkContainer"
102
+ }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.FormattedValue, {
103
+ id: "FormattedValue"
63
104
  }, dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ""), benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.BenchmarkContainer, {
64
- id: "BenchmarkContainer",
65
- width: width
105
+ id: "BenchmarkContainer"
66
106
  }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
67
107
  totalValue: benchmarkTotalValue,
68
108
  currentValue: value,
69
109
  benchmarkValue: benchmarkValue,
70
- height: 12,
71
- width: 75,
110
+ height: 12 * getSizeFactor(),
111
+ width: 85 * getSizeFactor(),
72
112
  color: "#79DB95",
73
113
  linearGradientColor: "#C3EFD0",
74
114
  linearGradientUnderAvarageColor: "#FDB1B1",
75
115
  underAvarageColor: "#FD5959",
76
116
  backgroundColor: "#F2F2F2"
77
- })) : "", /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsContainer, {
78
- id: "DetailsContainer",
79
- height: height,
80
- width: width
117
+ })) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsContainer, {
118
+ id: "DetailsContainer"
81
119
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsTitle, {
82
- id: "DetailsTitle",
83
- height: height,
84
- width: width
120
+ id: "DetailsTitle"
85
121
  }, detailsTitle), detailsData.map(function (item, index) {
86
122
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowContainer, {
87
- id: "DetailsRowContainer",
88
- height: height,
89
- width: width,
90
- index: index
123
+ id: "DetailsRowContainer"
91
124
  }, getArrowSign(item.value), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowFormattedValue, {
92
125
  id: "DetailsRowFormattedValue"
93
126
  }, item.value ? Math.abs(item.value) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowPercentSign, {
94
127
  id: "DetailsRowPercentSign"
95
- }, " % "), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowTitle, {
96
- id: "DetailsRowTitle",
97
- height: height,
98
- width: width
128
+ }, " ", "%", " "), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowTitle, {
129
+ id: "DetailsRowTitle"
99
130
  }, item.title));
100
- })), ";"));
131
+ }))));
101
132
  };
102
133
  exports.TotalBenchmarkArrows = TotalBenchmarkArrows;
103
134
  var _default = TotalBenchmarkArrows;
package/dist/stories/components/TotalBenchmarkArrows.style.js CHANGED
@@ -4,59 +4,41 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.Title = exports.FormattedValue = exports.DetailsTitle = exports.DetailsRowTitle = exports.DetailsRowPercentSign = exports.DetailsRowFormattedValue = exports.DetailsRowContainer = exports.DetailsRowArrow = exports.DetailsContainer = exports.ControlsContainer = exports.Controls = exports.BenchmarkContainer = void 0;
7
+ exports.ValueAndBenchmarkContainer = exports.Title = exports.FormattedValue = exports.DetailsTitle = exports.DetailsRowTitle = exports.DetailsRowPercentSign = exports.DetailsRowFormattedValue = exports.DetailsRowContainer = exports.DetailsRowArrowContainer = exports.DetailsContainer = exports.ControlsContainer = exports.Controls = exports.BenchmarkContainer = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
11
- var MIN_HEIGHT = 230;
12
- var MIN_WIDTH = 250;
13
- var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n margin: 0px 0 0px;\n font-family: \"Lato\", sans-serif;\n font-style: normal;\n color: ", ";\n width: ", ";\n height: ", ";\n //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n border-radius: 12px;\n //border: 1px solid red;\n"])), function (props) {
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
11
+ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n font-family: \"Lato\", sans-serif;\n font-style: normal;\n font-size: ", ";\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n align-content: center;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])), function (props) {
12
+ return props.rootFont;
13
+ }, function (props) {
14
14
  return props.textColor;
15
15
  }, function (props) {
16
- return (props.width - MIN_WIDTH <= 0 ? MIN_WIDTH : props.width).toString().concat("", "px");
16
+ return props.width;
17
17
  }, function (props) {
18
- return (props.height - MIN_HEIGHT <= 0 ? MIN_HEIGHT : props.height).toString().concat("", "px");
18
+ return props.height;
19
19
  });
20
20
  exports.ControlsContainer = ControlsContainer;
21
- var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n border-radius: 12px;\n width: ", ";\n height: ", ";\n top: 20px;\n left: 20px;\n background: #ffffff;\n //border: 1px solid yellow;\n"])), function (props) {
22
- return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
23
- }, function (props) {
24
- return (props.height - MIN_HEIGHT <= 0 ? 200 : 200 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
25
- });
21
+ var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n border-radius: 12px;\n width: 90%;\n height: 90%;\n background: #ffffff;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n"])));
26
22
  exports.Controls = Controls;
27
- var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: ", ";\n height: 22px;\n left: 0px;\n top: 0px;\n font-weight: 600;\n font-size: 16px;\n line-height: 22px;\n //border: 1px solid red;\n"])), function (props) {
28
- return (props.width - MIN_WIDTH <= 0 ? 230 : 230 + (props.width - MIN_WIDTH)).toString().concat("", "px");
29
- });
23
+ var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n font-weight: 600;\n font-size: 1em;\n margin-top: 15%;\n"])));
30
24
  exports.Title = Title;
31
- var FormattedValue = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: ", ";\n height: 48px;\n left: 0px;\n top: 40px;\n font-weight: 500;\n font-size: 40px;\n line-height: 48px;\n //border: 1px solid red;\n"])), function (props) {
32
- return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
33
- });
25
+ var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: baseline;\n width: 14em;\n height: 20%;\n"])));
26
+ exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
27
+ var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.1em;\n font-weight: 500;\n font-size: 2.2em;\n"])));
34
28
  exports.FormattedValue = FormattedValue;
35
- var BenchmarkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 75px;\n height: 12px;\n left: ", ";\n top: 66px;\n //border: 1px solid red;\n"])), function (props) {
36
- return (props.width - MIN_WIDTH <= 0 ? 140 : 140 + (props.width - MIN_WIDTH)).toString().concat("", "px");
37
- });
29
+ var BenchmarkContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 0.7em;\n width: 5.35em;\n"])));
38
30
  exports.BenchmarkContainer = BenchmarkContainer;
39
- var DetailsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: ", "; \n height: ", "; \n left: 0px;\n top: 120px;\n //border: 1px solid green;\n"])), function (props) {
40
- return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
41
- }, function (props) {
42
- return (props.height - MIN_HEIGHT <= 0 ? 80 : 80 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
43
- });
31
+ var DetailsContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n height: 50%;\n"])));
44
32
  exports.DetailsContainer = DetailsContainer;
45
- var DetailsTitle = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: ", ";\n height: 22px;\n left: 0px;\n top: 0px;\n font-weight: 600;\n font-size: 16px;\n line-height: 19px;\n //border: 1px solid red;\n"])), function (props) {
46
- return (props.width - MIN_WIDTH <= 0 ? 230 : 230 + (props.width - MIN_WIDTH)).toString().concat("", "px");
47
- });
33
+ var DetailsTitle = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n height: 25%;\n font-weight: 600;\n font-size: 1em;\n"])));
48
34
  exports.DetailsTitle = DetailsTitle;
49
- var DetailsRowContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n display: inline-flex;\n width: ", ";\n height: 35px;\n left: 0px;\n top: ", ";\n //border: 1px solid brown;\n"])), function (props) {
50
- return (props.width - MIN_WIDTH <= 0 ? 220 : 220 + (props.width - MIN_WIDTH)).toString().concat("", "px");
51
- }, function (props) {
52
- return (35 + 35 * props.index).toString().concat("", "px");
53
- });
35
+ var DetailsRowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n text-align: center;\n align-items: baseline;\n height: 25%;\n"])));
54
36
  exports.DetailsRowContainer = DetailsRowContainer;
55
- var DetailsRowArrow = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)([" \n margin-left: 0px;\n margin-top: 4px; \n height: 12px; \n font-size: 12px;\n line-height: 14px; \n //border: 1px solid red;\n"])));
56
- exports.DetailsRowArrow = DetailsRowArrow;
57
- var DetailsRowFormattedValue = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 5px;\n height: 19px;\n left: 0px;\n top: 0px;\n font-weight: 600;\n font-size: 16px;\n line-height: 19px;\n //border: 1px solid red;\n"])));
37
+ var DetailsRowArrowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 0.8em;\n align-items: flex-end;\n height: 25%;\n"])));
38
+ exports.DetailsRowArrowContainer = DetailsRowArrowContainer;
39
+ var DetailsRowFormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 0.3em;\n font-weight: 600;\n font-size: 0.88em;\n"])));
58
40
  exports.DetailsRowFormattedValue = DetailsRowFormattedValue;
59
- var DetailsRowPercentSign = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)([" \n margin-left: 5px;\n margin-top: 3px;\n margin-right: 10px;\n text-align: bottom;\n height: 16px;\n left: 32px;\n top: 5px;\n font-weight: 600;\n font-size: 12px;\n line-height: 14px;\n //border: 1px solid red;\n"])));
41
+ var DetailsRowPercentSign = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 0.3em;\n font-weight: 400;\n font-size: 0.88em;\n"])));
60
42
  exports.DetailsRowPercentSign = DetailsRowPercentSign;
61
- var DetailsRowTitle = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)([" \n height: 19px;\n left: 50px;\n top: 0px;\n font-weight: 400;\n font-size: 16px;\n line-height: 19px;\n //border: 1px solid red;\n"])));
43
+ var DetailsRowTitle = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 0.3em;\n font-weight: 400;\n font-size: 0.88em;\n"])));
62
44
  exports.DetailsRowTitle = DetailsRowTitle;
package/dist/stories/components/TotalBenchmarkBarchart.js CHANGED
@@ -101,8 +101,8 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
101
101
  totalValue: benchmarkTotalValue,
102
102
  currentValue: value,
103
103
  benchmarkValue: benchmarkValue,
104
- height: 15 * getSizeFactor(),
105
- width: 92 * getSizeFactor(),
104
+ height: 12 * getSizeFactor(),
105
+ width: 85 * getSizeFactor(),
106
106
  color: "#79DB95",
107
107
  linearGradientColor: "#C3EFD0",
108
108
  linearGradientUnderAvarageColor: "#FDB1B1",
package/dist/stories/components/TotalBenchmarkBarchart.style.js CHANGED
@@ -20,17 +20,17 @@ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templ
20
20
  exports.ControlsContainer = ControlsContainer;
21
21
  var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n border-radius: 12px;\n width: 90%;\n height: 90%;\n background: #ffffff;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n"])));
22
22
  exports.Controls = Controls;
23
- var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 14em;\n height: 10%;\n"])));
23
+ var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 14em;\n height: 7%;\n margin-top: 10%;\n"])));
24
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"])));
25
+ var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n font-weight: 600;\n font-size: 1em;\n \n"])));
26
26
  exports.Title = Title;
27
- var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n align-items: baseline;\n width: 14em;\n height: 20%;\n"])));
27
+ var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n align-items: baseline;\n width: 14em;\n height: 15%;\n \n"])));
28
28
  exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
29
29
  var CurrencySign = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n width: 0.8em;\n font-weight: 500;\n font-size: 1em;\n"])));
30
30
  exports.CurrencySign = CurrencySign;
31
31
  var FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.1em;\n font-weight: 500;\n font-size: 2.2em;\n"])));
32
32
  exports.FormattedValue = FormattedValue;
33
- var BenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.7em;\n width: 5.8em;\n"])));
33
+ var BenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.7em;\n width: 5.35em;\n"])));
34
34
  exports.BenchmarkContainer = BenchmarkContainer;
35
35
  var BarchartContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\n width: 14em;\n height: 50%;\n\n"])));
36
36
  exports.BarchartContainer = BarchartContainer;
package/dist/stories/components/TotalDoughnutChart.style.js CHANGED
@@ -20,7 +20,7 @@ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templ
20
20
  exports.ControlsContainer = ControlsContainer;
21
21
  var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n border-radius: 12px;\n width:100%;\n height:100%;\n background: #ffffff;\n justify-content: center;\n align-items: center;\n flex-direction: column; \n"])));
22
22
  exports.Controls = Controls;
23
- var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 90%;\n margin-top: 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: 10%;\n"])));
24
24
  exports.TitleAndValueContainer = TitleAndValueContainer;
25
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"])));
26
26
  exports.Title = Title;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.82",
3
+ "version": "1.0.84",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
@@ -36,7 +36,8 @@
36
36
  "sass-loader": "^10.4.1",
37
37
  "storybook": "^7.0.6",
38
38
  "style-loader": "^2.0.0",
39
- "styled-components": "^5.3.10"
39
+ "styled-components": "^5.3.10",
40
+ "typings-for-css-modules-loader": "^1.7.0"
40
41
  },
41
42
  "dependencies": {
42
43
  "@dnd-kit/core": "^6.0.8",
@@ -52,7 +53,8 @@
52
53
  "classnames": "^2.3.2",
53
54
  "hoopy": "^0.1.4",
54
55
  "react-scripts": "5.0.1",
55
- "recharts": "^2.6.2"
56
+ "recharts": "^2.6.2",
57
+ "typeface-roboto": "^1.1.13"
56
58
  },
57
59
  "browserslist": {
58
60
  "production": [