sag_components 1.0.461 → 1.0.463

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/PerformanceAnalytics.js +37 -31
  2. package/dist/stories/components/PerformanceAnalyticsOneColumn.js +9 -4
  3. package/package.json +1 -1
package/dist/stories/components/PerformanceAnalytics.js CHANGED
@@ -15,9 +15,9 @@ var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals");
15
15
  var _PerformanceAnalyticsLegend = require("./PerformanceAnalyticsLegend");
16
16
  var _CommonFunctions = require("./CommonFunctions");
17
17
  var _PerformanceAnalytics = require("./PerformanceAnalytics.style");
18
- const INDIVIDUAL_PERFORMANCE_STR = 'Individual Performance';
19
- const PERCENT_INCREMENTAL_GROWTH_STR = '% Incremental Growth';
20
- const PERCENT_CONTRIBUTION_OF_TOTAL_STR = '% Contribution of Total';
18
+ const INDIVIDUAL_PERFORMANCE_STR = "Individual Performance";
19
+ const PERCENT_INCREMENTAL_GROWTH_STR = "% Incremental Growth";
20
+ const PERCENT_CONTRIBUTION_OF_TOTAL_STR = "% Contribution of Total";
21
21
 
22
22
  /* PerformanceAnalytics */
23
23
  const PerformanceAnalytics = props => {
@@ -35,12 +35,15 @@ const PerformanceAnalytics = props => {
35
35
  noDataText,
36
36
  totalsData,
37
37
  data,
38
- legendData
38
+ legendData,
39
+ tooltipBarchartLabel1,
40
+ tooltipBarchartLabel2,
41
+ tooltipBarchartLabel3
39
42
  } = props;
40
43
  const [segmentedButtonsFilter, setSegmentedButtonsFilter] = (0, _react.useState)(INDIVIDUAL_PERFORMANCE_STR);
41
44
  const [showLegendTooltip, setShowLegendTooltip] = (0, _react.useState)(false);
42
45
  const [tooltipCouponText, setTooltipCouponText] = (0, _react.useState)({
43
- content: '',
46
+ content: "",
44
47
  clientX: 0,
45
48
  clientY: 0
46
49
  });
@@ -127,13 +130,13 @@ const PerformanceAnalytics = props => {
127
130
  id: "ToolTipLabelAndValueContainer"
128
131
  }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, {
129
132
  id: "TooltipLabel"
130
- }, "Package Cost:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, {
133
+ }, tooltipBarchartLabel1), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, {
131
134
  id: "TooltipValue"
132
135
  }, "".concat((0, _CommonFunctions.getCurrencySign)(currencyType)).concat((0, _CommonFunctions.getFormattedValue)(payload[0].payload.packageCostValue), "\n ").concat((0, _CommonFunctions.getFormattedUnits)(payload[0].payload.packageCostValue), " (").concat(packageCostPercent.toFixed(1), "%) "))), redemptionCostPercent > 0 && /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, {
133
136
  id: "ToolTipLabelAndValueContainer"
134
137
  }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, {
135
138
  id: "TooltipLabel"
136
- }, "Redemption Cost:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, {
139
+ }, tooltipBarchartLabel2), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, {
137
140
  id: "TooltipValue"
138
141
  }, "".concat((0, _CommonFunctions.getCurrencySign)(currencyType), "\n ").concat((0, _CommonFunctions.getFormattedValue)(payload[0].payload.redemptionCostValue), "\n ").concat((0, _CommonFunctions.getFormattedUnits)(payload[0].payload.redemptionCostValue), " \n (").concat(redemptionCostPercent.toFixed(1), "%) "))))), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, {
139
142
  id: "ToolTipLabelAndValueContainer"
@@ -142,7 +145,7 @@ const PerformanceAnalytics = props => {
142
145
  color: colorBarchart2
143
146
  }), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, {
144
147
  id: "TooltipLabel"
145
- }, "Incremental Sales:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, {
148
+ }, tooltipBarchartLabel3), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, {
146
149
  id: "TooltipValue"
147
150
  }, "".concat((0, _CommonFunctions.getCurrencySign)(currencyType)).concat((0, _CommonFunctions.getFormattedValue)(payload[0].payload.incrementalSalesValue), "\n ").concat((0, _CommonFunctions.getFormattedUnits)(payload[0].payload.incrementalSalesValue), " "))));
148
151
  case PERCENT_INCREMENTAL_GROWTH_STR:
@@ -195,7 +198,7 @@ const PerformanceAnalytics = props => {
195
198
  payload
196
199
  } = props;
197
200
  const radius = 10;
