@sb1/ffe-chart-donut-react 4.0.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 SpareBank 1
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,16 @@
+# @sb1/ffe-chart-donut-react
+
+## Install
+
+```bash
+npm install --save @sb1/ffe-chart-donut-react
+```
+
+## Usage
+
+```css
+@import 'path/to/node_modules/@sb1/ffe-chart-donut-react/lib/ffe-chart-donut';
+```
+
+Run Styleguidist from the repository root to see live examples and documentation,
+or see the markdown files next to the component code in `src/`.

package/es/ChartDonut.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import { node, number, string } from 'prop-types';
+var NON_BREAKING_SPACE = "\xA0";
+var RADIUS = 150;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+function ChartDonut(_ref) {
+  var name = _ref.name,
+      percentage = _ref.percentage,
+      firstLabel = _ref.firstLabel,
+      lastLabel = _ref.lastLabel,
+      label = _ref.label;
+  var offset = CIRCUMFERENCE - CIRCUMFERENCE / 100 * percentage;
+  /*
+      The rendered circle consists of two half-circles with a gap between them.
+      That means we have to rotate one of them to create this gap and we also have to
+      completely remove one of the circles once the other one grows so large that there is
+      not enough room to fit the other. The numbers used to rotate, adjust and hide
+      half-circles below come from visually inspecting the result at different percentages
+      and is not the result of any kind of complex math. If any aspect of this SVG is
+      changed, please verify that it looks right for the entire 0-100 percentage range.
+  */
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ffe-chart-donut"
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 360 360",
+    className: "ffe-chart-donut__circle",
+    style: {
+      transform: "scale(-1, 1) rotate(".concat(percentage ? 275 : -90, "deg)")
+    }
+  }, percentage < 95.7 && /*#__PURE__*/React.createElement("circle", {
+    className: "ffe-chart-donut--vann",
+    fill: "none",
+    strokeWidth: "15",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeMiterlimit: "10",
+    cx: "50%",
+    cy: "50%",
+    r: RADIUS,
+    strokeDasharray: CIRCUMFERENCE,
+    strokeDashoffset: CIRCUMFERENCE - offset + (percentage ? 22 : 0)
+  })), /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 360 360",
+    className: "ffe-chart-donut__circle",
+    style: {
+      transform: "rotate(".concat(percentage ? -85 : -90, "deg)")
+    }
+  }, percentage > 3.2 && /*#__PURE__*/React.createElement("circle", {
+    className: "ffe-chart-donut--frost",
+    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)
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "ffe-chart-donut__description"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ffe-chart-donut__name ffe-strong-text"
+  }, name), firstLabel && lastLabel && /*#__PURE__*/React.createElement("div", {
+    className: "ffe-chart-donut__fractions"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--vann"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ffe-chart-donut__amount ffe-strong-text"
+  }, "".concat(Number(100 - percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")), /*#__PURE__*/React.createElement("div", {
+    className: "ffe-chart-donut__type ffe-micro-text"
+  }, firstLabel)), /*#__PURE__*/React.createElement("div", {
+    className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--frost"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ffe-chart-donut__amount ffe-strong-text"
+  }, "".concat(Number(percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")), /*#__PURE__*/React.createElement("div", {
+    className: "ffe-chart-donut__type ffe-micro-text"
+  }, lastLabel))), !firstLabel && !lastLabel && label));
+}
+
+ChartDonut.propTypes = {
+  /** Short text labeling left value, like "empty", "said yes" etc */
+  firstLabel: string,
+
+  /** Short text labeling right value, like "full", "said no" etc */
+  lastLabel: string,
+
+  /** React node to be inserted directly under the chart's name, alternative to first/last label */
+  label: node,
+
+  /** Short text labeling the graph in total, like "percentage", "voted this year" etc */
+  name: string.isRequired,
+
+  /** The percentage for the right-most value */
+  percentage: number.isRequired
+};
+export default ChartDonut;

package/es/ChartDonut.spec.js

@@ -0,0 +1,37 @@
+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); }
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import ChartDonut from '../src';
+var defaultProps = {
+  firstLabel: 'Foo',
+  lastLabel: 'Bar',
+  name: 'Baz',
+  percentage: 42
+};
+
+var renderShallow = function renderShallow() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return shallow( /*#__PURE__*/React.createElement(ChartDonut, _extends({}, defaultProps, props)));
+};
+
+describe('ChartDonut', function () {
+  it('renders two SVGs', function () {
+    var el = renderShallow();
+    expect(el.find('svg')).toHaveLength(2);
+  });
+  it('renders html for the name of the circle', function () {
+    var el = renderShallow();
+    expect(el.find('.ffe-chart-donut__name')).toHaveLength(1);
+    expect(el.find('.ffe-chart-donut__name').text()).toBe('Baz');
+  });
+  it('renders html for the labels and their percentages', function () {
+    var el = renderShallow();
+    expect(el.find('.ffe-chart-donut__type')).toHaveLength(2);
+    expect(el.find('.ffe-chart-donut__amount')).toHaveLength(2);
+    expect(el.find('.ffe-chart-donut__type').at(0).text()).toBe('Foo');
+    expect(el.find('.ffe-chart-donut__amount').at(0).text()).toMatch(/58/);
+    expect(el.find('.ffe-chart-donut__type').at(1).text()).toBe('Bar');
+    expect(el.find('.ffe-chart-donut__amount').at(1).text()).toMatch(/42/);
+  });
+});

package/es/index.js

@@ -0,0 +1,2 @@
+import ChartDonut from './ChartDonut';
+export default ChartDonut;

package/lib/ChartDonut.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = require("prop-types");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var NON_BREAKING_SPACE = "\xA0";
+var RADIUS = 150;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+function ChartDonut(_ref) {
+  var name = _ref.name,
+      percentage = _ref.percentage,
+      firstLabel = _ref.firstLabel,
+      lastLabel = _ref.lastLabel,
+      label = _ref.label;
+  var offset = CIRCUMFERENCE - CIRCUMFERENCE / 100 * percentage;
+  /*
+      The rendered circle consists of two half-circles with a gap between them.
+      That means we have to rotate one of them to create this gap and we also have to
+      completely remove one of the circles once the other one grows so large that there is
+      not enough room to fit the other. The numbers used to rotate, adjust and hide
+      half-circles below come from visually inspecting the result at different percentages
+      and is not the result of any kind of complex math. If any aspect of this SVG is
+      changed, please verify that it looks right for the entire 0-100 percentage range.
+  */
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "ffe-chart-donut"
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 360 360",
+    className: "ffe-chart-donut__circle",
+    style: {
+      transform: "scale(-1, 1) rotate(".concat(percentage ? 275 : -90, "deg)")
+    }
+  }, percentage < 95.7 && /*#__PURE__*/_react.default.createElement("circle", {
+    className: "ffe-chart-donut--vann",
+    fill: "none",
+    strokeWidth: "15",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeMiterlimit: "10",
+    cx: "50%",
+    cy: "50%",
+    r: RADIUS,
+    strokeDasharray: CIRCUMFERENCE,
+    strokeDashoffset: CIRCUMFERENCE - offset + (percentage ? 22 : 0)
+  })), /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 360 360",
+    className: "ffe-chart-donut__circle",
+    style: {
+      transform: "rotate(".concat(percentage ? -85 : -90, "deg)")
+    }
+  }, percentage > 3.2 && /*#__PURE__*/_react.default.createElement("circle", {
+    className: "ffe-chart-donut--frost",
+    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)
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "ffe-chart-donut__description"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "ffe-chart-donut__name ffe-strong-text"
+  }, name), firstLabel && lastLabel && /*#__PURE__*/_react.default.createElement("div", {
+    className: "ffe-chart-donut__fractions"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--vann"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "ffe-chart-donut__amount ffe-strong-text"
+  }, "".concat(Number(100 - percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "ffe-chart-donut__type ffe-micro-text"
+  }, firstLabel)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "ffe-chart-donut__fraction ffe-chart-donut__fraction--frost"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "ffe-chart-donut__amount ffe-strong-text"
+  }, "".concat(Number(percentage).toFixed(0)).concat(NON_BREAKING_SPACE, "%")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "ffe-chart-donut__type ffe-micro-text"
+  }, lastLabel))), !firstLabel && !lastLabel && label));
+}
+
+ChartDonut.propTypes = {
+  /** Short text labeling left value, like "empty", "said yes" etc */
+  firstLabel: _propTypes.string,
+
+  /** Short text labeling right value, like "full", "said no" etc */
+  lastLabel: _propTypes.string,
+
+  /** React node to be inserted directly under the chart's name, alternative to first/last label */
+  label: _propTypes.node,
+
+  /** Short text labeling the graph in total, like "percentage", "voted this year" etc */
+  name: _propTypes.string.isRequired,
+
+  /** The percentage for the right-most value */
+  percentage: _propTypes.number.isRequired
+};
+var _default = ChartDonut;
+exports.default = _default;

package/lib/ChartDonut.spec.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _src = _interopRequireDefault(require("../src"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+var defaultProps = {
+  firstLabel: 'Foo',
+  lastLabel: 'Bar',
+  name: 'Baz',
+  percentage: 42
+};
+
+var renderShallow = function renderShallow() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_src.default, _extends({}, defaultProps, props)));
+};
+
+describe('ChartDonut', function () {
+  it('renders two SVGs', function () {
+    var el = renderShallow();
+    expect(el.find('svg')).toHaveLength(2);
+  });
+  it('renders html for the name of the circle', function () {
+    var el = renderShallow();
+    expect(el.find('.ffe-chart-donut__name')).toHaveLength(1);
+    expect(el.find('.ffe-chart-donut__name').text()).toBe('Baz');
+  });
+  it('renders html for the labels and their percentages', function () {
+    var el = renderShallow();
+    expect(el.find('.ffe-chart-donut__type')).toHaveLength(2);
+    expect(el.find('.ffe-chart-donut__amount')).toHaveLength(2);
+    expect(el.find('.ffe-chart-donut__type').at(0).text()).toBe('Foo');
+    expect(el.find('.ffe-chart-donut__amount').at(0).text()).toMatch(/58/);
+    expect(el.find('.ffe-chart-donut__type').at(1).text()).toBe('Bar');
+    expect(el.find('.ffe-chart-donut__amount').at(1).text()).toMatch(/42/);
+  });
+});

package/lib/ffe-chart-donut.less

@@ -0,0 +1,77 @@
+.ffe-chart-donut {
+    height: 200px;
+    position: relative;
+    text-align: left;
+    width: 200px;
+
+    &--vann {
+        stroke: @ffe-farge-vann;
+    }
+
+    &--frost {
+        stroke: @ffe-farge-frost-70;
+    }
+
+    &__circle {
+        height: 100%;
+        margin: 0 auto;
+        position: absolute;
+        width: 100%;
+
+        @media (min-width: @breakpoint-md) {
+            margin: inherit;
+            width: 200px;
+        }
+    }
+
+    &__description {
+        left: calc(~'50% - 75px');
+        position: absolute;
+        top: 60px;
+        width: 150px;
+
+        @media (min-width: @breakpoint-md) {
+            left: 25px;
+        }
+    }
+
+    &__name {
+        color: @ffe-farge-koksgraa;
+        text-align: center;
+
+        .native & {
+            @media (prefers-color-scheme: dark) {
+                color: @ffe-farge-graa;
+            }
+        }
+    }
+
+    &__fractions {
+        display: flex;
+        justify-content: space-around;
+    }
+
+    &__fraction {
+        > .ffe-chart-donut__amount {
+            color: @ffe-farge-koksgraa;
+            text-align: center;
+
+            .native & {
+                @media (prefers-color-scheme: dark) {
+                    color: @ffe-farge-graa;
+                }
+            }
+        }
+
+        &:last-child {
+            > .ffe-chart-donut__type {
+                padding-left: 20px;
+            }
+
+            > .ffe-chart-donut__amount {
+                border-left: 1px solid @ffe-farge-graa;
+                padding-left: 20px;
+            }
+        }
+    }
+}

package/lib/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _ChartDonut = _interopRequireDefault(require("./ChartDonut"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _ChartDonut.default;
+exports.default = _default;

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@sb1/ffe-chart-donut-react",
+  "version": "4.0.0",
+  "description": "Donut chart in SVG",
+  "keywords": [
+    "ffe"
+  ],
+  "license": "MIT",
+  "author": "SpareBank 1",
+  "files": [
+    "lib",
+    "es",
+    "less"
+  ],
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@github.com:SpareBank1/designsystem.git"
+  },
+  "scripts": {
+    "build": "npm run build:cjs && npm run build:es && npm run build:less",
+    "build:cjs": "babel -d lib/. --root-mode=upward  --env-name=cjs --ignore=*.spec.js src/.",
+    "build:es": "babel -d es/. --root-mode=upward --env-name=es --ignore=*.spec.js src/.",
+    "build:less": "copyfiles -f src/ffe-chart-donut.less lib/",
+    "lint": "eslint src/.",
+    "test": "jest",
+    "test:watch": "jest --watch"
+  },
+  "jest": {
+    "setupTestFrameworkScriptFile": "../../test-setup.js"
+  },
+  "dependencies": {
+    "prop-types": "^15.6.0"
+  },
+  "devDependencies": {
+    "copyfiles": "^2.1.0",
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-16": "^1.7.0",
+    "jest": "^26.0.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "fae3e64f7a01bc033be2edbf20cf4803556c5fd6"
+}