basalt-ui 1.26.0 → 1.28.0

package/dist/charts/layout/auto-margin.js

@@ -1,28 +1,61 @@
 import { scaleLinear } from "@visx/scale";
 import { VX } from "../../tokens/index.js";
 import { maxTextWidth } from "../utils/measure-text.js";
+import { logTickValues, niceLogDomain } from "./log-ticks.js";
 const AXIS_TICK_GAP = 12;
 const lineHeight = (fontPx) => Math.ceil(fontPx * 1.35);
+const DESCENT_RATIO = 0.3;
+const descent = (fontPx) => fontPx * DESCENT_RATIO;
+const ascent = (fontPx) => lineHeight(fontPx) - descent(fontPx);
+const AXIS_TICK_LENGTH = 8;
+const VISX_MIN_LABEL_FONT = 10;
+const ROTATED_LABEL_OFFSET = {
+  45: { dx: -6, dy: 2 },
+  90: { dx: -4, dy: 4 }
+};
+const ROTATED_CLEARANCE = 2;
+const rotatedOffset = (rotate) => ROTATED_LABEL_OFFSET[rotate] ?? { dx: 0, dy: 0 };
+function rotatedLabelExtents(input) {
+  const { labelWidth, fontPx, rotate } = input;
+  if (rotate === 0) return { left: 0, below: 0 };
+  const radians = rotate * Math.PI / 180;
+  const cos = Math.abs(Math.cos(radians));
+  const sin = Math.abs(Math.sin(radians));
+  const { dx, dy } = rotatedOffset(rotate);
+  return {
+    left: cos * (labelWidth + ascent(fontPx)) - dx + ROTATED_CLEARANCE,
+    below: AXIS_TICK_LENGTH + Math.max(VISX_MIN_LABEL_FONT, fontPx) + dy + sin * labelWidth + cos * descent(fontPx) + ROTATED_CLEARANCE
+  };
+}
+const LOG_TICK_FORMAT = new Intl.NumberFormat("en-US", { maximumFractionDigits: 20 });
 function autoMargin(input = {}) {
   const fontPx = input.fontPx ?? VX.axisFont;
-  const { left = [], right = [], bottom = [], rotate = 0, override } = input;
+  const { left = [], right = [], bottom = [], rotate = 0, floor = VX.margin, override } = input;
   const leftWidth = maxTextWidth(left, fontPx);
   const rightWidth = maxTextWidth(right, fontPx);
   const bottomWidth = maxTextWidth(bottom, fontPx);
-  const radians = rotate * Math.PI / 180;
-  const bottomExtent = rotate === 0 ? lineHeight(fontPx) : Math.ceil(
-    Math.abs(bottomWidth * Math.sin(radians)) + Math.abs(lineHeight(fontPx) * Math.cos(radians))
-  );
+  const rotated = rotatedLabelExtents({ labelWidth: bottomWidth, fontPx, rotate });
+  const bottomExtent = rotate === 0 ? lineHeight(fontPx) + AXIS_TICK_GAP : rotated.below;
   return {
-    top: override?.top ?? VX.margin.top,
+    top: override?.top ?? floor.top,
     right: override?.right ?? Math.ceil(
-      Math.max(VX.margin.right, right.length > 0 ? rightWidth + AXIS_TICK_GAP : bottomWidth / 2)
+      Math.max(
+        floor.right,
+        right.length > 0 ? rightWidth + AXIS_TICK_GAP : rotate === 0 ? bottomWidth / 2 : 0
+      )
     ),
-    bottom: override?.bottom ?? Math.ceil(Math.max(VX.margin.bottom, bottomExtent + AXIS_TICK_GAP)),
-    left: override?.left ?? Math.ceil(Math.max(VX.margin.left, left.length > 0 ? leftWidth + AXIS_TICK_GAP : 0))
+    bottom: override?.bottom ?? Math.ceil(Math.max(floor.bottom, bottomExtent)),
+    left: override?.left ?? Math.ceil(
+      Math.max(floor.left, left.length > 0 ? leftWidth + AXIS_TICK_GAP : 0, rotated.left)
+    )
   };
 }
 function probeAxisLabels(opts) {
+  if (opts.scale === "log") {
+    const domain = opts.nice === true ? niceLogDomain(opts.domain) : opts.domain;
+    const format2 = opts.format ?? ((v) => LOG_TICK_FORMAT.format(v));
+    return { labels: logTickValues(domain, opts.ticks).map(format2), format: format2 };
+  }
   const probe = scaleLinear({
     domain: opts.domain,
     range: [1, 0],
@@ -32,6 +65,8 @@ function probeAxisLabels(opts) {
   return { labels: probe.ticks(opts.ticks).map(format), format };
 }
 export {
+  ROTATED_LABEL_OFFSET,
   autoMargin,
-  probeAxisLabels
+  probeAxisLabels,
+  rotatedLabelExtents
 };

package/dist/charts/layout/log-ticks.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 1-2-5 mantissa tick law for a log axis (`docs/CHARTS-SPEC.md` §2).
+ *
+ * d3's own `scaleLog().ticks()` multiplies the mantissa density by the number of decades the
+ * domain spans, so a wide financial range (e.g. $10k–$300k) reads `$316,228 / $100,000 / $31,623 /
+ * $10,000` — every finance reference instead ticks a log price axis at `{1, 2, 5} × 10^n`
+ * (`$10,000 · $20,000 · $50,000 · $100,000`). Pure, no visx dependency, so both the measured
+ * (`probeAxisLabels`) and painted (`CartesianChart`) sides can share the exact same tick list.
+ */
+/**
+ * Every `{1, 2, 5} × 10^k` value for every decade touching `[min, max]`, filtered to the domain —
+ * escalating through {@link MANTISSA_SETS} while a set leaves fewer than {@link DENSIFY_BELOW}
+ * candidates (a short span collapses the strict law to one tick). The exact same list is what
+ * `probeAxisLabels` measures and what `CartesianChart` paints, so the two can never disagree.
+ * An over-budget result collapses to whole decades only when the decades ALONE form a readable
+ * axis ({@link DENSIFY_BELOW}+ in-domain); otherwise it is thinned by a budget-derived stride
+ * (may exceed `ticks` by one — see {@link thinToBudget}). Collapsing to decades unconditionally
+ * is the bug this ordering exists to prevent: a 4-year BTC window ($15.5k–$139k) holds ONE whole
+ * decade, so the collapse produced a single-tick axis. Never returns a non-positive value; a
+ * non-positive or inverted domain (a log axis has no zero and no reversed extent) returns `[]`.
+ */
+export declare function logTickValues([min, max]: readonly [number, number], ticks: number): number[];
+/** Round a domain outward to the nearest enclosing power-of-10 bounds — the log analog of
+ * `scale.nice()`, used to keep `probeAxisLabels` (measurement) and the real niced scale
+ * (rendering) computing ticks from the same rounded domain. */
+export declare function niceLogDomain([min, max]: readonly [number, number]): [number, number];
+//# sourceMappingURL=log-ticks.d.ts.map

package/dist/charts/layout/log-ticks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"log-ticks.d.ts","sourceRoot":"","sources":["../../../src/charts/layout/log-ticks.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA0CH;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAoB5F;AAED;;+DAE+D;AAC/D,wBAAgB,aAAa,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAErF"}

package/dist/charts/layout/log-ticks.js

@@ -0,0 +1,42 @@
+const MANTISSA_SETS = [
+  [1, 2, 5],
+  [1, 1.5, 2, 3, 4, 5, 7],
+  [1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9]
+];
+const DENSIFY_BELOW = 4;
+function decadeExponents(min, max) {
+  const lo = Math.floor(Math.log10(min));
+  const hi = Math.ceil(Math.log10(max));
+  const exponents = [];
+  for (let k = lo; k <= hi; k++) exponents.push(k);
+  return exponents;
+}
+function thinToBudget(values, ticks) {
+  if (values.length <= ticks) return values;
+  const stride = Math.ceil(values.length / ticks);
+  const thinned = values.filter((_, i) => i % stride === 0);
+  const last = values[values.length - 1];
+  return thinned[thinned.length - 1] === last ? thinned : [...thinned, last];
+}
+function logTickValues([min, max], ticks) {
+  if (min <= 0 || max <= 0 || min >= max) return [];
+  const exponents = decadeExponents(min, max);
+  const inDomain = (v) => v >= min && v <= max;
+  const collect = (mantissas) => exponents.flatMap((k) => mantissas.map((m) => m * 10 ** k)).filter(inDomain);
+  let resolved = [];
+  for (const mantissas of MANTISSA_SETS) {
+    resolved = collect(mantissas);
+    if (resolved.length >= DENSIFY_BELOW) break;
+  }
+  if (resolved.length <= ticks) return resolved;
+  const decades = exponents.map((k) => 10 ** k).filter(inDomain);
+  if (decades.length >= DENSIFY_BELOW) return thinToBudget(decades, ticks);
+  return thinToBudget(resolved, ticks);
+}
+function niceLogDomain([min, max]) {
+  return [10 ** Math.floor(Math.log10(min)), 10 ** Math.ceil(Math.log10(max))];
+}
+export {
+  logTickValues,
+  niceLogDomain
+};

package/dist/charts/primitives/Axes.d.ts

@@ -1,5 +1,8 @@
 import type { AxisScale, TickFormatter } from '@visx/axis';
-/** Themed left numeric axis — baked-in theme colors + font size. */
+/** Themed left numeric axis — baked-in theme colors + font size. The tick font tracks the ambient
+ * chart tier (`docs/CHARTS-SPEC.md` §8); a caller measuring its own gutter must measure at the
+ * SAME size (`chartTierMetrics().axisFont` into `autoMargin`'s `fontPx`), or the measured label
+ * and the painted one stop being the same string's width. */
 export declare function AxisLeftNumeric({ scale, numTicks, tickFormat, }: {
     scale: AxisScale;
     numTicks?: number;
@@ -14,7 +17,7 @@ export declare function AxisRightNumeric({ scale, left, numTicks, tickFormat, }:
     tickFormat?: TickFormatter<number>;
 }): import("react").JSX.Element;
 /** Themed bottom date axis — baked-in smartTicks + DD.MM formatting. */
-export declare function AxisBottomDate({ scale, top, tickValues, tickFormat, }: {
+export declare function AxisBottomDate({ scale, top, tickValues, tickFormat, rotate, }: {
     scale: AxisScale;
     top: number;
     tickValues: string[];
@@ -23,5 +26,11 @@ export declare function AxisBottomDate({ scale, top, tickValues, tickFormat, }:
      * tick to the same label.
      */
     tickFormat?: TickFormatter<string>;
+    /**
+     * Tilt each tick label counter-clockwise by 45° or 90°, anchored at its right edge — the answer
+     * to labels too wide to sit side by side. The caller owns the deepened bottom gutter it needs
+     * (`autoMargin({ rotate })`, `docs/CHARTS-SPEC.md` §1); this only paints them.
+     */
+    rotate?: 45 | 90;
 }): import("react").JSX.Element;
 //# sourceMappingURL=Axes.d.ts.map

package/dist/charts/primitives/Axes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Axes.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/Axes.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAW1D,oEAAoE;AACpE,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAY,EACZ,UAAU,GACX,EAAE;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CACnC,+BAgBA;AAED,gFAAgF;AAChF,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,QAAY,EACZ,UAAU,GACX,EAAE;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,iGAAiG;IACjG,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CACnC,+BAiBA;AAED,wEAAwE;AACxE,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,GAAG,EACH,UAAU,EACV,UAAwB,GACzB,EAAE;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,GAAG,EAAE,MAAM,CAAA;IACX,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CACnC,+BAiBA"}
+{"version":3,"file":"Axes.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/Axes.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAa1D;;;6DAG6D;AAC7D,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAY,EACZ,UAAU,GACX,EAAE;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CACnC,+BAiBA;AAED,gFAAgF;AAChF,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,QAAY,EACZ,UAAU,GACX,EAAE;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,iGAAiG;IACjG,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CACnC,+BAkBA;AAYD,wEAAwE;AACxE,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,GAAG,EACH,UAAU,EACV,UAAwB,EACxB,MAAM,GACP,EAAE;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,GAAG,EAAE,MAAM,CAAA;IACX,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAClC;;;;OAIG;IACH,MAAM,CAAC,EAAE,EAAE,GAAG,EAAE,CAAA;CACjB,+BAqBA"}

package/dist/charts/primitives/Axes.js

@@ -1,13 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { AxisBottom, AxisLeft, AxisRight } from "@visx/axis";
 import { VX } from "../../tokens/index.js";
+import { ROTATED_LABEL_OFFSET } from "../layout/auto-margin.js";
 import { fmtAxisDate } from "../utils/format.js";
+import { useChartTierMetrics } from "./chart-tier.js";
 const TICK_FONT_FAMILY = "var(--basalt-font-mono)";
 function AxisLeftNumeric({
   scale,
   numTicks = 5,
   tickFormat
 }) {
+  const { axisFont } = useChartTierMetrics();
   return /* @__PURE__ */ jsx(
     AxisLeft,
     {
@@ -17,7 +20,7 @@ function AxisLeftNumeric({
       tickLabelProps: {
         fill: VX.faint,
         fontFamily: TICK_FONT_FAMILY,
-        fontSize: VX.axisFont,
+        fontSize: axisFont,
         dx: -4
       },
       stroke: VX.surface.border,
@@ -31,6 +34,7 @@ function AxisRightNumeric({
   numTicks = 5,
   tickFormat
 }) {
+  const { axisFont } = useChartTierMetrics();
   return /* @__PURE__ */ jsx(
     AxisRight,
     {
@@ -41,7 +45,7 @@ function AxisRightNumeric({
       tickLabelProps: {
         fill: VX.faint,
         fontFamily: TICK_FONT_FAMILY,
-        fontSize: VX.axisFont,
+        fontSize: axisFont,
         dx: 4
       },
       stroke: VX.surface.border,
@@ -49,12 +53,16 @@ function AxisRightNumeric({
     }
   );
 }
+const ROTATED_OFFSET = ROTATED_LABEL_OFFSET;
 function AxisBottomDate({
   scale,
   top,
   tickValues,
-  tickFormat = fmtAxisDate
+  tickFormat = fmtAxisDate,
+  rotate
 }) {
+  const { axisFont } = useChartTierMetrics();
+  const rotated = rotate === void 0 ? void 0 : ROTATED_OFFSET[rotate];
   return /* @__PURE__ */ jsx(
     AxisBottom,
     {
@@ -65,8 +73,10 @@ function AxisBottomDate({
       tickLabelProps: {
         fill: VX.faint,
         fontFamily: TICK_FONT_FAMILY,
-        fontSize: VX.axisFont,
-        textAnchor: "middle"
+        fontSize: axisFont,
+        textAnchor: rotated === void 0 ? "middle" : "end",
+        ...rotate !== void 0 && { angle: -rotate },
+        ...rotated !== void 0 && { dx: rotated.dx, dy: rotated.dy }
       },
       stroke: VX.surface.border,
       tickStroke: VX.surface.border

package/dist/charts/primitives/CartesianChart.d.ts

@@ -1,11 +1,17 @@
-import { scaleLinear, scalePoint } from '@visx/scale';
+import { scaleLinear, scaleLog, scalePoint } from '@visx/scale';
 import type { ReactNode } from 'react';
+import type { BasaltProps } from '../../common/props.js';
 import type { ChartMargin } from '../../tokens/index.js';
 import type { CursorResolution } from '../cursor/resolve.js';
 import type { ChartLegendConfig, ChartSeries } from '../series.js';
+import type { ChartState } from './ChartPending.js';
 import type { XZoneSpec } from './XZoneRects.js';
 import type { ZoneSpec } from './ZoneRects.js';
-type LinearScale = ReturnType<typeof scaleLinear<number>>;
+/** Either axis kind a `y`/`y2` can resolve to. Widened from a bare `scaleLinear` return type so a
+ * log axis's `scaleLog` scale keeps assigning into `PlotContext.yScale`/`y2Scale` and into every
+ * mark renderer (`ZoneRects`, `refLines`, `Crosshair`/`SeriesDot`) that only ever calls `scale(v)`
+ * or reads `scale.domain()` — both interfaces share that shape via d3's `ScaleContinuousNumeric`. */
+type ContinuousScale = ReturnType<typeof scaleLinear<number>> | ReturnType<typeof scaleLog<number>>;
 type PointScale = ReturnType<typeof scalePoint<string>>;
 /** One y-axis, fully described. Collapses the removed `yDomain` / `yAutoMaxFloor` / `yAutoMinCeil` /
  * `yAutoPad` / `numTicksY` / `formatYTick` prop soup into a single object per axis. */
@@ -24,7 +30,8 @@ export type AxisConfig<T> = {
      */
     autoMaxFloor?: number;
     /** When 'auto': the lower bound is at most this. Default 0 (forced zero baseline). `Infinity`
-     * pads down from the raw data minimum instead. */
+     * pads down from the raw data minimum instead. Ignored when `scale: 'log'` — a log axis has no
+     * zero baseline, so its floor is always the smallest positive visible value. */
     autoMinCeil?: number;
     /** When 'auto': padding multiplier applied away from the data. Default 1.1. */
     autoPad?: number;
@@ -42,6 +49,15 @@ export type AxisConfig<T> = {
      * already-migrated chart. Opt in per axis.
      */
     nice?: boolean;
+    /**
+     * `'linear'` (default) or `'log'`. On `'log'` the domain floor is the smallest positive VISIBLE
+     * value — `autoMinCeil` is ignored (documented there, not thrown on): a log axis has no zero
+     * baseline. `autoPad` still pads multiplicatively and `nice` still snaps to round bounds (decade
+     * powers instead of d3's linear-nice steps). Ticks are the 1-2-5 set from `logTickValues`
+     * (`$10,000 · $20,000 · $50,000 · $100,000`, never d3's own log ticks), and `format` is applied
+     * to those values — d3's `scale.tickFormat` is never used on a log axis.
+     */
+    scale?: 'linear' | 'log';
 };
 /** Handed to `prependRows`/`extraRows` alongside the hovered datum — the same `visible`/`hidden`
  * the plot itself draws from, so a hand-authored row can't structurally desync from legend
@@ -102,9 +118,9 @@ export type PlotContext<T> = {
     visible: ChartSeries<T>[];
     hidden: ReadonlySet<string>;
     xScale: PointScale;
-    yScale: LinearScale;
+    yScale: ContinuousScale;
     /** Present only when a `y2` axis is configured. */
-    y2Scale: LinearScale | null;
+    y2Scale: ContinuousScale | null;
     xMax: number;
     yMax: number;
     margin: ChartMargin;
@@ -113,7 +129,7 @@ export type PlotContext<T> = {
     /** Series key the legend is hovering, for mark dimming. */
     highlighted: string | null;
 };
-export type CartesianChartProps<T> = {
+export type CartesianChartProps<T> = BasaltProps & {
     data: T[];
     /** Stable id — identifies this chart as the cursor's source. */
     chartId: string;
@@ -145,6 +161,21 @@ export type CartesianChartProps<T> = {
     xTickValues?: (keys: readonly string[], xMax: number) => readonly string[];
     /** X tick label formatter. Default `fmtAxisDate` (DD.MM). */
     formatX?: (key: string) => string;
+    /**
+     * Tilt the x tick labels by 45° or 90° (counter-clockwise, anchored at their right edge). The
+     * bottom gutter deepens by the rotated label's projected height, measured like every other side
+     * (`docs/CHARTS-SPEC.md` §1), so nothing clips.
+     *
+     * This is the phone answer to a label too wide to repeat horizontally: rotating keeps every tick
+     * the axis would otherwise have to thin away — which is why, LEFT UNSET, it is now the phone
+     * tier's DEFAULT: below `VX.phoneChartWidth`, labels too wide to fit three ticks side by side
+     * auto-rotate to 45 (`autoXLabelRotate`). Nothing changes at desktop width, and nothing changes
+     * for a chart that already passes a value.
+     *
+     * **`0` is the opt-out** — "never rotate, thin the axis instead" — and is the only way to get
+     * the pre-tier behaviour back on a phone-width chart with very wide labels.
+     */
+    xLabelRotate?: 0 | 45 | 90;
     /** Value-range bands on the left scale, drawn behind the marks. */
     zones?: ZoneSpec[];
     /** X-range bands (time windows), drawn behind the marks. */
@@ -180,6 +211,13 @@ export type CartesianChartProps<T> = {
     cursorResolution?: CursorResolution;
     ariaLabel?: string;
     isPending?: boolean;
+    /**
+     * The three "nothing to draw" states in one prop, forwarded to `ChartFrame` — pending → error →
+     * empty, resolved by `resolveChartState`. The Mantine-free answer to `dashboard/QueryState`,
+     * which `./charts` cannot import; `isPending` remains a supported alias for
+     * `state={{ pending: true }}`.
+     */
+    state?: ChartState;
     /** Draw ONLY the marks. Everything around them is the primitive's job. */
     children: (ctx: PlotContext<T>) => ReactNode;
 };
@@ -210,6 +248,6 @@ extraBounds?: readonly number[]): [number, number];
  * Margins are MEASURED from the labels that will actually be painted, so a wide tick label widens
  * its own gutter instead of clipping or needing a hand-tuned `margin` prop.
  */
-export declare function CartesianChart<T>({ data, chartId, getX, series, y, y2, xTicks, xTickValues, formatX, zones, xZones, refLines, height, aspectRatio, fill, legend, tooltip, margin: marginOverride, cursorValue, cursorResolution, ariaLabel, isPending, children, }: CartesianChartProps<T>): ReactNode;
+export declare function CartesianChart<T>({ data, chartId, getX, series, y, y2, xTicks, xTickValues, formatX, xLabelRotate, zones, xZones, refLines, height, aspectRatio, fill, legend, tooltip, margin: marginOverride, cursorValue, cursorResolution, ariaLabel, isPending, state, className, style, children, }: CartesianChartProps<T>): ReactNode;
 export {};
 //# sourceMappingURL=CartesianChart.d.ts.map

package/dist/charts/primitives/CartesianChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/CartesianChart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../src/charts/primitives/CartesianChart.tsx"],"names":[],"mappings":"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"}

package/dist/charts/primitives/CartesianChart.js

@@ -1,17 +1,19 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { GridRows } from "@visx/grid";
 import { Group } from "@visx/group";
-import { scaleLinear, scalePoint } from "@visx/scale";
+import { scaleLinear, scaleLog, scalePoint } from "@visx/scale";
 import { useMemo, useRef, useState } from "react";
 import { VX } from "../../tokens/index.js";
 import { useChartCursor } from "../hooks/useChartCursor.js";
 import { autoMargin, probeAxisLabels } from "../layout/auto-margin.js";
-import { deriveTooltipRows } from "../series.js";
+import { logTickValues, niceLogDomain } from "../layout/log-ticks.js";
+import { deriveLegend, deriveTooltipRows } from "../series.js";
 import { padAutoLower, padAutoUpper } from "../utils/domain.js";
 import { fmtAxisDate } from "../utils/format.js";
-import { smartTicks, smartTicksEvery } from "../utils/ticks.js";
+import { autoXLabelRotate, smartTicks, smartTicksEvery, xLabelPxFor } from "../utils/ticks.js";
 import { AxisBottomDate, AxisLeftNumeric, AxisRightNumeric } from "./Axes.js";
 import { ChartFrame, resolveLegend } from "./ChartFrame.js";
+import { useChartTierMetrics } from "./chart-tier.js";
 import { ChartTooltipFloat, TooltipBody, TooltipHeader, TooltipRow } from "./ChartTooltip.js";
 import { Crosshair, SeriesDot } from "./Crosshair.js";
 import { HoverOverlay } from "./HoverOverlay.js";
@@ -23,29 +25,55 @@ function resolveAxisDomain(cfg, data, series, extraBounds = []) {
   const domain = cfg?.domain ?? "auto";
   if (Array.isArray(domain)) return domain;
   if (typeof domain === "function") return domain(data, series);
+  const isLog = cfg?.scale === "log";
   let min = Infinity;
   let max = -Infinity;
   for (const d of data) {
     for (const s of series) {
       const v = s.getValue(d);
       if (v === null) continue;
+      if (isLog && v <= 0) continue;
       if (v < min) min = v;
       if (v > max) max = v;
     }
   }
   for (const v of extraBounds) {
     if (!Number.isFinite(v)) continue;
+    if (isLog && v <= 0) continue;
     if (v < min) min = v;
     if (v > max) max = v;
   }
-  if (min === Infinity) return [0, cfg?.autoMaxFloor ?? 1];
   const pad = cfg?.autoPad ?? DEFAULT_AUTO_PAD;
+  if (isLog) {
+    if (min === Infinity) return [1, 10];
+    if (min === max) return [min / pad, max * pad];
+    const upper2 = padAutoUpper(Math.max(max, cfg?.autoMaxFloor ?? -Infinity), pad);
+    return [min / pad, upper2];
+  }
+  if (min === Infinity) return [0, cfg?.autoMaxFloor ?? 1];
   const ceil = cfg?.autoMinCeil ?? 0;
   const upper = padAutoUpper(Math.max(max, cfg?.autoMaxFloor ?? -Infinity), pad);
   const lower = padAutoLower(Math.min(min, ceil), pad);
   if (lower === upper) return [Math.min(lower, 0), upper === 0 ? 1 : upper * pad];
   return [lower, upper];
 }
+function buildYScale(cfg, domain, yMax, ticks) {
+  if (cfg?.scale === "log") {
+    const scale = scaleLog({
+      domain,
+      range: [yMax, 0],
+      ...cfg.nice === true && { nice: true }
+    });
+    const tickDomain = cfg.nice === true ? niceLogDomain(domain) : domain;
+    scale.ticks = () => logTickValues(tickDomain, ticks);
+    return scale;
+  }
+  return scaleLinear({
+    domain,
+    range: [yMax, 0],
+    ...cfg?.nice === true && { nice: true }
+  });
+}
 function CartesianChart({
   data,
   chartId,
@@ -56,6 +84,7 @@ function CartesianChart({
   xTicks,
   xTickValues,
   formatX = fmtAxisDate,
+  xLabelRotate,
   zones,
   xZones,
   refLines,
@@ -69,6 +98,9 @@ function CartesianChart({
   cursorResolution,
   ariaLabel,
   isPending,
+  state,
+  className,
+  style,
   children
 }) {
   const [highlighted, setHighlighted] = useState(null);
@@ -82,7 +114,14 @@ function CartesianChart({
       ...fill !== void 0 && { fill },
       ...ariaLabel !== void 0 && { ariaLabel },
       ...isPending !== void 0 && { isPending },
-      legend: resolveLegend(legend, { highlighted, onHighlight: setHighlighted }),
+      ...state !== void 0 && { state },
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style },
+      legend: resolveLegend(
+        legend,
+        { highlighted, onHighlight: setHighlighted },
+        deriveLegend(series).length
+      ),
       children: (plot) => /* @__PURE__ */ jsx(
         CartesianPlot,
         {
@@ -95,6 +134,7 @@ function CartesianChart({
           ...xTicks !== void 0 && { xTicks },
           ...xTickValues !== void 0 && { xTickValues },
           formatX,
+          ...xLabelRotate !== void 0 && { xLabelRotate },
           ...zones !== void 0 && { zones },
           ...xZones !== void 0 && { xZones },
           ...refLines !== void 0 && { refLines },
@@ -121,6 +161,7 @@ function CartesianPlot({
   xTicks,
   xTickValues,
   formatX = fmtAxisDate,
+  xLabelRotate,
   zones,
   xZones,
   refLines,
@@ -134,6 +175,7 @@ function CartesianPlot({
   children
 }) {
   const { hidden } = plot;
+  const tier = useChartTierMetrics();
   const visible = useMemo(() => series.filter((s) => !hidden.has(s.key)), [series, hidden]);
   const leftSeries = useMemo(() => visible.filter((s) => s.axis !== "right"), [visible]);
   const rightSeries = useMemo(() => visible.filter((s) => s.axis === "right"), [visible]);
@@ -160,28 +202,45 @@ function CartesianPlot({
       domain: leftDomain,
       ticks: leftTicks,
       nice: y?.nice ?? false,
+      ...y?.scale !== void 0 && { scale: y.scale },
       ...y?.format !== void 0 && { format: y.format }
     }),
-    [leftDomain, leftTicks, y?.format, y?.nice]
+    [leftDomain, leftTicks, y?.format, y?.nice, y?.scale]
   );
   const { labels: rightLabels, format: rightFormat } = useMemo(
     () => rightDomain === null ? { labels: [], format: (v) => String(v) } : probeAxisLabels({
       domain: rightDomain,
       ticks: rightTicks,
       nice: y2?.nice ?? false,
+      ...y2?.scale !== void 0 && { scale: y2.scale },
       ...y2?.format !== void 0 && { format: y2.format }
     }),
-    [rightDomain, rightTicks, y2?.format, y2?.nice]
+    [rightDomain, rightTicks, y2?.format, y2?.nice, y2?.scale]
   );
   const xLabels = useMemo(() => keys.map(formatX), [keys, formatX]);
-  const margin = useMemo(
-    () => autoMargin({
+  const xLabelPx = useMemo(() => xLabelPxFor(xLabels, tier.axisFont), [xLabels, tier.axisFont]);
+  const marginInput = useMemo(
+    () => ({
       left: leftLabels,
       right: rightLabels,
       bottom: xLabels,
+      fontPx: tier.axisFont,
+      floor: tier.margin,
       ...marginOverride !== void 0 && { override: marginOverride }
     }),
-    [leftLabels, rightLabels, xLabels, marginOverride]
+    [leftLabels, rightLabels, xLabels, tier.axisFont, tier.margin, marginOverride]
+  );
+  const flatMargin = useMemo(() => autoMargin(marginInput), [marginInput]);
+  const rotated45Margin = useMemo(() => autoMargin({ ...marginInput, rotate: 45 }), [marginInput]);
+  const rotate = xLabelRotate ?? autoXLabelRotate({
+    tier: tier.tier,
+    xMax: Math.max(plot.width - flatMargin.left - flatMargin.right, 0),
+    labelPx: xLabelPx,
+    rotatedXMax: Math.max(plot.width - rotated45Margin.left - rotated45Margin.right, 0)
+  });
+  const margin = useMemo(
+    () => rotate === 0 ? flatMargin : rotate === 45 ? rotated45Margin : autoMargin({ ...marginInput, rotate }),
+    [flatMargin, rotated45Margin, marginInput, rotate]
   );
   const xMax = Math.max(plot.width - margin.left - margin.right, 0);
   const yMax = Math.max(plot.height - margin.top - margin.bottom, 0);
@@ -190,24 +249,20 @@ function CartesianPlot({
     [keys, xMax]
   );
   const yScale = useMemo(
-    () => scaleLinear({
-      domain: leftDomain,
-      range: [yMax, 0],
-      ...y?.nice === true && { nice: true }
-    }),
-    [leftDomain, yMax, y?.nice]
+    () => buildYScale(y, leftDomain, yMax, leftTicks),
+    [y, leftDomain, yMax, leftTicks]
   );
   const y2Scale = useMemo(
-    () => rightDomain === null ? null : scaleLinear({
-      domain: rightDomain,
-      range: [yMax, 0],
-      ...y2?.nice === true && { nice: true }
-    }),
-    [rightDomain, yMax, y2?.nice]
+    () => rightDomain === null ? null : buildYScale(y2, rightDomain, yMax, rightTicks),
+    [y2, rightDomain, yMax, rightTicks]
   );
   const tickValues = useMemo(
-    () => xTickValues !== void 0 ? [...xTickValues(keys, xMax)] : xTicks === void 0 ? smartTicks(keys, xMax) : smartTicksEvery(keys, xTicks),
-    [keys, xMax, xTicks, xTickValues]
+    () => xTickValues !== void 0 ? [...xTickValues(keys, xMax)] : xTicks === void 0 ? (
+      // A rotated label stacks diagonally instead of beside its neighbour, so its WIDTH no
+      // longer governs tick spacing — the constant floor takes over, exactly as before.
+      smartTicks(keys, xMax, rotate === 0 ? xLabelPx : void 0)
+    ) : smartTicksEvery(keys, xTicks),
+    [keys, xMax, xTicks, xTickValues, xLabelPx, rotate]
   );
   const cursor = useChartCursor({
     data,
@@ -256,7 +311,7 @@ function CartesianPlot({
       xZones !== void 0 && /* @__PURE__ */ jsx(XZoneRects, { zones: xZones, height: yMax, xScale }),
       zones !== void 0 && /* @__PURE__ */ jsx(ZoneRects, { zones, width: xMax, leftScale: yScale, rightScale: y2Scale }),
       children(ctx),
-      refLines?.map((line) => {
+      refLines?.map((line, i) => {
         const scale = line.axis === "right" && y2Scale !== null ? y2Scale : yScale;
         return /* @__PURE__ */ jsx(
           "line",
@@ -269,7 +324,7 @@ function CartesianPlot({
             strokeWidth: 1,
             strokeDasharray: line.dashed === true ? VX.dashArray : void 0
           },
-          `${line.axis ?? "left"}-${line.value}`
+          `${line.axis ?? "left"}-${line.value}-${i}`
         );
       }),
       tooltipEnabled && point !== null && cursorX !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -279,12 +334,14 @@ function CartesianPlot({
           const value = cursorValue === void 0 ? s.getValue(point) : cursorValue(point, s, visible);
           if (value === null) return null;
           const scale = s.axis === "right" && y2Scale !== null ? y2Scale : yScale;
+          const cy = scale(value);
+          if (!Number.isFinite(cy)) return null;
           const marker = s.getMarker?.(point);
           return /* @__PURE__ */ jsx(
             SeriesDot,
             {
               cx: cursorX,
-              cy: scale(value),
+              cy,
               color: marker?.color ?? s.color,
               ...marker?.r !== void 0 && { r: marker.r }
             },
@@ -315,7 +372,8 @@ function CartesianPlot({
           top: yMax,
           scale: xScale,
           tickValues,
-          tickFormat: (v) => formatX(String(v))
+          tickFormat: (v) => formatX(String(v)),
+          ...rotate !== 0 && { rotate }
         }
       ),
       /* @__PURE__ */ jsx(