organism-react-d3-piechart/build/es/ui/organisms/PieChart.mjs

D3 Piechart

import _objectSpread from "reshow-runtime/es/helpers/objectSpread2";
import _classCallCheck from "reshow-runtime/es/helpers/classCallCheck";
import _createClass from "reshow-runtime/es/helpers/createClass";
import _assertThisInitialized from "reshow-runtime/es/helpers/assertThisInitialized";
import _inherits from "reshow-runtime/es/helpers/inherits";
import _createSuper from "reshow-runtime/es/helpers/createSuper";
import _defineProperty from "reshow-runtime/es/helpers/defineProperty";
import _objectWithoutPropertiesLoose from "reshow-runtime/es/helpers/objectWithoutPropertiesLoose";
var _excluded = ["value", "unit", "valueTextFill", "centroid", "groupIndex"],
    _excluded2 = ["startAngle", "endAngle", "outerRadius", "label", "labelTextFill", "distance", "groupIndex"],
    _excluded3 = ["groupIndex", "outerRadius", "labelTextFill", "startAngle", "endAngle", "start", "length"],
    _excluded4 = ["groupIndex", "color", "path", "sectorBorderColor"],
    _excluded5 = ["data", "groupIndex"],
    _excluded6 = ["data", "outerRadius", "innerRadius", "labelTextFill", "valueTextFill", "sectorBorderColor", "showOuterLabels", "showInnerLabels", "unit"];
import React, { Component } from "react";
import { SemanticUI } from "react-atomic-molecule";
import { useD3 } from "d3-lib";
import get from "get-object-value";
import { lightenColor } from "colorlib";
import { Svg, Group } from "organism-react-graph";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { jsx as _jsx } from "react/jsx-runtime";

var ValueLabel = function ValueLabel(_ref) {
  var value = _ref.value,
      unit = _ref.unit,
      valueTextFill = _ref.valueTextFill,
      centroid = _ref.centroid,
      groupIndex = _ref.groupIndex,
      props = _objectWithoutPropertiesLoose(_ref, _excluded);

  return /*#__PURE__*/_jsxs(SemanticUI, {
    atom: "text",
    transform: "translate(" + centroid.join(",") + ")",
    dy: ".35em",
    style: {
      shapeRendering: "crispEdges",
      textAnchor: "middle",
      fill: valueTextFill,
      fontSize: 8
    },
    children: [value, unit]
  }, groupIndex + "-value");
};

var NameLabel = function NameLabel(_ref2) {
  var startAngle = _ref2.startAngle,
      endAngle = _ref2.endAngle,
      outerRadius = _ref2.outerRadius,
      label = _ref2.label,
      labelTextFill = _ref2.labelTextFill,
      distance = _ref2.distance,
      groupIndex = _ref2.groupIndex,
      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);

  var angle = (startAngle + endAngle) / 2;
  var dist = outerRadius + distance;
  var x = dist * (1.2 * Math.sin(angle));
  var y = -dist * Math.cos(angle);
  var translate = "translate(" + x + "," + y + ")";
  return /*#__PURE__*/_jsx(SemanticUI, {
    atom: "text",
    transform: translate,
    dy: ".35em",
    style: {
      fill: labelTextFill,
      textAnchor: "middle",
      shapeRendering: "crispEdges",
      fontSize: 8
    },
    children: label
  }, groupIndex + "-name");
};

var Line = function Line(_ref3) {
  var groupIndex = _ref3.groupIndex,
      outerRadius = _ref3.outerRadius,
      labelTextFill = _ref3.labelTextFill,
      startAngle = _ref3.startAngle,
      endAngle = _ref3.endAngle,
      start = _ref3.start,
      length = _ref3.length,
      props = _objectWithoutPropertiesLoose(_ref3, _excluded3);

  var rotate = "rotate(" + (startAngle + endAngle) / 2 * (180 / Math.PI) + ")";
  return /*#__PURE__*/_jsx(SemanticUI, {
    atom: "line",
    x1: "0",
    x2: "0",
    y1: -outerRadius - start,
    y2: -outerRadius - length,
    stroke: labelTextFill,
    transform: rotate,
    style: {
      fill: labelTextFill,
      strokeWidth: 1
    }
  }, groupIndex + "-line");
};

var Arc = /*#__PURE__*/function (_Component) {
  _inherits(Arc, _Component);

  var _super = _createSuper(Arc);

  function Arc() {
    var _this;

    _classCallCheck(this, Arc);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (e) {
      _this.setState({
        fill: lightenColor(_this.props.color, 20)
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function (e) {
      _this.setState({
        fill: _this.props.color
      });
    });

    return _this;
  }

  _createClass(Arc, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          groupIndex = _this$props.groupIndex,
          color = _this$props.color,
          path = _this$props.path,
          sectorBorderColor = _this$props.sectorBorderColor,
          props = _objectWithoutPropertiesLoose(_this$props, _excluded4);

      var fill = get(this, ["state", "fill"], color);
      return /*#__PURE__*/_jsxs(SemanticUI, {
        atom: "g",
        className: "arc",
        ui: false,
        onMouseEnter: this.handleMouseEnter,
        onMouseLeave: this.handleMouseLeave,
        children: [/*#__PURE__*/_jsx(SemanticUI, {
          d: path,
          fill: fill,
          atom: "path",
          stroke: sectorBorderColor
        }), /*#__PURE__*/_jsx(ValueLabel, _objectSpread({}, props))]
      }, groupIndex + "-arc");
    }
  }]);

  return Arc;
}(Component);

var elements = function elements(_ref4) {
  var data = _ref4.data,
      groupIndex = _ref4.groupIndex,
      props = _objectWithoutPropertiesLoose(_ref4, _excluded5);

  var lineStart = 1;
  var lineLength = 10;
  var textDistance = lineStart + lineLength + 3;
  return [/*#__PURE__*/_jsx(Arc, _objectSpread({
    groupIndex: groupIndex
  }, props)), /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({}, props), {}, {
    groupIndex: groupIndex,
    start: lineStart,
    length: lineLength
  })), /*#__PURE__*/_jsx(NameLabel, _objectSpread(_objectSpread({}, props), {}, {
    groupIndex: groupIndex,
    label: get(data, ["label"]),
    distance: textDistance
  }))];
};

var PieChart = function PieChart(_ref5) {
  var data = _ref5.data,
      outerRadius = _ref5.outerRadius,
      innerRadius = _ref5.innerRadius,
      labelTextFill = _ref5.labelTextFill,
      valueTextFill = _ref5.valueTextFill,
      sectorBorderColor = _ref5.sectorBorderColor,
      showOuterLabels = _ref5.showOuterLabels,
      showInnerLabels = _ref5.showInnerLabels,
      unit = _ref5.unit,
      props = _objectWithoutPropertiesLoose(_ref5, _excluded6);

  var _useD = useD3(),
      isLoad = _useD[0],
      d3 = _useD[1];

  if (!isLoad) {
    return null;
  }

  var pieData = d3.pie(data, innerRadius, outerRadius);
  var wBoxSize = pieData.outerRadius * 2; //use final outerRadius, please don't use props one.

  var hBoxSize = pieData.outerRadius * 2;

  if (showOuterLabels) {
    wBoxSize = pieData.outerRadius * 4;
    hBoxSize = pieData.outerRadius * 3.5;
  }

  return /*#__PURE__*/_jsx(Svg, _objectSpread(_objectSpread({}, props), {}, {
    viewBox: "0 0 " + wBoxSize + " " + hBoxSize,
    children: /*#__PURE__*/_jsx(SemanticUI, {
      atom: "g",
      transform: "translate(" + wBoxSize / 2 + "," + hBoxSize / 2 + ")",
      children: pieData.items.map(function (item, key) {
        return elements(_objectSpread(_objectSpread({}, item), {}, {
          groupIndex: key,
          outerRadius: pieData.outerRadius,
          labelTextFill: labelTextFill,
          valueTextFill: valueTextFill,
          sectorBorderColor: sectorBorderColor,
          unit: unit
        }));
      })
    })
  }));
};

PieChart.defaultProps = {
  innerRadius: 20,
  labelTextFill: "#000",
  valueTextFill: "#000",
  width: "100%",
  data: [],
  showInnerLabels: true,
  showOuterLabels: true,
  sectorBorderColor: "#000",
  unit: "%"
};
export default PieChart;