rikrdo/mercadodevida
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(pos): hide selfpay controls and normalize trend labels

Browse Source
This commit is contained in:
Deploy
2026-08-25 22:29:12 +02:00
parent f76591518e
commit 129584d738
13 changed files with 59 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
project/apps/admin/src/components/reporting/TrendChart.tsx
View File

@@ -16,28 +16,36 @@ interface TrendChartProps {
export function TrendChart({ data, maxValue, height = 120 }: TrendChartProps) {
if (data.length === 0) return null;
const width = 100; // percentage-based SVG
const barWidth = Math.min(3, (width * 0.9) / data.length);
const gap = Math.max(0.2, (width - barWidth * data.length) / (data.length + 1));
const chartHeight = height - 34; // leave room for labels
const chartWidth = Math.max(420, data.length * 26);
const padding = { top: 12, right: 14, bottom: 28, left: 14 };
const plotWidth = chartWidth - padding.left - padding.right;
const chartHeight = Math.max(60, height - padding.top - padding.bottom);
const barWidth = Math.min(16, Math.max(7, (plotWidth / data.length) * 0.62));
const gap = Math.max(4, (plotWidth - barWidth * data.length) / Math.max(data.length + 1, 1));
return (
<div className="w-full overflow-x-auto rounded-xl bg-white">
<svg
viewBox={`0 0 ${width} ${height}`}
className="block w-full"
style={{ minWidth: `${Math.max(360, data.length * 10)}px`, height: `${height}px` }}
preserveAspectRatio="none"
viewBox={`0 0 ${chartWidth} ${height}`}
className="block min-w-full"
style={{ width: '100%', minWidth: `${chartWidth}px`, height: `${height}px` }}
aria-label="Tendencia de ventas"
role="img"
>
{/* Y-axis baseline */}
<line x1="0" y1={chartHeight} x2={width} y2={chartHeight} stroke="#e5e7eb" strokeWidth="0.5" />
<line
x1={padding.left}
y1={padding.top + chartHeight}
x2={chartWidth - padding.right}
y2={padding.top + chartHeight}
stroke="#e5e7eb"
strokeWidth="1"
/>
{data.map((point, i) => {
const barH = maxValue > 0 ? (point.value / maxValue) * chartHeight : 0;
const x = gap + i * (barWidth + gap);
const y = chartHeight - barH;
const x = padding.left + gap + i * (barWidth + gap);
const y = padding.top + chartHeight - barH;
return (
<g key={i} className="group">
@@ -48,16 +56,16 @@ export function TrendChart({ data, maxValue, height = 120 }: TrendChartProps) {
width={barWidth}
height={barH}
fill="#2D6A4F"
rx="1"
rx="3"
className="transition-all duration-200 hover:fill-[#245a42]"
/>
{/* Label (show every ~7 bars or if narrow) */}
{data.length <= 31 && (
<text
x={x + barWidth / 2}
y={height - 2}
y={height - 8}
textAnchor="middle"
fontSize="2.5"
fontSize="11"
fontWeight="500"
fill="#9ca3af"
>
{point.label.slice(5, 10)}