@axzydev/axzy_ui_system 1.4.6 → 1.4.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +27 -15
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +27 -15
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/molecules/line-bar-chart/line-bar-chart.tsx +24 -15
package/package.json
CHANGED
|
@@ -58,8 +58,15 @@ export function ITLineBarChart({
|
|
|
58
58
|
|
|
59
59
|
const active = hover !== null ? data[hover] : null;
|
|
60
60
|
|
|
61
|
+
/** Posición del tooltip en % del ancho, para que siga al punto sin salir del gráfico. */
|
|
62
|
+
const tooltipLeft = (() => {
|
|
63
|
+
if (hover === null) return 0;
|
|
64
|
+
const center = (x(hover) / width) * 100;
|
|
65
|
+
return Math.min(Math.max(center, 12), 88);
|
|
66
|
+
})();
|
|
67
|
+
|
|
61
68
|
return (
|
|
62
|
-
<div className={`flex flex-col gap-3 ${className}`.trim()}>
|
|
69
|
+
<div className={`relative flex flex-col gap-3 ${className}`.trim()}>
|
|
63
70
|
<svg
|
|
64
71
|
role="img"
|
|
65
72
|
aria-label={ariaLabel}
|
|
@@ -136,22 +143,24 @@ export function ITLineBarChart({
|
|
|
136
143
|
</g>
|
|
137
144
|
))}
|
|
138
145
|
|
|
139
|
-
{active && hover !== null && (
|
|
140
|
-
<g transform={`translate(${Math.min(Math.max(x(hover) - 62, 4), width - 132)}, ${padding.top + 4})`}>
|
|
141
|
-
<rect width={128} height={46} rx={6} fill="#0f172a" opacity={0.9} />
|
|
142
|
-
<text x={10} y={18} fontSize={10} fill="#e2e8f0">
|
|
143
|
-
{active.label}
|
|
144
|
-
</text>
|
|
145
|
-
<text x={10} y={32} fontSize={10} fill={lineColor}>
|
|
146
|
-
{lineLabel}: {formatValue(active.line)}
|
|
147
|
-
</text>
|
|
148
|
-
<text x={10} y={44} fontSize={10} fill="#93c5fd">
|
|
149
|
-
{barLabel}: {formatValue(active.bar)}
|
|
150
|
-
</text>
|
|
151
|
-
</g>
|
|
152
|
-
)}
|
|
153
146
|
</svg>
|
|
154
147
|
|
|
148
|
+
{active && (
|
|
149
|
+
<div
|
|
150
|
+
className="pointer-events-none absolute z-10 -translate-x-1/2 rounded-lg px-2.5 py-1.5 shadow-lg"
|
|
151
|
+
style={{ left: `${tooltipLeft}%`, top: 4, background: "#0f172a", opacity: 0.94, minWidth: 132 }}
|
|
152
|
+
role="status"
|
|
153
|
+
>
|
|
154
|
+
<p className="text-[10px] font-semibold" style={{ color: "#e2e8f0" }}>{active.label}</p>
|
|
155
|
+
<p className="text-[11px] tabular-nums" style={{ color: lineColor }}>
|
|
156
|
+
{lineLabel}: {formatValue(active.line)}
|
|
157
|
+
</p>
|
|
158
|
+
<p className="text-[11px] tabular-nums" style={{ color: "#93c5fd" }}>
|
|
159
|
+
{barLabel}: {formatValue(active.bar)}
|
|
160
|
+
</p>
|
|
161
|
+
</div>
|
|
162
|
+
)}
|
|
163
|
+
|
|
155
164
|
<ul className="flex flex-wrap items-center gap-4 text-[11px]" style={{ color: "#475569" }}>
|
|
156
165
|
<li>
|
|
157
166
|
<span className="h-2.5 w-2.5 rounded-sm" style={{ background: lineColor }} aria-hidden />
|