sag_components 1.0.437 → 1.0.439

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 +48 -48
  2. package/dist/stories/components/TotalBenchmarkAreachart.style.js +1 -1
  3. package/dist/stories/components/TotalBenchmarkArrows.style.js +1 -1
  4. package/package.json +1 -1
package/dist/stories/components/TotalBenchmarkAreachart.js CHANGED
@@ -43,9 +43,9 @@ const TotalBenchmarkAreachart = props => {
43
43
  const DEFAULT_ROOT_FONT = 16;
44
44
  const DEFAULT_COMPONENT_WIDTH = 250;
45
45
  const DEFAULT_COMPONENT_HEIGHT = 280;
46
- const [rootFont, setRootFont] = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat("", "px"));
46
+ const [rootFont, setRootFont] = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat('', 'px'));
47
47
  const anotherRef = (0, _react.useRef)(null);
48
- const [activeLabel, setActiveLabel] = (0, _react.useState)("");
48
+ const [activeLabel, setActiveLabel] = (0, _react.useState)('');
49
49
  const controlsContainerRef = (0, _react.useRef)();
50
50
  (0, _react.useEffect)(() => {
51
51
  const {
@@ -54,16 +54,16 @@ const TotalBenchmarkAreachart = props => {
54
54
  setRootFont(getRootFont(offsetWidth));
55
55
  }, [width]);
56
56
  const getRootFont = width => {
57
- const relation = width.toString().replace("px", "").replace("%", "") / DEFAULT_COMPONENT_WIDTH;
58
- const fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
57
+ const relation = width.toString().replace('px', '').replace('%', '') / DEFAULT_COMPONENT_WIDTH;
58
+ const fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat('', 'px');
59
59
  return fontRoot;
60
60
  };
61
- const getSizeFactor = () => rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT;
61
+ const getSizeFactor = () => rootFont.toString().replace('px', '') / DEFAULT_ROOT_FONT;
62
62
  const getArrowSign = arrowSign => {
63
63
  if (!arrowSign) {
64
- return "";
64
+ return '';
65
65
  }
66
- if (arrowSign === "up") {
66
+ if (arrowSign === 'up') {
67
67
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.DetailsRowArrowContainer, {
68
68
  id: "DetailsRowArrowContainer",
69
69
  value: value
@@ -121,16 +121,16 @@ const TotalBenchmarkAreachart = props => {
121
121
  };
122
122
  const displayEventWeeksElements = () => {
123
123
  var _getAreaChartFormatte;
124
- if (!areaChartData || areaChartData.length === 0) return "";
124
+ if (!areaChartData || areaChartData.length === 0) return '';
125
125
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendDataElementsContainer, {
126
126
  id: "EventWeeksLegendDataElementsContainer"
127
127
  }, (_getAreaChartFormatte = getAreaChartFormattedData()) === null || _getAreaChartFormatte === void 0 ? void 0 : _getAreaChartFormatte.map(item => {
128
- console.log("displayEventWeeksElements", item);
128
+ console.log('displayEventWeeksElements', item);
129
129
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendDataElement, {
130
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"
131
+ color: item.title >= startWeekRange && item.title <= endWeekRange ? xselectedColor : '',
132
+ borderLeftRadius: item.title === startWeekRange ? '12px' : '0px',
133
+ borderRightRadius: item.title === endWeekRange ? '12px' : '0px'
134
134
  }, item.titleWeek);
135
135
  }));
136
136
  };
@@ -170,9 +170,9 @@ const TotalBenchmarkAreachart = props => {
170
170
  id: "Title"
171
171
  }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.ValueAndBenchmarkContainer, {
172
172
  id: "ValueAndBenchmarkContainer"
173
- }, value !== undefined && value != null ? getArrowSign(arrowSign) : "", /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.FormattedValue, {
173
+ }, value !== undefined && value != null ? getArrowSign(arrowSign) : '', /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.FormattedValue, {
174
174
  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, {
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, {
176
176
  id: "BenchmarkContainer"
177
177
  }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
178
178
  id: "Benchmark",
@@ -186,7 +186,7 @@ const TotalBenchmarkAreachart = props => {
186
186
  linearGradientUnderAvarageColor: "#FDB1B1",
187
187
  underAvarageColor: "#FD5959",
188
188
  backgroundColor: "#F2F2F2"
189
- })) : "")), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.AreaChartContainer, {
189
+ })) : '')), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.AreaChartContainer, {
190
190
  ref: anotherRef,
191
191
  id: "AreaChartContainer"
192
192
  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
@@ -240,9 +240,9 @@ const TotalBenchmarkAreachart = props => {
240
240
  ,
241
241
  tickLine: false,
242
242
  style: {
243
- fontWeight: "700",
244
- stroke: "#D0D0D0",
245
- strokeWidth: "1px"
243
+ fontWeight: '700',
244
+ stroke: '#D0D0D0',
245
+ strokeWidth: '1px'
246
246
  }
247
247
  }), /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
248
248
  strokeDasharray: "3 3"
@@ -267,79 +267,79 @@ const TotalBenchmarkAreachart = props => {
267
267
  exports.TotalBenchmarkAreachart = TotalBenchmarkAreachart;
268
268
  var _default = exports.default = TotalBenchmarkAreachart;
269
269
  TotalBenchmarkAreachart.defaultProps = {
270
- title: "String",
270
+ title: 'String',
271
271
  value: 300,
272
- arrowSign: "$",
272
+ arrowSign: '$',
273
273
  addingBenchmark: true,
274
- benchmarkTotalValue: "",
274
+ benchmarkTotalValue: '',
275
275
  benchmarkValue: null,
276
276
  areaChartData: [{
277
- title: "202320",
277
+ title: '202320',
278
278
  value1: 542366,
279
279
  value2: 247715
280
280
  }, {
281
- title: "202321",
281
+ title: '202321',
282
282
  value1: 699511,
283
283
  value2: 252313
284
284
  }, {
285
- title: "202322",
285
+ title: '202322',
286
286
  value1: 403092,
287
287
  value2: 260822
288
288
  }, {
289
- title: "202323",
289
+ title: '202323',
290
290
  value1: 396184,
291
291
  value2: 264325
292
292
  }, {
293
- title: "202324",
293
+ title: '202324',
294
294
  value1: 415317,
295
295
  value2: 269243
296
296
  }, {
297
- title: "202325",
297
+ title: '202325',
298
298
  value1: 568376,
299
299
  value2: 269592
300
300
  }, {
301
- title: "202326",
301
+ title: '202326',
302
302
  value1: 1078121,
303
303
  value2: 269949
304
304
  }, {
305
- title: "202327",
305
+ title: '202327',
306
306
  value1: 347930,
307
307
  value2: 270735
308
308
  }, {
309
- title: "202328",
309
+ title: '202328',
310
310
  value1: 346258,
311
311
  value2: 271200
312
312
  }, {
313
- title: "202329",
313
+ title: '202329',
314
314
  value1: 350184,
315
315
  value2: 270324
316
316
  }, {
317
- title: "202330",
317
+ title: '202330',
318
318
  value1: 312790,
319
319
  value2: 266821
320
320
  }, {
321
- title: "202331",
321
+ title: '202331',
322
322
  value1: 335076,
323
323
  value2: 267064
324
324
  }, {
325
- title: "202332",
325
+ title: '202332',
326
326
  value1: 311037,
327
327
  value2: 266821
328
328
  }],
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: "",
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: '',
343
343
  startWeekRange: 0,
344
344
  endWeekRange: 0
345
345
  };
package/dist/stories/components/TotalBenchmarkAreachart.style.js CHANGED
@@ -17,7 +17,7 @@ const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templ
17
17
  const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 1rem;\n"])));
18
18
  const 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"])));
19
19
  const ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n align-items: center;\n"])));
20
- const 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"])));
20
+ const DetailsRowArrowContainer = exports.DetailsRowArrowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-end;\n margin-right: 5px;\n @media (max-width: 1366px) {\n width: 12px;\n }\n @media (max-width: 1536px) {\n width: 14px;\n }\n"])));
21
21
  const 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"])));
22
22
  const 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"])));
23
23
  const 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"])));
package/dist/stories/components/TotalBenchmarkArrows.style.js CHANGED
@@ -15,7 +15,7 @@ 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"])));
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
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
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"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.437",
3
+ "version": "1.0.439",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {