graphein 0.20.0 → 0.22.0

package/dist/charts/tableView/canvas.js

@@ -1,57 +1,47 @@
 import { paintCanvasText } from "../../render/overlayText.js";
-import { fontString, measureText, ellipsize } from "../../render/text.js";
+import { ellipsize, measureText } from "../../render/text.js";
 import { RoughPen } from "../../rough/index.js";
 import { roundedRect } from "../../shape/index.js";
 import { recordCanvasLabel } from "../../render/labelLedger.js";
-import { densityMetrics, normalizedHeaderRows, sumWidths, computeFittedWidths, MIN_COL_WIDTH, FILL_EPS, formatDisplayValue } from "./types.js";
-import { canvasRowBackground, negativeTextColor, resolveCanvasConditional, paintDataBar } from "./conditional.js";
+import {
+  BAR_GAP,
+  BAR_LANE_ALPHA,
+  BAR_OVERLAY_ALPHA,
+  barFill,
+  barTrack,
+  buildColumnFormatter,
+  negativeTextColor
+} from "./conditional.js";
+import { layoutColumns } from "./layout.js";
+import { sparklineGeometry } from "./sparkline.js";
+import { fontFor, resolveTableStyle, rowBackground } from "./style.js";
+import {
+  cellText,
+  defaultRowInfo,
+  normalizedHeaderRows,
+  sumWidths
+} from "./types.js";
+const DEFAULT_FORMAT_KINDS = ["leaf"];
 function paintTableCanvas(opts) {
   const { ctx, rect, tokens } = opts;
-  const metrics = densityMetrics(opts.density);
+  const style = resolveTableStyle(tokens, opts.density, opts.gridlines);
+  const m = style.metrics;
+  const formatters = opts.formatters ?? opts.columns.map((column, i) => buildColumnFormatter(column.conditionalFormat, opts.conditionalDomains?.[i] ?? null, tokens, style.color.background));
   const available = Math.max(0, rect.width - 2);
-  const minimum = Math.min(MIN_COL_WIDTH, Math.max(48, tokens.font.size.small * 3 + metrics.paddingX * 2));
-  let widths = available > FILL_EPS ? computeFittedWidths(opts.columns, available, minimum) : [];
-  if (sumWidths(widths) > available + FILL_EPS) {
-    let used = 0;
-    let visible = 0;
-    for (const width of widths) {
-      const needed = Math.min(width, minimum);
-      if (visible > 0 && used + needed > available) break;
-      used += needed;
-      visible++;
-    }
-    widths = computeFittedWidths(opts.columns.slice(0, visible), available, Math.min(minimum, available));
-  }
+  const layout = layoutColumns(opts.measure ? { ...opts, ...opts.measure } : opts, style, formatters, available, "static");
+  const widths = layout.widths.slice(0, layout.visibleCount);
   const hiddenColumns = opts.columns.length - widths.length;
   opts.widths = widths;
-  const pen = opts.sketch ? new RoughPen(ctx, opts.sketch) : null;
-  const w = Math.max(0, rect.width);
-  const h = Math.max(0, rect.height);
-  ctx.save();
-  ctx.beginPath();
-  if (pen) {
-    ctx.rect(rect.x, rect.y, w, h);
-    ctx.fillStyle = tokens.color.background;
-    ctx.fill();
-  } else {
-    roundedRect(ctx, rect.x, rect.y, w, h, tokens.radius.sm);
-    ctx.fillStyle = tokens.color.background;
-    ctx.fill();
-    ctx.lineWidth = 1;
-    ctx.strokeStyle = tokens.color.border;
-    ctx.stroke();
-  }
-  ctx.clip();
   const headerRows = normalizedHeaderRows(opts);
-  const headerHeight = headerRows.length * metrics.headerHeight;
-  const footerHeight = opts.footerRow ? metrics.rowHeight : 0;
-  const bodyTop = rect.y + headerHeight;
-  const bodyBottom = rect.y + rect.height - footerHeight;
-  const bodyHeight = Math.max(0, bodyBottom - bodyTop);
-  const rowCapacity = Math.max(0, Math.floor(bodyHeight / metrics.rowHeight));
-  const clipped = rowCapacity < opts.rowCount || hiddenColumns > 0;
-  const cueReserve = clipped && opts.clippedCue !== false && rowCapacity > 1 ? metrics.rowHeight : 0;
-  const rowsToDraw = Math.max(0, Math.min(opts.rowCount, rowCapacity - (cueReserve > 0 ? 1 : 0)));
+  const headerHeight = headerRows.length * m.headerHeight;
+  const footerHeight = opts.footerRow ? m.rowHeight : 0;
+  const capacity = Math.max(0, Math.floor((rect.height - 2 - headerHeight - footerHeight) / m.rowHeight));
+  const clipped = capacity < opts.rowCount || hiddenColumns > 0;
+  const cue = clipped && opts.clippedCue !== false && capacity > 1;
+  const rowsToDraw = Math.max(0, Math.min(opts.rowCount, capacity - (cue ? 1 : 0)));
+  const bodyRows = rowsToDraw + (cue ? 1 : 0);
+  const frameHeight = Math.max(0, Math.min(rect.height, headerHeight + bodyRows * m.rowHeight + footerHeight + 2));
+  const frameWidth = Math.max(0, Math.min(rect.width, sumWidths(widths) + 2));
   opts.labels?.omit({
     role: "data-label",
     reason: "static-viewport",
@@ -63,252 +53,371 @@ function paintTableCanvas(opts) {
   else if (opts.dataRepresentation === "aggregate") {
     opts.evidence?.data(opts.sourceRepresentedRows ?? opts.evidence.snapshot().data.inputRows, "aggregate");
   }
-  paintHeaderCanvas(opts, widths, headerRows, metrics, pen);
-  for (let rowIndex = 0; rowIndex < rowsToDraw; rowIndex += 1) {
-    paintBodyRowCanvas(opts, widths, rowIndex, bodyTop + rowIndex * metrics.rowHeight, metrics, pen);
-  }
-  if (cueReserve > 0) {
-    paintClippedCueCanvas(opts, bodyTop + rowsToDraw * metrics.rowHeight, metrics, opts.rowCount - rowsToDraw, hiddenColumns);
+  const pen = opts.sketch ? new RoughPen(ctx, opts.sketch) : null;
+  const f = { o: opts, ctx, style, widths, valueWidths: layout.valueWidths, formatters, pen, x0: rect.x + 1, width: frameWidth };
+  ctx.save();
+  ctx.beginPath();
+  if (pen) ctx.rect(rect.x, rect.y, frameWidth, frameHeight);
+  else roundedRect(ctx, rect.x, rect.y, frameWidth, frameHeight, style.radius);
+  ctx.fillStyle = style.color.background;
+  ctx.fill();
+  ctx.clip();
+  paintHeader(f, headerRows);
+  const info = opts.rowInfo ?? defaultRowInfo;
+  const bodyTop = rect.y + 1 + headerHeight;
+  for (let row = 0; row < rowsToDraw; row++) paintRow(f, row, info(row), bodyTop + row * m.rowHeight);
+  if (cue) {
+    paintCue(f, bodyTop + rowsToDraw * m.rowHeight, opts.rowCount - rowsToDraw, hiddenColumns);
   } else if (clipped && opts.clippedCue !== false) {
-    opts.labels?.omit({
-      role: "other",
-      reason: "space",
-      required: false,
-      example: "Additional rows or columns",
-      path: "/dimensions"
-    });
-  }
-  if (opts.footerRow) {
-    paintFooterCanvas(opts, widths, rect.y + rect.height - metrics.rowHeight, metrics, pen);
+    opts.labels?.omit({ role: "other", reason: "space", required: false, example: "Additional rows or columns", path: "/dimensions" });
   }
+  if (opts.footerRow) paintFooter(f, bodyTop + bodyRows * m.rowHeight);
+  const rulesBottom = bodyTop + rowsToDraw * m.rowHeight;
+  paintVerticalRules(f, bodyTop - headerHeight, rulesBottom, headerRows.length);
+  if (opts.footerRow) paintVerticalRules(f, bodyTop + bodyRows * m.rowHeight, bodyTop + bodyRows * m.rowHeight + footerHeight, 0);
   ctx.restore();
-  if (pen) pen.rect(rect.x, rect.y, w, h, { stroke: tokens.color.border });
+  if (pen) pen.rect(rect.x, rect.y, frameWidth, frameHeight, { stroke: tokens.color.border });
+  else {
+    ctx.save();
+    ctx.beginPath();
+    roundedRect(ctx, rect.x + 0.5, rect.y + 0.5, Math.max(0, frameWidth - 1), Math.max(0, frameHeight - 1), style.radius);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = tokens.color.border;
+    ctx.stroke();
+    ctx.restore();
+  }
+}
+function colX(f, col) {
+  return f.x0 + sumWidths(f.widths, 0, col);
 }
-function paintHeaderCanvas(opts, widths, rows, metrics, pen) {
+function paintHeader(f, rows) {
+  const { o, style } = f;
+  const m = style.metrics;
+  const top = o.rect.y + 1;
+  fillRect(f, f.x0, top, f.width - 2, rows.length * m.headerHeight, style.color.headerBg);
   rows.forEach((row, rowIndex) => {
     let cursor = 0;
     for (const cell of row) {
       const start = cell.colIndex ?? cursor;
-      const colSpan = Math.max(1, cell.colSpan ?? 1);
-      const rowSpan = Math.max(1, cell.rowSpan ?? 1);
-      if (start >= widths.length) {
-        opts.labels?.omit({
-          role: "axis-label",
-          reason: "static-viewport",
-          required: true,
-          example: cell.title,
-          path: "/columns"
-        });
-        cursor = start + colSpan;
+      const span = Math.max(1, cell.colSpan ?? 1);
+      cursor = start + span;
+      if (start >= f.widths.length) {
+        o.labels?.omit({ role: "axis-label", reason: "static-viewport", required: true, example: cell.title, path: "/columns" });
         continue;
       }
-      const x = opts.rect.x + sumWidths(widths.slice(0, start));
-      const y = opts.rect.y + rowIndex * metrics.headerHeight;
-      const w = sumWidths(widths.slice(start, start + colSpan));
-      const h = metrics.headerHeight * rowSpan;
-      paintCellBox(opts.ctx, x, y, w, h, opts.tokens.color.surface, opts.tokens.color.border, false, pen);
-      paintCellText(opts, {
-        x,
+      const x = colX(f, start);
+      const w = sumWidths(f.widths, start, Math.min(f.widths.length, start + span));
+      const y = top + rowIndex * m.headerHeight;
+      const h = m.headerHeight * Math.max(1, cell.rowSpan ?? 1);
+      const band = cell.colIndex == null && span > 1;
+      const sorted = cell.colIndex != null && o.sortState?.col === cell.colIndex;
+      const arrow = sorted ? o.sortState?.dir === "desc" ? "\u2193" : "\u2191" : "";
+      const align = cell.align ?? "left";
+      const arrowRoom = arrow ? 14 : 0;
+      paintText(f, {
+        x: align === "right" ? x + arrowRoom : x,
         y,
-        width: w,
+        width: w - arrowRoom,
         height: h,
         text: cell.title,
-        align: cell.align ?? "left",
-        color: opts.tokens.color.text,
-        weight: opts.tokens.font.weight.bold,
-        paddingX: metrics.paddingX,
-        background: opts.tokens.color.surface,
-        role: "axis-label"
+        align,
+        color: sorted ? style.color.text : style.color.headerText,
+        weight: style.weight.bold,
+        background: style.color.headerBg,
+        role: "axis-label",
+        padLeft: m.paddingX,
+        padRight: m.paddingX
       });
-      cursor = start + colSpan;
+      if (arrow) {
+        const font = fontFor(style, style.weight.bold);
+        const label = Math.min(measureText(cell.title, font).width, w - m.paddingX * 2 - arrowRoom);
+        const ax = align === "right" ? x + w - m.paddingX - label - 12 : align === "center" ? x + (w + label) / 2 + 3 : x + m.paddingX + label + 3;
+        paintCanvasText(f.ctx, { x: ax, y: y + h / 2, text: arrow, font, color: style.color.accent, size: m.fontSize, baseline: "middle" });
+      }
+      hRule(f, x, x + w, y + h, band ? style.color.rule : style.color.ruleStrong);
+      if (start > 0 && o.columns[start]?.groupStart) vRule(f, x, y, y + h, style.color.rule);
     }
   });
 }
-function paintBodyRowCanvas(opts, widths, rowIndex, y, metrics, pen) {
-  const cls = opts.rowClass?.(rowIndex) ?? "normal";
-  let x = opts.rect.x;
-  for (let colIndex = 0; colIndex < widths.length; colIndex += 1) {
-    const column = opts.columns[colIndex];
-    const width = widths[colIndex] ?? 0;
-    const cell = opts.getCell(rowIndex, colIndex);
-    const baseBg = canvasRowBackground(opts, rowIndex, cls);
-    const conditional = resolveCanvasConditional(opts, column, colIndex, cell, baseBg);
-    const bg = conditional.background ?? baseBg;
-    paintCellBox(opts.ctx, x, y, width, metrics.rowHeight, bg, opts.tokens.color.border, false, pen);
-    if (conditional.bar) paintDataBar(opts, x, y, width, metrics.rowHeight, conditional.bar, pen);
-    const indent = opts.cellIndent?.(rowIndex, colIndex) ?? 0;
-    const text = conditional.showValue === false ? "" : formatDisplayValue(cell.value, column);
-    const color = negativeTextColor(cell.value, column, conditional.color ?? opts.tokens.color.text);
-    if (opts.dataRepresentation !== "aggregate" || colIndex >= (opts.rowHeaderSpan ?? 0) && cell.raw != null && Number.isFinite(cell.raw)) {
-      opts.evidence?.mark("cell", x, y, width, metrics.rowHeight, color, 1, opts.rect, 1, bg);
+function paintRow(f, row, info, y) {
+  const { o, style } = f;
+  const m = style.metrics;
+  const stripe = o.striped === true && row % 2 === 1 && info.kind === "leaf";
+  const rowBg = o.highlighted?.(row) ? style.color.highlight : rowBackground(style, info.kind, stripe);
+  fillRect(f, f.x0, y, f.width - 2, m.rowHeight, rowBg);
+  const kinds = o.formatKinds ?? DEFAULT_FORMAT_KINDS;
+  const rowFormatters = o.rowFormatters ? o.rowFormatters(row) : kinds.includes(info.kind) ? f.formatters : null;
+  for (let col = 0; col < f.widths.length; col++) {
+    const cell = o.getCell(row, col);
+    const formatter = rowFormatters?.[col] ?? null;
+    const paint = formatter ? formatter(cell) : null;
+    paintCell(f, row, col, info, cell, paint, y, rowBg);
+  }
+  if (info.kind === "subtotal") hRule(f, f.x0, f.x0 + f.width - 2, y, style.color.rule);
+  if (style.gridlines === "horizontal" || style.gridlines === "both") hRule(f, f.x0, f.x0 + f.width - 2, y + m.rowHeight, style.color.rule);
+}
+function paintCell(f, row, col, info, cell, paint, y, rowBg) {
+  const { o, style } = f;
+  const m = style.metrics;
+  const column = o.columns[col];
+  const x = colX(f, col);
+  const w = f.widths[col];
+  const bg = paint?.background ?? rowBg;
+  if (paint?.background) fillRect(f, x, y, w, m.rowHeight, paint.background);
+  const strong = info.kind !== "leaf";
+  const weight = paint?.weight ?? (strong || column.total ? style.weight.bold : style.weight.normal);
+  const color = paint?.color ?? negativeTextColor(cell.value, column, style.color.text, style.color.negative);
+  const text = paint?.showValue === false ? "" : cellText(cell, column);
+  if (countsAsMark(o, col, cell)) o.evidence?.mark("cell", x, y, w, m.rowHeight, color, 1, o.rect, 1, bg);
+  if (column.rowHeader) {
+    const indent = info.depth * m.indent;
+    const toggleX = x + m.paddingX + indent;
+    if (info.expandable) paintChevron(f, toggleX, y + m.rowHeight / 2, info.expanded !== false);
+    const hierarchy = info.expandable || hasHierarchy(o);
+    const left = m.paddingX + indent + (hierarchy ? m.toggle + 4 : 0);
+    paintText(f, { x, y, width: w, height: m.rowHeight, text, align: "left", color, weight, background: bg, padLeft: left, padRight: m.paddingX });
+    return;
+  }
+  if (column.sparkline && Array.isArray(cell.value)) {
+    paintSparkline(f, cell.value, column.sparkline, x + m.paddingX, y + 6, Math.max(0, w - m.paddingX * 2), m.rowHeight - 12);
+    return;
+  }
+  if (paint?.bar) {
+    const track = barTrack(w, m.paddingX, f.valueWidths[col] ?? 0, column.align, paint.showValue !== false);
+    paintBar(f, x + track.left, y, track.width, paint, track.overlay);
+  }
+  const iconFont = fontFor(style, style.weight.bold);
+  const iconW = paint?.icon ? measureText(paint.icon, iconFont).width : 0;
+  const gap = paint?.icon ? 6 : 0;
+  const font = fontFor(style, weight);
+  const budget = Math.max(0, w - m.paddingX * 2 - iconW - gap);
+  const shown = ellipsize(text, budget, font);
+  const textW = measureText(shown, font).width;
+  const group = textW + iconW + gap;
+  const start = column.align === "right" ? x + w - m.paddingX - group : column.align === "center" ? x + (w - group) / 2 : x + m.paddingX;
+  const iconFirst = paint?.icon && paint.iconPosition !== "right";
+  const textX = iconFirst ? start + iconW + gap : start;
+  const midY = y + m.rowHeight / 2;
+  if (paint?.icon) {
+    const iconX = iconFirst ? start : start + textW + gap;
+    const command2 = { x: iconX, y: midY, text: paint.icon, font: iconFont, color: paint.iconColor ?? color, size: m.fontSize, baseline: "middle" };
+    recordCanvasLabel(o.labels, command2, { background: bg, clip: o.rect });
+    paintCanvasText(f.ctx, command2);
+  }
+  if (!text) return;
+  const command = { x: textX, y: midY, text: shown, font, color, size: m.fontSize, baseline: "middle" };
+  recordCanvasLabel(o.labels, command, { fullText: text, budget, background: bg, clip: o.rect });
+  if (!shown) o.labels?.omit({ role: "data-label", reason: "space", required: false });
+  else paintCanvasText(f.ctx, command);
+}
+function hasHierarchy(o) {
+  const source = o.measure ?? o;
+  const info = source.rowInfo;
+  if (!info) return false;
+  for (let i = 0; i < Math.min(source.rowCount, 200); i++) if (info(i).expandable) return true;
+  return false;
+}
+function paintBar(f, left, y, track, paint, overlay) {
+  const { ctx, style } = f;
+  const m = style.metrics;
+  const bar = paint.bar;
+  const bx = left + bar.from * track;
+  const bw = Math.max(0, (bar.to - bar.from) * track);
+  const by = y + (m.rowHeight - m.barHeight) / 2;
+  const fill = barFill(bar.color, overlay ? BAR_OVERLAY_ALPHA : BAR_LANE_ALPHA);
+  if (bar.zero !== void 0) {
+    const zx = Math.round(left + bar.zero * track) + 0.5;
+    ctx.save();
+    ctx.strokeStyle = style.color.ruleStrong;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(zx, by - 2);
+    ctx.lineTo(zx, by + m.barHeight + 2);
+    ctx.stroke();
+    ctx.restore();
+  }
+  if (bw <= 0) return;
+  if (f.pen) {
+    f.pen.rect(bx, by, bw, m.barHeight, { stroke: fill, fill, fillAlpha: 0.9, strokeAlpha: 0.9 });
+    return;
+  }
+  ctx.save();
+  ctx.beginPath();
+  roundedRect(ctx, bx, by, bw, m.barHeight, Math.min(2, bw / 2));
+  ctx.fillStyle = fill;
+  ctx.fill();
+  ctx.restore();
+}
+function paintSparkline(f, values, spark, x, y, w, h) {
+  if (w <= 2 || h <= 2) return;
+  const shape = sparklineGeometry(values, spark, w, h);
+  if (!shape.points.length) return;
+  const ctx = f.ctx;
+  const color = spark.color ?? f.o.tokens.color.accent;
+  ctx.save();
+  ctx.translate(x, y);
+  if (spark.type === "bar") {
+    ctx.fillStyle = barFill(color, 0.85);
+    for (const p of shape.points) ctx.fillRect(p.x - shape.barWidth / 2, Math.min(p.y, p.base), shape.barWidth, Math.max(0.5, Math.abs(p.base - p.y)));
+  } else {
+    if (spark.type === "area") {
+      ctx.fillStyle = barFill(color, 0.18);
+      for (const run of shape.runs) {
+        if (run.length < 2) continue;
+        ctx.beginPath();
+        ctx.moveTo(run[0].x, run[0].base);
+        for (const p of run) ctx.lineTo(p.x, p.y);
+        ctx.lineTo(run[run.length - 1].x, run[run.length - 1].base);
+        ctx.closePath();
+        ctx.fill();
+      }
     }
-    const weight = conditional.weight ?? (cls === "normal" ? opts.tokens.font.weight.normal : opts.tokens.font.weight.bold);
-    paintCellValueWithIcon(opts, {
-      x,
-      y,
-      width,
-      height: metrics.rowHeight,
-      text,
-      align: column.align,
-      color,
-      weight,
-      paddingX: metrics.paddingX + indent,
-      icon: conditional.icon,
-      iconColor: conditional.iconColor,
-      iconPosition: conditional.iconPosition,
-      background: bg
-    });
-    x += width;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    ctx.lineCap = "round";
+    for (const run of shape.runs) {
+      ctx.beginPath();
+      run.forEach((p, i) => i ? ctx.lineTo(p.x, p.y) : ctx.moveTo(p.x, p.y));
+      if (run.length === 1) ctx.lineTo(run[0].x + 0.01, run[0].y);
+      ctx.stroke();
+    }
+  }
+  ctx.restore();
+  f.o.evidence?.segments(shape.points.length);
+}
+function paintChevron(f, x, cy, expanded) {
+  const { ctx, style } = f;
+  const box = style.metrics.toggle;
+  const cx = x + box / 2;
+  ctx.save();
+  ctx.strokeStyle = style.color.textMuted;
+  ctx.lineWidth = 1.6;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.beginPath();
+  if (expanded) {
+    ctx.moveTo(cx - 3, cy - 1.5);
+    ctx.lineTo(cx, cy + 1.5);
+    ctx.lineTo(cx + 3, cy - 1.5);
+  } else {
+    ctx.moveTo(cx - 1.5, cy - 3);
+    ctx.lineTo(cx + 1.5, cy);
+    ctx.lineTo(cx - 1.5, cy + 3);
   }
+  ctx.stroke();
+  ctx.restore();
 }
-function paintFooterCanvas(opts, widths, y, metrics, pen) {
-  let x = opts.rect.x;
-  for (let colIndex = 0; colIndex < widths.length; colIndex += 1) {
-    const column = opts.columns[colIndex];
-    const width = widths[colIndex] ?? 0;
-    const cell = opts.footerRow?.cells[colIndex] ?? { value: null, raw: null };
-    paintCellBox(opts.ctx, x, y, width, metrics.rowHeight, opts.tokens.color.surface, opts.tokens.color.border, true, pen);
-    paintCellText(opts, {
-      x,
+function paintFooter(f, y) {
+  const { o, style } = f;
+  const m = style.metrics;
+  const kind = o.footerRow?.kind === "grandtotal" ? "grandtotal" : "subtotal";
+  fillRect(f, f.x0, y, f.width - 2, m.rowHeight, style.color.totalBg);
+  hRule(f, f.x0, f.x0 + f.width - 2, y, style.color.ruleStrong);
+  for (let col = 0; col < f.widths.length; col++) {
+    const cell = o.footerRow?.cells[col] ?? { value: null, raw: null };
+    const info = { kind, depth: 0 };
+    if (o.dataRepresentation === "aggregate" || o.columns[col]?.rowHeader) {
+      paintCell(f, -1, col, info, cell, null, y, style.color.totalBg);
+      continue;
+    }
+    const column = o.columns[col];
+    const color = negativeTextColor(cell.value, column, style.color.text, style.color.negative);
+    paintText(f, {
+      x: colX(f, col),
       y,
-      width,
-      height: metrics.rowHeight,
-      text: cell.label ? String(cell.value ?? "") : formatDisplayValue(cell.value, column),
+      width: f.widths[col],
+      height: m.rowHeight,
+      text: cellText(cell, column),
       align: column.align,
-      color: negativeTextColor(cell.value, column, opts.tokens.color.text),
-      weight: opts.tokens.font.weight.bold,
-      paddingX: metrics.paddingX
+      color,
+      weight: style.weight.bold,
+      background: style.color.totalBg,
+      padLeft: m.paddingX,
+      padRight: m.paddingX
     });
-    x += width;
   }
 }
-function paintClippedCueCanvas(opts, y, metrics, remaining, hiddenColumns = 0) {
-  paintCellBox(opts.ctx, opts.rect.x, y, opts.rect.width, metrics.rowHeight, opts.tokens.color.background, opts.tokens.color.border);
-  paintCellText(opts, {
-    x: opts.rect.x,
+function paintCue(f, y, remaining, hiddenColumns) {
+  const { style } = f;
+  const m = style.metrics;
+  fillRect(f, f.x0, y, f.width - 2, m.rowHeight, style.color.background);
+  paintText(f, {
+    x: f.x0,
     y,
-    width: opts.rect.width,
-    height: metrics.rowHeight,
+    width: f.width - 2,
+    height: m.rowHeight,
     text: hiddenColumns ? `\u2026${remaining ? `${remaining} more rows \xB7 ` : ""}${hiddenColumns} more columns` : `\u2026${remaining} more`,
     align: "center",
-    color: opts.tokens.color.textMuted,
-    weight: opts.tokens.font.weight.medium,
-    paddingX: metrics.paddingX
+    color: style.color.textMuted,
+    weight: style.weight.medium,
+    background: style.color.background,
+    padLeft: m.paddingX,
+    padRight: m.paddingX
   });
 }
-function paintCellBox(ctx, x, y, width, height, background, border, topBorder = false, pen) {
-  ctx.save();
-  ctx.fillStyle = background;
-  ctx.fillRect(x, y, width, height);
-  if (pen) {
-    pen.polyline(
-      [
-        { x: x + width, y },
-        { x: x + width, y: y + height },
-        { x, y: y + height }
-      ],
-      { stroke: border, strokeWidth: 1 }
-    );
-    if (topBorder) {
-      pen.polyline([{ x, y }, { x: x + width, y }], { stroke: border, strokeWidth: 1 });
-    }
-    ctx.restore();
-    return;
+function paintVerticalRules(f, top, bottom, headerRowCount) {
+  const { o, style } = f;
+  const all = style.gridlines === "vertical" || style.gridlines === "both";
+  const bodyTop = top + headerRowCount * style.metrics.headerHeight;
+  for (let col = 1; col < f.widths.length; col++) {
+    const x = colX(f, col);
+    if (all) vRule(f, x, top, bottom, style.color.rule);
+    else if (o.columns[col]?.groupStart) vRule(f, x, bodyTop, bottom, style.color.rule);
+    if (col === (o.frozenColumns ?? 0) && col > 0 && !all) vRule(f, x, bodyTop, bottom, style.color.ruleStrong);
   }
-  ctx.strokeStyle = border;
-  ctx.lineWidth = 1;
-  ctx.beginPath();
-  ctx.moveTo(x + width, y);
-  ctx.lineTo(x + width, y + height);
-  ctx.moveTo(x, y + height);
-  ctx.lineTo(x + width, y + height);
-  if (topBorder) {
-    ctx.moveTo(x, y);
-    ctx.lineTo(x + width, y);
+}
+function fillRect(f, x, y, w, h, color) {
+  f.ctx.fillStyle = color;
+  f.ctx.fillRect(x, y, w, h);
+}
+function hRule(f, x1, x2, y, color) {
+  if (f.pen) {
+    f.pen.polyline([{ x: x1, y }, { x: x2, y }], { stroke: f.o.tokens.color.border, strokeWidth: 1 });
+    return;
   }
-  ctx.stroke();
-  ctx.restore();
+  const yy = Math.round(y) - 0.5;
+  f.ctx.save();
+  f.ctx.strokeStyle = color;
+  f.ctx.lineWidth = 1;
+  f.ctx.beginPath();
+  f.ctx.moveTo(x1, yy);
+  f.ctx.lineTo(x2, yy);
+  f.ctx.stroke();
+  f.ctx.restore();
 }
-function paintCellValueWithIcon(opts, input) {
-  const font = fontString(opts.tokens.font.size.small, opts.tokens.font.family, input.weight);
-  const gap = input.icon ? 6 : 0;
-  const iconFont = fontString(opts.tokens.font.size.small, opts.tokens.font.family, opts.tokens.font.weight.bold);
-  const iconW = input.icon ? measureText(input.icon, iconFont).width : 0;
-  const textMax = Math.max(0, input.width - input.paddingX * 2 - iconW - gap);
-  const text = ellipsize(input.text, textMax, font);
-  const textW = measureText(text, font).width;
-  const groupW = textW + iconW + gap;
-  let start = input.x + input.paddingX;
-  if (input.align === "right") start = input.x + input.width - input.paddingX - groupW;
-  else if (input.align === "center") start = input.x + (input.width - groupW) / 2;
-  const midY = input.y + input.height / 2;
-  const iconFirst = input.icon && input.iconPosition !== "right";
-  const iconX = iconFirst ? start : start + textW + gap;
-  const textX = iconFirst ? start + iconW + gap : start;
-  recordCanvasLabel(opts.labels, {
-    x: textX,
-    y: midY,
-    text,
-    font,
-    color: input.color,
-    size: opts.tokens.font.size.small,
-    baseline: "middle"
-  }, { fullText: input.text, budget: textMax, background: input.background, clip: opts.rect });
-  if (!text && input.text) opts.labels?.omit({ role: "data-label", reason: "space", required: false });
-  if (input.icon) {
-    recordCanvasLabel(opts.labels, {
-      x: iconX,
-      y: midY,
-      text: input.icon,
-      font: iconFont,
-      color: input.iconColor ?? input.color,
-      size: opts.tokens.font.size.small,
-      baseline: "middle"
-    }, { background: input.background, clip: opts.rect });
-    paintCanvasText(opts.ctx, {
-      x: iconX,
-      y: midY,
-      text: input.icon,
-      font: iconFont,
-      color: input.iconColor ?? input.color,
-      size: opts.tokens.font.size.small,
-      baseline: "middle"
-    });
+function vRule(f, x, y1, y2, color) {
+  if (f.pen) {
+    f.pen.polyline([{ x, y: y1 }, { x, y: y2 }], { stroke: f.o.tokens.color.border, strokeWidth: 1 });
+    return;
   }
-  paintRawCellText(opts, textX, midY, text, font, input.color, opts.tokens.font.size.small);
+  const xx = Math.round(x) + 0.5;
+  f.ctx.save();
+  f.ctx.strokeStyle = color;
+  f.ctx.lineWidth = 1;
+  f.ctx.beginPath();
+  f.ctx.moveTo(xx, y1);
+  f.ctx.lineTo(xx, y2);
+  f.ctx.stroke();
+  f.ctx.restore();
 }
-function paintCellText(opts, input) {
-  const font = fontString(opts.tokens.font.size.small, opts.tokens.font.family, input.weight);
-  const maxWidth = Math.max(0, input.width - input.paddingX * 2);
-  const text = ellipsize(input.text, maxWidth, font);
-  const x = input.align === "right" ? input.x + input.width - input.paddingX : input.align === "center" ? input.x + input.width / 2 : input.x + input.paddingX;
-  recordCanvasLabel(opts.labels, {
-    x,
-    y: input.y + input.height / 2,
-    text,
-    font,
-    color: input.color,
-    size: opts.tokens.font.size.small,
-    align: input.align,
-    baseline: "middle"
-  }, { fullText: input.text, budget: maxWidth, background: input.background, role: input.role, clip: opts.rect });
-  if (!text && input.text) opts.labels?.omit({ role: input.role ?? "data-label", reason: "space", required: input.role === "axis-label" });
-  paintRawCellText(opts, x, input.y + input.height / 2, text, font, input.color, opts.tokens.font.size.small, input.align);
+function paintText(f, input) {
+  const { o, style } = f;
+  const font = fontFor(style, input.weight);
+  const budget = Math.max(0, input.width - input.padLeft - input.padRight);
+  const text = ellipsize(input.text, budget, font);
+  const x = input.align === "right" ? input.x + input.width - input.padRight : input.align === "center" ? input.x + input.padLeft + budget / 2 : input.x + input.padLeft;
+  const command = { x, y: input.y + input.height / 2, text, font, color: input.color, size: style.metrics.fontSize, align: input.align, baseline: "middle" };
+  recordCanvasLabel(o.labels, command, { fullText: input.text, budget, background: input.background, role: input.role, clip: o.rect });
+  if (!text && input.text) o.labels?.omit({ role: input.role ?? "data-label", reason: "space", required: input.role === "axis-label" });
+  if (text) paintCanvasText(f.ctx, command);
 }
-function paintRawCellText(opts, x, y, text, font, color, size, align = "left") {
-  if (!text) return;
-  paintCanvasText(opts.ctx, {
-    x,
-    y,
-    text,
-    font,
-    color,
-    size,
-    align,
-    baseline: "middle"
-  });
+function countsAsMark(o, col, cell) {
+  if (o.dataRepresentation !== "aggregate") return true;
+  return !o.columns[col]?.rowHeader && typeof cell.raw === "number" && Number.isFinite(cell.raw);
 }
 export {
+  BAR_GAP,
   paintTableCanvas
 };
 //# sourceMappingURL=canvas.js.map