@canonical/react-components 1.5.0 → 1.6.0

package/dist/components/DoughnutChart/DoughnutChart.d.ts

@@ -0,0 +1,58 @@
+import { FC } from "react";
+import "./DoughnutChart.scss";
+export type Segment = {
+    /**
+     * The colour of the segment.
+     */
+    color: string;
+    /**
+     * The segment tooltip.
+     */
+    tooltip?: string;
+    /**
+     * The segment length.
+     */
+    value: number;
+};
+export type Props = {
+    /**
+     * The label in the centre of the doughnut.
+     */
+    label?: string;
+    /**
+     * An optional class name applied to the label.
+     */
+    labelClassname?: string;
+    /**
+     * An optional class name applied to the wrapping element.
+     */
+    className?: string;
+    /**
+     * The width of the segments when hovered.
+     */
+    segmentHoverWidth: number;
+    /**
+     * The width of the segments.
+     */
+    segmentThickness: number;
+    /**
+     * The doughnut segments.
+     */
+    segments: Segment[];
+    /**
+     * The size of the doughnut.
+     */
+    size: number;
+    /**
+     *  ID associated to the specific instance of a Chart.
+     */
+    chartID: string;
+};
+export declare enum TestIds {
+    Label = "label",
+    Segment = "segment",
+    Chart = "chart",
+    Section = "Section"
+}
+declare const DoughnutChart: FC<Props>;
+export default DoughnutChart;

package/dist/components/DoughnutChart/DoughnutChart.js

@@ -0,0 +1,163 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TestIds = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+require("./DoughnutChart.scss");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+let TestIds = exports.TestIds = /*#__PURE__*/function (TestIds) {
+  TestIds["Label"] = "label";
+  TestIds["Segment"] = "segment";
+  TestIds["Chart"] = "chart";
+  TestIds["Section"] = "Section";
+  return TestIds;
+}({});
+const DoughnutChart = _ref => {
+  let {
+    className,
+    label,
+    labelClassname,
+    segmentHoverWidth,
+    segmentThickness,
+    segments,
+    size,
+    chartID
+  } = _ref;
+  const [tooltipMessage, setTooltipMessage] = (0, _react.useState)(null);
+  const id = (0, _react.useRef)("doughnut-chart-".concat(chartID));
+  const hoverIncrease = segmentHoverWidth - segmentThickness;
+  const adjustedHoverWidth = segmentHoverWidth + hoverIncrease;
+  // The canvas needs enough space so that the hover state does not get cut off.
+  const canvasSize = size + adjustedHoverWidth - segmentThickness;
+  const diameter = size - segmentThickness;
+  const radius = diameter / 2;
+  const circumference = Math.round(diameter * Math.PI);
+  // Calculate the total value of all segments.
+  const total = segments.reduce((totalValue, segment) => totalValue += segment.value, 0);
+  let accumulatedLength = 0;
+  const segmentNodes = segments.map((_ref2, i) => {
+    let {
+      color,
+      tooltip,
+      value
+    } = _ref2;
+    // The start position is the value of all previous segments.
+    const startPosition = accumulatedLength;
+    // The length of the segment (as a portion of the doughnut circumference)
+    const segmentLength = value / total * circumference;
+    // The space left until the end of the circle.
+    const remainingSpace = circumference - (segmentLength + startPosition);
+    // Add this segment length to the running tally.
+    accumulatedLength += segmentLength;
+    return /*#__PURE__*/_react.default.createElement("circle", {
+      className: "doughnut-chart__segment",
+      cx: radius - segmentThickness / 2 - hoverIncrease,
+      cy: radius + segmentThickness / 2 + hoverIncrease,
+      "data-testid": TestIds.Segment,
+      key: i,
+      tabIndex: 0,
+      "aria-label": tooltip ? "".concat(tooltip, ": ").concat(value) : "".concat(value),
+      onMouseOut: tooltip ? () => {
+        // Hide the tooltip.
+        setTooltipMessage(null);
+      } : undefined,
+      onMouseOver: tooltip ? () => {
+        setTooltipMessage(tooltip);
+      } : undefined,
+      r: radius,
+      style: {
+        stroke: color,
+        strokeWidth: segmentThickness,
+        // The dash array used is:
+        // 1 - We want there to be a space before the first visible dash so
+        //     by setting this to 0 we can use the next dash for the space.
+        // 2 - This gap is the distance of all previous segments
+        //     so that the segment starts in the correct spot.
+        // 3 - A dash that is the length of the segment.
+        // 4 - A gap from the end of the segment to the start of the circle
+        //     so that the dash array doesn't repeat and be visible.
+        strokeDasharray: "0 ".concat(startPosition.toFixed(2), " ").concat(segmentLength.toFixed(2), " ").concat(remainingSpace.toFixed(2))
+      }
+      // Rotate the segment so that the segments start at the top of
+      // the chart.
+      ,
+      transform: "rotate(-90 ".concat(radius, ",").concat(radius, ")")
+    });
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("doughnut-chart", className),
+    style: {
+      maxWidth: "".concat(canvasSize, "px")
+    },
+    "data-testid": TestIds.Chart
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    className: "doughnut-chart__tooltip",
+    followMouse: true,
+    message: tooltipMessage,
+    position: "right"
+  }, /*#__PURE__*/_react.default.createElement("style", null, "#".concat(id.current, " .doughnut-chart__segment:hover {\n          stroke-width: ").concat(adjustedHoverWidth, " !important;\n        }")), /*#__PURE__*/_react.default.createElement("svg", {
+    className: "doughnut-chart__chart",
+    id: id.current,
+    viewBox: "0 0 ".concat(canvasSize, " ").concat(canvasSize),
+    "data-testid": TestIds.Section,
+    "aria-labelledby": "".concat(id.current, "-chart-title ").concat(id.current, "-chart-desc")
+  }, label && /*#__PURE__*/_react.default.createElement("title", {
+    id: "".concat(id.current, "-chart-title")
+  }, label), /*#__PURE__*/_react.default.createElement("desc", {
+    id: "".concat(id.current, "-chart-desc")
+  }, segments.map(segment => {
+    let description = "";
+    if (segment.tooltip) description += "".concat(segment.tooltip, ": ");
+    description += segment.value;
+    return description;
+  }).join(",")), /*#__PURE__*/_react.default.createElement("mask", {
+    id: "canvasMask"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    fill: "white",
+    height: canvasSize,
+    width: canvasSize,
+    x: "0",
+    y: "0"
+  }), /*#__PURE__*/_react.default.createElement("circle", {
+    cx: canvasSize / 2,
+    cy: canvasSize / 2,
+    fill: "black",
+    r: radius - segmentThickness / 2
+  })), /*#__PURE__*/_react.default.createElement("g", {
+    mask: "url(#canvasMask)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    fill: "transparent",
+    height: canvasSize,
+    width: canvasSize,
+    x: "0",
+    y: "0"
+  }), /*#__PURE__*/_react.default.createElement("g", null, segmentNodes)), label ? /*#__PURE__*/_react.default.createElement("text", {
+    x: radius + adjustedHoverWidth / 2,
+    y: radius + adjustedHoverWidth / 2
+  }, /*#__PURE__*/_react.default.createElement("tspan", {
+    className: (0, _classnames.default)("doughnut-chart__label", labelClassname),
+    "data-testid": TestIds.Label
+  }, label)) : null)));
+};
+DoughnutChart.propTypes = {
+  label: _propTypes.default.string,
+  labelClassname: _propTypes.default.string,
+  className: _propTypes.default.string,
+  segmentHoverWidth: _propTypes.default.number.isRequired,
+  segmentThickness: _propTypes.default.number.isRequired,
+  segments: _propTypes.default.arrayOf(_propTypes.default.shape({
+    color: _propTypes.default.string.isRequired,
+    tooltip: _propTypes.default.string,
+    value: _propTypes.default.number.isRequired
+  })).isRequired,
+  size: _propTypes.default.number.isRequired,
+  chartID: _propTypes.default.string.isRequired
+};
+var _default = exports.default = DoughnutChart;

package/dist/components/DoughnutChart/DoughnutChart.scss

@@ -0,0 +1,30 @@
+@import "vanilla-framework";
+
+.doughnut-chart {
+  width: 6.5rem;
+
+  .doughnut-chart__tooltip {
+    display: block;
+  }
+
+  .doughnut-chart__tooltip > :only-child {
+    // Override the tooltip wrapper.
+    display: block !important;
+  }
+
+  .doughnut-chart__chart {
+    // Restrict hover areas to the strokes.
+    pointer-events: stroke;
+  }
+
+  .doughnut-chart__segment {
+    fill: transparent;
+
+    // Animate stroke size changes on hover.
+    transition: stroke-width 0.3s ease;
+  }
+}
+
+.doughnut-chart__legend {
+  list-style-type: none;
+}

package/dist/components/DoughnutChart/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./DoughnutChart";
+export type { Props as DoughnutChartProps } from "./DoughnutChart";
+export type { Segment } from "./DoughnutChart";

package/dist/components/DoughnutChart/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _DoughnutChart.default;
+  }
+});
+var _DoughnutChart = _interopRequireDefault(require("./DoughnutChart"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/index.d.ts

@@ -19,6 +19,7 @@ export { default as Col } from "./components/Col";
 export { default as ConfirmationButton } from "./components/ConfirmationButton";
 export { default as ConfirmationModal } from "./components/ConfirmationModal";
 export { default as ContextualMenu } from "./components/ContextualMenu";
+export { default as DoughnutChart } from "./components/DoughnutChart";
 export { default as EmptyState } from "./components/EmptyState";
 export { default as Field } from "./components/Field";
 export { default as Form } from "./components/Form";
@@ -87,6 +88,7 @@ export type { ColProps, ColSize } from "./components/Col";
 export type { ConfirmationButtonProps } from "./components/ConfirmationButton";
 export type { ConfirmationModalProps } from "./components/ConfirmationModal";
 export type { ContextualMenuProps, ContextualMenuDropdownProps, MenuLink, Position, } from "./components/ContextualMenu";
+export type { DoughnutChartProps, Segment } from "./components/DoughnutChart";
 export type { EmptyStateProps } from "./components/EmptyState";
 export type { FieldProps } from "./components/Field";
 export type { FormProps } from "./components/Form";

package/dist/index.js

@@ -27,6 +27,7 @@ var _exportNames = {
   ConfirmationButton: true,
   ConfirmationModal: true,
   ContextualMenu: true,
+  DoughnutChart: true,
   EmptyState: true,
   Field: true,
   Form: true,
@@ -234,6 +235,12 @@ Object.defineProperty(exports, "ContextualMenu", {
     return _ContextualMenu.default;
   }
 });
+Object.defineProperty(exports, "DoughnutChart", {
+  enumerable: true,
+  get: function () {
+    return _DoughnutChart.default;
+  }
+});
 Object.defineProperty(exports, "EmptyState", {
   enumerable: true,
   get: function () {
@@ -663,6 +670,7 @@ var _Col = _interopRequireDefault(require("./components/Col"));
 var _ConfirmationButton = _interopRequireDefault(require("./components/ConfirmationButton"));
 var _ConfirmationModal = _interopRequireDefault(require("./components/ConfirmationModal"));
 var _ContextualMenu = _interopRequireDefault(require("./components/ContextualMenu"));
+var _DoughnutChart = _interopRequireDefault(require("./components/DoughnutChart"));
 var _EmptyState = _interopRequireDefault(require("./components/EmptyState"));
 var _Field = _interopRequireDefault(require("./components/Field"));
 var _Form = _interopRequireDefault(require("./components/Form"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {