rumble-charts
Version:
Truly declarative React charts components
180 lines (173 loc) • 9.09 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib_es6 = require('./external/tslib/tslib.es6.js');
var React = require('react');
var d3Scale = require('d3-scale');
var d3Shape = require('d3-shape');
var d3Interpolate = require('d3-interpolate');
var colorFunc = require('./helpers/colorFunc.js');
require('d3-ease');
var getCoords = require('./helpers/getCoords.js');
var normalizeNumber = require('./helpers/normalizeNumber.js');
var value = require('./helpers/value.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var maxAngle = 2 * Math.PI;
/**
* Renders pies for you pie chart or donut chart
*/
function Pies(props) {
var _a;
var className = props.className, style = props.style, minX = props.minX, maxX = props.maxX, minY = props.minY, maxY = props.maxY, _b = props.position, position = _b === void 0 ? 'center middle' : _b, layerWidth = props.layerWidth, layerHeight = props.layerHeight, _c = props.colors, colors = _c === void 0 ? colorFunc.defaultSchemeName : _c, opacity = props.opacity, _d = props.startAngle, startAngle = _d === void 0 ? 0 : _d, _e = props.endAngle, endAngle = _e === void 0 ? maxAngle : _e, _f = props.padAngle, padAngle = _f === void 0 ? 0 : _f;
var outerRadius = Math.min(props.layerWidth, props.layerHeight) / 2;
var innerRadius = normalizeNumber.normalizeNumber(props.innerRadius, outerRadius);
var innerPadding = normalizeNumber.normalizeNumber(props.innerPadding, outerRadius);
var groupPadding = normalizeNumber.normalizeNumber(props.groupPadding, outerRadius);
var radialScale = d3Scale.scaleLinear()
.range([outerRadius, innerRadius])
.domain(props.scaleX.direction >= 0 ? [minX - 0.5, maxX + 0.5] : [maxX + 0.5, minX - 0.5]);
var circularScale = d3Scale.scaleLinear()
.range([startAngle, endAngle])
.domain(props.scaleY.direction >= 0 ? [minY, maxY] : [maxY, minY]);
var baseWidth = Math.abs(radialScale(1) - radialScale(0));
var pieWidth = (function () {
if (props.pieWidth) {
return normalizeNumber.normalizeNumber(props.pieWidth, outerRadius);
}
else {
if (props.combined) {
return baseWidth - innerPadding;
}
else {
var seriesCount = !(props === null || props === void 0 ? void 0 : props.series) ? 1 : props.series.length;
return (baseWidth - groupPadding) / seriesCount - innerPadding;
}
}
})();
var _startAngle = circularScale(0);
var color = colorFunc.colorFunc(colors);
var coords = getCoords.getCoords(position || '', layerWidth, layerHeight, outerRadius * 2, outerRadius * 2);
var halfPadAngle = padAngle / 2 || 0;
return React__default["default"].createElement("g", { className: className, style: style, transform: "translate(".concat((coords.x + outerRadius), " ").concat((coords.y + outerRadius), ")"), opacity: opacity }, (_a = props.series) === null || _a === void 0 ? void 0 : _a.map(function (series, index) {
var _a;
if ('seriesVisible' in props) {
var seriesVisible = value.value(props.seriesVisible, { seriesIndex: index, series: series, props: props });
if (!seriesVisible) {
return;
}
}
var seriesAttributes = value.value(props.seriesAttributes, { seriesIndex: index, series: series, props: props });
var seriesStyle = value.value(props.seriesStyle, { seriesIndex: index, series: series, props: props });
var deltaRadial = 0;
if (!props.combined) {
deltaRadial = pieWidth * index - (props.series.length - 1) * 0.5 * pieWidth +
(index - (props.series.length - 1) / 2) * innerPadding;
}
return React__default["default"].createElement("g", tslib_es6.__assign({ key: index, className: className && (className + '-series ' + className + '-series-' + index), style: seriesStyle, opacity: series.opacity }, seriesAttributes), (_a = series.data) === null || _a === void 0 ? void 0 : _a.map(function (point, pointIndex) {
var startAngle = (point.y0 ? circularScale(point.y0) : _startAngle) + halfPadAngle;
var endAngle = circularScale(point.y) - halfPadAngle;
var radius = radialScale(point.x) - deltaRadial * (props.scaleX.direction || 1);
return renderArc({
startAngle: startAngle,
endAngle: endAngle,
radius: radius,
pieWidth: pieWidth,
seriesIndex: index,
pointIndex: pointIndex,
point: point,
props: props,
color: color
});
}));
}));
}
function renderArc(_a) {
var startAngle = _a.startAngle, endAngle = _a.endAngle, radius = _a.radius, pieWidth = _a.pieWidth, seriesIndex = _a.seriesIndex, pointIndex = _a.pointIndex, point = _a.point, props = _a.props, color = _a.color;
var className = props.className, _b = props.gradientStep, gradientStep = _b === void 0 ? 0.01 : _b;
var series = props.series[seriesIndex];
if ('pieVisible' in props) {
var pieVisible = value.value(props.pieVisible, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
if (!pieVisible) {
return;
}
}
var halfWidth = pieWidth / 2;
var cornerRadius = value.value(props.cornerRadius, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
var arc = d3Shape.arc()
.cornerRadius(normalizeNumber.normalizeNumber(cornerRadius, pieWidth))
.padRadius(10)
.innerRadius(radius - halfWidth)
.outerRadius(radius + halfWidth);
var fillColor = point.color || series.color || color(seriesIndex);
if (Array.isArray(fillColor) && Array.from(new Set(fillColor)).length === 1) {
fillColor = fillColor[0];
}
var pieStyle = value.value([point.style, series.style, props.pieStyle], {
seriesIndex: seriesIndex,
pointIndex: pointIndex,
point: point,
series: series,
props: props
});
var pieAttributes = value.value(props.pieAttributes, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
var pathProps = tslib_es6.__assign({ style: pieStyle, fill: fillColor, fillOpacity: point.opacity }, pieAttributes);
var pathList = [];
// fill color interpolation
if (Array.isArray(fillColor)) {
var interpolateAngle_1 = d3Interpolate.interpolate(startAngle, endAngle);
fillColor.forEach(function (color, index) {
if (index === fillColor.length - 1) {
return;
}
var interpolateFillColor = d3Interpolate.interpolate(color, fillColor[index + 1]);
var step = 1 / ((endAngle - startAngle) / gradientStep);
for (var i = 0; i < 1; i += step) {
pathProps.fill = interpolateFillColor(i);
var angleIndex = (index + i) / (fillColor.length - 1);
pathList = pathList.concat(renderArcPart({
startAngle: interpolateAngle_1(angleIndex),
endAngle: interpolateAngle_1(angleIndex + step),
maxAngle: maxAngle,
pathProps: pathProps,
arc: arc,
key: i
}));
}
});
}
else {
pathList = renderArcPart({
startAngle: startAngle,
endAngle: endAngle,
maxAngle: maxAngle,
pathProps: pathProps,
arc: arc,
key: pointIndex
});
}
var groupStyle = value.value(props.groupStyle, { seriesIndex: seriesIndex, pointIndex: pointIndex, point: point, series: series, props: props });
return React__default["default"].createElement("g", { key: pointIndex, className: className && (className + '-pie ' + className + '-pie-' + pointIndex), style: groupStyle }, pathList);
}
function renderArcPart(_a) {
var startAngle = _a.startAngle, endAngle = _a.endAngle, maxAngle = _a.maxAngle, pathProps = _a.pathProps, arc = _a.arc, key = _a.key;
var pathList = [];
while (endAngle >= 4 * Math.PI) {
endAngle -= 2 * Math.PI;
if (endAngle < startAngle) {
startAngle -= 2 * Math.PI;
}
}
var lapsCount = Math.abs((endAngle - startAngle) / maxAngle);
var lapIndex = 0;
while (lapIndex < lapsCount) {
var d = arc({
startAngle: startAngle,
endAngle: Math.min(startAngle + maxAngle, endAngle)
});
startAngle += maxAngle;
pathList.push(React__default["default"].createElement("path", tslib_es6.__assign({ key: '' + key + lapIndex }, pathProps, { d: d })));
lapIndex++;
}
return pathList;
}
exports.Pies = Pies;