sag_components 1.0.365 → 1.0.367

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 (4) hide show
  1. package/dist/stories/components/TotalBenchmarkAreachart.js +65 -24
  2. package/dist/stories/components/TotalBenchmarkAreachart.style.js +10 -12
  3. package/dist/stories/components/icons/ArrowUpIcon.js +2 -2
  4. package/package.json +1 -1
package/dist/stories/components/TotalBenchmarkAreachart.js CHANGED
@@ -46,24 +46,15 @@ var TotalBenchmarkAreachart = exports.TotalBenchmarkAreachart = function TotalBe
46
46
  rootFont = _useState2[0],
47
47
  setRootFont = _useState2[1];
48
48
  var anotherRef = (0, _react.useRef)(null);
49
- var _useState3 = (0, _react.useState)(1),
49
+ var _useState3 = (0, _react.useState)(''),
50
50
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
51
- heightFactor = _useState4[0],
52
- setHeightFactor = _useState4[1];
53
- var _useState5 = (0, _react.useState)(''),
54
- _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
55
- activeLabel = _useState6[0],
56
- setActiveLabel = _useState6[1];
51
+ activeLabel = _useState4[0],
52
+ setActiveLabel = _useState4[1];
57
53
  var controlsContainerRef = (0, _react.useRef)();
58
54
  (0, _react.useEffect)(function () {
59
55
  var offsetWidth = controlsContainerRef.current.offsetWidth;
60
56
  setRootFont(getRootFont(offsetWidth));
61
57
  }, [width]);
