@lilt-ui/charts 0.4.0 → 0.6.0

package/dist/cards/stat-card.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartBarAppearance, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { ChartBarAppearance, ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
 import { NumericKey, XKey, XKind } from './keys';
 import { CardAggregate } from './format';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -32,8 +32,13 @@ export interface StatCardProps<Row, Key extends NumericKey<Row>> {
      * `ring` beside the value, both filling toward `target`; or `none`.
      */
     chart?: StatCardChart;
-    /** Bar treatment for `chart="bars"`: `solid` (default), `segmented`, `needle`, `gradient`, `outline`. */
+    /** Bar treatment for `chart="bars"`: `solid` (default), `segmented`, `needle`, `gradient`, `outline`, or `isometric`. */
     barStyle?: ChartBarAppearance;
+    /**
+     * Gives the small chart depth: lines and the ring become lit tubes, the meter a solid bar, and bars default
+     * to `isometric`. Values still read from the front faces.
+     */
+    depth?: boolean;
     /** Goal for `chart="meter"` or `chart="ring"`, in the same unit as the value. */
     target?: number;
     /**
@@ -59,10 +64,11 @@ export interface StatCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     motion?: ChartMotion;
     className?: string;
     style?: CSSProperties | ChartStyle;
 }
 /** Cells of a meter: whole cells up to the value, then one cell trimmed to the exact remainder. */
 export declare function meterCells(ratio: number, count?: number): number[];
-export declare function StatCard<Row, const Key extends NumericKey<Row>>({ title, data, value: valueKey, x, xType, headline: suppliedHeadline, aggregate, delta, deltaTone, caption, chart, barStyle, target, sync, height, color, aside, valueFormat, locale, formatValue: suppliedFormatValue, formatX, surface, badge, numberStyle, palette, loading, motion, className, style, }: StatCardProps<Row, Key>): ReactElement;
+export declare function StatCard<Row, const Key extends NumericKey<Row>>({ title, data, value: valueKey, x, xType, headline: suppliedHeadline, aggregate, delta, deltaTone, caption, chart, depth, barStyle, target, sync, height, color, aside, valueFormat, locale, formatValue: suppliedFormatValue, formatX, surface, badge, numberStyle, palette, loading, motion, loadingStyle, className, style, }: StatCardProps<Row, Key>): ReactElement;

package/dist/chart.d.ts

@@ -15,5 +15,5 @@ type ChartPlotRendererProps<T> = Omit<ChartProps<T>, 'className' | 'style'> & Om
     controllerLinked?: boolean;
     tooltipNode?: ReactNode;
 };
-export declare function ChartPlotRenderer<T>({ data, x, y, series, height, compactHeight, margins: marginProps, arrangement, marks, barLayout: barsProps, compact, tooltipNode, inspectionSeries: plotInspectionSeries, className, style, 'aria-label': ariaLabel, children, status, interactive, error, renderRetry, motion: motionPreference, animateIn, resetKey, onSelectionChange, controller, linkedSelection, selectedCategoryId, onSelectedCategoryIdChange, compare, focus, live, brush, visibleSeries, onVisibleSeriesChange, toolkit, model, controllerLinked, axis: axisProp, pill, pillSeries, pillValue, pillPosition, axisInset, runoff, labelOverhang, }: ChartPlotRendererProps<T>): ReactElement;
+export declare function ChartPlotRenderer<T>({ data, x, y, series, height, compactHeight, margins: marginProps, arrangement, marks, barLayout: barsProps, compact, tooltipNode, inspectionSeries: plotInspectionSeries, className, style, 'aria-label': ariaLabel, children, status, loadingStyle, interactive, error, renderRetry, motion: motionPreference, animateIn, resetKey, onSelectionChange, controller, linkedSelection, selectedCategoryId, onSelectedCategoryIdChange, compare, focus, live, brush, visibleSeries, onVisibleSeriesChange, toolkit, model, controllerLinked, axis: axisProp, pill, pillSeries, pillValue, pillPosition, axisInset, runoff, labelOverhang, }: ChartPlotRendererProps<T>): ReactElement;
 export {};

package/dist/engine/depth.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Shared geometry for charts drawn with depth. Every family recedes the same way: up and to the
+ * right at about 30°, so a bar, a candle, a ring, and a funnel side by side share one light and
+ * one camera. The front face always keeps the measured geometry; depth only adds paint behind it.
+ */
+/** The deepest a column recedes, in pixels. */
+export declare const MAX_DEPTH = 14;
+/** Rise per unit of depth. */
+export declare const DEPTH_SLOPE: number;
+/** Extra paint above the tallest front face; clips reserve this much headroom. */
+export declare const MAX_RISE: number;
+/** Screen offset of the back face for a given depth. */
+export declare function depthOffset(depth: number): {
+    dx: number;
+    dy: number;
+};
+/**
+ * Depth for a column of a given footprint. Tiny readings and dense charts get proportionately
+ * less, never a false minimum.
+ */
+export declare function columnDepth(width: number, height: number): number;
+export interface PrismFaces {
+    /** The front, left edge at `x`: the footprint minus the depth, so the prism fits its slot. */
+    front: string;
+    /** The whole silhouette; drawn first in the side's shade, it also fills every seam. */
+    side: string;
+    top: string | null;
+    frontWidth: number;
+    depth: number;
+    rise: number;
+}
+/**
+ * A square prism inside a `width`-wide footprint. The faces overlap underneath the front by a
+ * pixel so antialiased edges never show the plot through a seam.
+ */
+export declare function prismFaces(x: number, y: number, width: number, height: number, depth?: number, showTop?: boolean): PrismFaces;
+/**
+ * A prism for a column centered on `cx`, such as a range bar or a candle body. The front stays
+ * centered on the reading, so the crosshair and any whisker or wick pass through its middle;
+ * the depth extends to the right.
+ */
+export declare function centeredPrism(cx: number, y: number, width: number, height: number): PrismFaces;

package/dist/engine/isometric-bars.d.ts

@@ -0,0 +1,25 @@
+import { barMarkPath, BarGeometry } from './bars';
+/** Extra paint above the measured front face; shared by resting and inspection clips. */
+export declare const ISOMETRIC_BAR_RISE: number;
+type MarkOptions = Parameters<typeof barMarkPath>[1];
+/**
+ * A square prism inside the original horizontal slot. The front keeps the real y values; corner
+ * radius does not apply, because a rounded front reads as a plate stuck on a box.
+ */
+export declare function isometricBarGeometry(bar: BarGeometry, options: MarkOptions): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    depth: number;
+    rise: number;
+    /** Square: an extruded bar has no rounded plate on its front. */
+    front: string;
+    side: string;
+    top: string | null;
+    grounded: boolean;
+    /** A short contact shadow on the floor band, behind and to the right of the footprint. */
+    shadow: string | null;
+    cast: number;
+} | null;
+export {};

