sag_components 1.0.705 → 1.0.707

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/BarChartsByWeeks.js +56 -10
  2. package/dist/stories/components/BarChartsByWeeks.style.js +11 -12
  3. package/dist/stories/components/FormattedValue.js +68 -0
  4. package/dist/stories/components/FormattedValue.style.js +18 -0
  5. package/package.json +1 -1
package/dist/stories/components/BarChartsByWeeks.js CHANGED
@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.default = exports.BarChartsByWeeks = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _recharts = require("recharts");
11
+ var _FormattedValue = require("./FormattedValue");
11
12
  var _CommonFunctions = require("./CommonFunctions");
12
13
  var _BarChartsByWeeks = require("./BarChartsByWeeks.style");
13
14
  var _PerformanceAnalyticsLegend = _interopRequireDefault(require("./PerformanceAnalyticsLegend"));
@@ -20,6 +21,11 @@ const ICON_TYPE_LEGEND_LINE_ICON = 'LegendLineIcon';
20
21
  const BarChartsByWeeks = props => {
21
22
  const {
22
23
  title,
24
+ headerValueTopTitle,
25
+ headerValueBottomTitle,
26
+ headerValue,
27
+ HeaderValueCurrencyType,
28
+ HeaderValueIsPercent,
23
29
  barChartData,
24
30
  isTitleOriganal,
25
31
  width,
@@ -88,11 +94,11 @@ const BarChartsByWeeks = props => {
88
94
  var _getWeek;
89
95
  if (!barChartData || barChartData.length === 0) return '';
90
96
  return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.EventWeeksLegendDataElementsContainer, {
91
- id: "EventWeeksLegendDataElementsContainer"
97
+ className: "EventWeeksLegendDataElementsContainer"
92
98
  }, (_getWeek = getWeek()) === null || _getWeek === void 0 ? void 0 : _getWeek.map(item => {
93
99
  var _item$title2, _item$title3;
94
100
  return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.EventWeeksLegendDataElement, {
95
- id: "EventWeeksLegendDataElement",
101
+ className: "EventWeeksLegendDataElement",
96
102
  color: item.title >= startWeekRange && item.title <= endWeekRange ? xselectedColor : '',
97
103
  textColor: item.title >= startWeekRange && item.title <= endWeekRange ? '#212121' : '#B1B1B1',
98
104
  fontWeight: item.title >= startWeekRange && item.title <= endWeekRange ? 600 : 400,
@@ -102,21 +108,56 @@ const BarChartsByWeeks = props => {
102
108
  }));
103
109
  };
104
110
  const displayEventWeeksLegendData = () => /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.EventWeeksLegendMainContainer, {
105
- id: "EventWeeksLegendMainContainer"
111
+ className: "EventWeeksLegendMainContainer"
106
112
  }, displayEventWeeksElements());
113
+ const getControlsHeight = () => {
114
+ // headerValueTopTitle,
115
+ // headerValueBottomTitle,
116
+ // headerValue,
117
+ if (!(controlsContainerRef !== null && controlsContainerRef !== void 0 && controlsContainerRef.current)) return '100%';
118
+ const {
119
+ offsetHeight
120
+ } = controlsContainerRef.current;
121
+ let newHeight = offsetHeight;
122
+ if (title) {
123
+ newHeight -= 20;
124
+ }
125
+ if (headerValueTopTitle) {
126
+ newHeight -= 30;
127
+ }
128
+ if (headerValueBottomTitle) {
129
+ newHeight -= 30;
130
+ }
131
+ if (headerValue) {
132
+ newHeight -= 60;
133
+ }
134
+ if (showLegend) {
135
+ newHeight -= 50;
136
+ }
137
+ console.log('newHeight', newHeight);
138
+ return "".concat(newHeight, "px");
139
+ };
107
140
  return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.ControlsContainer, {
108
- id: "ControlsContainer",
141
+ className: "ControlsContainer",
109
142
  height: height,
110
143
  width: width,
111
144
  ref: controlsContainerRef
112
145
  }, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.Controls, {
113
- id: "Controls"
146
+ className: "Controls",
147
+ height: getControlsHeight()
114
148
  }, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TitleAndValueContainer, {
115
- id: "TitleAndValueContainer"
149
+ className: "TitleAndValueContainer"
116
150
  }, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.Title, {
117
- id: "Title"
118
- }, title)), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
119
- id: "ResponsiveContainer",
151
+ className: "Title"
152
+ }, title), /*#__PURE__*/_react.default.createElement(_FormattedValue.FormattedValue, {
153
+ title: headerValueTopTitle,
154
+ subtitle: headerValueBottomTitle,
155
+ value: headerValue,
156
+ currencyType: HeaderValueCurrencyType,
157
+ isPercent: HeaderValueIsPercent,
158
+ dotCut: true
159
+ })), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
160
+ className: "ResponsiveContainer",
120
161
  width: "100%",
121
162
  height: showLegend ? '80%' : '86%'
122
163
  }, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
@@ -178,7 +219,12 @@ const BarChartsByWeeks = props => {
178
219
  exports.BarChartsByWeeks = BarChartsByWeeks;
179
220
  var _default = exports.default = BarChartsByWeeks;
180
221
  BarChartsByWeeks.defaultProps = {
181
- title: 'String',
222
+ title: '',
223
+ headerValueTopTitle: '',
224
+ headerValueBottomTitle: '',
225
+ headerValue: '',
226
+ HeaderValueCurrencyType: '',
227
+ HeaderValueIsPercent: '',
182
228
  barChartData: [{
183
229
  title: '202320',
184
230
  value: 542366
package/dist/stories/components/BarChartsByWeeks.style.js CHANGED
@@ -4,18 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.EventWeeksLegendMainContainer = exports.EventWeeksLegendDataElementsContainer = exports.EventWeeksLegendDataElement = exports.ControlsContainer = exports.Controls = exports.AreaChartContainer = void 0;
7
+ exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.EventWeeksLegendMainContainer = exports.EventWeeksLegendDataElementsContainer = exports.EventWeeksLegendDataElement = 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;
11
11
  const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n color: #212121;\n width: ", ";\n height: ", ";\n min-width: 250px;\n"])), props => props.width, props => props.height);
12
- const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n width: 100%;\n background: #ffffff;\n"])));
13
- const AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin-top: auto;\n width: 100%; \n height: 85%;\n"])));
14
- const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 5px;\n padding: 8px 12px;\n background: white;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n margin: 0;\n"])));
15
- const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n width: fit-content;\n"])));
16
- const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 600;\n line-height: normal;\n"])));
17
- const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 1rem;\n"])));
18
- const Title = exports.Title = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n font-weight: 500;\n font-size: 18px;\n line-height: 20px;\n @media (max-width: 1536px) {\n font-size: 16px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n\n"])));
19
- const EventWeeksLegendMainContainer = exports.EventWeeksLegendMainContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin: 2px 0 0 0;\n padding-left: 55px;\n align-items: center;\n\n"])));
20
- const EventWeeksLegendDataElementsContainer = exports.EventWeeksLegendDataElementsContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin: 0px;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n"])));
21
- const EventWeeksLegendDataElement = exports.EventWeeksLegendDataElement = _styledComponents.default.h4(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n font-weight: ", ";\n font-size: 12px;\n line-height: 15px;\n margin: 0px;\n width: 100%;\n justify-content: center;\n align-content: center;\n color: ", ";\n border-top-left-radius: ", ";\n border-bottom-left-radius: ", ";\n border-top-right-radius: ", ";\n border-bottom-right-radius: ", ";\n background: ", ";\n @media (max-width: 1536px) {\n font-size: 11px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n"])), props => props.fontWeight, props => props.textColor, props => props.borderLeftRadius, props => props.borderLeftRadius, props => props.borderRightRadius, props => props.borderRightRadius, props => props.color);
12
+ const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n width: 100%;\n background: #ffffff;\n"])), props => props.height || '100%');
13
+ const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 5px;\n padding: 8px 12px;\n background: white;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n margin: 0;\n"])));
14
+ const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n width: fit-content;\n"])));
15
+ const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 600;\n line-height: normal;\n"])));
16
+ const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 1rem;\n"])));
17
+ const Title = exports.Title = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n font-weight: 500;\n font-size: 20px;\n line-height: 20px;\n @media (max-width: 1536px) {\n font-size: 16px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n\n"])));
18
+ const EventWeeksLegendMainContainer = exports.EventWeeksLegendMainContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin: 2px 0 0 0;\n padding-left: 55px;\n align-items: center;\n\n"])));
19
+ const EventWeeksLegendDataElementsContainer = exports.EventWeeksLegendDataElementsContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin: 0px;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n"])));
20
+ const EventWeeksLegendDataElement = exports.EventWeeksLegendDataElement = _styledComponents.default.h4(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n font-weight: ", ";\n font-size: 12px;\n line-height: 15px;\n margin: 0px;\n width: 100%;\n justify-content: center;\n align-content: center;\n color: ", ";\n border-top-left-radius: ", ";\n border-bottom-left-radius: ", ";\n border-top-right-radius: ", ";\n border-bottom-right-radius: ", ";\n background: ", ";\n @media (max-width: 1536px) {\n font-size: 11px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n"])), props => props.fontWeight, props => props.textColor, props => props.borderLeftRadius, props => props.borderLeftRadius, props => props.borderRightRadius, props => props.borderRightRadius, props => props.color);
package/dist/stories/components/FormattedValue.js ADDED
@@ -0,0 +1,68 @@
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 = exports.FormattedValue = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _CommonFunctions = require("./CommonFunctions");
10
+ var _FormattedValue = require("./FormattedValue.style");
11
+ /* FormattedValue */
12
+ const FormattedValue = props => {
13
+ const {
14
+ className,
15
+ title,
16
+ subtitle,
17
+ value,
18
+ dotCut,
19
+ currencySign,
20
+ currencyType,
21
+ width,
22
+ height,
23
+ textcolor,
24
+ isPercent
25
+ } = props;
26
+ return /*#__PURE__*/_react.default.createElement(_FormattedValue.ControlsContainer, {
27
+ className: className || 'FormattedValue_ControlsContainer',
28
+ height: height,
29
+ width: width,
30
+ textcolor: textcolor
31
+ }, /*#__PURE__*/_react.default.createElement(_FormattedValue.Controls, {
32
+ className: "Controls",
33
+ height: height,
34
+ width: width
35
+ }, /*#__PURE__*/_react.default.createElement(_FormattedValue.TitleAndValueContainer, {
36
+ className: "TitleAndValueContainer"
37
+ }, title ? /*#__PURE__*/_react.default.createElement(_FormattedValue.Title, {
38
+ className: "Title",
39
+ width: width
40
+ }, title) : '', /*#__PURE__*/_react.default.createElement(_FormattedValue.CurrencySignAndFormattedValueContainer, {
41
+ className: "CurrencySignAndFormattedValueContainer"
42
+ }, /*#__PURE__*/_react.default.createElement(_FormattedValue.FormattedValueText, {
43
+ className: "FormattedValueText",
44
+ width: width
45
+ }, /*#__PURE__*/_react.default.createElement(_FormattedValue.CurrencySignOrPercent, {
46
+ className: "CurrencySignOrPercent"
47
+ }, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ''), dotCut ? (0, _CommonFunctions.getFormattedValue)(value && Math.abs(value) > 0 && value % 1 !== 0 ? value === null || value === void 0 ? void 0 : value.toFixed(2) : value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : '', /*#__PURE__*/_react.default.createElement(_FormattedValue.CurrencySignOrPercent, {
48
+ className: "CurrencySignOrPercent"
49
+ }, isPercent ? '%' : ''))), subtitle ? /*#__PURE__*/_react.default.createElement(_FormattedValue.Title, {
50
+ className: "Title",
51
+ width: width
52
+ }, subtitle) : '')));
53
+ };
54
+ exports.FormattedValue = FormattedValue;
55
+ var _default = exports.default = FormattedValue;
56
+ FormattedValue.defaultProps = {
57
+ className: 'FormattedValue_ControlsContainer',
58
+ title: '',
59
+ subtitle: '',
60
+ value: 0,
61
+ dotCut: false,
62
+ currencySign: false,
63
+ currencyType: 'USD',
64
+ width: '100%',
65
+ height: '100%',
66
+ textcolor: '#212121',
67
+ isPercent: false
68
+ };
package/dist/stories/components/FormattedValue.style.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.TitleAndValueContainer = exports.Title = exports.FormattedValueText = exports.CurrencySignOrPercent = exports.CurrencySignAndFormattedValueContainer = exports.ControlsContainer = exports.Controls = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
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 font-style: normal;\n font-weight: 500;\n font-size: 20px;\n color: ", ";\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n @media (max-width: 1536px) {\n ", "\n }\n\n > * {\n box-sizing: border-box;\n }\n"])), props => props.textcolor, props => props.width, props => props.height, scrollableStyles);
13
+ const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n background: white; \n"])));
14
+ const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column; \n"])));
15
+ const Title = exports.Title = _styledComponents.default.h4(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 20px;\n margin: 0;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n"])));
16
+ const CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n gap: 16px;\n"])));
17
+ const CurrencySignOrPercent = exports.CurrencySignOrPercent = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (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"])));
18
+ const FormattedValueText = exports.FormattedValueText = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 40px;\n @media (max-width: 1536px) {\n font-size: 34px;\n }\n @media (max-width: 1366px) {\n font-size: 28px;\n }\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.705",
3
+ "version": "1.0.707",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {