sag_components 1.0.331 → 1.0.332

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 (6) hide show
  1. package/.history/package_20231116165916.json +83 -0
  2. package/dist/stories/components/PerformanceAnalytics.js +90 -21
  3. package/dist/stories/components/PerformanceAnalytics.style.js +9 -4
  4. package/dist/stories/components/PerformanceAnalyticsOneColumn.js +13 -29
  5. package/dist/stories/components/PerformanceAnalyticsOneColumn.style.js +2 -2
  6. package/package.json +1 -1
package/.history/package_20231116165916.json ADDED
@@ -0,0 +1,83 @@
1
+ {
2
+ "name": "sag_components",
3
+ "version": "1.0.332",
4
+ "description": "",
5
+ "main": "dist/index.js",
6
+ "scripts": {
7
+ "start": "react-scripts start",
8
+ "lint": "eslint .",
9
+ "build": "cross-env BABEL_ENV=production babel src -d dist ",
10
+ "storybook": "storybook dev -p 6006",
11
+ "build-storybook": "storybook build"
12
+ },
13
+ "keywords": [],
14
+ "author": "SAG",
15
+ "license": "ISC",
16
+ "devDependencies": {
17
+ "@babel/cli": "^7.23.0",
18
+ "@babel/preset-env": "^7.23.3",
19
+ "@babel/preset-react": "^7.23.3",
20
+ "@babel/preset-typescript": "^7.23.3",
21
+ "@storybook/addon-a11y": "^7.4.6",
22
+ "@storybook/addon-essentials": "^7.4.6",
23
+ "@storybook/addon-interactions": "^7.4.6",
24
+ "@storybook/addon-links": "^7.4.6",
25
+ "@storybook/addon-storysource": "^7.4.6",
26
+ "@storybook/blocks": "^7.4.6",
27
+ "@storybook/preset-scss": "^1.0.3",
28
+ "@storybook/react": "^7.4.6",
29
+ "@storybook/react-webpack5": "^7.4.6",
30
+ "@storybook/testing-library": "^0.2.2",
31
+ "cross-env": "^7.0.3",
32
+ "css-loader": "^6.8.1",
33
+ "eslint": "^8.53.0",
34
+ "eslint-config-airbnb": "^19.0.4",
35
+ "eslint-plugin-import": "^2.29.0",
36
+ "eslint-plugin-jsx-a11y": "^6.8.0",
37
+ "eslint-plugin-react": "^7.33.2",
38
+ "eslint-plugin-react-hooks": "^4.6.0",
39
+ "react-dom": "^18.2.0",
40
+ "sass": "^1.69.5",
41
+ "sass-loader": "^13.3.2",
42
+ "style-loader": "^3.3.3"
43
+ },
44
+ "dependencies": {
45
+ "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
46
+ "@dnd-kit/core": "^6.0.8",
47
+ "@emotion/react": "^11.11.1",
48
+ "@emotion/styled": "^11.11.0",
49
+ "@fontsource/roboto": "^5.0.8",
50
+ "@fortawesome/fontawesome-svg-core": "^6.4.2",
51
+ "@fortawesome/free-solid-svg-icons": "^6.4.2",
52
+ "@fortawesome/react-fontawesome": "^0.2.0",
53
+ "@mui/icons-material": "^5.14.18",
54
+ "@mui/material": "^5.14.18",
55
+ "@mui/styled-engine-sc": "^5.14.12",
56
+ "@mui/x-date-pickers": "^6.18.1",
57
+ "@storybook/addon-designs": "^7.0.5",
58
+ "babel-plugin-react-css-modules": "^5.2.6",
59
+ "classnames": "^2.3.2",
60
+ "dayjs": "^1.11.10",
61
+ "hoopy": "^0.1.4",
62
+ "prop-types": "^15.8.1",
63
+ "react": "^18.2.0",
64
+ "react-css-modules": "^4.7.11",
65
+ "react-loading-skeleton": "^3.3.1",
66
+ "react-scripts": "5.0.1",
67
+ "recharts": "^2.9.3",
68
+ "storybook": "^7.4.6",
69
+ "styled-components": "^5.3.1"
70
+ },
71
+ "browserslist": {
72
+ "production": [
73
+ ">0.2%",
74
+ "not dead",
75
+ "not op_mini all"
76
+ ],
77
+ "development": [
78
+ "last 1 chrome version",
79
+ "last 1 firefox version",
80
+ "last 1 safari version"
81
+ ]
82
+ }
83
+ }
package/dist/stories/components/PerformanceAnalytics.js CHANGED
@@ -18,7 +18,7 @@ var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals");
18
18
  var _PerformanceAnalyticsLegend = require("./PerformanceAnalyticsLegend");
19
19
  var _CommonFunctions = require("./CommonFunctions");
20
20
  var _PerformanceAnalytics = require("./PerformanceAnalytics.style");
21
- var _excluded = ["totalsData", "data", "currencyType", "colorGraphROI", "colorBarchart1", "colorBarchart2", "textcolor", "width", "height", "dotCut", "lineChartHeight", "noDataText"];
21
+ var _excluded = ["totalsData", "data", "legendData", "currencyType", "colorGraphROI", "colorBarchart1", "colorBarchart2", "textcolor", "width", "height", "dotCut", "lineChartHeight", "noDataText"];
22
22
  var INDIVIDUAL_PERFORMANCE_STR = 'Individual Performance';
23
23
  var PERCENT_INCREMENTAL_GROWTH_STR = '% Incremental Growth';
24
24
  var PERCENT_CONTRIBUTION_OF_TOTAL_STR = '% Contribution of Total';
@@ -57,6 +57,12 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
57
57
  existingShoppersValue: _propTypes.number | null,
58
58
  existingShoppersPercentValue: _propTypes.number | null
59
59
  }] : _ref$data,
60
+ _ref$legendData = _ref.legendData,
61
+ legendData = _ref$legendData === void 0 ? [{
62
+ iconColor: string | null,
63
+ iconType: string | null,
64
+ title: string | null
65
+ }] : _ref$legendData,
60
66
  _ref$currencyType = _ref.currencyType,
61
67
  currencyType = _ref$currencyType === void 0 ? 'USD' : _ref$currencyType,
62
68
  _ref$colorGraphROI = _ref.colorGraphROI,
@@ -146,11 +152,80 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
146
152
  var redemptionCostPercent = totalCostValue ? ((_payload$0$payload5 = payload[0].payload) === null || _payload$0$payload5 === void 0 ? void 0 : _payload$0$payload5.redemptionCostValue) / totalCostValue * 100 : 0;
147
153
  switch (segmentedButtonsFilter) {
148
154
  case INDIVIDUAL_PERFORMANCE_STR:
149
- return /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipTitle, null, "".concat(payload[0].payload.retailer)), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, null, "Package Cost:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, null, "".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(2), "%) "))), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, null, "Redemption Cost:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, null, "".concat((0, _CommonFunctions.getCurrencySign)(currencyType)).concat((0, _CommonFunctions.getFormattedValue)(payload[0].payload.redemptionCostValue), " \n ").concat((0, _CommonFunctions.getFormattedUnits)(payload[0].payload.redemptionCostValue), " (").concat(redemptionCostPercent.toFixed(2), "%) "))), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, null, "Incremental Sales:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, null, "".concat((0, _CommonFunctions.getCurrencySign)(currencyType)).concat((0, _CommonFunctions.getFormattedValue)(payload[0].payload.incrementalSalesValue), " \n ").concat((0, _CommonFunctions.getFormattedUnits)(payload[0].payload.incrementalSalesValue), " "))));
155
+ return /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipContainer, {
156
+ id: "TooltipContainer"
157
+ }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipBarchart1Container, {
158
+ id: "ToolTipBarchart1Container"
159
+ }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.LegendColorRectangle, {
160
+ id: "LegendColorRectangle",
161
+ color: colorBarchart1
162
+ }), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipBarchart1LabelAndValueContainer, {
163
+ id: "ToolTipBarchart1LabelAndValueContainer"
164
+ }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, {
165
+ id: "ToolTipLabelAndValueContainer"
166
+ }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, {
167
+ id: "TooltipLabel"
168
+ }, "Package Cost:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, {
169
+ id: "TooltipValue"
170
+ }, "".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), "%) "))), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, {
171
+ id: "ToolTipLabelAndValueContainer"
172
+ }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, {
173
+ id: "TooltipLabel"
174
+ }, "Redemption Cost:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, {
175
+ id: "TooltipValue"
176
+ }, "".concat((0, _CommonFunctions.getCurrencySign)(currencyType)).concat((0, _CommonFunctions.getFormattedValue)(payload[0].payload.redemptionCostValue), " \n ").concat((0, _CommonFunctions.getFormattedUnits)(payload[0].payload.redemptionCostValue), " (").concat(redemptionCostPercent.toFixed(1), "%) "))))), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, {
177
+ id: "ToolTipLabelAndValueContainer"
178
+ }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.LegendColorRectangle, {
179
+ id: "LegendColorRectangle",
180
+ color: colorBarchart2
181
+ }), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, {
182
+ id: "TooltipLabel"
183
+ }, "Incremental Sales:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, {
184
+ id: "TooltipValue"
185
+ }, "".concat((0, _CommonFunctions.getCurrencySign)(currencyType)).concat((0, _CommonFunctions.getFormattedValue)(payload[0].payload.incrementalSalesValue), " \n ").concat((0, _CommonFunctions.getFormattedUnits)(payload[0].payload.incrementalSalesValue), " "))));
150
186
  case PERCENT_INCREMENTAL_GROWTH_STR:
151
- return /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipTitle, null, "".concat(payload[0].payload.retailer)), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, null, "Incremental Growth Value:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, null, "".concat((_payload$0$payload$In = payload[0].payload.IncrementalGrowthValue) === null || _payload$0$payload$In === void 0 ? void 0 : _payload$0$payload$In.toFixed(2), "% "))));
187
+ return /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipContainer, {
188
+ id: "TooltipContainer"
189
+ }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, {
190
+ id: "ToolTipLabelAndValueContainer"
191
+ }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.LegendColorRectangle, {
192
+ id: "LegendColorRectangle",
193
+ color: colorBarchart2
194
+ }), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, {
195
+ id: "TooltipLabel"
196
+ }, "Incremental Growth Value:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, {
197
+ id: "TooltipValue"
198
+ }, "".concat((_payload$0$payload$In = payload[0].payload.IncrementalGrowthValue) === null || _payload$0$payload$In === void 0 ? void 0 : _payload$0$payload$In.toFixed(1), "% "))));
152
199
  case PERCENT_CONTRIBUTION_OF_TOTAL_STR:
153
- return /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipTitle, null, "".concat(payload[0].payload.retailer)), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, null, "Contribution of Total Package Cost:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, null, "".concat((_payload$0$payload$co = payload[0].payload.contributionPackageCostValue) === null || _payload$0$payload$co === void 0 ? void 0 : _payload$0$payload$co.toFixed(2), "%"))), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, null, "Contribution of Total Redemption Cost:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, null, "".concat((_payload$0$payload$co2 = payload[0].payload.contributionRedemptionCostValue) === null || _payload$0$payload$co2 === void 0 ? void 0 : _payload$0$payload$co2.toFixed(2), "%"))), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, null, "Contribution of Total Incremental Sales:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, null, "".concat((_payload$0$payload$co3 = payload[0].payload.contributionIncrementalSalesValue) === null || _payload$0$payload$co3 === void 0 ? void 0 : _payload$0$payload$co3.toFixed(2), "%"))));
200
+ return /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipContainer, {
201
+ id: "TooltipContainer"
202
+ }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipBarchart1Container, {
203
+ id: "ToolTipBarchart1Container"
204
+ }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.LegendColorRectangle, {
205
+ id: "LegendColorRectangle",
206
+ color: colorBarchart1
207
+ }), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipBarchart1LabelAndValueContainer, {
208
+ id: "ToolTipBarchart1LabelAndValueContainer"
209
+ }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, {
210
+ id: "ToolTipLabelAndValueContainer"
211
+ }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, {
212
+ id: "TooltipLabel"
213
+ }, "Contribution of Total Package Cost:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, {
214
+ id: "TooltipValue"
215
+ }, "".concat((_payload$0$payload$co = payload[0].payload.contributionPackageCostValue) === null || _payload$0$payload$co === void 0 ? void 0 : _payload$0$payload$co.toFixed(1), "%"))), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, {
216
+ id: "TooltipLabel"
217
+ }, "Contribution of Total Redemption Cost:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, {
218
+ id: "TooltipValue"
219
+ }, "".concat((_payload$0$payload$co2 = payload[0].payload.contributionRedemptionCostValue) === null || _payload$0$payload$co2 === void 0 ? void 0 : _payload$0$payload$co2.toFixed(1), "%"))))), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.ToolTipLabelAndValueContainer, {
220
+ id: "ToolTipLabelAndValueContainer"
221
+ }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.LegendColorRectangle, {
222
+ id: "LegendColorRectangle",
223
+ color: colorBarchart2
224
+ }), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipLabel, {
225
+ id: "TooltipLabel"
226
+ }, "Contribution of Total Incremental Sales:"), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.TooltipValue, {
227
+ id: "TooltipValue"
228
+ }, "".concat((_payload$0$payload$co3 = payload[0].payload.contributionIncrementalSalesValue) === null || _payload$0$payload$co3 === void 0 ? void 0 : _payload$0$payload$co3.toFixed(1), "%"))));
154
229
  default:
155
230
  return null;
156
231
  }
@@ -261,6 +336,7 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
261
336
  width: width
262
337
  }, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
263
338
  data: formatedData,
339
+ maxBarSize: 60,
264
340
  margin: {
265
341
  top: 30,
266
342
  right: 30,
@@ -274,6 +350,9 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
274
350
  height: 120,
275
351
  stroke: isNegativeValueFound() === true ? '#D0D0D0' : '#000'
276
352
  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
353
+ cursor: {
354
+ fill: 'transparent'
355
+ },
277
356
  content: CustomTooltipBarChart
278
357
  }), /*#__PURE__*/_react.default.createElement(_recharts.ReferenceLine, {
279
358
  y: 0,
@@ -312,28 +391,18 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
312
391
  switch (segmentedButtonsFilter) {
313
392
  case INDIVIDUAL_PERFORMANCE_STR:
314
393
  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.PerformanceAnalyticsLegend, {
315
- legendData: [{
316
- iconColor: '#1F7677',
317
- iconType: 'Square',
318
- title: 'Total Cost'
319
- }, {
320
- iconColor: '#90CE9C',
321
- iconType: 'Square',
322
- title: 'Incremental Sales'
323
- }, {
324
- iconColor: '#9CCB3B',
325
- iconType: 'LegendUnionIcon',
326
- title: 'Incremental Sales ROI'
327
- }]
394
+ legendData: legendData
328
395
  });
329
396
  case PERCENT_INCREMENTAL_GROWTH_STR:
330
397
  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.PerformanceAnalyticsLegend, {
331
398
  legendData: [{
332
- iconColor: '#90CE9C',
399
+ iconColor: colorBarchart2,
333
400
  iconType: 'Square',
334
401
  title: '% Incremental Growth'
335
402
  }, {
336
- iconColor: '#9CCB3B',
403
+ iconColor: {
404
+ colorGraphROI: colorGraphROI
405
+ },
337
406
  iconType: 'LegendUnionIcon',
338
407
  title: 'Incremental Sales ROI'
339
408
  }]
@@ -341,11 +410,11 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
341
410
  case PERCENT_CONTRIBUTION_OF_TOTAL_STR:
342
411
  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.PerformanceAnalyticsLegend, {
343
412
  legendData: [{
344
- iconColor: '#1F7677',
413
+ iconColor: colorBarchart1,
345
414
  iconType: 'Square',
346
415
  title: '% Contribution to the Total Cost'
347
416
  }, {
348
- iconColor: '#90CE9C',
417
+ iconColor: colorBarchart2,
349
418
  iconType: 'Square',
350
419
  title: '% Contribution to the Inc. Sales'
351
420
  }]
package/dist/stories/components/PerformanceAnalytics.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.TooltipValue = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipContainer = exports.ToolTipLabelAndValueContainer = exports.SegmentedButtonContainer = exports.ControlsContainer = exports.Controls = void 0;
7
+ exports.TooltipValue = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipContainer = exports.ToolTipLabelAndValueContainer = exports.ToolTipBarchart1LabelAndValueContainer = exports.ToolTipBarchart1Container = exports.SegmentedButtonContainer = exports.LegendColorRectangle = exports.ControlsContainer = exports.Controls = 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;
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
11
11
  var scrollableStyles = "\n overflow-y: auto;\n\n &::-webkit-scrollbar {\n width: 8px;\n }\n\n &::-webkit-scrollbar-track {\n background: #E8E8E8;\n border-radius: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #D0D0D0;\n border-radius: 5px;\n }\n";
12
12
  var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-size: ", ";\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n align-self: center;\n\n > * {\n box-sizing: border-box;\n }\n"])), function (props) {
13
13
  return props.rootFont;
@@ -18,10 +18,15 @@ var ControlsContainer = exports.ControlsContainer = _styledComponents.default.di
18
18
  }, function (props) {
19
19
  return props.height;
20
20
  });
21
- var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n padding: 14px 28px;\n background: white;\n ", "\n @media (max-width: 1536px) {\n padding: 12px 24px;\n } \n > #SegmentedButtonContainer {\n padding-left: 0;\n margin-bottom: 16px;\n > #Controls {\n background: #f2f2f2;\n }\n }\n"])), scrollableStyles);
21
+ var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n padding: 14px 28px;\n background: white;\n ", "\n @media (max-width: 1536px) {\n padding: 12px 24px;\n }\n > #SegmentedButtonContainer {\n padding-left: 0;\n margin-bottom: 16px;\n > #Controls {\n background: #f2f2f2;\n }\n }\n"])), scrollableStyles);
22
22
  var SegmentedButtonContainer = exports.SegmentedButtonContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n padding: 10px 0 0 10px;\n"])));
23
23
  var TooltipContainer = exports.TooltipContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n border-radius: 5px;\n background: #fff;\n font-family: \"Poppins\", sans-serif;\n border-radius: 5px;\n padding: 8px 12px;\n display: grid;\n"])));
24
24
  var TooltipLabel = exports.TooltipLabel = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n width: fit-content;\n margin: 0 6px 0 0;\n"])));
25
25
  var TooltipValue = exports.TooltipValue = _styledComponents.default.p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n width: fit-content;\n margin: 0;\n"])));
26
26
  var TooltipTitle = exports.TooltipTitle = _styledComponents.default.p(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-family: Poppins;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n margin: 0;\n"])));
27
- var ToolTipLabelAndValueContainer = exports.ToolTipLabelAndValueContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n"])));
27
+ var ToolTipBarchart1Container = exports.ToolTipBarchart1Container = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n"])));
28
+ var ToolTipBarchart1LabelAndValueContainer = exports.ToolTipBarchart1LabelAndValueContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n /* display: flex;\n flex-direction: column; */\n // align-items: center;\n gap: 8px;\n"])));
29
+ var ToolTipLabelAndValueContainer = exports.ToolTipLabelAndValueContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
30
+ var LegendColorRectangle = exports.LegendColorRectangle = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n width: 0.875rem;\n min-width: 0.875rem;\n height: 0.875rem;\n border-radius: 2px;\n background: ", ";\n"])), function (props) {
31
+ return props.color;
32
+ });
package/dist/stories/components/PerformanceAnalyticsOneColumn.js CHANGED
@@ -14,15 +14,15 @@ var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals");
14
14
  var _PerformanceAnalyticsOneColumn = require("./PerformanceAnalyticsOneColumn.style");
15
15
  var _PerformanceAnalyticsLegend = require("./PerformanceAnalyticsLegend");
16
16
  var _CommonFunctions = require("./CommonFunctions");
17
- var _excluded = ["totalsData", "data", "colorBarchart1", "colorBarchart2", "width", "height", "lineChartHeight", "lineChartValueType", "lineChartValueBold", "topBarPercentSigning", "topBarSigning", "noDataText"];
17
+ var _excluded = ["totalsData", "data", "legendData", "colorBarchart1", "colorBarchart2", "width", "height", "lineChartHeight", "lineChartValueType", "lineChartValueBold", "topBarPercentSigning", "topBarSigning", "noDataText"];
18
18
  var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = function PerformanceAnalyticsOneColumn(_ref) {
19
19
  var _ref$totalsData = _ref.totalsData,
20
20
  totalsData = _ref$totalsData === void 0 ? [{
21
- title: 'tile',
21
+ title: 'title',
22
22
  value: 13,
23
23
  dotCut: true,
24
24
  currency: true,
25
- currencyType: 'UGH',
25
+ currencyType: 'USD',
26
26
  growthPercent: 14,
27
27
  showGrowthPercentSign: true
28
28
  }] : _ref$totalsData,
@@ -37,6 +37,12 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
37
37
  existingShoppersValue: 66,
38
38
  existingShoppersPercentValue: 45
39
39
  }] : _ref$data,