package/dist/engine/ranges.d.ts

@@ -1,3 +1,4 @@
+import { PrismFaces } from './depth';
 import { NormalizedRow } from './normalize';
 /** Pixel mappings a range mark draws with. */
 export interface RangeScales {
@@ -29,6 +30,13 @@ export declare class ColorBatches {
         d: string;
     }[];
 }
+/** Prism faces batched by color: every side, then every top, then every front. */
+export declare class PrismBatches {
+    readonly sides: ColorBatches;
+    readonly tops: ColorBatches;
+    readonly fronts: ColorBatches;
+    add(color: string, faces: PrismFaces): void;
+}
 /** Column geometry shared by candles and range marks: center and body width per row. */
 export declare function columnFrame(scales: RangeScales): {
     width: number;
@@ -40,6 +48,8 @@ export interface RangeColumn<T> {
 }
 /** Rows in view with their pixel centers. */
 export declare function columnsInView<T>(rows: readonly NormalizedRow<T>[], scales: RangeScales): RangeColumn<T>[];
+/** One floating bar from low to high as a prism; its front spans exactly low to high. */
+export declare function rangeBarPrism(cx: number, low: number, high: number, scales: RangeScales): PrismFaces;
 /** One floating bar from low to high. */
 export declare function rangeBarPath(cx: number, low: number, high: number, scales: RangeScales): string;
 /** A whisker from low to high with caps a little narrower than the column. */
@@ -57,3 +67,24 @@ export declare function boxShape(cx: number, values: {
     q3: number;
     max: number;
 }, scales: RangeScales): BoxShape;
+/**
+ * A box plot drawn as a solid block. The block's middle, not its front, sits on the reading, so
+ * the whiskers run through the center of its top and bottom faces, half the depth back. The
+ * front still spans exactly Q1 to Q3, and the median wraps from the front around the side.
+ */
+export declare function boxBlock(cx: number, values: {
+    min: number;
+    q1: number;
+    median: number;
+    q3: number;
+    max: number;
+}, scales: RangeScales): {
+    faces: PrismFaces;
+    /** How far the whiskers and outliers sit above their values: half the depth back. */
+    lift: number;
+    median: string;
+    /** Drawn before the block, which hides where it leaves the bottom face. */
+    lower: string;
+    /** Drawn after the block, rising from the middle of its top face. */
+    upper: string;
+};

package/dist/finance/candle-geometry.d.ts

@@ -36,6 +36,15 @@ export interface CandlePaths {
         color: string;
         d: string;
     }[];
+    /** With depth: the receding side and top of every body, one path per color. */
+    sides: {
+        color: string;
+        d: string;
+    }[];
+    tops: {
+        color: string;
+        d: string;
+    }[];
 }
 export declare function candleAt(row: NormalizedRow<unknown>, series: string, fields: CandleFields): Candle | null;
 /** Throws on a candle whose high or low does not contain its open and close. */
@@ -44,12 +53,14 @@ interface CandleShape {
     body: string | null;
     hollow: string | null;
     stroke: string;
+    side: string | null;
+    top: string | null;
 }
 /** One candle's geometry. Wicks stop at the body, so a hollow body stays empty. */
-export declare function candleShape(cx: number, candle: Candle, scales: RangeScales, display: CandleDisplay): CandleShape;
+export declare function candleShape(cx: number, candle: Candle, scales: RangeScales, display: CandleDisplay, depth?: boolean): CandleShape;
 /**
  * Every candle in view batched into a handful of paths: bodies, hollow bodies and strokes,
  * each grouped by color. Thousands of candles stay a few DOM nodes.
  */
-export declare function candlePaths(rows: readonly NormalizedRow<unknown>[], series: string, fields: CandleFields, scales: RangeScales, display: CandleDisplay, colorOf: (row: NormalizedRow<unknown>, candle: Candle) => string): CandlePaths;
+export declare function candlePaths(rows: readonly NormalizedRow<unknown>[], series: string, fields: CandleFields, scales: RangeScales, display: CandleDisplay, colorOf: (row: NormalizedRow<unknown>, candle: Candle) => string, depth?: boolean): CandlePaths;
 export {};

package/dist/finance/candles.d.ts

@@ -9,6 +9,11 @@ export interface CandlesProps {
     low: string;
     /** `candle` (default), `hollow` rising bodies, or `ohlc` bars. */
     display?: CandleDisplay;
+    /**
+     * Draws each body as a solid block receding up and to the right; the front keeps open and
+     * close. OHLC bars stay flat.
+     */
+    depth?: boolean;
     className?: string;
 }
 /**

package/dist/finance/cards/candlestick-chart-card.d.ts

@@ -17,6 +17,11 @@ export interface CandlestickChartCardProps<Row, Key extends NumericKey<Row>> ext
      * colored by the period's direction.
      */
     display?: CandleDisplay | 'area';
+    /**
+     * Draws each candle body as a solid block receding up and to the right; the front keeps open
+     * and close. OHLC bars and the area stay flat.
+     */
+    depth?: boolean;
     /** `log` spaces prices by ratio, for long histories. Defaults to `linear`. */
     scale?: 'linear' | 'log';
     /** Names the price series in hover. Defaults to "Price". */
@@ -37,5 +42,5 @@ export declare function describeCandle(format: (value: number) => string): (insp
  * linked volume pane, a headline that follows the hovered candle, and its open, high and low
  * beside the date.
  */
-export declare function CandlestickChartCard<Row, const Key extends NumericKey<Row>>({ open, high, low, close, volume, display, scale, label, live, data, ranges, delta, valueFormat, locale, volumeHeight, ...props }: CandlestickChartCardProps<Row, Key>): ReactElement;
+export declare function CandlestickChartCard<Row, const Key extends NumericKey<Row>>({ open, high, low, close, volume, display, depth, scale, label, live, data, ranges, delta, valueFormat, locale, volumeHeight, ...props }: CandlestickChartCardProps<Row, Key>): ReactElement;
 export {};

package/dist/finance/cards/depth-chart-card.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement } from 'react';
-import { ChartAxis, ChartBackground, ChartHoverStyle, ChartMotion, ChartStyle, ChartSurface } from '../../types';
+import { ChartAxis, ChartBackground, ChartHoverStyle, ChartLoadingStyle, ChartMotion, ChartStyle, ChartSurface } from '../../types';
 import { AnimatedNumberVariant } from '../../motion/animated-number';
 import { BookLevel } from '../indicators';
 export interface DepthChartCardProps {
@@ -8,6 +8,8 @@ export interface DepthChartCardProps {
     bids: readonly BookLevel[];
     /** Resting sell orders. */
     asks: readonly BookLevel[];
+    /** Draws both sides' edges as lit tubes with a soft shadow; the steps keep their exact prices. */
+    depth?: boolean;
     /** Price format for the mid, spread and axis, e.g. `{ style: 'currency', currency: 'USD' }`. */
     valueFormat?: Intl.NumberFormatOptions;
     /** Size format for depth. Defaults to compact numbers. */
@@ -21,6 +23,7 @@ export interface DepthChartCardProps {
     surface?: ChartSurface;
     numberStyle?: AnimatedNumberVariant;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     motion?: ChartMotion;
     className?: string;
     style?: CSSProperties | ChartStyle;
@@ -29,4 +32,4 @@ export interface DepthChartCardProps {
  * Order book depth: how much could trade at each price, buying and selling, as stepped areas, with
  * the mid, spread and total depth in the header. Hover reads the size resting at each price.
  */
-export declare function DepthChartCard({ title, bids, asks, valueFormat, sizeFormat, locale, height, axis, background, hoverStyle, surface, numberStyle, loading, motion, className, style, }: DepthChartCardProps): ReactElement;
+export declare function DepthChartCard({ title, bids, asks, valueFormat, sizeFormat, locale, height, axis, background, hoverStyle, surface, numberStyle, loading, loadingStyle, motion, className, style, depth, }: DepthChartCardProps): ReactElement;

package/dist/finance/order-book.d.ts

@@ -1,12 +1,14 @@
 import { CSSProperties, ReactElement } from 'react';
-import { ChartMotion, ChartStyle, ChartSurface } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartStyle, ChartSurface } from '../types';
 import { BookLevel } from './indicators';
 export interface OrderBookProps {
     title: string;
     bids: readonly BookLevel[];
     asks: readonly BookLevel[];
     /** Price levels shown on each side of the spread. Defaults to 8. */
-    depth?: number;
+    levels?: number;
+    /** Draws each level's bar as a solid block with a lit roof and a shaded end. */
+    depth?: boolean;
     /** Price format, e.g. `{ style: 'currency', currency: 'USD' }`. */
     valueFormat?: Intl.NumberFormatOptions;
     /** Size format. Defaults to compact numbers. */
@@ -15,6 +17,8 @@ export interface OrderBookProps {
     /** Briefly highlight levels whose size changed. Defaults to true; reduced motion turns it off. */
     flash?: boolean;
     surface?: ChartSurface;
+    loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     motion?: ChartMotion;
     className?: string;
     style?: CSSProperties | ChartStyle;
@@ -23,4 +27,4 @@ export interface OrderBookProps {
  * A price ladder: asks above, bids below, a spread row between, and a depth bar behind each
  * level sized by its running total. It is a real table, so screen readers read it row by row.
  */
-export declare function OrderBook({ title, bids, asks, depth, valueFormat, sizeFormat, locale, flash, surface, motion, className, style, }: OrderBookProps): ReactElement;
+export declare function OrderBook({ title, bids, asks, levels, depth, valueFormat, sizeFormat, locale, flash, surface, loading, loadingStyle, motion, className, style, }: OrderBookProps): ReactElement;