sag_components 1.0.263 → 1.0.265

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.264",
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.265",
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
+ }
@@ -9,11 +9,11 @@ exports.default = exports.OneColumnContainer = void 0;
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
10
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
11
11
  var _react = _interopRequireWildcard(require("react"));
12
- var _OneColumnContainer = require("./OneColumnContainer.style");
13
- var _InfoIcon = require("./icons/InfoIcon");
14
12
  var _core = require("@dnd-kit/core");
15
13
  var _classnames = _interopRequireDefault(require("classnames"));
16
14
  var _reactLoadingSkeleton = _interopRequireWildcard(require("react-loading-skeleton"));
15
+ var _InfoIcon = require("./icons/InfoIcon");
16
+ var _OneColumnContainer = require("./OneColumnContainer.style");
17
17
  require("react-loading-skeleton/dist/skeleton.css");
18
18
  var _excluded = ["children", "display", "isLoading", "gridTemplateColumns", "nodeRef", "itemClass", "divStyle", "overStyle", "draggingStyle", "droppedStyle", "refId", "width", "height", "infoTitle", "infoText", "disableInfo"];
19
19
  /**
@@ -22,7 +22,7 @@ var _excluded = ["children", "display", "isLoading", "gridTemplateColumns", "nod
22
22
  var OneColumnContainer = exports.OneColumnContainer = function OneColumnContainer(_ref) {
23
23
  var children = _ref.children,
24
24
  _ref$display = _ref.display,
25
- display = _ref$display === void 0 ? "flex" : _ref$display,
25
+ display = _ref$display === void 0 ? 'flex' : _ref$display,
26
26
  isLoading = _ref.isLoading,
27
27
  gridTemplateColumns = _ref.gridTemplateColumns,
28
28
  nodeRef = _ref.nodeRef,
@@ -60,30 +60,15 @@ var OneColumnContainer = exports.OneColumnContainer = function OneColumnContaine
60
60
  id: "mainDiv",
61
61
  className: props.className,
62
62
  style: {
63
- alignItems: "flex-start",
64
- justifyContent: "center",
63
+ alignItems: 'flex-start',
64
+ justifyContent: 'center',
65
65
  width: width,
66
66
  height: height,
67
67
  display: display,
68
68
  gridTemplateColumns: gridTemplateColumns
69
69
  },
70
70
  ref: anotherRef
71
- }, console.log(anotherRef), isLoading && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.LoadingDiv, {
72
- id: "loadingDiv"
73
- }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.SkeletonTheme, {
74
- baseColor: "#EAEAEA"
75
- }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
76
- enableAnimation: true,
77
- width: (offsetWidth !== null && offsetWidth !== void 0 ? offsetWidth : 200) * 0.76,
78
- height: 45,
79
- containerClassName: "avatar-skeleton"
80
- }), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
81
- enableAnimation: true,
82
- count: 4,
83
- width: (offsetWidth !== null && offsetWidth !== void 0 ? offsetWidth : 200) * 0.76,
84
- height: 10,
85
- containerClassName: "avatar-skeleton"
86
- }))), !isLoading && !hover && children, !disableInfo && !isLoading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hover && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextContainer, {
71
+ }, !isLoading && !hover && children, !disableInfo && !isLoading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hover && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextContainer, {
87
72
  id: "InfoTextContainer",
88
73
  width: width,
89
74
  height: height
@@ -105,7 +90,22 @@ var OneColumnContainer = exports.OneColumnContainer = function OneColumnContaine
105
90
  onMouseLeave: function onMouseLeave() {
106
91
  return setHover(false);
107
92
  }
108
- }, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, null)))));
93
+ }, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, null))), console.log(anotherRef), isLoading && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.LoadingDiv, {
94
+ id: "loadingDiv"
95
+ }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.SkeletonTheme, {
96
+ baseColor: "#EAEAEA"
97
+ }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
98
+ enableAnimation: true,
99
+ width: (offsetWidth !== null && offsetWidth !== void 0 ? offsetWidth : 200) * 0.76,
100
+ height: 45,
101
+ containerClassName: "avatar-skeleton"
102
+ }), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
103
+ enableAnimation: true,
104
+ count: 4,
105
+ width: (offsetWidth !== null && offsetWidth !== void 0 ? offsetWidth : 200) * 0.76,
106
+ height: 10,
107
+ containerClassName: "avatar-skeleton"
108
+ })))));
109
109
  };
110
110
  OneColumnContainer.defaultProps = {};
111
111
  var _default = exports.default = OneColumnContainer;
@@ -22,7 +22,7 @@ var InfoTitleLabel = exports.InfoTitleLabel = _styledComponents.default.div(_tem
22
22
  var InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: black;\n font-size: 14px;\n line-height: 20px;\n font-weight: 400;\n\n /* overflow: scroll; */\n overflow: hidden;\n"])));
23
23
  var IconContainer = exports.IconContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: 20px;\n height: 20px;\n position: absolute;\n margin-top: 10px;\n margin-right: 10px;\n top: 0;\n right: 0;\n padding: 0;\n"])));
24
24
  var LoadingDiv = exports.LoadingDiv = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n margin-top: 20px;\n display: flex;\n flex-direction: column;\n justify-content: space-evenly;\n align-items: center;\n width: 76%;\n height: 65%;\n"])));
25
- var mainDiv = exports.mainDiv = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n align-items: \"flex-start\";\n justify-content: \"center\";\n width: ", ";\n height: ", ";\n display: ", ";\n grid-template-columns: ", ";\n"])), function (props) {
25
+ var mainDiv = exports.mainDiv = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n align-items: \"flex-start\";\n justify-content: \"center\";\n width: ", ";\n height: ", ";\n display: ", ";\n grid-template-columns: ", ";\n"])), function (props) {
26
26
  return props.width;
27
27
  }, function (props) {
28
28
  return props.height;
@@ -15,7 +15,7 @@ var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals");
15
15
  var _PerformanceAnalyticsOneColumn = require("./PerformanceAnalyticsOneColumn.style");
16
16
  var _PerformanceAnalyticsLegend = require("./PerformanceAnalyticsLegend");
17
17
  var _CommonFunctions = require("./CommonFunctions");
18
- var _excluded = ["totalsData", "data", "colorBarchart1", "colorBarchart2", "width", "height", "lineChartValueType", "lineChartValueBold", "topBarPercentSigning", "topBarSigning", "noDataText"];
18
+ var _excluded = ["totalsData", "data", "colorBarchart1", "colorBarchart2", "width", "height", "lineChartHeight", "lineChartValueType", "lineChartValueBold", "topBarPercentSigning", "topBarSigning", "noDataText"];
19
19
  var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = function PerformanceAnalyticsOneColumn(_ref) {
20
20
  var _ref$totalsData = _ref.totalsData,
21
21
  totalsData = _ref$totalsData === void 0 ? [{
@@ -55,6 +55,7 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
55
55
  colorBarchart2 = _ref$colorBarchart2 === void 0 ? '#90CE9C' : _ref$colorBarchart2,
56
56
  width = _ref.width,
57
57
  height = _ref.height,
58
+ lineChartHeight = _ref.lineChartHeight,
58
59
  lineChartValueType = _ref.lineChartValueType,
59
60
  lineChartValueBold = _ref.lineChartValueBold,
60
61
  topBarPercentSigning = _ref.topBarPercentSigning,
@@ -163,8 +164,7 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
163
164
  });
164
165
  return /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
165
166
  id: "ResponsiveContainer",
166
- height: 350,
167
- width: width
167
+ height: 350
168
168
  }, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
169
169
  data: formatedData,
170
170
  maxBarSize: 60,
@@ -207,10 +207,11 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
207
207
  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.TotalsDataContainer, {
208
208
  id: "TotalsDataContainer"
209
209
  }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.PerformanceAnalyticsTotals, {
210
- totalsData: totalsData,
211
- width: width
210
+ totalsData: totalsData
211
+ // width={width}
212
212
  }));
213
213
  };
214
+
214
215
  var displayLegendData = function displayLegendData() {
215
216
  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.PerformanceAnalyticsLegend, {
216
217
  legendData: [{
@@ -259,8 +260,7 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
259
260
  var displayLineChartROI = function displayLineChartROI() {
260
261
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
261
262
  id: "ResponsiveContainer",
262
- height: 50,
263
- width: width
263
+ height: lineChartHeight
264
264
  }, /*#__PURE__*/_react.default.createElement(_recharts.LineChart, {
265
265
  data: data,
266
266
  margin: {
@@ -279,8 +279,7 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
279
279
  content: /*#__PURE__*/_react.default.createElement(CustomizedLabelROI, null)
280
280
  })))), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
281
281
  id: "ResponsiveContainer",
282
- height: 50,
283
- width: width
282
+ height: lineChartHeight
284
283
  }, /*#__PURE__*/_react.default.createElement(_recharts.LineChart, {
285
284
  data: data,
286
285
  margin: {
@@ -300,13 +299,18 @@ var PerformanceAnalyticsOneColumn = exports.PerformanceAnalyticsOneColumn = func
300
299
  })))));
301
300
  };
302
301
  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.ControlsContainer, {
303
- id: "ControlsContainer"
302
+ id: "ControlsContainer",
303
+ width: width,
304
+ height: height
304
305
  }, (totalsData === null || totalsData === void 0 ? void 0 : totalsData.length) > 0 && (data === null || data === void 0 ? void 0 : data.length) > 0 ? /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsOneColumn.Controls, {
305
306
  id: "Controls"
306
307
  }, displayTotalsData(), displayLineChartROI(), displayBarChart(), displayLegendData()) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, null));
307
308
  };
308
309
  var _default = exports.default = PerformanceAnalyticsOneColumn;
309
310
  PerformanceAnalyticsOneColumn.defaultProps = {
311
+ lineChartHeight: '50',
312
+ width: '100%',
313
+ height: '100%',
310
314
  totalsData: [],
311
315
  noDataText: 'No data'
312
316
  };
@@ -17,9 +17,9 @@ 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 display: flex;\n gap: 20px;\n flex-direction: column;\n width: 100%;\n height: 100%;\n background: white;\n"])));
21
- var TotalsDataContainer = exports.TotalsDataContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"])));
22
- var SegmentedButtonContainer = exports.SegmentedButtonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n padding: 10px 0 0 10px;\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"])));
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"])));
23
23
  var TooltipContainer = exports.TooltipContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (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(_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: 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(_templateObject7 || (_templateObject7 = (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"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.263",
3
+ "version": "1.0.265",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {