saydata
Version:
Saydata seamlessly integrates AI-driven analytics for your customers into your app. Designed for beautiful visualization. Engineered for simplicity.
30 lines (29 loc) • 3.38 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 } from "react/jsx-runtime";
import { ResponsiveContainer, PieChart, Pie, Cell, Legend, } from "recharts";
import classes from "./Pie.module.scss";
import { generateShades } from "../utils/util";
export default function CustomPie(_a) {
var _b, _c, _d, _e, _f, _g, _h;
var chartOptions = _a.chartOptions, rows = _a.rows;
var shades = generateShades((_c = (_b = chartOptions === null || chartOptions === void 0 ? void 0 : chartOptions.yCols) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.color, (_e = (_d = chartOptions === null || chartOptions === void 0 ? void 0 : chartOptions.yCols) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.lightColor, rows === null || rows === void 0 ? void 0 : rows.length);
return (_jsx(ResponsiveContainer, __assign({ width: "100%", height: "80%" }, { children: _jsxs(PieChart, __assign({ className: classes.root }, { children: [(_f = chartOptions === null || chartOptions === void 0 ? void 0 : chartOptions.yCols) === null || _f === void 0 ? void 0 : _f.map(function (yColObj, index) { return (_jsx(Pie, __assign({ data: rows, dataKey: yColObj === null || yColObj === void 0 ? void 0 : yColObj.yCol, nameKey: chartOptions === null || chartOptions === void 0 ? void 0 : chartOptions.xCol, outerRadius: 80, innerRadius: 50, paddingAngle: 1, fill: yColObj === null || yColObj === void 0 ? void 0 : yColObj.color, cx: "-100", cy: "50%" }, { children: rows === null || rows === void 0 ? void 0 : rows.map(function (entry, index) { return (_jsx(Cell, { fill: shades[index] }, "cell-".concat(index))); }) }), index)); }), _jsx(Legend, { align: "left", verticalAlign: "middle", content: _jsx(CustomLegend, { rows: rows, shades: shades, yCol: (_h = (_g = chartOptions === null || chartOptions === void 0 ? void 0 : chartOptions.yCols) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.yCol, xCol: chartOptions === null || chartOptions === void 0 ? void 0 : chartOptions.xCol }) })] })) })));
}
var CustomLegend = function (_a) {
var rows = _a.rows, shades = _a.shades, yCol = _a.yCol, xCol = _a.xCol;
var totalValue = rows.reduce(function (total, row) { return total + (row === null || row === void 0 ? void 0 : row[yCol]); }, 0);
return (_jsx("div", __assign({ className: classes.customLegend }, { children: rows === null || rows === void 0 ? void 0 : rows.map(function (row, index) {
var _a;
return (_jsxs("div", __assign({ className: classes.legendRow }, { children: [_jsx("div", { className: classes.fill, style: { backgroundColor: shades[index] } }), _jsxs("div", __assign({ style: { minWidth: 40 } }, { children: [(_a = (((row === null || row === void 0 ? void 0 : row[yCol]) / totalValue) * 100)) === null || _a === void 0 ? void 0 : _a.toFixed(2), "%"] })), _jsx("div", { children: row === null || row === void 0 ? void 0 : row[xCol] })] }), index));
}) })));
};