react-gifted-charts
Version:
ReactJS counterpart of react-native-gifted-charts. An intuitive charting library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid and Radar charts in React
81 lines • 7.12 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { pieColors } from 'gifted-charts-core';
import { usePiePro } from './pro';
import './styles.css';
export var PieChartPro = function (props) {
var _a = usePiePro(props), radius = _a.radius, total = _a.total, donut = _a.donut, strokeWidth = _a.strokeWidth, maxStrokeWidth = _a.maxStrokeWidth, isAnimated = _a.isAnimated, animationDuration = _a.animationDuration, initial = _a.initial, dInitial = _a.dInitial, dFinal = _a.dFinal, getStartCaps = _a.getStartCaps, getEndCaps = _a.getEndCaps, getTextCoordinates = _a.getTextCoordinates, height = _a.height, heightFactor = _a.heightFactor, svgProps = _a.svgProps;
var data = props.data, curvedStartEdges = props.curvedStartEdges, curvedEndEdges = props.curvedEndEdges, edgesRadius = props.edgesRadius, showGradient = props.showGradient, ring = props.ring, centerLabelComponent = props.centerLabelComponent, strokeDashArray = props.strokeDashArray;
return (_jsxs("div", { style: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: height * heightFactor,
width: (radius + maxStrokeWidth) * 2
}, children: [_jsx("div", { style: { position: 'absolute' }, children: centerLabelComponent ? centerLabelComponent() : null }), _jsx("svg", __assign({}, svgProps, { transform: "scale(1,".concat(maxStrokeWidth ? 1 + maxStrokeWidth / (radius * 2) : 1, ")"), children: total ? (_jsxs(_Fragment, { children: [_jsx("defs", { children: data.map(function (item, index) {
return (_jsxs("radialGradient", { id: 'grad' + index, cx: '50%', cy: '50%', rx: '50%', ry: '50%', fx: '50%', fy: '50%', gradientUnits: 'userSpaceOnUse', children: [_jsx("stop", { offset: '0%', stopColor: item.gradientCenterColor, stopOpacity: '1' }), _jsx("stop", { offset: '100%', stopColor: item.color || pieColors[index % 9], stopOpacity: '1' })] }, index + ''));
}) }), data.map(function (item, index) {
var _a, _b, _c, _d;
var borderWidth = (_a = item.strokeWidth) !== null && _a !== void 0 ? _a : strokeWidth;
var borderColor = (_c = (_b = item.strokeColor) !== null && _b !== void 0 ? _b : props.strokeColor) !== null && _c !== void 0 ? _c : (borderWidth ? 'black' : 'undefined');
var strokeDashArrayLocal = (_d = item.strokeDashArray) !== null && _d !== void 0 ? _d : strokeDashArray;
return (_jsx("path", { id: 'renderPath', d: dFinal[index], fill: ring
? 'none'
: showGradient
? "url(#grad".concat(index, ")")
: data[index].color || pieColors[index % 9], strokeWidth: borderWidth, stroke: borderColor, strokeDasharray: (strokeDashArrayLocal === null || strokeDashArrayLocal === void 0 ? void 0 : strokeDashArrayLocal.length) === 2
? "".concat(strokeDashArrayLocal[0], " ").concat(strokeDashArrayLocal[1])
: "", children: isAnimated ? (_jsx("animate", { dur: animationDuration / 1000, attributeName: 'd', values: "".concat(dInitial[index], ";").concat(dFinal[index]) })) : null }, "pie".concat(index)));
}), donut
? data.map(function (item, index) {
if (curvedStartEdges ||
edgesRadius ||
item.isStartEdgeCurved ||
item.startEdgeRadius)
return (_jsx("path", { d: "".concat(initial, " ").concat(getStartCaps(index, item)), fill: showGradient
? "url(#grad".concat(index, ")")
: data[index].color || pieColors[index % 9], className: isAnimated ? 'appear' : '' }, "cap".concat(index)));
return null;
})
: null, donut
? data.map(function (item, index) {
if (curvedEndEdges ||
edgesRadius ||
item.isEndEdgeCurved ||
item.endEdgeRadius)
return (_jsx("path", { d: "".concat(initial, " ").concat(getEndCaps(index, item)), fill: showGradient
? "url(#grad".concat(index, ")")
: data[index].color || pieColors[index % 9], className: isAnimated ? 'appear' : '' }, "cap".concat(index)));
return null;
})
: null, data.map(function (item, index) {
var _a, _b;
var _c = getTextCoordinates(index, item.labelPosition), x = _c.x, y = _c.y;
return (_jsx("text", { style: { pointerEvents: 'all' }, fill: item.textColor ||
props.textColor ||
pieColors[(index + 2) % 9], fontSize: item.textSize || props.textSize, fontFamily: item.font || props.font, fontWeight: item.fontWeight || props.fontWeight, fontStyle: item.fontStyle || props.fontStyle || 'normal', x: x +
(item.shiftTextX || 0) -
((_b = (_a = item.textSize) !== null && _a !== void 0 ? _a : props.textSize) !== null && _b !== void 0 ? _b : 0) / 1.8, y: y + (item.shiftTextY || 0), onClick: function () {
var _a;
item.onLabelPress
? item.onLabelPress()
: props.onLabelPress
? props.onLabelPress(item, index)
: item.onPress
? item.onPress()
: (_a = props.onPress) === null || _a === void 0 ? void 0 : _a.call(props, item, index);
}, className: isAnimated ? 'appear' : '', children: item.text ||
(props.showValuesAsLabels ? item.value + '' : '') }, "label".concat(index)));
})] })) : null }))] }));
};
//# sourceMappingURL=index.js.map