infinity-forge
Version:
92 lines • 5.88 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.PieSimpleChart = PieSimpleChart;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var ui_1 = require("../../../../../ui/index.js");
var functions_1 = require("./functions.js");
var S = __importStar(require("./styles.js"));
function PieSimpleChart(_a) {
var data = _a.data, _b = _a.size, size = _b === void 0 ? 300 : _b;
var _window = (0, ui_1.useWindow)();
var isMobile = _window && _window.innerWidth <= 1024;
var containerRef = (0, react_1.useRef)(null);
var cx = size / 2;
var cy = size / 2;
var radius = size / 2;
var labelRadius = radius * 1.2; // Distância para posicionar os labels fora da pizza
var total = data.reduce(function (acc, item) { return acc + item.value; }, 0);
var startAngle = 0;
// Estados para controle do tooltip
var _c = (0, react_1.useState)(null), hoveredSlice = _c[0], setHoveredSlice = _c[1];
var _d = (0, react_1.useState)({ x: 0, y: 0 }), tooltipPos = _d[0], setTooltipPos = _d[1];
// Calcula posição relativa ao container para posicionar o tooltip
function handleMouseMove(e) {
if (containerRef.current) {
var rect = containerRef.current.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
setTooltipPos({ x: x, y: y });
}
}
return ((0, jsx_runtime_1.jsxs)(S.PieSimpleChart, { className: 'pie_simple_chart_infinity_forge', ref: containerRef, children: [(0, jsx_runtime_1.jsx)("svg", { width: size * 1.5, height: size, style: { overflow: 'visible' }, children: data.map(function (item, index) {
var sliceAngle = (item.value / total) * 360;
var endAngle = startAngle + sliceAngle;
var midAngle = startAngle + sliceAngle / 2;
var pathData = (0, functions_1.getPathData)(cx, cy, radius, startAngle, endAngle);
var rad = Math.PI / 180;
// Calcula as coordenadas do label
var labelX = cx + labelRadius * Math.cos(midAngle * rad);
var labelY = cy + labelRadius * Math.sin(midAngle * rad);
var textAnchor = labelX > cx ? 'start' : 'end';
// Linha de conexão entre a fatia e o label
var lineX1 = cx + radius * 0.8 * Math.cos(midAngle * rad);
var lineY1 = cy + radius * 0.8 * Math.sin(midAngle * rad);
var dx = labelX > cx ? '5px' : '-5px';
var newItemLabel = "".concat(item.label, ": ").concat(((item.value / total) * 100).toFixed(2), "%");
var lines = (0, functions_1.breakWord)(newItemLabel);
var currentSlice = ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { d: pathData, fill: item.color, stroke: '#fff', strokeWidth: 2, onMouseEnter: function (e) {
setHoveredSlice(item);
handleMouseMove(e);
}, onMouseMove: handleMouseMove, onMouseLeave: function () { return setHoveredSlice(null); } }), (0, jsx_runtime_1.jsx)("line", { x1: lineX1, y1: lineY1, x2: labelX, y2: labelY, stroke: '#333', strokeWidth: 1 }), (0, jsx_runtime_1.jsx)("text", { x: labelX, y: labelY, dx: dx, textAnchor: textAnchor, alignmentBaseline: 'middle', fontSize: isMobile ? '9px' : '11px', fontWeight: 'bold', fill: '#333', onMouseEnter: function (e) {
setHoveredSlice(item);
handleMouseMove(e);
}, onMouseMove: function (e) { return handleMouseMove(e); }, onMouseLeave: function () { return setHoveredSlice(null); }, children: isMobile ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: lines.map(function (line, index) { return ((0, jsx_runtime_1.jsx)("tspan", { x: labelX, dx: dx, dy: index === 0 ? '-5' : '12', children: line }, index)); }) })) : (newItemLabel) })] }, index));
startAngle = endAngle;
return currentSlice;
}) }), hoveredSlice && ((0, jsx_runtime_1.jsxs)("div", { className: 'tooltip', style: { left: tooltipPos.x + 10, top: tooltipPos.y + 10 }, children: [(0, jsx_runtime_1.jsx)("strong", { children: hoveredSlice.label }), ": ", hoveredSlice.value] }))] }));
}
//# sourceMappingURL=index.js.map