@sb1/ffe-chart-donut-react 5.1.1 → 5.1.2

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 (4) hide show
  1. package/es/ChartDonut.js +5 -11
  2. package/lib/ChartDonut.js +5 -15
  3. package/lib/index.js +0 -3
  4. package/package.json +42 -42
package/es/ChartDonut.js CHANGED
@@ -3,14 +3,14 @@ import { node, number, string } from 'prop-types';
3
3
  var NON_BREAKING_SPACE = "\xA0";
4
4
  var RADIUS = 150;
5
5
  var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
6
-
7
6
  function ChartDonut(_ref) {
8
7
  var name = _ref.name,
9
- percentage = _ref.percentage,
10
- firstLabel = _ref.firstLabel,
11
- lastLabel = _ref.lastLabel,
12
- label = _ref.label;
8
+ percentage = _ref.percentage,
9
+ firstLabel = _ref.firstLabel,
10
+ lastLabel = _ref.lastLabel,
11
+ label = _ref.label;
13
12
  var offset = CIRCUMFERENCE - CIRCUMFERENCE / 100 * percentage;
13
+
14
14
  /*
15
15
  The rendered circle consists of two half-circles with a gap between them.
16
16
  That means we have to rotate one of them to create this gap and we also have to
@@ -20,7 +20,6 @@ function ChartDonut(_ref) {
20
20
  and is not the result of any kind of complex math. If any aspect of this SVG is
21
21
  changed, please verify that it looks right for the entire 0-100 percentage range.
22
22
  */
23
-
24
23
  return /*#__PURE__*/React.createElement("div", {
25
24
  className: "ffe-chart-donut"
26
25
  }, /*#__PURE__*/React.createElement("svg", {
@@ -79,20 +78,15 @@ function ChartDonut(_ref) {
79
78
  className: "ffe-chart-donut__type ffe-micro-text"
80
79
  }, lastLabel))), !firstLabel && !lastLabel && label));
81
80
  }
82
-
83
81
  ChartDonut.propTypes = {
84
82
  /** Short text labeling left value, like "empty", "said yes" etc */
85
83
  firstLabel: string,
86
-
87
84
  /** Short text labeling right value, like "full", "said no" etc */
88
85
  lastLabel: string,
89
-
90
86
  /** React node to be inserted directly under the chart's name, alternative to first/last label */
91
87
  label: node,
92
-
93
88
  /** Short text labeling the graph in total, like "percentage", "voted this year" etc */
94
89
  name: string.isRequired,
95
-
96
90
  /** The percentage for the right-most value */
97
91
  percentage: number.isRequired
98
92
  };
package/lib/ChartDonut.js CHANGED
@@ -4,24 +4,20 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _react = _interopRequireDefault(require("react"));
9
-
10
8
  var _propTypes = require("prop-types");
11
-
12
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
10
  var NON_BREAKING_SPACE = "\xA0";
15
11
  var RADIUS = 150;
16
12
  var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
17
-
18
13
  function ChartDonut(_ref) {
19
14
  var name = _ref.name,
20
- percentage = _ref.percentage,
21
- firstLabel = _ref.firstLabel,
22
- lastLabel = _ref.lastLabel,
23
- label = _ref.label;
15
+ percentage = _ref.percentage,
16
+ firstLabel = _ref.firstLabel,
17
+ lastLabel = _ref.lastLabel,
18
+ label = _ref.label;
24
19
  var offset = CIRCUMFERENCE - CIRCUMFERENCE / 100 * percentage;
20
+
25
21
  /*
26
22
  The rendered circle consists of two half-circles with a gap between them.
27
23
  That means we have to rotate one of them to create this gap and we also have to
@@ -31,7 +27,6 @@ function ChartDonut(_ref) {
31
27
  and is not the result of any kind of complex math. If any aspect of this SVG is
32
28
  changed, please verify that it looks right for the entire 0-100 percentage range.
33
29
  */
34
-
35
30
  return /*#__PURE__*/_react.default.createElement("div", {
36
31
  className: "ffe-chart-donut"
37
32
  }, /*#__PURE__*/_react.default.createElement("svg", {
@@ -90,20 +85,15 @@ function ChartDonut(_ref) {
90
85
  className: "ffe-chart-donut__type ffe-micro-text"
91
86
  }, lastLabel))), !firstLabel && !lastLabel && label));
92
87
  }
93
-
94
88
  ChartDonut.propTypes = {
95
89
  /** Short text labeling left value, like "empty", "said yes" etc */
96
90
  firstLabel: _propTypes.string,
97
-
98
91
  /** Short text labeling right value, like "full", "said no" etc */
99
92
  lastLabel: _propTypes.string,
100
-
101
93
  /** React node to be inserted directly under the chart's name, alternative to first/last label */
102
94
  label: _propTypes.node,
103
-
104
95
  /** Short text labeling the graph in total, like "percentage", "voted this year" etc */
105
96
  name: _propTypes.string.isRequired,
106
-
107
97
  /** The percentage for the right-most value */
108
98
  percentage: _propTypes.number.isRequired
109
99
  };
package/lib/index.js CHANGED
@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _ChartDonut = _interopRequireDefault(require("./ChartDonut"));
9
-
10
8
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
-
12
9
  var _default = _ChartDonut.default;
13
10
  exports.default = _default;
package/package.json CHANGED
@@ -1,44 +1,44 @@
1
1
  {
2
- "name": "@sb1/ffe-chart-donut-react",
3
- "version": "5.1.1",
4
- "description": "Donut chart in SVG",
5
- "keywords": [
6
- "ffe"
7
- ],
8
- "license": "MIT",
9
- "author": "SpareBank 1",
10
- "files": [
11
- "lib",
12
- "es",
13
- "less"
14
- ],
15
- "main": "lib/index.js",
16
- "module": "es/index.js",
17
- "sideEffects": false,
18
- "repository": {
19
- "type": "git",
20
- "url": "ssh://git@github.com:SpareBank1/designsystem.git"
21
- },
22
- "scripts": {
23
- "build": "ffe-buildtool babel",
24
- "watch": "ffe-buildtool babel-watch",
25
- "lint": "eslint src",
26
- "test": "ffe-buildtool jest",
27
- "test:watch": "ffe-buildtool jest --watch"
28
- },
29
- "dependencies": {
30
- "prop-types": "^15.7.2"
31
- },
32
- "devDependencies": {
33
- "@sb1/ffe-buildtool": "^0.4.1",
34
- "react": "^16.9.0",
35
- "react-dom": "^16.9.0"
36
- },
37
- "peerDependencies": {
38
- "react": ">=16.9.0"
39
- },
40
- "publishConfig": {
41
- "access": "public"
42
- },
43
- "gitHead": "20645a84ff31b513ef2568a7eefbed950f7e1c40"
2
+ "name": "@sb1/ffe-chart-donut-react",
3
+ "version": "5.1.2",
4
+ "description": "Donut chart in SVG",
5
+ "keywords": [
6
+ "ffe"
7
+ ],
8
+ "license": "MIT",
9
+ "author": "SpareBank 1",
10
+ "files": [
11
+ "lib",
12
+ "es",
13
+ "less"
14
+ ],
15
+ "main": "lib/index.js",
16
+ "module": "es/index.js",
17
+ "sideEffects": false,
18
+ "repository": {
19
+ "type": "git",
20
+ "url": "ssh://git@github.com:SpareBank1/designsystem.git"
21
+ },
22
+ "scripts": {
23
+ "build": "ffe-buildtool babel",
24
+ "watch": "ffe-buildtool babel-watch",
25
+ "lint": "eslint src",
26
+ "test": "ffe-buildtool jest",
27
+ "test:watch": "ffe-buildtool jest --watch"
28
+ },
29
+ "dependencies": {
30
+ "prop-types": "^15.7.2"
31
+ },
32
+ "devDependencies": {
33
+ "@sb1/ffe-buildtool": "^0.5.0",
34
+ "react": "^16.9.0",
35
+ "react-dom": "^16.9.0"
36
+ },
37
+ "peerDependencies": {
38
+ "react": ">=16.9.0"
39
+ },
40
+ "publishConfig": {
41
+ "access": "public"
42
+ },
43
+ "gitHead": "816e0f967f7b2d8fd6cca41bb9d363a4c7933116"
44
44
  }