40
+ _ref$legendData = _ref.legendData,
41
+ legendData = _ref$legendData === void 0 ? [{
42
+ iconColor: string | null,
43
+ iconType: string | null,
44
+ title: string | null
45
+ }] : _ref$legendData,
40
46
  _ref$colorBarchart = _ref.colorBarchart1,
41
47
  colorBarchart1 = _ref$colorBarchart === void 0 ? '#1F7677' : _ref$colorBarchart,
42
48
  _ref$colorBarchart2 = _ref.colorBarchart2,
@@ -50,22 +56,16 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
50
56
  topBarSigning = _ref.topBarSigning,
51
57
  noDataText = _ref.noDataText,
52
58
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
53
- // const {
54
- // totalsData,
55
- // noDataText,
56
- // height,
57
- // width,
58
- // } = props;
59
59
  var CustomTooltipBarChart = function CustomTooltipBarChart(_ref2) {
60
60
  var active = _ref2.active,
61
61
  payload = _ref2.payload;
62
62
  if (active && payload && payload.length > 0) {
63
63
  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TooltipContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.LegendColorRectangle, {
64
64
  id: "LegendColorRectangle",
65
- color: "#1F7677"
65
+ color: colorBarchart1
66
66
  }), /*#__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(payload[0].payload.newShoppersPercentValue.toFixed(2), "%) "))), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.ToolTipLabelAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.LegendColorRectangle, {
67
67
  id: "LegendColorRectangle",
68
- color: "#90CE9C"
68
+ color: colorBarchart2
69
69
  }), /*#__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(payload[0].payload.existingShoppersPercentValue.toFixed(2), "%) "))));
70
70
  }
71
71
  return null;
@@ -95,7 +95,7 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
95
95
  fontSize: "16px",
96
96
  textAnchor: "middle",
97
97
  dominantBaseline: "middle"
98
- }, "".concat(getTopBarSigning(topBarSigning)).concat(totalValue).concat(topBarPercentSigning ? '%' : '')));
98
+ }, "".concat(getTopBarSigning(topBarSigning), "\n ").concat((0, _CommonFunctions.getFormattedValue)(totalValue), "\n ").concat((0, _CommonFunctions.getFormattedUnits)(totalValue), "\n ").concat(topBarPercentSigning ? '%' : '')));
99
99
  };
100
100
  var CustomizedTickBarChart = function CustomizedTickBarChart(props) {
101
101
  var x = props.x,
@@ -187,23 +187,7 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
187
187
  };
188
188
  var displayLegendData = function displayLegendData() {
189
189
  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.PerformanceAnalyticsLegend, {
190
- legendData: [{
191
- iconColor: '#1F7677',
192
- iconType: 'Square',
193
- title: '% New Shoppers'
194
- }, {
195
- iconColor: '#1F7677',
196
- iconType: 'LegendUnionIcon',
197
- title: '% New Shoppers'
198
- }, {
199
- iconColor: '#90CE9C',
200
- iconType: 'Square',
201
- title: '# Existing Shoppers'
202
- }, {
203
- iconColor: '#9CCB3B',
204
- iconType: 'LegendUnionIcon',
205
- title: '# Existing Shoppers'
206
- }]
190
+ legendData: legendData
207
191
  });
208
192
  };
209
193
  var CustomizedLabelROI = function CustomizedLabelROI(props) {
package/dist/stories/components/PerformanceAnalyticsOneColumn.style.js CHANGED
@@ -8,7 +8,7 @@ exports.TotalsDataContainer = exports.TooltipValue = exports.TooltipTitle = expo
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
11
- var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: 'Poppins', sans-serif;\n font-style: normal;\n font-size: ", ";\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n align-self: center;\n\n > * {\n box-sizing: border-box;\n }\n"])), function (props) {
11
+ var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-size: ", ";\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n align-self: center;\n\n > * {\n box-sizing: border-box;\n }\n"])), function (props) {
12
12
  return props.rootFont;
13
13
  }, function (props) {
14
14
  return props.textColor;
@@ -19,7 +19,7 @@ var ControlsContainer = exports.ControlsContainer = _styledComponents.default.di
19
19
  });
20
20
  var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n padding: 24px 40px;\n background: white;\n @media (max-width: 1536px) {\n padding: 12px 32px;\n }\n"])));
21
21
  var SegmentedButtonContainer = exports.SegmentedButtonContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n padding: 10px 0 0 10px;\n"])));
22
- var TotalsDataContainer = exports.TotalsDataContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n"])));
22
+ var TotalsDataContainer = exports.TotalsDataContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)([""])));
23
23
  var LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 12px;\n }\n"])));
24
24
  var LabelText = exports.LabelText = _styledComponents.default.tspan(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 10px;\n }\n @media (max-width: 1366px) {\n font-size: 8px;\n }\n"])));
25
25
  var TooltipContainer = exports.TooltipContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n border-radius: 5px;\n background: #fff;\n font-family: \"Poppins\", sans-serif;\n border-radius: 5px;\n padding: 8px 12px;\n display: grid;\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.331",
3
+ "version": "1.0.332",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {