organism-react-d3-piechart
Version:
259 lines (221 loc) • 9.13 kB
JavaScript
"use strict";
var _interopRequireDefault = require("reshow-runtime/helpers/interopRequireDefault");
var _interopRequireWildcard = require("reshow-runtime/helpers/interopRequireWildcard");
exports.__esModule = true;
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("reshow-runtime/helpers/objectSpread2"));
var _classCallCheck2 = _interopRequireDefault(require("reshow-runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("reshow-runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("reshow-runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("reshow-runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("reshow-runtime/helpers/createSuper"));
var _defineProperty2 = _interopRequireDefault(require("reshow-runtime/helpers/defineProperty"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("reshow-runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var _reactAtomicMolecule = require("react-atomic-molecule");
var _d3Lib = require("d3-lib");
var _getObjectValue = _interopRequireDefault(require("get-object-value"));
var _colorlib = require("colorlib");
var _organismReactGraph = require("organism-react-graph");
var _jsxRuntime = require("react/jsx-runtime");
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"];
var ValueLabel = function ValueLabel(_ref) {
var value = _ref.value,
unit = _ref.unit,
valueTextFill = _ref.valueTextFill,
centroid = _ref.centroid,
groupIndex = _ref.groupIndex,
props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactAtomicMolecule.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 = (0, _objectWithoutPropertiesLoose2["default"])(_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__*/(0, _jsxRuntime.jsx)(_reactAtomicMolecule.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 = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded3);
var rotate = "rotate(" + (startAngle + endAngle) / 2 * (180 / Math.PI) + ")";
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAtomicMolecule.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) {
(0, _inherits2["default"])(Arc, _Component);
var _super = (0, _createSuper2["default"])(Arc);
function Arc() {
var _this;
(0, _classCallCheck2["default"])(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));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseEnter", function (e) {
_this.setState({
fill: (0, _colorlib.lightenColor)(_this.props.color, 20)
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function (e) {
_this.setState({
fill: _this.props.color
});
});
return _this;
}
(0, _createClass2["default"])(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 = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, _excluded4);
var fill = (0, _getObjectValue["default"])(this, ["state", "fill"], color);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactAtomicMolecule.SemanticUI, {
atom: "g",
className: "arc",
ui: false,
onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAtomicMolecule.SemanticUI, {
d: path,
fill: fill,
atom: "path",
stroke: sectorBorderColor
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ValueLabel, (0, _objectSpread2["default"])({}, props))]
}, groupIndex + "-arc");
}
}]);
return Arc;
}(_react.Component);
var elements = function elements(_ref4) {
var data = _ref4.data,
groupIndex = _ref4.groupIndex,
props = (0, _objectWithoutPropertiesLoose2["default"])(_ref4, _excluded5);
var lineStart = 1;
var lineLength = 10;
var textDistance = lineStart + lineLength + 3;
return [/*#__PURE__*/(0, _jsxRuntime.jsx)(Arc, (0, _objectSpread2["default"])({
groupIndex: groupIndex
}, props)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
groupIndex: groupIndex,
start: lineStart,
length: lineLength
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(NameLabel, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
groupIndex: groupIndex,
label: (0, _getObjectValue["default"])(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 = (0, _objectWithoutPropertiesLoose2["default"])(_ref5, _excluded6);
var _useD = (0, _d3Lib.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__*/(0, _jsxRuntime.jsx)(_organismReactGraph.Svg, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
viewBox: "0 0 " + wBoxSize + " " + hBoxSize,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAtomicMolecule.SemanticUI, {
atom: "g",
transform: "translate(" + wBoxSize / 2 + "," + hBoxSize / 2 + ")",
children: pieData.items.map(function (item, key) {
return elements((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, 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: "%"
};
var _default = PieChart;
exports["default"] = _default;
module.exports = exports.default;