sag_components 1.0.462 → 1.0.464

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 (2) hide show
  1. package/dist/stories/components/PerformanceAnalytics.js +38 -34
  2. 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,28 @@ 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
- iconColor: {
345
- colorGraphROI
346
- },
347
- iconType: 'LegendUnionIcon',
348
- title: 'Incremental Sales ROI'
347
+ iconColor: colorGraphROI,
348
+ iconType: "LegendUnionIcon",
349
+ title: "Incremental Sales ROI"
349
350
  }]
350
351
  });
351
352
  case PERCENT_CONTRIBUTION_OF_TOTAL_STR:
352
353
  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.PerformanceAnalyticsLegend, {
353
354
  legendData: [{
354
355
  iconColor: colorBarchart1,
355
- iconType: 'Square',
356
- title: '% Contribution to the Total Cost'
356
+ iconType: "Square",
357
+ title: "% Contribution to the Total Cost"
357
358
  }, {
358
359
  iconColor: colorBarchart2,
359
- iconType: 'Square',
360
- title: '% Contribution to the Inc. Sales'
360
+ iconType: "Square",
361
+ title: "% Contribution to the Inc. Sales"
361
362
  }]
362
363
  });
363
364
  default:
364
- return '';
365
+ return "";
365
366
  }
366
367
  };
367
368
  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ControlsContainer, {
@@ -381,15 +382,18 @@ PerformanceAnalytics.defaultProps = {
381
382
  totalsData: [],
382
383
  data: [],
383
384
  legendData: [],
384
- currencyType: 'USD',
385
- colorGraphROI: '#9CCB3B',
386
- colorBarchart1: '#1F7677',
387
- colorBarchart2: '#90CE9C',
388
- textcolor: '#212121',
389
- width: '',
385
+ currencyType: "USD",
386
+ colorGraphROI: "#9CCB3B",
387
+ colorBarchart1: "#1F7677",
388
+ colorBarchart2: "#90CE9C",
389
+ textcolor: "#212121",
390
+ width: "",
390
391
  height: 130,
391
392
  barChartHeight: 130,
392
393
  lineChartHeight: 50,
393
394
  dotCut: true,
394
- noDataText: ''
395
+ noDataText: "",
396
+ tooltipBarchartLabel1: "Package Cost:",
397
+ tooltipBarchartLabel2: "Redemption Cost:",
398
+ tooltipBarchartLabel3: "Incremental Sales:"
395
399
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.462",
3
+ "version": "1.0.464",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {