@sb1/ffe-chart-donut-react 5.3.6 → 6.0.0

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/es/ChartDonut.js +30 -89
  2. package/es/index.js +1 -2
  3. package/lib/ChartDonut.js +37 -96
  4. package/lib/index.js +4 -8
  5. package/package.json +5 -8
package/es/ChartDonut.js CHANGED
@@ -1,93 +1,34 @@
1
1
  import React from 'react';
2
- import { node, number, string } from 'prop-types';
3
- var NON_BREAKING_SPACE = "\xA0";
2
+ var NON_BREAKING_SPACE = '\u00A0';
4
3
  var RADIUS = 150;
5
4
  var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
6
- function ChartDonut(_ref) {
7
- var name = _ref.name,
8
- percentage = _ref.percentage,
9
- firstLabel = _ref.firstLabel,
10
- lastLabel = _ref.lastLabel,
11
- label = _ref.label;
12
- var offset = CIRCUMFERENCE - CIRCUMFERENCE / 100 * percentage;
13
-
14
- /*
15
- The rendered circle consists of two half-circles with a gap between them.
16
- That means we have to rotate one of them to create this gap and we also have to
17
- completely remove one of the circles once the other one grows so large that there is
18
- not enough room to fit the other. The numbers used to rotate, adjust and hide
19
- half-circles below come from visually inspecting the result at different percentages
20
- and is not the result of any kind of complex math. If any aspect of this SVG is
21
- changed, please verify that it looks right for the entire 0-100 percentage range.
22
- */
23
- return /*#__PURE__*/React.createElement("div", {
24
- className: "ffe-chart-donut"
25
- }, /*#__PURE__*/React.createElement("svg", {
26
- viewBox: "0 0 360 360",
27
- className: "ffe-chart-donut__circle",
28
- style: {
29
- transform: "scale(-1, 1) rotate(".concat(percentage ? 275 : -90, "deg)")
30
- }
31
- }, percentage < 95.7 && /*#__PURE__*/React.createElement("circle", {
32
- className: "ffe-chart-donut--first",
33
- fill: "none",
34
- strokeWidth: "15",
35
- strokeLinecap: "round",
36
- strokeLinejoin: "round",
37
- strokeMiterlimit: "10",
38
- cx: "50%",
39
- cy: "50%",
40
- r: RADIUS,
41
- strokeDasharray: CIRCUMFERENCE,
42
- strokeDashoffset: CIRCUMFERENCE - offset + (percentage ? 22 : 0)
43
- })), /*#__PURE__*/React.createElement("svg", {
44
- viewBox: "0 0 360 360",
45
- className: "ffe-chart-donut__circle",
46
- style: {
47
- transform: "rotate(".concat(percentage ? -85 : -90, "deg)")
48
- }
49
- }, percentage > 3.2 && /*#__PURE__*/React.createElement("circle", {
50
- className: "ffe-chart-donut--last",
51
- fill: "none",
52
- strokeWidth: "15",
53
- strokeLinecap: "round",
54
- strokeLinejoin: "round",
55
- strokeMiterlimit: "10",
56
- cx: "50%",
57
- cy: "50%",
58
- r: RADIUS,
59
- strokeDasharray: CIRCUMFERENCE + (percentage === 100 ? 22 : 0),
60
- strokeDashoffset: offset + (percentage ? 30 : 0)
61
- })), /*#__PURE__*/React.createElement("div", {
62
- className: "ffe-chart-donut__description"
63
- }, /*#__PURE__*/React.createElement("div", {
64
- className: "ffe-chart-donut__name ffe-strong-text"
65
- }, name), firstLabel && lastLabel && /*#__PURE__*/React.createElement("div", {
66
- className: "ffe-chart-donut__fractions"
67
- }, /*#__PURE__*/React.createElement("div", {
68
- className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--vann"
69
- }, /*#__PURE__*/React.createElement("div", {
70
- className: "ffe-chart-donut__amount ffe-strong-text"
71
- }, "".concat(Number(100 - percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")), /*#__PURE__*/React.createElement("div", {
72
- className: "ffe-chart-donut__type ffe-micro-text"
73
- }, firstLabel)), /*#__PURE__*/React.createElement("div", {
74
- className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--frost"
75
- }, /*#__PURE__*/React.createElement("div", {
76
- className: "ffe-chart-donut__amount ffe-strong-text"
77
- }, "".concat(Number(percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")), /*#__PURE__*/React.createElement("div", {
78
- className: "ffe-chart-donut__type ffe-micro-text"
79
- }, lastLabel))), !firstLabel && !lastLabel && label));
80
- }
81
- ChartDonut.propTypes = {
82
- /** Short text labeling left value, like "empty", "said yes" etc */
83
- firstLabel: string,
84
- /** Short text labeling right value, like "full", "said no" etc */
85
- lastLabel: string,
86
- /** React node to be inserted directly under the chart's name, alternative to first/last label */
87
- label: node,
88
- /** Short text labeling the graph in total, like "percentage", "voted this year" etc */
89
- name: string.isRequired,
90
- /** The percentage for the right-most value */
91
- percentage: number.isRequired
5
+ export var ChartDonut = function (_a) {
6
+ var name = _a.name, percentage = _a.percentage, firstLabel = _a.firstLabel, lastLabel = _a.lastLabel, label = _a.label;
7
+ var offset = CIRCUMFERENCE - (CIRCUMFERENCE / 100) * percentage;
8
+ /*
9
+ The rendered circle consists of two half-circles with a gap between them.
10
+ That means we have to rotate one of them to create this gap and we also have to
11
+ completely remove one of the circles once the other one grows so large that there is
12
+ not enough room to fit the other. The numbers used to rotate, adjust and hide
13
+ half-circles below come from visually inspecting the result at different percentages
14
+ and is not the result of any kind of complex math. If any aspect of this SVG is
15
+ changed, please verify that it looks right for the entire 0-100 percentage range.
16
+ */
17
+ return (React.createElement("div", { className: "ffe-chart-donut" },
18
+ React.createElement("svg", { viewBox: "0 0 360 360", className: "ffe-chart-donut__circle", style: {
19
+ transform: "scale(-1, 1) rotate(".concat(percentage ? 275 : -90, "deg)"),
20
+ } }, percentage < 95.7 && (React.createElement("circle", { className: "ffe-chart-donut--first", fill: "none", strokeWidth: "15", strokeLinecap: "round", strokeLinejoin: "round", strokeMiterlimit: "10", cx: "50%", cy: "50%", r: RADIUS, strokeDasharray: CIRCUMFERENCE, strokeDashoffset: CIRCUMFERENCE - offset + (percentage ? 22 : 0) }))),
21
+ React.createElement("svg", { viewBox: "0 0 360 360", className: "ffe-chart-donut__circle", style: {
22
+ transform: "rotate(".concat(percentage ? -85 : -90, "deg)"),
23
+ } }, percentage > 3.2 && (React.createElement("circle", { className: "ffe-chart-donut--last", fill: "none", strokeWidth: "15", strokeLinecap: "round", strokeLinejoin: "round", strokeMiterlimit: "10", cx: "50%", cy: "50%", r: RADIUS, strokeDasharray: CIRCUMFERENCE + (percentage === 100 ? 22 : 0), strokeDashoffset: offset + (percentage ? 30 : 0) }))),
24
+ React.createElement("div", { className: "ffe-chart-donut__description" },
25
+ React.createElement("div", { className: "ffe-chart-donut__name ffe-strong-text" }, name),
26
+ firstLabel && lastLabel && (React.createElement("div", { className: "ffe-chart-donut__fractions" },
27
+ React.createElement("div", { className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--vann" },
28
+ React.createElement("div", { className: "ffe-chart-donut__amount ffe-strong-text" }, "".concat(Number(100 - percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")),
29
+ React.createElement("div", { className: "ffe-chart-donut__type ffe-micro-text" }, firstLabel)),
30
+ React.createElement("div", { className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--frost" },
31
+ React.createElement("div", { className: "ffe-chart-donut__amount ffe-strong-text" }, "".concat(Number(percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")),
32
+ React.createElement("div", { className: "ffe-chart-donut__type ffe-micro-text" }, lastLabel)))),
33
+ !firstLabel && !lastLabel && label)));
92
34
  };
93
- export default ChartDonut;
package/es/index.js CHANGED
@@ -1,2 +1 @@
1
- import ChartDonut from './ChartDonut';
2
- export default ChartDonut;
1
+ export { ChartDonut } from './ChartDonut';
package/lib/ChartDonut.js CHANGED
@@ -1,100 +1,41 @@
1
1
  "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _propTypes = require("prop-types");
9
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
- var NON_BREAKING_SPACE = "\xA0";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.ChartDonut = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var NON_BREAKING_SPACE = '\u00A0';
11
9
  var RADIUS = 150;
12
10
  var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
13
- function ChartDonut(_ref) {
14
- var name = _ref.name,
15
- percentage = _ref.percentage,
16
- firstLabel = _ref.firstLabel,
17
- lastLabel = _ref.lastLabel,
18
- label = _ref.label;
19
- var offset = CIRCUMFERENCE - CIRCUMFERENCE / 100 * percentage;
20
-
21
- /*
22
- The rendered circle consists of two half-circles with a gap between them.
23
- That means we have to rotate one of them to create this gap and we also have to
24
- completely remove one of the circles once the other one grows so large that there is
25
- not enough room to fit the other. The numbers used to rotate, adjust and hide
26
- half-circles below come from visually inspecting the result at different percentages
27
- and is not the result of any kind of complex math. If any aspect of this SVG is
28
- changed, please verify that it looks right for the entire 0-100 percentage range.
29
- */
30
- return /*#__PURE__*/_react.default.createElement("div", {
31
- className: "ffe-chart-donut"
32
- }, /*#__PURE__*/_react.default.createElement("svg", {
33
- viewBox: "0 0 360 360",
34
- className: "ffe-chart-donut__circle",
35
- style: {
36
- transform: "scale(-1, 1) rotate(".concat(percentage ? 275 : -90, "deg)")
37
- }
38
- }, percentage < 95.7 && /*#__PURE__*/_react.default.createElement("circle", {
39
- className: "ffe-chart-donut--first",
40
- fill: "none",
41
- strokeWidth: "15",
42
- strokeLinecap: "round",
43
- strokeLinejoin: "round",
44
- strokeMiterlimit: "10",
45
- cx: "50%",
46
- cy: "50%",
47
- r: RADIUS,
48
- strokeDasharray: CIRCUMFERENCE,
49
- strokeDashoffset: CIRCUMFERENCE - offset + (percentage ? 22 : 0)
50
- })), /*#__PURE__*/_react.default.createElement("svg", {
51
- viewBox: "0 0 360 360",
52
- className: "ffe-chart-donut__circle",
53
- style: {
54
- transform: "rotate(".concat(percentage ? -85 : -90, "deg)")
55
- }
56
- }, percentage > 3.2 && /*#__PURE__*/_react.default.createElement("circle", {
57
- className: "ffe-chart-donut--last",
58
- fill: "none",
59
- strokeWidth: "15",
60
- strokeLinecap: "round",
61
- strokeLinejoin: "round",
62
- strokeMiterlimit: "10",
63
- cx: "50%",
64
- cy: "50%",
65
- r: RADIUS,
66
- strokeDasharray: CIRCUMFERENCE + (percentage === 100 ? 22 : 0),
67
- strokeDashoffset: offset + (percentage ? 30 : 0)
68
- })), /*#__PURE__*/_react.default.createElement("div", {
69
- className: "ffe-chart-donut__description"
70
- }, /*#__PURE__*/_react.default.createElement("div", {
71
- className: "ffe-chart-donut__name ffe-strong-text"
72
- }, name), firstLabel && lastLabel && /*#__PURE__*/_react.default.createElement("div", {
73
- className: "ffe-chart-donut__fractions"
74
- }, /*#__PURE__*/_react.default.createElement("div", {
75
- className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--vann"
76
- }, /*#__PURE__*/_react.default.createElement("div", {
77
- className: "ffe-chart-donut__amount ffe-strong-text"
78
- }, "".concat(Number(100 - percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")), /*#__PURE__*/_react.default.createElement("div", {
79
- className: "ffe-chart-donut__type ffe-micro-text"
80
- }, firstLabel)), /*#__PURE__*/_react.default.createElement("div", {
81
- className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--frost"
82
- }, /*#__PURE__*/_react.default.createElement("div", {
83
- className: "ffe-chart-donut__amount ffe-strong-text"
84
- }, "".concat(Number(percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")), /*#__PURE__*/_react.default.createElement("div", {
85
- className: "ffe-chart-donut__type ffe-micro-text"
86
- }, lastLabel))), !firstLabel && !lastLabel && label));
87
- }
88
- ChartDonut.propTypes = {
89
- /** Short text labeling left value, like "empty", "said yes" etc */
90
- firstLabel: _propTypes.string,
91
- /** Short text labeling right value, like "full", "said no" etc */
92
- lastLabel: _propTypes.string,
93
- /** React node to be inserted directly under the chart's name, alternative to first/last label */
94
- label: _propTypes.node,
95
- /** Short text labeling the graph in total, like "percentage", "voted this year" etc */
96
- name: _propTypes.string.isRequired,
97
- /** The percentage for the right-most value */
98
- percentage: _propTypes.number.isRequired
11
+ var ChartDonut = function (_a) {
12
+ var name = _a.name, percentage = _a.percentage, firstLabel = _a.firstLabel, lastLabel = _a.lastLabel, label = _a.label;
13
+ var offset = CIRCUMFERENCE - (CIRCUMFERENCE / 100) * percentage;
14
+ /*
15
+ The rendered circle consists of two half-circles with a gap between them.
16
+ That means we have to rotate one of them to create this gap and we also have to
17
+ completely remove one of the circles once the other one grows so large that there is
18
+ not enough room to fit the other. The numbers used to rotate, adjust and hide
19
+ half-circles below come from visually inspecting the result at different percentages
20
+ and is not the result of any kind of complex math. If any aspect of this SVG is
21
+ changed, please verify that it looks right for the entire 0-100 percentage range.
22
+ */
23
+ return (react_1.default.createElement("div", { className: "ffe-chart-donut" },
24
+ react_1.default.createElement("svg", { viewBox: "0 0 360 360", className: "ffe-chart-donut__circle", style: {
25
+ transform: "scale(-1, 1) rotate(".concat(percentage ? 275 : -90, "deg)"),
26
+ } }, percentage < 95.7 && (react_1.default.createElement("circle", { className: "ffe-chart-donut--first", fill: "none", strokeWidth: "15", strokeLinecap: "round", strokeLinejoin: "round", strokeMiterlimit: "10", cx: "50%", cy: "50%", r: RADIUS, strokeDasharray: CIRCUMFERENCE, strokeDashoffset: CIRCUMFERENCE - offset + (percentage ? 22 : 0) }))),
27
+ react_1.default.createElement("svg", { viewBox: "0 0 360 360", className: "ffe-chart-donut__circle", style: {
28
+ transform: "rotate(".concat(percentage ? -85 : -90, "deg)"),
29
+ } }, percentage > 3.2 && (react_1.default.createElement("circle", { className: "ffe-chart-donut--last", fill: "none", strokeWidth: "15", strokeLinecap: "round", strokeLinejoin: "round", strokeMiterlimit: "10", cx: "50%", cy: "50%", r: RADIUS, strokeDasharray: CIRCUMFERENCE + (percentage === 100 ? 22 : 0), strokeDashoffset: offset + (percentage ? 30 : 0) }))),
30
+ react_1.default.createElement("div", { className: "ffe-chart-donut__description" },
31
+ react_1.default.createElement("div", { className: "ffe-chart-donut__name ffe-strong-text" }, name),
32
+ firstLabel && lastLabel && (react_1.default.createElement("div", { className: "ffe-chart-donut__fractions" },
33
+ react_1.default.createElement("div", { className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--vann" },
34
+ react_1.default.createElement("div", { className: "ffe-chart-donut__amount ffe-strong-text" }, "".concat(Number(100 - percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")),
35
+ react_1.default.createElement("div", { className: "ffe-chart-donut__type ffe-micro-text" }, firstLabel)),
36
+ react_1.default.createElement("div", { className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--frost" },
37
+ react_1.default.createElement("div", { className: "ffe-chart-donut__amount ffe-strong-text" }, "".concat(Number(percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")),
38
+ react_1.default.createElement("div", { className: "ffe-chart-donut__type ffe-micro-text" }, lastLabel)))),
39
+ !firstLabel && !lastLabel && label)));
99
40
  };
100
- var _default = exports.default = ChartDonut;
41
+ exports.ChartDonut = ChartDonut;
package/lib/index.js CHANGED
@@ -1,9 +1,5 @@
1
1
  "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _ChartDonut = _interopRequireDefault(require("./ChartDonut"));
8
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
9
- var _default = exports.default = _ChartDonut.default;
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ChartDonut = void 0;
4
+ var ChartDonut_1 = require("./ChartDonut");
5
+ Object.defineProperty(exports, "ChartDonut", { enumerable: true, get: function () { return ChartDonut_1.ChartDonut; } });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-chart-donut-react",
3
- "version": "5.3.6",
3
+ "version": "6.0.0",
4
4
  "description": "Donut chart in SVG",
5
5
  "keywords": [
6
6
  "ffe"
@@ -20,16 +20,13 @@
20
20
  "url": "ssh://git@github.com:SpareBank1/designsystem.git"
21
21
  },
22
22
  "scripts": {
23
- "build": "ffe-buildtool babel",
23
+ "build": "ffe-buildtool tsc",
24
24
  "watch": "ffe-buildtool babel-watch",
25
- "lint": "eslint src",
26
- "lint:fix": "eslint src --fix",
25
+ "lint": "eslint src --ext ts,tsx",
26
+ "lint:fix": "eslint src --fix --ext ts,tsx",
27
27
  "test": "ffe-buildtool jest",
28
28
  "test:watch": "ffe-buildtool jest --watch"
29
29
  },
30
- "dependencies": {
31
- "prop-types": "^15.7.2"
32
- },
33
30
  "devDependencies": {
34
31
  "@sb1/ffe-buildtool": "^0.6.1",
35
32
  "react": "^16.9.0",
@@ -41,5 +38,5 @@
41
38
  "publishConfig": {
42
39
  "access": "public"
43
40
  },
44
- "gitHead": "12285ee4ecea525ee235bc88aee2ffe38c32f0d1"
41
+ "gitHead": "745ac95826f9ff14c1737c6cdcb17841babf6da4"
45
42
  }