analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
192 lines (180 loc) • 6.67 kB
JavaScript
;Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
var _chunkOSTHYDKMjs = require('./chunk-OSTHYDKM.js');
var _chunkYCIBW5F4js = require('./chunk-YCIBW5F4.js');
var _chunkANT66KVKjs = require('./chunk-ANT66KVK.js');
var _chunkTN3AYOMVjs = require('./chunk-TN3AYOMV.js');
// src/components/SimpleBarChart/SimpleBarChart.tsx
var _jsxruntime = require('react/jsx-runtime');
var calculateTicks = (maxValue) => {
if (maxValue <= 0) return [0];
const niceMax = Math.ceil(maxValue / 4) * 4;
const step = niceMax / 4;
return [niceMax, step * 3, step * 2, step, 0];
};
var YAxis = ({
ticks,
chartHeight
}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"div",
{
className: "flex flex-col justify-between items-end pr-3",
style: { height: chartHeight },
"aria-hidden": "true",
children: ticks.map((tick, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: "xs",
weight: "medium",
className: "text-text-500",
children: tick
},
`${tick}-${index}`
))
}
);
var GridLines = ({
ticks,
chartHeight
}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"div",
{
className: "absolute inset-0 flex flex-col justify-between pointer-events-none",
style: { height: chartHeight },
children: ticks.map((tick, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"div",
{
className: "w-full border-t border-dashed border-border-200"
},
`grid-${tick}-${index}`
))
}
);
var Bar = ({
item,
maxValue,
chartHeight,
barColor
}) => {
const barHeight = maxValue === 0 ? 0 : item.value / maxValue * chartHeight;
const tooltipContent = item.value > 0 ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"div",
{
className: "w-2 h-2 rounded-full shrink-0",
style: { background: _chunkYCIBW5F4js.bgClassToCssVar.call(void 0, barColor) }
}
),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkANT66KVKjs.Text_default, { as: "span", size: "xs", weight: "medium", color: "text-white", children: [
item.label,
": ",
item.value
] })
] }) : null;
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkOSTHYDKMjs.Tooltip,
{
content: _nullishCoalesce(tooltipContent, () => ( "")),
disabled: !tooltipContent,
position: "top",
className: "flex-1",
contentClassName: "whitespace-normal",
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-center gap-2 w-full cursor-pointer group/bar", children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"div",
{
className: "w-full flex flex-col-reverse items-center justify-start relative",
style: { height: chartHeight },
children: [
barHeight > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"div",
{
"data-testid": `bar-${item.label}`,
className: _chunkTN3AYOMVjs.cn.call(void 0, "w-8 rounded-md", barColor),
style: { height: `${barHeight}px` },
"aria-label": `${item.label}: ${item.value}`
}
),
item.value > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute inset-0 bg-white/50 opacity-0 group-hover/bar:opacity-100 transition-opacity duration-200 rounded-md pointer-events-none z-20" })
]
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: "xs",
weight: "medium",
className: "text-text-600 text-center",
"data-testid": `label-${item.label}`,
children: item.label
}
)
] })
}
);
};
var SimpleBarChart = ({
data,
title,
chartHeight = 180,
barColor = "bg-info-500",
className,
...props
}) => {
const maxValue = Math.max(...data.map((item) => item.value), 0);
const yAxisTicks = calculateTicks(maxValue);
const adjustedMax = yAxisTicks[0];
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"div",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"flex flex-col p-5 gap-4 bg-background border border-border-50 rounded-xl",
className
),
"aria-label": title,
...props,
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
as: "h3",
size: "lg",
weight: "bold",
className: "text-text-950 tracking-[0.2px]",
children: title
}
),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-row", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, YAxis, { ticks: yAxisTicks, chartHeight }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-4" }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 relative", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, GridLines, { ticks: yAxisTicks, chartHeight }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-row flex-1 gap-2 relative z-10", children: data.map((item, index) => (
// Equal-width column wrapper: keeps every bucket the same width even
// when a bar's value is 0 (its Tooltip is disabled and would
// otherwise drop the flex-1 class, collapsing the column).
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"div",
{
className: "flex-1 flex min-w-0",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
Bar,
{
item,
maxValue: adjustedMax,
chartHeight,
barColor
}
)
},
`${item.label}-${index}`
)
)) })
] })
] })
]
}
);
};
var SimpleBarChart_default = SimpleBarChart;
exports.SimpleBarChart = SimpleBarChart; exports.SimpleBarChart_default = SimpleBarChart_default;
//# sourceMappingURL=chunk-ATDZDVZ2.js.map