sag_components 1.0.436 → 1.0.438

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 (3) hide show
  1. package/dist/stories/components/TotalBenchmarkAreachart.js +50 -54
  2. package/dist/stories/components/TotalBenchmarkArrows.style.js +3 -3
  3. package/package.json +1 -1
package/dist/stories/components/TotalBenchmarkAreachart.js CHANGED
@@ -42,10 +42,9 @@ const TotalBenchmarkAreachart = props => {
42
42
  } = props;
43
43
  const DEFAULT_ROOT_FONT = 16;
44
44
  const DEFAULT_COMPONENT_WIDTH = 250;
45
- const DEFAULT_COMPONENT_HEIGHT = 280;
46
- const [rootFont, setRootFont] = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat("", "px"));
45
+ const [rootFont, setRootFont] = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat('', 'px'));
47
46
  const anotherRef = (0, _react.useRef)(null);
48
- const [activeLabel, setActiveLabel] = (0, _react.useState)("");
47
+ const [activeLabel, setActiveLabel] = (0, _react.useState)('');
49
48
  const controlsContainerRef = (0, _react.useRef)();
50
49
  (0, _react.useEffect)(() => {
51
50
  const {
@@ -54,16 +53,16 @@ const TotalBenchmarkAreachart = props => {
54
53
  setRootFont(getRootFont(offsetWidth));
55
54
  }, [width]);
56
55
  const getRootFont = width => {
57
- const relation = width.toString().replace("px", "").replace("%", "") / DEFAULT_COMPONENT_WIDTH;
58
- const fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
56
+ const relation = width.toString().replace('px', '').replace('%', '') / DEFAULT_COMPONENT_WIDTH;
57
+ const fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat('', 'px');
59
58
  return fontRoot;
60
59
  };
61
- const getSizeFactor = () => rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT;
60
+ const getSizeFactor = () => rootFont.toString().replace('px', '') / DEFAULT_ROOT_FONT;
62
61
  const getArrowSign = arrowSign => {
63
62
  if (!arrowSign) {
64
- return "";
63
+ return '';
65
64
  }
66
- if (arrowSign === "up") {
65
+ if (arrowSign === 'up') {
67
66
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.DetailsRowArrowContainer, {
68
67
  id: "DetailsRowArrowContainer",
69
68
  value: value
@@ -121,18 +120,15 @@ const TotalBenchmarkAreachart = props => {
121
120
  };
122
121
  const displayEventWeeksElements = () => {
123
122
  var _getAreaChartFormatte;
124
- if (!areaChartData || areaChartData.length === 0) return "";
123
+ if (!areaChartData || areaChartData.length === 0) return '';
125
124
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendDataElementsContainer, {
126
125
  id: "EventWeeksLegendDataElementsContainer"
127
- }, (_getAreaChartFormatte = getAreaChartFormattedData()) === null || _getAreaChartFormatte === void 0 ? void 0 : _getAreaChartFormatte.map(item => {
128
- console.log("displayEventWeeksElements", item);
129
- return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendDataElement, {
130
- id: "EventWeeksLegendDataElement",
131
- color: item.title >= startWeekRange && item.title <= endWeekRange ? xselectedColor : "",
132
- borderLeftRadius: item.title === startWeekRange ? "12px" : "0px",
133
- borderRightRadius: item.title === endWeekRange ? "12px" : "0px"
134
- }, item.titleWeek);
135
- }));
126
+ }, (_getAreaChartFormatte = getAreaChartFormattedData()) === null || _getAreaChartFormatte === void 0 ? void 0 : _getAreaChartFormatte.map(item => /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendDataElement, {
127
+ id: "EventWeeksLegendDataElement",
128
+ color: item.title >= startWeekRange && item.title <= endWeekRange ? xselectedColor : '',
129
+ borderLeftRadius: item.title === startWeekRange ? '12px' : '0px',
130
+ borderRightRadius: item.title === endWeekRange ? '12px' : '0px'
131
+ }, item.titleWeek)));
136
132
  };
137
133
  const displayEventWeeksLegendData = () => /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendMainContainer, {
138
134
  id: "EventWeeksLegendMainContainer"
@@ -170,9 +166,9 @@ const TotalBenchmarkAreachart = props => {
170
166
  id: "Title"
171
167
  }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.ValueAndBenchmarkContainer, {
172
168
  id: "ValueAndBenchmarkContainer"
173
- }, value !== undefined && value != null ? getArrowSign(arrowSign) : "", /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.FormattedValue, {
169
+ }, value !== undefined && value != null ? getArrowSign(arrowSign) : '', /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.FormattedValue, {
174
170
  id: "FormattedValue"
175
- }, value !== undefined && value != null ? /*#__PURE__*/_react.default.createElement("span", null, "".concat(value, " "), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.CurrencySign, null, "%")) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.FormattedValueNoDataMessage, null, value === undefined || value === null ? "No Data" : ""), addingBenchmark && benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.BenchmarkContainer, {
171
+ }, value !== undefined && value != null ? /*#__PURE__*/_react.default.createElement("span", null, "".concat(value, " "), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.CurrencySign, null, "%")) : ''), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.FormattedValueNoDataMessage, null, value === undefined || value === null ? 'No Data' : ''), addingBenchmark && benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.BenchmarkContainer, {
176
172
  id: "BenchmarkContainer"
177
173
  }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
