@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/dist/charts/core/cartesian/category-group-axis.d.ts

@@ -0,0 +1,6 @@
+import type { CategoryGroupSpan } from "./category-groups.js";
+/** Brackets and labels of category groups, placed `offset` pixels below the plot. */
+export declare function CategoryGroupAxis({ spans, offset, }: {
+    spans: readonly CategoryGroupSpan[];
+    offset: number;
+}): import("react").JSX.Element;

package/dist/charts/core/cartesian/category-group-axis.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { estimateTextWidth } from "../axes.js";
+function fit(label, room) {
+  if (estimateTextWidth(label, 12) <= room) return label;
+  const max = Math.max(1, Math.floor(room / 7) - 1);
+  return room < 14 ? "" : `${label.slice(0, max).trimEnd()}\u2026`;
+}
+function CategoryGroupAxis({
+  spans,
+  offset
+}) {
+  return /* @__PURE__ */ jsx("g", { transform: `translate(0,${offset})`, children: spans.map((span) => /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: `M${span.from + 4} 0 V4 H${span.to - 4} V0`,
+        fill: "none",
+        strokeWidth: 1,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        style: { stroke: "var(--line-strong)" }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: span.center,
+        y: 19,
+        textAnchor: "middle",
+        className: "font-bold text-[12px]",
+        style: { fill: "var(--ink-2)" },
+        children: fit(span.label, span.to - span.from - 8)
+      }
+    )
+  ] }, span.key)) });
+}
+export {
+  CategoryGroupAxis
+};

package/dist/charts/core/cartesian/category-groups.d.ts

@@ -0,0 +1,15 @@
+import type { CategoryGroup } from "./types.js";
+export interface CategoryGroupSpan {
+    key: string;
+    label: string;
+    /** Left and right edge along the category axis, in plot pixels. */
+    from: number;
+    to: number;
+    center: number;
+}
+/**
+ * Pixel span of each group along the category axis. A group covers the slots
+ * of its categories (`step` wide, centred on `positions`). Groups beyond the
+ * category count are dropped and the last one is cut short.
+ */
+export declare function categoryGroupSpans(groups: readonly CategoryGroup[], positions: readonly number[], step: number): CategoryGroupSpan[];

package/dist/charts/core/cartesian/category-groups.js

@@ -0,0 +1,23 @@
+function categoryGroupSpans(groups, positions, step) {
+  const spans = [];
+  let cursor = 0;
+  groups.forEach((group, index) => {
+    const first = cursor;
+    const last = Math.min(positions.length - 1, cursor + Math.max(0, group.count) - 1);
+    cursor += Math.max(0, group.count);
+    if (first > last || first >= positions.length) return;
+    const from = positions[first] - step / 2;
+    const to = positions[last] + step / 2;
+    spans.push({
+      key: `${index}-${group.label}`,
+      label: group.label,
+      from,
+      to,
+      center: (from + to) / 2
+    });
+  });
+  return spans;
+}
+export {
+  categoryGroupSpans
+};

package/dist/charts/core/cartesian/ink-layer.d.ts

@@ -0,0 +1,63 @@
+import { type InkItem } from "../ink.js";
+import type { CartesianOverlay } from "./types.js";
+export type InkTool = "none" | "ruler" | "ink";
+export interface InkLabels {
+    /** Name of the toolbar group. */
+    tools: string;
+    ruler: string;
+    ink: string;
+    undo: string;
+    redo: string;
+    clear: string;
+    deltaX: string;
+    deltaY: string;
+    /** Horizontal bars: change of the value (read along x) and distance between categories. */
+    deltaValue: string;
+    deltaCategory: string;
+    /** Distance along a category axis, e.g. "3 steps". */
+    steps: (count: number) => string;
+    /** Accessible name of the plot while a tool is active (keyboard use). */
+    plot: string;
+    /** Spoken position of the crosshair; receives the formatted x and y. */
+    position: (x: string, y: string) => string;
+    /** Spoken count of the points already set. */
+    pending: (count: number) => string;
+    /** Spoken when a pen stroke is finished. */
+    finished: string;
+}
+export declare const DEFAULT_INK_LABELS: InkLabels;
+export interface UseChartInkOptions {
+    /** Pen color; the second palette color by default. */
+    color?: string;
+    /** Tool active at first. */
+    tool?: InkTool;
+    labels?: Partial<InkLabels>;
+}
+export interface ChartInk {
+    tool: InkTool;
+    setTool: (tool: InkTool) => void;
+    items: readonly InkItem[];
+    canUndo: boolean;
+    canRedo: boolean;
+    canClear: boolean;
+    undo: () => void;
+    redo: () => void;
+    clear: () => void;
+    labels: InkLabels;
+    /** Spoken description of the last ruler. */
+    status: string;
+    /** Pass to a cartesian chart (vertical or horizontal bars): `<LineChart overlay={ink.overlay} />`. */
+    overlay: CartesianOverlay;
+}
+/**
+ * State and overlay of the ruler and freehand-ink tools. Marks are kept in data units, so they stay on
+ * their data when the chart is resized, and are drawn inside the chart SVG, so the existing SVG and PNG
+ * export includes them. The ruler measures the distance between two points as Δx and Δy; the pen draws
+ * a smoothed freehand path.
+ */
+export declare function useChartInk({ color, tool: initialTool, labels: labelsProp, }?: UseChartInkOptions): ChartInk;
+/** Buttons for the ruler and pen tools plus undo, redo and clear. Place it next to the chart. */
+export declare function ChartInkToolbar({ ink, className }: {
+    ink: ChartInk;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/charts/core/cartesian/ink-layer.js

@@ -0,0 +1,371 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useMemo,
+  useReducer,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../../utils/cn.js";
+import {
+  cursorAction,
+  EMPTY_INK,
+  formatDuration,
+  inkPath,
+  inkReducer,
+  measureSegment,
+  moveCursor,
+  pixelToPlot,
+  plotDomain,
+  plotToPixel,
+  signed,
+  startCursor
+} from "../ink.js";
+const DEFAULT_INK_LABELS = {
+  tools: "Annotation tools",
+  ruler: "Ruler",
+  ink: "Pen",
+  undo: "Undo",
+  redo: "Redo",
+  clear: "Clear",
+  deltaX: "\u0394x",
+  deltaY: "\u0394y",
+  deltaValue: "\u0394 value",
+  deltaCategory: "\u0394 category",
+  steps: (count) => `${count} ${count === 1 ? "step" : "steps"}`,
+  plot: "Annotation plot: arrows move the crosshair, Shift moves faster, Space sets a point, Enter finishes, Escape cancels",
+  position: (x, y) => `${x}, ${y}`,
+  pending: (count) => `${count} ${count === 1 ? "point" : "points"} set`,
+  finished: "Stroke finished"
+};
+const round = (value) => Math.round(value * 10) / 10;
+function describe(measure, plot, labels) {
+  const dx = plot.xKind === "time" ? formatDuration(measure.dx) : labels.steps(round(Math.abs(measure.dx)));
+  const dy = signed(measure.dy, plot.formatY);
+  const percent = measure.percent == null ? "" : ` (${signed(measure.percent, (v) => `${round(v)} %`)})`;
+  if (plot.horizontal) {
+    return `${labels.deltaValue} ${dy}${percent} \xB7 ${labels.deltaCategory} ${dx}`;
+  }
+  return `${labels.deltaX} ${dx} \xB7 ${labels.deltaY} ${dy}${percent}`;
+}
+function useChartInk({
+  color = "var(--chart-cat-2)",
+  tool: initialTool = "none",
+  labels: labelsProp
+} = {}) {
+  const labels = useMemo(() => ({ ...DEFAULT_INK_LABELS, ...labelsProp }), [labelsProp]);
+  const [state, dispatch] = useReducer(inkReducer, EMPTY_INK);
+  const [tool, setTool] = useState(initialTool);
+  const [draft, setDraft] = useState(null);
+  const [status, setStatus] = useState("");
+  const [cursor, setCursor] = useState(null);
+  const [placed, setPlaced] = useState([]);
+  const nextId = useRef(1);
+  const drawing = useRef(false);
+  const overlay = useMemo(() => {
+    const keyboardDraft = (at, points) => {
+      if (!at || points.length === 0) return [];
+      if (tool === "ruler") {
+        return [{ kind: "ruler", id: -1, a: points[0], b: at }];
+      }
+      return [{ kind: "stroke", id: -1, color, points: [...points, at] }];
+    };
+    const domainOf = (plot) => plotDomain(plot);
+    const reset = () => {
+      setCursor(null);
+      setPlaced([]);
+    };
+    const onKeyDown = (event, plot) => {
+      if (tool === "none") return;
+      const domain = domainOf(plot);
+      const key = event.key;
+      if (key === "ArrowLeft" || key === "ArrowRight" || key === "ArrowUp" || key === "ArrowDown") {
+        event.preventDefault();
+        setCursor(
+          (current) => moveCursor(
+            current ?? startCursor(domain),
+            key,
+            event.shiftKey,
+            domain,
+            plot.horizontal
+          )
+        );
+        return;
+      }
+      if (key !== " " && key !== "Enter" && key !== "Escape") return;
+      event.preventDefault();
+      const at = cursor ?? startCursor(domain);
+      const action = cursorAction(tool === "ruler" ? "ruler" : "ink", key, placed, at);
+      if (action.type === "cancel") {
+        if (placed.length > 0) setPlaced([]);
+        else setCursor(null);
+        return;
+      }
+      setCursor(at);
+      if (action.type === "pending") {
+        setPlaced(action.points);
+        return;
+      }
+      const id = nextId.current++;
+      const [first, last] = [
+        action.points[0],
+        action.points[action.points.length - 1]
+      ];
+      if (tool === "ruler") {
+        const item = { kind: "ruler", id, a: first, b: last };
+        setStatus(describe(measureSegment(item.a, item.b), plot, labels));
+        dispatch({ type: "add", item });
+      } else {
+        dispatch({ type: "add", item: { kind: "stroke", id, color, points: action.points } });
+        setStatus(labels.finished);
+      }
+      setPlaced([]);
+    };
+    const pointOf = (event, plot) => {
+      const rect = event.currentTarget.getBoundingClientRect();
+      return pixelToPlot(plot, { x: event.clientX - rect.left, y: event.clientY - rect.top });
+    };
+    return {
+      svg: (plot) => /* @__PURE__ */ jsxs(
+        "g",
+        {
+          "data-ink": "",
+          pointerEvents: "none",
+          fill: "none",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            [...state.items, ...draft ? [draft] : [], ...keyboardDraft(cursor, placed)].map(
+              (item) => item.kind === "stroke" ? /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: inkPath(item.points.map((p) => plotToPixel(plot, p))),
+                  strokeWidth: 2.5,
+                  style: { stroke: item.color }
+                },
+                item.id
+              ) : /* @__PURE__ */ jsx(
+                Ruler,
+                {
+                  a: item.a,
+                  b: item.b,
+                  plot,
+                  text: describe(measureSegment(item.a, item.b), plot, labels)
+                },
+                item.id
+              )
+            ),
+            cursor ? /* @__PURE__ */ jsx(Crosshair, { at: cursor, plot }) : null
+          ]
+        }
+      ),
+      html: (plot) => tool === "none" ? null : /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-export-skip": "",
+          role: "slider",
+          tabIndex: 0,
+          "aria-label": labels.plot,
+          "aria-valuemin": 0,
+          "aria-valuemax": 1,
+          "aria-valuenow": cursor ? 1 : 0,
+          "aria-valuetext": cursor ? `${labels.position(plot.formatX(cursor.x), plot.formatY(cursor.y))}${placed.length ? `. ${labels.pending(placed.length)}` : ""}` : labels.plot,
+          onKeyDown: (event) => onKeyDown(event, plot),
+          onFocus: (event) => {
+            if (!cursor && event.currentTarget.matches(":focus-visible")) {
+              setCursor(startCursor(domainOf(plot)));
+            }
+          },
+          onBlur: reset,
+          className: "absolute touch-none select-none outline-none focus-visible:outline-2 focus-visible:outline-accent-ink focus-visible:outline-offset-2",
+          style: {
+            left: plot.left,
+            top: plot.top,
+            width: plot.width,
+            height: plot.height,
+            cursor: "crosshair"
+          },
+          onPointerDown: (event) => {
+            if (event.button !== 0) return;
+            reset();
+            event.currentTarget.setPointerCapture(event.pointerId);
+            drawing.current = true;
+            const point = pointOf(event, plot);
+            const id = nextId.current++;
+            setDraft(
+              tool === "ruler" ? { kind: "ruler", id, a: point, b: point } : { kind: "stroke", id, color, points: [point] }
+            );
+          },
+          onPointerMove: (event) => {
+            if (!drawing.current) return;
+            const point = pointOf(event, plot);
+            setDraft(
+              (current) => !current ? current : current.kind === "ruler" ? { ...current, b: point } : { ...current, points: [...current.points, point] }
+            );
+          },
+          onPointerUp: (event) => {
+            if (!drawing.current) return;
+            drawing.current = false;
+            if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+              event.currentTarget.releasePointerCapture(event.pointerId);
+            }
+            const done = draft;
+            setDraft(null);
+            if (!done) return;
+            if (done.kind === "ruler") {
+              const from = plotToPixel(plot, done.a);
+              const to = plotToPixel(plot, done.b);
+              const length = Math.hypot(to.x - from.x, to.y - from.y);
+              if (length < 4) return;
+              setStatus(describe(measureSegment(done.a, done.b), plot, labels));
+            }
+            dispatch({ type: "add", item: done });
+          },
+          onPointerCancel: () => {
+            drawing.current = false;
+            setDraft(null);
+          }
+        }
+      )
+    };
+  }, [state.items, draft, tool, color, labels, cursor, placed]);
+  const undo = useCallback(() => dispatch({ type: "undo" }), []);
+  const redo = useCallback(() => dispatch({ type: "redo" }), []);
+  const clear = useCallback(() => {
+    dispatch({ type: "clear" });
+    setStatus("");
+  }, []);
+  return {
+    tool,
+    setTool,
+    items: state.items,
+    canUndo: state.items.length > 0,
+    canRedo: state.redo.length > 0,
+    canClear: state.items.length > 0 || state.redo.length > 0,
+    undo,
+    redo,
+    clear,
+    labels,
+    status,
+    overlay
+  };
+}
+function Crosshair({ at, plot }) {
+  const { x, y } = plotToPixel(plot, at);
+  return /* @__PURE__ */ jsxs("g", { "data-crosshair": "", strokeWidth: 1, style: { stroke: "var(--ink-2)" }, children: [
+    /* @__PURE__ */ jsx("path", { d: `M${x},0V${plot.height}M0,${y}H${plot.width}`, strokeDasharray: "2 3" }),
+    /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 5, fill: "none", strokeWidth: 2 })
+  ] });
+}
+function Ruler({
+  a,
+  b,
+  plot,
+  text
+}) {
+  const { x: ax, y: ay } = plotToPixel(plot, a);
+  const { x: bx, y: by } = plotToPixel(plot, b);
+  const width = text.length * 6.7 + 16;
+  const height = 22;
+  const x = Math.min(Math.max(0, (ax + bx) / 2 - width / 2), Math.max(0, plot.width - width));
+  const y = Math.min(Math.max(0, Math.min(ay, by) - height - 8), Math.max(0, plot.height - height));
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: `M${ax},${ay}H${bx}V${by}`,
+        strokeWidth: 1,
+        strokeDasharray: "3 4",
+        style: { stroke: "var(--ink-3)" }
+      }
+    ),
+    /* @__PURE__ */ jsx("line", { x1: ax, y1: ay, x2: bx, y2: by, strokeWidth: 2, style: { stroke: "var(--ink)" } }),
+    [
+      ["start", ax, ay],
+      ["end", bx, by]
+    ].map(([end, cx, cy]) => /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx,
+        cy,
+        r: 4,
+        strokeWidth: 2,
+        style: { fill: "var(--surface)", stroke: "var(--ink)" }
+      },
+      end
+    )),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx: 6,
+        style: { fill: "var(--surface)", stroke: "var(--line-strong)" }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x + width / 2,
+        y: y + 15,
+        textAnchor: "middle",
+        fontSize: 11,
+        fontWeight: 600,
+        stroke: "none",
+        style: { fill: "var(--ink)" },
+        children: text
+      }
+    )
+  ] });
+}
+const buttonClass = "inline-flex h-7 cursor-pointer items-center rounded-button border-0 px-3 font-semibold text-[12px] outline-none focus-visible:outline-2 focus-visible:outline-accent-ink disabled:cursor-not-allowed disabled:opacity-40";
+function ChartInkToolbar({ ink, className }) {
+  const { labels } = ink;
+  const tool = (id) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": ink.tool === id,
+      onClick: () => ink.setTool(ink.tool === id ? "none" : id),
+      className: cn(
+        buttonClass,
+        ink.tool === id ? "bg-accent-soft text-accent-ink" : "bg-surface-2 text-ink-2 hover:text-ink"
+      ),
+      children: labels[id]
+    }
+  );
+  const action = (name, run, enabled) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      disabled: !enabled,
+      onClick: run,
+      className: cn(buttonClass, "bg-surface-2 text-ink-2 enabled:hover:text-ink"),
+      children: labels[name]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": labels.tools,
+      className: cn("flex flex-wrap items-center gap-1", className),
+      children: [
+        tool("ruler"),
+        tool("ink"),
+        action("undo", ink.undo, ink.canUndo),
+        action("redo", ink.redo, ink.canRedo),
+        action("clear", ink.clear, ink.canClear),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: ink.status })
+      ]
+    }
+  );
+}
+export {
+  ChartInkToolbar,
+  DEFAULT_INK_LABELS,
+  useChartInk
+};

package/dist/charts/core/cartesian/layout.d.ts

@@ -0,0 +1,164 @@
+import { type AxisTick } from "../axes.js";
+import { type ValueFormat, type ValueFormatter } from "../format.js";
+import type { ChartTone } from "../palette.js";
+import { type Curve, type Point } from "../path.js";
+import type { ChartPattern } from "../patterns.js";
+import { type ContinuousScale } from "../scales/linear.js";
+import { type StackLayer, type StackMode } from "../stack.js";
+import type { ChartAnnotation, ValueAxisOptions, XValue } from "../types.js";
+import { type CartesianAxisSpec } from "./axis-stack.js";
+import type { MarkKind } from "./types.js";
+/** A visible series with its data already cut to the zoom window. */
+export interface ResolvedSeries {
+    id: string;
+    name: string;
+    kind: MarkKind;
+    /** Id of the value axis the series is measured against. */
+    axis: string;
+    color: string;
+    dashed: boolean;
+    format: ValueFormatter;
+    data: ReadonlyArray<number | null>;
+    from?: ReadonlyArray<number | null>;
+    stackGroup?: string;
+    pointColors?: ReadonlyArray<string | undefined>;
+    pattern?: ChartPattern;
+}
+export interface BarGeometry {
+    key: string;
+    index: number;
+    d: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** The value end of the bar points down (vertical) or left (horizontal) on screen. */
+    negative: boolean;
+    /** Own color of this bar (series `pointColors`). */
+    color?: string;
+}
+export interface LabelGeometry {
+    key: string;
+    x: number;
+    y: number;
+    text: string;
+    anchor: "start" | "middle" | "end";
+    /** Drawn on top of a bar fill rather than next to it. */
+    inside: boolean;
+}
+export interface SeriesGeometry {
+    id: string;
+    kind: MarkKind;
+    color: string;
+    dashed: boolean;
+    pattern?: ChartPattern;
+    /** Value end of the mark at each index (null for gaps); anchors markers and tooltips. */
+    points: Array<Point | null>;
+    line?: string;
+    area?: string;
+    bars?: BarGeometry[];
+    labels: LabelGeometry[];
+}
+interface AnnotationBaseGeometry {
+    key: string;
+    label?: string;
+    tooltip?: string;
+    tone: ChartTone;
+}
+export interface AnnotationSpanGeometry extends AnnotationBaseGeometry {
+    kind: "line" | "range";
+    /** Screen direction of the line (or the long side of the range). */
+    direction: "horizontal" | "vertical";
+    from: number;
+    to: number;
+}
+/** A dot or text anchored at a pixel of the plot. */
+export interface AnnotationMarkerGeometry extends AnnotationBaseGeometry {
+    kind: "point" | "text";
+    x: number;
+    y: number;
+}
+export type AnnotationGeometry = AnnotationSpanGeometry | AnnotationMarkerGeometry;
+/** A value axis ready to draw: its scale, ticks and where it hangs. */
+export interface AxisGeometry {
+    id: string;
+    side: "left" | "right";
+    scale: ContinuousScale;
+    ticks: AxisTick[];
+    /** Distance outward from the plot edge on its side (0 for the first axis of a side). */
+    offset: number;
+    title?: string;
+    color?: string;
+}
+export interface Margin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface CartesianLayout {
+    width: number;
+    height: number;
+    margin: Margin;
+    innerWidth: number;
+    innerHeight: number;
+    horizontal: boolean;
+    mode: "band" | "point" | "time";
+    /** Center of each category along the category axis. */
+    positions: number[];
+    bandwidth: number;
+    step: number;
+    /** Category index nearest to a pixel on the category axis. */
+    indexAt: (pixel: number) => number;
+    valueScale: ContinuousScale;
+    /** Scale of the first right-hand axis, if any. */
+    rightScale: ContinuousScale | null;
+    /** Every value axis in drawing order; the first is the primary one. */
+    axes: AxisGeometry[];
+    categoryTicks: AxisTick[];
+    valueTicks: AxisTick[];
+    /** Ticks of the first right-hand axis. */
+    rightTicks: AxisTick[];
+    /** Pixel of the zero value on the value axis, when inside the plot. */
+    zero: number | null;
+    layers: ReadonlyMap<string, StackLayer>;
+    geometry: SeriesGeometry[];
+    annotations: AnnotationGeometry[];
+}
+export interface LayoutInput {
+    width: number;
+    height: number;
+    categories: readonly XValue[];
+    series: readonly ResolvedSeries[];
+    orientation: "vertical" | "horizontal";
+    stack: StackMode;
+    curve: Curve;
+    dataLabels: boolean;
+    barRadius: number;
+    xScale: "auto" | "band" | "time";
+    xLabel: (value: XValue) => string;
+    valueFormat?: ValueFormat;
+    yAxis: ValueAxisOptions;
+    rightAxis: ValueAxisOptions;
+    /** More value axes; `yAxis` and `rightAxis` are the axes with id "left" and "right". */
+    axes?: readonly CartesianAxisSpec[];
+    /** Lower bound for the margins, to line this plot up with others (synced charts). */
+    minMargin?: {
+        left: number;
+        right: number;
+    };
+    annotations: readonly ChartAnnotation[];
+    /** Reserve a row under the category axis for group labels. */
+    categoryGroups?: boolean;
+    /** Degrees to tilt the category labels (vertical charts). */
+    labelRotation?: number;
+}
+/** Default category label: Spanish short dates, grouped numbers, strings as given. */
+export declare function defaultXLabel(value: XValue): string;
+/**
+ * Computes every pixel of a cartesian chart: margins, scales, ticks, paths,
+ * bars, labels and annotations. Pure, so it is memoised by the component and
+ * hover never recomputes it.
+ */
+export declare function computeLayout(input: LayoutInput): CartesianLayout;
+export {};