sag_components 1.0.21 → 1.0.22

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 (12) hide show
  1. package/dist/App.js +27 -36
  2. package/dist/stories/TotalDoughnutChart.stories.js +136 -0
  3. package/dist/stories/TotalDoughnutChart.style.js +44 -0
  4. package/dist/stories/components/OneColumnContainer.js +1 -7
  5. package/dist/stories/components/TotalDoughnutChart.js +104 -0
  6. package/package.json +3 -2
  7. package/src/App.css +3 -3
  8. package/src/App.js +60 -18
  9. package/src/stories/TotalDoughnutChart.stories.js +112 -0
  10. package/src/stories/TotalDoughnutChart.style.js +135 -0
  11. package/src/stories/components/OneColumnContainer.jsx +1 -4
  12. package/src/stories/components/TotalDoughnutChart.jsx +135 -0
package/dist/App.js CHANGED
@@ -12,6 +12,8 @@ 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"));
15
17
  var onChangehandler = function onChangehandler(event, newValue) {
16
18
  console.log("Dropdown onChange event returned:");
17
19
  console.log(newValue);
@@ -79,42 +81,31 @@ function App() {
79
81
  setSelectedValue2 = _useState4[1];
80
82
  return /*#__PURE__*/React.createElement("div", {
81
83
  className: "App"
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));
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
+ }));
118
109
  }
119
110
  var _default = App;
120
111
  exports.default = _default;
package/dist/stories/TotalDoughnutChart.stories.js ADDED
@@ -0,0 +1,136 @@
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 ADDED
@@ -0,0 +1,44 @@
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/OneColumnContainer.js CHANGED
@@ -33,17 +33,11 @@ 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;
42
36
  var onInfoClick = function onInfoClick() {
43
37
  setClicked(!clicked);
44
38
  };
45
39
  return /*#__PURE__*/_react.default.createElement(_OneColumnContainer.StyledContainer, {
46
- className: (0, _classnames.default)(itemClass, overStyle, draggingStyle, droppedStyle),
40
+ className: (0, _classnames.default)(itemClass, overStyle, draggingStyle, children && droppedStyle),
47
41
  width: width,
48
42
  height: height
49
43
  }, /*#__PURE__*/_react.default.createElement("div", {
package/dist/stories/components/TotalDoughnutChart.js ADDED
@@ -0,0 +1,104 @@
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.21",
3
+ "version": "1.0.22",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
@@ -51,7 +51,8 @@
51
51
  "@mui/styled-engine-sc": "^5.12.0",
52
52
  "classnames": "^2.3.2",
53
53
  "hoopy": "^0.1.4",
54
- "react-scripts": "5.0.1"
54
+ "react-scripts": "5.0.1",
55
+ "recharts": "^2.6.2"
55
56
  },
56
57
  "browserslist": {
57
58
  "production": [
package/src/App.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .App {
2
- display: block;
2
+ display: flex;
3
3
  width: 600px;
4
- padding-top: 5%;
5
- padding-left: 5%;
4
+ padding-top: 10%;
5
+ padding-left: 10%;
6
6
  }
package/src/App.js CHANGED
@@ -5,6 +5,8 @@ import { useState } from "react";
5
5
  import Button from "./stories/components/Button";
6
6
  import Dropdown from "./stories/components/Dropdown";
7
7
  import SegmentedButton from "./stories/components/SegmentedButton";
8
+ import TotalDoughnutChart from "./stories/components/TotalDoughnutChart";
9
+ import OneColumnContainer from "./stories/components/OneColumnContainer";
8
10
 
9
11
  const onChangehandler = (event, newValue) => {
10
12
  console.log("Dropdown onChange event returned:");
@@ -29,7 +31,7 @@ function App() {
29
31
  { id: "9", label: "South Eastern Grocers" },
30
32
  ];
31
33
 
32
- const segmentsArr1=[
34
+ const segmentsArr1 = [
33
35
  {
34
36
  label: "Complete",
35
37
  value: "complete",
@@ -44,7 +46,7 @@ function App() {
44
46
  },
45
47
  ];
46
48
 
47
- const segmentsArr2=[
49
+ const segmentsArr2 = [
48
50
  {
49
51
  label: "First",
50
52
  value: "first",
@@ -57,13 +59,44 @@ function App() {
57
59
  label: "Third",
58
60
  value: "third",
59
61
  },
60
- ]
62
+ ];
61
63
 
62
64
  const [selectedValue1, setSelectedValue1] = useState("complete");
63
65
  const [selectedValue2, setSelectedValue2] = useState("complete");
64
66
 
65
67
  return (
66
68
  <div className="App">
69
+ <OneColumnContainer
70
+ height="250px"
71
+ 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"
72
+ width="250px"
73
+ />
74
+
75
+ <TotalDoughnutChart
76
+ currency
77
+ currencyType="USD"
78
+ dotCut
79
+ height={374}
80
+ legendData={[
81
+ {
82
+ color: "#85A1D2",
83
+ currency: "USD",
84
+ name: "Package Cost",
85
+ value: 30000,
86
+ },
87
+ {
88
+ color: "#9AE6FF",
89
+ currency: "USD",
90
+ name: "Redemption Cost",
91
+ value: 6500,
92
+ },
93
+ ]}
94
+ textColor="#212121"
95
+ title="Total Cost"
96
+ value={36500}
97
+ width={336}
98
+ />
99
+ {/*
67
100
  <Dropdown
68
101
  width="300"
69
102
  size="small"
@@ -84,24 +117,33 @@ function App() {
84
117
  onChange={onChangehandler}
85
118
  onInputChange={onInputChangeHandler}
86
119
  />
87
-
88
- <SegmentedButton
89
- name="group1"
90
- onClick={(val) => setSelectedValue1(val)}
91
- segments={segmentsArr1}
92
- />
93
- <p className="selected-item">Selected: {selectedValue1}</p>
94
120
  <SegmentedButton
95
- name="group2"
96
- onClick={(val) => setSelectedValue2(val)}
97
- defaultIndex={1}
98
- segments={segmentsArr2}
99
- />
100
- <p className="selected-item">Selected: {selectedValue2}</p>
101
-
121
+ backgroundColor="#ECF0FF"
122
+ controlRadius={8}
123
+ defaultIndex={0}
124
+ fontSize={14}
125
+ name="segmentedFilter"
126
+ onClick={() => {}}
127
+ options={[
128
+ {
129
+ value: "Total",
130
+ },
131
+ {
132
+ value: "Ecommerce",
133
+ },
134
+ {
135
+ value: "In Store",
136
+ },
137
+ ]}
138
+ segmentHeigth={40}
139
+ segmentRadius={8}
140
+ segmentWidth={120}
141
+ selectedSegmentColor="#fcfcfc"
142
+ selectedTextColor="#000000"
143
+ unselectedTextColor="#000000"
144
+ /> */}
102
145
  </div>
103
146
  );
104
147
  }
105
148
 
106
-
107
149
  export default App;
package/src/stories/TotalDoughnutChart.stories.js ADDED
@@ -0,0 +1,112 @@
1
+ import React from "react";
2
+ import { TotalDoughnutChart } from "./components/TotalDoughnutChart";
3
+
4
+ const arrLegendData = [
5
+ { name: "Package Cost", value: 30000, color: "#85A1D2"},
6
+ { name: "Redemption Cost", value: 6500, color: "#9AE6FF"},
7
+ ];
8
+
9
+ const arrLegendDat3rows = [
10
+ { name: "Package Cost", value: 30000, color: "#85A1D2"},
11
+ { name: "Redemption Cost", value: 6500,color: "#9AE6FF"},
12
+ { name: "Others", value: 20000, color: "#FD5959"},
13
+ // { name: "My test 2", value: 35000, color: "#79DB95"},
14
+ ];
15
+
16
+
17
+ export default {
18
+ title: "SAG/TotalDoughnutChart",
19
+ component: TotalDoughnutChart,
20
+ tags: ["autodocs"],
21
+
22
+ argTypes: {
23
+
24
+ title: {
25
+ name: "title",
26
+ control: { type: "text" },
27
+ description: "title on top of the component",
28
+ },
29
+
30
+ value: {
31
+ name: "value",
32
+ control: { type: "number", min: 0, max: 100000000000000 },
33
+ description: "value (total) ",
34
+ },
35
+
36
+ dotCut: {
37
+ name: "dotCut",
38
+ control: { type: "boolean" },
39
+ description: "true/false - format total value with dot cut",
40
+ },
41
+
42
+ currency: {
43
+ name: "currency",
44
+ control: { type: "boolean" },
45
+ description: "true/false - show/hide currency before total value",
46
+ },
47
+
48
+
49
+ currencyType: {
50
+ name: "currencyType",
51
+ options: ["USD", "EUR", "ILS", "GBP", "JPY"],
52
+ control: { type: "select" },
53
+ },
54
+
55
+
56
+ width: {
57
+ name: "width",
58
+ control: { type: "number", min: 0, max: 600 },
59
+ description: "width of the control (in px)",
60
+ },
61
+
62
+ height: {
63
+ name: "height",
64
+ control: { type: "number", min: 0, max: 600 },
65
+ description: "height of the control (in px)",
66
+ },
67
+
68
+
69
+ textColor: {
70
+ name: "textColor",
71
+ description: "Sets the text color",
72
+ control: {
73
+ type: "color",
74
+ presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"],
75
+ },
76
+ },
77
+
78
+ legendData: {
79
+ description:
80
+ "array [] of objects: {displayName: string, value:number} to fill the pie chart ",
81
+ },
82
+ },
83
+ };
84
+
85
+ const Template = (args) => <TotalDoughnutChart {...args} />;
86
+
87
+ export const TotalCost = Template.bind({});
88
+ TotalCost.args = {
89
+ title: "Total Cost",
90
+ value: 36500,
91
+ dotCut: true,
92
+ currency: true,
93
+ currencyType: "USD",
94
+ legendData: arrLegendData,
95
+ width: 336,
96
+ height: 374,
97
+ textColor: "#212121",
98
+ };
99
+
100
+
101
+ export const TotalCost3rows = Template.bind({});
102
+ TotalCost3rows.args = {
103
+ title: "Total Cost",
104
+ value: 56500,
105
+ dotCut: true,
106
+ currency: true,
107
+ currencyType: "USD",
108
+ legendData: arrLegendDat3rows,
109
+ width: 336,
110
+ height: 374,
111
+ textColor: "#212121",
112
+ };
package/src/stories/TotalDoughnutChart.style.js ADDED
@@ -0,0 +1,135 @@
1
+ import styled from "styled-components";
2
+
3
+ export const ControlsContainer = styled.div`
4
+ display: flex;
5
+ position: relative;
6
+ margin: 0px 0 0px;
7
+ font-family: "Lato", sans-serif;
8
+ font-style: normal;
9
+ color: ${(props) => {
10
+ return props.textColor;
11
+ }};
12
+ width: ${(props) => {
13
+ return props.width.toString().concat("", "px");
14
+ }};
15
+ height: ${(props) => {
16
+ return props.height.toString().concat("", "px");
17
+ }};
18
+ //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
19
+ border-radius: 12px;
20
+ //border: 1px solid red;
21
+ `;
22
+
23
+ export const Controls = styled.div`
24
+ position: relative;
25
+ border-radius: 12px;
26
+ width: ${(props) => {
27
+ return props.width.toString().concat("", "px");
28
+ }};
29
+ height: ${(props) => {
30
+ return props.height.toString().concat("", "px");
31
+ }};
32
+ background: #ffffff;
33
+ //border: 1px solid blue;
34
+ `;
35
+
36
+ export const Title = styled.div`
37
+ position: absolute;
38
+ width: 150px;
39
+ height: 22px;
40
+ left: 40px;
41
+ top: 81px;
42
+ font-weight: 600;
43
+ font-size: 18px;
44
+ line-height: 22px;
45
+ //border: 1px solid red;
46
+ `;
47
+
48
+ export const CurrencySign = styled.div`
49
+ position: absolute;
50
+ width: 11px;
51
+ height: 22px;
52
+ left: 42px;
53
+ top: 135px;
54
+ font-weight: 500;
55
+ font-size: 18px;
56
+ line-height: 22px;
57
+ //border: 1px solid red;
58
+ `;
59
+
60
+ export const FormattedValue = styled.div`
61
+ position: absolute;
62
+ width: 200px;
63
+ height: 48px;
64
+ left: 57px;
65
+ top: 115px;
66
+ font-weight: 500;
67
+ font-size: 40px;
68
+ line-height: 48px;
69
+ //border: 1px solid red;
70
+ `;
71
+
72
+ export const DoughnutChart = styled.div`
73
+ position: absolute;
74
+ width: 95px;
75
+ height: 95px;
76
+ left: 40px;
77
+ top: 221px;
78
+ //border: 1px solid red;
79
+ `;
80
+
81
+ export const LegendControls = styled.div`
82
+ position: relative;
83
+ border-radius: 12px;
84
+ width: 180px;
85
+ height: 47px;
86
+ left: 150px;
87
+ top: 221px;
88
+ background: #ffffff;
89
+ //border: 1px solid blue;
90
+ `;
91
+
92
+ export const LegendColorRectangle = styled.div`
93
+ position: absolute;
94
+ width: 16px;
95
+ height: 16px;
96
+ left: 14px;
97
+ top: 14px;
98
+ background: ${(props) => props.color};
99
+ `;
100
+
101
+ export const LegendTitle = styled.div`
102
+ position: absolute;
103
+ width: 120px;
104
+ height: 18px;
105
+ left: 40px;
106
+ top: 1px;
107
+ font-weight: 400;
108
+ font-size: 14px;
109
+ line-height: 17px;
110
+ //border: 1px solid red;
111
+ `;
112
+
113
+ export const LegendCurrencySign = styled.div`
114
+ position: absolute;
115
+ width: 11px;
116
+ height: 19px;
117
+ left: 42px;
118
+ top: 21px;
119
+ font-weight: 600;
120
+ font-size: 16px;
121
+ line-height: 19px;
122
+ //border: 1px solid red;
123
+ `;
124
+
125
+ export const LegendFormattedValue = styled.div`
126
+ position: absolute;
127
+ width: 100px;
128
+ height: 19px;
129
+ left: 52px;
130
+ top: 21px;
131
+ font-weight: 600;
132
+ font-size: 16px;
133
+ line-height: 19px;
134
+ //border: 1px solid red;
135
+ `;
package/src/stories/components/OneColumnContainer.jsx CHANGED
@@ -9,9 +9,6 @@ import classNames from "classnames";
9
9
  */
10
10
  export const OneColumnContainer = ({ children,nodeRef,itemClass,overStyle,draggingStyle,droppedStyle,refId,width,height,infoText,...props }) => {
11
11
  const [clicked, setClicked] = useState(false);
12
- const { over,isOver, setNodeRef } = useDroppable({
13
- refId,
14
- });
15
12
  const onInfoClick = ()=>{
16
13
  setClicked(!clicked)
17
14
  }
@@ -22,7 +19,7 @@ export const OneColumnContainer = ({ children,nodeRef,itemClass,overStyle,draggi
22
19
  itemClass,
23
20
  overStyle,
24
21
  draggingStyle,
25
- droppedStyle
22
+ children && droppedStyle
26
23
  )} width={width} height={height}>
27
24
  <div ref={nodeRef} style={{
28
25
  width: "100%",
package/src/stories/components/TotalDoughnutChart.jsx ADDED
@@ -0,0 +1,135 @@
1
+ import React from "react";
2
+
3
+ import { PieChart as SourcePieChart, Pie, Cell, Tooltip } from "recharts";
4
+
5
+ import {
6
+ ControlsContainer,
7
+ Title,
8
+ CurrencySign,
9
+ FormattedValue,
10
+ Controls,
11
+ DoughnutChart,
12
+ LegendControls,
13
+ LegendColorRectangle,
14
+ LegendTitle,
15
+ LegendCurrencySign,
16
+ LegendFormattedValue,
17
+ } from "../TotalDoughnutChart.style.js";
18
+
19
+ /*TotalDoughnutChart*/
20
+ export const TotalDoughnutChart = ({
21
+ title = "Total Cost",
22
+ value = 0,
23
+ dotCut = true,
24
+ currency = true,
25
+ currencyType = "USD",
26
+ legendData,
27
+ width = 336,
28
+ height = 374,
29
+ textColor = "black",
30
+ ...props
31
+ }) => {
32
+ const getCurrencySign = (currencyTypeToConvert) => {
33
+ if (!currencyTypeToConvert) return "";
34
+ let currencySign = "";
35
+ const currencyFormatter = new Intl.NumberFormat("en-US", {
36
+ style: "currency",
37
+ currency: currencyTypeToConvert,
38
+ });
39
+ currencySign = currencyFormatter.format(value).substring(0, 1);
40
+ return currencySign;
41
+ };
42
+
43
+ const 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
+
56
+ const getFormattedValue = (num) => {
57
+ if (Math.abs(num) >= 1000000000) {
58
+ return (num / 1000000000).toFixed(1).replace(/\.0$/, "");
59
+ }
60
+ if (Math.abs(num) >= 1000000) {
61
+ return (num / 1000000).toFixed(1).replace(/\.0$/, "");
62
+ }
63
+ if (Math.abs(num) >= 1000) {
64
+ return (num / 1000).toFixed(1).replace(/\.0$/, "");
65
+ }
66
+ return num;
67
+ };
68
+
69
+ const getNumberWithCommas = (x) => {
70
+ x = x.toString();
71
+ var pattern = /(-?\d+)(\d{3})/;
72
+ while (pattern.test(x)) x = x.replace(pattern, "$1,$2");
73
+ return x;
74
+ };
75
+
76
+ const onPieEnterHandler = () => {};
77
+
78
+ return (
79
+ <ControlsContainer height={height} width={width} textColor={textColor}>
80
+ <Controls height={height} width={width}>
81
+ <Title>{title}</Title>
82
+
83
+ <CurrencySign>
84
+ {`${currency ? getCurrencySign(currencyType) : ""}`}
85
+ </CurrencySign>
86
+ <FormattedValue>
87
+ {`${dotCut ? getFormattedValue(value) : getNumberWithCommas(value)}`}
88
+ {`${dotCut ? getFormattedUnits(value) : ""}`}
89
+ </FormattedValue>
90
+
91
+ {legendData.map((row, index) => (
92
+ <LegendControls>
93
+ <LegendColorRectangle color={row.color}></LegendColorRectangle>
94
+ <LegendTitle>{row.name}</LegendTitle>
95
+ <LegendCurrencySign>
96
+ {`${currency ? getCurrencySign(currencyType) : ""}`}
97
+ </LegendCurrencySign>
98
+ <LegendFormattedValue>
99
+ {`${
100
+ dotCut
101
+ ? getFormattedValue(row.value)
102
+ : getNumberWithCommas(row.value)
103
+ }`}
104
+ {`${dotCut ? getFormattedUnits(row.value) : ""}`}
105
+ </LegendFormattedValue>
106
+ </LegendControls>
107
+ ))}
108
+
109
+ <DoughnutChart>
110
+ <SourcePieChart
111
+ width={93}
112
+ height={93}
113
+ onMouseEnter={onPieEnterHandler}
114
+ >
115
+ <Pie
116
+ data={legendData}
117
+ innerRadius={32}
118
+ outerRadius={47}
119
+ fill="#8884d8"
120
+ dataKey="value"
121
+ >
122
+ {legendData.map((row, index) => (
123
+ <Cell key={`cell-${index}`} fill={row.color} />
124
+ ))}
125
+ </Pie>
126
+
127
+ <Tooltip/>
128
+ </SourcePieChart>
129
+ </DoughnutChart>
130
+ </Controls>
131
+ </ControlsContainer>
132
+ );
133
+ };
134
+
135
+ export default TotalDoughnutChart;