62
- (0, _react.useEffect)(function () {
63
- var offsetHeight = controlsContainerRef.current.offsetHeight;
64
- var factor = offsetHeight / DEFAULT_COMPONENT_HEIGHT;
65
- setHeightFactor(factor);
66
- }, [height]);
67
58
  var getRootFont = function getRootFont(width) {
68
59
  var relation = width.toString().replace('px', '').replace('%', '') / DEFAULT_COMPONENT_WIDTH;
69
60
  var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat('', 'px');
@@ -79,8 +70,7 @@ var TotalBenchmarkAreachart = exports.TotalBenchmarkAreachart = function TotalBe
79
70
  if (arrowSign === 'up') {
80
71
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.DetailsRowArrowContainer, {
81
72
  id: "DetailsRowArrowContainer",
82
- value: value,
83
- height: 25 * getSizeFactor()
73
+ value: value
84
74
  }, /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, {
85
75
  width: 25 * getSizeFactor(),
86
76
  height: 25 * getSizeFactor()
@@ -88,8 +78,7 @@ var TotalBenchmarkAreachart = exports.TotalBenchmarkAreachart = function TotalBe
88
78
  }
89
79
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.DetailsRowArrowContainer, {
90
80
  id: "DetailsRowArrowContainer",
91
- value: value,
92
- height: 25 * getSizeFactor()
81
+ value: value
93
82
  }, /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, {
94
83
  width: 25 * getSizeFactor(),
95
84
  height: 25 * getSizeFactor()
@@ -151,8 +140,8 @@ var TotalBenchmarkAreachart = exports.TotalBenchmarkAreachart = function TotalBe
151
140
  totalValue: benchmarkTotalValue !== null && benchmarkTotalValue !== void 0 ? benchmarkTotalValue : 0,
152
141
  currentValue: value !== null && value !== void 0 ? value : 0,
153
142
  benchmarkValue: benchmarkValue !== null && benchmarkValue !== void 0 ? benchmarkValue : 0,
154
- height: 12 * getSizeFactor(),
155
- width: 85 * getSizeFactor(),
143
+ height: 12,
144
+ width: 90,
156
145
  color: "#79DB95",
157
146
  linearGradientColor: "#C3EFD0",
158
147
  linearGradientUnderAvarageColor: "#FDB1B1",
@@ -162,9 +151,9 @@ var TotalBenchmarkAreachart = exports.TotalBenchmarkAreachart = function TotalBe
162
151
  ref: anotherRef,
163
152
  id: "AreaChartContainer"
164
153
  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
165
- id: "ResponsiveContainer"
166
- // width="100%"
167
- // height="100%"
154
+ id: "ResponsiveContainer",
155
+ width: "100%",
156
+ height: "100%"
168
157
  }, /*#__PURE__*/_react.default.createElement(_recharts.AreaChart, {
169
158
  id: "SourceAreaChart",
170
159
  data: areaChartData,
@@ -244,9 +233,61 @@ TotalBenchmarkAreachart.defaultProps = {
244
233
  addingBenchmark: true,
245
234
  benchmarkTotalValue: '',
246
235
  benchmarkValue: null,
247
- areaChartData: '',
248
- width: '250px',
249
- height: '280px',
236
+ areaChartData: [{
237
+ title: 'W20',
238
+ value1: 542366,
239
+ value2: 247715
240
+ }, {
241
+ title: 'W21',
242
+ value1: 699511,
243
+ value2: 252313
244
+ }, {
245
+ title: 'W22',
246
+ value1: 403092,
247
+ value2: 260822
248
+ }, {
249
+ title: 'W23',
250
+ value1: 396184,
251
+ value2: 264325
252
+ }, {
253
+ title: 'W24',
254
+ value1: 415317,
255
+ value2: 269243
256
+ }, {
257
+ title: 'W25',
258
+ value1: 568376,
259
+ value2: 269592
260
+ }, {
261
+ title: 'W26',
262
+ value1: 1078121,
263
+ value2: 269949
264
+ }, {
265
+ title: 'W27',
266
+ value1: 347930,
267
+ value2: 270735
268
+ }, {
269
+ title: 'W28',
270
+ value1: 346258,
271
+ value2: 271200
272
+ }, {
273
+ title: 'W29',
274
+ value1: 350184,
275
+ value2: 270324
276
+ }, {
277
+ title: 'W30',
278
+ value1: 312790,
279
+ value2: 266821
280
+ }, {
281
+ title: 'W31',
282
+ value1: 335076,
283
+ value2: 267064
284
+ }, {
285
+ title: 'W32',
286
+ value1: 311037,
287
+ value2: 266821
288
+ }],
289
+ width: '100%',
290
+ height: '100%',
250
291
  textcolor: '#212121',
251
292
  areaChart1Color: '#BD9EFF',
252
293
  areaChart2Color: '#96B4FF',
package/dist/stories/components/TotalBenchmarkAreachart.style.js CHANGED
@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.ValueAndBenchmarkContainer = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.FormattedValueNoDataMessage = exports.FormattedValue = exports.DetailsRowArrowContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = exports.BottomDetailsRowTitle = exports.BottomDetailsRowContainer = exports.BenchmarkContainer = exports.AreaChartContainer = void 0;
7
+ exports.ValueAndBenchmarkContainer = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.FormattedValueNoDataMessage = exports.FormattedValue = exports.DetailsRowArrowContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = 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
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
11
11
  var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n"])), function (props) {
12
12
  return props.textColor;
13
13
  }, function (props) {
@@ -15,18 +15,16 @@ var ControlsContainer = exports.ControlsContainer = _styledComponents.default.di
15
15
  }, function (props) {
16
16
  return props.height;
17
17
  });
18
- var TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 5px;\n background: #ffffff;\n border-radius: 5px;\n padding: 8px 12px;\n display: grid;\n"])));
19
- var TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n width: fit-content;\n"])));
20
- var TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 600;\n line-height: normal;\n"])));
21
- var Controls = exports.Controls = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n width: 100%;\n display: flex;\n gap: 10px;\n flex-direction: column;\n /* justify-content: space-between; */\n background: #ffffff;\n border-radius: 12px;\n"])));
22
- var TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 1rem;\n"])));
23
- var Title = exports.Title = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 1rem;\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n"])));
24
- var AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n"])));
18
+ var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n width: 100%;\n display: flex;\n gap: 10px;\n flex-direction: column;\n justify-content: space-between;\n background: #ffffff;\n border-radius: 12px;\n"])));
19
+ var AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n"])));
20
+ var TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 5px;\n background: #ffffff;\n border-radius: 5px;\n padding: 8px 12px;\n display: grid;\n"])));
21
+ var TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n width: fit-content;\n"])));
22
+ var TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 600;\n line-height: normal;\n"])));
23
+ var TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 1rem;\n"])));
24
+ var Title = exports.Title = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 1rem;\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n"])));
25
25
  var ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n align-items: center;\n"])));
26
26
  var DetailsRowArrowContainer = exports.DetailsRowArrowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-end;\n width: 22px;\n @media (max-width: 1366px) {\n width: 12px;\n }\n @media (max-width: 1536px) {\n width: 14px;\n }\n"])));
27
27
  var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 40px;\n @media (max-width: 1366px) {\n font-size: 20px;\n }\n @media (max-width: 1536px) {\n font-size: 24px;\n }\n"])));
28
28
  var CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n"])));
29
29
  var FormattedValueNoDataMessage = exports.FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.3rem;\n font-weight: 700;\n font-size: 16px;\n margin: 0; \n"])));
30
- var BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 1.5rem;\n"])));
31
- var BottomDetailsRowContainer = exports.BottomDetailsRowContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-start;\n justify-content: center;\n text-align: center;\n"])));
32
- var BottomDetailsRowTitle = exports.BottomDetailsRowTitle = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 0.77778rem;\n"])));
30
+ var BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 1.5rem;\n"])));
package/dist/stories/components/icons/ArrowUpIcon.js CHANGED
@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
9
9
  var ArrowUpIcon = exports.ArrowUpIcon = function ArrowUpIcon(_ref) {
10
10
  var clicked = _ref.clicked,
11
11
  _ref$width = _ref.width,
12
- width = _ref$width === void 0 ? "8" : _ref$width,
12
+ width = _ref$width === void 0 ? '8' : _ref$width,
13
13
  _ref$height = _ref.height,
14
- height = _ref$height === void 0 ? "9" : _ref$height;
14
+ height = _ref$height === void 0 ? '9' : _ref$height;
15
15
  return /*#__PURE__*/_react.default.createElement("svg", {
16
16
  width: width,
17
17
  height: height,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.365",
3
+ "version": "1.0.367",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {