sag_components 1.0.985 → 1.0.987

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 (6) hide show
  1. package/dist/stories/components/DialogOverlay.js +10 -4
  2. package/dist/stories/components/DialogOverlay.style.js +3 -3
  3. package/dist/stories/components/LinkButton.js +2 -1
  4. package/dist/stories/components/PieChart.js +125 -0
  5. package/dist/stories/components/PieChart.style.js +171 -0
  6. package/package.json +1 -1
package/dist/stories/components/DialogOverlay.js CHANGED
@@ -12,7 +12,8 @@ const DialogOverlay = props => {
12
12
  const {
13
13
  title,
14
14
  children,
15
- onDialogClose
15
+ onDialogClose,
16
+ className
16
17
  } = props;
17
18
  (0, _react.useEffect)(() => {
18
19
  const modal = document.querySelector('dialog');
@@ -23,16 +24,21 @@ const DialogOverlay = props => {
23
24
  modal.close();
24
25
  onDialogClose();
25
26
  };
26
- return /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalWrapper, null, /*#__PURE__*/_react.default.createElement(_DialogOverlay.Modal, null, /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalTitle, null, title), /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalClose, {
27
+ return /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalWrapper, {
28
+ className: className
29
+ }, /*#__PURE__*/_react.default.createElement(_DialogOverlay.Modal, null, /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalTitle, null, title), /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalClose, {
27
30
  type: "button",
28
31
  onClick: closeModal
29
32
  }, /*#__PURE__*/_react.default.createElement(_CloseXIcon.CloseXIcon, {
30
33
  fill: "white"
31
- }))), /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalBody, null, children)));
34
+ }))), /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalBody, {
35
+ id: "modalBody"
36
+ }, children)));
32
37
  };
33
38
  var _default = exports.default = DialogOverlay;
34
39
  DialogOverlay.defaultProps = {
35
40
  title: 'Title',
36
41
  children: null,
37
- onDialogClose: () => {}
42
+ onDialogClose: () => {},
43
+ className: ''
38
44
  };
package/dist/stories/components/DialogOverlay.style.js CHANGED
@@ -14,12 +14,12 @@ const scrollableStyles = `
14
14
  }
15
15
 
16
16
  &::-webkit-scrollbar-track {
17
- background: #D0D0D0;
17
+ background: #E3E4E5;
18
18
  border-radius: 5px;
19
19
  }
20
20
 
21
21
  &::-webkit-scrollbar-thumb {
22
- background: #E3E4E5;
22
+ background: #D0D0D0;
23
23
  border-radius: 5px;
24
24
  }
25
25
  `;
@@ -53,7 +53,7 @@ const ModalHeader = exports.ModalHeader = _styledComponents.default.div`
53
53
  `;
54
54
  const ModalBody = exports.ModalBody = _styledComponents.default.div`
55
55
  ${scrollableStyles}
56
- max-height: 70%;
56
+ max-height: 80vh;
57
57
  `;
58
58
  const ModalTitle = exports.ModalTitle = _styledComponents.default.h5`
59
59
  font-family: 'Poppins', sans-serif;
package/dist/stories/components/LinkButton.js CHANGED
@@ -195,5 +195,6 @@ LinkButton.defaultProps = {
195
195
  textColor: '',
196
196
  onClick: () => {},
197
197
  leftIcon: 'none',
198
- rightIcon: 'none'
198
+ rightIcon: 'none',
199
+ className: ''
199
200
  };
package/dist/stories/components/PieChart.js ADDED
@@ -0,0 +1,125 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = exports.PieChart = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _recharts = require("recharts");
10
+ var _CommonFunctions = require("./CommonFunctions");
11
+ var _NoDataFoundMessage = require("./NoDataFoundMessage");
12
+ var _PieChart = require("./PieChart.style");
13
+ var _Benchmark = require("./Benchmark");
14
+ const PieChart = props => {
15
+ const {
16
+ className,
17
+ width,
18
+ height,
19
+ textcolor,
20
+ title,
21
+ value,
22
+ currencySign,
23
+ currencyType,
24
+ dotCut,
25
+ isPercent,
26
+ legendData,
27
+ itemsBoldedValues,
28
+ itemsPercentagesValueAside,
29
+ itemsValuesSeparateLine,
30
+ hideTitleAndValue,
31
+ addingBenchmark,
32
+ textAfterValue,
33
+ noDataText
34
+ } = props;
35
+ const DoughnutChartContainerRef = (0, _react.useRef)();
36
+ const dotCutTrenty = row => {
37
+ if (!row || !row.value) return null;
38
+ let valueNew = 0;
39
+ if (row !== null && row !== void 0 && row.value && Math.abs(row.value) > 0 && row.value % 1 !== 0) {
40
+ var _row$value;
41
+ valueNew = row === null || row === void 0 ? void 0 : (_row$value = row.value) === null || _row$value === void 0 ? void 0 : _row$value.toFixed(2);
42
+ } else {
43
+ valueNew = row === null || row === void 0 ? void 0 : row.value;
44
+ }
45
+ return dotCut ? (0, _CommonFunctions.getFormattedValue)(valueNew) : (0, _CommonFunctions.getNumberWithCommas)(valueNew);
46
+ };
47
+ const displayLegendValue = row => /*#__PURE__*/_react.default.createElement(_PieChart.LegendFormattedValue, {
48
+ style: {
49
+ fontWeight: itemsBoldedValues ? '700' : '500'
50
+ }
51
+ }, !isPercent && row.value && currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, row.value) : '', !isPercent && row.value !== undefined && row.value !== null ? dotCutTrenty(row) : !isPercent && 'No Data', !isPercent && row.value && dotCut ? (0, _CommonFunctions.getFormattedUnits)(row.value) : '', !isPercent && row.value && itemsPercentagesValueAside && /*#__PURE__*/_react.default.createElement("span", {
52
+ style: {
53
+ fontWeight: itemsBoldedValues ? '700' : '400'
54
+ }
55
+ }, ' (', `${Math.round(row.value / value * 100)}%)`), isPercent && row.value && `${row.value.toFixed(1)}%`);
56
+ return /*#__PURE__*/_react.default.createElement(_PieChart.ControlsContainer, {
57
+ className: className,
58
+ height: height,
59
+ width: width,
60
+ textcolor: textcolor
61
+ }, legendData.length === 0 || legendData.every(item => item.value === undefined || item.value === null) ? /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
62
+ className: "NoDataFoundMessage",
63
+ noDataText: noDataText
64
+ }) : /*#__PURE__*/_react.default.createElement(_PieChart.Controls, {
65
+ className: "Controls",
66
+ height: height,
67
+ width: width
68
+ }, !hideTitleAndValue && /*#__PURE__*/_react.default.createElement(_PieChart.TitleAndValueContainer, {
69
+ className: "TitleAndValueContainer"
70
+ }, /*#__PURE__*/_react.default.createElement(_PieChart.Title, {
71
+ className: "Title"
72
+ }, title), /*#__PURE__*/_react.default.createElement(_PieChart.CurrencySignAndFormattedValueContainer, {
73
+ className: "CurrencySignAndFormattedValueContainer"
74
+ }, /*#__PURE__*/_react.default.createElement(_PieChart.FormattedValue, {
75
+ className: "FormattedValue"
76
+ }, /*#__PURE__*/_react.default.createElement(_PieChart.CurrencySign, {
77
+ className: "CurrencySign"
78
+ }, 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) : ''), textAfterValue ? /*#__PURE__*/_react.default.createElement(_PieChart.TextAfterValue, {
79
+ className: "TextAfterValue"
80
+ }, textAfterValue) : '', addingBenchmark && /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, null))), /*#__PURE__*/_react.default.createElement(_PieChart.DoughnutChartAndLegendContainer, null, /*#__PURE__*/_react.default.createElement(_PieChart.DoughnutChartContainer, {
81
+ ref: DoughnutChartContainerRef
82
+ }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, null, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, null, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
83
+ fill: "#8884d8",
84
+ dataKey: "value",
85
+ blendStroke: true,
86
+ startAngle: -270,
87
+ data: legendData,
88
+ outerRadius: 90,
89
+ innerRadius: 70
90
+ }, legendData.map(row => /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
91
+ key: `cell-${row.name}`,
92
+ fill: row.color
93
+ }))), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))), /*#__PURE__*/_react.default.createElement(_PieChart.LegendContainer, null, legendData.map(row => /*#__PURE__*/_react.default.createElement(_PieChart.LegendControlsContainer, {
94
+ key: row.name
95
+ }, /*#__PURE__*/_react.default.createElement(_PieChart.LegendColorRectangle, {
96
+ color: row.color
97
+ }), /*#__PURE__*/_react.default.createElement(_PieChart.LegendTitleAndFormatedValueContainer, null, /*#__PURE__*/_react.default.createElement(_PieChart.LegendTitle, {
98
+ style: {
99
+ flexDirection: itemsValuesSeparateLine ? 'column' : 'row',
100
+ alignItems: itemsValuesSeparateLine ? 'baseline' : 'center'
101
+ }
102
+ }, row.name, displayLegendValue(row)))))))));
103
+ };
104
+ exports.PieChart = PieChart;
105
+ var _default = exports.default = PieChart;
106
+ PieChart.defaultProps = {
107
+ className: '',
108
+ width: '100%',
109
+ height: '100%',
110
+ textcolor: '#212121',
111
+ title: '',
112
+ value: 0,
113
+ currencySign: false,
114
+ currencyType: 'USD',
115
+ dotCut: false,
116
+ isPercent: false,
117
+ legendData: [],
118
+ itemsBoldedValues: true,
119
+ itemsPercentagesValueAside: true,
120
+ itemsValuesSeparateLine: true,
121
+ hideTitleAndValue: false,
122
+ addingBenchmark: false,
123
+ textAfterValue: '',
124
+ noDataText: 'No Data'
125
+ };
package/dist/stories/components/PieChart.style.js ADDED
@@ -0,0 +1,171 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.TextAfterValue = exports.LegendTitleAndFormatedValueContainer = exports.LegendTitle = exports.LegendFormattedValue = exports.LegendFormatedValueContainer = exports.LegendControlsContainer = exports.LegendContainer = exports.LegendColorRectangle = exports.FormattedValue = exports.DoughnutChartContainer = exports.DoughnutChartAndLegendContainer = exports.CurrencySignAndFormattedValueContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = void 0;
8
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
9
+ const scrollableStyles = `
10
+ overflow-y: auto;
11
+
12
+ &::-webkit-scrollbar {
13
+ width: 8px;
14
+ }
15
+
16
+ &::-webkit-scrollbar-track {
17
+ background: #E8E8E8;
18
+ border-radius: 5px;
19
+ }
20
+
21
+ &::-webkit-scrollbar-thumb {
22
+ background: #D0D0D0;
23
+ border-radius: 5px;
24
+ }
25
+ `;
26
+ const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
27
+ position: relative;
28
+ font-family: "Poppins", sans-serif;
29
+ font-style: normal;
30
+ font-size: ${props => props.rootFont};
31
+ color: ${props => props.textColor};
32
+ width: ${props => props.width};
33
+ height: ${props => props.height};
34
+ border-radius: 12px;
35
+ display: flex;
36
+ align-items: center;
37
+ @media (max-width: 1536px) {
38
+ ${scrollableStyles}
39
+ }
40
+
41
+ > * {
42
+ box-sizing: border-box;
43
+ }
44
+ `;
45
+ const Controls = exports.Controls = _styledComponents.default.div`
46
+ display: flex;
47
+ flex-direction: column;
48
+ width: 100%;
49
+ height: 100%;
50
+ background: white;
51
+ border-radius: 12px;
52
+ `;
53
+ const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div`
54
+ display: flex;
55
+ background: white;
56
+ box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
57
+ border-radius: 5px;
58
+ padding: 6px 10px;
59
+ margin: 0;
60
+ `;
61
+ const TooltipLabel = exports.TooltipLabel = _styledComponents.default.p`
62
+ color: #212121;
63
+ font-family: "Poppins", sans-serif;
64
+ font-size: 12px;
65
+ font-weight: 400;
66
+ font-style: normal;
67
+ width: max-content; // fit-content;
68
+ line-height: normal;
69
+ margin: 0;
70
+ `;
71
+ const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div`
72
+ display: flex;
73
+ flex-direction: column;
74
+ padding: 0 20px;
75
+ `;
76
+ const Title = exports.Title = _styledComponents.default.h4`
77
+ font-weight: 400;
78
+ font-size: 18px;
79
+ margin: 0 0 8px;
80
+ @media (max-width: 1536px) {
81
+ font-size: 16px;
82
+ }
83
+ `;
84
+ const CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div`
85
+ display: flex;
86
+ align-items: center;
87
+ gap: 8px;
88
+ `;
89
+ const FormattedValue = exports.FormattedValue = _styledComponents.default.h5`
90
+ font-size: 40px;
91
+ font-weight: 500;
92
+ margin: 0;
93
+ line-height: 1;
94
+ @media (max-width: 1536px) {
95
+ font-size: 24px;
96
+ }
97
+ @media (max-width: 1366px) {
98
+ font-size: 20px;
99
+ }
100
+ `;
101
+ const CurrencySign = exports.CurrencySign = _styledComponents.default.span`
102
+ font-size: 16px;
103
+ font-weight: 500;
104
+ line-height: 0;
105
+ @media (max-width: 1536px) {
106
+ font-size: 14px;
107
+ }
108
+ @media (max-width: 1366px) {
109
+ font-size: 11px;
110
+ }
111
+ `;
112
+ const TextAfterValue = exports.TextAfterValue = _styledComponents.default.span`
113
+ color: #999999;
114
+ font-size: 12px;
115
+ font-weight: 400;
116
+ `;
117
+ const DoughnutChartAndLegendContainer = exports.DoughnutChartAndLegendContainer = _styledComponents.default.div`
118
+ display: flex;
119
+ gap: 10%;
120
+ width: 66%;
121
+ min-height: 200px;
122
+ margin: auto;
123
+ padding: 0 20px;
124
+ `;
125
+ const DoughnutChartContainer = exports.DoughnutChartContainer = _styledComponents.default.div`
126
+ width: 50%;
127
+ `;
128
+ const LegendContainer = exports.LegendContainer = _styledComponents.default.div`
129
+ padding-left: 10px;
130
+ display: flex;
131
+ justify-content: center;
132
+ flex-direction: column;
133
+ gap: 12px;
134
+ `;
135
+ const LegendControlsContainer = exports.LegendControlsContainer = _styledComponents.default.div`
136
+ display: flex;
137
+ gap: 0.5rem;
138
+ align-items: center;
139
+ margin-bottom: 0.375rem;
140
+ `;
141
+ const LegendTitleAndFormatedValueContainer = exports.LegendTitleAndFormatedValueContainer = _styledComponents.default.div`
142
+ flex-grow: 1;
143
+ `;
144
+ const LegendFormatedValueContainer = exports.LegendFormatedValueContainer = _styledComponents.default.div`
145
+ font-size: 0.875rem;
146
+ `;
147
+ const LegendColorRectangle = exports.LegendColorRectangle = _styledComponents.default.div`
148
+ width: 0.875rem;
149
+ min-width: 0.875rem;
150
+ height: 0.875rem;
151
+ border-radius: 2px;
152
+ background: ${props => props.color};
153
+ `;
154
+ const LegendTitle = exports.LegendTitle = _styledComponents.default.h5`
155
+ font-weight: 400;
156
+ font-size: 16px;
157
+ gap: 5px;
158
+ margin: 0;
159
+ display: flex;
160
+ justify-content: space-between;
161
+ @media (max-width: 1536px) {
162
+ font-size: 11px;
163
+ }
164
+ @media (max-width: 1366px) {
165
+ font-size: 10px;
166
+ }
167
+ `;
168
+ const LegendFormattedValue = exports.LegendFormattedValue = _styledComponents.default.span`
169
+ font-weight: 500;
170
+ white-space: nowrap;
171
+ `;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.985",
3
+ "version": "1.0.987",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {