funuicss/ui/chart/Pie.js

React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting b

"use strict";
'use client';
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var recharts_1 = require("recharts");
var getCssVar = function (varName) {
    var _a;
    if (typeof window === 'undefined')
        return '';
    return (((_a = getComputedStyle(document.documentElement)
        .getPropertyValue("--".concat(varName))) === null || _a === void 0 ? void 0 : _a.trim()) || '');
};
var ChartPie = function (_a) {
    var data = _a.data, _b = _a.donut, donut = _b === void 0 ? false : _b, _c = _a.showLegend, showLegend = _c === void 0 ? true : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, width = _a.width, height = _a.height;
    var resolveColor = function (input, fallback) {
        if (fallback === void 0) { fallback = '#8884d8'; }
        if (!input)
            return getCssVar('primary') || fallback;
        if (input.startsWith('#'))
            return input;
        return getCssVar(input) || input;
    };
    var chart = (react_1.default.createElement(recharts_1.PieChart, { width: typeof width === 'number' ? width : undefined, height: typeof height === 'number' ? height : undefined },
        react_1.default.createElement(recharts_1.Tooltip, null),
        showLegend && react_1.default.createElement(recharts_1.Legend, null),
        react_1.default.createElement(recharts_1.Pie, { data: data, dataKey: "value", nameKey: "label", cx: "50%", cy: "50%", outerRadius: 100, innerRadius: donut ? 60 : 0, label: true }, data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: resolveColor(entry.color), stroke: "#ffffff", strokeWidth: 1 })); }))));
    // If no width or height is set, use ResponsiveContainer
    if (!width && !height) {
        return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: 300, className: funcss }, chart));
    }
    return (react_1.default.createElement("div", { className: funcss, style: {
            width: typeof width === 'number' ? "".concat(width, "px") : width || '100%',
            height: typeof height === 'number' ? "".concat(height, "px") : height || '300px',
        } }, chart));
};
exports.default = ChartPie;