178
174
  id: "Benchmark",
@@ -186,7 +182,7 @@ const TotalBenchmarkAreachart = props => {
186
182
  linearGradientUnderAvarageColor: "#FDB1B1",
187
183
  underAvarageColor: "#FD5959",
188
184
  backgroundColor: "#F2F2F2"
189
- })) : "")), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.AreaChartContainer, {
185
+ })) : '')), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.AreaChartContainer, {
190
186
  ref: anotherRef,
191
187
  id: "AreaChartContainer"
192
188
  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
@@ -240,9 +236,9 @@ const TotalBenchmarkAreachart = props => {
240
236
  ,
241
237
  tickLine: false,
242
238
  style: {
243
- fontWeight: "700",
244
- stroke: "#D0D0D0",
245
- strokeWidth: "1px"
239
+ fontWeight: '700',
240
+ stroke: '#D0D0D0',
241
+ strokeWidth: '1px'
246
242
  }
247
243
  }), /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
248
244
  strokeDasharray: "3 3"
@@ -267,79 +263,79 @@ const TotalBenchmarkAreachart = props => {
267
263
  exports.TotalBenchmarkAreachart = TotalBenchmarkAreachart;
268
264
  var _default = exports.default = TotalBenchmarkAreachart;
269
265
  TotalBenchmarkAreachart.defaultProps = {
270
- title: "String",
266
+ title: 'String',
271
267
  value: 300,
272
- arrowSign: "$",
268
+ arrowSign: '$',
273
269
  addingBenchmark: true,
274
- benchmarkTotalValue: "",
270
+ benchmarkTotalValue: '',
275
271
  benchmarkValue: null,
276
272
  areaChartData: [{
277
- title: "202320",
273
+ title: '202320',
278
274
  value1: 542366,
279
275
  value2: 247715
280
276
  }, {
281
- title: "202321",
277
+ title: '202321',
282
278
  value1: 699511,
283
279
  value2: 252313
284
280
  }, {
285
- title: "202322",
281
+ title: '202322',
286
282
  value1: 403092,
287
283
  value2: 260822
288
284
  }, {
289
- title: "202323",
285
+ title: '202323',
290
286
  value1: 396184,
291
287
  value2: 264325
292
288
  }, {
293
- title: "202324",
289
+ title: '202324',
294
290
  value1: 415317,
295
291
  value2: 269243
296
292
  }, {
297
- title: "202325",
293
+ title: '202325',
298
294
  value1: 568376,
299
295
  value2: 269592
300
296
  }, {
301
- title: "202326",
297
+ title: '202326',
302
298
  value1: 1078121,
303
299
  value2: 269949
304
300
  }, {
305
- title: "202327",
301
+ title: '202327',
306
302
  value1: 347930,
307
303
  value2: 270735
308
304
  }, {
309
- title: "202328",
305
+ title: '202328',
310
306
  value1: 346258,
311
307
  value2: 271200
312
308
  }, {
313
- title: "202329",
309
+ title: '202329',
314
310
  value1: 350184,
315
311
  value2: 270324
316
312
  }, {
317
- title: "202330",
313
+ title: '202330',
318
314
  value1: 312790,
319
315
  value2: 266821
320
316
  }, {
321
- title: "202331",
317
+ title: '202331',
322
318
  value1: 335076,
323
319
  value2: 267064
324
320
  }, {
325
- title: "202332",
321
+ title: '202332',
326
322
  value1: 311037,
327
323
  value2: 266821
328
324
  }],
329
- width: "100%",
330
- height: "100%",
331
- textcolor: "#212121",
332
- areaChart1Color: "#BD9EFF",
333
- areaChart2Color: "#96B4FF",
334
- xselectedColor: "#42977A",
335
- fillChart1Color: "rgba(34, 158, 56, 0.20)",
336
- fillChart2Color: "rgba(255, 84, 84, 0.2)",
337
- startOffset: "17.04%",
338
- endOffset: "17.04%",
339
- opacity: "191",
340
- value1Title: "Actual Sales",
341
- value2Title: "Baseline Sales",
342
- noDataText: "",
325
+ width: '100%',
326
+ height: '100%',
327
+ textcolor: '#212121',
328
+ areaChart1Color: '#BD9EFF',
329
+ areaChart2Color: '#96B4FF',
330
+ xselectedColor: '#42977A',
331
+ fillChart1Color: 'rgba(34, 158, 56, 0.20)',
332
+ fillChart2Color: 'rgba(255, 84, 84, 0.2)',
333
+ startOffset: '17.04%',
334
+ endOffset: '17.04%',
335
+ opacity: '191',
336
+ value1Title: 'Actual Sales',
337
+ value2Title: 'Baseline Sales',
338
+ noDataText: '',
343
339
  startWeekRange: 0,
344
340
  endWeekRange: 0
345
341
  };
package/dist/stories/components/TotalBenchmarkArrows.style.js CHANGED
@@ -15,9 +15,9 @@ const ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledC
15
15
  const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.1rem;\n font-weight: 500;\n font-size: 40px;\n @media (max-width: 1536px) {\n font-size: 24px;\n } \n @media (max-width: 1366px) {\n font-size: 20px;\n }\n"])));
16
16
  const BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 0.77778rem;\n width: 5.35rem;\n"])));
17
17
  const DetailsContainer = exports.DetailsContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n /* width: 14rem; */\n height: 50%;\n"])));
18
- const DetailsTitle = exports.DetailsTitle = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n height: 25%;\n font-weight: 500;\n font-size: 1rem;\n"])));
19
- const DetailsRowContainer = exports.DetailsRowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n text-align: center;\n align-items: baseline;\n font-weight: 700;\n font-size: 14px;\n"])));
20
- const DetailsRowArrowContainer = exports.DetailsRowArrowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-end;\n margin-left: 0.3rem;\n"])));
18
+ const DetailsTitle = exports.DetailsTitle = _styledComponents.default.h5(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 1rem;\n margin-bottom: 12px;\n @media (max-width: 1536px) {\n font-size: 14px;\n } \n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
19
+ const DetailsRowContainer = exports.DetailsRowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n text-align: center;\n align-items: baseline;\n gap: 4px;\n font-weight: 700;\n font-size: 14px;\n"])));
20
+ const DetailsRowArrowContainer = exports.DetailsRowArrowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-end;\n"])));
21
21
  const DetailsRowFormattedValue = exports.DetailsRowFormattedValue = _styledComponents.default.span(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 700;\n"])));
22
22
  const DetailsRowFormattedValueNoDataMessage = exports.DetailsRowFormattedValueNoDataMessage = _styledComponents.default.span(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0; \n"])));
23
23
  const DetailsRowPercentSign = exports.DetailsRowPercentSign = _styledComponents.default.span(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 12px;\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.436",
3
+ "version": "1.0.438",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {