@sb1/ffe-chart-donut-react 3.0.5 → 5.0.1
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.
- package/README.md +1 -4
- package/es/ChartDonut.js +14 -10
- package/{lib → less}/ffe-chart-donut.less +19 -7
- package/lib/ChartDonut.js +13 -9
- package/package.json +6 -9
- package/CHANGELOG.md +0 -297
- package/es/ChartDonut.spec.js +0 -37
- package/lib/ChartDonut.spec.js +0 -44
package/README.md
CHANGED
|
@@ -9,8 +9,5 @@ npm install --save @sb1/ffe-chart-donut-react
|
|
|
9
9
|
## Usage
|
|
10
10
|
|
|
11
11
|
```css
|
|
12
|
-
@import 'path/to/node_modules/@sb1/ffe-chart-donut-react/
|
|
12
|
+
@import 'path/to/node_modules/@sb1/ffe-chart-donut-react/less/ffe-chart-donut';
|
|
13
13
|
```
|
|
14
|
-
|
|
15
|
-
Run Styleguidist from the repository root to see live examples and documentation,
|
|
16
|
-
or see the markdown files next to the component code in `src/`.
|
package/es/ChartDonut.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { number, string } from 'prop-types';
|
|
2
|
+
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;
|
|
@@ -8,7 +8,8 @@ function ChartDonut(_ref) {
|
|
|
8
8
|
var name = _ref.name,
|
|
9
9
|
percentage = _ref.percentage,
|
|
10
10
|
firstLabel = _ref.firstLabel,
|
|
11
|
-
lastLabel = _ref.lastLabel
|
|
11
|
+
lastLabel = _ref.lastLabel,
|
|
12
|
+
label = _ref.label;
|
|
12
13
|
var offset = CIRCUMFERENCE - CIRCUMFERENCE / 100 * percentage;
|
|
13
14
|
/*
|
|
14
15
|
The rendered circle consists of two half-circles with a gap between them.
|
|
@@ -29,7 +30,7 @@ function ChartDonut(_ref) {
|
|
|
29
30
|
transform: "scale(-1, 1) rotate(".concat(percentage ? 275 : -90, "deg)")
|
|
30
31
|
}
|
|
31
32
|
}, percentage < 95.7 && /*#__PURE__*/React.createElement("circle", {
|
|
32
|
-
className: "ffe-chart-donut--
|
|
33
|
+
className: "ffe-chart-donut--vann",
|
|
33
34
|
fill: "none",
|
|
34
35
|
strokeWidth: "15",
|
|
35
36
|
strokeLinecap: "round",
|
|
@@ -47,7 +48,7 @@ function ChartDonut(_ref) {
|
|
|
47
48
|
transform: "rotate(".concat(percentage ? -85 : -90, "deg)")
|
|
48
49
|
}
|
|
49
50
|
}, percentage > 3.2 && /*#__PURE__*/React.createElement("circle", {
|
|
50
|
-
className: "ffe-chart-donut--
|
|
51
|
+
className: "ffe-chart-donut--frost",
|
|
51
52
|
fill: "none",
|
|
52
53
|
strokeWidth: "15",
|
|
53
54
|
strokeLinecap: "round",
|
|
@@ -62,29 +63,32 @@ function ChartDonut(_ref) {
|
|
|
62
63
|
className: "ffe-chart-donut__description"
|
|
63
64
|
}, /*#__PURE__*/React.createElement("div", {
|
|
64
65
|
className: "ffe-chart-donut__name ffe-strong-text"
|
|
65
|
-
}, name), /*#__PURE__*/React.createElement("div", {
|
|
66
|
+
}, name), firstLabel && lastLabel && /*#__PURE__*/React.createElement("div", {
|
|
66
67
|
className: "ffe-chart-donut__fractions"
|
|
67
68
|
}, /*#__PURE__*/React.createElement("div", {
|
|
68
|
-
className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--
|
|
69
|
+
className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--vann"
|
|
69
70
|
}, /*#__PURE__*/React.createElement("div", {
|
|
70
71
|
className: "ffe-chart-donut__amount ffe-strong-text"
|
|
71
72
|
}, "".concat(Number(100 - percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")), /*#__PURE__*/React.createElement("div", {
|
|
72
73
|
className: "ffe-chart-donut__type ffe-micro-text"
|
|
73
74
|
}, firstLabel)), /*#__PURE__*/React.createElement("div", {
|
|
74
|
-
className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--
|
|
75
|
+
className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--frost"
|
|
75
76
|
}, /*#__PURE__*/React.createElement("div", {
|
|
76
77
|
className: "ffe-chart-donut__amount ffe-strong-text"
|
|
77
78
|
}, "".concat(Number(percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")), /*#__PURE__*/React.createElement("div", {
|
|
78
79
|
className: "ffe-chart-donut__type ffe-micro-text"
|
|
79
|
-
}, lastLabel)))));
|
|
80
|
+
}, lastLabel))), !firstLabel && !lastLabel && label));
|
|
80
81
|
}
|
|
81
82
|
|
|
82
83
|
ChartDonut.propTypes = {
|
|
83
84
|
/** Short text labeling left value, like "empty", "said yes" etc */
|
|
84
|
-
firstLabel: string
|
|
85
|
+
firstLabel: string,
|
|
85
86
|
|
|
86
87
|
/** Short text labeling right value, like "full", "said no" etc */
|
|
87
|
-
lastLabel: string
|
|
88
|
+
lastLabel: string,
|
|
89
|
+
|
|
90
|
+
/** React node to be inserted directly under the chart's name, alternative to first/last label */
|
|
91
|
+
label: node,
|
|
88
92
|
|
|
89
93
|
/** Short text labeling the graph in total, like "percentage", "voted this year" etc */
|
|
90
94
|
name: string.isRequired,
|
|
@@ -4,12 +4,12 @@
|
|
|
4
4
|
text-align: left;
|
|
5
5
|
width: 200px;
|
|
6
6
|
|
|
7
|
-
&--
|
|
8
|
-
stroke: @ffe-
|
|
7
|
+
&--vann {
|
|
8
|
+
stroke: @ffe-farge-vann;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
&--
|
|
12
|
-
stroke: @ffe-
|
|
11
|
+
&--frost {
|
|
12
|
+
stroke: @ffe-farge-frost-70;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
&__circle {
|
|
@@ -36,8 +36,14 @@
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
&__name {
|
|
39
|
-
color: @ffe-
|
|
39
|
+
color: @ffe-farge-koksgraa;
|
|
40
40
|
text-align: center;
|
|
41
|
+
|
|
42
|
+
.native & {
|
|
43
|
+
@media (prefers-color-scheme: dark) {
|
|
44
|
+
color: @ffe-farge-graa;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
41
47
|
}
|
|
42
48
|
|
|
43
49
|
&__fractions {
|
|
@@ -47,8 +53,14 @@
|
|
|
47
53
|
|
|
48
54
|
&__fraction {
|
|
49
55
|
> .ffe-chart-donut__amount {
|
|
50
|
-
color: @ffe-
|
|
56
|
+
color: @ffe-farge-koksgraa;
|
|
51
57
|
text-align: center;
|
|
58
|
+
|
|
59
|
+
.native & {
|
|
60
|
+
@media (prefers-color-scheme: dark) {
|
|
61
|
+
color: @ffe-farge-graa;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
52
64
|
}
|
|
53
65
|
|
|
54
66
|
&:last-child {
|
|
@@ -57,7 +69,7 @@
|
|
|
57
69
|
}
|
|
58
70
|
|
|
59
71
|
> .ffe-chart-donut__amount {
|
|
60
|
-
border-left: 1px solid @ffe-
|
|
72
|
+
border-left: 1px solid @ffe-farge-graa;
|
|
61
73
|
padding-left: 20px;
|
|
62
74
|
}
|
|
63
75
|
}
|
package/lib/ChartDonut.js
CHANGED
|
@@ -19,7 +19,8 @@ function ChartDonut(_ref) {
|
|
|
19
19
|
var name = _ref.name,
|
|
20
20
|
percentage = _ref.percentage,
|
|
21
21
|
firstLabel = _ref.firstLabel,
|
|
22
|
-
lastLabel = _ref.lastLabel
|
|
22
|
+
lastLabel = _ref.lastLabel,
|
|
23
|
+
label = _ref.label;
|
|
23
24
|
var offset = CIRCUMFERENCE - CIRCUMFERENCE / 100 * percentage;
|
|
24
25
|
/*
|
|
25
26
|
The rendered circle consists of two half-circles with a gap between them.
|
|
@@ -40,7 +41,7 @@ function ChartDonut(_ref) {
|
|
|
40
41
|
transform: "scale(-1, 1) rotate(".concat(percentage ? 275 : -90, "deg)")
|
|
41
42
|
}
|
|
42
43
|
}, percentage < 95.7 && /*#__PURE__*/_react.default.createElement("circle", {
|
|
43
|
-
className: "ffe-chart-donut--
|
|
44
|
+
className: "ffe-chart-donut--vann",
|
|
44
45
|
fill: "none",
|
|
45
46
|
strokeWidth: "15",
|
|
46
47
|
strokeLinecap: "round",
|
|
@@ -58,7 +59,7 @@ function ChartDonut(_ref) {
|
|
|
58
59
|
transform: "rotate(".concat(percentage ? -85 : -90, "deg)")
|
|
59
60
|
}
|
|
60
61
|
}, percentage > 3.2 && /*#__PURE__*/_react.default.createElement("circle", {
|
|
61
|
-
className: "ffe-chart-donut--
|
|
62
|
+
className: "ffe-chart-donut--frost",
|
|
62
63
|
fill: "none",
|
|
63
64
|
strokeWidth: "15",
|
|
64
65
|
strokeLinecap: "round",
|
|
@@ -73,29 +74,32 @@ function ChartDonut(_ref) {
|
|
|
73
74
|
className: "ffe-chart-donut__description"
|
|
74
75
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
75
76
|
className: "ffe-chart-donut__name ffe-strong-text"
|
|
76
|
-
}, name), /*#__PURE__*/_react.default.createElement("div", {
|
|
77
|
+
}, name), firstLabel && lastLabel && /*#__PURE__*/_react.default.createElement("div", {
|
|
77
78
|
className: "ffe-chart-donut__fractions"
|
|
78
79
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
79
|
-
className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--
|
|
80
|
+
className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--vann"
|
|
80
81
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
81
82
|
className: "ffe-chart-donut__amount ffe-strong-text"
|
|
82
83
|
}, "".concat(Number(100 - percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")), /*#__PURE__*/_react.default.createElement("div", {
|
|
83
84
|
className: "ffe-chart-donut__type ffe-micro-text"
|
|
84
85
|
}, firstLabel)), /*#__PURE__*/_react.default.createElement("div", {
|
|
85
|
-
className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--
|
|
86
|
+
className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--frost"
|
|
86
87
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
87
88
|
className: "ffe-chart-donut__amount ffe-strong-text"
|
|
88
89
|
}, "".concat(Number(percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")), /*#__PURE__*/_react.default.createElement("div", {
|
|
89
90
|
className: "ffe-chart-donut__type ffe-micro-text"
|
|
90
|
-
}, lastLabel)))));
|
|
91
|
+
}, lastLabel))), !firstLabel && !lastLabel && label));
|
|
91
92
|
}
|
|
92
93
|
|
|
93
94
|
ChartDonut.propTypes = {
|
|
94
95
|
/** Short text labeling left value, like "empty", "said yes" etc */
|
|
95
|
-
firstLabel: _propTypes.string
|
|
96
|
+
firstLabel: _propTypes.string,
|
|
96
97
|
|
|
97
98
|
/** Short text labeling right value, like "full", "said no" etc */
|
|
98
|
-
lastLabel: _propTypes.string
|
|
99
|
+
lastLabel: _propTypes.string,
|
|
100
|
+
|
|
101
|
+
/** React node to be inserted directly under the chart's name, alternative to first/last label */
|
|
102
|
+
label: _propTypes.node,
|
|
99
103
|
|
|
100
104
|
/** Short text labeling the graph in total, like "percentage", "voted this year" etc */
|
|
101
105
|
name: _propTypes.string.isRequired,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-chart-donut-react",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.1",
|
|
4
4
|
"description": "Donut chart in SVG",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ffe"
|
|
@@ -20,11 +20,8 @@
|
|
|
20
20
|
"url": "ssh://git@github.com:SpareBank1/designsystem.git"
|
|
21
21
|
},
|
|
22
22
|
"scripts": {
|
|
23
|
-
"build": "
|
|
24
|
-
"
|
|
25
|
-
"build:es": "babel -d es/. --root-mode=upward --env-name=es --ignore=*.spec.js src/.",
|
|
26
|
-
"build:less": "copyfiles -f src/ffe-chart-donut.less lib/",
|
|
27
|
-
"lint": "eslint src/.",
|
|
23
|
+
"build": "ffe-buildtool babel",
|
|
24
|
+
"lint": "eslint src",
|
|
28
25
|
"test": "jest",
|
|
29
26
|
"test:watch": "jest --watch"
|
|
30
27
|
},
|
|
@@ -32,10 +29,10 @@
|
|
|
32
29
|
"setupTestFrameworkScriptFile": "../../test-setup.js"
|
|
33
30
|
},
|
|
34
31
|
"dependencies": {
|
|
35
|
-
"prop-types": "^15.
|
|
32
|
+
"prop-types": "^15.7.2"
|
|
36
33
|
},
|
|
37
34
|
"devDependencies": {
|
|
38
|
-
"
|
|
35
|
+
"@sb1/ffe-buildtool": "^0.2.0",
|
|
39
36
|
"enzyme": "^3.7.0",
|
|
40
37
|
"enzyme-adapter-react-16": "^1.7.0",
|
|
41
38
|
"jest": "^26.0.0",
|
|
@@ -48,5 +45,5 @@
|
|
|
48
45
|
"publishConfig": {
|
|
49
46
|
"access": "public"
|
|
50
47
|
},
|
|
51
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "10669ef6d5ebf454feb4eddb9aa4ca7bc8f439dc"
|
|
52
49
|
}
|
package/CHANGELOG.md
DELETED
|
@@ -1,297 +0,0 @@
|
|
|
1
|
-
# Change Log
|
|
2
|
-
|
|
3
|
-
All notable changes to this project will be documented in this file.
|
|
4
|
-
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
|
-
|
|
6
|
-
## [3.0.5](https://github.com/SpareBank1/designsystem/compare/@sb1/ffe-chart-donut-react@3.0.4...@sb1/ffe-chart-donut-react@3.0.5) (2021-03-15)
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
### Bug Fixes
|
|
10
|
-
|
|
11
|
-
* **ffe-chart-donut-react:** broadens version of peer dependencies ([ea9388a](https://github.com/SpareBank1/designsystem/commit/ea9388a2616e6c5ca226a7a84362697073083fa5))
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
## [3.0.4](https://github.com/SpareBank1/designsystem/compare/@sb1/ffe-chart-donut-react@3.0.3...@sb1/ffe-chart-donut-react@3.0.4) (2021-02-03)
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
### Bug Fixes
|
|
21
|
-
|
|
22
|
-
* packages/ffe-chart-donut-react/package.json to reduce vulnerabilities ([595d956](https://github.com/SpareBank1/designsystem/commit/595d9565477c791c92ad0e389f792dd38f8bcded))
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
## [3.0.3](https://github.com/SpareBank1/designsystem/compare/@sb1/ffe-chart-donut-react@3.0.2...@sb1/ffe-chart-donut-react@3.0.3) (2021-02-02)
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
### Bug Fixes
|
|
32
|
-
|
|
33
|
-
* **ffe-chart-donut-react:** reduce vulnerabilities ([97e5ee0](https://github.com/SpareBank1/designsystem/commit/97e5ee05602952bc8ee58e45e5b048c2f8e118c7))
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
## [3.0.2](https://github.com/SpareBank1/designsystem/compare/@sb1/ffe-chart-donut-react@3.0.1...@sb1/ffe-chart-donut-react@3.0.2) (2020-08-05)
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
### Bug Fixes
|
|
43
|
-
|
|
44
|
-
* **ffe-chart-donut-react:** accessible text color in chart name ([35989f2](https://github.com/SpareBank1/designsystem/commit/35989f29e249a9b319dd3768ec5f0370a9c71c1d))
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
## [3.0.1](https://github.com/SpareBank1/designsystem/compare/@sb1/ffe-chart-donut-react@3.0.0...@sb1/ffe-chart-donut-react@3.0.1) (2019-10-21)
|
|
51
|
-
|
|
52
|
-
### Bug Fixes
|
|
53
|
-
|
|
54
|
-
- **ffe-chart-donut-react:** Remove screen type from media queries, see [#719](https://github.com/SpareBank1/designsystem/issues/719) ([1bf3c5b](https://github.com/SpareBank1/designsystem/commit/1bf3c5bc37d8aca7ea9c459eaccf23c88d80db1b))
|
|
55
|
-
|
|
56
|
-
# [3.0.0](https://github.com/SpareBank1/designsystem/compare/@sb1/ffe-chart-donut-react@2.0.9...@sb1/ffe-chart-donut-react@3.0.0) (2019-08-27)
|
|
57
|
-
|
|
58
|
-
### chore
|
|
59
|
-
|
|
60
|
-
- bump React to 16.9 to allow for using hooks etc ([e3901f1](https://github.com/SpareBank1/designsystem/commit/e3901f1))
|
|
61
|
-
|
|
62
|
-
### BREAKING CHANGES
|
|
63
|
-
|
|
64
|
-
- peerDep of React is raised to 16.9. While this in itself
|
|
65
|
-
isn't a breaking change, it allows for the use of hooks in later releases.
|
|
66
|
-
Such changes would just be a minor version, or even a patch, but without
|
|
67
|
-
this major version bump it would result in a runtime error for consumers.
|
|
68
|
-
|
|
69
|
-
## [2.0.9](https://github.com/SpareBank1/designsystem/compare/@sb1/ffe-chart-donut-react@2.0.8...@sb1/ffe-chart-donut-react@2.0.9) (2018-12-11)
|
|
70
|
-
|
|
71
|
-
### Bug Fixes
|
|
72
|
-
|
|
73
|
-
- Build tree shakeable packages ([fb4a9ea](https://github.com/SpareBank1/designsystem/commit/fb4a9ea))
|
|
74
|
-
|
|
75
|
-
## [2.0.8](https://github.com/SpareBank1/designsystem/compare/@sb1/ffe-chart-donut-react@2.0.7...@sb1/ffe-chart-donut-react@2.0.8) (2018-11-26)
|
|
76
|
-
|
|
77
|
-
**Note:** Version bump only for package @sb1/ffe-chart-donut-react
|
|
78
|
-
|
|
79
|
-
<a name="2.0.7"></a>
|
|
80
|
-
|
|
81
|
-
## [2.0.7](https://github.com/SpareBank1/designsystem/compare/@sb1/ffe-chart-donut-react@2.0.6...@sb1/ffe-chart-donut-react@2.0.7) (2018-10-02)
|
|
82
|
-
|
|
83
|
-
### Bug Fixes
|
|
84
|
-
|
|
85
|
-
- **ffe-chart-donut-react:** include .less file in lib/ root ([763ffa4](https://github.com/SpareBank1/designsystem/commit/763ffa4)), closes [#441](https://github.com/SpareBank1/designsystem/issues/441)
|
|
86
|
-
|
|
87
|
-
<a name="2.0.6"></a>
|
|
88
|
-
|
|
89
|
-
## [2.0.6](https://github.com/SpareBank1/designsystem/compare/@sb1/ffe-chart-donut-react@2.0.5...@sb1/ffe-chart-donut-react@2.0.6) (2018-09-24)
|
|
90
|
-
|
|
91
|
-
### Bug Fixes
|
|
92
|
-
|
|
93
|
-
- Removed usage of linux/unix command cp and use npm package copyfiles instead to make the copy, platform independent. ([07f5693](https://github.com/SpareBank1/designsystem/commit/07f5693))
|
|
94
|
-
|
|
95
|
-
<a name="2.0.5"></a>
|
|
96
|
-
|
|
97
|
-
## [2.0.5](https://github.com/SpareBank1/designsystem/compare/@sb1/ffe-chart-donut-react@2.0.4...@sb1/ffe-chart-donut-react@2.0.5) (2018-08-09)
|
|
98
|
-
|
|
99
|
-
**Note:** Version bump only for package @sb1/ffe-chart-donut-react
|
|
100
|
-
|
|
101
|
-
<a name="2.0.4"></a>
|
|
102
|
-
|
|
103
|
-
## [2.0.4](https://github.com/SpareBank1/designsystem/compare/@sb1/ffe-chart-donut-react@2.0.3...@sb1/ffe-chart-donut-react@2.0.4) (2018-03-27)
|
|
104
|
-
|
|
105
|
-
**Note:** Version bump only for package @sb1/ffe-chart-donut-react
|
|
106
|
-
|
|
107
|
-
<a name="2.0.3"></a>
|
|
108
|
-
|
|
109
|
-
## [2.0.3](https://github.com/SpareBank1/designsystem/compare/@sb1/ffe-chart-donut-react@2.0.2...@sb1/ffe-chart-donut-react@2.0.3) (2018-03-22)
|
|
110
|
-
|
|
111
|
-
### Bug Fixes
|
|
112
|
-
|
|
113
|
-
- **ffe-chart-donut-react:** Fix description position on md+ screens ([31c6026](https://github.com/SpareBank1/designsystem/commit/31c6026))
|
|
114
|
-
|
|
115
|
-
<a name="2.0.2"></a>
|
|
116
|
-
|
|
117
|
-
## [2.0.2](https://github.com/SpareBank1/designsystem/compare/@sb1/ffe-chart-donut-react@2.0.0...@sb1/ffe-chart-donut-react@2.0.2) (2018-03-07)
|
|
118
|
-
|
|
119
|
-
**Note:** Version bump only for package @sb1/ffe-chart-donut-react
|
|
120
|
-
|
|
121
|
-
<a name="2.0.1"></a>
|
|
122
|
-
|
|
123
|
-
## [2.0.1](https://github.com/SpareBank1/designsystem/compare/@sb1/ffe-chart-donut-react@2.0.0...@sb1/ffe-chart-donut-react@2.0.1) (2018-03-02)
|
|
124
|
-
|
|
125
|
-
**Note:** Version bump only for package @sb1/ffe-chart-donut-react
|
|
126
|
-
|
|
127
|
-
<a name="2.0.0"></a>
|
|
128
|
-
|
|
129
|
-
# 2.0.0 (2018-02-25)
|
|
130
|
-
|
|
131
|
-
### Bug Fixes
|
|
132
|
-
|
|
133
|
-
- remove all references to internal system ([ff22340](https://github.com/SpareBank1/designsystem/commit/ff22340))
|
|
134
|
-
|
|
135
|
-
### Chores
|
|
136
|
-
|
|
137
|
-
- add [@sb1](https://github.com/sb1)/ scope to all packages ([37efbb4](https://github.com/SpareBank1/designsystem/commit/37efbb4))
|
|
138
|
-
|
|
139
|
-
### BREAKING CHANGES
|
|
140
|
-
|
|
141
|
-
- All packages have been renamed to add the @sb1 scope.
|
|
142
|
-
|
|
143
|
-
See links [1] and [2] to read more about package scopes.
|
|
144
|
-
|
|
145
|
-
Unfortunately this requires you update both your dependencies in
|
|
146
|
-
`package.json` and all `import` or `require` statements in your code.
|
|
147
|
-
Also, you unfortunately have to upgrade all FFE packages at once due to
|
|
148
|
-
dependency between packages. If you are on the latest version prior to
|
|
149
|
-
this breaking change the upgrade should be a matter of updating
|
|
150
|
-
`package.json` with new package names and versions, and updating your
|
|
151
|
-
imports.
|
|
152
|
-
|
|
153
|
-
To help find the proper package versions you can either browse to the
|
|
154
|
-
packages you need or check out the list of Git tags either on
|
|
155
|
-
Github [3] or by cloning the repository and running the `git tag`
|
|
156
|
-
command. All package versions get a tag in the format
|
|
157
|
-
_package@version_.
|
|
158
|
-
|
|
159
|
-
Update your `package.json` with the latest package version and add the
|
|
160
|
-
@sb1 scope to the package name:
|
|
161
|
-
|
|
162
|
-
```diff
|
|
163
|
-
- "ffe-core": "11.0.2",
|
|
164
|
-
+ "@sb1/ffe-core": "11.0.2",
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
Scoped packages all get put in a subdirectory in `node_modules/`. In our
|
|
168
|
-
case packages will be put in the `node_modules/@sb1/` directory. If your
|
|
169
|
-
build depends on file paths (for instance for copying fonts) you need to
|
|
170
|
-
update that path to include the scope.
|
|
171
|
-
|
|
172
|
-
The directory structure also means you have to update your imports, both
|
|
173
|
-
in Less and in JavaScript.
|
|
174
|
-
|
|
175
|
-
Using `less-plugin-npm-import`:
|
|
176
|
-
|
|
177
|
-
```diff
|
|
178
|
-
- @import 'npm://ffe-core/less/ffe';
|
|
179
|
-
+ @import 'npm://@sb1/ffe-core/less/ffe';
|
|
180
|
-
```
|
|
181
|
-
|
|
182
|
-
Using Webpack:
|
|
183
|
-
|
|
184
|
-
```diff
|
|
185
|
-
- @import '~ffe-core/less/ffe';
|
|
186
|
-
+ @import '~@sb1/ffe-core/less/ffe';
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
Using plain old paths:
|
|
190
|
-
|
|
191
|
-
```diff
|
|
192
|
-
- @import '../path/to/node_modules/ffe-core/less/ffe';
|
|
193
|
-
+ @import '../path/to/node_modules/@sb1/ffe-core/less/ffe';
|
|
194
|
-
```
|
|
195
|
-
|
|
196
|
-
JavaScript `import`:
|
|
197
|
-
|
|
198
|
-
```diff
|
|
199
|
-
- import { ActionButton } from 'ffe-buttons-react';
|
|
200
|
-
+ import { ActionButton } from '@sb1/ffe-buttons-react';
|
|
201
|
-
```
|
|
202
|
-
|
|
203
|
-
JavaScript `require`:
|
|
204
|
-
|
|
205
|
-
```diff
|
|
206
|
-
- const { ActionButton } = require('ffe-buttons-react').default;
|
|
207
|
-
+ const { ActionButton } = require('@sb1/ffe-buttons-react').default;
|
|
208
|
-
```
|
|
209
|
-
|
|
210
|
-
[1]: https://docs.npmjs.com/misc/scope
|
|
211
|
-
[2]: https://docs.npmjs.com/getting-started/scoped-packages
|
|
212
|
-
[3]: https://github.com/sparebank1/designsystem/tags
|
|
213
|
-
|
|
214
|
-
<a name="1.0.14"></a>
|
|
215
|
-
|
|
216
|
-
## [1.0.14](https://github.com/SpareBank1/designsystem/compare/ffe-chart-donut-react@1.0.13...ffe-chart-donut-react@1.0.14) (2018-02-23)
|
|
217
|
-
|
|
218
|
-
**Note:** Version bump only for package ffe-chart-donut-react
|
|
219
|
-
|
|
220
|
-
<a name="1.0.13"></a>
|
|
221
|
-
|
|
222
|
-
## [1.0.13](https://github.com/SpareBank1/designsystem/compare/ffe-chart-donut-react@1.0.12...ffe-chart-donut-react@1.0.13) (2018-02-22)
|
|
223
|
-
|
|
224
|
-
**Note:** Version bump only for package ffe-chart-donut-react
|
|
225
|
-
|
|
226
|
-
<a name="1.0.12"></a>
|
|
227
|
-
|
|
228
|
-
## [1.0.12](https://github.com/SpareBank1/designsystem/compare/ffe-chart-donut-react@1.0.11...ffe-chart-donut-react@1.0.12) (2018-02-20)
|
|
229
|
-
|
|
230
|
-
**Note:** Version bump only for package ffe-chart-donut-react
|
|
231
|
-
|
|
232
|
-
<a name="1.0.11"></a>
|
|
233
|
-
|
|
234
|
-
## [1.0.11](https://github.com/SpareBank1/designsystem/compare/ffe-chart-donut-react@1.0.10...ffe-chart-donut-react@1.0.11) (2018-02-15)
|
|
235
|
-
|
|
236
|
-
**Note:** Version bump only for package ffe-chart-donut-react
|
|
237
|
-
|
|
238
|
-
<a name="1.0.10"></a>
|
|
239
|
-
|
|
240
|
-
## [1.0.10](https://github.com/SpareBank1/designsystem/compare/ffe-chart-donut-react@1.0.9...ffe-chart-donut-react@1.0.10) (2018-02-01)
|
|
241
|
-
|
|
242
|
-
**Note:** Version bump only for package ffe-chart-donut-react
|
|
243
|
-
|
|
244
|
-
<a name="1.0.9"></a>
|
|
245
|
-
|
|
246
|
-
## [1.0.9](https://github.com/SpareBank1/designsystem/compare/ffe-chart-donut-react@1.0.8...ffe-chart-donut-react@1.0.9) (2018-01-22)
|
|
247
|
-
|
|
248
|
-
**Note:** Version bump only for package ffe-chart-donut-react
|
|
249
|
-
|
|
250
|
-
<a name="1.0.8"></a>
|
|
251
|
-
|
|
252
|
-
## [1.0.8](https://github.com/SpareBank1/designsystem/compare/ffe-chart-donut-react@1.0.7...ffe-chart-donut-react@1.0.8) (2018-01-19)
|
|
253
|
-
|
|
254
|
-
**Note:** Version bump only for package ffe-chart-donut-react
|
|
255
|
-
|
|
256
|
-
<a name="1.0.7"></a>
|
|
257
|
-
|
|
258
|
-
## [1.0.7](https://github.com/SpareBank1/designsystem/compare/ffe-chart-donut-react@1.0.6...ffe-chart-donut-react@1.0.7) (2018-01-19)
|
|
259
|
-
|
|
260
|
-
**Note:** Version bump only for package ffe-chart-donut-react
|
|
261
|
-
|
|
262
|
-
<a name="1.0.6"></a>
|
|
263
|
-
|
|
264
|
-
## [1.0.6](https://github.com/SpareBank1/designsystem/compare/ffe-chart-donut-react@1.0.5...ffe-chart-donut-react@1.0.6) (2018-01-10)
|
|
265
|
-
|
|
266
|
-
**Note:** Version bump only for package ffe-chart-donut-react
|
|
267
|
-
|
|
268
|
-
<a name="1.0.5"></a>
|
|
269
|
-
|
|
270
|
-
## [1.0.5](https://github.com/SpareBank1/designsystem/compare/ffe-chart-donut-react@1.0.4...ffe-chart-donut-react@1.0.5) (2018-01-09)
|
|
271
|
-
|
|
272
|
-
**Note:** Version bump only for package ffe-chart-donut-react
|
|
273
|
-
|
|
274
|
-
<a name="1.0.4"></a>
|
|
275
|
-
|
|
276
|
-
## [1.0.4](https://github.com/SpareBank1/designsystem/compare/ffe-chart-donut-react@1.0.3...ffe-chart-donut-react@1.0.4) (2018-01-05)
|
|
277
|
-
|
|
278
|
-
**Note:** Version bump only for package ffe-chart-donut-react
|
|
279
|
-
|
|
280
|
-
<a name="1.0.3"></a>
|
|
281
|
-
|
|
282
|
-
## 1.0.3 (2018-01-04)
|
|
283
|
-
|
|
284
|
-
**Note:** Version bump only for package ffe-chart-donut-react
|
|
285
|
-
|
|
286
|
-
## 1.0.2
|
|
287
|
-
|
|
288
|
-
- Added inline JSDoc comments for prop types
|
|
289
|
-
- Added support for React 16
|
|
290
|
-
|
|
291
|
-
## 1.0.1
|
|
292
|
-
|
|
293
|
-
- Use PropTypes from prop-types package
|
|
294
|
-
|
|
295
|
-
# 1.0.0
|
|
296
|
-
|
|
297
|
-
- First release.
|
package/es/ChartDonut.spec.js
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { shallow } from 'enzyme';
|
|
5
|
-
import ChartDonut from '../src';
|
|
6
|
-
var defaultProps = {
|
|
7
|
-
firstLabel: 'Foo',
|
|
8
|
-
lastLabel: 'Bar',
|
|
9
|
-
name: 'Baz',
|
|
10
|
-
percentage: 42
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
var renderShallow = function renderShallow() {
|
|
14
|
-
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
15
|
-
return shallow( /*#__PURE__*/React.createElement(ChartDonut, _extends({}, defaultProps, props)));
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
describe('ChartDonut', function () {
|
|
19
|
-
it('renders two SVGs', function () {
|
|
20
|
-
var el = renderShallow();
|
|
21
|
-
expect(el.find('svg')).toHaveLength(2);
|
|
22
|
-
});
|
|
23
|
-
it('renders html for the name of the circle', function () {
|
|
24
|
-
var el = renderShallow();
|
|
25
|
-
expect(el.find('.ffe-chart-donut__name')).toHaveLength(1);
|
|
26
|
-
expect(el.find('.ffe-chart-donut__name').text()).toBe('Baz');
|
|
27
|
-
});
|
|
28
|
-
it('renders html for the labels and their percentages', function () {
|
|
29
|
-
var el = renderShallow();
|
|
30
|
-
expect(el.find('.ffe-chart-donut__type')).toHaveLength(2);
|
|
31
|
-
expect(el.find('.ffe-chart-donut__amount')).toHaveLength(2);
|
|
32
|
-
expect(el.find('.ffe-chart-donut__type').at(0).text()).toBe('Foo');
|
|
33
|
-
expect(el.find('.ffe-chart-donut__amount').at(0).text()).toMatch(/58/);
|
|
34
|
-
expect(el.find('.ffe-chart-donut__type').at(1).text()).toBe('Bar');
|
|
35
|
-
expect(el.find('.ffe-chart-donut__amount').at(1).text()).toMatch(/42/);
|
|
36
|
-
});
|
|
37
|
-
});
|
package/lib/ChartDonut.spec.js
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _react = _interopRequireDefault(require("react"));
|
|
4
|
-
|
|
5
|
-
var _enzyme = require("enzyme");
|
|
6
|
-
|
|
7
|
-
var _src = _interopRequireDefault(require("../src"));
|
|
8
|
-
|
|
9
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
-
|
|
11
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
12
|
-
|
|
13
|
-
var defaultProps = {
|
|
14
|
-
firstLabel: 'Foo',
|
|
15
|
-
lastLabel: 'Bar',
|
|
16
|
-
name: 'Baz',
|
|
17
|
-
percentage: 42
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
var renderShallow = function renderShallow() {
|
|
21
|
-
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
22
|
-
return (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_src.default, _extends({}, defaultProps, props)));
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
describe('ChartDonut', function () {
|
|
26
|
-
it('renders two SVGs', function () {
|
|
27
|
-
var el = renderShallow();
|
|
28
|
-
expect(el.find('svg')).toHaveLength(2);
|
|
29
|
-
});
|
|
30
|
-
it('renders html for the name of the circle', function () {
|
|
31
|
-
var el = renderShallow();
|
|
32
|
-
expect(el.find('.ffe-chart-donut__name')).toHaveLength(1);
|
|
33
|
-
expect(el.find('.ffe-chart-donut__name').text()).toBe('Baz');
|
|
34
|
-
});
|
|
35
|
-
it('renders html for the labels and their percentages', function () {
|
|
36
|
-
var el = renderShallow();
|
|
37
|
-
expect(el.find('.ffe-chart-donut__type')).toHaveLength(2);
|
|
38
|
-
expect(el.find('.ffe-chart-donut__amount')).toHaveLength(2);
|
|
39
|
-
expect(el.find('.ffe-chart-donut__type').at(0).text()).toBe('Foo');
|
|
40
|
-
expect(el.find('.ffe-chart-donut__amount').at(0).text()).toMatch(/58/);
|
|
41
|
-
expect(el.find('.ffe-chart-donut__type').at(1).text()).toBe('Bar');
|
|
42
|
-
expect(el.find('.ffe-chart-donut__amount').at(1).text()).toMatch(/42/);
|
|
43
|
-
});
|
|
44
|
-
});
|