@beweco/aurora-ui 0.6.64 → 0.6.65

package/dist/index.cjs.js

@@ -6437,6 +6437,10 @@ function ViolinFallback(_a) {
 var MARGIN = { top: 24, right: 16, bottom: 40, left: 44 };
 var VIEW_WIDTH = 640;
 var VIOLIN_HALF_WIDTH = 46;
+/** Espacio extra que reserva cada título de eje cuando se pinta. */
+var AXIS_TITLE_SPACE = 18;
+/** Aire sobre el dato para que el bigote p95 no quede pegado a la línea de arriba. */
+var HEADROOM = 0.05;
 var COLOR_BODY = "#c7d2fe";
 var COLOR_STROKE = "#4338ca";
 var COLOR_MEDIAN = "#1e3a8a";
@@ -6462,25 +6466,38 @@ function formatTick(value, factor, unit) {
  * server-side directo en tests.
  */
 function ViolinPlot(_a) {
-    var groups = _a.groups, valueLabel = _a.valueLabel, _b = _a.baseUnit, baseUnit = _b === void 0 ? "none" : _b, formatValue = _a.formatValue, _c = _a.height, height = _c === void 0 ? 320 : _c, _d = _a.minSampleForViolin, minSampleForViolin = _d === void 0 ? 20 : _d, _e = _a.translations, translations = _e === void 0 ? {} : _e;
+    var groups = _a.groups, valueLabel = _a.valueLabel, groupLabel = _a.groupLabel, _b = _a.baseUnit, baseUnit = _b === void 0 ? "none" : _b, formatValue = _a.formatValue, _c = _a.height, height = _c === void 0 ? 320 : _c, _d = _a.minSampleForViolin, minSampleForViolin = _d === void 0 ? 20 : _d, _e = _a.translations, translations = _e === void 0 ? {} : _e;
     var t = __assign(__assign({}, defaultTranslations$1), translations);
     if (groups.length === 0) {
         return (jsxRuntime.jsx("svg", { viewBox: "0 0 ".concat(VIEW_WIDTH, " ").concat(height), width: "100%", role: "img", "aria-label": valueLabel, children: jsxRuntime.jsx("text", { x: VIEW_WIDTH / 2, y: height / 2, textAnchor: "middle", fill: COLOR_AXIS, children: t.emptyState }) }));
     }
+    var marginLeft = MARGIN.left + (valueLabel ? AXIS_TITLE_SPACE : 0);
+    var marginBottom = MARGIN.bottom + (groupLabel ? AXIS_TITLE_SPACE : 0);
     var plotTop = MARGIN.top;
-    var plotBottom = height - MARGIN.bottom;
+    var plotBottom = height - marginBottom;
     var plotHeight = plotBottom - plotTop;
-    // Escala Y común a todos los grupos (de 0 al p95 máximo, con margen).
-    var maxValue = Math.max.apply(Math, __spreadArray(__spreadArray([], groups.map(function (g) { return g.p95; }), false), [1], false));
+    // Escala Y común a todos los grupos: de 0 al p95 máximo, con aire.
+    //
+    // El suelo NO puede ser un literal en unidad base. Antes era `Math.max(..., 1)`,
+    // que con `baseUnit="d"` fija el techo en 1 día = 86400 s: una distribución de
+    // onboardings de ~5 min (el caso real) se dibujaba entera aplastada contra el 0
+    // y el eje rotulaba "86400s". El único caso que de verdad hay que blindar es la
+    // división por cero, así que el fallback se aplica SOLO si no hay dato ninguno.
+    var dataMax = Math.max.apply(Math, groups.map(function (g) { return g.p95; }));
+    var maxValue = dataMax > 0 ? dataMax * (1 + HEADROOM) : 1;
     var valueToY = function (v) {
         return plotBottom - (v / maxValue) * plotHeight;
     };
-    var refMedian = groups.map(function (g) { return g.p50; }).sort(function (a, b) { return a - b; })[Math.floor(groups.length / 2)];
-    var _f = pickDisplayUnit(refMedian, baseUnit), unit = _f.unit, factor = _f.factor;
+    // La unidad se elige sobre el MÁXIMO, no sobre la mediana: los tres ticks que se
+    // pintan son 0, max/2 y max, así que es el máximo el que decide qué unidad hace
+    // legibles esos números. Con la mediana, un p50 que redondea a 0 devolvía "s" y
+    // el techo del eje se imprimía como 86400 en vez de 1d.
+    var _f = pickDisplayUnit(maxValue, baseUnit), unit = _f.unit, factor = _f.factor;
     var fmt = formatValue !== null && formatValue !== void 0 ? formatValue : (function (v) { return formatTick(v, factor, unit); });
-    var columnWidth = (VIEW_WIDTH - MARGIN.left - MARGIN.right) / groups.length;
-    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 ".concat(VIEW_WIDTH, " ").concat(height), width: "100%", role: "img", "aria-label": valueLabel, children: [[0, maxValue / 2, maxValue].map(function (v) { return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("line", { x1: MARGIN.left, x2: VIEW_WIDTH - MARGIN.right, y1: valueToY(v), y2: valueToY(v), stroke: "#e5e7eb", strokeDasharray: "3 3" }), jsxRuntime.jsx("text", { x: MARGIN.left - 6, y: valueToY(v) + 4, textAnchor: "end", fontSize: 11, fill: COLOR_AXIS, children: fmt(v) })] }, v)); }), groups.map(function (group, i) {
-                var centerX = MARGIN.left + columnWidth * (i + 0.5);
+    var columnWidth = (VIEW_WIDTH - marginLeft - MARGIN.right) / groups.length;
+    var axisTitle = unit ? "".concat(valueLabel, " (").concat(unit, ")") : valueLabel;
+    return (jsxRuntime.jsxs("svg", { viewBox: "0 0 ".concat(VIEW_WIDTH, " ").concat(height), width: "100%", role: "img", "aria-label": valueLabel, children: [[0, maxValue / 2, maxValue].map(function (v) { return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("line", { x1: marginLeft, x2: VIEW_WIDTH - MARGIN.right, y1: valueToY(v), y2: valueToY(v), stroke: "#e5e7eb", strokeDasharray: "3 3" }), jsxRuntime.jsx("text", { x: marginLeft - 6, y: valueToY(v) + 4, textAnchor: "end", fontSize: 11, fill: COLOR_AXIS, children: fmt(v) })] }, v)); }), jsxRuntime.jsx("text", { transform: "translate(12 ".concat(plotTop + plotHeight / 2, ") rotate(-90)"), textAnchor: "middle", fontSize: 12, fill: COLOR_AXIS, children: axisTitle }), groupLabel ? (jsxRuntime.jsx("text", { x: marginLeft + (VIEW_WIDTH - marginLeft - MARGIN.right) / 2, y: height - 6, textAnchor: "middle", fontSize: 12, fill: COLOR_AXIS, children: groupLabel })) : null, groups.map(function (group, i) {
+                var centerX = marginLeft + columnWidth * (i + 0.5);
                 return (jsxRuntime.jsxs("g", { children: [shouldFallback(group, minSampleForViolin) ? (jsxRuntime.jsx(ViolinFallback, { group: group, centerX: centerX, valueToY: valueToY })) : (jsxRuntime.jsx(ViolinBody, { group: group, centerX: centerX, valueToY: valueToY })), jsxRuntime.jsx("text", { x: centerX, y: plotBottom + 16, textAnchor: "middle", fontSize: 12, fill: COLOR_AXIS, children: group.label }), jsxRuntime.jsxs("text", { x: centerX, y: plotBottom + 30, textAnchor: "middle", fontSize: 10, fill: COLOR_AXIS, children: [t.sampleSizeLabel, "=", group.n, group.nExcluded > 0
                                     ? " \u00B7 \u2212".concat(group.nExcluded, " ").concat(t.outliersLabel)
                                     : ""] })] }, group.label));

package/dist/index.esm.js

@@ -6438,6 +6438,10 @@ function ViolinFallback(_a) {
 var MARGIN = { top: 24, right: 16, bottom: 40, left: 44 };
 var VIEW_WIDTH = 640;
 var VIOLIN_HALF_WIDTH = 46;
+/** Espacio extra que reserva cada título de eje cuando se pinta. */
+var AXIS_TITLE_SPACE = 18;
+/** Aire sobre el dato para que el bigote p95 no quede pegado a la línea de arriba. */
+var HEADROOM = 0.05;
 var COLOR_BODY = "#c7d2fe";
 var COLOR_STROKE = "#4338ca";
 var COLOR_MEDIAN = "#1e3a8a";
@@ -6463,25 +6467,38 @@ function formatTick(value, factor, unit) {
  * server-side directo en tests.
  */
 function ViolinPlot(_a) {
-    var groups = _a.groups, valueLabel = _a.valueLabel, _b = _a.baseUnit, baseUnit = _b === void 0 ? "none" : _b, formatValue = _a.formatValue, _c = _a.height, height = _c === void 0 ? 320 : _c, _d = _a.minSampleForViolin, minSampleForViolin = _d === void 0 ? 20 : _d, _e = _a.translations, translations = _e === void 0 ? {} : _e;
+    var groups = _a.groups, valueLabel = _a.valueLabel, groupLabel = _a.groupLabel, _b = _a.baseUnit, baseUnit = _b === void 0 ? "none" : _b, formatValue = _a.formatValue, _c = _a.height, height = _c === void 0 ? 320 : _c, _d = _a.minSampleForViolin, minSampleForViolin = _d === void 0 ? 20 : _d, _e = _a.translations, translations = _e === void 0 ? {} : _e;
     var t = __assign(__assign({}, defaultTranslations$1), translations);
     if (groups.length === 0) {
         return (jsx("svg", { viewBox: "0 0 ".concat(VIEW_WIDTH, " ").concat(height), width: "100%", role: "img", "aria-label": valueLabel, children: jsx("text", { x: VIEW_WIDTH / 2, y: height / 2, textAnchor: "middle", fill: COLOR_AXIS, children: t.emptyState }) }));
     }
+    var marginLeft = MARGIN.left + (valueLabel ? AXIS_TITLE_SPACE : 0);
+    var marginBottom = MARGIN.bottom + (groupLabel ? AXIS_TITLE_SPACE : 0);
     var plotTop = MARGIN.top;
-    var plotBottom = height - MARGIN.bottom;
+    var plotBottom = height - marginBottom;
     var plotHeight = plotBottom - plotTop;
-    // Escala Y común a todos los grupos (de 0 al p95 máximo, con margen).
-    var maxValue = Math.max.apply(Math, __spreadArray(__spreadArray([], groups.map(function (g) { return g.p95; }), false), [1], false));
+    // Escala Y común a todos los grupos: de 0 al p95 máximo, con aire.
+    //
+    // El suelo NO puede ser un literal en unidad base. Antes era `Math.max(..., 1)`,
+    // que con `baseUnit="d"` fija el techo en 1 día = 86400 s: una distribución de
+    // onboardings de ~5 min (el caso real) se dibujaba entera aplastada contra el 0
+    // y el eje rotulaba "86400s". El único caso que de verdad hay que blindar es la
+    // división por cero, así que el fallback se aplica SOLO si no hay dato ninguno.
+    var dataMax = Math.max.apply(Math, groups.map(function (g) { return g.p95; }));
+    var maxValue = dataMax > 0 ? dataMax * (1 + HEADROOM) : 1;
     var valueToY = function (v) {
         return plotBottom - (v / maxValue) * plotHeight;
     };
-    var refMedian = groups.map(function (g) { return g.p50; }).sort(function (a, b) { return a - b; })[Math.floor(groups.length / 2)];
-    var _f = pickDisplayUnit(refMedian, baseUnit), unit = _f.unit, factor = _f.factor;
+    // La unidad se elige sobre el MÁXIMO, no sobre la mediana: los tres ticks que se
+    // pintan son 0, max/2 y max, así que es el máximo el que decide qué unidad hace
+    // legibles esos números. Con la mediana, un p50 que redondea a 0 devolvía "s" y
+    // el techo del eje se imprimía como 86400 en vez de 1d.
+    var _f = pickDisplayUnit(maxValue, baseUnit), unit = _f.unit, factor = _f.factor;
     var fmt = formatValue !== null && formatValue !== void 0 ? formatValue : (function (v) { return formatTick(v, factor, unit); });
-    var columnWidth = (VIEW_WIDTH - MARGIN.left - MARGIN.right) / groups.length;
-    return (jsxs("svg", { viewBox: "0 0 ".concat(VIEW_WIDTH, " ").concat(height), width: "100%", role: "img", "aria-label": valueLabel, children: [[0, maxValue / 2, maxValue].map(function (v) { return (jsxs("g", { children: [jsx("line", { x1: MARGIN.left, x2: VIEW_WIDTH - MARGIN.right, y1: valueToY(v), y2: valueToY(v), stroke: "#e5e7eb", strokeDasharray: "3 3" }), jsx("text", { x: MARGIN.left - 6, y: valueToY(v) + 4, textAnchor: "end", fontSize: 11, fill: COLOR_AXIS, children: fmt(v) })] }, v)); }), groups.map(function (group, i) {
-                var centerX = MARGIN.left + columnWidth * (i + 0.5);
+    var columnWidth = (VIEW_WIDTH - marginLeft - MARGIN.right) / groups.length;
+    var axisTitle = unit ? "".concat(valueLabel, " (").concat(unit, ")") : valueLabel;
+    return (jsxs("svg", { viewBox: "0 0 ".concat(VIEW_WIDTH, " ").concat(height), width: "100%", role: "img", "aria-label": valueLabel, children: [[0, maxValue / 2, maxValue].map(function (v) { return (jsxs("g", { children: [jsx("line", { x1: marginLeft, x2: VIEW_WIDTH - MARGIN.right, y1: valueToY(v), y2: valueToY(v), stroke: "#e5e7eb", strokeDasharray: "3 3" }), jsx("text", { x: marginLeft - 6, y: valueToY(v) + 4, textAnchor: "end", fontSize: 11, fill: COLOR_AXIS, children: fmt(v) })] }, v)); }), jsx("text", { transform: "translate(12 ".concat(plotTop + plotHeight / 2, ") rotate(-90)"), textAnchor: "middle", fontSize: 12, fill: COLOR_AXIS, children: axisTitle }), groupLabel ? (jsx("text", { x: marginLeft + (VIEW_WIDTH - marginLeft - MARGIN.right) / 2, y: height - 6, textAnchor: "middle", fontSize: 12, fill: COLOR_AXIS, children: groupLabel })) : null, groups.map(function (group, i) {
+                var centerX = marginLeft + columnWidth * (i + 0.5);
                 return (jsxs("g", { children: [shouldFallback(group, minSampleForViolin) ? (jsx(ViolinFallback, { group: group, centerX: centerX, valueToY: valueToY })) : (jsx(ViolinBody, { group: group, centerX: centerX, valueToY: valueToY })), jsx("text", { x: centerX, y: plotBottom + 16, textAnchor: "middle", fontSize: 12, fill: COLOR_AXIS, children: group.label }), jsxs("text", { x: centerX, y: plotBottom + 30, textAnchor: "middle", fontSize: 10, fill: COLOR_AXIS, children: [t.sampleSizeLabel, "=", group.n, group.nExcluded > 0
                                     ? " \u00B7 \u2212".concat(group.nExcluded, " ").concat(t.outliersLabel)
                                     : ""] })] }, group.label));

package/dist/types/components/violin-plot/ViolinPlot.d.ts

@@ -9,6 +9,6 @@ import type { ViolinPlotProps } from "./ViolinPlot.types";
  * `<svg viewBox>` + `width="100%"`. Autocontenido, sin HeroUI, para render
  * server-side directo en tests.
  */
-export declare function ViolinPlot({ groups, valueLabel, baseUnit, formatValue, height, minSampleForViolin, translations, }: ViolinPlotProps): import("react/jsx-runtime").JSX.Element;
+export declare function ViolinPlot({ groups, valueLabel, groupLabel, baseUnit, formatValue, height, minSampleForViolin, translations, }: ViolinPlotProps): import("react/jsx-runtime").JSX.Element;
 export default ViolinPlot;
 //# sourceMappingURL=ViolinPlot.d.ts.map

package/dist/types/components/violin-plot/ViolinPlot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViolinPlot.d.ts","sourceRoot":"","sources":["../../../../src/components/violin-plot/ViolinPlot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEX,eAAe,EAEf,MAAM,oBAAoB,CAAC;AA2B5B;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EAC1B,MAAM,EACN,UAAU,EACV,QAAiB,EACjB,WAAW,EACX,MAAY,EACZ,kBAAuB,EACvB,YAAiB,GACjB,EAAE,eAAe,2CA4GjB;AA2DD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ViolinPlot.d.ts","sourceRoot":"","sources":["../../../../src/components/violin-plot/ViolinPlot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEX,eAAe,EAEf,MAAM,oBAAoB,CAAC;AA+B5B;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EAC1B,MAAM,EACN,UAAU,EACV,UAAU,EACV,QAAiB,EACjB,WAAW,EACX,MAAY,EACZ,kBAAuB,EACvB,YAAiB,GACjB,EAAE,eAAe,2CA8IjB;AA2DD,eAAe,UAAU,CAAC"}

package/dist/types/components/violin-plot/ViolinPlot.types.d.ts

@@ -37,7 +37,15 @@ export interface ViolinPlotTranslations {
 }
 export interface ViolinPlotProps {
     groups: ViolinGroup[];
+    /**
+     * Nombre de la magnitud medida, SIN unidad — se pinta como título del eje Y y
+     * el componente le añade la unidad que haya resuelto (`Tiempo de setup (min)`).
+     * Escribir la unidad aquí ("Días hasta completar") acaba contradiciendo al eje
+     * en cuanto `pickDisplayUnit` elige otra escala.
+     */
     valueLabel: string;
+    /** Dimensión por la que se agrupan las columnas (título del eje X, p.ej. "Carril"). */
+    groupLabel?: string;
     baseUnit?: BaseUnit;
     formatValue?: (value: number) => string;
     height?: number;

package/dist/types/components/violin-plot/ViolinPlot.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViolinPlot.types.d.ts","sourceRoot":"","sources":["../../../../src/components/violin-plot/ViolinPlot.types.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAC1E,MAAM,WAAW,SAAS;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACd;AAED,wEAAwE;AACxE,MAAM,MAAM,QAAQ,GAAG,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC;AAExD;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,SAAS,EAAE,MAAM,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACtC,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,eAAe;IAC/B,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,sBAAsB,CAAC;CACtC"}
+{"version":3,"file":"ViolinPlot.types.d.ts","sourceRoot":"","sources":["../../../../src/components/violin-plot/ViolinPlot.types.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAC1E,MAAM,WAAW,SAAS;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACd;AAED,wEAAwE;AACxE,MAAM,MAAM,QAAQ,GAAG,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC;AAExD;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,SAAS,EAAE,MAAM,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACtC,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,eAAe;IAC/B,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB;;;;;OAKG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,sBAAsB,CAAC;CACtC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@beweco/aurora-ui",
-	"version": "0.6.64",
+	"version": "0.6.65",
 	"description": "Bewe Aurora UI Component Library",
 	"main": "./dist/index.cjs.js",
 	"module": "./dist/index.esm.js",