198
- const plusSign = value > 0 ? '+' : '';
201
+ const plusSign = value > 0 ? "+" : "";
199
202
  return /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("text", {
200
203
  x: x + width / 2,
201
204
  y: y - radius,
@@ -204,7 +207,7 @@ const PerformanceAnalytics = props => {
204
207
  fontSize: "16px",
205
208
  textAnchor: "middle",
206
209
  dominantBaseline: "middle"
207
- }, segmentedButtonsFilter === INDIVIDUAL_PERFORMANCE_STR ? currencyType ? "".concat((0, _CommonFunctions.getCurrencySign)(currencyType).toString(), "\n ").concat(dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), "\n ").concat(dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : '', " ") : '' : segmentedButtonsFilter === PERCENT_INCREMENTAL_GROWTH_STR ? "".concat(plusSign).concat(value, "%") : segmentedButtonsFilter === PERCENT_CONTRIBUTION_OF_TOTAL_STR ? "".concat(value, "%") : ''));
210
+ }, segmentedButtonsFilter === INDIVIDUAL_PERFORMANCE_STR ? currencyType ? "".concat((0, _CommonFunctions.getCurrencySign)(currencyType).toString(), "\n ").concat(dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), "\n ").concat(dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : "", " ") : "" : segmentedButtonsFilter === PERCENT_INCREMENTAL_GROWTH_STR ? "".concat(plusSign).concat(value, "%") : segmentedButtonsFilter === PERCENT_CONTRIBUTION_OF_TOTAL_STR ? "".concat(value, "%") : ""));
208
211
  };
209
212
  function CustomizedTickBarChart(props) {
210
213
  const {
@@ -258,8 +261,8 @@ const PerformanceAnalytics = props => {
258
261
  }
259
262
  return null;
260
263
  }
261
- const getDataKeyNameBar1 = () => segmentedButtonsFilter === INDIVIDUAL_PERFORMANCE_STR ? 'totalValue' : segmentedButtonsFilter === PERCENT_INCREMENTAL_GROWTH_STR ? '' : segmentedButtonsFilter === PERCENT_CONTRIBUTION_OF_TOTAL_STR ? 'contributionTotalCostValue' : '';
262
- const getDataKeyNameBar2 = () => segmentedButtonsFilter === INDIVIDUAL_PERFORMANCE_STR ? 'incrementalSalesValue' : segmentedButtonsFilter === PERCENT_INCREMENTAL_GROWTH_STR ? 'IncrementalGrowthValue' : segmentedButtonsFilter === PERCENT_CONTRIBUTION_OF_TOTAL_STR ? 'contributionIncrementalSalesValue' : '';
264
+ const getDataKeyNameBar1 = () => segmentedButtonsFilter === INDIVIDUAL_PERFORMANCE_STR ? "totalValue" : segmentedButtonsFilter === PERCENT_INCREMENTAL_GROWTH_STR ? "" : segmentedButtonsFilter === PERCENT_CONTRIBUTION_OF_TOTAL_STR ? "contributionTotalCostValue" : "";
265
+ const getDataKeyNameBar2 = () => segmentedButtonsFilter === INDIVIDUAL_PERFORMANCE_STR ? "incrementalSalesValue" : segmentedButtonsFilter === PERCENT_INCREMENTAL_GROWTH_STR ? "IncrementalGrowthValue" : segmentedButtonsFilter === PERCENT_CONTRIBUTION_OF_TOTAL_STR ? "contributionIncrementalSalesValue" : "";
263
266
  const displayBarChart = () => {
264
267
  if (data && data.length > 0) {
265
268
  const formatedData = data.map(item => ({
@@ -285,7 +288,7 @@ const PerformanceAnalytics = props => {
285
288
  tick: CustomizedTickBarChart,
286
289
  tickLine: false,
287
290
  height: 120,
288
- stroke: isNegativeValueFound() === true ? '#D0D0D0' : '#000'
291
+ stroke: isNegativeValueFound() === true ? "#D0D0D0" : "#000"
289
292
  }), showLegendTooltip && /*#__PURE__*/_react.default.createElement(_TspanTooltip.default, {
290
293
  id: "Tooltip",
291
294
  content: tooltipCouponText.content,
@@ -294,7 +297,7 @@ const PerformanceAnalytics = props => {
294
297
  direction: "top"
295
298
  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
296
299
  cursor: {
297
- fill: 'transparent'
300
+ fill: "transparent"
298
301
  },
299
302
  content: CustomTooltipBarChart
300
303
  }), /*#__PURE__*/_react.default.createElement(_recharts.ReferenceLine, {
@@ -308,7 +311,7 @@ const PerformanceAnalytics = props => {
308
311
  }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
309
312
  dataKey: getDataKeyNameBar1(),
310
313
  content: CustomizedLabelBarchart
311
- })) : '', /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
314
+ })) : "", /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
312
315
  dataKey: getDataKeyNameBar2(),
313
316
  fill: colorBarchart2,
314
317
  minPointSize: 10,
@@ -338,30 +341,30 @@ const PerformanceAnalytics = props => {
338
341
  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.PerformanceAnalyticsLegend, {
339
342
  legendData: [{
340
343
  iconColor: colorBarchart2,
341
- iconType: 'Square',
342
- title: '% Incremental Growth'
344
+ iconType: "Square",
345
+ title: "% Incremental Growth"
343
346
  }, {
344
347
  iconColor: {
345
348
  colorGraphROI
346
349
  },
347
- iconType: 'LegendUnionIcon',
348
- title: 'Incremental Sales ROI'
350
+ iconType: "LegendUnionIcon",
351
+ title: "Incremental Sales ROI"
349
352
  }]
350
353
  });
351
354
  case PERCENT_CONTRIBUTION_OF_TOTAL_STR:
352
355
  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.PerformanceAnalyticsLegend, {
353
356
  legendData: [{
354
357
  iconColor: colorBarchart1,
355
- iconType: 'Square',
356
- title: '% Contribution to the Total Cost'
358
+ iconType: "Square",
359
+ title: "% Contribution to the Total Cost"
357
360
  }, {
358
361
  iconColor: colorBarchart2,
359
- iconType: 'Square',
360
- title: '% Contribution to the Inc. Sales'
362
+ iconType: "Square",
363
+ title: "% Contribution to the Inc. Sales"
361
364
  }]
362
365
  });
363
366
  default:
364
- return '';
367
+ return "";
365
368
  }
366
369
  };
367
370
  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ControlsContainer, {
@@ -381,15 +384,18 @@ PerformanceAnalytics.defaultProps = {
381
384
  totalsData: [],
382
385
  data: [],
383
386
  legendData: [],
384
- currencyType: 'USD',
385
- colorGraphROI: '#9CCB3B',
386
- colorBarchart1: '#1F7677',
387
- colorBarchart2: '#90CE9C',
388
- textcolor: '#212121',
389
- width: '',
387
+ currencyType: "USD",
388
+ colorGraphROI: "#9CCB3B",
389
+ colorBarchart1: "#1F7677",
390
+ colorBarchart2: "#90CE9C",
391
+ textcolor: "#212121",
392
+ width: "",
390
393
  height: 130,
391
394
  barChartHeight: 130,
392
395
  lineChartHeight: 50,
393
396
  dotCut: true,
394
- noDataText: ''
397
+ noDataText: "",
398
+ tooltipBarchartLabel1: "Package Cost:",
399
+ tooltipBarchartLabel2: "Redemption Cost:",
400
+ tooltipBarchartLabel3: "Incremental Sales:"
395
401
  };
package/dist/stories/components/PerformanceAnalyticsOneColumn.js CHANGED
@@ -29,7 +29,9 @@ const PerformanceAnalyticsOneColumn = props => {
29
29
  noDataText,
30
30
  totalsData,
31
31
  data,
32
- legendData
32
+ legendData,
33
+ tooltipBarchartLabel1,
34
+ tooltipBarchartLabel2
33
35
  } = props;
34
36
  const [showLegendTooltip, setShowLegendTooltip] = (0, _react.useState)(false);
35
37
  const [tooltipCouponText, setTooltipCouponText] = (0, _react.useState)({
@@ -43,13 +45,14 @@ const PerformanceAnalyticsOneColumn = props => {
43
45
  payload
44
46
  } = _ref;
45
47
  if (active && payload && payload.length > 0) {
48
+ console.log("CustomTooltipBarChart", payload);
46
49
  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.LegendColorRectangle, {
47
50
  id: "LegendColorRectangle",
48
51
  color: colorBarchart1
49
- }), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipLabel, null, "New Shoppers"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipValue, null, "".concat((0, _CommonFunctions.getFormattedValue)(payload[0].payload.newShoppersValue), "\n ").concat((0, _CommonFunctions.getFormattedUnits)(payload[0].payload.newShoppersValue), "\n (").concat(payload[0].payload.newShoppersPercentValue, "%) "))), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.LegendColorRectangle, {
52
+ }), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipLabel, null, tooltipBarchartLabel1), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipValue, null, "".concat((0, _CommonFunctions.getFormattedValue)(payload[0].payload.newShoppersValue), "\n ").concat((0, _CommonFunctions.getFormattedUnits)(payload[0].payload.newShoppersValue), "\n (").concat(payload[0].payload.newShoppersPercentValue, "%) "))), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.LegendColorRectangle, {
50
53
  id: "LegendColorRectangle",
51
54
  color: colorBarchart2
52
- }), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipLabel, null, "Existing Shoppers"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipValue, null, "".concat((0, _CommonFunctions.getFormattedValue)(payload[0].payload.existingShoppersValue), "\n ").concat((0, _CommonFunctions.getFormattedUnits)(payload[0].payload.existingShoppersValue), "\n (").concat(payload[0].payload.existingShoppersPercentValue, "%) "))));
55
+ }), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipLabel, null, tooltipBarchartLabel2), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipValue, null, "".concat((0, _CommonFunctions.getFormattedValue)(payload[0].payload.existingShoppersValue), "\n ").concat((0, _CommonFunctions.getFormattedUnits)(payload[0].payload.existingShoppersValue), "\n (").concat(payload[0].payload.existingShoppersPercentValue, "%) "))));
53
56
  }
54
57
  return null;
55
58
  };
@@ -297,5 +300,7 @@ PerformanceAnalyticsOneColumn.defaultProps = {
297
300
  iconColor: null,
298
301
  iconType: null,
299
302
  title: null
300
- }]
303
+ }],
304
+ tooltipBarchartLabel1: "New Shoppers",
305
+ tooltipBarchartLabel2: "Existing Shoppers"
301
306
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.461",
3
+ "version": "1.0.463",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {