sag_components 1.0.582 → 1.0.583

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 (5) hide show
  1. package/dist/stories/components/PopupCharts.js +71 -18
  2. package/dist/stories/components/PopupCharts.style.js +1 -1
  3. package/dist/stories/components/TotalHorizontalCharts.js +32 -9
  4. package/dist/stories/components/TotalHorizontalCharts.style.js +6 -6
  5. package/package.json +1 -1
package/dist/stories/components/PopupCharts.js CHANGED
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _TotalDoughnutChart = require("./TotalDoughnutChart");
10
+ var _BarChartsByWeeks = require("./BarChartsByWeeks");
11
+ var _TotalHorizontalCharts = require("./TotalHorizontalCharts");
10
12
  var _CloseXIcon = require("./icons/CloseXIcon");
11
13
  var _FoodLionNewIcon = require("./icons/FoodLionNewIcon");
12
14
  var _TheGiantCompanyNewIcon = require("./icons/TheGiantCompanyNewIcon");
@@ -17,6 +19,7 @@ var _PopupCharts = require("./PopupCharts.style");
17
19
  const PopupCharts = props => {
18
20
  const {
19
21
  title,
22
+ chartType,
20
23
  popupChartsItemsData,
21
24
  isPopupChartsOpen,
22
25
  width,
@@ -67,29 +70,78 @@ const PopupCharts = props => {
67
70
  noDataText: rowsData.noDataText,
68
71
  title: rowsData.title,
69
72
  value: rowsData.value,
73
+ height: "270px",
70
74
  width: "100%",
71
- height: "100%",
72
75
  itemsValuesSeparateLine: false,
73
76
  isPercent: true
74
77
  });
75
- const displayChartItem = item => {
76
- var _item$rowsData;
77
- return /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemMainContainer, {
78
- id: "ChartItemMainContainer"
79
- }, /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemContainer, {
80
- id: "ChartItemContainer",
81
- style: {
82
- cursor: 'pointer'
83
- }
84
- }, /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemIconContainer, {
85
- id: "ChartItemIconContainer"
86
- }, displayRetailerIcon(item.title)), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemTitle, {
87
- id: "ChartItemTitle",
88
- subtitleTextColor: subtitleTextColor
89
- }, item.title)), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartContentContainer, {
90
- id: "ChartContentContainer"
91
- }, displayDoughnutChart((_item$rowsData = item.rowsData) === null || _item$rowsData === void 0 ? void 0 : _item$rowsData.TotalDoughnutChartDetails)));
78
+ const displayBarChartsByWeeks = rowsData => /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.BarChartsByWeeks, {
79
+ legendData: [{
80
+ iconColor: '#90CE9C',
81
+ iconType: 'Square',
82
+ title: 'Sales'
83
+ }, {
84
+ iconColor: '#C906FD',
85
+ iconType: 'LegendLineIcon',
86
+ title: 'Category Average'
87
+ }],
88
+ showLegend: false,
89
+ barChartColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.barChartColor,
90
+ barChartData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.barChartData,
91
+ endWeekRange: rowsData === null || rowsData === void 0 ? void 0 : rowsData.endWeekRange,
92
+ startWeekRange: rowsData === null || rowsData === void 0 ? void 0 : rowsData.startWeekRange,
93
+ title: rowsData === null || rowsData === void 0 ? void 0 : rowsData.title,
94
+ tooltipTitle: rowsData === null || rowsData === void 0 ? void 0 : rowsData.tooltipTitle,
95
+ height: "240px",
96
+ width: "100%",
97
+ xselectedColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.xselectedColor // "#C7E7CD"
98
+ });
99
+
100
+ const displayTotalHorizontalCharts = rowsData => /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.TotalHorizontalCharts, {
101
+ currencySign: true,
102
+ dotCut: true,
103
+ chartsData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.chartsData,
104
+ noDataText: rowsData.noDataText,
105
+ title: rowsData.title,
106
+ value: rowsData.value,
107
+ showOutgoingBanner: false,
108
+ height: "240px",
109
+ width: "100%"
110
+ });
111
+ const displayChart = item => {
112
+ var _item$rowsData, _item$rowsData2, _item$rowsData3;
113
+ let content;
114
+ switch (chartType) {
115
+ case 'TotalDoughnutChart':
116
+ content = displayDoughnutChart((_item$rowsData = item.rowsData) === null || _item$rowsData === void 0 ? void 0 : _item$rowsData.TotalDoughnutChartDetails);
117
+ break;
118
+ case 'TotalHorizontalCharts':
119
+ content = displayTotalHorizontalCharts((_item$rowsData2 = item.rowsData) === null || _item$rowsData2 === void 0 ? void 0 : _item$rowsData2.TotalHorizontalChartsDetails);
120
+ break;
121
+ case 'BarChartsByWeeks':
122
+ content = displayBarChartsByWeeks((_item$rowsData3 = item.rowsData) === null || _item$rowsData3 === void 0 ? void 0 : _item$rowsData3.BarChartsByWeeksDetails);
123
+ break;
124
+ default:
125
+ content = '';
126
+ break;
127
+ }
128
+ return /*#__PURE__*/_react.default.createElement("div", null, content);
92
129
  };
130
+ const displayChartItem = item => /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemMainContainer, {
131
+ id: "ChartItemMainContainer"
132
+ }, /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemContainer, {
133
+ id: "ChartItemContainer",
134
+ style: {
135
+ cursor: 'pointer'
136
+ }
137
+ }, /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemIconContainer, {
138
+ id: "ChartItemIconContainer"
139
+ }, displayRetailerIcon(item.title)), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemTitle, {
140
+ id: "ChartItemTitle",
141
+ subtitleTextColor: subtitleTextColor
142
+ }, item.title)), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartContentContainer, {
143
+ id: "ChartContentContainer"
144
+ }, displayChart(item)));
93
145
  return /*#__PURE__*/_react.default.createElement(_PopupCharts.MainContainer, {
94
146
  id: "MainContainer"
95
147
  }, IsPopupChartsOpen && /*#__PURE__*/_react.default.createElement(_PopupCharts.ModalOverlay, {
@@ -116,6 +168,7 @@ const PopupCharts = props => {
116
168
  var _default = exports.default = PopupCharts;
117
169
  PopupCharts.defaultProps = {
118
170
  title: 'Switching Pattern',
171
+ chartType: 'TotalDoughnutChart',
119
172
  isPopupChartsOpen: true,
120
173
  width: '1700px',
121
174
  height: '800px',
package/dist/stories/components/PopupCharts.style.js CHANGED
@@ -15,7 +15,7 @@ const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_t
15
15
  const Title = exports.Title = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 24px;\n margin: 0;\n"])));
16
16
  const ChartsContainer = exports.ChartsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n grid-template-columns: repeat(3, 1fr); /* 3 columns */\n flex-wrap: wrap; \n overflow-y: auto;\n padding: 0 10px 0 0;\n max-height: ", ";\n height: ", ";\n \n"])), props => props.maxHeight, props => props.height);
17
17
  const ChartItemMainContainer = exports.ChartItemMainContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin: 10px 10px 10px 10px;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n border-radius: 12px;\n"])));
18
- const ChartItemContainer = exports.ChartItemContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin: 10px 10px 10px 10px;\n"])));
18
+ const ChartItemContainer = exports.ChartItemContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin: 20px 10px;\n"])));
19
19
  const ChartItemTitle = exports.ChartItemTitle = _styledComponents.default.h3(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 16px;\n line-height: 24px;\n margin: 0 10px;\n color: ", ";\n"])), props => props.subtitleTextColor);
20
20
  const ChartItemIconContainer = exports.ChartItemIconContainer = _styledComponents.default.h3(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 0 0 10px;\n"])));
21
21
  const ChartContentContainer = exports.ChartContentContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 14px;\n margin: 0;\n border-radius: 12px;\n"])));
package/dist/stories/components/TotalHorizontalCharts.js CHANGED
@@ -1,11 +1,12 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.default = exports.TotalHorizontalCharts = void 0;
8
- var _react = _interopRequireDefault(require("react"));
9
+ var _react = _interopRequireWildcard(require("react"));
9
10
  var _recharts = require("recharts");
10
11
  var _ExportIcon = _interopRequireDefault(require("./icons/ExportIcon"));
11
12
  var _NoDataFoundMessage = require("./NoDataFoundMessage");
@@ -27,6 +28,15 @@ const TotalHorizontalCharts = props => {
27
28
  onBannerClick
28
29
  } = props;
29
30
  const barBackgrounds = chartsData.map(bg => bg.color);
31
+ const [widthChartContainer, setWidthChartContainer] = (0, _react.useState)(0);
32
+ const [heightChartContainer, setHeightChartContainer] = (0, _react.useState)(0);
33
+ const chartContainerRef = (0, _react.useRef)();
34
+ (0, _react.useEffect)(() => {
35
+ if (chartContainerRef.current) {
36
+ setWidthChartContainer(chartContainerRef.current.clientWidth);
37
+ setHeightChartContainer(chartContainerRef.current.clientHeight);
38
+ }
39
+ }, [width, height]);
30
40
  return /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ControlsContainer, {
31
41
  id: "ControlsContainer",
32
42
  height: height,
@@ -34,7 +44,9 @@ const TotalHorizontalCharts = props => {
34
44
  textColor: textColor
35
45
  }, (chartsData === null || chartsData === void 0 ? void 0 : chartsData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.TitleAndValueContainer, {
36
46
  id: "TitleAndValueContainer"
37
- }, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.Header, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.Title, {
47
+ }, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.Header, {
48
+ id: "Header"
49
+ }, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.Title, {
38
50
  id: "Title"
39
51
  }, title), /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.FormattedValue, {
40
52
  id: "FormattedValue"
@@ -44,14 +56,23 @@ const TotalHorizontalCharts = props => {
44
56
  onClick: onBannerClick
45
57
  }, /*#__PURE__*/_react.default.createElement(_ExportIcon.default, {
46
58
  color: textColor
47
- }), "View By Banner")), /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartWrapper, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartInner, null, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, null, /*#__PURE__*/_react.default.createElement(_recharts.ComposedChart, {
59
+ }), "View By Banner")), /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartWrapper, {
60
+ id: "ChartWrapper"
61
+ }, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartInner, {
62
+ id: "ChartInner",
63
+ ref: chartContainerRef
64
+ }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
65
+ id: "ResponsiveContainer",
66
+ height: heightChartContainer - 10,
67
+ width: widthChartContainer
68
+ }, /*#__PURE__*/_react.default.createElement(_recharts.ComposedChart, {
48
69
  layout: "vertical",
49
70
  data: chartsData,
50
71
  margin: {
51
- top: 0,
52
- right: 20,
53
- bottom: 20,
54
- left: 30
72
+ top: 10,
73
+ right: 50,
74
+ bottom: 10,
75
+ left: 50
55
76
  }
56
77
  }, /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
57
78
  type: "number",
@@ -74,8 +95,10 @@ const TotalHorizontalCharts = props => {
74
95
  fontSize: 14,
75
96
  fontWeight: 600,
76
97
  fill: '#212121',
77
- formatter: value => "".concat(value, "%")
78
- }
98
+ formatter: valueBar => "".concat(valueBar, "%")
99
+ },
100
+ barCategoryGap: 0,
101
+ barGap: 5
79
102
  }, chartsData.map((entry, index) => /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
80
103
  key: "cell-".concat(index),
81
104
  fill: barBackgrounds[index % 20]
package/dist/stories/components/TotalHorizontalCharts.style.js CHANGED
@@ -9,12 +9,12 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
11
11
  const 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
- const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n padding: 20px 16px;\n color: ", ";\n width: ", ";\n height: ", ";\n background-color: white;\n"])), props => props.textColor, props => props.width, props => props.height);
13
- const ChartWrapper = exports.ChartWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n height: 270px;\n"])), scrollableStyles);
14
- const ChartInner = exports.ChartInner = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n height: 290px;\n"])));
15
- const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n"])));
16
- const Header = exports.Header = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n"])));
12
+ const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif; \n color: ", ";\n width: ", ";\n height: ", ";\n background-color: white;\n margin: 0;\n"])), props => props.textColor, props => props.width, props => props.height);
13
+ const ChartWrapper = exports.ChartWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n height: 80%;\n width: 100%;\n margin: 0;\n"])), scrollableStyles);
14
+ const ChartInner = exports.ChartInner = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0; \n height: 100%;\n width: 100%;\n"])));
15
+ const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n padding: 0 20px;\n"])));
16
+ const Header = exports.Header = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([""])));
17
17
  const Title = exports.Title = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 20px;\n font-weight: 400;\n line-height: 1;\n margin: 0 0 8px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
18
18
  const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 40px;\n display: flex;\n align-items: baseline;\n @media (max-width: 1536px) {\n font-size: 24px;\n }\n @media (max-width: 1366px) {\n font-size: 20px;\n }\n"])));
19
- const OutBanner = exports.OutBanner = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n align-items: baseline;\n font-size: 14px;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n @media (max-width: 1536px) {\n font-size: 10px;\n }\n @media (max-width: 1366px) {\n font-size: 8px;\n }\n > svg {\n width: 14px;\n height: 14px;\n @media (max-width: 1536px) {\n width: 12px;\n height: 12px;\n }\n @media (max-width: 1366px) {\n width: 8px;\n height: 8px;\n }\n }\n"])), props => props.textColor);
19
+ const OutBanner = exports.OutBanner = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n align-items: baseline;\n font-size: 14px;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n @media (max-width: 1536px) {\n font-size: 10px;\n }\n @media (max-width: 1366px) {\n font-size: 8px;\n }\n > svg {\n width: 14px;\n height: 14px;\n @media (max-width: 1536px) {\n width: 12px;\n height: 12px;\n }\n @media (max-width: 1366px) {\n width: 8px;\n height: 8px;\n }\n }\n"])), props => props.textColor);
20
20
  const CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 11px;\n }\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.582",
3
+ "version": "1.0.583",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {