design-system-simplefi
Version:
Design System for SimpleFi Applications
24 lines • 1.58 kB
JavaScript
import React from 'react';
import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
import { theme } from '../../../theme';
import Popup from './Popup';
var PieChartComponent = function (_a) {
var data = _a.data, showLabel = _a.showLabel;
var renderCustomizedLabel = function (_a) {
var cx = _a.cx, cy = _a.cy, midAngle = _a.midAngle, innerRadius = _a.innerRadius, outerRadius = _a.outerRadius, percent = _a.percent, index = _a.index;
var radius = innerRadius + (outerRadius - innerRadius) * 0.5;
var RADIAN = Math.PI / 180;
var x = cx + radius * Math.cos(-midAngle * RADIAN);
var y = cy + radius * Math.sin(-midAngle * RADIAN);
return (React.createElement("text", { key: index, dominantBaseline: "central", fill: "white", textAnchor: x > cx ? 'start' : 'end', x: x, y: y }, (percent * 100).toFixed(0) + "%"));
};
var cells = data.map(function (entry, index) {
return (React.createElement(Cell, { key: "piechart-cell-" + index, fill: theme.colors[entry.color], fillOpacity: entry.opacity, stroke: theme.colors.white, strokeWidth: 2 }));
});
return (React.createElement(ResponsiveContainer, { height: "100%", width: "100%" },
React.createElement(PieChart, null,
React.createElement(Pie, { data: data, dataKey: "value", isAnimationActive: false, label: showLabel ? renderCustomizedLabel : false, labelLine: false }, cells),
React.createElement(Tooltip, { content: Popup }))));
};
export default PieChartComponent;
//# sourceMappingURL=PieChart.js.map