sag_components 1.0.334 → 1.0.336

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 (11) hide show
  1. package/.history/package_20231121151523.json +77 -0
  2. package/dist/stories/components/CheckBox.style.js +1 -1
  3. package/dist/stories/components/Dropdown.js +0 -3
  4. package/dist/stories/components/PerformanceAnalytics.js +40 -9
  5. package/dist/stories/components/PerformanceAnalytics.style.js +14 -11
  6. package/dist/stories/components/PerformanceAnalyticsOneColumn.js +40 -7
  7. package/dist/stories/components/TitleDescription.style.js +1 -1
  8. package/dist/stories/components/Tooltip.js +1 -1
  9. package/dist/stories/components/TspanTooltip.js +18 -0
  10. package/dist/stories/components/TspanTooltip.style.js +22 -0
  11. package/package.json +14 -20
package/.history/package_20231121151523.json ADDED
@@ -0,0 +1,77 @@
1
+ {
2
+ "name": "sag_components",
3
+ "version": "1.0.336",
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/plugin-proposal-private-property-in-object": "^7.21.11",
18
+ "@babel/cli": "^7.23.0",
19
+ "@babel/preset-env": "^7.23.2",
20
+ "@babel/preset-react": "^7.22.15",
21
+ "@babel/preset-typescript": "^7.23.2",
22
+ "babel-plugin-react-css-modules": "^5.2.6",
23
+ "babel-preset-react-app": "^10.0.1",
24
+ "@storybook/addon-designs": "^7.0.5",
25
+ "@storybook/addon-essentials": "^7.4.6",
26
+ "@storybook/addon-interactions": "^7.4.6",
27
+ "@storybook/addon-links": "^7.4.6",
28
+ "@storybook/addon-storysource": "^7.4.6",
29
+ "@storybook/addons": "^7.5.3",
30
+ "@storybook/blocks": "^7.4.6",
31
+ "@storybook/preset-scss": "^1.0.3",
32
+ "@storybook/react": "^7.4.6",
33
+ "@storybook/react-webpack5": "^7.4.6",
34
+ "@storybook/testing-library": "^0.2.2",
35
+ "@storybook/theming": "^7.5.3",
36
+ "cross-env": "^7.0.3",
37
+ "css-loader": "^6.8.1",
38
+ "eslint": "^8.53.0",
39
+ "eslint-config-airbnb": "^19.0.4",
40
+ "eslint-plugin-import": "^2.29.0",
41
+ "eslint-plugin-jsx-a11y": "^6.8.0",
42
+ "eslint-plugin-react": "^7.33.2",
43
+ "eslint-plugin-react-hooks": "^4.6.0",
44
+ "react-dom": "^18.2.0",
45
+ "sass": "^1.69.5",
46
+ "sass-loader": "^13.3.2",
47
+ "style-loader": "^3.3.3"
48
+ },
49
+ "dependencies": {
50
+ "@emotion/react": "^11.11.1",
51
+ "@emotion/styled": "^11.11.0",
52
+ "@mui/icons-material": "^5.14.16",
53
+ "@mui/material": "^5.14.16",
54
+ "@mui/x-date-pickers": "^6.18.0",
55
+ "classnames": "^2.3.2",
56
+ "dayjs": "^1.11.10",
57
+ "prop-types": "^15.8.1",
58
+ "react": "^18.2.0",
59
+ "react-css-modules": "^4.7.11",
60
+ "react-loading-skeleton": "^3.3.1",
61
+ "recharts": "^2.9.2",
62
+ "storybook": "^7.4.6",
63
+ "styled-components": "^5.3.1"
64
+ },
65
+ "browserslist": {
66
+ "production": [
67
+ ">0.2%",
68
+ "not dead",
69
+ "not op_mini all"
70
+ ],
71
+ "development": [
72
+ "last 1 chrome version",
73
+ "last 1 firefox version",
74
+ "last 1 safari version"
75
+ ]
76
+ }
77
+ }
package/dist/stories/components/CheckBox.style.js CHANGED
@@ -17,6 +17,6 @@ var ControlsContainer = exports.ControlsContainer = _styledComponents.default.di
17
17
  });
18
18
  var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex; \n align-items: center;\n"])));
19
19
  var Label = exports.Label = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n padding: 0 10px 0 10px;\n white-space: nowrap;\n @media (max-width: 1536px) {\n font-size: 11px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n"])));
20
- var CheckBoxIconContainer = exports.CheckBoxIconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin: 0;\n cursor: ", ";\n \n \n"])), function (props) {
20
+ var CheckBoxIconContainer = exports.CheckBoxIconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin: 0;\n cursor: ", ";\n"])), function (props) {
21
21
  return props.disabled ? 'default' : 'pointer';
22
22
  });
package/dist/stories/components/Dropdown.js CHANGED
@@ -19,9 +19,6 @@ var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
19
19
  var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
20
20
  var _ArrowDropDownIcon = require("./icons/ArrowDropDownIcon");
21
21
  var _Dropdown = require("./Dropdown.style");
22
- // import PropTypes from "prop-types";
23
- // import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
24
- // import { faChevronDown, faAsterisk } from "@fortawesome/free-solid-svg-icons";
25
22
  var icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
26
23
  fontSize: "small"
27
24
  });
package/dist/stories/components/PerformanceAnalytics.js CHANGED
@@ -12,6 +12,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
12
12
  var _react = _interopRequireWildcard(require("react"));
13
13
  var _propTypes = _interopRequireWildcard(require("prop-types"));
14
14
  var _recharts = require("recharts");
15
+ var _TspanTooltip = _interopRequireDefault(require("./TspanTooltip"));
15
16
  var _NoDataFoundMessage = require("./NoDataFoundMessage");
16
17
  var _SegmentedButton = require("./SegmentedButton");
17
18
  var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals");
@@ -84,6 +85,18 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
84
85
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
85
86
  segmentedButtonsFilter = _useState2[0],
86
87
  setSegmentedButtonsFilter = _useState2[1];
88
+ var _useState3 = (0, _react.useState)(false),
89
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
90
+ showLegendTooltip = _useState4[0],
91
+ setShowLegendTooltip = _useState4[1];
92
+ var _useState5 = (0, _react.useState)({
93
+ content: '',
94
+ clientX: 0,
95
+ clientY: 0
96
+ }),
97
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
98
+ tooltipCouponText = _useState6[0],
99
+ setTooltipCouponText = _useState6[1];
87
100
  var displayTotalsData = function displayTotalsData() {
88
101
  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.PerformanceAnalyticsTotals, {
89
102
  totalsData: totalsData,
@@ -295,32 +308,44 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
295
308
  y = props.y,
296
309
  stroke = props.stroke,
297
310
  payload = props.payload;
311
+ var handleMouseEnter = function handleMouseEnter(content) {
312
+ setTooltipCouponText(function (prevState) {
313
+ return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prevState), {}, {
314
+ content: content !== prevState.content ? content : prevState.content,
315
+ clientX: x,
316
+ clientY: y
317
+ });
318
+ });
319
+ setShowLegendTooltip(true);
320
+ };
321
+ var handleMouseLeave = function handleMouseLeave() {
322
+ setShowLegendTooltip(false);
323
+ };
298
324
  if (data && data.length > 0 && payload) {
299
325
  var retailerData = data.filter(function (item) {
300
326
  return item.retailer === payload.value;
301
327
  });
302
328
  if (retailerData && retailerData.length > 0) {
303
329
  var _retailerData$0$offer;
330
+ var offerType = (_retailerData$0$offer = retailerData[0].offerType) === null || _retailerData$0$offer === void 0 ? void 0 : _retailerData$0$offer.substring(0, 10);
304
331
  return /*#__PURE__*/_react.default.createElement("g", {
305
- transform: "translate(".concat(x, ",").concat(y, ")")
332
+ transform: "translate(".concat(x, ",").concat(y, ")"),
333
+ onMouseEnter: function onMouseEnter() {
334
+ return handleMouseEnter(offerType);
335
+ },
336
+ onMouseLeave: handleMouseLeave
306
337
  }, /*#__PURE__*/_react.default.createElement("text", {
307
338
  x: 0,
308
339
  y: 0,
309
340
  dy: 16,
310
341
  fill: "#212121"
311
- }, /*#__PURE__*/_react.default.createElement("tspan", {
342
+ }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.LabelBoldText, {
312
343
  textAnchor: "middle",
313
344
  x: "0",
314
345
  dy: "50",
315
346
  fontSize: 16,
316
347
  fontWeight: 600
317
- }, retailerData[0].retailer), /*#__PURE__*/_react.default.createElement("tspan", {
318
- x: "0",
319
- dy: "30",
320
- textAnchor: "middle",
321
- fontSize: 14,
322
- fontWeight: 400
323
- }, (_retailerData$0$offer = retailerData[0].offerType) === null || _retailerData$0$offer === void 0 ? void 0 : _retailerData$0$offer.substring(0, 10)), /*#__PURE__*/_react.default.createElement("tspan", {
348
+ }, payload.value), /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.LabelText, {
324
349
  textAnchor: "middle",
325
350
  x: "0",
326
351
  dy: "30",
@@ -365,6 +390,12 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
365
390
  tickLine: false,
366
391
  height: 120,
367
392
  stroke: isNegativeValueFound() === true ? '#D0D0D0' : '#000'
393
+ }), showLegendTooltip && /*#__PURE__*/_react.default.createElement(_TspanTooltip.default, {
394
+ id: "Tooltip",
395
+ content: tooltipCouponText.content,
396
+ top: tooltipCouponText.clientY,
397
+ left: tooltipCouponText.clientX,
398
+ direction: "top"
368
399
  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
369
400
  cursor: {
370
401
  fill: 'transparent'
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.ToolTipBarchart1LabelAndValueContainer = exports.ToolTipBarchart1Container = exports.SegmentedButtonContainer = exports.LegendColorRectangle = exports.ControlsContainer = exports.Controls = void 0;
7
+ exports.TooltipValue = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipContainer = exports.ToolTipLabelAndValueContainer = exports.ToolTipBarchart1LabelAndValueContainer = exports.ToolTipBarchart1Container = exports.SegmentedButtonContainer = exports.LegendTitle = exports.LegendColorRectangle = exports.LabelText = exports.LabelBoldText = 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, _templateObject9, _templateObject10, _templateObject11;
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
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;
@@ -19,14 +19,17 @@ var ControlsContainer = exports.ControlsContainer = _styledComponents.default.di
19
19
  return props.height;
20
20
  });
21
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
- var SegmentedButtonContainer = exports.SegmentedButtonContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n padding: 10px 0 0 10px;\n"])));
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
- 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
- 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
- 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 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) {
22
+ var LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 12px;\n }\n"])));
23
+ var LabelText = exports.LabelText = _styledComponents.default.tspan(_templateObject4 || (_templateObject4 = (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"])));
24
+ var LegendTitle = exports.LegendTitle = _styledComponents.default.h5(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 11px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n"])));
25
+ var SegmentedButtonContainer = exports.SegmentedButtonContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n padding: 10px 0 0 10px;\n"])));
26
+ 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"])));
27
+ var TooltipLabel = exports.TooltipLabel = _styledComponents.default.p(_templateObject8 || (_templateObject8 = (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"])));
28
+ var TooltipValue = exports.TooltipValue = _styledComponents.default.p(_templateObject9 || (_templateObject9 = (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"])));
29
+ var TooltipTitle = exports.TooltipTitle = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (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"])));
30
+ var ToolTipBarchart1Container = exports.ToolTipBarchart1Container = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n"])));
31
+ var ToolTipBarchart1LabelAndValueContainer = exports.ToolTipBarchart1LabelAndValueContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n gap: 8px;\n"])));
32
+ var ToolTipLabelAndValueContainer = exports.ToolTipLabelAndValueContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
33
+ var LegendColorRectangle = exports.LegendColorRectangle = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (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
34
  return props.color;
32
35
  });
package/dist/stories/components/PerformanceAnalyticsOneColumn.js CHANGED
@@ -6,9 +6,12 @@ Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.default = exports.PerformanceAnalyticsOneColumn = void 0;
9
+ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
9
11
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
10
12
  var _react = _interopRequireWildcard(require("react"));
11
13
  var _recharts = require("recharts");
14
+ var _TspanTooltip = _interopRequireDefault(require("./TspanTooltip"));
12
15
  var _NoDataFoundMessage = require("./NoDataFoundMessage");
13
16
  var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals");
14
17
  var _PerformanceAnalyticsOneColumn = require("./PerformanceAnalyticsOneColumn.style");
@@ -56,6 +59,18 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
56
59
  topBarSigning = _ref.topBarSigning,
57
60
  noDataText = _ref.noDataText,
58
61
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
62
+ var _useState = (0, _react.useState)(false),
63
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
64
+ showLegendTooltip = _useState2[0],
65
+ setShowLegendTooltip = _useState2[1];
66
+ var _useState3 = (0, _react.useState)({
67
+ content: '',
68
+ clientX: 0,
69
+ clientY: 0
70
+ }),
71
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
72
+ tooltipCouponText = _useState4[0],
73
+ setTooltipCouponText = _useState4[1];
59
74
  var CustomTooltipBarChart = function CustomTooltipBarChart(_ref2) {
60
75
  var active = _ref2.active,
61
76
  payload = _ref2.payload;
@@ -101,14 +116,32 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
101
116
  var x = props.x,
102
117
  y = props.y,
103
118
  payload = props.payload;
119
+ var handleMouseEnter = function handleMouseEnter(content) {
120
+ setTooltipCouponText(function (prevState) {
121
+ return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prevState), {}, {
122
+ content: content !== prevState.content ? content : prevState.content,
123
+ clientX: x,
124
+ clientY: y
125
+ });
126
+ });
127
+ setShowLegendTooltip(true);
128
+ };
129
+ var handleMouseLeave = function handleMouseLeave() {
130
+ setShowLegendTooltip(false);
131
+ };
104
132
  if (data && data.length > 0 && payload) {
105
133
  var retailerData = data.filter(function (item) {
106
134
  return item.retailer === payload.value;
107
135
  });
108
136
  if (retailerData && retailerData.length > 0) {
109
137
  var _retailerData$0$offer;
138
+ var offerType = (_retailerData$0$offer = retailerData[0].offerType) === null || _retailerData$0$offer === void 0 ? void 0 : _retailerData$0$offer.substring(0, 10);
110
139
  return /*#__PURE__*/_react.default.createElement("g", {
111
- transform: "translate(".concat(x, ",").concat(y, ")")
140
+ transform: "translate(".concat(x, ",").concat(y, ")"),
141
+ onMouseEnter: function onMouseEnter() {
142
+ return handleMouseEnter(offerType);
143
+ },
144
+ onMouseLeave: handleMouseLeave
112
145
  }, /*#__PURE__*/_react.default.createElement("text", {
113
146
  x: 0,
114
147
  y: 0,
@@ -125,12 +158,6 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
125
158
  dy: "30",
126
159
  fontSize: 14,
127
160
  fontWeight: 400
128
- }, (_retailerData$0$offer = retailerData[0].offerType) === null || _retailerData$0$offer === void 0 ? void 0 : _retailerData$0$offer.substring(0, 10)), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.LabelText, {
129
- textAnchor: "middle",
130
- x: "0",
131
- dy: "30",
132
- fontSize: 14,
133
- fontWeight: 400
134
161
  }, retailerData[0].period)));
135
162
  }
136
163
  return null;
@@ -158,6 +185,12 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
158
185
  height: 120,
159
186
  stroke: "#D0D0D0",
160
187
  fill: "#212121"
188
+ }), showLegendTooltip && /*#__PURE__*/_react.default.createElement(_TspanTooltip.default, {
189
+ id: "Tooltip",
190
+ content: tooltipCouponText.content,
191
+ top: tooltipCouponText.clientY,
192
+ left: tooltipCouponText.clientX,
193
+ direction: "top"
161
194
  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
162
195
  cursor: {
163
196
  fill: 'transparent'
package/dist/stories/components/TitleDescription.style.js CHANGED
@@ -18,7 +18,7 @@ var MainContainer = exports.MainContainer = _styledComponents.default.div(_templ
18
18
  var PanelContainer = exports.PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n border-radius: 12px;\n background: #ffffff;\n padding: 1rem 1rem 1rem 2.5rem;\n font-weight: 400;\n line-height: 19px;\n white-space: pre-wrap;\n //overflow: hidden;\n width: 100%;\n @media (max-width: 1536px) {\n padding: 13px 16px;\n }\n @media (max-width: 1366px) {\n padding: 12px 16px;\n }\n"])));
19
19
  var EventNameAndViewCreativeContainer = exports.EventNameAndViewCreativeContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n"])));
20
20
  var EventNameViewCreativeSubContainer = exports.EventNameViewCreativeSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n align-content: center;\n align-items: center;\n gap: 20px;\n"])));
21
- var EventName = exports.EventName = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 1rem;\n margin: 0; \n @media (max-width: 1536px) {\n font-size: 14px;\n }\n"])));
21
+ var EventName = exports.EventName = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 16px;\n margin: 0; \n @media (max-width: 1536px) {\n font-size: 14px;\n }\n"])));
22
22
  var ViewCreativeContainer = exports.ViewCreativeContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 12px;\n border: 1px solid #ccc;\n margin-left: 10px;\n padding: 2px 10px;\n color: ", ";\n &:hover {\n cursor: ", ";\n }\n"])), function (props) {
23
23
  return props.disabled ? '#B1B1B1' : '#212121';
24
24
  }, function (props) {
package/dist/stories/components/Tooltip.js CHANGED
@@ -30,7 +30,7 @@ var Tooltip = function Tooltip(props) {
30
30
  onMouseEnter: showTip,
31
31
  onMouseLeave: hideTip
32
32
  }, props.children, active && /*#__PURE__*/_react.default.createElement(_Tooltip.TooltipTip, {
33
- className: "controls ".concat(props.direction || "top")
33
+ className: "controls ".concat(props.direction || 'top')
34
34
  }, props.content)));
35
35
  };
36
36
  var _default = exports.default = Tooltip;
package/dist/stories/components/TspanTooltip.js ADDED
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _TspanTooltip = require("./TspanTooltip.style");
10
+ var Tooltip = function Tooltip(props) {
11
+ return /*#__PURE__*/_react.default.createElement(_TspanTooltip.TooltipContainer, {
12
+ top: "".concat(props.top, "px"),
13
+ left: "".concat(props.left, "px")
14
+ }, /*#__PURE__*/_react.default.createElement(_TspanTooltip.TooltipWrapper, null, /*#__PURE__*/_react.default.createElement(_TspanTooltip.TooltipTip, {
15
+ className: "controls ".concat(props.direction || 'top')
16
+ }, props.content)));
17
+ };
18
+ var _default = exports.default = Tooltip;
package/dist/stories/components/TspanTooltip.style.js ADDED
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.TooltipWrapper = exports.TooltipTip = exports.TooltipContainer = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _templateObject, _templateObject2, _templateObject3;
11
+ /* Custom properties */
12
+ var TooltipContainer = exports.TooltipContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n --tooltip-text-color: black;\n --tooltip-background-color: white;\n --tooltip-margin: 40px;\n --tooltip-arrow-size: 10px;\n position: absolute;\n z-index: 9999;\n top: ", ";\n left: ", ";\n"])), function (props) {
13
+ return props.top;
14
+ }, function (props) {
15
+ return props.left;
16
+ });
17
+
18
+ /* Wrapping */
19
+ var TooltipWrapper = exports.TooltipWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n position: relative;\n"])));
20
+
21
+ /* Absolute positioning */
22
+ var TooltipTip = exports.TooltipTip = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n position: absolute;\n border-radius: 4px;\n left: 50%;\n transform: translateX(-50%);\n padding: 8px 12px;\n color: var(--tooltip-text-color);\n background: var(--tooltip-background-color);\n font-size: 12px;\n font-family: sans-serif;\n line-height: 1;\n z-index: 100;\n white-space: nowrap;\n \n /* CSS border triangles */\n &.controls::before {\n content: \" \";\n left: 50%;\n border: solid transparent;\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n border-width: var(--tooltip-arrow-size);\n margin-left: calc(var(--tooltip-arrow-size) * -1);\n }\n\n /* Absolute positioning */\n &.controls.top {\n top: calc(var(--tooltip-margin) * -1);\n }\n\n /* CSS border triangles */\n &.controls.top::before {\n top: 100%;\n border-top-color: var(--tooltip-background-color);\n }\n\n /* Absolute positioning */\n &.controls.right {\n left: calc(70% + var(--tooltip-margin));\n top: 50%;\n transform: translateX(0) translateY(-50%);\n }\n\n /* CSS border triangles */\n &.controls.right::before {\n left: calc(var(--tooltip-arrow-size) * -1);\n top: 50%;\n transform: translateX(0) translateY(-50%);\n border-right-color: var(--tooltip-background-color);\n }\n\n /* Absolute positioning */\n &.controls.bottom {\n bottom: calc(var(--tooltip-margin) * -1);\n }\n /* CSS border triangles */\n &.controls.bottom::before {\n bottom: 100%;\n border-bottom-color: var(--tooltip-background-color);\n }\n\n /* Absolute positioning */\n &.controls.left {\n left: auto;\n right: calc(70% + var(--tooltip-margin));\n top: 50%;\n transform: translateX(0) translateY(-50%);\n }\n /* CSS border triangles */\n &.controls.left::before {\n left: auto;\n right: calc(var(--tooltip-arrow-size) * -2);\n top: 50%;\n transform: translateX(0) translateY(-50%);\n border-left-color: var(--tooltip-background-color);\n }\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.334",
3
+ "version": "1.0.336",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
@@ -14,20 +14,25 @@
14
14
  "author": "SAG",
15
15
  "license": "ISC",
16
16
  "devDependencies": {
17
+ "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
17
18
  "@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",
19
+ "@babel/preset-env": "^7.23.2",
20
+ "@babel/preset-react": "^7.22.15",
21
+ "@babel/preset-typescript": "^7.23.2",
22
+ "babel-plugin-react-css-modules": "^5.2.6",
23
+ "babel-preset-react-app": "^10.0.1",
24
+ "@storybook/addon-designs": "^7.0.5",
22
25
  "@storybook/addon-essentials": "^7.4.6",
23
26
  "@storybook/addon-interactions": "^7.4.6",
24
27
  "@storybook/addon-links": "^7.4.6",
25
28
  "@storybook/addon-storysource": "^7.4.6",
29
+ "@storybook/addons": "^7.5.3",
26
30
  "@storybook/blocks": "^7.4.6",
27
31
  "@storybook/preset-scss": "^1.0.3",
28
32
  "@storybook/react": "^7.4.6",
29
33
  "@storybook/react-webpack5": "^7.4.6",
30
34
  "@storybook/testing-library": "^0.2.2",
35
+ "@storybook/theming": "^7.5.3",
31
36
  "cross-env": "^7.0.3",
32
37
  "css-loader": "^6.8.1",
33
38
  "eslint": "^8.53.0",
@@ -42,29 +47,18 @@
42
47
  "style-loader": "^3.3.3"
43
48
  },
44
49
  "dependencies": {
45
- "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
46
- "@dnd-kit/core": "^6.0.8",
47
50
  "@emotion/react": "^11.11.1",
48
51
  "@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",
52
+ "@mui/icons-material": "^5.14.16",
53
+ "@mui/material": "^5.14.16",
54
+ "@mui/x-date-pickers": "^6.18.0",
59
55
  "classnames": "^2.3.2",
60
56
  "dayjs": "^1.11.10",
61
- "hoopy": "^0.1.4",
62
57
  "prop-types": "^15.8.1",
63
58
  "react": "^18.2.0",
64
59
  "react-css-modules": "^4.7.11",
65
60
  "react-loading-skeleton": "^3.3.1",
66
- "react-scripts": "5.0.1",
67
- "recharts": "^2.9.3",
61
+ "recharts": "^2.9.2",
68
62
  "storybook": "^7.4.6",
69
63
  "styled-components": "^5.3.1"
70
64
  },