@stackcraftmx/calcita 0.0.0-stage → 0.25.0

package/dist/ui/metrics/CalendarHeatmap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarHeatmap.js","sources":["../../../src/ui/metrics/CalendarHeatmap.jsx"],"sourcesContent":["// Calendario de actividad: un cuadro por día, semanas en columnas (el de GitHub).\n//\n// Sirve para ver RITMO de un vistazo: qué días llegan cargas, si hubo semanas muertas, si la actividad crece. Las\n// reglas de visualización:\n//   - es MAGNITUD, así que va un solo tono de claro a oscuro (el del tono que se pida), en cuatro niveles más \"sin\n//     actividad\". Nunca un arcoíris. Se arma con color-mix sobre el color del tema (su variable CSS si el tema las usa),\n//     sin hexadecimales: en modo oscuro los mismos niveles se ven sobre su propia superficie;\n//   - los niveles se cortan por CUARTILES de los días con actividad (heatmapScale.js), no por valores fijos;\n//   - leyenda \"Menos → Más\", tooltip por día con el número exacto (el color solo nunca dice cuánto) y VISTA DE TABLA\n//     (para lector de pantalla, para quien no distingue el tono y para copiar los números).\n//\n// Sin librería a propósito: el Heatmap de MUI X Charts es de la edición Pro, que pide licencia.\n//\n// Textos por props y del paquete, y fechas con los formatos del paquete.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useMemo, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport Table from '@mui/material/Table';\nimport TableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableHead from '@mui/material/TableHead';\nimport TableRow from '@mui/material/TableRow';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {HEATMAP_LEVELS, calendarWeeksOf, levelOf} from '@/ui/metrics/heatmapScale.js';\nimport TableToggle, {CHART_VIEW} from '@/ui/metrics/TableToggle.jsx';\n\n// cuadros de 12 px en teléfono (el calendario se desliza) y de 16 px desde md, donde el panel ocupa todo el ancho\nconst CELL_PIXELS = {xs: 12, md: 16};\nconst GAP_PIXELS = 3;\n// solo lunes, miércoles y viernes llevan rótulo: los siete encimados no se leen a 12 px\nconst LABELED_WEEKDAYS = new Set([1, 3, 5]);\n// porcentaje del tono en cada nivel; el nivel 0 es el gris de \"hover\" del tema\nconst LEVEL_TONE_PERCENT = {1: 30, 2: 55, 3: 78, 4: 100};\n\n/**\n * Relleno de un nivel con los colores del tema.\n *\n * @param {object} theme tema de MUI (con o sin variables CSS)\n * @param {string} tone primary, info, success...\n * @param {number} level 0 a 4\n * @returns {string} color CSS\n */\nfunction levelFill(theme, tone, level) {\n    // un tema con variables CSS las trae en theme.vars; el tema por omisión de MUI, solo en theme.palette\n    const {palette} = theme.vars ?? theme;\n    if (level === 0) {\n        return palette.action.hover;\n    }\n    return `color-mix(in srgb, ${palette[tone].main} ${LEVEL_TONE_PERCENT[level]}%, transparent)`;\n}\n\n/**\n * @param {object} props\n * @param {string} props.startsOn primer día del rango (\"2025-09-16\"), fecha de calendario\n * @param {string} props.endsOn último día del rango (\"2026-09-15\")\n * @param {Array<{date: string, value: number, detail?: string}>} props.days solo los días con actividad; el resto vale\n *     0\n * @param {string} props.ariaLabel qué muestra el calendario, ya traducido\n * @param {string} props.valueLabel encabezado de la columna de valor en la tabla (\"Registros leídos\")\n * @param {(value: number) => string} props.describeValue el valor en palabras para el tooltip (\"120 registros leídos\")\n * @param {import('react').ReactNode} [props.summary] renglón de resumen arriba del calendario\n * @param {string} [props.emptyLabel] qué decir si ningún día tiene actividad\n * @param {'primary'|'info'|'success'|'warning'|'error'} [props.tone]\n * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada\n * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function CalendarHeatmap({startsOn, endsOn, days, ariaLabel, valueLabel, describeValue, summary, emptyLabel, tone = 'primary', texts, defaultView = CHART_VIEW.chart, onViewChange}) {\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatDate, formatMonthShortName, formatNumber, formatWeekdayShortName} = useFormatters();\n    const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);\n    const toggleView = () => {\n        setAsTable(!asTable);\n        onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);\n    };\n\n    const {weeks, monthMarks, thresholds} = useMemo(() => calendarWeeksOf({startsOn, endsOn, days}), [startsOn, endsOn, days]);\n    const activeDays = days.filter((day) => day.value > 0);\n\n    return (\n        <Box>\n            <Stack direction=\"row\" spacing={2} sx={{justifyContent: 'space-between', alignItems: 'center', mb: 1}}>\n                <Typography variant=\"body2\" color=\"text.secondary\">\n                    {activeDays.length ? summary : emptyLabel}\n                </Typography>\n                <Box sx={{flexShrink: 0}}>\n                    <TableToggle asTable={asTable} onToggle={toggleView} texts={texts} />\n                </Box>\n            </Stack>\n\n            {asTable ? (\n                <Box sx={{maxHeight: 260, overflowY: 'auto'}}>\n                    <Table size=\"small\" aria-label={ariaLabel}>\n                        <TableHead>\n                            <TableRow>\n                                <TableCell>{t('charts.day')}</TableCell>\n                                <TableCell align=\"right\">{valueLabel}</TableCell>\n                                <TableCell />\n                            </TableRow>\n                        </TableHead>\n                        <TableBody>\n                            {[...activeDays].reverse().map((day) => (\n                                <TableRow key={day.date}>\n                                    <TableCell sx={{whiteSpace: 'nowrap'}}>{formatDate(day.date)}</TableCell>\n                                    <TableCell align=\"right\" sx={{fontVariantNumeric: 'tabular-nums'}}>{formatNumber(day.value)}</TableCell>\n                                    <TableCell sx={{color: 'text.secondary'}}>{day.detail}</TableCell>\n                                </TableRow>\n                            ))}\n                        </TableBody>\n                    </Table>\n                </Box>\n            ) : (\n                // el calendario no se encoge: en pantallas angostas se desliza y arranca mostrando lo más reciente\n                <Box sx={{overflowX: 'auto', pb: 0.5}}\n                     ref={(node) => {\n                         if (node) {\n                             node.scrollLeft = node.scrollWidth;\n                         }\n                     }}>\n                    <Box role=\"img\" aria-label={ariaLabel}\n                         sx={{\n                             display: 'inline-grid',\n                             gridTemplateColumns: {\n                                 xs: `auto repeat(${weeks.length}, ${CELL_PIXELS.xs}px)`,\n                                 md: `auto repeat(${weeks.length}, ${CELL_PIXELS.md}px)`,\n                             },\n                             columnGap: `${GAP_PIXELS}px`,\n                             rowGap: `${GAP_PIXELS}px`,\n                             alignItems: 'center',\n                         }}>\n                        <Box />\n                        {monthMarks.map((month, column) => (\n                            <Typography key={`month-${column}`} variant=\"caption\" color=\"text.secondary\"\n                                        sx={{fontSize: 10, lineHeight: 1, whiteSpace: 'nowrap', overflow: 'visible', width: CELL_PIXELS}}>\n                                {month ? formatMonthShortName(month) : ''}\n                            </Typography>\n                        ))}\n                        {[1, 2, 3, 4, 5, 6, 7].map((isoWeekday) => (\n                            <Box key={`weekday-${isoWeekday}`} sx={{display: 'contents'}}>\n                                <Typography variant=\"caption\" color=\"text.secondary\"\n                                            sx={{fontSize: 10, lineHeight: {xs: `${CELL_PIXELS.xs}px`, md: `${CELL_PIXELS.md}px`}, pr: 0.75}}>\n                                    {LABELED_WEEKDAYS.has(isoWeekday) ? formatWeekdayShortName(isoWeekday) : ''}\n                                </Typography>\n                                {weeks.map((week, column) => {\n                                    const day = week[isoWeekday - 1];\n                                    if (!day) {\n                                        return <Box key={`outside-${column}-${isoWeekday}`} />;\n                                    }\n                                    const level = levelOf(day.value, thresholds);\n                                    return (\n                                        <Tooltip key={day.date} arrow disableInteractive\n                                                 title={`${formatDate(day.date)}: ${describeValue(day.value)}${day.detail ? ` · ${day.detail}` : ''}`}>\n                                            <Box sx={(theme) => ({width: CELL_PIXELS, height: CELL_PIXELS, borderRadius: '3px', bgcolor: levelFill(theme, tone, level)})} />\n                                        </Tooltip>\n                                    );\n                                })}\n                            </Box>\n                        ))}\n                    </Box>\n                </Box>\n            )}\n\n            {!asTable && (\n                <Stack direction=\"row\" spacing={0.5} sx={{alignItems: 'center', justifyContent: 'flex-end', mt: 1}} aria-hidden=\"true\">\n                    <Typography variant=\"caption\" color=\"text.secondary\" sx={{mr: 0.5}}>{t('charts.less')}</Typography>\n                    {HEATMAP_LEVELS.map((level) => (\n                        <Box key={level} sx={(theme) => ({width: CELL_PIXELS, height: CELL_PIXELS, borderRadius: '3px', bgcolor: levelFill(theme, tone, level)})} />\n                    ))}\n                    <Typography variant=\"caption\" color=\"text.secondary\" sx={{ml: 0.5}}>{t('charts.more')}</Typography>\n                </Stack>\n            )}\n        </Box>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/metrics/ChartTooltip.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
+import { isGlassTheme, glassStylesOf } from "../../theme/glassSurface.js";
+const CHART_TOOLTIP_OPACITY = 0.92;
+function ChartTooltip({ active, payload, render }) {
+  if (!active || !payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Paper, { elevation: 3, sx: [{ px: 1.5, py: 1, pointerEvents: "none" }, (theme) => isGlassTheme(theme) ? glassStylesOf(theme, { opacity: CHART_TOOLTIP_OPACITY }) : {}], children: /* @__PURE__ */ jsx(Typography, { variant: "body2", component: "div", children: render(payload[0].payload) }) });
+}
+export {
+  ChartTooltip as default
+};
+//# sourceMappingURL=ChartTooltip.js.map

package/dist/ui/metrics/ChartTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.js","sources":["../../../src/ui/metrics/ChartTooltip.jsx"],"sourcesContent":["// El tooltip de las gráficas de Recharts con el look de la app. Se exporta para las gráficas propias del proyecto con\n// recharts (una de pastel, una de área): <Tooltip content={<ChartTooltip render={(row) => …} />} />.\n//\n// El de Recharts trae su propio estilo (fondo blanco, borde gris); este usa el Paper del tema y habla igual que los\n// tooltips del resto de la app (y se voltea solo cuando llegue el modo oscuro). Con el vidrio del tema\n// (createToolkitTheme({glass: true})) es de vidrio: flota sobre la gráfica.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Paper from '@mui/material/Paper';\nimport Typography from '@mui/material/Typography';\n\nimport {glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\n\n// el vidrio del cuadrito, casi opaco (el material «grueso»): es para leer una cifra encima de la gráfica; con el vidrio de\n// los controles (60 %) se veía la barra de atrás a través del texto (lo reportaron)\nconst CHART_TOOLTIP_OPACITY = 0.92;\n\n/**\n * @param {{active?: boolean, payload?: Array<{payload: any}>, render: (item: any) => import('react').ReactNode}} props\n *     active y payload los pone recharts; render recibe el renglón de data del punto o la columna\n */\nexport default function ChartTooltip({active, payload, render}) {\n    // guard clause: Recharts lo monta siempre; solo se pinta sobre una barra\n    if (!active || !payload?.length) {\n        return null;\n    }\n    return (\n        <Paper elevation={3} sx={[{px: 1.5, py: 1, pointerEvents: 'none'}, (theme) => (isGlassTheme(theme) ? glassStylesOf(theme, {opacity: CHART_TOOLTIP_OPACITY}) : {})]}>\n            {/* div: el globo puede llevar varios renglones (una serie por renglón) */}\n            <Typography variant=\"body2\" component=\"div\">{render(payload[0].payload)}</Typography>\n        </Paper>\n    );\n}\n"],"names":[],"mappings":";;;;;AAeA,MAAM,wBAAwB;AAM9B,SAAwB,aAAa,EAAC,QAAQ,SAAS,UAAS;AAE5D,MAAI,CAAC,UAAU,CAAC,SAAS,QAAQ;AAC7B,WAAO;AAAA,EACX;AACA,6BACK,OAAA,EAAM,WAAW,GAAG,IAAI,CAAC,EAAC,IAAI,KAAK,IAAI,GAAG,eAAe,UAAS,CAAC,UAAW,aAAa,KAAK,IAAI,cAAc,OAAO,EAAC,SAAS,sBAAA,CAAsB,IAAI,EAAG,GAE7J,UAAA,oBAAC,YAAA,EAAW,SAAQ,SAAQ,WAAU,OAAO,UAAA,OAAO,QAAQ,CAAC,EAAE,OAAO,GAAE,GAC5E;AAER;"}

package/dist/ui/metrics/ColumnChart.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine, Bar } from "recharts";
+import { useFormatters } from "../../toolkit/useFormatters.js";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import ChartTooltip from "./ChartTooltip.js";
+import TableToggle, { CHART_VIEW } from "./TableToggle.js";
+import { useChartColors, resolvedSeriesOf, highestValueOf, ChartTable, valueAxisWidthOf, ChartLegend, ReferenceCaption } from "./chartParts.js";
+const SINGLE_SERIES_KEY = "value";
+function ColumnChart({
+  data,
+  periodLabel,
+  valueLabel,
+  series,
+  ariaLabel,
+  emptyLabel,
+  height = 220,
+  tone = "primary",
+  onSelect,
+  formatValue: formatValueProp,
+  referenceLine,
+  renderTooltip,
+  texts,
+  defaultView = CHART_VIEW.chart,
+  onViewChange
+}) {
+  const { t } = useToolkitTranslation("common", texts);
+  const { formatNumber } = useFormatters();
+  const formatValue = formatValueProp ?? formatNumber;
+  const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);
+  const toggleView = () => {
+    setAsTable(!asTable);
+    onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);
+  };
+  const isSingleSeries = !series?.length;
+  const colors = useChartColors();
+  const drawnSeries = resolvedSeriesOf(isSingleSeries ? [{ key: SINGLE_SERIES_KEY, label: valueLabel, tone }] : series, colors.palette);
+  if (!data.length) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: emptyLabel });
+  }
+  const highestValue = highestValueOf(data, drawnSeries, referenceLine);
+  const tooltipOf = renderTooltip ?? ((row) => isSingleSeries ? row.tooltip ?? `${row.label}: ${formatValue(row.value)}` : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("strong", { children: row.label }),
+    drawnSeries.map((item) => /* @__PURE__ */ jsxs(Box, { children: [
+      item.label,
+      ": ",
+      formatValue(row[item.key])
+    ] }, item.key))
+  ] }));
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(TableToggle, { asTable, onToggle: toggleView, texts }),
+    asTable ? /* @__PURE__ */ jsx(ChartTable, { data, series: drawnSeries, periodLabel, formatValue, height }) : /* @__PURE__ */ jsx(Box, { role: "img", "aria-label": ariaLabel, sx: { height, color: `${tone}.main` }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart, { data, margin: { top: 8, right: 8, bottom: 0, left: -8 }, barCategoryGap: 4, children: [
+      /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: colors.grid }),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: "label",
+          tick: colors.axisText,
+          tickLine: false,
+          axisLine: { stroke: colors.grid },
+          interval: "preserveStartEnd",
+          minTickGap: 12
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          allowDecimals: false,
+          tick: colors.axisText,
+          tickLine: false,
+          axisLine: false,
+          width: valueAxisWidthOf(highestValue, formatValue),
+          tickFormatter: (value) => formatValue(value)
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, { cursor: { fill: colors.hover }, content: /* @__PURE__ */ jsx(ChartTooltip, { render: tooltipOf }) }),
+      referenceLine && // extendDomain: si la referencia queda arriba de todas las columnas, el eje crece hasta ella
+      /* @__PURE__ */ jsx(ReferenceLine, { y: referenceLine.value, ifOverflow: "extendDomain", stroke: colors.axis, strokeDasharray: "4 4" }),
+      drawnSeries.map((item) => (
+        // una serie: currentColor (el tono de la caja); varias: el color de cada una
+        /* @__PURE__ */ jsx(
+          Bar,
+          {
+            dataKey: item.key,
+            fill: isSingleSeries ? "currentColor" : item.color,
+            maxBarSize: 28,
+            radius: [4, 4, 0, 0],
+            isAnimationActive: false,
+            cursor: onSelect ? "pointer" : "default",
+            onClick: onSelect ? (entry) => onSelect(entry.payload, item.key) : void 0
+          },
+          item.key
+        )
+      ))
+    ] }) }) }),
+    /* @__PURE__ */ jsx(ChartLegend, { series: drawnSeries, ariaLabel: t("charts.legend") }),
+    /* @__PURE__ */ jsx(ReferenceCaption, { referenceLine })
+  ] });
+}
+export {
+  ColumnChart as default
+};
+//# sourceMappingURL=ColumnChart.js.map

package/dist/ui/metrics/ColumnChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnChart.js","sources":["../../../src/ui/metrics/ColumnChart.jsx"],"sourcesContent":["// Columnas a lo largo del tiempo (p. ej. registros leídos por mes), dibujadas con Recharts: una serie (data con `value`) o\n// varias agrupadas por periodo (`series`, cada una con su llave en data: ventas y devoluciones por mes).\n//\n// Recharts y no SVG a mano: ejes, escalas, rótulos que no se encimen y el tooltip ya los resolvió la librería. Lo que se\n// decide aquí son las reglas de visualización:\n//   - una serie → un color (el del tono vía currentColor) y SIN leyenda: el título ya dice qué es; varias → cada una su color\n//     y leyenda abajo (chartParts.jsx, lo que comparte con LineChart);\n//   - columnas de 28 px como máximo, punta redondeada, base cuadrada;\n//   - rejilla horizontal de 1 px, sólida y recesiva; el texto de los ejes en tinta secundaria;\n//   - tooltip por columna y VISTA DE TABLA;\n//   - una línea de referencia opcional (p. ej. la meta), punteada y en tinta secundaria: se lee sin competir con las\n//     columnas, y el eje crece lo necesario para que siempre se vea. Su rótulo va debajo de la gráfica y no sobre la\n//     línea, donde se encimaba con la columna del último mes; así también lo lee quien ve la tabla.\n//\n// El valor se escribe con formatValue (por omisión, número con separador de miles): con él una serie puede ir en\n// porcentaje. El eje mide lo que mide su número más largo, para que «2,500,000» no salga cortado.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport {Bar, BarChart, CartesianGrid, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport ChartTooltip from '@/ui/metrics/ChartTooltip.jsx';\nimport TableToggle, {CHART_VIEW} from '@/ui/metrics/TableToggle.jsx';\nimport {\n    ChartLegend, ChartTable, ReferenceCaption, highestValueOf, resolvedSeriesOf, useChartColors, valueAxisWidthOf,\n} from '@/ui/metrics/chartParts.jsx';\n\n// la llave del valor cuando la gráfica es de una sola serie\nconst SINGLE_SERIES_KEY = 'value';\n\n/**\n * @param {object} props\n * @param {Array<Record<string, any>>} props.data un renglón por periodo: {key, label, value, tooltip?} con una serie, o\n *     {key, label, [llave de cada serie]: número} con varias\n * @param {string} props.periodLabel encabezado de la primera columna de la tabla («Mes»), ya traducido\n * @param {string} [props.valueLabel] cómo se llama lo que se cuenta, ya traducido (una serie)\n * @param {Array<{key: string, label: string, tone?: 'primary'|'secondary'|'success'|'warning'|'error'|'info'}>} [props.series]\n *     varias series agrupadas: la llave de cada una en data, su nombre ya traducido y su color (por omisión, en orden)\n * @param {string} props.ariaLabel\n * @param {string} props.emptyLabel\n * @param {number} [props.height]\n * @param {'primary'|'success'|'warning'|'error'|'info'} [props.tone] el color de una sola serie\n * @param {(item: any, seriesKey: string) => void} [props.onSelect] recibe el renglón de data que se picó y la serie\n * @param {(value: number) => string} [props.formatValue] cómo se escribe un valor (en el eje, en la tabla y en el\n *     tooltip)\n * @param {{value: number, label: string}} [props.referenceLine] línea de referencia con su rótulo ya traducido («Meta:\n *     10 %»)\n * @param {(row: any) => import('react').ReactNode} [props.renderTooltip] lo que dice el globo de un periodo; por omisión su\n *     nombre y el valor de cada serie\n * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada\n * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {charts: {viewAsTable, viewAsChart, legend}}\n */\nexport default function ColumnChart({\n    data, periodLabel, valueLabel, series, ariaLabel, emptyLabel, height = 220, tone = 'primary', onSelect, formatValue: formatValueProp,\n    referenceLine, renderTooltip, texts, defaultView = CHART_VIEW.chart, onViewChange,\n}) {\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatNumber} = useFormatters();\n    const formatValue = formatValueProp ?? formatNumber;\n    const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);\n    const toggleView = () => {\n        setAsTable(!asTable);\n        onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);\n    };\n    const isSingleSeries = !series?.length;\n    const colors = useChartColors();\n    const drawnSeries = resolvedSeriesOf(isSingleSeries ? [{key: SINGLE_SERIES_KEY, label: valueLabel, tone}] : series, colors.palette);\n\n    // guard clause: sin datos se dice, no se pinta un eje vacío\n    if (!data.length) {\n        return <Typography variant=\"body2\" color=\"text.secondary\">{emptyLabel}</Typography>;\n    }\n\n    // el valor más alto que se dibuja (el de las columnas o el de la línea de referencia) decide el ancho del eje\n    const highestValue = highestValueOf(data, drawnSeries, referenceLine);\n    const tooltipOf = renderTooltip ?? ((row) => (isSingleSeries\n        ? row.tooltip ?? `${row.label}: ${formatValue(row.value)}`\n        : (\n            <>\n                <strong>{row.label}</strong>\n                {drawnSeries.map((item) => <Box key={item.key}>{item.label}: {formatValue(row[item.key])}</Box>)}\n            </>\n        )));\n\n    return (\n        <Box>\n            <TableToggle asTable={asTable} onToggle={toggleView} texts={texts} />\n            {asTable ? (\n                <ChartTable data={data} series={drawnSeries} periodLabel={periodLabel} formatValue={formatValue} height={height} />\n            ) : (\n                <Box role=\"img\" aria-label={ariaLabel} sx={{height, color: `${tone}.main`}}>\n                    <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        <BarChart data={data} margin={{top: 8, right: 8, bottom: 0, left: -8}} barCategoryGap={4}>\n                            <CartesianGrid vertical={false} stroke={colors.grid} />\n                            <XAxis dataKey=\"label\" tick={colors.axisText} tickLine={false} axisLine={{stroke: colors.grid}}\n                                   interval=\"preserveStartEnd\" minTickGap={12} />\n                            <YAxis allowDecimals={false} tick={colors.axisText} tickLine={false} axisLine={false}\n                                   width={valueAxisWidthOf(highestValue, formatValue)} tickFormatter={(value) => formatValue(value)} />\n                            <Tooltip cursor={{fill: colors.hover}} content={<ChartTooltip render={tooltipOf} />} />\n                            {referenceLine && (\n                                // extendDomain: si la referencia queda arriba de todas las columnas, el eje crece hasta ella\n                                <ReferenceLine y={referenceLine.value} ifOverflow=\"extendDomain\" stroke={colors.axis} strokeDasharray=\"4 4\" />\n                            )}\n                            {drawnSeries.map((item) => (\n                                // una serie: currentColor (el tono de la caja); varias: el color de cada una\n                                <Bar key={item.key} dataKey={item.key} fill={isSingleSeries ? 'currentColor' : item.color} maxBarSize={28}\n                                     radius={[4, 4, 0, 0]} isAnimationActive={false} cursor={onSelect ? 'pointer' : 'default'}\n                                     onClick={onSelect ? (entry) => onSelect(entry.payload, item.key) : undefined} />\n                            ))}\n                        </BarChart>\n                    </ResponsiveContainer>\n                </Box>\n            )}\n            <ChartLegend series={drawnSeries} ariaLabel={t('charts.legend')} />\n            <ReferenceCaption referenceLine={referenceLine} />\n        </Box>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/metrics/LineChart.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { ResponsiveContainer, LineChart as LineChart$1, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine, Line } from "recharts";
+import { useFormatters } from "../../toolkit/useFormatters.js";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import ChartTooltip from "./ChartTooltip.js";
+import TableToggle, { CHART_VIEW } from "./TableToggle.js";
+import { useChartColors, resolvedSeriesOf, highestValueOf, ChartTable, valueAxisWidthOf, ChartLegend, ReferenceCaption } from "./chartParts.js";
+const LINE_WIDTH_PIXELS = 2;
+const DOT_RADIUS_PIXELS = 3;
+const ACTIVE_DOT_RADIUS_PIXELS = 5;
+function LineChart({
+  data,
+  series,
+  periodLabel,
+  ariaLabel,
+  emptyLabel,
+  height = 220,
+  formatValue: formatValueProp,
+  referenceLine,
+  onSelect,
+  renderTooltip,
+  texts,
+  defaultView = CHART_VIEW.chart,
+  onViewChange
+}) {
+  const { t } = useToolkitTranslation("common", texts);
+  const { formatNumber } = useFormatters();
+  const formatValue = formatValueProp ?? formatNumber;
+  const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);
+  const toggleView = () => {
+    setAsTable(!asTable);
+    onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);
+  };
+  const colors = useChartColors();
+  const drawnSeries = resolvedSeriesOf(series, colors.palette);
+  if (!data.length) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: emptyLabel });
+  }
+  const highestValue = highestValueOf(data, drawnSeries, referenceLine);
+  const selectPeriodAt = (activeIndex) => {
+    const row = data[Number(activeIndex)];
+    if (row) {
+      onSelect(row);
+    }
+  };
+  const tooltipOf = renderTooltip ?? ((row) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("strong", { children: row.label }),
+    drawnSeries.map((item) => /* @__PURE__ */ jsxs(Box, { children: [
+      item.label,
+      ": ",
+      formatValue(row[item.key])
+    ] }, item.key))
+  ] }));
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(TableToggle, { asTable, onToggle: toggleView, texts }),
+    asTable ? /* @__PURE__ */ jsx(ChartTable, { data, series: drawnSeries, periodLabel, formatValue, height }) : /* @__PURE__ */ jsx(Box, { role: "img", "aria-label": ariaLabel, sx: { height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+      LineChart$1,
+      {
+        data,
+        margin: { top: 8, right: 12, bottom: 0, left: -8 },
+        onClick: onSelect ? (state) => selectPeriodAt(state?.activeIndex) : void 0,
+        children: [
+          /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: colors.grid }),
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: "label",
+              tick: colors.axisText,
+              tickLine: false,
+              axisLine: { stroke: colors.grid },
+              interval: "preserveStartEnd",
+              minTickGap: 12
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              allowDecimals: false,
+              tick: colors.axisText,
+              tickLine: false,
+              axisLine: false,
+              width: valueAxisWidthOf(highestValue, formatValue),
+              tickFormatter: (value) => formatValue(value)
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { cursor: { stroke: colors.grid }, content: /* @__PURE__ */ jsx(ChartTooltip, { render: tooltipOf }) }),
+          referenceLine && /* @__PURE__ */ jsx(ReferenceLine, { y: referenceLine.value, ifOverflow: "extendDomain", stroke: colors.axis, strokeDasharray: "4 4" }),
+          drawnSeries.map((item) => /* @__PURE__ */ jsx(
+            Line,
+            {
+              type: "monotone",
+              dataKey: item.key,
+              name: item.label,
+              stroke: item.color,
+              strokeWidth: LINE_WIDTH_PIXELS,
+              strokeDasharray: item.dash,
+              isAnimationActive: false,
+              dot: { r: DOT_RADIUS_PIXELS, fill: item.color, strokeWidth: 0 },
+              activeDot: { r: ACTIVE_DOT_RADIUS_PIXELS, cursor: onSelect ? "pointer" : "default" }
+            },
+            item.key
+          ))
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(ChartLegend, { series: drawnSeries, showsDash: true, ariaLabel: t("charts.legend") }),
+    /* @__PURE__ */ jsx(ReferenceCaption, { referenceLine })
+  ] });
+}
+export {
+  LineChart as default
+};
+//# sourceMappingURL=LineChart.js.map

package/dist/ui/metrics/LineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.js","sources":["../../../src/ui/metrics/LineChart.jsx"],"sourcesContent":["// Líneas a lo largo del tiempo, de una serie o de varias que se comparan (ventas contra devoluciones, este año contra el\n// pasado), dibujadas con Recharts. Lo que comparte con ColumnChart (ejes, tabla, leyenda, línea de referencia) vive en\n// chartParts.jsx.\n//\n// Las reglas de la guía de Apple (HIG «Charts» y «Charting data»):\n//   - líneas para ver la tendencia; columnas (ColumnChart) para comparar periodos sueltos;\n//   - cada serie con su color Y su trazo (continuo, rayado, punteado), con su punto en cada periodo: el color no va solo;\n//   - una serie sin leyenda (el título ya dice qué es); varias, con leyenda abajo; toda gráfica con su vista de tabla;\n//   - el globo de un periodo dice el valor de cada serie.\n//\n//   <LineChart data={[{key: '2026-4', label: 'abr', sales: 120, returns: 8}, …]} periodLabel=\"Mes\"\n//              series={[{key: 'sales', label: 'Ventas'}, {key: 'returns', label: 'Devoluciones', tone: 'error'}]}\n//              ariaLabel=\"Ventas y devoluciones por mes\" emptyLabel=\"Sin datos\" />\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport {CartesianGrid, Line, LineChart as RechartsLineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport ChartTooltip from '@/ui/metrics/ChartTooltip.jsx';\nimport TableToggle, {CHART_VIEW} from '@/ui/metrics/TableToggle.jsx';\nimport {\n    ChartLegend, ChartTable, ReferenceCaption, highestValueOf, resolvedSeriesOf, useChartColors, valueAxisWidthOf,\n} from '@/ui/metrics/chartParts.jsx';\n\n// el grueso de la línea y el tamaño de su punto (px): se ven en el teléfono sin tapar a la vecina\nconst LINE_WIDTH_PIXELS = 2;\nconst DOT_RADIUS_PIXELS = 3;\nconst ACTIVE_DOT_RADIUS_PIXELS = 5;\n\n/**\n * @param {object} props\n * @param {Array<Record<string, any>>} props.data un renglón por periodo: {key, label, [llave de cada serie]: número}\n * @param {Array<{key: string, label: string, tone?: 'primary'|'secondary'|'success'|'warning'|'error'|'info', dash?: string}>} props.series\n *     la llave de cada serie en data, su nombre ya traducido, su color y su trazo (por omisión, en orden)\n * @param {string} props.periodLabel encabezado de la primera columna de la tabla («Mes»), ya traducido\n * @param {string} props.ariaLabel\n * @param {string} props.emptyLabel\n * @param {number} [props.height]\n * @param {(value: number) => string} [props.formatValue] cómo se escribe un valor (en el eje, en la tabla y en el globo)\n * @param {{value: number, label: string}} [props.referenceLine] línea de referencia (la meta) con su rótulo ya traducido\n * @param {(row: any) => void} [props.onSelect] recibe el renglón de data del periodo que se picó\n * @param {(row: any) => import('react').ReactNode} [props.renderTooltip] lo que dice el globo de un periodo; por omisión su\n *     nombre y el valor de cada serie\n * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada\n * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {charts: {viewAsTable, viewAsChart, legend}}\n */\nexport default function LineChart({\n    data, series, periodLabel, ariaLabel, emptyLabel, height = 220, formatValue: formatValueProp, referenceLine, onSelect, renderTooltip, texts, defaultView = CHART_VIEW.chart, onViewChange,\n}) {\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatNumber} = useFormatters();\n    const formatValue = formatValueProp ?? formatNumber;\n    const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);\n    const toggleView = () => {\n        setAsTable(!asTable);\n        onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);\n    };\n    const colors = useChartColors();\n    const drawnSeries = resolvedSeriesOf(series, colors.palette);\n\n    // guard clause: sin datos se dice, no se pinta un eje vacío\n    if (!data.length) {\n        return <Typography variant=\"body2\" color=\"text.secondary\">{emptyLabel}</Typography>;\n    }\n\n    const highestValue = highestValueOf(data, drawnSeries, referenceLine);\n    // el periodo que se picó: recharts da su posición en data (a veces como texto)\n    const selectPeriodAt = (activeIndex) => {\n        const row = data[Number(activeIndex)];\n        if (row) {\n            onSelect(row);\n        }\n    };\n    const tooltipOf = renderTooltip ?? ((row) => (\n        <>\n            <strong>{row.label}</strong>\n            {drawnSeries.map((item) => <Box key={item.key}>{item.label}: {formatValue(row[item.key])}</Box>)}\n        </>\n    ));\n\n    return (\n        <Box>\n            <TableToggle asTable={asTable} onToggle={toggleView} texts={texts} />\n            {asTable ? (\n                <ChartTable data={data} series={drawnSeries} periodLabel={periodLabel} formatValue={formatValue} height={height} />\n            ) : (\n                <Box role=\"img\" aria-label={ariaLabel} sx={{height}}>\n                    <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        {/* OJO: recharts 3 avisa el clic con el índice del periodo (activeIndex), ya no con activePayload (el de\n                            la versión 2) */}\n                        <RechartsLineChart data={data} margin={{top: 8, right: 12, bottom: 0, left: -8}}\n                                           onClick={onSelect ? (state) => selectPeriodAt(state?.activeIndex) : undefined}>\n                            <CartesianGrid vertical={false} stroke={colors.grid} />\n                            <XAxis dataKey=\"label\" tick={colors.axisText} tickLine={false} axisLine={{stroke: colors.grid}}\n                                   interval=\"preserveStartEnd\" minTickGap={12} />\n                            <YAxis allowDecimals={false} tick={colors.axisText} tickLine={false} axisLine={false}\n                                   width={valueAxisWidthOf(highestValue, formatValue)} tickFormatter={(value) => formatValue(value)} />\n                            <Tooltip cursor={{stroke: colors.grid}} content={<ChartTooltip render={tooltipOf} />} />\n                            {referenceLine && (\n                                <ReferenceLine y={referenceLine.value} ifOverflow=\"extendDomain\" stroke={colors.axis} strokeDasharray=\"4 4\" />\n                            )}\n                            {drawnSeries.map((item) => (\n                                <Line key={item.key} type=\"monotone\" dataKey={item.key} name={item.label} stroke={item.color}\n                                      strokeWidth={LINE_WIDTH_PIXELS} strokeDasharray={item.dash} isAnimationActive={false}\n                                      dot={{r: DOT_RADIUS_PIXELS, fill: item.color, strokeWidth: 0}}\n                                      activeDot={{r: ACTIVE_DOT_RADIUS_PIXELS, cursor: onSelect ? 'pointer' : 'default'}} />\n                            ))}\n                        </RechartsLineChart>\n                    </ResponsiveContainer>\n                </Box>\n            )}\n            <ChartLegend series={drawnSeries} showsDash ariaLabel={t('charts.legend')} />\n            <ReferenceCaption referenceLine={referenceLine} />\n        </Box>\n    );\n}\n"],"names":["RechartsLineChart"],"mappings":"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"}

package/dist/ui/metrics/MetricCard.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useToolkitNavigation } from "../../toolkit/toolkitContext.js";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import Box from "@mui/material/Box";
+import CardActionArea from "@mui/material/CardActionArea";
+import Chip from "@mui/material/Chip";
+import Paper from "@mui/material/Paper";
+import Skeleton from "@mui/material/Skeleton";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { alpha } from "@mui/material/styles";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import RemoveIcon from "@mui/icons-material/Remove";
+const TONES = ["info", "success", "warning", "error"];
+const TREND_DIRECTION = Object.freeze({ up: "up", down: "down", flat: "flat" });
+const TREND_ICONS = Object.freeze({
+  [TREND_DIRECTION.up]: ArrowUpwardIcon,
+  [TREND_DIRECTION.down]: ArrowDownwardIcon,
+  [TREND_DIRECTION.flat]: RemoveIcon
+});
+const TITLE_ROW_MIN_HEIGHT_PIXELS = 24;
+const ICON_BOX_PIXELS = 28;
+const ICON_PIXELS = 18;
+function TrendChip({ trend, texts }) {
+  const { t } = useToolkitTranslation("metricCard", texts);
+  const direction = TREND_ICONS[trend.direction] ? trend.direction : TREND_DIRECTION.flat;
+  const TrendIcon = TREND_ICONS[direction];
+  const isGood = trend.isGood ?? direction === TREND_DIRECTION.up;
+  const color = direction === TREND_DIRECTION.flat ? "default" : isGood ? "success" : "error";
+  return /* @__PURE__ */ jsx(
+    Chip,
+    {
+      size: "small",
+      color,
+      variant: "outlined",
+      icon: /* @__PURE__ */ jsx(TrendIcon, {}),
+      label: trend.label,
+      "aria-label": `${t(`trend.${direction}`)} ${trend.label}`,
+      sx: { fontWeight: 600, "& .MuiChip-icon": { fontSize: 16 } }
+    }
+  );
+}
+function MetricCard({
+  label,
+  value,
+  caption,
+  tone = "info",
+  valueColor,
+  isLoading = false,
+  to,
+  trend,
+  icon,
+  children,
+  onClick,
+  texts
+}) {
+  const { Link } = useToolkitNavigation();
+  const paletteTone = TONES.includes(tone) ? tone : "info";
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center", justifyContent: "space-between", minHeight: TITLE_ROW_MIN_HEIGHT_PIXELS }, children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center", minWidth: 0 }, children: [
+        icon && /* @__PURE__ */ jsx(Box, { "aria-hidden": "true", sx: (theme) => ({
+          width: ICON_BOX_PIXELS,
+          height: ICON_BOX_PIXELS,
+          flexShrink: 0,
+          display: "grid",
+          placeItems: "center",
+          borderRadius: 1.5,
+          color: `${paletteTone}.main`,
+          "& svg": { fontSize: ICON_PIXELS },
+          // el tono al 14 %: se distingue del papel sin competir con la cifra
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[paletteTone].mainChannel} / 0.14)` : alpha(theme.palette[paletteTone].main, 0.14)
+        }), children: icon }),
+        /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "text.secondary", component: "p", sx: { minWidth: 0 }, children: label })
+      ] }),
+      trend && !isLoading && /* @__PURE__ */ jsx(TrendChip, { trend, texts })
+    ] }),
+    /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "p", sx: { mt: 0.75, fontWeight: 600, fontVariantNumeric: "tabular-nums", color: valueColor ?? `${paletteTone}.dark` }, children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { width: 120 }) : value }),
+    caption && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", component: "p", sx: { mt: 0.5 }, children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { width: 160 }) : caption }),
+    children && /* @__PURE__ */ jsx(Box, { sx: { mt: 1.5 }, children })
+  ] });
+  const isClickable = Boolean(to || onClick);
+  return /* @__PURE__ */ jsx(Paper, { variant: "outlined", sx: {
+    borderTop: 3,
+    borderTopColor: `${paletteTone}.light`,
+    height: "100%",
+    overflow: "hidden",
+    ...isClickable ? {} : { p: 2.5 }
+  }, children: isClickable ? /* @__PURE__ */ jsx(CardActionArea, { ...to ? { component: Link, to } : { onClick }, sx: { p: 2.5, height: "100%", alignItems: "flex-start", display: "block" }, children: content }) : content });
+}
+export {
+  TREND_DIRECTION,
+  MetricCard as default
+};
+//# sourceMappingURL=MetricCard.js.map

package/dist/ui/metrics/MetricCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCard.js","sources":["../../../src/ui/metrics/MetricCard.jsx"],"sourcesContent":["// Tarjeta de métrica: etiqueta en versalitas, número grande (h5 en seminegritas, con cifras del mismo ancho) y una nota abajo, con un borde superior de\n// color según el tono (p. ej. REGISTROS LEÍDOS / ÍNTEGROS / DESCARTADOS).\n//\n// Con `to` la tarjeta entera es una liga a la pantalla que explica el número, ya filtrada: un KPI que no lleva a\n// ningún lado obliga a buscar a mano de dónde salió.\n//\n// Con `trend` lleva junto al número cuánto cambió contra el periodo anterior («▲ 12 %», como los tableros de MUI). El\n// color dice si es bueno o malo, no si subió: más cancelaciones es subir y es malo (isGood: false). La flecha y el texto\n// oculto dicen la dirección, para quien no distingue el color.\n//\n// Se extiende sin tocar el framework: un ícono junto al título (icon, del color del tono en un cuadro suave, como los\n// resúmenes de Salud de Apple), contenido propio debajo de la nota (children: una barra de avance, un desglose), onClick\n// cuando no lleva a otra pantalla, y texts para los textos de la tendencia.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport CardActionArea from '@mui/material/CardActionArea';\nimport Chip from '@mui/material/Chip';\nimport Paper from '@mui/material/Paper';\nimport Skeleton from '@mui/material/Skeleton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport {alpha} from '@mui/material/styles';\nimport ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';\nimport ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';\nimport RemoveIcon from '@mui/icons-material/Remove';\n\nconst TONES = ['info', 'success', 'warning', 'error'];\n\n/** Hacia dónde se movió el número. */\nexport const TREND_DIRECTION = Object.freeze({up: 'up', down: 'down', flat: 'flat'});\n\nconst TREND_ICONS = Object.freeze({\n    [TREND_DIRECTION.up]: ArrowUpwardIcon,\n    [TREND_DIRECTION.down]: ArrowDownwardIcon,\n    [TREND_DIRECTION.flat]: RemoveIcon,\n});\n\n// el renglón del título: del alto de la píldora de tendencia, para que las tarjetas con y sin tendencia queden parejas\nconst TITLE_ROW_MIN_HEIGHT_PIXELS = 24;\n// el cuadro del ícono junto al título y el tamaño del ícono adentro (px)\nconst ICON_BOX_PIXELS = 28;\nconst ICON_PIXELS = 18;\n\n/**\n * El cambio contra el periodo anterior: verde si es bueno, rojo si es malo, gris si no cambió.\n *\n * @param {{trend: {label: string, direction: string, isGood?: boolean}, texts?: object}} props\n */\nfunction TrendChip({trend, texts}) {\n    const {t} = useToolkitTranslation('metricCard', texts);\n    const direction = TREND_ICONS[trend.direction] ? trend.direction : TREND_DIRECTION.flat;\n    const TrendIcon = TREND_ICONS[direction];\n    // por omisión subir es bueno; quien cuente algo malo (cancelaciones, quejas) lo dice con isGood\n    const isGood = trend.isGood ?? direction === TREND_DIRECTION.up;\n    const color = direction === TREND_DIRECTION.flat ? 'default' : (isGood ? 'success' : 'error');\n    return (\n        <Chip size=\"small\" color={color} variant=\"outlined\" icon={<TrendIcon />} label={trend.label}\n              aria-label={`${t(`trend.${direction}`)} ${trend.label}`} sx={{fontWeight: 600, '& .MuiChip-icon': {fontSize: 16}}} />\n    );\n}\n\n/**\n * @param {object} props\n * @param {string} props.label texto ya traducido\n * @param {import('react').ReactNode} props.value ya formateado (formatNumber)\n * @param {import('react').ReactNode} [props.caption]\n * @param {'info'|'success'|'warning'|'error'} [props.tone]\n * @param {string} [props.valueColor] color del número si no debe ir del tono (p. ej. un total en texto normal)\n * @param {boolean} [props.isLoading]\n * @param {string} [props.to] ruta interna a la que lleva la tarjeta\n * @param {{label: string, direction: 'up'|'down'|'flat', isGood?: boolean}} [props.trend] cuánto cambió (TREND_DIRECTION)\n * @param {import('react').ReactNode} [props.icon] junto al título, del color del tono (<ShoppingBagOutlinedIcon />)\n * @param {import('react').ReactNode} [props.children] contenido propio debajo de la nota (una barra de avance, un desglose)\n * @param {() => void} [props.onClick] la tarjeta entera como botón, cuando no lleva a otra pantalla (to)\n * @param {object} [props.texts] los textos que cambian, con la forma de `metricCard`: {trend: {up: 'subió'}}\n */\nexport default function MetricCard({\n    label, value, caption, tone = 'info', valueColor, isLoading = false, to, trend, icon, children, onClick, texts,\n}) {\n    // el enlace del router que conectó el proyecto (ToolkitProvider)\n    const {Link} = useToolkitNavigation();\n    const paletteTone = TONES.includes(tone) ? tone : 'info';\n\n    const content = (\n        <>\n            {/* la tendencia va en el renglón del título, a la derecha: en el mismo lugar en todas las tarjetas aunque la cifra\n                sea larga (junto a la cifra, con un importe largo se bajaba a otro renglón y no quedaban parejas; lo reportaron) */}\n            <Stack direction=\"row\" spacing={1} sx={{alignItems: 'center', justifyContent: 'space-between', minHeight: TITLE_ROW_MIN_HEIGHT_PIXELS}}>\n                <Stack direction=\"row\" spacing={1} sx={{alignItems: 'center', minWidth: 0}}>\n                    {icon && (\n                        <Box aria-hidden=\"true\" sx={(theme) => ({\n                            width: ICON_BOX_PIXELS, height: ICON_BOX_PIXELS, flexShrink: 0, display: 'grid', placeItems: 'center',\n                            borderRadius: 1.5, color: `${paletteTone}.main`, '& svg': {fontSize: ICON_PIXELS},\n                            // el tono al 14 %: se distingue del papel sin competir con la cifra\n                            backgroundColor: theme.vars\n                                ? `rgba(${theme.vars.palette[paletteTone].mainChannel} / 0.14)`\n                                : alpha(theme.palette[paletteTone].main, 0.14),\n                        })}>\n                            {icon}\n                        </Box>\n                    )}\n                    <Typography variant=\"overline\" color=\"text.secondary\" component=\"p\" sx={{minWidth: 0}}>{label}</Typography>\n                </Stack>\n                {trend && !isLoading && <TrendChip trend={trend} texts={texts} />}\n            </Stack>\n            <Typography variant=\"h5\" component=\"p\" sx={{mt: 0.75, fontWeight: 600, fontVariantNumeric: 'tabular-nums', color: valueColor ?? `${paletteTone}.dark`}}>\n                {isLoading ? <Skeleton width={120} /> : value}\n            </Typography>\n            {caption && (\n                <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\" sx={{mt: 0.5}}>\n                    {isLoading ? <Skeleton width={160} /> : caption}\n                </Typography>\n            )}\n            {children && <Box sx={{mt: 1.5}}>{children}</Box>}\n        </>\n    );\n    // una liga a la pantalla que explica el número, o un botón (onClick); sin ninguno, solo se lee\n    const isClickable = Boolean(to || onClick);\n\n    return (\n        <Paper variant=\"outlined\" sx={{\n            borderTop: 3,\n            borderTopColor: `${paletteTone}.light`,\n            height: '100%',\n            overflow: 'hidden',\n            ...(isClickable ? {} : {p: 2.5}),\n        }}>\n            {isClickable ? (\n                <CardActionArea {...(to ? {component: Link, to} : {onClick})} sx={{p: 2.5, height: '100%', alignItems: 'flex-start', display: 'block'}}>\n                    {content}\n                </CardActionArea>\n            ) : content}\n        </Paper>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/metrics/TableToggle.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+const CHART_VIEW = Object.freeze({ chart: "chart", table: "table" });
+function TableToggle({ asTable, onToggle, texts }) {
+  const { t } = useToolkitTranslation("common", texts);
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "flex-end", mb: 1 }, children: /* @__PURE__ */ jsx(Button, { size: "small", onClick: onToggle, sx: { textTransform: "none" }, children: asTable ? t("charts.viewAsChart") : t("charts.viewAsTable") }) });
+}
+export {
+  CHART_VIEW,
+  TableToggle as default
+};
+//# sourceMappingURL=TableToggle.js.map

package/dist/ui/metrics/TableToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableToggle.js","sources":["../../../src/ui/metrics/TableToggle.jsx"],"sourcesContent":["// \"Ver como tabla\": toda gráfica tiene su versión en tabla, para quien no distingue el color, usa lector de pantalla o\n// quiere copiar los números.\n//\n// Los textos salen de i18n.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\n\n/** Cómo se ve una gráfica: dibujada o en su tabla (defaultView y onViewChange de BarList, ColumnChart, LineChart y CalendarHeatmap). */\nexport const CHART_VIEW = Object.freeze({chart: 'chart', table: 'table'});\n\n/**\n * @param {{asTable: boolean, onToggle: () => void, texts?: object}} props texts: los textos que cambian, con la forma de\n *     `common` ({charts: {viewAsTable, viewAsChart}})\n */\nexport default function TableToggle({asTable, onToggle, texts}) {\n    const {t} = useToolkitTranslation('common', texts);\n\n    return (\n        <Box sx={{display: 'flex', justifyContent: 'flex-end', mb: 1}}>\n            <Button size=\"small\" onClick={onToggle} sx={{textTransform: 'none'}}>\n                {asTable ? t('charts.viewAsChart') : t('charts.viewAsTable')}\n            </Button>\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;AAWO,MAAM,aAAa,OAAO,OAAO,EAAC,OAAO,SAAS,OAAO,SAAQ;AAMxE,SAAwB,YAAY,EAAC,SAAS,UAAU,SAAQ;AAC5D,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AAEjD,SACI,oBAAC,KAAA,EAAI,IAAI,EAAC,SAAS,QAAQ,gBAAgB,YAAY,IAAI,EAAA,GACvD,UAAA,oBAAC,QAAA,EAAO,MAAK,SAAQ,SAAS,UAAU,IAAI,EAAC,eAAe,OAAA,GACvD,UAAA,UAAU,EAAE,oBAAoB,IAAI,EAAE,oBAAoB,GAC/D,GACJ;AAER;"}

package/dist/ui/metrics/barListLabels.js

@@ -0,0 +1,9 @@
+const BAR_MIN_POINT_SIZE = 1;
+function barLabelValueOf(barEntry) {
+  return { value: barEntry.payload.value, detail: barEntry.payload.detail };
+}
+export {
+  BAR_MIN_POINT_SIZE,
+  barLabelValueOf
+};
+//# sourceMappingURL=barListLabels.js.map

package/dist/ui/metrics/barListLabels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"barListLabels.js","sources":["../../../src/ui/metrics/barListLabels.js"],"sourcesContent":["// Etiqueta en la punta de cada barra de BarList: de dónde sale el número y su detalle («de 8», «rechazados · 120 conformes»).\n//\n// OJO (trampa ya pagada): Recharts 3 DESCARTA las barras de ancho 0 (Bar.js, computeBarRectangles →\n// `width === 0` → null → filter(Boolean)) y LabelList numera solo las que quedan. BarList tomaba el detalle con\n// items[labelProps.index]: después de una barra en 0 el detalle salía del renglón de ARRIBA («Producto C 300 rechazados\n// · 0 conformes» cuando eran 120; «Gerente 1 de 3» cuando era 1 de 1), y con todo en 0 no se pintaba nada.\n// Las dos cosas que lo arreglan, y que se prueban en barListLabels.test.js contra computeBarRectangles de verdad:\n//   1. BAR_MIN_POINT_SIZE = 1: Recharts ensancha a 1 px ANTES de filtrar, así ninguna barra se descarta y un 0 también\n//      dice «0 de 2»;\n//   2. el detalle se lee del propio renglón (entry.payload) con valueAccessor y SIN dataKey: LabelList solo usa\n//      valueAccessor cuando dataKey es nulo. NO sirve labelProps.payload: LabelList le pasa a la etiqueta solo las\n//      propiedades SVG del renglón y payload no es una.\n//\n// Funciones puras, sin imports de pantalla: se prueban con node --test.\n\n/** Ancho mínimo (px) de una barra: con 0 Recharts la descarta y la etiqueta desaparece o se corre de renglón. */\nexport const BAR_MIN_POINT_SIZE = 1;\n\n/**\n * valueAccessor de LabelList: el número y el detalle del MISMO renglón de la barra.\n *\n * @param {{payload: {value: number, detail?: string}}} barEntry rectángulo que arma Recharts (payload = renglón de items)\n * @returns {{value: number, detail: string|undefined}}\n */\nexport function barLabelValueOf(barEntry) {\n    return {value: barEntry.payload.value, detail: barEntry.payload.detail};\n}\n"],"names":[],"mappings":"AAgBY,MAAC,qBAAqB;AAQ3B,SAAS,gBAAgB,UAAU;AACtC,SAAO,EAAC,OAAO,SAAS,QAAQ,OAAO,QAAQ,SAAS,QAAQ,OAAM;AAC1E;"}

package/dist/ui/metrics/chartParts.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Box from "@mui/material/Box";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { paletteOf } from "../../theme/components/paletteOf.js";
+const AXIS_FONT_PIXELS = 12;
+const AXIS_MINIMUM_WIDTH_PIXELS = 48;
+const AXIS_PADDING_PIXELS = 16;
+const AXIS_CHARACTER_PIXELS = 7;
+const AXIS_EXTRA_CHARACTERS = 1;
+const SWATCH_PIXELS = 20;
+const CHART_SERIES_TONES = Object.freeze(["primary", "info", "success", "warning", "error", "secondary"]);
+const CHART_LINE_DASHES = Object.freeze(["0", "6 4", "2 3"]);
+function useChartColors() {
+  const palette = paletteOf(useTheme());
+  return useMemo(() => ({
+    palette,
+    axis: palette.text.secondary,
+    axisText: { fill: palette.text.secondary, fontSize: AXIS_FONT_PIXELS },
+    grid: palette.divider,
+    text: palette.text.primary,
+    muted: palette.text.secondary,
+    hover: palette.action.hover
+  }), [palette]);
+}
+function valueAxisWidthOf(highestValue, formatValue) {
+  const longestLabel = formatValue(highestValue).length + AXIS_EXTRA_CHARACTERS;
+  return Math.max(AXIS_MINIMUM_WIDTH_PIXELS, AXIS_PADDING_PIXELS + longestLabel * AXIS_CHARACTER_PIXELS);
+}
+function resolvedSeriesOf(series, palette) {
+  return series.map((item, index) => {
+    const tone = item.tone ?? CHART_SERIES_TONES[index % CHART_SERIES_TONES.length];
+    return {
+      ...item,
+      tone,
+      color: (palette[tone] ?? palette.primary).main,
+      dash: item.dash ?? CHART_LINE_DASHES[index % CHART_LINE_DASHES.length]
+    };
+  });
+}
+function highestValueOf(data, series, referenceLine) {
+  const values = data.flatMap((row) => series.map((item) => Number(row[item.key]) || 0));
+  return Math.max(0, ...values, referenceLine?.value ?? 0);
+}
+function ChartTable({ data, series, periodLabel, formatValue, height }) {
+  return /* @__PURE__ */ jsx(Box, { sx: { maxHeight: height, overflowY: "auto" }, children: /* @__PURE__ */ jsxs(Table, { size: "small", children: [
+    /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableCell, { children: periodLabel }),
+      series.map((item) => /* @__PURE__ */ jsx(TableCell, { align: "right", children: item.label }, item.key))
+    ] }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: data.map((row) => /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableCell, { children: row.label }),
+      series.map((item) => /* @__PURE__ */ jsx(TableCell, { align: "right", children: formatValue(row[item.key]) }, item.key))
+    ] }, row.key)) })
+  ] }) });
+}
+function ChartLegend({ series, showsDash = false, ariaLabel }) {
+  if (series.length < 2) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Box, { component: "ul", "aria-label": ariaLabel, sx: { display: "flex", flexWrap: "wrap", gap: 2, listStyle: "none", p: 0, m: 0, mt: 1 }, children: series.map((item) => /* @__PURE__ */ jsxs(Box, { component: "li", sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+    showsDash ? /* @__PURE__ */ jsx(Box, { component: "svg", "aria-hidden": "true", width: SWATCH_PIXELS, height: 8, sx: { color: item.color }, children: /* @__PURE__ */ jsx("line", { x1: "0", y1: "4", x2: SWATCH_PIXELS, y2: "4", stroke: "currentColor", strokeWidth: "2", strokeDasharray: item.dash }) }) : /* @__PURE__ */ jsx(Box, { "aria-hidden": "true", sx: { width: 10, height: 10, borderRadius: 0.5, bgcolor: item.color } }),
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: item.label })
+  ] }, item.key)) });
+}
+function ReferenceCaption({ referenceLine }) {
+  if (!referenceLine) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 0.75, mt: 0.5 }, children: [
+    /* @__PURE__ */ jsx(Box, { "aria-hidden": "true", sx: { width: SWATCH_PIXELS, borderTop: "2px dashed", borderColor: "text.secondary" } }),
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: referenceLine.label })
+  ] });
+}
+export {
+  CHART_LINE_DASHES,
+  CHART_SERIES_TONES,
+  ChartLegend,
+  ChartTable,
+  ReferenceCaption,
+  highestValueOf,
+  resolvedSeriesOf,
+  useChartColors,
+  valueAxisWidthOf
+};
+//# sourceMappingURL=chartParts.js.map