@svgrid/grid 3.0.2 → 3.0.4

package/src/chart.coverage.test.ts

@@ -399,6 +399,29 @@ describe("buildChart: waterfall", () => {
     // a connector line exists between bar tops
     expect(g.lines[0]!.path).toContain("M");
   });
+  it("tilts its labels when the widest does not fit its slot, with the angle the renderer needs", () => {
+    const cats = ["Revenue", "Cost of sales", "Gross profit", "R&D", "Sales & marketing", "G&A", "Operating income", "Tax", "Net income"];
+    const wide = buildChart({ type: "waterfall", categories: cats, series: [{ label: "s", values: cats.map(() => 1) }], width: 1400, height: 300 });
+    expect(wide.xLabelRotated).toBe(false);
+    const narrow = buildChart({ type: "waterfall", categories: cats, series: [{ label: "s", values: cats.map(() => 1) }], width: 700, height: 300 });
+    expect(narrow.xLabelRotated).toBe(true);
+    expect(narrow.xLabelAngle).toBe(-40);
+    const pinned = buildChart({ type: "waterfall", categories: cats, series: [{ label: "s", values: cats.map(() => 1) }], width: 700, height: 300, xAxis: { labelRotation: 0 } });
+    expect(pinned.xLabelRotated).toBe(false);
+  });
+  it("a total with a value opens the bridge at that level; a total with 0 reads the running sum", () => {
+    const g = buildChart({
+      type: "waterfall",
+      categories: ["Revenue", "Cost", "Gross", "Tax", "Net"],
+      series: [{ label: "s", values: [4300, -1840, 0, -180, 0] }],
+      waterfallTotals: [true, false, true, false, true],
+    });
+    expect(g.bars.map((b) => b.value)).toEqual([4300, -1840, 2460, -180, 2280]);
+    // The opening bar rises from zero; the cost hangs from its top.
+    const [revenue, cost] = g.bars;
+    expect(revenue!.y).toBeLessThan(cost!.y + cost!.h);
+    expect(cost!.y).toBeCloseTo(revenue!.y, 0);
+  });
   it("colors positive/negative/total via waterfallColors overrides", () => {
     const g = buildChart({
       type: "waterfall",
@@ -437,6 +460,21 @@ describe("buildChart: funnel", () => {
   });
 });
 
+describe("buildChart: colour legends", () => {
+  it("round their steps to the precision the range earns", () => {
+    const counts = buildChart({
+      type: "calendar", categories: [], series: [],
+      calendarValues: [{ date: "2026-01-05", value: 20 }, { date: "2026-01-06", value: 314 }, { date: "2026-01-07", value: 150 }],
+    });
+    expect(counts.calendarLegend.map((l) => l.label)).toEqual(["20", "94", "167", "241", "314"]);
+    const ratios = buildChart({
+      type: "heatmap", categories: ["a", "b"],
+      series: [{ label: "r1", values: [0.1, 0.5] }, { label: "r2", values: [0.3, 0.9] }],
+    });
+    expect(ratios.heatmapLegend.map((l) => l.value)).toEqual([0.1, 0.3, 0.5, 0.7, 0.9]);
+  });
+});
+
 describe("buildChart: radar", () => {
   it("one polygon per series + axis spokes + rings", () => {
     const g = buildChart({
@@ -459,6 +497,27 @@ describe("buildChart: radar", () => {
       buildChart({ type: "radar", categories: ["A"], series: [] }).radarAxes,
     ).toHaveLength(0);
   });
+  it("yAxis.min / max pin the rim, and a value past it sits on the rim", () => {
+    const spec = {
+      type: "radar" as const,
+      categories: ["A", "B", "C", "D"],
+      series: [{ label: "s", values: [50, 50, 50, 50] }],
+    };
+    const free = buildChart(spec);
+    const pinned = buildChart({ ...spec, yAxis: { min: 0, max: 100 } });
+    const c = pinned.radarCenter!;
+    // Unpinned, 50 is the data maximum and sits on the rim; pinned to 100 it sits halfway.
+    expect(free.radarSeries[0]!.points[0]!.y).toBeCloseTo(c.cy - c.r, 0);
+    expect(pinned.radarSeries[0]!.points[0]!.y).toBeCloseTo(c.cy - c.r / 2, 0);
+    expect(pinned.radarRings.at(-1)).toBe(100);
+    // Past the rim clamps to it rather than leaving the dial.
+    const over = buildChart({ ...spec, yAxis: { min: 0, max: 40 } });
+    expect(over.radarSeries[0]!.points[0]!.y).toBeCloseTo(c.cy - c.r, 0);
+    // A pinned minimum lifts the floor: the value at the minimum is the centre.
+    const floor = buildChart({ ...spec, series: [{ label: "s", values: [20, 60, 20, 60] }], yAxis: { min: 20, max: 60 } });
+    expect(floor.radarSeries[0]!.points[0]!.x).toBeCloseTo(c.cx, 0);
+    expect(floor.radarSeries[0]!.points[0]!.y).toBeCloseTo(c.cy, 0);
+  });
   it("guards against an all-zero max (vMax defaults to 1)", () => {
     const g = buildChart({
       type: "radar",
@@ -493,6 +552,19 @@ describe("buildChart: calendar heatmap", () => {
     expect(blank!.color).toBe("transparent");
     expect(g.calendarMonthTicks.length).toBeGreaterThanOrEqual(1);
   });
+  it("labels only the months inside the range: the padding days of the next year get no tick", () => {
+    // 2026 ends on a Thursday; the grid pads to Saturday 2 Jan 2027.
+    const g = buildChart({
+      type: "calendar", categories: [], series: [],
+      calendarValues: [{ date: "2026-12-30", value: 1 }],
+      calendarStart: "2026-01-01", calendarEnd: "2026-12-31",
+    });
+    expect(g.calendarMonthTicks).toHaveLength(12);
+    expect(g.calendarMonthTicks[0]!.label).toBe(new Date("2026-01-01T00:00:00Z").toLocaleDateString(undefined, { month: "short" }));
+    expect(g.calendarMonthTicks[11]!.label).toBe(new Date("2026-12-01T00:00:00Z").toLocaleDateString(undefined, { month: "short" }));
+    // The padding cells exist but are blank.
+    expect(g.calendarCells.filter((c) => c.date > "2026-12-31").every((c) => !c.defined)).toBe(true);
+  });
   it("honours explicit calendarStart even with no values", () => {
     const g = buildChart({
       type: "calendar",
@@ -628,6 +700,15 @@ describe("buildChart: heatmap", () => {
     expect(g.heatmapRowTicks.map((t) => t.label)).toEqual(["North", "South"]);
     expect(g.heatmapColTicks.map((t) => t.label)).toEqual(["Q1", "Q2", "Q3"]);
     expect(g.heatmapLegend).toHaveLength(5);
+    // Column labels thin out when the cells get narrower than a label: 24
+    // hours in 520px is about 15px a cell, so every fourth one is written.
+    const hours = Array.from({ length: 24 }, (_, h) => `${String(h).padStart(2, "0")}:00`);
+    const dense = buildChart({ type: "heatmap", categories: hours, series: [{ label: "Mon", values: hours.map((_, i) => i) }] });
+    expect(dense.heatmapCells).toHaveLength(24);
+    expect(dense.heatmapColTicks.length).toBeLessThan(24);
+    expect(dense.heatmapColTicks[0]!.label).toBe("00:00");
+    const gap = dense.heatmapColTicks[1]!.x - dense.heatmapColTicks[0]!.x;
+    expect(gap).toBeGreaterThanOrEqual(60);
     for (const c of g.heatmapCells) {
       expect(["#0f172a", "#ffffff"]).toContain(c.textColor);
     }

package/src/chart.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { buildChart, rowsToChartSpec, niceScale, sliceChartWindow, specToTreemap, specToCalendar, specToSankey, rowsToScatterSpec, rowsToGaugeSpec, boxStats, rowsToBoxSpec, chartScales } from './chart'
+import { buildChart, rowsToChartSpec, niceScale, sliceChartWindow, specToTreemap, specToCalendar, specToSankey, rowsToScatterSpec, rowsToGaugeSpec, boxStats, rowsToBoxSpec, chartScales, layoutDataLabels } from './chart'
 import type { ChartSpec } from './chart'
 
 describe('niceScale', () => {
@@ -116,9 +116,37 @@ describe('buildChart', () => {
     expect(g.donut!.total).toBe(10)
   })
 
-  it('rotates x labels when there are many / long categories', () => {
-    const many = buildChart({ type: 'bar', categories: Array.from({ length: 12 }, (_, i) => `Cat ${i}`), series: [{ label: 's', values: Array(12).fill(1) }] })
+  it('data labels on a 100% chart read the share, the way the axis does', () => {
+    const spec: ChartSpec = {
+      type: 'bar',
+      stacked100: true,
+      categories: ['Q1', 'Q2'],
+      series: [
+        { label: 'a', values: [25, 60] },
+        { label: 'b', values: [75, 40] },
+      ],
+      valueFormat: 'currency',
+      width: 400,
+      height: 200,
+    }
+    const geo = buildChart(spec)
+    const labels = layoutDataLabels(geo, { show: true, placement: 'inside', hideOverlap: false }, (v) => `$${v}`, { stacked: true, share: true })
+    expect(labels.map((l) => l.text)).toEqual(['25%', '60%', '75%', '40%'])
+    // Without the share flag the raw values stay, formatted the chart's way.
+    const raw = layoutDataLabels(geo, { show: true, placement: 'inside', hideOverlap: false }, (v) => `$${v}`, { stacked: true })
+    expect(raw.map((l) => l.text)).toEqual(['$25', '$60', '$75', '$40'])
+    // A formatter still receives the raw value.
+    const custom = layoutDataLabels(geo, { show: true, placement: 'inside', hideOverlap: false, formatter: (v) => `v${v}` }, String, { stacked: true, share: true })
+    expect(custom.map((l) => l.text)).toEqual(['v25', 'v60', 'v75', 'v40'])
+  })
+
+  it('rotates x labels when the widest one does not fit its slot, and only then', () => {
+    const cats = Array.from({ length: 12 }, (_, i) => `Cat ${i}`)
+    const many = buildChart({ type: 'bar', categories: cats, series: [{ label: 's', values: Array(12).fill(1) }] })
     expect(many.xLabelRotated).toBe(true)
+    // The same twelve labels on a chart wide enough for them stay upright.
+    const wide = buildChart({ type: 'bar', categories: cats, width: 1100, series: [{ label: 's', values: Array(12).fill(1) }] })
+    expect(wide.xLabelRotated).toBe(false)
     const few = buildChart({ type: 'bar', categories: ['A', 'B'], series: [{ label: 's', values: [1, 2] }] })
     expect(few.xLabelRotated).toBe(false)
   })
@@ -317,6 +345,31 @@ describe('rowsToChartSpec', () => {
     expect(spec.series[0]!.values).toEqual([100, 50, 50])
   })
 
+  it('topN folds the tail INTO a category already named "Other" instead of duplicating it', () => {
+    // A real "Other" bucket in the data (a browser share's long tail) used
+    // to come out beside the folded one: two categories with one name, which
+    // is a duplicate key the renderer throws on.
+    const many = [
+      { cat: 'A', v: 100, id: 1 },
+      { cat: 'Other', v: 60, id: 2 },
+      { cat: 'B', v: 50, id: 3 },
+      { cat: 'C', v: 30, id: 4 },
+      { cat: 'D', v: 20, id: 5 },
+    ]
+    // "Other" is second by value and would have made the top 3 on its own.
+    const spec = rowsToChartSpec(many, { type: 'bar', category: 'cat', value: 'v', topN: 3, idField: 'id' })
+    expect(spec.categories).toEqual(['A', 'B', 'Other'])
+    expect(spec.series[0]!.values).toEqual([100, 50, 60 + 30 + 20])
+    expect(spec.series[0]!.rowIds).toEqual([[1], [3], [2, 4, 5]])
+    expect(new Set(spec.categories).size).toBe(spec.categories.length)
+    // Below the cut it is folded the same way, and a custom label is honoured.
+    const low = rowsToChartSpec(many.map((r) => (r.cat === 'Other' ? { ...r, v: 5 } : r)), { type: 'bar', category: 'cat', value: 'v', topN: 3 })
+    expect(low.categories).toEqual(['A', 'B', 'C', 'Other'])
+    expect(low.series[0]!.values).toEqual([100, 50, 30, 25])
+    const rest = rowsToChartSpec(many, { type: 'bar', category: 'cat', value: 'v', topN: 3, otherLabel: 'Rest' })
+    expect(rest.categories).toEqual(['A', 'Other', 'B', 'Rest'])
+  })
+
   it('stacked100 flag passes through to the spec', () => {
     const spec = rowsToChartSpec(rows, { type: 'bar', category: 'region', value: ['revenue', 'cost'], stacked100: true })
     expect(spec.stacked100).toBe(true)