@sb1/ffe-chart-donut-react 100.12.3 → 101.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 (4) hide show
  1. package/css/ffe-chart-donut.css +4 -12
  2. package/es/ChartDonut.js +9 -10
  3. package/lib/ChartDonut.js +10 -11
  4. package/package.json +4 -4
package/css/ffe-chart-donut.css CHANGED
@@ -1,11 +1,8 @@
1
1
  .ffe-chart-donut {
2
- display: -ms-grid;
3
2
  display: grid;
4
3
  width: fit-content;
5
- -ms-grid-columns: auto;
6
- grid-template-columns: auto;
7
- -ms-grid-rows: auto;
8
- grid-template-rows: auto;
4
+ grid-template-columns: auto;
5
+ grid-template-rows: auto;
9
6
  place-items: center;
10
7
  position: relative;
11
8
  text-align: left;
@@ -33,25 +30,20 @@
33
30
  text-align: center;
34
31
  }
35
32
  .ffe-chart-donut__fractions {
36
- display: -ms-grid;
37
33
  display: grid;
38
- -ms-grid-columns: auto 1px auto;
39
- grid-template-columns: auto 1px auto;
40
- -ms-grid-rows: auto auto;
41
- grid-template-rows: auto auto;
34
+ grid-template-columns: auto 1px auto;
35
+ grid-template-rows: auto auto;
42
36
  grid-column-gap: var(--ffe-spacing-xs);
43
37
  }
44
38
  .ffe-chart-donut__fractions::after {
45
39
  grid-column: 2 / 3;
46
40
  grid-row: 1 / 2;
47
- display: -ms-flexbox;
48
41
  display: flex;
49
42
  background: var(--ffe-color-border-primary-subtle);
50
43
  height: 1lh;
51
44
  content: '';
52
45
  }
53
46
  .ffe-chart-donut__fraction {
54
- display: -ms-grid;
55
47
  display: grid;
56
48
  place-items: center;
57
49
  }
package/es/ChartDonut.js CHANGED
@@ -1,10 +1,9 @@
1
1
  import React from 'react';
2
- var NON_BREAKING_SPACE = '\u00A0';
3
- var RADIUS = 150;
4
- var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
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;
2
+ const NON_BREAKING_SPACE = '\u00A0';
3
+ const RADIUS = 150;
4
+ const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
5
+ export const ChartDonut = ({ name, percentage, firstLabel, lastLabel, label, }) => {
6
+ const offset = CIRCUMFERENCE - (CIRCUMFERENCE / 100) * percentage;
8
7
  /*
9
8
  The rendered circle consists of two half-circles with a gap between them.
10
9
  That means we have to rotate one of them to create this gap and we also have to
@@ -16,19 +15,19 @@ export var ChartDonut = function (_a) {
16
15
  */
17
16
  return (React.createElement("div", { className: "ffe-chart-donut" },
18
17
  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)"),
18
+ transform: `scale(-1, 1) rotate(${percentage ? 275 : -90}deg)`,
20
19
  } }, 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
20
  React.createElement("svg", { viewBox: "0 0 360 360", className: "ffe-chart-donut__circle", style: {
22
- transform: "rotate(".concat(percentage ? -85 : -90, "deg)"),
21
+ transform: `rotate(${percentage ? -85 : -90}deg)`,
23
22
  } }, 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
23
  React.createElement("div", { className: "ffe-chart-donut__description" },
25
24
  React.createElement("div", { className: "ffe-chart-donut__name ffe-strong-text" }, name),
26
25
  firstLabel && lastLabel && (React.createElement("div", { className: "ffe-chart-donut__fractions" },
27
26
  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, "%")),
27
+ React.createElement("div", { className: "ffe-chart-donut__amount ffe-strong-text" }, `${Number(100 - percentage).toFixed(0)}${NON_BREAKING_SPACE}%`),
29
28
  React.createElement("div", { className: "ffe-chart-donut__type ffe-micro-text" }, firstLabel)),
30
29
  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, "%")),
30
+ React.createElement("div", { className: "ffe-chart-donut__amount ffe-strong-text" }, `${Number(percentage).toFixed(0)}${NON_BREAKING_SPACE}%`),
32
31
  React.createElement("div", { className: "ffe-chart-donut__type ffe-micro-text" }, lastLabel)))),
33
32
  !firstLabel && !lastLabel && label)));
34
33
  };
package/lib/ChartDonut.js CHANGED
@@ -4,13 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.ChartDonut = void 0;
7
- var react_1 = __importDefault(require("react"));
8
- var NON_BREAKING_SPACE = '\u00A0';
9
- var RADIUS = 150;
10
- var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
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;
7
+ const react_1 = __importDefault(require("react"));
8
+ const NON_BREAKING_SPACE = '\u00A0';
9
+ const RADIUS = 150;
10
+ const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
11
+ const ChartDonut = ({ name, percentage, firstLabel, lastLabel, label, }) => {
12
+ const offset = CIRCUMFERENCE - (CIRCUMFERENCE / 100) * percentage;
14
13
  /*
15
14
  The rendered circle consists of two half-circles with a gap between them.
16
15
  That means we have to rotate one of them to create this gap and we also have to
@@ -22,19 +21,19 @@ var ChartDonut = function (_a) {
22
21
  */
23
22
  return (react_1.default.createElement("div", { className: "ffe-chart-donut" },
24
23
  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)"),
24
+ transform: `scale(-1, 1) rotate(${percentage ? 275 : -90}deg)`,
26
25
  } }, 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
26
  react_1.default.createElement("svg", { viewBox: "0 0 360 360", className: "ffe-chart-donut__circle", style: {
28
- transform: "rotate(".concat(percentage ? -85 : -90, "deg)"),
27
+ transform: `rotate(${percentage ? -85 : -90}deg)`,
29
28
  } }, 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
29
  react_1.default.createElement("div", { className: "ffe-chart-donut__description" },
31
30
  react_1.default.createElement("div", { className: "ffe-chart-donut__name ffe-strong-text" }, name),
32
31
  firstLabel && lastLabel && (react_1.default.createElement("div", { className: "ffe-chart-donut__fractions" },
33
32
  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, "%")),
33
+ react_1.default.createElement("div", { className: "ffe-chart-donut__amount ffe-strong-text" }, `${Number(100 - percentage).toFixed(0)}${NON_BREAKING_SPACE}%`),
35
34
  react_1.default.createElement("div", { className: "ffe-chart-donut__type ffe-micro-text" }, firstLabel)),
36
35
  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, "%")),
36
+ react_1.default.createElement("div", { className: "ffe-chart-donut__amount ffe-strong-text" }, `${Number(percentage).toFixed(0)}${NON_BREAKING_SPACE}%`),
38
37
  react_1.default.createElement("div", { className: "ffe-chart-donut__type ffe-micro-text" }, lastLabel)))),
39
38
  !firstLabel && !lastLabel && label)));
40
39
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-chart-donut-react",
3
- "version": "100.12.3",
3
+ "version": "101.0.0",
4
4
  "description": "Donut chart in SVG",
5
5
  "keywords": [
6
6
  "ffe"
@@ -28,10 +28,10 @@
28
28
  "test:watch": "ffe-buildtool jest --watch"
29
29
  },
30
30
  "dependencies": {
31
- "@sb1/ffe-core": "^100.12.3"
31
+ "@sb1/ffe-core": "^101.0.0"
32
32
  },
33
33
  "devDependencies": {
34
- "@sb1/ffe-buildtool": "^100.12.3",
34
+ "@sb1/ffe-buildtool": "^101.0.0",
35
35
  "react": "^18.2.0",
36
36
  "react-dom": "^18.2.0"
37
37
  },
@@ -41,5 +41,5 @@
41
41
  "publishConfig": {
42
42
  "access": "public"
43
43
  },
44
- "gitHead": "c250edc3d20e5ed115c5c5951495d700e96a3be3"
44
+ "gitHead": "7714019dbb9001551cb5d1c262c58afd609d4fb0"
45
45
  }