@vectara/vectara-ui/lib/components/chart/PieChart.js

Vectara's design system, codified as a React and Sass component library

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Cell, Legend, Pie, PieChart as RechartsPieChart, ResponsiveContainer, Tooltip } from "recharts";
import { getChartColor, getChartColorByIndex } from "./palette";
import { chartLegendProps, chartTooltipProps } from "./chartTheme";
const RADIAN = Math.PI / 180;
// Render a slice's name and percentage just outside its arc, anchored so the
// text reads away from the center.
const renderSliceLabel = ({ cx, cy, midAngle, outerRadius, percent, name }) => {
    const centerX = Number(cx);
    const centerY = Number(cy);
    const angle = Number(midAngle);
    const radius = Number(outerRadius) + 18;
    const x = centerX + radius * Math.cos(-angle * RADIAN);
    const y = centerY + radius * Math.sin(-angle * RADIAN);
    return (_jsx("text", Object.assign({ x: x, y: y, fill: "var(--vui-color-text)", fontSize: 12, textAnchor: x > centerX ? "start" : "end", dominantBaseline: "central" }, { children: `${name} (${Math.round(Number(percent) * 100)}%)` })));
};
export const VuiPieChart = (_a) => {
    var { data, categoryKey, valueKey, donut = false, colors, showLabels = true, height = 320, showLegend = true, showTooltip = true } = _a, rest = __rest(_a, ["data", "categoryKey", "valueKey", "donut", "colors", "showLabels", "height", "showLegend", "showTooltip"]);
    return (_jsx("div", Object.assign({ className: "vuiPieChart" }, rest, { children: _jsx(ResponsiveContainer, Object.assign({ width: "100%", height: height }, { children: _jsxs(RechartsPieChart, { children: [_jsx(Pie, Object.assign({ data: data, dataKey: valueKey, nameKey: categoryKey, innerRadius: donut ? "55%" : 0, 
                        // Leave room outside the arc for labels when they're shown.
                        outerRadius: showLabels ? "70%" : "80%", paddingAngle: 1, label: showLabels ? renderSliceLabel : undefined, labelLine: showLabels ? { stroke: "var(--vui-color-border-medium)" } : false, 
                        // A stroke between slices separates adjacent colors, a redundant cue
                        // that aids color-blind readers.
                        stroke: "var(--vui-color-empty-shade)", strokeWidth: 2 }, { children: data.map((datum, index) => (_jsx(Cell, { fill: (colors === null || colors === void 0 ? void 0 : colors[index]) ? getChartColor(colors[index]) : getChartColorByIndex(index) }, String(datum[categoryKey])))) })), showTooltip && _jsx(Tooltip, Object.assign({}, chartTooltipProps)), showLegend && _jsx(Legend, Object.assign({}, chartLegendProps))] }) })) })));
};