sag_components 1.0.279 → 1.0.281

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.
@@ -0,0 +1,82 @@
1
+ {
2
+ "name": "sag_components",
3
+ "version": "1.0.280",
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.2",
19
+ "@babel/preset-react": "^7.22.15",
20
+ "@babel/preset-typescript": "^7.23.2",
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": "^5.2.7",
33
+ "eslint": "^8.50.0",
34
+ "eslint-config-airbnb": "^19.0.4",
35
+ "eslint-plugin-import": "^2.28.1",
36
+ "eslint-plugin-jsx-a11y": "^6.7.1",
37
+ "eslint-plugin-react": "^7.33.2",
38
+ "eslint-plugin-react-hooks": "^4.6.0",
39
+ "react-dom": "^18.2.0",
40
+ "sass": "^1.68.0",
41
+ "sass-loader": "^13.3.2",
42
+ "style-loader": "^3.3.3"
43
+ },
44
+ "dependencies": {
45
+ "@dnd-kit/core": "^6.0.8",
46
+ "@emotion/react": "^11.11.1",
47
+ "@emotion/styled": "^11.11.0",
48
+ "@fontsource/roboto": "^5.0.8",
49
+ "@fortawesome/fontawesome-svg-core": "^6.4.2",
50
+ "@fortawesome/free-solid-svg-icons": "^6.4.2",
51
+ "@fortawesome/react-fontawesome": "^0.2.0",
52
+ "@mui/icons-material": "^5.14.13",
53
+ "@mui/material": "^5.14.13",
54
+ "@mui/styled-engine-sc": "^5.14.12",
55
+ "@mui/x-date-pickers": "^6.16.2",
56
+ "@storybook/addon-designs": "^7.0.5",
57
+ "babel-plugin-react-css-modules": "^5.2.6",
58
+ "classnames": "^2.3.2",
59
+ "dayjs": "^1.11.10",
60
+ "hoopy": "^0.1.4",
61
+ "prop-types": "^15.8.1",
62
+ "react": "^18.2.0",
63
+ "react-css-modules": "^4.7.11",
64
+ "react-loading-skeleton": "^3.3.1",
65
+ "react-scripts": "5.0.1",
66
+ "recharts": "^2.6.2",
67
+ "storybook": "^7.4.6",
68
+ "styled-components": "^5.3.11"
69
+ },
70
+ "browserslist": {
71
+ "production": [
72
+ ">0.2%",
73
+ "not dead",
74
+ "not op_mini all"
75
+ ],
76
+ "development": [
77
+ "last 1 chrome version",
78
+ "last 1 firefox version",
79
+ "last 1 safari version"
80
+ ]
81
+ }
82
+ }
@@ -0,0 +1,82 @@
1
+ {
2
+ "name": "sag_components",
3
+ "version": "1.0.281",
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.2",
19
+ "@babel/preset-react": "^7.22.15",
20
+ "@babel/preset-typescript": "^7.23.2",
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": "^5.2.7",
33
+ "eslint": "^8.50.0",
34
+ "eslint-config-airbnb": "^19.0.4",
35
+ "eslint-plugin-import": "^2.28.1",
36
+ "eslint-plugin-jsx-a11y": "^6.7.1",
37
+ "eslint-plugin-react": "^7.33.2",
38
+ "eslint-plugin-react-hooks": "^4.6.0",
39
+ "react-dom": "^18.2.0",
40
+ "sass": "^1.68.0",
41
+ "sass-loader": "^13.3.2",
42
+ "style-loader": "^3.3.3"
43
+ },
44
+ "dependencies": {
45
+ "@dnd-kit/core": "^6.0.8",
46
+ "@emotion/react": "^11.11.1",
47
+ "@emotion/styled": "^11.11.0",
48
+ "@fontsource/roboto": "^5.0.8",
49
+ "@fortawesome/fontawesome-svg-core": "^6.4.2",
50
+ "@fortawesome/free-solid-svg-icons": "^6.4.2",
51
+ "@fortawesome/react-fontawesome": "^0.2.0",
52
+ "@mui/icons-material": "^5.14.13",
53
+ "@mui/material": "^5.14.13",
54
+ "@mui/styled-engine-sc": "^5.14.12",
55
+ "@mui/x-date-pickers": "^6.16.2",
56
+ "@storybook/addon-designs": "^7.0.5",
57
+ "babel-plugin-react-css-modules": "^5.2.6",
58
+ "classnames": "^2.3.2",
59
+ "dayjs": "^1.11.10",
60
+ "hoopy": "^0.1.4",
61
+ "prop-types": "^15.8.1",
62
+ "react": "^18.2.0",
63
+ "react-css-modules": "^4.7.11",
64
+ "react-loading-skeleton": "^3.3.1",
65
+ "react-scripts": "5.0.1",
66
+ "recharts": "^2.6.2",
67
+ "storybook": "^7.4.6",
68
+ "styled-components": "^5.3.11"
69
+ },
70
+ "browserslist": {
71
+ "production": [
72
+ ">0.2%",
73
+ "not dead",
74
+ "not op_mini all"
75
+ ],
76
+ "development": [
77
+ "last 1 chrome version",
78
+ "last 1 firefox version",
79
+ "last 1 safari version"
80
+ ]
81
+ }
82
+ }
@@ -361,7 +361,61 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
361
361
  textColor: textColor
362
362
  }, (totalsData === null || totalsData === void 0 ? void 0 : totalsData.length) > 0 && (data === null || data === void 0 ? void 0 : data.length) > 0 ? /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.Controls, {
363
363
  id: "Controls"
364
- }, displayTotalsData(), displaySegmentedButtons(), displayLineChartROI(), displayBarChart(), displayLegendData()) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
364
+ }, /*#__PURE__*/_react.default.createElement(_SegmentedButton.SegmentedButton, {
365
+ backgroundColor: "#ECF0FF",
366
+ controlRadius: 8,
367
+ defaultIndex: 1,
368
+ fontSize: 14,
369
+ height: 40,
370
+ name: "segmentedDollarsOrUnits",
371
+ onClick: function onClick() {},
372
+ options: [{
373
+ value: 'Dollars'
374
+ }, {
375
+ value: 'Units'
376
+ }],
377
+ segmentRadius: 8,
378
+ selectedSegmentColor: "#FFFFFF",
379
+ selectedTextColor: "#212121",
380
+ unselectedTextColor: "#212121",
381
+ width: 200
382
+ }), /*#__PURE__*/_react.default.createElement(_SegmentedButton.SegmentedButton, {
383
+ backgroundColor: "#ECF0FF",
384
+ controlRadius: 8,
385
+ defaultIndex: 1,
386
+ fontSize: 14,
387
+ height: 40,
388
+ name: "segmentedDollarsOrUnits",
389
+ onClick: function onClick() {},
390
+ options: [{
391
+ value: 'Baseline'
392
+ }, {
393
+ value: 'STLY'
394
+ }],
395
+ segmentRadius: 8,
396
+ selectedSegmentColor: "#FFFFFF",
397
+ selectedTextColor: "#212121",
398
+ unselectedTextColor: "#212121",
399
+ width: 200
400
+ }), /*#__PURE__*/_react.default.createElement(_SegmentedButton.SegmentedButton, {
401
+ backgroundColor: "#ECF0FF",
402
+ controlRadius: 8,
403
+ defaultIndex: 1,
404
+ fontSize: 14,
405
+ height: 40,
406
+ name: "segmentedDollarsOrUnits",
407
+ onClick: function onClick() {},
408
+ options: [{
409
+ value: 'Incremental Sales'
410
+ }, {
411
+ value: 'Actual Sales'
412
+ }],
413
+ segmentRadius: 8,
414
+ selectedSegmentColor: "#FFFFFF",
415
+ selectedTextColor: "#212121",
416
+ unselectedTextColor: "#212121",
417
+ width: 200
418
+ }), displayTotalsData(), displaySegmentedButtons(), displayLineChartROI(), displayBarChart(), displayLegendData()) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
365
419
  noDataText: noDataText
366
420
  }));
367
421
  };
@@ -17,7 +17,7 @@ var ControlsContainer = exports.ControlsContainer = _styledComponents.default.di
17
17
  }, function (props) {
18
18
  return props.height;
19
19
  });
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"])));
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 > #SegmentedButtonContainer {\n padding-left: 0;\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
22
  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"])));
23
23
  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"])));
@@ -81,8 +81,7 @@ var SegmentedButton = exports.SegmentedButton = function SegmentedButton(_ref) {
81
81
  if (options && options.length > 0 && width && width > 0) {
82
82
  segmentWidth = width / options.length;
83
83
  }
84
- return /*#__PURE__*/_react.default.createElement(_SegmentedButton.ControlsContainer, {
85
- id: "ControlsContainer",
84
+ return /*#__PURE__*/_react.default.createElement(_SegmentedButton.ButtonsControlsContainer, {
86
85
  fontSize: fontSize,
87
86
  ref: controlRef
88
87
  }, /*#__PURE__*/_react.default.createElement(_SegmentedButton.Controls, {
@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.SegmentedButtonGroup = exports.SegmentLabel = exports.Segment = exports.ControlsInput = exports.ControlsContainer = exports.Controls = void 0;
7
+ exports.SegmentedButtonGroup = exports.SegmentLabel = exports.Segment = exports.ControlsInput = exports.Controls = exports.ButtonsControlsContainer = void 0;
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;
11
11
  var SegmentedButtonGroup = exports.SegmentedButtonGroup = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 28px;\n @media (max-width: 1536px) {\n gap: 20px;\n }\n @media (max-width: 1366px) {\n gap: 17px;\n }\n"])));
12
- var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex; \n font: ", "; \n margin: 0;\n --highlight-width: auto;\n --highlight-x-pos: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n padding-left: 40px;\n margin-bottom: 20px;\n float: left;\n @media (max-width: 1536px) {\n padding-left: 35px;\n }\n @media (max-width: 1366px) {\n padding-left: 24px;\n }\n"])), function (props) {
12
+ var ButtonsControlsContainer = exports.ButtonsControlsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex; \n font: ", "; \n margin: 0;\n --highlight-width: auto;\n --highlight-x-pos: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n padding-left: 40px;\n margin-bottom: 20px;\n float: left;\n @media (max-width: 1536px) {\n padding-left: 35px;\n }\n @media (max-width: 1366px) {\n padding-left: 24px;\n }\n"])), function (props) {
13
13
  var _props$fontSize;
14
14
  return (_props$fontSize = props.fontSize) === null || _props$fontSize === void 0 ? void 0 : _props$fontSize.toString().concat('', 'px Poppins, sans-serif');
15
15
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.279",
3
+ "version": "1.0.281",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {