zz-meridian 0.20.0 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Bring ZZ Meridian, a dashboard design system, into a Next.js project, or start a new dashboard on it. Copies the files in; nothing depends on this package at runtime.",
   "license": "MIT",
   "type": "module",

package/payload/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 Every release of ZZ Meridian, newest first. Versions follow semver: a removed or renamed token, prop or card is major; a new card, token or variant is minor; a corrected value is a patch. Each entry says what breaks and what to do instead.
 
+## [0.21.0] · 2026-10-20
+
+### New
+
+- **`TrendChart` takes `whole`** ([#73](https://github.com/zhixuan312/zz-meridian/issues/73)), as `ColumnChart` does since 0.20.0: the values are counts, a stack of counts too, and every level is a whole number, so a running total whose top is 10 draws no level at 2.5 or 7.5. Pass it on a chart of counts; a chart of a quantity that is not one keeps its halves.
+
 ## [0.20.0] · 2026-10-20
 
 ### New

package/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian-template",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "private": true,
   "license": "MIT",
   "description": "ZZ Meridian: a dashboard design system and starter. Six layers, from DTCG tokens through four layers of React components to product workspaces, and a Design Atlas, in a light and a dark theme.",

package/payload/src/components/charts/trend-chart/README.md

@@ -7,7 +7,7 @@ Status: beta
 ## Anatomy
 
 1. **Plot**: horizontal gridlines in `chart-grid`, the baseline in `chart-axis`, 1px, crisp.
-2. **Y axis**: 3 or 4 "nice" ticks from zero, labels `text-2xs` `ink-3`, tabular, right-aligned in a gutter sized to the longest label. Axis labels drop cents and exact digits (`$12`, `1.2M`), and money from $10,000 reads at a glance (`$25K`, `$5.0B`) so a large scale does not widen the gutter; the tooltip and table carry the exact amounts.
+2. **Y axis**: 3 or 4 "nice" ticks from zero (whole numbers only with `whole`, for a chart of counts or a stack of them, so a top of 10 draws no level at 2.5 or 7.5), labels `text-2xs` `ink-3`, tabular, right-aligned in a gutter sized to the longest label. Axis labels drop cents and exact digits (`$12`, `1.2M`), and money from $10,000 reads at a glance (`$25K`, `$5.0B`) so a large scale does not widen the gutter; the tooltip and table carry the exact amounts.
 3. **X axis**: dates, `text-2xs` `ink-3`, one label per 92px, counted back from today so the last day is always labelled.
 4. **Series**: monotone curves that never overshoot their data.
 5. **Band** (with `band`): the region from the floor up to the band's ceiling, in `fill-track`, under the gridlines, its top edge drawn as the axis is, and its label at an end of that edge — in `ink-2`, since it stands over the fill as often as over the card and `ink-3` on `fill-track` is 4.43:1 in light.
@@ -125,7 +125,7 @@ import { TrendChart } from '@/components/charts/trend-chart';
 />
 ```
 
-Props: `dates`, `series` (`key`, `label`, `values`, `color`, `kind`), `format` (`count` | `compact` | `cost` | `cost-compact` | `duration` | `percent`), `height` (number or `fill`), `label`, `legend` (defaults to two or more series), `tick`, `stacked`, `baseline`, `band`, `floor`, `marks`, `running` (the last point is still in progress).
+Props: `dates`, `series` (`key`, `label`, `values`, `color`, `kind`), `format` (`count` | `compact` | `cost` | `cost-compact` | `duration` | `percent`), `height` (number or `fill`), `label`, `legend` (defaults to two or more series), `tick`, `stacked`, `whole` (the values are counts: whole levels only), `baseline`, `band`, `floor`, `marks`, `running` (the last point is still in progress).
 
 The colour of a stacked part is `stackPart(place, parts)` from `@/components/charts/scale`, the one mix every one-hue stack takes: the accent into the surface, by the part's place from the bottom.
 

package/payload/src/components/charts/trend-chart/index.tsx

@@ -97,6 +97,7 @@ export function TrendChart({
   legend,
   tick,
   stacked = false,
+  whole = false,
   baseline,
   band,
   floor,
@@ -118,6 +119,8 @@ export function TrendChart({
   tick?: (date: string) => string;
   /** The series are parts of one whole: bands stacked in order, the first at the bottom, each in its categorical slot. */
   stacked?: boolean;
+  /** The values are counts, a stack of counts too: every level is a whole number, so a top of 10 draws none at 2.5 or 7.5 (#73). */
+  whole?: boolean;
   /** What is usual, drawn as a quiet dashed line across the plot with its label at the end: `{ value: 296, label: 'Median 296ms' }`. */
   baseline?: { value: number; label: string };
   /**
@@ -177,7 +180,7 @@ export function TrendChart({
   const from = floor === undefined ? 0 : Math.min(floor, ...values);
   // The levels, and the floor the plot is drawn to: `ticks[0]` is 0 unless the chart was given a floor, and the two ends
   // of the scale are what every point, area, band and level line is measured against.
-  const ticks = ticksBetween(from, max, h < 200 ? 3 : 4);
+  const ticks = ticksBetween(from, max, h < 200 ? 3 : 4, whole);
   const low = ticks[0];
   const top = ticks[ticks.length - 1];
   const left = Math.max(...ticks.map((t) => axis(t).length)) * 6.4 + 12;

package/payload/tests/trend-chart-whole.test.tsx

@@ -0,0 +1,28 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('@/components/charts/use-size', async () => {
+  const { useRef } = await import('react');
+  return { useSize: () => [useRef(null), { width: 640, height: 0 }] as const };
+});
+
+import { TrendChart } from '@/components/charts/trend-chart';
+
+const dates = ['2026-09-07', '2026-09-14', '2026-09-21', '2026-09-28'];
+/** The levels' labels: the axis text beside each gridline. */
+const levels = (c: HTMLElement) => [...c.querySelectorAll('svg g > line + text')].map((t) => t.textContent);
+
+describe('a trend chart of counts (#73)', () => {
+  it('draws whole levels only, a running total of ten as a line or as a stack', () => {
+    const made = render(<TrendChart label="Items in all" whole dates={dates} series={[{ key: 'n', label: 'Items', values: [2, 5, 7, 10], kind: 'line' }]} />);
+    expect(levels(made.container).every((t) => /^\d+$/.test(t ?? ''))).toBe(true);
+    expect(levels(made.container)).not.toContain('2.5');
+    made.unmount();
+    const stack = render(<TrendChart label="Items in all, by team" whole stacked dates={dates} series={[{ key: 'a', label: 'Core', values: [1, 3, 4, 6] }, { key: 'b', label: 'Web', values: [1, 2, 3, 4] }]} />);
+    expect(levels(stack.container).every((t) => /^\d+$/.test(t ?? ''))).toBe(true);
+  });
+  it('keeps halves without it, for a quantity that is not a count', () => {
+    const { container } = render(<TrendChart label="Hours waited" dates={dates} series={[{ key: 'n', label: 'Hours', values: [2, 5, 7, 10], kind: 'line' }]} />);
+    expect(levels(container)).toContain('2.5');
+  });
+});