sag_components 1.0.22 → 1.0.23

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 (7) hide show
  1. package/dist/App.js +36 -27
  2. package/dist/stories/components/OneColumnContainer.js +7 -1
  3. package/package.json +1 -1
  4. package/src/stories/components/OneColumnContainer.jsx +4 -1
  5. package/dist/stories/TotalDoughnutChart.stories.js +0 -136
  6. package/dist/stories/TotalDoughnutChart.style.js +0 -44
  7. package/dist/stories/components/TotalDoughnutChart.js +0 -104
package/dist/App.js CHANGED
@@ -12,8 +12,6 @@ var _react = require("react");
12
12
  var _Button = _interopRequireDefault(require("./stories/components/Button"));
13
13
  var _Dropdown = _interopRequireDefault(require("./stories/components/Dropdown"));
14
14
  var _SegmentedButton = _interopRequireDefault(require("./stories/components/SegmentedButton"));
15
- var _TotalDoughnutChart = _interopRequireDefault(require("./stories/components/TotalDoughnutChart"));
16
- var _OneColumnContainer = _interopRequireDefault(require("./stories/components/OneColumnContainer"));
17
15
  var onChangehandler = function onChangehandler(event, newValue) {
18
16
  console.log("Dropdown onChange event returned:");
19
17
  console.log(newValue);
@@ -81,31 +79,42 @@ function App() {
81
79
  setSelectedValue2 = _useState4[1];
82
80
  return /*#__PURE__*/React.createElement("div", {
83
81
  className: "App"
84
- }, /*#__PURE__*/React.createElement(_OneColumnContainer.default, {
85
- height: "250px",
86
- infoText: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
87
- width: "250px"
88
- }), /*#__PURE__*/React.createElement(_TotalDoughnutChart.default, {
89
- currency: true,
90
- currencyType: "USD",
91
- dotCut: true,
92
- height: 374,
93
- legendData: [{
94
- color: "#85A1D2",
95
- currency: "USD",
96
- name: "Package Cost",
97
- value: 30000
98
- }, {
99
- color: "#9AE6FF",
100
- currency: "USD",
101
- name: "Redemption Cost",
102
- value: 6500
103
- }],
104
- textColor: "#212121",
105
- title: "Total Cost",
106
- value: 36500,
107
- width: 336
108
- }));
82
+ }, /*#__PURE__*/React.createElement(_Dropdown.default, {
83
+ width: "300",
84
+ size: "small",
85
+ text: "Select retailer......",
86
+ multiSelect: false,
87
+ options: options,
88
+ shape: "round",
89
+ onChange: onChangehandler,
90
+ onInputChange: onInputChangeHandler
91
+ }), /*#__PURE__*/React.createElement(_Dropdown.default, {
92
+ width: 400,
93
+ size: "small",
94
+ text: "Select retailer......",
95
+ multiSelect: true,
96
+ options: options,
97
+ shape: "round",
98
+ onChange: onChangehandler,
99
+ onInputChange: onInputChangeHandler
100
+ }), /*#__PURE__*/React.createElement(_SegmentedButton.default, {
101
+ name: "group1",
102
+ onClick: function onClick(val) {
103
+ return setSelectedValue1(val);
104
+ },
105
+ segments: segmentsArr1
106
+ }), /*#__PURE__*/React.createElement("p", {
107
+ className: "selected-item"
108
+ }, "Selected: ", selectedValue1), /*#__PURE__*/React.createElement(_SegmentedButton.default, {
109
+ name: "group2",
110
+ onClick: function onClick(val) {
111
+ return setSelectedValue2(val);
112
+ },
113
+ defaultIndex: 1,
114
+ segments: segmentsArr2
115
+ }), /*#__PURE__*/React.createElement("p", {
116
+ className: "selected-item"
117
+ }, "Selected: ", selectedValue2));
109
118
  }
110
119
  var _default = App;
111
120
  exports.default = _default;
package/dist/stories/components/OneColumnContainer.js CHANGED
@@ -33,11 +33,17 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
33
33
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
34
34
  clicked = _useState2[0],
35
35
  setClicked = _useState2[1];
36
+ var _useDroppable = (0, _core.useDroppable)({
37
+ refId: refId
38
+ }),
39
+ over = _useDroppable.over,
40
+ isOver = _useDroppable.isOver,
41
+ setNodeRef = _useDroppable.setNodeRef;
36
42
  var onInfoClick = function onInfoClick() {
37
43
  setClicked(!clicked);
38
44
  };
39
45
  return /*#__PURE__*/_react.default.createElement(_OneColumnContainer.StyledContainer, {
40
- className: (0, _classnames.default)(itemClass, overStyle, draggingStyle, children && droppedStyle),
46
+ className: (0, _classnames.default)(itemClass, overStyle, draggingStyle, droppedStyle),
41
47
  width: width,
42
48
  height: height
43
49
  }, /*#__PURE__*/_react.default.createElement("div", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.22",
3
+ "version": "1.0.23",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/stories/components/OneColumnContainer.jsx CHANGED
@@ -22,8 +22,11 @@ export const OneColumnContainer = ({ children,nodeRef,itemClass,overStyle,draggi
22
22
  children && droppedStyle
23
23
  )} width={width} height={height}>
24
24
  <div ref={nodeRef} style={{
25
+
25
26
  width: "100%",
26
- height: "100%"
27
+ height: "100%",
28
+ display: "grid",
29
+ gridTemplateColumns: "repeat(2, 1fr)"
27
30
  }}>
28
31
  {children}
29
32
  <InfoTextContainer clicked={clicked} width={width} height={height}>
package/dist/stories/TotalDoughnutChart.stories.js DELETED
@@ -1,136 +0,0 @@
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.TotalCost3rows = exports.TotalCost = void 0;
8
- var _react = _interopRequireDefault(require("react"));
9
- var _TotalDoughnutChart = require("./components/TotalDoughnutChart");
10
- var arrLegendData = [{
11
- name: "Package Cost",
12
- value: 30000,
13
- color: "#85A1D2"
14
- }, {
15
- name: "Redemption Cost",
16
- value: 6500,
17
- color: "#9AE6FF"
18
- }];
19
- var arrLegendDat3rows = [{
20
- name: "Package Cost",
21
- value: 30000,
22
- color: "#85A1D2"
23
- }, {
24
- name: "Redemption Cost",
25
- value: 6500,
26
- color: "#9AE6FF"
27
- }, {
28
- name: "Others",
29
- value: 20000,
30
- color: "#FD5959"
31
- }
32
- // { name: "My test 2", value: 35000, color: "#79DB95"},
33
- ];
34
- var _default = {
35
- title: "SAG/TotalDoughnutChart",
36
- component: _TotalDoughnutChart.TotalDoughnutChart,
37
- tags: ["autodocs"],
38
- argTypes: {
39
- title: {
40
- name: "title",
41
- control: {
42
- type: "text"
43
- },
44
- description: "title on top of the component"
45
- },
46
- value: {
47
- name: "value",
48
- control: {
49
- type: "number",
50
- min: 0,
51
- max: 100000000000000
52
- },
53
- description: "value (total) "
54
- },
55
- dotCut: {
56
- name: "dotCut",
57
- control: {
58
- type: "boolean"
59
- },
60
- description: "true/false - format total value with dot cut"
61
- },
62
- currency: {
63
- name: "currency",
64
- control: {
65
- type: "boolean"
66
- },
67
- description: "true/false - show/hide currency before total value"
68
- },
69
- currencyType: {
70
- name: "currencyType",
71
- options: ["USD", "EUR", "ILS", "GBP", "JPY"],
72
- control: {
73
- type: "select"
74
- }
75
- },
76
- width: {
77
- name: "width",
78
- control: {
79
- type: "number",
80
- min: 0,
81
- max: 600
82
- },
83
- description: "width of the control (in px)"
84
- },
85
- height: {
86
- name: "height",
87
- control: {
88
- type: "number",
89
- min: 0,
90
- max: 600
91
- },
92
- description: "height of the control (in px)"
93
- },
94
- textColor: {
95
- name: "textColor",
96
- description: "Sets the text color",
97
- control: {
98
- type: "color",
99
- presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
100
- }
101
- },
102
- legendData: {
103
- description: "array [] of objects: {displayName: string, value:number} to fill the pie chart "
104
- }
105
- }
106
- };
107
- exports.default = _default;
108
- var Template = function Template(args) {
109
- return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TotalDoughnutChart, args);
110
- };
111
- var TotalCost = Template.bind({});
112
- exports.TotalCost = TotalCost;
113
- TotalCost.args = {
114
- title: "Total Cost",
115
- value: 36500,
116
- dotCut: true,
117
- currency: true,
118
- currencyType: "USD",
119
- legendData: arrLegendData,
120
- width: 336,
121
- height: 374,
122
- textColor: "#212121"
123
- };
124
- var TotalCost3rows = Template.bind({});
125
- exports.TotalCost3rows = TotalCost3rows;
126
- TotalCost3rows.args = {
127
- title: "Total Cost",
128
- value: 56500,
129
- dotCut: true,
130
- currency: true,
131
- currencyType: "USD",
132
- legendData: arrLegendDat3rows,
133
- width: 336,
134
- height: 374,
135
- textColor: "#212121"
136
- };
package/dist/stories/TotalDoughnutChart.style.js DELETED
@@ -1,44 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.Title = exports.LegendTitle = exports.LegendFormattedValue = exports.LegendCurrencySign = exports.LegendControls = exports.LegendColorRectangle = exports.FormattedValue = exports.DoughnutChart = exports.CurrencySign = 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, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
11
- var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n margin: 0px 0 0px;\n font-family: \"Lato\", sans-serif;\n font-style: normal;\n color: ", ";\n width: ", ";\n height: ", ";\n //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n border-radius: 12px;\n //border: 1px solid red;\n"])), function (props) {
12
- return props.textColor;
13
- }, function (props) {
14
- return props.width.toString().concat("", "px");
15
- }, function (props) {
16
- return props.height.toString().concat("", "px");
17
- });
18
- exports.ControlsContainer = ControlsContainer;
19
- var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n border-radius: 12px;\n width: ", ";\n height: ", ";\n background: #ffffff;\n //border: 1px solid blue;\n"])), function (props) {
20
- return props.width.toString().concat("", "px");
21
- }, function (props) {
22
- return props.height.toString().concat("", "px");
23
- });
24
- exports.Controls = Controls;
25
- var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 150px;\n height: 22px;\n left: 40px;\n top: 81px;\n font-weight: 600;\n font-size: 18px;\n line-height: 22px;\n //border: 1px solid red;\n"])));
26
- exports.Title = Title;
27
- var CurrencySign = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 11px;\n height: 22px;\n left: 42px;\n top: 135px;\n font-weight: 500;\n font-size: 18px;\n line-height: 22px;\n //border: 1px solid red;\n"])));
28
- exports.CurrencySign = CurrencySign;
29
- var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 200px;\n height: 48px;\n left: 57px;\n top: 115px;\n font-weight: 500;\n font-size: 40px;\n line-height: 48px;\n //border: 1px solid red;\n"])));
30
- exports.FormattedValue = FormattedValue;
31
- var DoughnutChart = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 95px;\n height: 95px;\n left: 40px;\n top: 221px;\n //border: 1px solid red;\n"])));
32
- exports.DoughnutChart = DoughnutChart;
33
- var LegendControls = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n border-radius: 12px;\n width: 180px;\n height: 47px;\n left: 150px;\n top: 221px; \n background: #ffffff;\n //border: 1px solid blue;\n"])));
34
- exports.LegendControls = LegendControls;
35
- var LegendColorRectangle = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 16px;\n height: 16px;\n left: 14px;\n top: 14px;\n background: ", ";\n"])), function (props) {
36
- return props.color;
37
- });
38
- exports.LegendColorRectangle = LegendColorRectangle;
39
- var LegendTitle = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 120px;\n height: 18px;\n left: 40px;\n top: 1px;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n //border: 1px solid red;\n"])));
40
- exports.LegendTitle = LegendTitle;
41
- var LegendCurrencySign = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 11px;\n height: 19px;\n left: 42px;\n top: 21px;\n font-weight: 600;\n font-size: 16px;\n line-height: 19px;\n //border: 1px solid red;\n"])));
42
- exports.LegendCurrencySign = LegendCurrencySign;
43
- var LegendFormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 100px;\n height: 19px;\n left: 52px;\n top: 21px;\n font-weight: 600;\n font-size: 16px;\n line-height: 19px;\n //border: 1px solid red;\n"])));
44
- exports.LegendFormattedValue = LegendFormattedValue;
package/dist/stories/components/TotalDoughnutChart.js DELETED
@@ -1,104 +0,0 @@
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.TotalDoughnutChart = void 0;
8
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
9
- var _react = _interopRequireDefault(require("react"));
10
- var _recharts = require("recharts");
11
- var _TotalDoughnutChartStyle = require("../TotalDoughnutChart.style.js");
12
- var _excluded = ["title", "value", "dotCut", "currency", "currencyType", "legendData", "width", "height", "textColor"];
13
- /*TotalDoughnutChart*/
14
- var TotalDoughnutChart = function TotalDoughnutChart(_ref) {
15
- var _ref$title = _ref.title,
16
- title = _ref$title === void 0 ? "Total Cost" : _ref$title,
17
- _ref$value = _ref.value,
18
- value = _ref$value === void 0 ? 0 : _ref$value,
19
- _ref$dotCut = _ref.dotCut,
20
- dotCut = _ref$dotCut === void 0 ? true : _ref$dotCut,
21
- _ref$currency = _ref.currency,
22
- currency = _ref$currency === void 0 ? true : _ref$currency,
23
- _ref$currencyType = _ref.currencyType,
24
- currencyType = _ref$currencyType === void 0 ? "USD" : _ref$currencyType,
25
- legendData = _ref.legendData,
26
- _ref$width = _ref.width,
27
- width = _ref$width === void 0 ? 336 : _ref$width,
28
- _ref$height = _ref.height,
29
- height = _ref$height === void 0 ? 374 : _ref$height,
30
- _ref$textColor = _ref.textColor,
31
- textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
32
- props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
33
- var getCurrencySign = function getCurrencySign(currencyTypeToConvert) {
34
- if (!currencyTypeToConvert) return "";
35
- var currencySign = "";
36
- var currencyFormatter = new Intl.NumberFormat("en-US", {
37
- style: "currency",
38
- currency: currencyTypeToConvert
39
- });
40
- currencySign = currencyFormatter.format(value).substring(0, 1);
41
- return currencySign;
42
- };
43
- var getFormattedUnits = function getFormattedUnits(num) {
44
- if (Math.abs(num) >= 1000000000) {
45
- return "B";
46
- }
47
- if (Math.abs(num) >= 1000000) {
48
- return "M";
49
- }
50
- if (Math.abs(num) >= 1000) {
51
- return "K";
52
- }
53
- return "";
54
- };
55
- var getFormattedValue = function getFormattedValue(num) {
56
- if (Math.abs(num) >= 1000000000) {
57
- return (num / 1000000000).toFixed(1).replace(/\.0$/, "");
58
- }
59
- if (Math.abs(num) >= 1000000) {
60
- return (num / 1000000).toFixed(1).replace(/\.0$/, "");
61
- }
62
- if (Math.abs(num) >= 1000) {
63
- return (num / 1000).toFixed(1).replace(/\.0$/, "");
64
- }
65
- return num;
66
- };
67
- var getNumberWithCommas = function getNumberWithCommas(x) {
68
- x = x.toString();
69
- var pattern = /(-?\d+)(\d{3})/;
70
- while (pattern.test(x)) x = x.replace(pattern, "$1,$2");
71
- return x;
72
- };
73
- var onPieEnterHandler = function onPieEnterHandler() {};
74
- return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.ControlsContainer, {
75
- height: height,
76
- width: width,
77
- textColor: textColor
78
- }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.Controls, {
79
- height: height,
80
- width: width
81
- }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.Title, null, title), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.CurrencySign, null, "".concat(currency ? getCurrencySign(currencyType) : "")), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.FormattedValue, null, "".concat(dotCut ? getFormattedValue(value) : getNumberWithCommas(value)), "".concat(dotCut ? getFormattedUnits(value) : "")), legendData.map(function (row, index) {
82
- return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendControls, null, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendColorRectangle, {
83
- color: row.color
84
- }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendTitle, null, row.name), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendCurrencySign, null, "".concat(currency ? getCurrencySign(currencyType) : "")), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendFormattedValue, null, "".concat(dotCut ? getFormattedValue(row.value) : getNumberWithCommas(row.value)), "".concat(dotCut ? getFormattedUnits(row.value) : "")));
85
- }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.DoughnutChart, null, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, {
86
- width: 93,
87
- height: 93,
88
- onMouseEnter: onPieEnterHandler
89
- }, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
90
- data: legendData,
91
- innerRadius: 32,
92
- outerRadius: 47,
93
- fill: "#8884d8",
94
- dataKey: "value"
95
- }, legendData.map(function (row, index) {
96
- return /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
97
- key: "cell-".concat(index),
98
- fill: row.color
99
- });
100
- })), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))));
101
- };
102
- exports.TotalDoughnutChart = TotalDoughnutChart;
103
- var _default = TotalDoughnutChart;
104
- exports.default = _default;