@siyahi/ui 0.1.9-next.25 → 0.1.9-next.27

package/agents/examples/chart-area-log.tsx

@@ -0,0 +1,45 @@
+import { AreaChartCard, ToggleGroup, ToggleGroupItem, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Money a new fund manages, month by month from launch, made up for the catalogue: ₹2L to ₹3.1Cr.
+const data = [
+  { month: "Nov", managed: 200000 },
+  { month: "Dec", managed: 450000 },
+  { month: "Jan", managed: 900000 },
+  { month: "Feb", managed: 1600000 },
+  { month: "Mar", managed: 2400000 },
+  { month: "Apr", managed: 3900000 },
+  { month: "May", managed: 5800000 },
+  { month: "Jun", managed: 8200000 },
+  { month: "Jul", managed: 12500000 },
+  { month: "Aug", managed: 17000000 },
+  { month: "Sep", managed: 23500000 },
+  { month: "Oct", managed: 31000000 },
+];
+
+const series: ChartSeries<(typeof data)[number]> = [
+  { key: "managed", label: "Money managed", color: "var(--chart-1)" },
+];
+
+export default function ChartAreaLogExample() {
+  const { money, moneyCompact } = useFormat();
+  return (
+    <AreaChartCard
+      title="₹3.1Cr managed a year after launch"
+      description="Linear shows the size today; Log shows the early months, when it grew fastest."
+      action={
+        <ToggleGroup defaultValue={["1Y"]} variant="outline" size="sm" aria-label="Range">
+          <ToggleGroupItem value="6M">6M</ToggleGroupItem>
+          <ToggleGroupItem value="1Y">1Y</ToggleGroupItem>
+        </ToggleGroup>
+      }
+      data={data}
+      xKey="month"
+      series={series}
+      // Linear is selected first; the buttons after the range toggle let the reader switch to log.
+      yScaleToggle
+      valueFormatter={money}
+      yTickFormatter={moneyCompact}
+      height={256}
+    />
+  );
+}

package/agents/examples/chart-line-log.tsx

@@ -0,0 +1,39 @@
+import { Badge, LineChartCard, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Monthly active users in the app's first year, made up for the catalogue: from a few hundred to tens of thousands.
+const data = [
+  { month: "Nov", users: 240 },
+  { month: "Dec", users: 410 },
+  { month: "Jan", users: 780 },
+  { month: "Feb", users: 1350 },
+  { month: "Mar", users: 2100 },
+  { month: "Apr", users: 3900 },
+  { month: "May", users: 6200 },
+  { month: "Jun", users: 9800 },
+  { month: "Jul", users: 14100 },
+  { month: "Aug", users: 21500 },
+  { month: "Sep", users: 30200 },
+  { month: "Oct", users: 46800 },
+];
+
+const series: ChartSeries<(typeof data)[number]> = [{ key: "users", label: "Active users", color: "var(--chart-1)" }];
+
+export default function ChartLineLogExample() {
+  const { count } = useFormat();
+  return (
+    <LineChartCard
+      title="Active users grew about 1.5× a month all year"
+      description="On log, steady growth is a straight line; Linear shows how much of it came in the last few months."
+      action={<Badge variant="outline">First year</Badge>}
+      data={data}
+      xKey="month"
+      series={series}
+      // Log is selected first; the buttons in the header let the reader switch.
+      yScale="log"
+      yScaleToggle
+      yLabel="Active users"
+      valueFormatter={count}
+      height={256}
+    />
+  );
+}

package/agents/examples/scatter-chart-quadrants.tsx

@@ -52,10 +52,10 @@ export default function ScatterChartQuadrantsExample() {
         x: 0,
         y: 0,
         labels: {
-          topLeft: "Cheaper, selling more",
-          topRight: "Dearer, still selling more",
-          bottomLeft: "Cheaper, selling less",
-          bottomRight: "Dearer, selling less",
+          topLeft: "Cheaper, sells more",
+          topRight: "Dearer, still sells more",
+          bottomLeft: "Cheaper, sells less",
+          bottomRight: "Dearer, sells less",
         },
       }}
     />

package/agents/examples/scatter-chart-scales.tsx

@@ -0,0 +1,46 @@
+import { ScatterChartCard, useFormat, type ScatterPoint } from "@siyahi/ui";
+
+// A shop's products this month: x is units sold, y the shelf price; made-up figures. Both run from a few to
+// thousands, so both axes open on log. Largest sellers first, so they take the labels.
+const products: ScatterPoint[] = [
+  { name: "Milk 500 ml", x: 38000, y: 32 },
+  { name: "Bread", x: 21000, y: 45 },
+  { name: "Eggs, 6", x: 14500, y: 60 },
+  { name: "Tea 250 g", x: 6200, y: 140 },
+  { name: "Atta 5 kg", x: 4800, y: 260 },
+  { name: "Rice 5 kg", x: 3900, y: 420 },
+  { name: "Oil 1 L", x: 3100, y: 180 },
+  { name: "Ghee 500 ml", x: 1400, y: 340 },
+  { name: "Coffee 200 g", x: 900, y: 480 },
+  { name: "Dry fruit box", x: 260, y: 1200 },
+  { name: "Saffron 1 g", x: 120, y: 350 },
+  { name: "Olive oil 1 L", x: 95, y: 980 },
+  { name: "Gift hamper", x: 40, y: 3500 },
+  { name: "Mixer grinder", x: 18, y: 4200 },
+  { name: "Pressure cooker", x: 25, y: 2100 },
+];
+
+export default function ScatterChartScalesExample() {
+  const { count, money } = useFormat();
+  return (
+    <ScatterChartCard
+      title="A few cheap products sell most of the units"
+      description="Units sold this month against shelf price. Both axes switch: each pair of buttons is named for its axis."
+      points={products}
+      height={360}
+      xLabel="Units sold"
+      yLabel="Price"
+      xScale="log"
+      xScaleToggle
+      yScale="log"
+      yScaleToggle
+      xFormatter={count}
+      yFormatter={(value) => money(value)}
+      quadrants={{
+        x: 1000,
+        y: 500,
+        labels: { topLeft: "Dear, few sold", bottomRight: "Cheap, many sold" },
+      }}
+    />
+  );
+}

package/agents/examples/scatter-chart.tsx

@@ -1,4 +1,4 @@
-import { ScatterChartCard, useFormat, type ScatterPoint } from "@siyahi/ui";
+import { Badge, ScatterChartCard, useFormat, type ScatterPoint } from "@siyahi/ui";
 import { useState } from "react";
 
 interface Store extends ScatterPoint {
@@ -40,12 +40,15 @@ export default function ScatterChartExample() {
   return (
     <ScatterChartCard
       title="Stores by size and growth"
-      description="Across is the store's share of sales (log scale), up its growth on last year. Hover or tap a dot."
+      description="Across is the store's share of sales, up its growth on last year. Log spreads out the small stores; Linear shows how far ahead the largest are."
+      action={<Badge variant="outline">This month</Badge>}
       points={stores}
       height={360}
       xLabel="Share of sales"
       yLabel="Growth"
+      // Log is selected first; the buttons in the header let the reader switch.
       xScale="log"
+      xScaleToggle
       xFormatter={(x) => pct(x)}
       yFormatter={(y) => growth(y)}
       details={(s) => [

package/agents/manifest.json

@@ -522,6 +522,15 @@
         "ChangeGrid"
       ]
     },
+    {
+      "file": "agents/examples/chart-area-log.tsx",
+      "components": [
+        "AreaChartCard",
+        "ToggleGroup",
+        "ToggleGroupItem",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/chart-area.tsx",
       "components": [
@@ -590,6 +599,14 @@
         "LineChartCard"
       ]
     },
+    {
+      "file": "agents/examples/chart-line-log.tsx",
+      "components": [
+        "Badge",
+        "LineChartCard",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/chart-line-timeline.tsx",
       "components": [
@@ -1022,9 +1039,17 @@
         "useFormat"
       ]
     },
+    {
+      "file": "agents/examples/scatter-chart-scales.tsx",
+      "components": [
+        "ScatterChartCard",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/scatter-chart.tsx",
       "components": [
+        "Badge",
         "ScatterChartCard",
         "useFormat"
       ]

package/dist/components/registry/charts/area-chart-card.d.ts

@@ -1,6 +1,6 @@
-import { ChartCurve, NumericXProps, SeriesChartProps } from "../../../lib/chart-series.js";
+import { ChartCurve, NumericXProps, SeriesChartProps, ValueScaleProps } from "../../../lib/chart-series.js";
 //#region src/components/registry/charts/area-chart-card.d.ts
-export interface AreaChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K>, NumericXProps {
+export interface AreaChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K>, NumericXProps, ValueScaleProps {
   /** Stack the series into a total instead of overlapping them. */
   stacked?: boolean;
   curve?: ChartCurve;

package/dist/components/registry/charts/area-chart-card.js

@@ -9,6 +9,7 @@ function AreaChartCard({ stacked = false, curve = "monotone", ...props }) {
 	const id = useId();
 	return /* @__PURE__ */ jsxs(ChartFrame, {
 		chart: AreaChart,
+		logBlocked: stacked ? "Log cannot show stacked areas" : void 0,
 		...props,
 		children: [/* @__PURE__ */ jsx("defs", { children: props.series.map(({ key, color }, index) => /* @__PURE__ */ jsxs("linearGradient", {
 			id: `${id}-${index}`,

package/dist/components/registry/charts/line-chart-card.d.ts

@@ -1,6 +1,6 @@
-import { ChartCurve, NumericXProps, SeriesChartProps } from "../../../lib/chart-series.js";
+import { ChartCurve, NumericXProps, SeriesChartProps, ValueScaleProps } from "../../../lib/chart-series.js";
 //#region src/components/registry/charts/line-chart-card.d.ts
-export interface LineChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K>, NumericXProps {
+export interface LineChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K>, NumericXProps, ValueScaleProps {
   curve?: ChartCurve;
 }
 /** Values over an ordered axis as lines: one series, or several to compare, such as sales against a target. */

package/dist/components/registry/heatmap/weekday-heatmap.js

@@ -18,13 +18,12 @@ const calculateLevel = (value, minValue, maxValue, levels, isNormalized) => {
 	const percentage = value / maxValue;
 	return Math.max(1, Math.min(steps, Math.ceil(percentage * steps)));
 };
-const getLevelFill = (level, levels, isNormalized, highlighted = false, colors) => {
+const getLevelFill = (level, levels, isNormalized, colors) => {
 	const emptyColor = colors?.empty ?? "var(--color-secondary)";
 	const scaleColor = colors?.scale ?? "var(--color-chart-1)";
 	if (level === 0) return emptyColor;
 	const steps = colorStepCount(levels, isNormalized);
-	const opacity = steps === 1 ? 100 : Math.round(20 + (level - 1) * 80 / (steps - 1));
-	return `color-mix(in oklch, ${scaleColor} ${highlighted ? Math.round(opacity * .6) : opacity}%, transparent)`;
+	return `color-mix(in oklch, ${scaleColor} ${steps === 1 ? 100 : Math.round(20 + (level - 1) * 80 / (steps - 1))}%, transparent)`;
 };
 const DEFAULT_HOUR_LABELS = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, "0"));
 const TWELVE_HOUR_LABELS = Array.from({ length: 24 }, (_, i) => {
@@ -259,7 +258,7 @@ const WeekdayHeatmapBlock = ({ ref, activity, extra, highlighted = false, select
 		"aria-pressed": onCellClick ? selected : void 0,
 		tabIndex: onCellClick ? 0 : -1,
 		"aria-label": ariaLabel,
-		className: cn("motion-safe:transition-opacity motion-safe:hover:opacity-70", onCellClick && "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className),
+		className: cn("hover:stroke-foreground hover:stroke-1", highlighted && "stroke-foreground stroke-1", selected && "stroke-foreground stroke-2 hover:stroke-2", onCellClick && "cursor-pointer focus-visible:outline-none focus-visible:stroke-ring focus-visible:stroke-2", className),
 		"data-value": activity.value,
 		"data-weekday": isExtraRow ? "extra" : activity.weekday,
 		"data-hour": isExtraColumn ? "extra" : activity.hour,
@@ -273,11 +272,7 @@ const WeekdayHeatmapBlock = ({ ref, activity, extra, highlighted = false, select
 		x: xPosition,
 		y: yPosition,
 		style: {
-			fill: getLevelFill(level, levels, isNormalized, highlighted, colors),
-			...selected ? {
-				stroke: "var(--foreground)",
-				strokeWidth: 2
-			} : {},
+			fill: getLevelFill(level, levels, isNormalized, colors),
 			...styleProp
 		},
 		onClick: (event) => {
@@ -510,7 +505,7 @@ const WeekdayHeatmapLegend = ({ labels: labelsProp, className, children, ...prop
 					rx: blockRadius,
 					ry: blockRadius,
 					width: LEGEND_SWATCH,
-					style: { fill: getLevelFill(level, levels, isNormalized, false, colors) }
+					style: { fill: getLevelFill(level, levels, isNormalized, colors) }
 				})
 			}, `legend-level-${level}`)),
 			/* @__PURE__ */ jsx("span", {

package/dist/components/siyahi/drawdown-chart.js

@@ -1,6 +1,6 @@
+import { linearTicks } from "../../lib/ticks.js";
 import { ChartFrame } from "../../lib/chart-frame.js";
 import { useFormat } from "../../lib/format.js";
-import { linearTicks } from "../../lib/scatter.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Area, AreaChart } from "recharts";

package/dist/components/siyahi/histogram-chart.js

@@ -1,6 +1,6 @@
 import { useLocale } from "./siyahi-provider.js";
+import { linearTicks } from "../../lib/ticks.js";
 import { ChartFrame } from "../../lib/chart-frame.js";
-import { linearTicks } from "../../lib/scatter.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Bar, BarChart } from "recharts";

package/dist/components/siyahi/scale-toggle.d.ts

@@ -0,0 +1,32 @@
+import { AxisScale } from "../../lib/ticks.js";
+import { ReactNode } from "react";
+//#region src/components/siyahi/scale-toggle.d.ts
+/** Why Log is disabled when a value is at or below zero. */
+export declare const LOG_BLOCKED = "Log needs every value above zero";
+export interface ScaleToggleProps {
+  /** The group's accessible name, such as "Share of book scale". */
+  label: string;
+  /** The axis' name shown before the buttons, for a card with a toggle on each axis. */
+  caption?: string;
+  value: AxisScale;
+  onValueChange: (scale: AxisScale) => void;
+  /** Why log cannot draw this data, such as a value at or below zero: Log is disabled and this shows beside it. */
+  logBlocked?: string;
+}
+/** Linear and Log buttons for one chart axis, in the header's toggle style. */
+export declare function ScaleToggle({ label, caption, value, onValueChange, logBlocked }: ScaleToggleProps): import("react").JSX.Element;
+export interface AxisScaleOptions extends Omit<ScaleToggleProps, "value" | "onValueChange"> {
+  /** The page's scale: the first selection. */
+  initial: AxisScale;
+  /** Show the buttons. */
+  toggle: boolean;
+}
+/**
+ * The scale an axis draws on, and its buttons when `toggle` is set. The page's scale is the first selection; after
+ * that the reader's pick holds. Log falls back to linear while `logBlocked` says why it cannot draw the data.
+ */
+export declare function useAxisScale({ initial, toggle, ...buttons }: AxisScaleOptions): {
+  scale: AxisScale;
+  buttons: ReactNode;
+};
+//#endregion

package/dist/components/siyahi/scale-toggle.js

@@ -0,0 +1,61 @@
+import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+//#region src/components/siyahi/scale-toggle.tsx
+/** Why Log is disabled when a value is at or below zero. */
+const LOG_BLOCKED = "Log needs every value above zero";
+/** Linear and Log buttons for one chart axis, in the header's toggle style. */
+function ScaleToggle({ label, caption, value, onValueChange, logBlocked }) {
+	const reason = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "scale-toggle",
+		className: "flex flex-wrap items-center gap-x-2 gap-y-1",
+		children: [
+			caption && /* @__PURE__ */ jsx("span", {
+				className: "text-xs text-muted-foreground",
+				children: caption
+			}),
+			/* @__PURE__ */ jsxs(ToggleGroup, {
+				value: [value],
+				onValueChange: ([next]) => next && onValueChange(next === "log" ? "log" : "linear"),
+				variant: "outline",
+				size: "sm",
+				spacing: 0,
+				"aria-label": label,
+				"aria-describedby": logBlocked ? reason : void 0,
+				children: [/* @__PURE__ */ jsx(ToggleGroupItem, {
+					value: "linear",
+					children: "Linear"
+				}), /* @__PURE__ */ jsx(ToggleGroupItem, {
+					value: "log",
+					disabled: logBlocked !== void 0,
+					children: "Log"
+				})]
+			}),
+			logBlocked && /* @__PURE__ */ jsx("span", {
+				id: reason,
+				className: "text-xs text-muted-foreground",
+				children: logBlocked
+			})
+		]
+	});
+}
+/**
+* The scale an axis draws on, and its buttons when `toggle` is set. The page's scale is the first selection; after
+* that the reader's pick holds. Log falls back to linear while `logBlocked` says why it cannot draw the data.
+*/
+function useAxisScale({ initial, toggle, ...buttons }) {
+	const [picked, setPicked] = useState(initial);
+	const wanted = toggle ? picked : initial;
+	const scale = buttons.logBlocked ? "linear" : wanted;
+	return {
+		scale,
+		buttons: toggle ? /* @__PURE__ */ jsx(ScaleToggle, {
+			...buttons,
+			value: scale,
+			onValueChange: setPicked
+		}) : null
+	};
+}
+//#endregion
+export { LOG_BLOCKED, ScaleToggle, useAxisScale };

package/dist/components/siyahi/scatter-chart.d.ts

@@ -1,9 +1,10 @@
+import { AxisScale } from "../../lib/ticks.js";
 import { ScatterQuadrants } from "../../lib/scatter.js";
 import { ReactNode } from "react";
 //#region src/components/siyahi/scatter-chart.d.ts
 export interface ScatterPoint {
   name: string;
-  /** Across. On a log axis a point at or under zero is not drawn. */
+  /** Across. */
   x: number;
   /** Up. `null` when unknown: the point is not drawn, so say on the page how many are missing. */
   y: number | null;
@@ -20,7 +21,7 @@ export type ScatterDetail = readonly [label: string, value: string];
 export interface ScatterChartCardProps<T extends ScatterPoint> {
   title: ReactNode;
   description?: ReactNode;
-  /** A scope badge or a toggle, top right of the card. */
+  /** A scope badge or a toggle, top right of the card, before any scale buttons. */
   action?: ReactNode;
   /** Most important first: earlier points take the labels. */
   points: T[];
@@ -30,8 +31,17 @@ export interface ScatterChartCardProps<T extends ScatterPoint> {
   xLabel: string;
   /** What the y axis measures, beside it, such as "Growth on last year". */
   yLabel: string;
-  /** "log" spreads values across powers of ten, for sizes that run from tiny to large. */
-  xScale?: "linear" | "log";
+  /**
+   * "log" spreads values across powers of ten, for sizes that run from tiny to large. With xScaleToggle it is the
+   * first selection. Log draws only when every x is above zero; otherwise the axis is linear.
+   */
+  xScale?: AxisScale;
+  /** Linear and Log buttons for the x axis in the header, so a reader can switch. */
+  xScaleToggle?: boolean;
+  /** As xScale, for the y axis: log draws only when every y is above zero. */
+  yScale?: AxisScale;
+  /** Linear and Log buttons for the y axis in the header. */
+  yScaleToggle?: boolean;
   /** The x ticks and the tooltip's x figure. Defaults to the locale's numbers. */
   xFormatter?: (value: number) => string;
   /** The y ticks and the tooltip's y figure. Defaults to the locale's numbers. */
@@ -54,6 +64,6 @@ export interface ScatterChartCardProps<T extends ScatterPoint> {
   sizeFormatter?: (value: number) => string;
 }
 /** Two measures per item as dots, such as size against growth, with the leading names beside their dots. */
-export declare function ScatterChartCard<T extends ScatterPoint>({ title, description, action, points, height, xLabel, yLabel, xScale, xFormatter, yFormatter, labels, details, selected, onSelect, footer, quadrants, sizeLabel, sizeFormatter }: ScatterChartCardProps<T>): import("react").JSX.Element;
+export declare function ScatterChartCard<T extends ScatterPoint>({ title, description, action, points, height, xLabel, yLabel, xScale, xScaleToggle, yScale, yScaleToggle, xFormatter, yFormatter, labels, details, selected, onSelect, footer, quadrants, sizeLabel, sizeFormatter }: ScatterChartCardProps<T>): import("react").JSX.Element;
 //#endregion
 export type { ScatterQuadrants };

package/dist/components/siyahi/scatter-chart.js

@@ -1,7 +1,9 @@
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../ui/card.js";
 import { ChartContainer } from "../ui/chart.js";
+import { LOG_BLOCKED, useAxisScale } from "./scale-toggle.js";
 import { useLocale } from "./siyahi-provider.js";
-import { corners, dotSizes, linearTicks, logTicks, placeLabels, quadrantSplit } from "../../lib/scatter.js";
+import { fitsLog, ticksFor } from "../../lib/ticks.js";
+import { corners, dotSizes, placeLabels, quadrantSplit } from "../../lib/scatter.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { CartesianGrid, DefaultZIndexes, ReferenceLine, Scatter, ScatterChart, Tooltip, XAxis, YAxis, ZIndexLayer, usePlotArea, useXAxisScale, useYAxisScale } from "recharts";
@@ -14,8 +16,9 @@ const NAME_BAND = 42;
 const TICK = { className: "fill-muted-foreground font-mono" };
 const AXIS_TITLE = "fill-muted-foreground text-xs";
 const keyOf = (point) => point.key ?? point.name;
+const MONO_WIDTH = 7.2;
 /** Two measures per item as dots, such as size against growth, with the leading names beside their dots. */
-function ScatterChartCard({ title, description, action, points, height, xLabel, yLabel, xScale = "linear", xFormatter, yFormatter, labels = 12, details, selected = null, onSelect, footer, quadrants, sizeLabel = "Size", sizeFormatter }) {
+function ScatterChartCard({ title, description, action, points, height, xLabel, yLabel, xScale = "linear", xScaleToggle = false, yScale = "linear", yScaleToggle = false, xFormatter, yFormatter, labels = 12, details, selected = null, onSelect, footer, quadrants, sizeLabel = "Size", sizeFormatter }) {
 	const { numberLocale } = useLocale();
 	const plotRef = useRef(null);
 	const [focusedKey, setFocusedKey] = useState(null);
@@ -39,18 +42,35 @@ function ScatterChartCard({ title, description, action, points, height, xLabel,
 	const formatX = useMemo(() => xFormatter ?? new Intl.NumberFormat(numberLocale).format, [xFormatter, numberLocale]);
 	const formatY = useMemo(() => yFormatter ?? new Intl.NumberFormat(numberLocale).format, [yFormatter, numberLocale]);
 	const formatSize = useMemo(() => sizeFormatter ?? new Intl.NumberFormat(numberLocale).format, [sizeFormatter, numberLocale]);
-	const drawn = useMemo(() => points.filter((p) => p.y !== null && Number.isFinite(p.y) && Number.isFinite(p.x) && (xScale === "linear" || p.x > 0)), [points, xScale]);
+	const drawn = useMemo(() => points.filter((p) => p.y !== null && Number.isFinite(p.y) && Number.isFinite(p.x)), [points]);
+	const both = xScaleToggle && yScaleToggle;
+	const across = useAxisScale({
+		initial: xScale,
+		toggle: xScaleToggle,
+		label: `${xLabel} scale`,
+		caption: both ? xLabel : void 0,
+		logBlocked: fitsLog(drawn.map((p) => p.x)) ? void 0 : LOG_BLOCKED
+	});
+	const up = useAxisScale({
+		initial: yScale,
+		toggle: yScaleToggle,
+		label: `${yLabel} scale`,
+		caption: both ? yLabel : void 0,
+		logBlocked: fitsLog(drawn.map((p) => p.y ?? 0)) ? void 0 : LOG_BLOCKED
+	});
 	const order = useMemo(() => drawn.toSorted((a, b) => a.x - b.x || (a.y ?? 0) - (b.y ?? 0)), [drawn]);
 	const { radiusOf, sized } = dotSizes(drawn, RADIUS);
 	const painted = sized ? drawn.toSorted((a, b) => radiusOf(b) - radiusOf(a)) : drawn;
-	const split = quadrantSplit(quadrants, xScale);
+	const split = quadrantSplit(quadrants, across.scale, up.scale);
 	const xs = [...drawn.map((p) => p.x), ...split ? [split.x] : []];
 	const ys = [...drawn.map((p) => p.y ?? 0), ...split ? [split.y] : []];
 	const reach = sized ? 23 : 0;
 	const names = split?.labels;
 	const band = (named) => named ? NAME_BAND + Math.max(reach, 6.5) : reach;
-	const xTicks = xScale === "log" ? logTicks(Math.min(...xs), Math.max(...xs)) : void 0;
-	const yTicks = linearTicks(Math.min(...ys), Math.max(...ys));
+	const xTicks = ticksFor(across.scale, Math.min(...xs), Math.max(...xs));
+	const yTicks = ticksFor(up.scale, Math.min(...ys), Math.max(...ys));
+	const lastX = xTicks.at(-1);
+	const endRoom = Math.max(16, lastX === void 0 ? 0 : Math.ceil(formatX(lastX).length * MONO_WIDTH / 2) + 4 - reach);
 	const crossesZero = ys.some((y) => y < 0) && ys.some((y) => y > 0);
 	const selectedKey = selected ? keyOf(selected) : null;
 	const rows = details ?? ((p) => [
@@ -89,7 +109,14 @@ function ScatterChartCard({ title, description, action, points, height, xLabel,
 		/* @__PURE__ */ jsxs(CardHeader, { children: [
 			/* @__PURE__ */ jsx(CardTitle, { children: title }),
 			description && /* @__PURE__ */ jsx(CardDescription, { children: description }),
-			action && /* @__PURE__ */ jsx(CardAction, { children: action })
+			(action || across.buttons || up.buttons) && /* @__PURE__ */ jsxs(CardAction, {
+				className: "flex flex-wrap items-center gap-x-3 gap-y-2",
+				children: [
+					action,
+					across.buttons,
+					up.buttons
+				]
+			})
 		] }),
 		/* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
 			ref: plotRef,
@@ -105,7 +132,7 @@ function ScatterChartCard({ title, description, action, points, height, xLabel,
 				children: /* @__PURE__ */ jsxs(ScatterChart, {
 					margin: {
 						top: 12,
-						right: 16,
+						right: endRoom,
 						left: 0
 					},
 					accessibilityLayer: false,
@@ -114,10 +141,10 @@ function ScatterChartCard({ title, description, action, points, height, xLabel,
 						/* @__PURE__ */ jsx(XAxis, {
 							type: "number",
 							dataKey: "x",
-							scale: xScale,
-							domain: xTicks ? [xTicks[0] ?? "auto", xTicks.at(-1) ?? "auto"] : [(low) => Math.min(low, ...xs), (high) => Math.max(high, ...xs)],
-							ticks: xTicks,
-							niceTicks: xTicks ? void 0 : "snap125",
+							scale: across.scale,
+							domain: xTicks.length > 0 ? [xTicks[0] ?? "auto", xTicks.at(-1) ?? "auto"] : [(low) => Math.min(low, ...xs), (high) => Math.max(high, ...xs)],
+							ticks: xTicks.length > 0 ? xTicks : void 0,
+							niceTicks: xTicks.length > 0 ? void 0 : "snap125",
 							padding: reach > 0 ? {
 								left: reach,
 								right: reach
@@ -137,6 +164,7 @@ function ScatterChartCard({ title, description, action, points, height, xLabel,
 						/* @__PURE__ */ jsx(YAxis, {
 							type: "number",
 							dataKey: "y",
+							scale: up.scale,
 							domain: [yTicks[0] ?? "auto", yTicks.at(-1) ?? "auto"],
 							ticks: yTicks,
 							padding: {

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ChartColor, ChartCurve, ChartReferenceLine, ChartSeries, ChartSeriesItem, NumericKey, NumericXProps, SeriesChartProps } from "./lib/chart-series.js";
+import { ChartColor, ChartCurve, ChartReferenceLine, ChartSeries, ChartSeriesItem, NumericKey, NumericXProps, SeriesChartProps, ValueScaleProps } from "./lib/chart-series.js";
 import { AreaChartCard, AreaChartCardProps } from "./components/registry/charts/area-chart-card.js";
 import { BarChartCard, BarChartCardProps } from "./components/registry/charts/bar-chart-card.js";
 import { LineChartCard, LineChartCardProps } from "./components/registry/charts/line-chart-card.js";
@@ -71,6 +71,7 @@ import { PanelGrid, PanelGridProps } from "./components/siyahi/panel-grid.js";
 import { PriceChart, PriceChartProps } from "./components/siyahi/price-chart.js";
 import { Quote, QuoteProps } from "./components/siyahi/quote.js";
 import { RangePosition, RangePositionProps } from "./components/siyahi/range-position.js";
+import { AxisScaleOptions, LOG_BLOCKED, ScaleToggle, ScaleToggleProps, useAxisScale } from "./components/siyahi/scale-toggle.js";
 import { ScatterQuadrants } from "./lib/scatter.js";
 import { ScatterChartCard, ScatterChartCardProps, ScatterDetail, ScatterPoint } from "./components/siyahi/scatter-chart.js";
 import { SiyahiLocale, defaultLocale } from "./lib/locale.js";
@@ -108,4 +109,4 @@ import { Textarea } from "./components/ui/textarea.js";
 import { Toggle, toggleVariants } from "./components/ui/toggle.js";
 import { ToggleGroup, ToggleGroupItem } from "./components/ui/toggle-group.js";
 import { Formatters, TimeOptions, count, money, moneyCompact, pct, time, useFormat } from "./lib/format.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActiveCell, ActiveSelection, Activity, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AppSidebarProps, AreaChartCard, AreaChartCardProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChartCard, BarChartCardProps, BarList, BarListItem, BarListProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBlockProps, CalendarHeatmapBody, CalendarHeatmapBodyProps, CalendarHeatmapFooter, CalendarHeatmapFooterProps, CalendarHeatmapLegend, CalendarHeatmapLegendProps, CalendarHeatmapProps, CalendarHeatmapStat, CalendarHeatmapStatProps, Callout, CalloutProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChangeBar, ChangeBarProps, ChangeGrid, ChangeGridProps, ChangeGridRow, ChartColor, ChartConfig, ChartContainer, ChartCurve, ChartLegend, ChartLegendContent, ChartReferenceLine, ChartSeries, ChartSeriesItem, ChartStyle, ChartTooltip, ChartTooltipContent, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorConfig, ColumnResizeInfo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CompactColumns, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataBar, DataBarProps, DataList, DataListItem, DataListItemProps, DataTable, DataTableActions, DataTableBody, DataTableBodyProps, type DataTableCell, type DataTableColumn, DataTableColumnActions, type DataTableColumnDef, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderProps, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, type DataTableColumns, DataTableCompactColumnsToggle, DataTableConfig, DataTableContainerProps, DataTableContext, DataTableContextState, DataTableEmptyActions, DataTableEmptyActionsProps, DataTableEmptyBody, DataTableEmptyBodyProps, DataTableEmptyDescription, DataTableEmptyDescriptionProps, DataTableEmptyFilteredMessage, DataTableEmptyFilteredMessageProps, DataTableEmptyIcon, DataTableEmptyIconProps, DataTableEmptyMessage, DataTableEmptyMessageProps, DataTableEmptyState, DataTableEmptyStateProps, DataTableEmptyTitle, DataTableEmptyTitleProps, DataTableErrorBoundary, DataTableErrorBoundaryProps, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableFootnote, DataTableFootnoteProps, DataTableGroupRowContextValue, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableGroupedRowsProps, DataTableHeader, type DataTableHeader$1 as DataTableHeaderCell, DataTableHeaderProps, type DataTableInstance, DataTableLoading, DataTableLoadingMore, DataTableLoadingMoreProps, DataTableLoadingProps, DataTableProvider, DataTableRoot, type DataTableRow, DataTableRowContextMenu, DataTableRowContextMenuProps, DataTableRowContextMenuSlot, DataTableRowContextMenuSlotProps, DataTableRowCount, DataTableRowCountProps, DataTableRowMenuScope, DataTableSearchFilter, DataTableSkeleton, DataTableSkeletonProps, DataTableSortHeader, DataTableToolbarSection, DataTableToolbarSectionProps, Delta, DeltaProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DistributionBar, DistributionBarProps, DistributionMarker, DistributionSegment, DrawdownChartCard, DrawdownChartCardProps, DrawdownPoint, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type ExtendedColumnFilter, type ExtendedColumnSort, type FilterOperator, type FilterOperatorValues, type FilterVariant, type FilterVariantValues, FlashCellRef, FlashCells, FlashRows, FlashRowsOptions, Formatters, type GlobalFilter, GroupedBodyRow, GroupedBodyRowProps, HistogramBin, HistogramChartCard, HistogramChartCardProps, HistogramMark, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type JoinOperator, type JoinOperatorValues, Labels, LineChartCard, LineChartCardProps, LocalTime, LocalTimeProps, MetricStrip, MetricStripItem, MetricStripProps, NavMain, NavProjects, NavUser, NumericKey, NumericXProps, type Option, PageHero, PageHeroProps, PageSection, PageSectionProps, PageSubheading, PageToc, PageTocItem, PageTocProps, PanelGrid, PanelGridProps, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, PriceChartProps, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, type QueryKeys, Quote, QuoteProps, RangePosition, RangePositionProps, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScatterChartCard, ScatterChartCardProps, ScatterDetail, ScatterPoint, type ScatterQuadrants, ScrollAlign, ScrollArea, ScrollBar, type ScrollEvent, ScrollRowIntoView, SectionCard, SectionCards, SectionCardsProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesChartProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiLocale, SiyahiProvider, SiyahiProviderProps, Skeleton, Slider, SlopeChart, SlopeChartProps, SlopeItem, Sparkline, SparklineProps, StatusActivity, StatusAlert, StatusAlertProps, StatusBadge, StatusBadgeProps, StatusColorConfig, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBlockProps, StatusHeatmapBody, StatusHeatmapBodyProps, StatusHeatmapFooter, StatusHeatmapFooterProps, StatusHeatmapLabels, StatusHeatmapLegend, StatusHeatmapLegendProps, StatusHeatmapProps, StatusHeatmapStat, StatusHeatmapStatProps, StatusValue, Surface, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnActionsProps, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFacetedFilterProps, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, TableSearchFilterProps, Tabs, TabsContent, TabsList, TabsTrigger, TargetRow, TargetRows, TargetRowsProps, TargetStatus, TeamSwitcher, Textarea, TimeOptions, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, ToneProgressProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapItem, TreemapLegend, TreemapLegendProps, TreemapProps, type ValueOf, WaterfallBar, WaterfallChartCard, WaterfallChartCardProps, WaterfallStep, type ColorConfig$1 as WeekdayColorConfig, type WeekdayExtraColumnSpec, type WeekdayExtraRowSpec, WeekdayHeatmap, WeekdayHeatmapBlock, type WeekdayHeatmapBlockProps, WeekdayHeatmapBody, type WeekdayHeatmapBodyProps, WeekdayHeatmapFooter, type WeekdayHeatmapFooterProps, type WeekdayHeatmapLabels, WeekdayHeatmapLegend, type WeekdayHeatmapLegendProps, type WeekdayHeatmapProps, WeekdayHeatmapStat, type WeekdayHeatmapStatProps, type WeekdayHour, type WeekdayHourlyActivity, type WeekdayIndex, badgeVariants, bucketOf, buttonVariants, count, defaultLocale, defaultSidebarOpen, drawdowns, flashCellKey, histogram, markLines, money, moneyCompact, pct, percentile, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, spread, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useSurface, useTableFacetedFilter, waterfallBars };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActiveCell, ActiveSelection, Activity, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AppSidebarProps, AreaChartCard, AreaChartCardProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, AxisScaleOptions, Badge, BarChartCard, BarChartCardProps, BarList, BarListItem, BarListProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBlockProps, CalendarHeatmapBody, CalendarHeatmapBodyProps, CalendarHeatmapFooter, CalendarHeatmapFooterProps, CalendarHeatmapLegend, CalendarHeatmapLegendProps, CalendarHeatmapProps, CalendarHeatmapStat, CalendarHeatmapStatProps, Callout, CalloutProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChangeBar, ChangeBarProps, ChangeGrid, ChangeGridProps, ChangeGridRow, ChartColor, ChartConfig, ChartContainer, ChartCurve, ChartLegend, ChartLegendContent, ChartReferenceLine, ChartSeries, ChartSeriesItem, ChartStyle, ChartTooltip, ChartTooltipContent, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorConfig, ColumnResizeInfo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CompactColumns, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataBar, DataBarProps, DataList, DataListItem, DataListItemProps, DataTable, DataTableActions, DataTableBody, DataTableBodyProps, type DataTableCell, type DataTableColumn, DataTableColumnActions, type DataTableColumnDef, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderProps, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, type DataTableColumns, DataTableCompactColumnsToggle, DataTableConfig, DataTableContainerProps, DataTableContext, DataTableContextState, DataTableEmptyActions, DataTableEmptyActionsProps, DataTableEmptyBody, DataTableEmptyBodyProps, DataTableEmptyDescription, DataTableEmptyDescriptionProps, DataTableEmptyFilteredMessage, DataTableEmptyFilteredMessageProps, DataTableEmptyIcon, DataTableEmptyIconProps, DataTableEmptyMessage, DataTableEmptyMessageProps, DataTableEmptyState, DataTableEmptyStateProps, DataTableEmptyTitle, DataTableEmptyTitleProps, DataTableErrorBoundary, DataTableErrorBoundaryProps, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableFootnote, DataTableFootnoteProps, DataTableGroupRowContextValue, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableGroupedRowsProps, DataTableHeader, type DataTableHeader$1 as DataTableHeaderCell, DataTableHeaderProps, type DataTableInstance, DataTableLoading, DataTableLoadingMore, DataTableLoadingMoreProps, DataTableLoadingProps, DataTableProvider, DataTableRoot, type DataTableRow, DataTableRowContextMenu, DataTableRowContextMenuProps, DataTableRowContextMenuSlot, DataTableRowContextMenuSlotProps, DataTableRowCount, DataTableRowCountProps, DataTableRowMenuScope, DataTableSearchFilter, DataTableSkeleton, DataTableSkeletonProps, DataTableSortHeader, DataTableToolbarSection, DataTableToolbarSectionProps, Delta, DeltaProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DistributionBar, DistributionBarProps, DistributionMarker, DistributionSegment, DrawdownChartCard, DrawdownChartCardProps, DrawdownPoint, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type ExtendedColumnFilter, type ExtendedColumnSort, type FilterOperator, type FilterOperatorValues, type FilterVariant, type FilterVariantValues, FlashCellRef, FlashCells, FlashRows, FlashRowsOptions, Formatters, type GlobalFilter, GroupedBodyRow, GroupedBodyRowProps, HistogramBin, HistogramChartCard, HistogramChartCardProps, HistogramMark, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type JoinOperator, type JoinOperatorValues, LOG_BLOCKED, Labels, LineChartCard, LineChartCardProps, LocalTime, LocalTimeProps, MetricStrip, MetricStripItem, MetricStripProps, NavMain, NavProjects, NavUser, NumericKey, NumericXProps, type Option, PageHero, PageHeroProps, PageSection, PageSectionProps, PageSubheading, PageToc, PageTocItem, PageTocProps, PanelGrid, PanelGridProps, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, PriceChartProps, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, type QueryKeys, Quote, QuoteProps, RangePosition, RangePositionProps, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScaleToggle, ScaleToggleProps, ScatterChartCard, ScatterChartCardProps, ScatterDetail, ScatterPoint, type ScatterQuadrants, ScrollAlign, ScrollArea, ScrollBar, type ScrollEvent, ScrollRowIntoView, SectionCard, SectionCards, SectionCardsProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesChartProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiLocale, SiyahiProvider, SiyahiProviderProps, Skeleton, Slider, SlopeChart, SlopeChartProps, SlopeItem, Sparkline, SparklineProps, StatusActivity, StatusAlert, StatusAlertProps, StatusBadge, StatusBadgeProps, StatusColorConfig, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBlockProps, StatusHeatmapBody, StatusHeatmapBodyProps, StatusHeatmapFooter, StatusHeatmapFooterProps, StatusHeatmapLabels, StatusHeatmapLegend, StatusHeatmapLegendProps, StatusHeatmapProps, StatusHeatmapStat, StatusHeatmapStatProps, StatusValue, Surface, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnActionsProps, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFacetedFilterProps, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, TableSearchFilterProps, Tabs, TabsContent, TabsList, TabsTrigger, TargetRow, TargetRows, TargetRowsProps, TargetStatus, TeamSwitcher, Textarea, TimeOptions, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, ToneProgressProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapItem, TreemapLegend, TreemapLegendProps, TreemapProps, type ValueOf, ValueScaleProps, WaterfallBar, WaterfallChartCard, WaterfallChartCardProps, WaterfallStep, type ColorConfig$1 as WeekdayColorConfig, type WeekdayExtraColumnSpec, type WeekdayExtraRowSpec, WeekdayHeatmap, WeekdayHeatmapBlock, type WeekdayHeatmapBlockProps, WeekdayHeatmapBody, type WeekdayHeatmapBodyProps, WeekdayHeatmapFooter, type WeekdayHeatmapFooterProps, type WeekdayHeatmapLabels, WeekdayHeatmapLegend, type WeekdayHeatmapLegendProps, type WeekdayHeatmapProps, WeekdayHeatmapStat, type WeekdayHeatmapStatProps, type WeekdayHour, type WeekdayHourlyActivity, type WeekdayIndex, badgeVariants, bucketOf, buttonVariants, count, defaultLocale, defaultSidebarOpen, drawdowns, flashCellKey, histogram, markLines, money, moneyCompact, pct, percentile, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, spread, tabsListVariants, time, toggleVariants, useAxisScale, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useSurface, useTableFacetedFilter, waterfallBars };

package/dist/index.js

@@ -30,6 +30,7 @@ import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, Tabl
 import { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } from "./components/ui/tabs.js";
 import { Toggle, toggleVariants } from "./components/ui/toggle.js";
 import { ToggleGroup, ToggleGroupItem } from "./components/ui/toggle-group.js";
+import { LOG_BLOCKED, ScaleToggle, useAxisScale } from "./components/siyahi/scale-toggle.js";
 import { defaultLocale } from "./lib/locale.js";
 import { SiyahiProvider, useLocale, useSurface } from "./components/siyahi/siyahi-provider.js";
 import { AreaChartCard } from "./components/registry/charts/area-chart-card.js";
@@ -104,4 +105,4 @@ import { TargetRows } from "./components/siyahi/target-rows.js";
 import { ToneProgress } from "./components/siyahi/tone-progress.js";
 import { Treemap, TreemapLegend } from "./components/siyahi/treemap.js";
 import { WaterfallChartCard, waterfallBars } from "./components/siyahi/waterfall-chart.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AreaChartCard, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChartCard, BarList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBody, CalendarHeatmapFooter, CalendarHeatmapLegend, CalendarHeatmapStat, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChangeBar, ChangeGrid, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataBar, DataList, DataListItem, DataTable, DataTableActions, DataTableBody, DataTableColumnActions, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, DataTableCompactColumnsToggle, DataTableContext, DataTableEmptyActions, DataTableEmptyBody, DataTableEmptyDescription, DataTableEmptyFilteredMessage, DataTableEmptyIcon, DataTableEmptyMessage, DataTableEmptyState, DataTableEmptyTitle, DataTableErrorBoundary, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableFootnote, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableHeader, DataTableLoading, DataTableLoadingMore, DataTableProvider, DataTableRoot, DataTableRowContextMenu, DataTableRowContextMenuSlot, DataTableRowCount, DataTableRowMenuScope, DataTableSearchFilter, DataTableSkeleton, DataTableSortHeader, DataTableToolbarSection, Delta, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DistributionBar, DrawdownChartCard, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, GroupedBodyRow, HistogramChartCard, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, LineChartCard, LocalTime, MetricStrip, NavMain, NavProjects, NavUser, PageHero, PageSection, PageSubheading, PageToc, PanelGrid, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Quote, RangePosition, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScatterChartCard, ScrollArea, ScrollBar, SectionCards, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiProvider, Skeleton, Slider, SlopeChart, Sparkline, StatusAlert, StatusBadge, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBody, StatusHeatmapFooter, StatusHeatmapLegend, StatusHeatmapStat, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, Tabs, TabsContent, TabsList, TabsTrigger, TargetRows, TeamSwitcher, Textarea, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapLegend, WaterfallChartCard, WeekdayHeatmap, WeekdayHeatmapBlock, WeekdayHeatmapBody, WeekdayHeatmapFooter, WeekdayHeatmapLegend, WeekdayHeatmapStat, badgeVariants, bucketOf, buttonVariants, count, defaultLocale, defaultSidebarOpen, drawdowns, flashCellKey, histogram, markLines, money, moneyCompact, pct, percentile, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, spread, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useSurface, useTableFacetedFilter, waterfallBars };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AreaChartCard, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChartCard, BarList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBody, CalendarHeatmapFooter, CalendarHeatmapLegend, CalendarHeatmapStat, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChangeBar, ChangeGrid, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataBar, DataList, DataListItem, DataTable, DataTableActions, DataTableBody, DataTableColumnActions, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, DataTableCompactColumnsToggle, DataTableContext, DataTableEmptyActions, DataTableEmptyBody, DataTableEmptyDescription, DataTableEmptyFilteredMessage, DataTableEmptyIcon, DataTableEmptyMessage, DataTableEmptyState, DataTableEmptyTitle, DataTableErrorBoundary, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableFootnote, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableHeader, DataTableLoading, DataTableLoadingMore, DataTableProvider, DataTableRoot, DataTableRowContextMenu, DataTableRowContextMenuSlot, DataTableRowCount, DataTableRowMenuScope, DataTableSearchFilter, DataTableSkeleton, DataTableSortHeader, DataTableToolbarSection, Delta, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DistributionBar, DrawdownChartCard, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, GroupedBodyRow, HistogramChartCard, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, LOG_BLOCKED, LineChartCard, LocalTime, MetricStrip, NavMain, NavProjects, NavUser, PageHero, PageSection, PageSubheading, PageToc, PanelGrid, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Quote, RangePosition, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScaleToggle, ScatterChartCard, ScrollArea, ScrollBar, SectionCards, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiProvider, Skeleton, Slider, SlopeChart, Sparkline, StatusAlert, StatusBadge, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBody, StatusHeatmapFooter, StatusHeatmapLegend, StatusHeatmapStat, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, Tabs, TabsContent, TabsList, TabsTrigger, TargetRows, TeamSwitcher, Textarea, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapLegend, WaterfallChartCard, WeekdayHeatmap, WeekdayHeatmapBlock, WeekdayHeatmapBody, WeekdayHeatmapFooter, WeekdayHeatmapLegend, WeekdayHeatmapStat, badgeVariants, bucketOf, buttonVariants, count, defaultLocale, defaultSidebarOpen, drawdowns, flashCellKey, histogram, markLines, money, moneyCompact, pct, percentile, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, spread, tabsListVariants, time, toggleVariants, useAxisScale, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useSurface, useTableFacetedFilter, waterfallBars };

package/dist/lib/chart-frame.d.ts

@@ -1,9 +1,9 @@
-import { ChartColor, ChartSeries, ChartSeriesItem, NumericXProps, SeriesChartProps } from "./chart-series.js";
+import { ChartColor, ChartSeries, ChartSeriesItem, NumericXProps, SeriesChartProps, ValueScaleProps } from "./chart-series.js";
 import { ChartTooltipContent } from "../components/ui/chart.js";
 import { ComponentProps, ReactElement, ReactNode } from "react";
 import { AreaChart, BarChart, LineChart, YAxisProps } from "recharts";
 //#region src/lib/chart-frame.d.ts
-interface ChartFrameProps<T extends object, K extends keyof T> extends Omit<SeriesChartProps<T, K>, "yDomain">, NumericXProps {
+interface ChartFrameProps<T extends object, K extends keyof T> extends Omit<SeriesChartProps<T, K>, "yDomain">, NumericXProps, ValueScaleProps {
   chart: typeof AreaChart | typeof BarChart | typeof LineChart;
   /** The value axis' range: a page's fixed one, or a card's rule such as bars reaching zero. */
   yDomain?: YAxisProps["domain"];
@@ -22,6 +22,8 @@ interface ChartFrameProps<T extends object, K extends keyof T> extends Omit<Seri
   tooltipRow?: ComponentProps<typeof ChartTooltipContent>["formatter"];
   /** The legend under the plot; by default one chip per series. */
   legend?: ReactElement;
+  /** Why this chart cannot go on a log scale whatever its values, such as stacked areas adding up from zero. */
+  logBlocked?: string;
 }
 /**
  * The colour a series' Bar takes, which its legend chip shows: the negative colour when every value drawn is below
@@ -47,6 +49,6 @@ export declare function seriesRow<T>(series: ChartSeries<T>, formatValue: (value
  * that gave its category axis its own id (dash#88) got a plot split in two
  * and every tooltip headed with the series name instead of the category.
  */
-export declare function ChartFrame<T extends object, K extends keyof T>({ chart: Chart, children, horizontal, stackOffset, onClick, tooltipRow, legend, title, description, action, data, xKey, series, xFormatter, xTooltipFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines, placeholder, footer, xDomain, xTicks }: ChartFrameProps<T, K>): import("react").JSX.Element;
+export declare function ChartFrame<T extends object, K extends keyof T>({ chart: Chart, children, horizontal, stackOffset, onClick, tooltipRow, legend, title, description, action, data, xKey, series, xFormatter, xTooltipFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines, placeholder, footer, xDomain, xTicks, yScale, yScaleToggle, logBlocked }: ChartFrameProps<T, K>): import("react").JSX.Element;
 //#endregion
 export {};

package/dist/lib/chart-frame.js

@@ -1,7 +1,9 @@
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/ui/card.js";
 import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "../components/ui/chart.js";
 import { cn } from "./utils.js";
+import { useAxisScale } from "../components/siyahi/scale-toggle.js";
 import { useLocale } from "../components/siyahi/siyahi-provider.js";
+import { fitsLog, logAxis } from "./ticks.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { CartesianGrid, ReferenceLine, Text, XAxis, YAxis, useChartWidth, useXAxisTicks, useYAxisTicks } from "recharts";
@@ -82,11 +84,11 @@ function seriesRow(series, formatValue) {
 * never ₹80,000 halfway up. Recharts' tickFormatter sees one value at a time; the axis' ticks come from its hooks.
 * The rest of Recharts' tick props pass on as its own tick does, including the class it measures an auto width by.
 */
-function ValueTick({ payload, axis, formatter, ...tick }) {
+function ValueTick({ payload, axis, formatter, ownUnit = false, ...tick }) {
 	const xTicks = useXAxisTicks();
 	const yTicks = useYAxisTicks();
 	const value = Number(payload?.value);
-	const scale = Math.max(Math.abs(value), ...((axis === "x" ? xTicks : yTicks) ?? []).map((t) => Math.abs(Number(t.value))));
+	const scale = ownUnit ? Math.abs(value) : Math.max(Math.abs(value), ...((axis === "x" ? xTicks : yTicks) ?? []).map((t) => Math.abs(Number(t.value))));
 	return /* @__PURE__ */ jsx(Text, {
 		...tick,
 		children: formatter(value, scale)
@@ -186,7 +188,7 @@ function HorizontalAxis({ data, xKey, xFormatter, xTickDetail, xTicks }) {
 * that gave its category axis its own id (dash#88) got a plot split in two
 * and every tooltip headed with the series name instead of the category.
 */
-function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, onClick, tooltipRow, legend = SERIES_LEGEND, title, description, action, data, xKey, series, xFormatter = String, xTooltipFormatter = xFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines = NO_LINES, placeholder, footer, xDomain, xTicks }) {
+function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, onClick, tooltipRow, legend = SERIES_LEGEND, title, description, action, data, xKey, series, xFormatter = String, xTooltipFormatter = xFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines = NO_LINES, placeholder, footer, xDomain, xTicks, yScale = "linear", yScaleToggle = false, logBlocked }) {
 	const { numberLocale } = useLocale();
 	const formatValue = useMemo(() => valueFormatter ?? new Intl.NumberFormat(numberLocale).format, [valueFormatter, numberLocale]);
 	const config = Object.fromEntries(series.map(({ key, label, color }) => [key, {
@@ -194,6 +196,16 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, o
 		color
 	}]));
 	const crossesZero = data.some((row) => series.some(({ key }) => Number(row[key]) < 0));
+	const [low, high] = Array.isArray(yDomain) ? yDomain : [];
+	const range = typeof low === "number" && typeof high === "number" ? [low, high] : void 0;
+	const values = [...data.flatMap((row) => series.map(({ key }) => row[key])), ...range ?? []].filter((value) => typeof value === "number" && Number.isFinite(value));
+	const valueAxis = useAxisScale({
+		initial: yScale,
+		toggle: yScaleToggle,
+		label: yLabel ? `${yLabel} scale` : "Value axis scale",
+		logBlocked: logBlocked ?? (fitsLog(values) ? void 0 : "Log needs every value above zero")
+	});
+	const log = valueAxis.scale === "log" ? logAxis(values, range) : void 0;
 	const detailedRows = horizontal && xTickDetail !== void 0;
 	const rowCount = (xTicks ?? data).length;
 	const plotClass = detailedRows ? "min-h-(--wrapped-chart-height) @min-[24rem]/chart:min-h-0" : void 0;
@@ -214,7 +226,10 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, o
 		/* @__PURE__ */ jsxs(CardHeader, { children: [
 			/* @__PURE__ */ jsx(CardTitle, { children: title }),
 			description && /* @__PURE__ */ jsx(CardDescription, { children: description }),
-			action && /* @__PURE__ */ jsx(CardAction, { children: action })
+			(action || valueAxis.buttons) && /* @__PURE__ */ jsxs(CardAction, {
+				className: "flex flex-wrap items-center gap-x-3 gap-y-2",
+				children: [action, valueAxis.buttons]
+			})
 		] }),
 		/* @__PURE__ */ jsx(CardContent, {
 			className: "@container/chart overflow-x-auto",
@@ -285,12 +300,13 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, o
 							tick: xTickDetail || xTicks ? fittedTick(data, xKey, xFormatter, xTickDetail, false) : TICK,
 							interval: xTickDetail || xTicks ? 0 : void 0
 						}), /* @__PURE__ */ jsx(YAxis, {
-							niceTicks: "snap125",
+							scale: valueAxis.scale,
+							niceTicks: log ? void 0 : "snap125",
 							tickLine: false,
 							axisLine: false,
 							width: "auto",
-							domain: yDomain,
-							ticks: yTicks,
+							domain: log?.domain ?? yDomain,
+							ticks: log?.ticks ?? yTicks,
 							label: yLabel ? {
 								value: yLabel,
 								angle: -90,
@@ -301,6 +317,7 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, o
 							tick: yTickFormatter ? /* @__PURE__ */ jsx(ValueTick, {
 								axis: "y",
 								formatter: yTickFormatter,
+								ownUnit: log !== void 0,
 								...TICK
 							}) : TICK,
 							tickFormatter: yTickFormatter ? void 0 : (value) => formatValue(value)

package/dist/lib/chart-series.d.ts

@@ -1,3 +1,4 @@
+import { AxisScale } from "./ticks.js";
 import { ReactNode } from "react";
 //#region src/lib/chart-series.d.ts
 /**
@@ -89,6 +90,17 @@ export interface NumericXProps {
   /** The x axis runs over this range of the xKey field, which must hold numbers; without it the axis is one slot per row. */
   xDomain?: [number, number];
 }
+/** A value axis that may run on a log scale: lines and areas, which need not start at zero as bars must. */
+export interface ValueScaleProps {
+  /**
+   * "log" spreads values across powers of ten, for values that run from tiny to large; the first selection when
+   * yScaleToggle is set. Log draws only when every value, and yDomain, is above zero; otherwise the axis is linear.
+   * On log the axis ticks at 1, 2 and 5 inside yDomain, if given, and yTicks is not used.
+   */
+  yScale?: AxisScale;
+  /** Linear and Log buttons for the value axis in the header, after the action, so a reader can switch. */
+  yScaleToggle?: boolean;
+}
 /**
  * How a line or an area's edge joins its points: "linear" draws straight segments, as measured samples should
  * be drawn; "monotone", the default, smooths between them without overshooting a point.

package/dist/lib/scatter.d.ts

@@ -1,15 +1,5 @@
+import { AxisScale } from "./ticks.js";
 //#region src/lib/scatter.d.ts
-/**
- * Ticks for a log axis at 1, 2 and 5 times a power of ten, from the largest at or under min to the smallest at or
- * over max, so the axis ends on a tick and every label reads as a round number.
- */
-export declare function logTicks(min: number, max: number): number[];
-/**
- * Ticks for a linear axis that just covers min to max, about `count` of them, a step of 1, 2, 2.5 or 5 times a power
- * of ten: −50% to +75% by 25s, never −50% to +150% because the step had to be 50. Values that differ only by float
- * noise, such as 0.3 and 0.30000000000000004, count as one value and get that value as their only tick.
- */
-export declare function linearTicks(min: number, max: number, count?: number): number[];
 export interface Box {
   x: number;
   y: number;
@@ -46,7 +36,7 @@ export interface LabelType {
 export declare function placeLabels(candidates: readonly LabelCandidate[], plot: Box, limit: number, { size, measure }: LabelType, reserved?: readonly Box[]): PlacedLabel[];
 /**
  * Splits the plot into four at a value on each axis, such as zero, with an optional name in each corner. On a log
- * axis x must be above zero, or no split is drawn. A name that does not fit its quadrant in two lines is left out.
+ * axis that value must be above zero, or no split is drawn. A name that does not fit its quadrant in two lines is left out.
  */
 export interface ScatterQuadrants {
   x: number;
@@ -60,7 +50,7 @@ export interface ScatterQuadrants {
 }
 export type QuadrantLabels = ScatterQuadrants["labels"];
 /** A split a log axis cannot place, at or below zero, or one that is not a number, is no split at all. */
-export declare function quadrantSplit(quadrants: ScatterQuadrants | undefined, xScale: "linear" | "log"): ScatterQuadrants | undefined;
+export declare function quadrantSplit(quadrants: ScatterQuadrants | undefined, xScale: AxisScale, yScale: AxisScale): ScatterQuadrants | undefined;
 /** The largest sized dot; the smallest stays big enough to see and to tap. */
 export declare const MAX_RADIUS = 20;
 /**

package/dist/lib/scatter.js

@@ -1,44 +1,4 @@
 //#region src/lib/scatter.ts
-/**
-* Ticks for a log axis at 1, 2 and 5 times a power of ten, from the largest at or under min to the smallest at or
-* over max, so the axis ends on a tick and every label reads as a round number.
-*/
-function logTicks(min, max) {
-	if (!(min > 0) || !Number.isFinite(max) || !(max >= min)) return [];
-	const ticks = [];
-	for (let decade = Math.floor(Math.log10(min));; decade++) for (const step of [
-		1,
-		2,
-		5
-	]) {
-		const tick = Number((step * 10 ** decade).toPrecision(12));
-		if (Number(((step === 5 ? 10 : step === 2 ? 5 : 2) * 10 ** decade).toPrecision(12)) <= min) continue;
-		ticks.push(tick);
-		if (tick >= max) return ticks;
-	}
-}
-const clean = (value) => Number(value.toPrecision(12)) || 0;
-/**
-* Ticks for a linear axis that just covers min to max, about `count` of them, a step of 1, 2, 2.5 or 5 times a power
-* of ten: −50% to +75% by 25s, never −50% to +150% because the step had to be 50. Values that differ only by float
-* noise, such as 0.3 and 0.30000000000000004, count as one value and get that value as their only tick.
-*/
-function linearTicks(min, max, count = 5) {
-	if (!Number.isFinite(min) || !Number.isFinite(max) || max < min) return [];
-	if (max - min <= Math.max(Math.abs(min), Math.abs(max)) * 1e-9) return [clean(min)];
-	const rough = (max - min) / (count - 1);
-	const power = 10 ** Math.floor(Math.log10(rough));
-	const step = ([
-		1,
-		2,
-		2.5,
-		5,
-		10
-	].find((m) => m * power >= rough * (1 - 1e-9)) ?? 10) * power;
-	const first = Math.floor(min / step + 1e-9);
-	const last = Math.ceil(max / step - 1e-9);
-	return Array.from({ length: last - first + 1 }, (_, i) => clean((first + i) * step));
-}
 const HALO = 2;
 const GAP = 4;
 const overlaps = (a, b) => a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
@@ -125,10 +85,11 @@ function placeLabels(candidates, plot, limit, { size, measure }, reserved = [])
 	}
 	return placed;
 }
+const fits = (scale, at) => scale === "linear" || at > 0;
 /** A split a log axis cannot place, at or below zero, or one that is not a number, is no split at all. */
-function quadrantSplit(quadrants, xScale) {
+function quadrantSplit(quadrants, xScale, yScale) {
 	if (!quadrants || !Number.isFinite(quadrants.x) || !Number.isFinite(quadrants.y)) return void 0;
-	return xScale === "linear" || quadrants.x > 0 ? quadrants : void 0;
+	return fits(xScale, quadrants.x) && fits(yScale, quadrants.y) ? quadrants : void 0;
 }
 /** The largest sized dot; the smallest stays big enough to see and to tap. */
 const MAX_RADIUS = 20;
@@ -215,4 +176,4 @@ function corners(plot, names, split, type) {
 	});
 }
 //#endregion
-export { MAX_RADIUS, corners, dotSizes, linearTicks, logTicks, placeLabels, quadrantSplit };
+export { MAX_RADIUS, corners, dotSizes, placeLabels, quadrantSplit };

package/dist/lib/ticks.d.ts

@@ -0,0 +1,27 @@
+//#region src/lib/ticks.d.ts
+/**
+ * Ticks for a log axis at 1, 2 and 5 times a power of ten, from the largest at or under min to the smallest at or
+ * over max, so the axis ends on a tick and every label reads as a round number.
+ */
+export declare function logTicks(min: number, max: number): number[];
+/**
+ * Ticks for a linear axis that just covers min to max, about `count` of them, a step of 1, 2, 2.5 or 5 times a power
+ * of ten: −50% to +75% by 25s, never −50% to +150% because the step had to be 50. Values that differ only by float
+ * noise, such as 0.3 and 0.30000000000000004, count as one value and get that value as their only tick.
+ */
+export declare function linearTicks(min: number, max: number, count?: number): number[];
+/** How an axis spaces its values: evenly, or by powers of ten for values that run from tiny to large. */
+export type AxisScale = "linear" | "log";
+/** An axis' ticks for its scale: round steps either way, so a linear axis starting at 0.4% reads 0%, 5%, 10%. */
+export declare const ticksFor: (scale: AxisScale, min: number, max: number) => number[];
+/** A log axis has no place for zero or below, so it can draw a set of values only when every one is above zero. */
+export declare const fitsLog: (values: readonly number[]) => boolean;
+/**
+ * A log axis' ends and ticks: a page's fixed range when it gives one, with the 1, 2 and 5 ticks inside it, or else the
+ * ticks that just cover the values and their outer two as the ends.
+ */
+export declare function logAxis(values: readonly number[], range?: readonly [number, number]): {
+  domain: [number, number];
+  ticks: number[];
+};
+//#endregion

package/dist/lib/ticks.js

@@ -0,0 +1,67 @@
+//#region src/lib/ticks.ts
+/**
+* Ticks for a log axis at 1, 2 and 5 times a power of ten, from the largest at or under min to the smallest at or
+* over max, so the axis ends on a tick and every label reads as a round number.
+*/
+function logTicks(min, max) {
+	if (!(min > 0) || !Number.isFinite(max) || !(max >= min)) return [];
+	const ticks = [];
+	for (let decade = Math.floor(Math.log10(min));; decade++) for (const step of [
+		1,
+		2,
+		5
+	]) {
+		const tick = Number((step * 10 ** decade).toPrecision(12));
+		if (Number(((step === 5 ? 10 : step === 2 ? 5 : 2) * 10 ** decade).toPrecision(12)) <= min) continue;
+		ticks.push(tick);
+		if (tick >= max) return ticks;
+	}
+}
+const clean = (value) => Number(value.toPrecision(12)) || 0;
+/**
+* Ticks for a linear axis that just covers min to max, about `count` of them, a step of 1, 2, 2.5 or 5 times a power
+* of ten: −50% to +75% by 25s, never −50% to +150% because the step had to be 50. Values that differ only by float
+* noise, such as 0.3 and 0.30000000000000004, count as one value and get that value as their only tick.
+*/
+function linearTicks(min, max, count = 5) {
+	if (!Number.isFinite(min) || !Number.isFinite(max) || max < min) return [];
+	if (max - min <= Math.max(Math.abs(min), Math.abs(max)) * 1e-9) return [clean(min)];
+	const rough = (max - min) / (count - 1);
+	const power = 10 ** Math.floor(Math.log10(rough));
+	const step = ([
+		1,
+		2,
+		2.5,
+		5,
+		10
+	].find((m) => m * power >= rough * (1 - 1e-9)) ?? 10) * power;
+	const first = Math.floor(min / step + 1e-9);
+	const last = Math.ceil(max / step - 1e-9);
+	return Array.from({ length: last - first + 1 }, (_, i) => clean((first + i) * step));
+}
+/** An axis' ticks for its scale: round steps either way, so a linear axis starting at 0.4% reads 0%, 5%, 10%. */
+const ticksFor = (scale, min, max) => scale === "log" ? logTicks(min, max) : linearTicks(min, max);
+/** A log axis has no place for zero or below, so it can draw a set of values only when every one is above zero. */
+const fitsLog = (values) => values.length > 0 && values.every((value) => value > 0);
+/**
+* A log axis' ends and ticks: a page's fixed range when it gives one, with the 1, 2 and 5 ticks inside it, or else the
+* ticks that just cover the values and their outer two as the ends.
+*/
+function logAxis(values, range) {
+	if (range) {
+		const [low, high] = range;
+		return {
+			domain: [low, high],
+			ticks: logTicks(low, high).filter((tick) => tick >= low && tick <= high)
+		};
+	}
+	const low = Math.min(...values);
+	const high = Math.max(...values);
+	const ticks = logTicks(low, high);
+	return {
+		domain: [ticks[0] ?? low, ticks.at(-1) ?? high],
+		ticks
+	};
+}
+//#endregion
+export { fitsLog, linearTicks, logAxis, logTicks, ticksFor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.9-next.25",
+  "version": "0.1.9-next.27",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",