@dashadmin/dash-reports 1.3.72 → 1.3.74-srcfree.1

package/src/adapters/mui/FunnelWidget.tsx

@@ -1,108 +0,0 @@
-import { Box, LinearProgress, Stack, Typography, useTheme } from '@mui/material';
-import { colorForSlot } from './palette';
-import { label as renderLabel } from '../../core/label';
-import type { VisualizationProps } from '../../core/visualizationRegistry';
-
-/**
- * Stage-by-stage drop-off.
- *
- * Rendered as proportional bars rather than the tapering-trapezoid shape a
- * "funnel" usually implies: a trapezoid encodes each stage in an area whose
- * width AND height both change, which overstates the drop. A bar per stage
- * encodes one quantity in one dimension and is simply readable.
- *
- * The stage order is the METRIC order the backend declared, which is the flow
- * order — so this widget renders KitchnTabs' tab lifecycle without knowing
- * anything about it. Percentages are shown against the first stage (overall
- * conversion) and against the previous one (step conversion), because the two
- * answer different questions and reading either off a bar length is guesswork.
- */
-export function FunnelWidget({ result, spec, translate }: VisualizationProps) {
-  const theme = useTheme();
-
-  const stages = spec.metrics
-    .map((metric, index) => ({
-      key: metric.key,
-      label: renderLabel(translate, metric.label, metric.labelText),
-      value: result.totals[metric.key] ?? 0,
-      slot: index,
-    }))
-    .filter((s) => s.value !== null);
-
-  if (stages.length === 0) return null;
-
-  const first = stages[0]?.value || 0;
-
-  return (
-    <Stack spacing={1.75} sx={{ px: 0.5, py: 1 }}>
-      {stages.map((stage, index) => {
-        const previous = index === 0 ? stage.value : stages[index - 1].value;
-        const ofFirst = first > 0 ? (stage.value / first) * 100 : 0;
-        const ofPrevious = previous > 0 ? (stage.value / previous) * 100 : 0;
-        const color = colorForSlot(stage.slot, theme.palette.mode === 'dark');
-
-        return (
-          <Box key={stage.key}>
-            <Stack
-              direction="row"
-              sx={{ justifyContent: 'space-between', alignItems: 'baseline', gap: 1, mb: 0.5 }}
-            >
-              {/* The label is the only part allowed to shrink; the figures stay
-                  on one line. Previously the percentage column wrapped to three
-                  lines ("100%", "etapa", "833.3%") and the row read as noise. */}
-              <Typography
-                variant="body2"
-                sx={{
-                  color: theme.palette.text.primary,
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
-                  minWidth: 0,
-                }}
-              >
-                {stage.label}
-              </Typography>
-              <Stack
-                direction="row"
-                spacing={1.5}
-                sx={{ alignItems: 'baseline', flexShrink: 0, whiteSpace: 'nowrap' }}
-              >
-                <Typography variant="body2" sx={{ color: theme.palette.text.primary, fontWeight: 500 }}>
-                  {stage.value.toLocaleString()}
-                </Typography>
-                <Typography variant="caption" sx={{ color: theme.palette.text.secondary }}>
-                  {Math.round(ofFirst * 10) / 10}%
-                  {/* A step above 100% is not a conversion — it means tabs
-                      reached this stage without passing through the previous
-                      one (a tab closed straight from CREATED, say). Printing
-                      "833% conversion" reads as a broken number; naming the
-                      skip states what actually happened. */}
-                  {index > 0 && (
-                    ofPrevious > 100
-                      ? ` · ${translate('dash_reports.funnel.skipped', { _: 'stage skipped' })}`
-                      : ` · ${translate('dash_reports.funnel.step', { _: 'step' })} ${Math.round(ofPrevious * 10) / 10}%`
-                  )}
-                </Typography>
-              </Stack>
-            </Stack>
-            <LinearProgress
-              variant="determinate"
-              value={Math.min(100, ofFirst)}
-              aria-label={stage.label}
-              sx={{
-                height: 10,
-                borderRadius: 1,
-                backgroundColor: theme.palette.mode === 'dark'
-                  ? 'rgba(255,255,255,0.08)'
-                  : 'rgba(0,0,0,0.06)',
-                '& .MuiLinearProgress-bar': { backgroundColor: color, borderRadius: 1 },
-              }}
-            />
-          </Box>
-        );
-      })}
-    </Stack>
-  );
-}
-
-export default FunnelWidget;

package/src/adapters/mui/KpiWidget.tsx

@@ -1,123 +0,0 @@
-import { Box, Typography, useTheme } from '@mui/material';
-import { label as renderLabel } from '../../core/label';
-import type { VisualizationProps } from '../../core/visualizationRegistry';
-
-/**
- * The headline numbers, with no plot.
- *
- * The window totals come straight from the backend's ungrouped aggregate — not
- * a sum of the series — because averages and extrema do not compose across
- * buckets: averaging twelve monthly averages is not the yearly average.
- *
- * Figures use the body face at a normal weight, and deliberately NOT
- * `tabular-nums`: equal-width digits make a large standalone number look gappy
- * and mechanical. Tabular figures belong in a column of numbers, which is what
- * the table view is for.
- */
-/**
- * A figure, in the unit its metric is measured in.
- *
- * Durations are minutes, and are shown as minutes rather than a bare number —
- * "643" beside "Entregado → Cerrado" is ambiguous in a way "643 min" is not.
- * Sub-minute averages keep two decimals so a fast hop reads as 0.26 min rather
- * than rounding to a flat 0, which would look like "no data".
- */
-function formatMetricValue(
-  value: number | null | undefined,
-  metric: { decimal: boolean; unit?: string | null },
-  translate: (key: string, options?: Record<string, unknown>) => string,
-): string {
-  if (value === null || value === undefined) return '—';
-
-  const digits = metric.decimal ? 2 : 0;
-  const text = value.toLocaleString(undefined, {
-    minimumFractionDigits: digits,
-    maximumFractionDigits: digits,
-  });
-
-  if (metric.unit === 'minutes') {
-    return formatMinutes(value, translate);
-  }
-
-  return text;
-}
-
-/**
- * A duration in the unit a person would say it in.
- *
- * "776.40 min" is technically right and practically unreadable — nobody holds
- * thirteen hours in their head as a minute count. The scale switches at the
- * points where the smaller unit stops being informative: under a minute,
- * seconds; under 90 minutes, minutes; beyond that, hours.
- */
-function formatMinutes(
-  minutes: number,
-  translate: (key: string, options?: Record<string, unknown>) => string,
-): string {
-  const abs = Math.abs(minutes);
-
-  if (abs < 1) {
-    const seconds = Math.round(minutes * 60);
-    return `${seconds} ${translate('dash_reports.units.seconds', { _: 's' })}`;
-  }
-
-  if (abs < 90) {
-    const shown = abs < 10 ? Math.round(minutes * 10) / 10 : Math.round(minutes);
-    return `${shown} ${translate('dash_reports.units.minutes', { _: 'min' })}`;
-  }
-
-  const hours = Math.round((minutes / 60) * 10) / 10;
-  return `${hours} ${translate('dash_reports.units.hours', { _: 'h' })}`;
-}
-
-export function KpiWidget({ result, spec, translate }: VisualizationProps) {
-  const theme = useTheme();
-
-  const metrics = spec.metrics.filter((m) => result.totals[m.key] !== undefined);
-
-  if (metrics.length === 0) return null;
-
-  // A grid, not a wrapping flex row: with flex-wrap the figures landed at
-  // arbitrary x-positions on each line, so nothing lined up vertically and a
-  // six-metric tile read as scattered rather than tabulated.
-  return (
-    <Box
-      sx={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
-        gap: 2,
-        px: 0.5,
-        py: 1,
-      }}
-      role="list"
-    >
-      {metrics.map((metric) => {
-        const value = result.totals[metric.key];
-
-        return (
-          <Box key={metric.key} role="listitem" sx={{ minWidth: 140 }}>
-            <Typography
-              variant="body2"
-              sx={{ color: theme.palette.text.secondary, mb: 0.5 }}
-            >
-              {renderLabel(translate, metric.label, metric.labelText)}
-            </Typography>
-            <Typography
-              component="p"
-              sx={{
-                fontSize: '1.75rem',
-                lineHeight: 1.15,
-                fontWeight: 500,
-                color: theme.palette.text.primary,
-              }}
-            >
-              {formatMetricValue(value, metric, translate)}
-            </Typography>
-          </Box>
-        );
-      })}
-    </Box>
-  );
-}
-
-export default KpiWidget;

package/src/adapters/mui/LineWidget.tsx

@@ -1,70 +0,0 @@
-import { Line } from 'react-chartjs-2';
-import { ensureChartsRegistered } from './chartSetup';
-import { baseChartOptions } from './chartTheme';
-import { useChartData } from './useChartData';
-import type { VisualizationProps } from '../../core/visualizationRegistry';
-
-ensureChartsRegistered();
-
-/**
- * Change over time.
- *
- * 2px strokes and points that only appear on hover — a marker on every bucket
- * of a 90-day series is noise, but the hover target still has to be reachable,
- * so hitRadius stays generous while the drawn radius is zero. Lines are not
- * filled by default: overlapping translucent areas muddy every colour beneath
- * them, and this chart is for comparing shapes.
- *
- * `spanGaps` is deliberately off. A null is "no data" (an average with nothing
- * to average), and bridging it would draw a straight line through a period the
- * report is explicitly saying nothing about.
- */
-export function LineWidget(props: VisualizationProps) {
-  const { chrome, datasets, labels, longLabels } = useChartData(props);
-  const base = baseChartOptions(chrome, datasets.length > 1);
-
-  const data = {
-    labels,
-    datasets: datasets.map((d) => ({
-      label: d.label,
-      data: d.data,
-      borderColor: d.color,
-      backgroundColor: d.color,
-      borderWidth: 2,
-      tension: 0.25,
-      pointRadius: 0,
-      pointHoverRadius: 5,
-      // A 12px hit radius on an invisible point: the value stays reachable
-      // without asking anyone to land on a 2px line.
-      pointHitRadius: 12,
-      pointBorderWidth: 2,
-      // A surface-coloured ring keeps an active point legible where series
-      // overlap, without drawing a border on every mark.
-      pointHoverBorderColor: chrome.surface,
-      pointHoverBorderWidth: 2,
-      spanGaps: false,
-      fill: false,
-    })),
-  };
-
-  return (
-    <Line
-      data={data}
-      height={props.height ?? 320}
-      options={{
-        ...base,
-        plugins: {
-          ...base.plugins,
-          tooltip: {
-            ...base.plugins.tooltip,
-            callbacks: {
-              title: (items: Array<{ dataIndex: number }>) => longLabels[items[0]?.dataIndex] ?? '',
-            },
-          },
-        },
-      }}
-    />
-  );
-}
-
-export default LineWidget;

package/src/adapters/mui/PieWidget.tsx

@@ -1,16 +0,0 @@
-import { DoughnutWidget } from './DoughnutWidget';
-import type { VisualizationProps } from '../../core/visualizationRegistry';
-
-/**
- * A doughnut, not a true pie.
- *
- * Kept as a distinct registered type so a report that declares `Pie` renders,
- * but drawn with a centre hole: the hole removes the wedge apexes, where a
- * pie's area is least readable, and gives the legend somewhere to breathe.
- * Nothing is lost — both encode a part-of-whole share by angle.
- */
-export function PieWidget(props: VisualizationProps) {
-  return <DoughnutWidget {...props} />;
-}
-
-export default PieWidget;

package/src/adapters/mui/PreviewWidget.tsx

@@ -1,123 +0,0 @@
-import { Box, Skeleton, Stack, Typography, useTheme } from '@mui/material';
-import { Bar, Line } from 'react-chartjs-2';
-import { ensureChartsRegistered } from './chartSetup';
-import { chartChrome } from './chartTheme';
-import { buildSlotMap, colorForSlot, MAX_SERIES } from './palette';
-import { label as renderLabel } from '../../core/label';
-import type { ReportMetric, ReportResult, TranslateFn, VisualizationType } from '../../core/types';
-
-ensureChartsRegistered();
-
-export interface PreviewWidgetProps {
-  result: ReportResult | null;
-  loading: boolean;
-  type: VisualizationType;
-  translate: TranslateFn;
-  /** From the list payload; without it the card would print raw metric keys. */
-  metrics?: ReportMetric[];
-}
-
-const PREVIEW_HEIGHT = 96;
-
-/**
- * The card-sized rendering of a report.
- *
- * Deliberately not the full widget shrunk down. At this size axes, legends and
- * gridlines are unreadable ink — so the preview keeps only the shape (or, for a
- * report whose answer is a number, just the number). Everything is stripped:
- * no axes, no legend, no tooltip. Reading a value is what opening the report is
- * for; this is only enough to tell one report from another and see whether
- * anything is happening.
- */
-export function PreviewWidget({ result, loading, type, translate, metrics }: PreviewWidgetProps) {
-  const theme = useTheme();
-
-  if (loading) {
-    return <Skeleton variant="rounded" height={PREVIEW_HEIGHT} sx={{ mt: 1 }} />;
-  }
-
-  if (!result || result.series.length === 0) {
-    return (
-      <Box sx={{ height: PREVIEW_HEIGHT, display: 'grid', placeItems: 'center', mt: 1 }}>
-        <Typography variant="caption" sx={{ color: theme.palette.text.secondary }}>
-          {translate('dash_reports.no_data', { _: 'No data for this range.' })}
-        </Typography>
-      </Box>
-    );
-  }
-
-  const chrome = chartChrome(theme);
-
-  // Kpi and Funnel both answer with numbers rather than a shape, so at card
-  // size they render as figures instead of a chart nobody could read.
-  if (type === 'Kpi' || type === 'Funnel') {
-    const entries = Object.entries(result.totals).slice(0, 3);
-
-    return (
-      <Stack direction="row" sx={{ gap: 2.5, mt: 1.5, minHeight: PREVIEW_HEIGHT, alignItems: 'center', flexWrap: 'wrap' }}>
-        {entries.map(([key, value]) => {
-          const metric = metrics?.find((m) => m.key === key);
-
-          return (
-          <Box key={key}>
-            <Typography variant="caption" sx={{ color: theme.palette.text.secondary, display: 'block' }}>
-              {metric ? renderLabel(translate, metric.label, metric.labelText) : key}
-            </Typography>
-            <Typography sx={{ fontSize: '1.35rem', lineHeight: 1.2, color: theme.palette.text.primary }}>
-              {value === null || value === undefined ? '—' : value.toLocaleString()}
-            </Typography>
-          </Box>
-          );
-        })}
-      </Stack>
-    );
-  }
-
-  const slots = buildSlotMap(null, result.meta?.pivot ?? undefined, result.series.map((s) => s.key));
-  const datasets = result.series
-    .filter((s) => (slots.get(s.key) ?? 0) < MAX_SERIES)
-    .map((s) => ({
-      label: s.label,
-      data: s.data,
-      color: colorForSlot(slots.get(s.key) ?? 0, chrome.dark),
-    }));
-
-  const options = {
-    responsive: true,
-    maintainAspectRatio: false,
-    // Every affordance off: at 96px these are ink, not information.
-    plugins: { legend: { display: false }, tooltip: { enabled: false } },
-    scales: {
-      x: { display: false },
-      y: { display: false, beginAtZero: true },
-    },
-    elements: { point: { radius: 0 } },
-  };
-
-  const data = {
-    labels: result.buckets.map(() => ''),
-    datasets: datasets.map((d) => ({
-      label: d.label,
-      data: d.data,
-      backgroundColor: d.color,
-      borderColor: d.color,
-      borderWidth: type === 'Line' ? 2 : 0,
-      borderRadius: 3,
-      borderSkipped: 'bottom' as const,
-      maxBarThickness: 14,
-      tension: 0.3,
-      fill: false,
-      pointRadius: 0,
-    })),
-  };
-
-  return (
-    <Box sx={{ height: PREVIEW_HEIGHT, mt: 1 }}>
-      {type === 'Line'
-        ? <Line data={data} options={options} height={PREVIEW_HEIGHT} />
-        : <Bar data={data} options={options} height={PREVIEW_HEIGHT} />}
-    </Box>
-  );
-}
-
-export default PreviewWidget;

package/src/adapters/mui/TableWidget.tsx

@@ -1,141 +0,0 @@
-import { useMemo } from 'react';
-import {
-  Box, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, Typography, useTheme,
-} from '@mui/material';
-import { formatBucketLong } from '../../core/formatBucket';
-import { label as renderLabel } from '../../core/label';
-import type { VisualizationProps } from '../../core/visualizationRegistry';
-
-/**
- * The series as numbers.
- *
- * Not optional decoration. Three of the light-mode series hues sit below 3:1
- * contrast against a light surface, which is permitted only where a
- * non-colour path to every value exists — this is that path. It is also the
- * answer to "a tooltip is the only way to read a value".
- *
- * Figures are tabular here, unlike the KPI tile: in a column of numbers,
- * equal-width digits are what makes magnitudes line up and scan.
- */
-export function SeriesTableWidget({ result, translate }: VisualizationProps) {
-  const theme = useTheme();
-
-  const rows = useMemo(
-    () => result.buckets.map((bucket, index) => ({
-      bucket: formatBucketLong(bucket, result.granularity, translate),
-      values: result.series.map((s) => s.data[index]),
-    })),
-    [result, translate],
-  );
-
-  return (
-    <TableContainer sx={{ maxHeight: 420 }}>
-      <Table size="small" stickyHeader>
-        <TableHead>
-          <TableRow>
-            <TableCell sx={{ color: theme.palette.text.secondary }}>
-              {translate('dash_reports.table.period', { _: 'Period' })}
-            </TableCell>
-            {result.series.map((s) => (
-              <TableCell key={s.key} align="right" sx={{ color: theme.palette.text.secondary }}>
-                {renderLabel(translate, s.label, s.labelText)}
-              </TableCell>
-            ))}
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {rows.map((row) => (
-            <TableRow key={row.bucket} hover>
-              <TableCell sx={{ color: theme.palette.text.primary }}>{row.bucket}</TableCell>
-              {row.values.map((value, i) => (
-                <TableCell
-                  key={i}
-                  align="right"
-                  sx={{ color: theme.palette.text.primary, fontVariantNumeric: 'tabular-nums' }}
-                >
-                  {value === null || value === undefined ? '—' : value.toLocaleString()}
-                </TableCell>
-              ))}
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
-}
-
-export interface DetailTableProps {
-  page: {
-    data: Array<Record<string, unknown>>;
-    total: number;
-    page: number;
-    perPage: number;
-  } | null;
-  loading: boolean;
-  currentPage: number;
-  onPageChange: (page: number) => void;
-  translate: (key: string, options?: Record<string, unknown>) => string;
-}
-
-/** The paginated source rows behind the chart. */
-export function DetailTable({ page, loading, currentPage, onPageChange, translate }: DetailTableProps) {
-  const theme = useTheme();
-  const rows = page?.data ?? [];
-  const columns = rows.length > 0 ? Object.keys(rows[0]) : [];
-
-  if (!loading && rows.length === 0) {
-    return (
-      <Box sx={{ p: 3 }}>
-        <Typography variant="body2" sx={{ color: theme.palette.text.secondary }}>
-          {translate('dash_reports.no_rows', { _: 'No rows for this range.' })}
-        </Typography>
-      </Box>
-    );
-  }
-
-  return (
-    <Box>
-      <TableContainer sx={{ maxHeight: 420 }}>
-        <Table size="small" stickyHeader>
-          <TableHead>
-            <TableRow>
-              {columns.map((column) => (
-                <TableCell key={column} sx={{ color: theme.palette.text.secondary, whiteSpace: 'nowrap' }}>
-                  {translate(`dash_reports.columns.${column}`, { _: column })}
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row, index) => (
-              <TableRow key={index} hover>
-                {columns.map((column) => (
-                  <TableCell key={column} sx={{ color: theme.palette.text.primary, whiteSpace: 'nowrap' }}>
-                    {formatCell(row[column])}
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-      <TablePagination
-        component="div"
-        count={page?.total ?? 0}
-        page={Math.max(0, currentPage - 1)}
-        onPageChange={(_, next) => onPageChange(next + 1)}
-        rowsPerPage={page?.perPage ?? 50}
-        rowsPerPageOptions={[page?.perPage ?? 50]}
-      />
-    </Box>
-  );
-}
-
-function formatCell(value: unknown): string {
-  if (value === null || value === undefined) return '—';
-  if (typeof value === 'boolean') return value ? '✓' : '—';
-  if (typeof value === 'object') return JSON.stringify(value);
-  return String(value);
-}
-
-export default SeriesTableWidget;

package/src/adapters/mui/chartSetup.ts

@@ -1,53 +0,0 @@
-import {
-  BarController,
-  BarElement,
-  CategoryScale,
-  Chart as ChartJS,
-  Filler,
-  Legend,
-  LineController,
-  LineElement,
-  LinearScale,
-  ArcElement,
-  DoughnutController,
-  PieController,
-  PointElement,
-  Tooltip,
-} from 'chart.js';
-
-/**
- * Register only the Chart.js pieces these widgets use.
- *
- * Explicit registration rather than `registerables`, which pulls in every
- * controller, scale and plugin Chart.js ships. The legacy Stats page imported
- * the lot for two chart types.
- *
- * Note what is absent: the datalabels plugin. A value printed on every point is
- * an anti-pattern — it is unreadable at any real series count and goes unread.
- * Values are reachable through the tooltip and, always, the table view.
- */
-let registered = false;
-
-export function ensureChartsRegistered(): void {
-  if (registered) return;
-
-  ChartJS.register(
-    BarController,
-    BarElement,
-    LineController,
-    LineElement,
-    PointElement,
-    ArcElement,
-    DoughnutController,
-    PieController,
-    CategoryScale,
-    LinearScale,
-    Filler,
-    Legend,
-    Tooltip,
-  );
-
-  registered = true;
-}
-
-export default ensureChartsRegistered;