minerva-design 1.3.0 → 1.4.0

package/dist/charts/react/orderbook.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"orderbook.cjs","names":["resolveLocale","useRef","createDepthChart","createOrderBook","createOrderBookHeatmap","createTimeAndSales","require_locale","require_depth","require_heatmap","require_ladder","require_tape","react","react_jsx_runtime","size","value","fallback","sameValue","a","b","v","i","ka","k","sameOptions","kb","localeOf","options","useWidget","containerRef","instanceRef","optionsRef","localeRef","handlersRef","handlers","container","instance","factory","offs","connect","off","locale","useBook","book","useTrades","previousRef","targetRef","addRef","add","replaceRef","replace","target","previous","trades","n","Frame","width","height","fallbackHeight","style","connectDepth","chart","h","r","DepthChart","ref","snapshot","deltas","range","connectLadder","OrderBook","lastPrice","price","connectHeatmap","heatmap","f","OrderBookHeatmap","list","connectTape","tape","p","TimeAndSales"],"sources":["../../../../charts/src/react/orderbook.tsx"],"sourcesContent":["// React components of the order book module (depth chart, order book\n// ladder, liquidity heatmap, time and sales), re-exported by index.ts. Each\n// one mounts its engine once; options are forwarded when they change and\n// streams go through the ref handle (`applyDeltas`, `addTrades`) without\n// re-rendering React.\n\nimport {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type CSSProperties,\n  type Ref,\n  type RefObject,\n} from \"react\";\nimport { resolveLocale } from \"../engine/locale\";\nimport { createDepthChart } from \"../engine/orderbook/depth\";\nimport { createOrderBookHeatmap } from \"../engine/orderbook/heatmap\";\nimport { createOrderBook } from \"../engine/orderbook/ladder\";\nimport { createTimeAndSales } from \"../engine/orderbook/tape\";\nimport type {\n  DepthChartHoverEvent,\n  DepthChartInstance,\n  DepthChartOptions,\n  MarketTrade,\n  OrderBookDelta,\n  OrderBookHeatmapHoverEvent,\n  OrderBookHeatmapInstance,\n  OrderBookHeatmapOptions,\n  OrderBookInstance,\n  OrderBookLevelEvent,\n  OrderBookOptions,\n  OrderBookSnapshot,\n  TimeAndSalesInstance,\n  TimeAndSalesOptions,\n  TimeAndSalesRowEvent,\n} from \"../engine/orderbook/types\";\nimport type { ChartRendererKind } from \"../engine/types\";\n\n/** Container props shared by the order book components */\nexport interface OrderBookWidgetProps {\n  /** Height of the widget; numbers are pixels */\n  height?: number | string;\n  /**\n   * Width of the widget; numbers are pixels\n   * @default \"100%\"\n   */\n  width?: number | string;\n  /** Class of the container */\n  className?: string;\n  /** Style of the container */\n  style?: CSSProperties;\n}\n\n/** Imperative handle of `DepthChart` */\nexport interface DepthChartHandle {\n  /** Replaces the book */\n  setBook(snapshot: OrderBookSnapshot): void;\n  /** Applies updates (size 0 removes a level); drawn once at the next frame */\n  applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;\n  /** Sets the visible range (fraction of the mid); `null` fits the book */\n  setRange(range: number | null): void;\n  /** The underlying engine instance (minerva-design/charts/core) */\n  getInstance(): DepthChartInstance | null;\n}\n\n/** Props of `DepthChart` */\nexport interface DepthChartProps\n  extends DepthChartOptions, OrderBookWidgetProps {\n  /** Book to draw, applied when the object changes (stream updates through the ref) */\n  book?: OrderBookSnapshot;\n  /** Pointer over the curves (`null` when it leaves) */\n  onHover?: (event: DepthChartHoverEvent | null) => void;\n  /** Click / tap on the curves */\n  onClick?: (event: DepthChartHoverEvent) => void;\n  /** The visible range changed by zooming (fraction of the mid) */\n  onRangeChange?: (range: number) => void;\n  /** Imperative handle: `setBook`, `applyDeltas`, `setRange` */\n  ref?: Ref<DepthChartHandle>;\n}\n\n/** Imperative handle of `OrderBook` */\nexport interface OrderBookHandle {\n  /** Replaces the book */\n  setBook(snapshot: OrderBookSnapshot): void;\n  /** Applies updates (size 0 removes a level); drawn once at the next frame */\n  applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;\n  /** Price of the spread row (the mid price when `null`) */\n  setLastPrice(price: number | null): void;\n  /** The underlying engine instance (minerva-design/charts/core) */\n  getInstance(): OrderBookInstance | null;\n}\n\n/** Props of `OrderBook` */\nexport interface OrderBookProps extends OrderBookOptions, OrderBookWidgetProps {\n  /** Book to draw, applied when the object changes (stream updates through the ref) */\n  book?: OrderBookSnapshot;\n  /** Price of the spread row, colored by its last move; the mid price when omitted */\n  lastPrice?: number | null;\n  /** Hovered row (`null` when the pointer leaves) */\n  onHover?: (level: OrderBookLevelEvent | null) => void;\n  /** Click / tap / Enter on a row (e.g. to fill a price in an order form) */\n  onLevelClick?: (level: OrderBookLevelEvent) => void;\n  /** Imperative handle: `setBook`, `applyDeltas`, `setLastPrice` */\n  ref?: Ref<OrderBookHandle>;\n}\n\n/** Imperative handle of `OrderBookHeatmap` */\nexport interface OrderBookHeatmapHandle {\n  /** Replaces the book (closes the columns up to its time) */\n  setBook(snapshot: OrderBookSnapshot): void;\n  /** Applies updates (closes the columns up to their time) */\n  applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;\n  /** Adds trades (bubbles) */\n  addTrades(trades: MarketTrade | readonly MarketTrade[]): void;\n  /** Follows the market again */\n  resetView(): void;\n  /** The underlying engine instance (minerva-design/charts/core) */\n  getInstance(): OrderBookHeatmapInstance | null;\n}\n\n/** Props of `OrderBookHeatmap` */\nexport interface OrderBookHeatmapProps\n  extends OrderBookHeatmapOptions, OrderBookWidgetProps {\n  /** Book, applied when the object changes (stream updates through the ref) */\n  book?: OrderBookSnapshot;\n  /** Trades; when the array grows, only the appended ones are added */\n  trades?: readonly MarketTrade[];\n  /** Hovered cell (`null` when the pointer leaves) */\n  onHover?: (event: OrderBookHeatmapHoverEvent | null) => void;\n  /** Backend in use (also after a GPU loss) */\n  onRendererChange?: (renderer: ChartRendererKind) => void;\n  /** `true` while the view follows the market, `false` after a zoom / pan */\n  onFollowChange?: (follow: boolean) => void;\n  /** Imperative handle: `setBook`, `applyDeltas`, `addTrades`, `resetView` */\n  ref?: Ref<OrderBookHeatmapHandle>;\n}\n\n/** Imperative handle of `TimeAndSales` */\nexport interface TimeAndSalesHandle {\n  /** Appends trades (oldest first) */\n  addTrades(trades: MarketTrade | readonly MarketTrade[]): void;\n  /** Replaces every trade */\n  setTrades(trades: readonly MarketTrade[]): void;\n  /** Removes every trade */\n  clear(): void;\n  /** Scrolls back to the newest trade and resumes */\n  scrollToLatest(): void;\n  /** The underlying engine instance (minerva-design/charts/core) */\n  getInstance(): TimeAndSalesInstance | null;\n}\n\n/** Props of `TimeAndSales` */\nexport interface TimeAndSalesProps\n  extends TimeAndSalesOptions, OrderBookWidgetProps {\n  /**\n   * Trades, oldest first; when the array grows, only the appended ones are\n   * added (other changes replace the tape)\n   */\n  trades?: readonly MarketTrade[];\n  /** Hovered row (`null` when the pointer leaves) */\n  onHover?: (row: TimeAndSalesRowEvent | null) => void;\n  /** Click / tap / Enter on a row */\n  onTradeClick?: (row: TimeAndSalesRowEvent) => void;\n  /** The tape paused (pointer over it, scrolled down) or resumed */\n  onPause?: (paused: boolean) => void;\n  /** Imperative handle: `addTrades`, `setTrades`, `clear`, `scrollToLatest` */\n  ref?: Ref<TimeAndSalesHandle>;\n}\n\n// ------------------------------------------------------------------ shared\n\nconst size = (value: number | string | undefined, fallback: string) =>\n  value === undefined\n    ? fallback\n    : typeof value === \"number\"\n      ? `${value}px`\n      : value;\n\n/** Identical values, or inline arrays / objects with identical items */\nconst sameValue = (a: unknown, b: unknown): boolean => {\n  if (a === b) return true;\n  if (Array.isArray(a) && Array.isArray(b))\n    return a.length === b.length && a.every((v, i) => v === b[i]);\n  if (\n    typeof a !== \"object\" ||\n    typeof b !== \"object\" ||\n    a === null ||\n    b === null ||\n    Object.getPrototypeOf(a) !== Object.prototype ||\n    Object.getPrototypeOf(b) !== Object.prototype\n  )\n    return false;\n  const ka = Object.keys(a);\n  return (\n    ka.length === Object.keys(b).length &&\n    ka.every(\n      (k) =>\n        (a as Record<string, unknown>)[k] === (b as Record<string, unknown>)[k],\n    )\n  );\n};\n\n/** Same options, one level deep (inline `labels={{ … }}` stays equal) */\nconst sameOptions = (a: object, b: object): boolean => {\n  const ka = Object.keys(a).filter(\n    (k) => (a as Record<string, unknown>)[k] !== undefined,\n  );\n  const kb = Object.keys(b).filter(\n    (k) => (b as Record<string, unknown>)[k] !== undefined,\n  );\n  return (\n    ka.length === kb.length &&\n    ka.every((k) =>\n      sameValue(\n        (a as Record<string, unknown>)[k],\n        (b as Record<string, unknown>)[k],\n      ),\n    )\n  );\n};\n\ninterface Widget<O> {\n  setOptions(options: O): void;\n  destroy(): void;\n}\n\n/** Locale the engine resolves for `options` (the page language by default) */\nconst localeOf = (options: object): string =>\n  resolveLocale((options as { locale?: string }).locale);\n\n/**\n * Mounts an engine widget once, forwards option changes and subscribes the\n * handlers (read through a ref: inline callbacks never re-subscribe). The\n * options are applied again when the page language (`<html lang>`) changed,\n * so the built-in texts follow a language switch.\n */\nfunction useWidget<O extends object, I extends Widget<O>, H>(\n  factory: (container: HTMLElement, options: O) => I,\n  options: O,\n  handlers: H,\n  connect: (instance: I, handlers: () => H) => (() => void)[],\n): {\n  containerRef: RefObject<HTMLDivElement | null>;\n  instanceRef: RefObject<I | null>;\n} {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const instanceRef = useRef<I | null>(null);\n  const optionsRef = useRef(options);\n  const localeRef = useRef(\"\");\n  const handlersRef = useRef(handlers);\n\n  useEffect(() => {\n    handlersRef.current = handlers;\n  });\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n    localeRef.current = localeOf(optionsRef.current);\n    const instance = factory(container, optionsRef.current);\n    instanceRef.current = instance;\n    const offs = connect(instance, () => handlersRef.current);\n    return () => {\n      offs.forEach((off) => off());\n      instance.destroy();\n      instanceRef.current = null;\n    };\n  }, [factory, connect]);\n\n  useEffect(() => {\n    const locale = localeOf(options);\n    if (\n      sameOptions(optionsRef.current, options) &&\n      locale === localeRef.current\n    )\n      return;\n    optionsRef.current = options;\n    localeRef.current = locale;\n    instanceRef.current?.setOptions(options);\n  });\n\n  return { containerRef, instanceRef };\n}\n\n/** Applies `book` when the object changes */\nfunction useBook(\n  instanceRef: RefObject<{ setBook(s: OrderBookSnapshot): void } | null>,\n  book: OrderBookSnapshot | undefined,\n) {\n  useEffect(() => {\n    if (book) instanceRef.current?.setBook(book);\n  }, [instanceRef, book]);\n}\n\n/** Adds the trades appended to `trades`; `replace` gets any other change */\nfunction useTrades(\n  instanceRef: RefObject<object | null>,\n  trades: readonly MarketTrade[] | undefined,\n  add: (trades: readonly MarketTrade[]) => void,\n  replace: (trades: readonly MarketTrade[]) => void,\n) {\n  const previousRef = useRef<readonly MarketTrade[] | undefined>(undefined);\n  /** Instance that received `previousRef` (a remount starts over) */\n  const targetRef = useRef<object | null>(null);\n  const addRef = useRef(add);\n  const replaceRef = useRef(replace);\n  useEffect(() => {\n    addRef.current = add;\n    replaceRef.current = replace;\n  });\n  useEffect(() => {\n    const target = instanceRef.current;\n    const previous =\n      targetRef.current === target ? previousRef.current : undefined;\n    previousRef.current = trades;\n    targetRef.current = target;\n    if (!trades || trades === previous) return;\n    const n = previous?.length ?? 0;\n    // a grown array (same items in front): only the new ones\n    if (\n      previous &&\n      n > 0 &&\n      trades.length >= n &&\n      trades[n - 1] === previous[n - 1] &&\n      trades[0] === previous[0]\n    ) {\n      if (trades.length > n) addRef.current(trades.slice(n));\n      return;\n    }\n    replaceRef.current(trades);\n  }, [instanceRef, trades]);\n}\n\nfunction Frame({\n  containerRef,\n  height,\n  width,\n  className,\n  style,\n  fallbackHeight,\n}: OrderBookWidgetProps & {\n  containerRef: RefObject<HTMLDivElement | null>;\n  fallbackHeight: string;\n}) {\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"relative\",\n        width: size(width, \"100%\"),\n        height: size(height, fallbackHeight),\n        ...style,\n      }}\n    >\n      <div ref={containerRef} style={{ position: \"absolute\", inset: 0 }} />\n    </div>\n  );\n}\n\n// -------------------------------------------------------------- depth chart\n\ninterface DepthHandlers {\n  onHover?: DepthChartProps[\"onHover\"];\n  onClick?: DepthChartProps[\"onClick\"];\n  onRangeChange?: DepthChartProps[\"onRangeChange\"];\n}\n\nconst connectDepth = (chart: DepthChartInstance, h: () => DepthHandlers) => [\n  chart.on(\"hover\", (e) => h().onHover?.(e)),\n  chart.on(\"click\", (e) => h().onClick?.(e)),\n  chart.on(\"range\", (r) => h().onRangeChange?.(r)),\n];\n\n/**\n * Cumulative depth of an order book: stepped bid / ask areas around the mid\n * price, mirrored hover readout, zoom around the mid, eased updates.\n */\nexport function DepthChart({\n  height,\n  width,\n  className,\n  style,\n  book,\n  onHover,\n  onClick,\n  onRangeChange,\n  ref,\n  ...options\n}: DepthChartProps) {\n  const { containerRef, instanceRef } = useWidget(\n    createDepthChart,\n    options,\n    { onHover, onClick, onRangeChange },\n    connectDepth,\n  );\n  useBook(instanceRef, book);\n  useImperativeHandle(\n    ref,\n    () => ({\n      setBook: (snapshot) => instanceRef.current?.setBook(snapshot),\n      applyDeltas: (deltas) => instanceRef.current?.applyDeltas(deltas),\n      setRange: (range) => instanceRef.current?.setRange(range),\n      getInstance: () => instanceRef.current,\n    }),\n    [instanceRef],\n  );\n  return (\n    <Frame\n      containerRef={containerRef}\n      height={height}\n      width={width}\n      className={className}\n      style={style}\n      fallbackHeight=\"320px\"\n    />\n  );\n}\n\n// --------------------------------------------------------------- order book\n\ninterface LadderHandlers {\n  onHover?: OrderBookProps[\"onHover\"];\n  onLevelClick?: OrderBookProps[\"onLevelClick\"];\n}\n\nconst connectLadder = (book: OrderBookInstance, h: () => LadderHandlers) => [\n  book.on(\"hover\", (e) => h().onHover?.(e)),\n  book.on(\"levelClick\", (e) => h().onLevelClick?.(e)),\n];\n\n/**\n * Order book ladder: asks above the spread row, bids below, with depth\n * bars, price grouping, change flashes and large order highlight.\n */\nexport function OrderBook({\n  height,\n  width,\n  className,\n  style,\n  book,\n  lastPrice,\n  onHover,\n  onLevelClick,\n  ref,\n  ...options\n}: OrderBookProps) {\n  const { containerRef, instanceRef } = useWidget(\n    createOrderBook,\n    options,\n    { onHover, onLevelClick },\n    connectLadder,\n  );\n  useBook(instanceRef, book);\n  useEffect(() => {\n    if (lastPrice !== undefined) instanceRef.current?.setLastPrice(lastPrice);\n  }, [instanceRef, lastPrice]);\n  useImperativeHandle(\n    ref,\n    () => ({\n      setBook: (snapshot) => instanceRef.current?.setBook(snapshot),\n      applyDeltas: (deltas) => instanceRef.current?.applyDeltas(deltas),\n      setLastPrice: (price) => instanceRef.current?.setLastPrice(price),\n      getInstance: () => instanceRef.current,\n    }),\n    [instanceRef],\n  );\n  return (\n    <Frame\n      containerRef={containerRef}\n      height={height}\n      width={width}\n      className={className}\n      style={style}\n      fallbackHeight=\"420px\"\n    />\n  );\n}\n\n// ------------------------------------------------------------------ heatmap\n\ninterface HeatmapHandlers {\n  onHover?: OrderBookHeatmapProps[\"onHover\"];\n  onRendererChange?: OrderBookHeatmapProps[\"onRendererChange\"];\n  onFollowChange?: OrderBookHeatmapProps[\"onFollowChange\"];\n}\n\nconst connectHeatmap = (\n  heatmap: OrderBookHeatmapInstance,\n  h: () => HeatmapHandlers,\n) => [\n  heatmap.on(\"hover\", (e) => h().onHover?.(e)),\n  heatmap.on(\"renderer\", (r) => h().onRendererChange?.(r)),\n  heatmap.on(\"follow\", (f) => h().onFollowChange?.(f)),\n];\n\n/**\n * Liquidity heatmap: resting size over time and price drawn by the GPU,\n * best bid / ask lines and trades as bubbles sized by volume.\n */\nexport function OrderBookHeatmap({\n  height,\n  width,\n  className,\n  style,\n  book,\n  trades,\n  onHover,\n  onRendererChange,\n  onFollowChange,\n  ref,\n  ...options\n}: OrderBookHeatmapProps) {\n  const { containerRef, instanceRef } = useWidget(\n    createOrderBookHeatmap,\n    options,\n    { onHover, onRendererChange, onFollowChange },\n    connectHeatmap,\n  );\n  useBook(instanceRef, book);\n  useTrades(\n    instanceRef,\n    trades,\n    (list) => instanceRef.current?.addTrades(list),\n    (list) => instanceRef.current?.addTrades(list),\n  );\n  useImperativeHandle(\n    ref,\n    () => ({\n      setBook: (snapshot) => instanceRef.current?.setBook(snapshot),\n      applyDeltas: (deltas) => instanceRef.current?.applyDeltas(deltas),\n      addTrades: (list) => instanceRef.current?.addTrades(list),\n      resetView: () => instanceRef.current?.resetView(),\n      getInstance: () => instanceRef.current,\n    }),\n    [instanceRef],\n  );\n  return (\n    <Frame\n      containerRef={containerRef}\n      height={height}\n      width={width}\n      className={className}\n      style={style}\n      fallbackHeight=\"360px\"\n    />\n  );\n}\n\n// ----------------------------------------------------------- time and sales\n\ninterface TapeHandlers {\n  onHover?: TimeAndSalesProps[\"onHover\"];\n  onTradeClick?: TimeAndSalesProps[\"onTradeClick\"];\n  onPause?: TimeAndSalesProps[\"onPause\"];\n}\n\nconst connectTape = (tape: TimeAndSalesInstance, h: () => TapeHandlers) => [\n  tape.on(\"hover\", (e) => h().onHover?.(e)),\n  tape.on(\"tradeClick\", (e) => h().onTradeClick?.(e)),\n  tape.on(\"pause\", (p) => h().onPause?.(p)),\n];\n\n/**\n * Time and sales tape: newest trades on top, virtualized (hundreds of\n * thousands of rows), large trades highlighted, paused while hovered.\n */\nexport function TimeAndSales({\n  height,\n  width,\n  className,\n  style,\n  trades,\n  onHover,\n  onTradeClick,\n  onPause,\n  ref,\n  ...options\n}: TimeAndSalesProps) {\n  const { containerRef, instanceRef } = useWidget(\n    createTimeAndSales,\n    options,\n    { onHover, onTradeClick, onPause },\n    connectTape,\n  );\n  useTrades(\n    instanceRef,\n    trades,\n    (list) => instanceRef.current?.addTrades(list),\n    (list) => instanceRef.current?.setTrades(list),\n  );\n  useImperativeHandle(\n    ref,\n    () => ({\n      addTrades: (list) => instanceRef.current?.addTrades(list),\n      setTrades: (list) => instanceRef.current?.setTrades(list),\n      clear: () => instanceRef.current?.clear(),\n      scrollToLatest: () => instanceRef.current?.scrollToLatest(),\n      getInstance: () => instanceRef.current,\n    }),\n    [instanceRef],\n  );\n  return (\n    <Frame\n      containerRef={containerRef}\n      height={height}\n      width={width}\n      className={className}\n      style={style}\n      fallbackHeight=\"360px\"\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/charts/react/orderbook.d.cts

@@ -0,0 +1,142 @@
+import { CSSProperties, Ref } from 'react';
+import { DepthChartHoverEvent, DepthChartInstance, DepthChartOptions, MarketTrade, OrderBookDelta, OrderBookHeatmapHoverEvent, OrderBookHeatmapInstance, OrderBookHeatmapOptions, OrderBookInstance, OrderBookLevelEvent, OrderBookOptions, OrderBookSnapshot, TimeAndSalesInstance, TimeAndSalesOptions, TimeAndSalesRowEvent } from '../engine/orderbook/types.cjs';
+import { ChartRendererKind } from '../engine/types.cjs';
+/** Container props shared by the order book components */
+export interface OrderBookWidgetProps {
+    /** Height of the widget; numbers are pixels */
+    height?: number | string;
+    /**
+     * Width of the widget; numbers are pixels
+     * @default "100%"
+     */
+    width?: number | string;
+    /** Class of the container */
+    className?: string;
+    /** Style of the container */
+    style?: CSSProperties;
+}
+/** Imperative handle of `DepthChart` */
+export interface DepthChartHandle {
+    /** Replaces the book */
+    setBook(snapshot: OrderBookSnapshot): void;
+    /** Applies updates (size 0 removes a level); drawn once at the next frame */
+    applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;
+    /** Sets the visible range (fraction of the mid); `null` fits the book */
+    setRange(range: number | null): void;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): DepthChartInstance | null;
+}
+/** Props of `DepthChart` */
+export interface DepthChartProps extends DepthChartOptions, OrderBookWidgetProps {
+    /** Book to draw, applied when the object changes (stream updates through the ref) */
+    book?: OrderBookSnapshot;
+    /** Pointer over the curves (`null` when it leaves) */
+    onHover?: (event: DepthChartHoverEvent | null) => void;
+    /** Click / tap on the curves */
+    onClick?: (event: DepthChartHoverEvent) => void;
+    /** The visible range changed by zooming (fraction of the mid) */
+    onRangeChange?: (range: number) => void;
+    /** Imperative handle: `setBook`, `applyDeltas`, `setRange` */
+    ref?: Ref<DepthChartHandle>;
+}
+/** Imperative handle of `OrderBook` */
+export interface OrderBookHandle {
+    /** Replaces the book */
+    setBook(snapshot: OrderBookSnapshot): void;
+    /** Applies updates (size 0 removes a level); drawn once at the next frame */
+    applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;
+    /** Price of the spread row (the mid price when `null`) */
+    setLastPrice(price: number | null): void;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): OrderBookInstance | null;
+}
+/** Props of `OrderBook` */
+export interface OrderBookProps extends OrderBookOptions, OrderBookWidgetProps {
+    /** Book to draw, applied when the object changes (stream updates through the ref) */
+    book?: OrderBookSnapshot;
+    /** Price of the spread row, colored by its last move; the mid price when omitted */
+    lastPrice?: number | null;
+    /** Hovered row (`null` when the pointer leaves) */
+    onHover?: (level: OrderBookLevelEvent | null) => void;
+    /** Click / tap / Enter on a row (e.g. to fill a price in an order form) */
+    onLevelClick?: (level: OrderBookLevelEvent) => void;
+    /** Imperative handle: `setBook`, `applyDeltas`, `setLastPrice` */
+    ref?: Ref<OrderBookHandle>;
+}
+/** Imperative handle of `OrderBookHeatmap` */
+export interface OrderBookHeatmapHandle {
+    /** Replaces the book (closes the columns up to its time) */
+    setBook(snapshot: OrderBookSnapshot): void;
+    /** Applies updates (closes the columns up to their time) */
+    applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;
+    /** Adds trades (bubbles) */
+    addTrades(trades: MarketTrade | readonly MarketTrade[]): void;
+    /** Follows the market again */
+    resetView(): void;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): OrderBookHeatmapInstance | null;
+}
+/** Props of `OrderBookHeatmap` */
+export interface OrderBookHeatmapProps extends OrderBookHeatmapOptions, OrderBookWidgetProps {
+    /** Book, applied when the object changes (stream updates through the ref) */
+    book?: OrderBookSnapshot;
+    /** Trades; when the array grows, only the appended ones are added */
+    trades?: readonly MarketTrade[];
+    /** Hovered cell (`null` when the pointer leaves) */
+    onHover?: (event: OrderBookHeatmapHoverEvent | null) => void;
+    /** Backend in use (also after a GPU loss) */
+    onRendererChange?: (renderer: ChartRendererKind) => void;
+    /** `true` while the view follows the market, `false` after a zoom / pan */
+    onFollowChange?: (follow: boolean) => void;
+    /** Imperative handle: `setBook`, `applyDeltas`, `addTrades`, `resetView` */
+    ref?: Ref<OrderBookHeatmapHandle>;
+}
+/** Imperative handle of `TimeAndSales` */
+export interface TimeAndSalesHandle {
+    /** Appends trades (oldest first) */
+    addTrades(trades: MarketTrade | readonly MarketTrade[]): void;
+    /** Replaces every trade */
+    setTrades(trades: readonly MarketTrade[]): void;
+    /** Removes every trade */
+    clear(): void;
+    /** Scrolls back to the newest trade and resumes */
+    scrollToLatest(): void;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): TimeAndSalesInstance | null;
+}
+/** Props of `TimeAndSales` */
+export interface TimeAndSalesProps extends TimeAndSalesOptions, OrderBookWidgetProps {
+    /**
+     * Trades, oldest first; when the array grows, only the appended ones are
+     * added (other changes replace the tape)
+     */
+    trades?: readonly MarketTrade[];
+    /** Hovered row (`null` when the pointer leaves) */
+    onHover?: (row: TimeAndSalesRowEvent | null) => void;
+    /** Click / tap / Enter on a row */
+    onTradeClick?: (row: TimeAndSalesRowEvent) => void;
+    /** The tape paused (pointer over it, scrolled down) or resumed */
+    onPause?: (paused: boolean) => void;
+    /** Imperative handle: `addTrades`, `setTrades`, `clear`, `scrollToLatest` */
+    ref?: Ref<TimeAndSalesHandle>;
+}
+/**
+ * Cumulative depth of an order book: stepped bid / ask areas around the mid
+ * price, mirrored hover readout, zoom around the mid, eased updates.
+ */
+export declare function DepthChart({ height, width, className, style, book, onHover, onClick, onRangeChange, ref, ...options }: DepthChartProps): import('react').JSX.Element;
+/**
+ * Order book ladder: asks above the spread row, bids below, with depth
+ * bars, price grouping, change flashes and large order highlight.
+ */
+export declare function OrderBook({ height, width, className, style, book, lastPrice, onHover, onLevelClick, ref, ...options }: OrderBookProps): import('react').JSX.Element;
+/**
+ * Liquidity heatmap: resting size over time and price drawn by the GPU,
+ * best bid / ask lines and trades as bubbles sized by volume.
+ */
+export declare function OrderBookHeatmap({ height, width, className, style, book, trades, onHover, onRendererChange, onFollowChange, ref, ...options }: OrderBookHeatmapProps): import('react').JSX.Element;
+/**
+ * Time and sales tape: newest trades on top, virtualized (hundreds of
+ * thousands of rows), large trades highlighted, paused while hovered.
+ */
+export declare function TimeAndSales({ height, width, className, style, trades, onHover, onTradeClick, onPause, ref, ...options }: TimeAndSalesProps): import('react').JSX.Element;

package/dist/charts/react/orderbook.d.ts

@@ -0,0 +1,142 @@
+import { CSSProperties, Ref } from 'react';
+import { DepthChartHoverEvent, DepthChartInstance, DepthChartOptions, MarketTrade, OrderBookDelta, OrderBookHeatmapHoverEvent, OrderBookHeatmapInstance, OrderBookHeatmapOptions, OrderBookInstance, OrderBookLevelEvent, OrderBookOptions, OrderBookSnapshot, TimeAndSalesInstance, TimeAndSalesOptions, TimeAndSalesRowEvent } from '../engine/orderbook/types.js';
+import { ChartRendererKind } from '../engine/types.js';
+/** Container props shared by the order book components */
+export interface OrderBookWidgetProps {
+    /** Height of the widget; numbers are pixels */
+    height?: number | string;
+    /**
+     * Width of the widget; numbers are pixels
+     * @default "100%"
+     */
+    width?: number | string;
+    /** Class of the container */
+    className?: string;
+    /** Style of the container */
+    style?: CSSProperties;
+}
+/** Imperative handle of `DepthChart` */
+export interface DepthChartHandle {
+    /** Replaces the book */
+    setBook(snapshot: OrderBookSnapshot): void;
+    /** Applies updates (size 0 removes a level); drawn once at the next frame */
+    applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;
+    /** Sets the visible range (fraction of the mid); `null` fits the book */
+    setRange(range: number | null): void;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): DepthChartInstance | null;
+}
+/** Props of `DepthChart` */
+export interface DepthChartProps extends DepthChartOptions, OrderBookWidgetProps {
+    /** Book to draw, applied when the object changes (stream updates through the ref) */
+    book?: OrderBookSnapshot;
+    /** Pointer over the curves (`null` when it leaves) */
+    onHover?: (event: DepthChartHoverEvent | null) => void;
+    /** Click / tap on the curves */
+    onClick?: (event: DepthChartHoverEvent) => void;
+    /** The visible range changed by zooming (fraction of the mid) */
+    onRangeChange?: (range: number) => void;
+    /** Imperative handle: `setBook`, `applyDeltas`, `setRange` */
+    ref?: Ref<DepthChartHandle>;
+}
+/** Imperative handle of `OrderBook` */
+export interface OrderBookHandle {
+    /** Replaces the book */
+    setBook(snapshot: OrderBookSnapshot): void;
+    /** Applies updates (size 0 removes a level); drawn once at the next frame */
+    applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;
+    /** Price of the spread row (the mid price when `null`) */
+    setLastPrice(price: number | null): void;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): OrderBookInstance | null;
+}
+/** Props of `OrderBook` */
+export interface OrderBookProps extends OrderBookOptions, OrderBookWidgetProps {
+    /** Book to draw, applied when the object changes (stream updates through the ref) */
+    book?: OrderBookSnapshot;
+    /** Price of the spread row, colored by its last move; the mid price when omitted */
+    lastPrice?: number | null;
+    /** Hovered row (`null` when the pointer leaves) */
+    onHover?: (level: OrderBookLevelEvent | null) => void;
+    /** Click / tap / Enter on a row (e.g. to fill a price in an order form) */
+    onLevelClick?: (level: OrderBookLevelEvent) => void;
+    /** Imperative handle: `setBook`, `applyDeltas`, `setLastPrice` */
+    ref?: Ref<OrderBookHandle>;
+}
+/** Imperative handle of `OrderBookHeatmap` */
+export interface OrderBookHeatmapHandle {
+    /** Replaces the book (closes the columns up to its time) */
+    setBook(snapshot: OrderBookSnapshot): void;
+    /** Applies updates (closes the columns up to their time) */
+    applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;
+    /** Adds trades (bubbles) */
+    addTrades(trades: MarketTrade | readonly MarketTrade[]): void;
+    /** Follows the market again */
+    resetView(): void;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): OrderBookHeatmapInstance | null;
+}
+/** Props of `OrderBookHeatmap` */
+export interface OrderBookHeatmapProps extends OrderBookHeatmapOptions, OrderBookWidgetProps {
+    /** Book, applied when the object changes (stream updates through the ref) */
+    book?: OrderBookSnapshot;
+    /** Trades; when the array grows, only the appended ones are added */
+    trades?: readonly MarketTrade[];
+    /** Hovered cell (`null` when the pointer leaves) */
+    onHover?: (event: OrderBookHeatmapHoverEvent | null) => void;
+    /** Backend in use (also after a GPU loss) */
+    onRendererChange?: (renderer: ChartRendererKind) => void;
+    /** `true` while the view follows the market, `false` after a zoom / pan */
+    onFollowChange?: (follow: boolean) => void;
+    /** Imperative handle: `setBook`, `applyDeltas`, `addTrades`, `resetView` */
+    ref?: Ref<OrderBookHeatmapHandle>;
+}
+/** Imperative handle of `TimeAndSales` */
+export interface TimeAndSalesHandle {
+    /** Appends trades (oldest first) */
+    addTrades(trades: MarketTrade | readonly MarketTrade[]): void;
+    /** Replaces every trade */
+    setTrades(trades: readonly MarketTrade[]): void;
+    /** Removes every trade */
+    clear(): void;
+    /** Scrolls back to the newest trade and resumes */
+    scrollToLatest(): void;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): TimeAndSalesInstance | null;
+}
+/** Props of `TimeAndSales` */
+export interface TimeAndSalesProps extends TimeAndSalesOptions, OrderBookWidgetProps {
+    /**
+     * Trades, oldest first; when the array grows, only the appended ones are
+     * added (other changes replace the tape)
+     */
+    trades?: readonly MarketTrade[];
+    /** Hovered row (`null` when the pointer leaves) */
+    onHover?: (row: TimeAndSalesRowEvent | null) => void;
+    /** Click / tap / Enter on a row */
+    onTradeClick?: (row: TimeAndSalesRowEvent) => void;
+    /** The tape paused (pointer over it, scrolled down) or resumed */
+    onPause?: (paused: boolean) => void;
+    /** Imperative handle: `addTrades`, `setTrades`, `clear`, `scrollToLatest` */
+    ref?: Ref<TimeAndSalesHandle>;
+}
+/**
+ * Cumulative depth of an order book: stepped bid / ask areas around the mid
+ * price, mirrored hover readout, zoom around the mid, eased updates.
+ */
+export declare function DepthChart({ height, width, className, style, book, onHover, onClick, onRangeChange, ref, ...options }: DepthChartProps): import('react').JSX.Element;
+/**
+ * Order book ladder: asks above the spread row, bids below, with depth
+ * bars, price grouping, change flashes and large order highlight.
+ */
+export declare function OrderBook({ height, width, className, style, book, lastPrice, onHover, onLevelClick, ref, ...options }: OrderBookProps): import('react').JSX.Element;
+/**
+ * Liquidity heatmap: resting size over time and price drawn by the GPU,
+ * best bid / ask lines and trades as bubbles sized by volume.
+ */
+export declare function OrderBookHeatmap({ height, width, className, style, book, trades, onHover, onRendererChange, onFollowChange, ref, ...options }: OrderBookHeatmapProps): import('react').JSX.Element;
+/**
+ * Time and sales tape: newest trades on top, virtualized (hundreds of
+ * thousands of rows), large trades highlighted, paused while hovered.
+ */
+export declare function TimeAndSales({ height, width, className, style, trades, onHover, onTradeClick, onPause, ref, ...options }: TimeAndSalesProps): import('react').JSX.Element;

package/dist/charts/react/orderbook.js

@@ -0,0 +1,182 @@
+"use client";
+import { resolveLocale as e } from "../engine/locale.js";
+import { createDepthChart as t } from "../engine/orderbook/depth.js";
+import { createOrderBookHeatmap as n } from "../engine/orderbook/heatmap.js";
+import { createOrderBook as r } from "../engine/orderbook/ladder.js";
+import { createTimeAndSales as i } from "../engine/orderbook/tape.js";
+import { useEffect as a, useImperativeHandle as o, useRef as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/react/orderbook.tsx
+var l = (e, t) => e === void 0 ? t : typeof e == "number" ? `${e}px` : e, u = (e, t) => {
+	if (e === t) return !0;
+	if (Array.isArray(e) && Array.isArray(t)) return e.length === t.length && e.every((e, n) => e === t[n]);
+	if (typeof e != "object" || typeof t != "object" || e === null || t === null || Object.getPrototypeOf(e) !== Object.prototype || Object.getPrototypeOf(t) !== Object.prototype) return !1;
+	let n = Object.keys(e);
+	return n.length === Object.keys(t).length && n.every((n) => e[n] === t[n]);
+}, d = (e, t) => {
+	let n = Object.keys(e).filter((t) => e[t] !== void 0), r = Object.keys(t).filter((e) => t[e] !== void 0);
+	return n.length === r.length && n.every((n) => u(e[n], t[n]));
+}, f = (t) => e(t.locale);
+function p(e, t, n, r) {
+	let i = s(null), o = s(null), c = s(t), l = s(""), u = s(n);
+	return a(() => {
+		u.current = n;
+	}), a(() => {
+		let t = i.current;
+		if (!t) return;
+		l.current = f(c.current);
+		let n = e(t, c.current);
+		o.current = n;
+		let a = r(n, () => u.current);
+		return () => {
+			a.forEach((e) => e()), n.destroy(), o.current = null;
+		};
+	}, [e, r]), a(() => {
+		let e = f(t);
+		d(c.current, t) && e === l.current || (c.current = t, l.current = e, o.current?.setOptions(t));
+	}), {
+		containerRef: i,
+		instanceRef: o
+	};
+}
+function m(e, t) {
+	a(() => {
+		t && e.current?.setBook(t);
+	}, [e, t]);
+}
+function h(e, t, n, r) {
+	let i = s(void 0), o = s(null), c = s(n), l = s(r);
+	a(() => {
+		c.current = n, l.current = r;
+	}), a(() => {
+		let n = e.current, r = o.current === n ? i.current : void 0;
+		if (i.current = t, o.current = n, !t || t === r) return;
+		let a = r?.length ?? 0;
+		if (r && a > 0 && t.length >= a && t[a - 1] === r[a - 1] && t[0] === r[0]) {
+			t.length > a && c.current(t.slice(a));
+			return;
+		}
+		l.current(t);
+	}, [e, t]);
+}
+function g({ containerRef: e, height: t, width: n, className: r, style: i, fallbackHeight: a }) {
+	return /* @__PURE__ */ c("div", {
+		className: r,
+		style: {
+			position: "relative",
+			width: l(n, "100%"),
+			height: l(t, a),
+			...i
+		},
+		children: /* @__PURE__ */ c("div", {
+			ref: e,
+			style: {
+				position: "absolute",
+				inset: 0
+			}
+		})
+	});
+}
+var _ = (e, t) => [
+	e.on("hover", (e) => t().onHover?.(e)),
+	e.on("click", (e) => t().onClick?.(e)),
+	e.on("range", (e) => t().onRangeChange?.(e))
+];
+function v({ height: e, width: n, className: r, style: i, book: a, onHover: s, onClick: l, onRangeChange: u, ref: d, ...f }) {
+	let { containerRef: h, instanceRef: v } = p(t, f, {
+		onHover: s,
+		onClick: l,
+		onRangeChange: u
+	}, _);
+	return m(v, a), o(d, () => ({
+		setBook: (e) => v.current?.setBook(e),
+		applyDeltas: (e) => v.current?.applyDeltas(e),
+		setRange: (e) => v.current?.setRange(e),
+		getInstance: () => v.current
+	}), [v]), /* @__PURE__ */ c(g, {
+		containerRef: h,
+		height: e,
+		width: n,
+		className: r,
+		style: i,
+		fallbackHeight: "320px"
+	});
+}
+var y = (e, t) => [e.on("hover", (e) => t().onHover?.(e)), e.on("levelClick", (e) => t().onLevelClick?.(e))];
+function b({ height: e, width: t, className: n, style: i, book: s, lastPrice: l, onHover: u, onLevelClick: d, ref: f, ...h }) {
+	let { containerRef: _, instanceRef: v } = p(r, h, {
+		onHover: u,
+		onLevelClick: d
+	}, y);
+	return m(v, s), a(() => {
+		l !== void 0 && v.current?.setLastPrice(l);
+	}, [v, l]), o(f, () => ({
+		setBook: (e) => v.current?.setBook(e),
+		applyDeltas: (e) => v.current?.applyDeltas(e),
+		setLastPrice: (e) => v.current?.setLastPrice(e),
+		getInstance: () => v.current
+	}), [v]), /* @__PURE__ */ c(g, {
+		containerRef: _,
+		height: e,
+		width: t,
+		className: n,
+		style: i,
+		fallbackHeight: "420px"
+	});
+}
+var x = (e, t) => [
+	e.on("hover", (e) => t().onHover?.(e)),
+	e.on("renderer", (e) => t().onRendererChange?.(e)),
+	e.on("follow", (e) => t().onFollowChange?.(e))
+];
+function S({ height: e, width: t, className: r, style: i, book: a, trades: s, onHover: l, onRendererChange: u, onFollowChange: d, ref: f, ..._ }) {
+	let { containerRef: v, instanceRef: y } = p(n, _, {
+		onHover: l,
+		onRendererChange: u,
+		onFollowChange: d
+	}, x);
+	return m(y, a), h(y, s, (e) => y.current?.addTrades(e), (e) => y.current?.addTrades(e)), o(f, () => ({
+		setBook: (e) => y.current?.setBook(e),
+		applyDeltas: (e) => y.current?.applyDeltas(e),
+		addTrades: (e) => y.current?.addTrades(e),
+		resetView: () => y.current?.resetView(),
+		getInstance: () => y.current
+	}), [y]), /* @__PURE__ */ c(g, {
+		containerRef: v,
+		height: e,
+		width: t,
+		className: r,
+		style: i,
+		fallbackHeight: "360px"
+	});
+}
+var C = (e, t) => [
+	e.on("hover", (e) => t().onHover?.(e)),
+	e.on("tradeClick", (e) => t().onTradeClick?.(e)),
+	e.on("pause", (e) => t().onPause?.(e))
+];
+function w({ height: e, width: t, className: n, style: r, trades: a, onHover: s, onTradeClick: l, onPause: u, ref: d, ...f }) {
+	let { containerRef: m, instanceRef: _ } = p(i, f, {
+		onHover: s,
+		onTradeClick: l,
+		onPause: u
+	}, C);
+	return h(_, a, (e) => _.current?.addTrades(e), (e) => _.current?.setTrades(e)), o(d, () => ({
+		addTrades: (e) => _.current?.addTrades(e),
+		setTrades: (e) => _.current?.setTrades(e),
+		clear: () => _.current?.clear(),
+		scrollToLatest: () => _.current?.scrollToLatest(),
+		getInstance: () => _.current
+	}), [_]), /* @__PURE__ */ c(g, {
+		containerRef: m,
+		height: e,
+		width: t,
+		className: n,
+		style: r,
+		fallbackHeight: "360px"
+	});
+}
+//#endregion
+export { v as DepthChart, b as OrderBook, S as OrderBookHeatmap, w as TimeAndSales };
+
+//# sourceMappingURL=orderbook.js.map

package/dist/charts/react/orderbook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"orderbook.js","names":["size","value","fallback","sameValue","a","b","v","i","ka","k","sameOptions","kb","localeOf","resolveLocale","options","useWidget","containerRef","useRef","instanceRef","optionsRef","localeRef","handlersRef","handlers","useEffect","container","instance","factory","offs","connect","off","locale","useBook","book","useTrades","previousRef","targetRef","addRef","add","replaceRef","replace","target","previous","trades","n","Frame","width","height","fallbackHeight","style","connectDepth","chart","h","r","DepthChart","createDepthChart","useImperativeHandle","ref","snapshot","deltas","range","connectLadder","OrderBook","createOrderBook","lastPrice","price","connectHeatmap","heatmap","f","OrderBookHeatmap","createOrderBookHeatmap","list","connectTape","tape","p","TimeAndSales","createTimeAndSales"],"sources":["../../../../charts/src/react/orderbook.tsx"],"sourcesContent":["// React components of the order book module (depth chart, order book\n// ladder, liquidity heatmap, time and sales), re-exported by index.ts. Each\n// one mounts its engine once; options are forwarded when they change and\n// streams go through the ref handle (`applyDeltas`, `addTrades`) without\n// re-rendering React.\n\nimport {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type CSSProperties,\n  type Ref,\n  type RefObject,\n} from \"react\";\nimport { resolveLocale } from \"../engine/locale\";\nimport { createDepthChart } from \"../engine/orderbook/depth\";\nimport { createOrderBookHeatmap } from \"../engine/orderbook/heatmap\";\nimport { createOrderBook } from \"../engine/orderbook/ladder\";\nimport { createTimeAndSales } from \"../engine/orderbook/tape\";\nimport type {\n  DepthChartHoverEvent,\n  DepthChartInstance,\n  DepthChartOptions,\n  MarketTrade,\n  OrderBookDelta,\n  OrderBookHeatmapHoverEvent,\n  OrderBookHeatmapInstance,\n  OrderBookHeatmapOptions,\n  OrderBookInstance,\n  OrderBookLevelEvent,\n  OrderBookOptions,\n  OrderBookSnapshot,\n  TimeAndSalesInstance,\n  TimeAndSalesOptions,\n  TimeAndSalesRowEvent,\n} from \"../engine/orderbook/types\";\nimport type { ChartRendererKind } from \"../engine/types\";\n\n/** Container props shared by the order book components */\nexport interface OrderBookWidgetProps {\n  /** Height of the widget; numbers are pixels */\n  height?: number | string;\n  /**\n   * Width of the widget; numbers are pixels\n   * @default \"100%\"\n   */\n  width?: number | string;\n  /** Class of the container */\n  className?: string;\n  /** Style of the container */\n  style?: CSSProperties;\n}\n\n/** Imperative handle of `DepthChart` */\nexport interface DepthChartHandle {\n  /** Replaces the book */\n  setBook(snapshot: OrderBookSnapshot): void;\n  /** Applies updates (size 0 removes a level); drawn once at the next frame */\n  applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;\n  /** Sets the visible range (fraction of the mid); `null` fits the book */\n  setRange(range: number | null): void;\n  /** The underlying engine instance (minerva-design/charts/core) */\n  getInstance(): DepthChartInstance | null;\n}\n\n/** Props of `DepthChart` */\nexport interface DepthChartProps\n  extends DepthChartOptions, OrderBookWidgetProps {\n  /** Book to draw, applied when the object changes (stream updates through the ref) */\n  book?: OrderBookSnapshot;\n  /** Pointer over the curves (`null` when it leaves) */\n  onHover?: (event: DepthChartHoverEvent | null) => void;\n  /** Click / tap on the curves */\n  onClick?: (event: DepthChartHoverEvent) => void;\n  /** The visible range changed by zooming (fraction of the mid) */\n  onRangeChange?: (range: number) => void;\n  /** Imperative handle: `setBook`, `applyDeltas`, `setRange` */\n  ref?: Ref<DepthChartHandle>;\n}\n\n/** Imperative handle of `OrderBook` */\nexport interface OrderBookHandle {\n  /** Replaces the book */\n  setBook(snapshot: OrderBookSnapshot): void;\n  /** Applies updates (size 0 removes a level); drawn once at the next frame */\n  applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;\n  /** Price of the spread row (the mid price when `null`) */\n  setLastPrice(price: number | null): void;\n  /** The underlying engine instance (minerva-design/charts/core) */\n  getInstance(): OrderBookInstance | null;\n}\n\n/** Props of `OrderBook` */\nexport interface OrderBookProps extends OrderBookOptions, OrderBookWidgetProps {\n  /** Book to draw, applied when the object changes (stream updates through the ref) */\n  book?: OrderBookSnapshot;\n  /** Price of the spread row, colored by its last move; the mid price when omitted */\n  lastPrice?: number | null;\n  /** Hovered row (`null` when the pointer leaves) */\n  onHover?: (level: OrderBookLevelEvent | null) => void;\n  /** Click / tap / Enter on a row (e.g. to fill a price in an order form) */\n  onLevelClick?: (level: OrderBookLevelEvent) => void;\n  /** Imperative handle: `setBook`, `applyDeltas`, `setLastPrice` */\n  ref?: Ref<OrderBookHandle>;\n}\n\n/** Imperative handle of `OrderBookHeatmap` */\nexport interface OrderBookHeatmapHandle {\n  /** Replaces the book (closes the columns up to its time) */\n  setBook(snapshot: OrderBookSnapshot): void;\n  /** Applies updates (closes the columns up to their time) */\n  applyDeltas(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;\n  /** Adds trades (bubbles) */\n  addTrades(trades: MarketTrade | readonly MarketTrade[]): void;\n  /** Follows the market again */\n  resetView(): void;\n  /** The underlying engine instance (minerva-design/charts/core) */\n  getInstance(): OrderBookHeatmapInstance | null;\n}\n\n/** Props of `OrderBookHeatmap` */\nexport interface OrderBookHeatmapProps\n  extends OrderBookHeatmapOptions, OrderBookWidgetProps {\n  /** Book, applied when the object changes (stream updates through the ref) */\n  book?: OrderBookSnapshot;\n  /** Trades; when the array grows, only the appended ones are added */\n  trades?: readonly MarketTrade[];\n  /** Hovered cell (`null` when the pointer leaves) */\n  onHover?: (event: OrderBookHeatmapHoverEvent | null) => void;\n  /** Backend in use (also after a GPU loss) */\n  onRendererChange?: (renderer: ChartRendererKind) => void;\n  /** `true` while the view follows the market, `false` after a zoom / pan */\n  onFollowChange?: (follow: boolean) => void;\n  /** Imperative handle: `setBook`, `applyDeltas`, `addTrades`, `resetView` */\n  ref?: Ref<OrderBookHeatmapHandle>;\n}\n\n/** Imperative handle of `TimeAndSales` */\nexport interface TimeAndSalesHandle {\n  /** Appends trades (oldest first) */\n  addTrades(trades: MarketTrade | readonly MarketTrade[]): void;\n  /** Replaces every trade */\n  setTrades(trades: readonly MarketTrade[]): void;\n  /** Removes every trade */\n  clear(): void;\n  /** Scrolls back to the newest trade and resumes */\n  scrollToLatest(): void;\n  /** The underlying engine instance (minerva-design/charts/core) */\n  getInstance(): TimeAndSalesInstance | null;\n}\n\n/** Props of `TimeAndSales` */\nexport interface TimeAndSalesProps\n  extends TimeAndSalesOptions, OrderBookWidgetProps {\n  /**\n   * Trades, oldest first; when the array grows, only the appended ones are\n   * added (other changes replace the tape)\n   */\n  trades?: readonly MarketTrade[];\n  /** Hovered row (`null` when the pointer leaves) */\n  onHover?: (row: TimeAndSalesRowEvent | null) => void;\n  /** Click / tap / Enter on a row */\n  onTradeClick?: (row: TimeAndSalesRowEvent) => void;\n  /** The tape paused (pointer over it, scrolled down) or resumed */\n  onPause?: (paused: boolean) => void;\n  /** Imperative handle: `addTrades`, `setTrades`, `clear`, `scrollToLatest` */\n  ref?: Ref<TimeAndSalesHandle>;\n}\n\n// ------------------------------------------------------------------ shared\n\nconst size = (value: number | string | undefined, fallback: string) =>\n  value === undefined\n    ? fallback\n    : typeof value === \"number\"\n      ? `${value}px`\n      : value;\n\n/** Identical values, or inline arrays / objects with identical items */\nconst sameValue = (a: unknown, b: unknown): boolean => {\n  if (a === b) return true;\n  if (Array.isArray(a) && Array.isArray(b))\n    return a.length === b.length && a.every((v, i) => v === b[i]);\n  if (\n    typeof a !== \"object\" ||\n    typeof b !== \"object\" ||\n    a === null ||\n    b === null ||\n    Object.getPrototypeOf(a) !== Object.prototype ||\n    Object.getPrototypeOf(b) !== Object.prototype\n  )\n    return false;\n  const ka = Object.keys(a);\n  return (\n    ka.length === Object.keys(b).length &&\n    ka.every(\n      (k) =>\n        (a as Record<string, unknown>)[k] === (b as Record<string, unknown>)[k],\n    )\n  );\n};\n\n/** Same options, one level deep (inline `labels={{ … }}` stays equal) */\nconst sameOptions = (a: object, b: object): boolean => {\n  const ka = Object.keys(a).filter(\n    (k) => (a as Record<string, unknown>)[k] !== undefined,\n  );\n  const kb = Object.keys(b).filter(\n    (k) => (b as Record<string, unknown>)[k] !== undefined,\n  );\n  return (\n    ka.length === kb.length &&\n    ka.every((k) =>\n      sameValue(\n        (a as Record<string, unknown>)[k],\n        (b as Record<string, unknown>)[k],\n      ),\n    )\n  );\n};\n\ninterface Widget<O> {\n  setOptions(options: O): void;\n  destroy(): void;\n}\n\n/** Locale the engine resolves for `options` (the page language by default) */\nconst localeOf = (options: object): string =>\n  resolveLocale((options as { locale?: string }).locale);\n\n/**\n * Mounts an engine widget once, forwards option changes and subscribes the\n * handlers (read through a ref: inline callbacks never re-subscribe). The\n * options are applied again when the page language (`<html lang>`) changed,\n * so the built-in texts follow a language switch.\n */\nfunction useWidget<O extends object, I extends Widget<O>, H>(\n  factory: (container: HTMLElement, options: O) => I,\n  options: O,\n  handlers: H,\n  connect: (instance: I, handlers: () => H) => (() => void)[],\n): {\n  containerRef: RefObject<HTMLDivElement | null>;\n  instanceRef: RefObject<I | null>;\n} {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const instanceRef = useRef<I | null>(null);\n  const optionsRef = useRef(options);\n  const localeRef = useRef(\"\");\n  const handlersRef = useRef(handlers);\n\n  useEffect(() => {\n    handlersRef.current = handlers;\n  });\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n    localeRef.current = localeOf(optionsRef.current);\n    const instance = factory(container, optionsRef.current);\n    instanceRef.current = instance;\n    const offs = connect(instance, () => handlersRef.current);\n    return () => {\n      offs.forEach((off) => off());\n      instance.destroy();\n      instanceRef.current = null;\n    };\n  }, [factory, connect]);\n\n  useEffect(() => {\n    const locale = localeOf(options);\n    if (\n      sameOptions(optionsRef.current, options) &&\n      locale === localeRef.current\n    )\n      return;\n    optionsRef.current = options;\n    localeRef.current = locale;\n    instanceRef.current?.setOptions(options);\n  });\n\n  return { containerRef, instanceRef };\n}\n\n/** Applies `book` when the object changes */\nfunction useBook(\n  instanceRef: RefObject<{ setBook(s: OrderBookSnapshot): void } | null>,\n  book: OrderBookSnapshot | undefined,\n) {\n  useEffect(() => {\n    if (book) instanceRef.current?.setBook(book);\n  }, [instanceRef, book]);\n}\n\n/** Adds the trades appended to `trades`; `replace` gets any other change */\nfunction useTrades(\n  instanceRef: RefObject<object | null>,\n  trades: readonly MarketTrade[] | undefined,\n  add: (trades: readonly MarketTrade[]) => void,\n  replace: (trades: readonly MarketTrade[]) => void,\n) {\n  const previousRef = useRef<readonly MarketTrade[] | undefined>(undefined);\n  /** Instance that received `previousRef` (a remount starts over) */\n  const targetRef = useRef<object | null>(null);\n  const addRef = useRef(add);\n  const replaceRef = useRef(replace);\n  useEffect(() => {\n    addRef.current = add;\n    replaceRef.current = replace;\n  });\n  useEffect(() => {\n    const target = instanceRef.current;\n    const previous =\n      targetRef.current === target ? previousRef.current : undefined;\n    previousRef.current = trades;\n    targetRef.current = target;\n    if (!trades || trades === previous) return;\n    const n = previous?.length ?? 0;\n    // a grown array (same items in front): only the new ones\n    if (\n      previous &&\n      n > 0 &&\n      trades.length >= n &&\n      trades[n - 1] === previous[n - 1] &&\n      trades[0] === previous[0]\n    ) {\n      if (trades.length > n) addRef.current(trades.slice(n));\n      return;\n    }\n    replaceRef.current(trades);\n  }, [instanceRef, trades]);\n}\n\nfunction Frame({\n  containerRef,\n  height,\n  width,\n  className,\n  style,\n  fallbackHeight,\n}: OrderBookWidgetProps & {\n  containerRef: RefObject<HTMLDivElement | null>;\n  fallbackHeight: string;\n}) {\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"relative\",\n        width: size(width, \"100%\"),\n        height: size(height, fallbackHeight),\n        ...style,\n      }}\n    >\n      <div ref={containerRef} style={{ position: \"absolute\", inset: 0 }} />\n    </div>\n  );\n}\n\n// -------------------------------------------------------------- depth chart\n\ninterface DepthHandlers {\n  onHover?: DepthChartProps[\"onHover\"];\n  onClick?: DepthChartProps[\"onClick\"];\n  onRangeChange?: DepthChartProps[\"onRangeChange\"];\n}\n\nconst connectDepth = (chart: DepthChartInstance, h: () => DepthHandlers) => [\n  chart.on(\"hover\", (e) => h().onHover?.(e)),\n  chart.on(\"click\", (e) => h().onClick?.(e)),\n  chart.on(\"range\", (r) => h().onRangeChange?.(r)),\n];\n\n/**\n * Cumulative depth of an order book: stepped bid / ask areas around the mid\n * price, mirrored hover readout, zoom around the mid, eased updates.\n */\nexport function DepthChart({\n  height,\n  width,\n  className,\n  style,\n  book,\n  onHover,\n  onClick,\n  onRangeChange,\n  ref,\n  ...options\n}: DepthChartProps) {\n  const { containerRef, instanceRef } = useWidget(\n    createDepthChart,\n    options,\n    { onHover, onClick, onRangeChange },\n    connectDepth,\n  );\n  useBook(instanceRef, book);\n  useImperativeHandle(\n    ref,\n    () => ({\n      setBook: (snapshot) => instanceRef.current?.setBook(snapshot),\n      applyDeltas: (deltas) => instanceRef.current?.applyDeltas(deltas),\n      setRange: (range) => instanceRef.current?.setRange(range),\n      getInstance: () => instanceRef.current,\n    }),\n    [instanceRef],\n  );\n  return (\n    <Frame\n      containerRef={containerRef}\n      height={height}\n      width={width}\n      className={className}\n      style={style}\n      fallbackHeight=\"320px\"\n    />\n  );\n}\n\n// --------------------------------------------------------------- order book\n\ninterface LadderHandlers {\n  onHover?: OrderBookProps[\"onHover\"];\n  onLevelClick?: OrderBookProps[\"onLevelClick\"];\n}\n\nconst connectLadder = (book: OrderBookInstance, h: () => LadderHandlers) => [\n  book.on(\"hover\", (e) => h().onHover?.(e)),\n  book.on(\"levelClick\", (e) => h().onLevelClick?.(e)),\n];\n\n/**\n * Order book ladder: asks above the spread row, bids below, with depth\n * bars, price grouping, change flashes and large order highlight.\n */\nexport function OrderBook({\n  height,\n  width,\n  className,\n  style,\n  book,\n  lastPrice,\n  onHover,\n  onLevelClick,\n  ref,\n  ...options\n}: OrderBookProps) {\n  const { containerRef, instanceRef } = useWidget(\n    createOrderBook,\n    options,\n    { onHover, onLevelClick },\n    connectLadder,\n  );\n  useBook(instanceRef, book);\n  useEffect(() => {\n    if (lastPrice !== undefined) instanceRef.current?.setLastPrice(lastPrice);\n  }, [instanceRef, lastPrice]);\n  useImperativeHandle(\n    ref,\n    () => ({\n      setBook: (snapshot) => instanceRef.current?.setBook(snapshot),\n      applyDeltas: (deltas) => instanceRef.current?.applyDeltas(deltas),\n      setLastPrice: (price) => instanceRef.current?.setLastPrice(price),\n      getInstance: () => instanceRef.current,\n    }),\n    [instanceRef],\n  );\n  return (\n    <Frame\n      containerRef={containerRef}\n      height={height}\n      width={width}\n      className={className}\n      style={style}\n      fallbackHeight=\"420px\"\n    />\n  );\n}\n\n// ------------------------------------------------------------------ heatmap\n\ninterface HeatmapHandlers {\n  onHover?: OrderBookHeatmapProps[\"onHover\"];\n  onRendererChange?: OrderBookHeatmapProps[\"onRendererChange\"];\n  onFollowChange?: OrderBookHeatmapProps[\"onFollowChange\"];\n}\n\nconst connectHeatmap = (\n  heatmap: OrderBookHeatmapInstance,\n  h: () => HeatmapHandlers,\n) => [\n  heatmap.on(\"hover\", (e) => h().onHover?.(e)),\n  heatmap.on(\"renderer\", (r) => h().onRendererChange?.(r)),\n  heatmap.on(\"follow\", (f) => h().onFollowChange?.(f)),\n];\n\n/**\n * Liquidity heatmap: resting size over time and price drawn by the GPU,\n * best bid / ask lines and trades as bubbles sized by volume.\n */\nexport function OrderBookHeatmap({\n  height,\n  width,\n  className,\n  style,\n  book,\n  trades,\n  onHover,\n  onRendererChange,\n  onFollowChange,\n  ref,\n  ...options\n}: OrderBookHeatmapProps) {\n  const { containerRef, instanceRef } = useWidget(\n    createOrderBookHeatmap,\n    options,\n    { onHover, onRendererChange, onFollowChange },\n    connectHeatmap,\n  );\n  useBook(instanceRef, book);\n  useTrades(\n    instanceRef,\n    trades,\n    (list) => instanceRef.current?.addTrades(list),\n    (list) => instanceRef.current?.addTrades(list),\n  );\n  useImperativeHandle(\n    ref,\n    () => ({\n      setBook: (snapshot) => instanceRef.current?.setBook(snapshot),\n      applyDeltas: (deltas) => instanceRef.current?.applyDeltas(deltas),\n      addTrades: (list) => instanceRef.current?.addTrades(list),\n      resetView: () => instanceRef.current?.resetView(),\n      getInstance: () => instanceRef.current,\n    }),\n    [instanceRef],\n  );\n  return (\n    <Frame\n      containerRef={containerRef}\n      height={height}\n      width={width}\n      className={className}\n      style={style}\n      fallbackHeight=\"360px\"\n    />\n  );\n}\n\n// ----------------------------------------------------------- time and sales\n\ninterface TapeHandlers {\n  onHover?: TimeAndSalesProps[\"onHover\"];\n  onTradeClick?: TimeAndSalesProps[\"onTradeClick\"];\n  onPause?: TimeAndSalesProps[\"onPause\"];\n}\n\nconst connectTape = (tape: TimeAndSalesInstance, h: () => TapeHandlers) => [\n  tape.on(\"hover\", (e) => h().onHover?.(e)),\n  tape.on(\"tradeClick\", (e) => h().onTradeClick?.(e)),\n  tape.on(\"pause\", (p) => h().onPause?.(p)),\n];\n\n/**\n * Time and sales tape: newest trades on top, virtualized (hundreds of\n * thousands of rows), large trades highlighted, paused while hovered.\n */\nexport function TimeAndSales({\n  height,\n  width,\n  className,\n  style,\n  trades,\n  onHover,\n  onTradeClick,\n  onPause,\n  ref,\n  ...options\n}: TimeAndSalesProps) {\n  const { containerRef, instanceRef } = useWidget(\n    createTimeAndSales,\n    options,\n    { onHover, onTradeClick, onPause },\n    connectTape,\n  );\n  useTrades(\n    instanceRef,\n    trades,\n    (list) => instanceRef.current?.addTrades(list),\n    (list) => instanceRef.current?.setTrades(list),\n  );\n  useImperativeHandle(\n    ref,\n    () => ({\n      addTrades: (list) => instanceRef.current?.addTrades(list),\n      setTrades: (list) => instanceRef.current?.setTrades(list),\n      clear: () => instanceRef.current?.clear(),\n      scrollToLatest: () => instanceRef.current?.scrollToLatest(),\n      getInstance: () => instanceRef.current,\n    }),\n    [instanceRef],\n  );\n  return (\n    <Frame\n      containerRef={containerRef}\n      height={height}\n      width={width}\n      className={className}\n      style={style}\n      fallbackHeight=\"360px\"\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/charts/react/shapes.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../engine/shapes/chart.cjs");let t=require("react"),n=require("react-dom"),r=require("react/jsx-runtime");var i=(e,t)=>e===void 0?t:typeof e==`number`?`${e}px`:e,a=({palette:e,legend:n,tooltip:r,format:i,percentFormat:a,hidden:o,animation:s,padding:c,ariaLabel:l})=>{let u=o?o.join(`,`):null,d=(0,t.useMemo)(()=>u===null?void 0:u?u.split(`,`).map(Number):[],[u]);return(0,t.useMemo)(()=>({palette:e,legend:n,tooltip:r,format:i,percentFormat:a,hidden:d,animation:s,padding:c,ariaLabel:l}),[e,n,r,i,a,d,s,c,l])};function o({options:a,height:o,width:s,className:c,style:l,handleRef:u,renderTooltip:d,...f}){let p=(0,t.useRef)(null),m=(0,t.useRef)(null),h=(0,t.useRef)(f),g=(0,t.useRef)(d),[_,v]=(0,t.useState)(null),y=(0,t.useMemo)(()=>typeof document>`u`?null:document.createElement(`div`),[]),b=!!d,x=(0,t.useMemo)(()=>{if(!b||!y||a.tooltip===!1)return a;let e=typeof a.tooltip==`object`?a.tooltip:{};return{...a,tooltip:{...e,render:e=>g.current?((0,n.flushSync)(()=>v(e)),y):null}}},[a,b,y]),S=(0,t.useRef)(x);return(0,t.useEffect)(()=>{h.current=f,g.current=d}),(0,t.useEffect)(()=>{let t=p.current;if(!t)return;let n=e.createShapeChart(t,S.current);m.current=n;let r=[n.on(`hover`,e=>h.current.onHover?.(e)),n.on(`click`,e=>h.current.onClick?.(e)),n.on(`toggle`,e=>h.current.onToggle?.(e))];return()=>{r.forEach(e=>e()),n.destroy(),m.current=null}},[]),(0,t.useEffect)(()=>{S.current!==x&&(S.current=x,m.current?.setOptions(x))},[x]),(0,t.useImperativeHandle)(u,()=>({getInstance:()=>m.current}),[]),(0,r.jsxs)(`div`,{className:c,style:{position:`relative`,width:i(s,`100%`),height:i(o,`320px`),...l},children:[(0,r.jsx)(`div`,{ref:p,style:{position:`absolute`,inset:0}}),y&&_&&d&&(0,n.createPortal)(d(_),y)]})}function s(e){return(0,r.jsx)(l,{...e,defaultInner:0})}function c(e){return(0,r.jsx)(l,{...e,defaultInner:.62})}function l(e){let{data:n,innerRadius:i,startAngle:o,padAngle:s,cornerRadius:c,rose:l,labels:u,labelContent:d,centerValue:f,centerLabel:p,defaultInner:h}=e,g=a(e),_=(0,t.useMemo)(()=>({...g,type:`pie`,data:n,innerRadius:i??h,startAngle:o,padAngle:s,cornerRadius:c,rose:l,labels:u,labelContent:d,centerValue:f,centerLabel:p}),[g,n,i,h,o,s,c,l,u,d,f,p]);return(0,r.jsx)(m,{props:e,options:_,defaultHeight:320})}function u(e){let{indicators:n,series:i,shape:o,levels:s,dots:c}=e,l=a(e),u=(0,t.useMemo)(()=>({...l,type:`radar`,indicators:n,series:i,shape:o,levels:s,dots:c}),[l,n,i,o,s,c]);return(0,r.jsx)(m,{props:e,options:u,defaultHeight:320})}function d(e){let{value:n,min:i,max:o,label:s,sweep:c,thickness:l,bands:u,color:d,needle:f,ticks:p}=e,h=a(e),g=(0,t.useMemo)(()=>({...h,type:`gauge`,value:n,min:i,max:o,label:s,sweep:c,thickness:l,bands:u,color:d,needle:f,ticks:p}),[h,n,i,o,s,c,l,u,d,f,p]);return(0,r.jsx)(m,{props:e,options:g,defaultHeight:240})}function f(e){let{data:n,sort:i,gap:o,conversion:s,shape:c}=e,l=a(e),u=(0,t.useMemo)(()=>({...l,type:`funnel`,data:n,sort:i,gap:o,conversion:s,shape:c}),[l,n,i,o,s,c]);return(0,r.jsx)(m,{props:e,options:u,defaultHeight:320})}function p(e){let{data:n,gap:i,headers:o}=e,s=a(e),c=(0,t.useMemo)(()=>({...s,type:`treemap`,data:n,gap:i,headers:o}),[s,n,i,o]);return(0,r.jsx)(m,{props:e,options:c,defaultHeight:320})}function m({props:e,options:t,defaultHeight:n}){return(0,r.jsx)(o,{options:t,height:e.height??n,width:e.width,className:e.className,style:e.style,handleRef:e.ref,onHover:e.onHover,onClick:e.onClick,onToggle:e.onToggle,renderTooltip:e.renderTooltip})}exports.DonutChart=c,exports.FunnelChart=f,exports.GaugeChart=d,exports.PieChart=s,exports.RadarChart=u,exports.TreemapChart=p;
+"use client";const e=require("../engine/shapes/calendar.cjs"),t=require("../engine/shapes/chart.cjs");let n=require("react"),r=require("react-dom"),i=require("react/jsx-runtime");var a=(e,t)=>e===void 0?t:typeof e==`number`?`${e}px`:e,o=e=>{if(typeof document>`u`||typeof MutationObserver!=`function`)return()=>{};let t=new MutationObserver(e);return t.observe(document.documentElement,{attributes:!0,attributeFilter:[`lang`]}),()=>t.disconnect()},s=()=>typeof document>`u`?``:document.documentElement.lang,c=()=>``,l=({palette:e,legend:t,tooltip:r,format:i,percentFormat:a,locale:l,texts:u,hidden:d,animation:f,padding:p,ariaLabel:m})=>{let h=(0,n.useSyncExternalStore)(o,s,c),g=l??(h||void 0),_=d?d.join(`,`):null,v=(0,n.useMemo)(()=>_===null?void 0:_?_.split(`,`).map(Number):[],[_]);return(0,n.useMemo)(()=>({palette:e,legend:t,tooltip:r,format:i,percentFormat:a,locale:g,texts:u,hidden:v,animation:f,padding:p,ariaLabel:m}),[e,t,r,i,a,g,u,v,f,p,m])};function u({options:e,height:o,width:s,className:c,style:l,handleRef:u,renderTooltip:d,...f}){let p=(0,n.useRef)(null),m=(0,n.useRef)(null),h=(0,n.useRef)(f),g=(0,n.useRef)(d),[_,v]=(0,n.useState)(null),y=(0,n.useMemo)(()=>typeof document>`u`?null:document.createElement(`div`),[]),b=!!d,x=(0,n.useMemo)(()=>{if(!b||!y||e.tooltip===!1)return e;let t=typeof e.tooltip==`object`?e.tooltip:{};return{...e,tooltip:{...t,render:e=>g.current?((0,r.flushSync)(()=>v(e)),y):null}}},[e,b,y]),S=(0,n.useRef)(x);return(0,n.useEffect)(()=>{h.current=f,g.current=d}),(0,n.useEffect)(()=>{let e=p.current;if(!e)return;let n=t.createShapeChart(e,S.current);m.current=n;let r=[n.on(`hover`,e=>h.current.onHover?.(e)),n.on(`click`,e=>h.current.onClick?.(e)),n.on(`toggle`,e=>h.current.onToggle?.(e)),n.on(`drill`,e=>h.current.onDrill?.(e))];return()=>{r.forEach(e=>e()),n.destroy(),m.current=null}},[]),(0,n.useEffect)(()=>{S.current!==x&&(S.current=x,m.current?.setOptions(x))},[x]),(0,n.useImperativeHandle)(u,()=>({getInstance:()=>m.current}),[]),(0,i.jsxs)(`div`,{className:c,style:{position:`relative`,width:a(s,`100%`),height:a(o,`320px`),...l},children:[(0,i.jsx)(`div`,{ref:p,style:{position:`absolute`,inset:0}}),y&&_&&d&&(0,r.createPortal)(d(_),y)]})}function d(e){return(0,i.jsx)(p,{...e,defaultInner:0})}function f(e){return(0,i.jsx)(p,{...e,defaultInner:.62})}function p(e){let{data:t,innerRadius:r,startAngle:a,padAngle:o,cornerRadius:s,rose:c,labels:u,labelContent:d,centerValue:f,centerLabel:p,defaultInner:m}=e,h=l(e),g=(0,n.useMemo)(()=>({...h,type:`pie`,data:t,innerRadius:r??m,startAngle:a,padAngle:o,cornerRadius:s,rose:c,labels:u,labelContent:d,centerValue:f,centerLabel:p}),[h,t,r,m,a,o,s,c,u,d,f,p]);return(0,i.jsx)(C,{props:e,options:g,defaultHeight:320})}function m(e){let{indicators:t,series:r,shape:a,levels:o,dots:s}=e,c=l(e),u=(0,n.useMemo)(()=>({...c,type:`radar`,indicators:t,series:r,shape:a,levels:o,dots:s}),[c,t,r,a,o,s]);return(0,i.jsx)(C,{props:e,options:u,defaultHeight:320})}function h(e){let{value:t,min:r,max:a,label:o,sweep:s,thickness:c,bands:u,color:d,needle:f,ticks:p}=e,m=l(e),h=(0,n.useMemo)(()=>({...m,type:`gauge`,value:t,min:r,max:a,label:o,sweep:s,thickness:c,bands:u,color:d,needle:f,ticks:p}),[m,t,r,a,o,s,c,u,d,f,p]);return(0,i.jsx)(C,{props:e,options:h,defaultHeight:240})}function g(e){let{data:t,sort:r,gap:a,conversion:o,shape:s}=e,c=l(e),u=(0,n.useMemo)(()=>({...c,type:`funnel`,data:t,sort:r,gap:a,conversion:o,shape:s}),[c,t,r,a,o,s]);return(0,i.jsx)(C,{props:e,options:u,defaultHeight:320})}function _(e){let{data:t,gap:r,headers:a}=e,o=l(e),s=(0,n.useMemo)(()=>({...o,type:`treemap`,data:t,gap:r,headers:a}),[o,t,r,a]);return(0,i.jsx)(C,{props:e,options:s,defaultHeight:320})}function v(e){let{nodes:t,links:r,nodeWidth:a,nodePadding:o,align:s,iterations:c,linkColor:u,linkOpacity:d,labels:f,labelValues:p}=e,m=l(e),h=(0,n.useMemo)(()=>({...m,type:`sankey`,nodes:t,links:r,nodeWidth:a,nodePadding:o,align:s,iterations:c,linkColor:u,linkOpacity:d,labels:f,labelValues:p}),[m,t,r,a,o,s,c,u,d,f,p]);return(0,i.jsx)(C,{props:e,options:h,defaultHeight:360})}function y(e){let{data:t,innerRadius:r,levels:a,startAngle:o,padAngle:s,cornerRadius:c,labels:u,drill:d,drillPath:f,onDrill:p}=e,m=l(e),h=f?JSON.stringify(f):null,g=(0,n.useMemo)(()=>h===null?void 0:JSON.parse(h),[h]),_=(0,n.useMemo)(()=>({...m,type:`sunburst`,data:t,innerRadius:r,levels:a,startAngle:o,padAngle:s,cornerRadius:c,labels:u,drill:d,drillPath:g}),[m,t,r,a,o,s,c,u,d,g]);return(0,i.jsx)(C,{props:e,options:_,defaultHeight:360,onDrill:p})}function b(e){let{data:t,max:r,innerRadius:a,startAngle:o,sweep:s,gap:c,track:u,rounded:d,labels:f,labelContent:p,centerValue:m,centerLabel:h}=e,g=l(e),_=(0,n.useMemo)(()=>({...g,type:`radialBar`,data:t,max:r,innerRadius:a,startAngle:o,sweep:s,gap:c,track:u,rounded:d,labels:f,labelContent:p,centerValue:m,centerLabel:h}),[g,t,r,a,o,s,c,u,d,f,p,m,h]);return(0,i.jsx)(C,{props:e,options:_,defaultHeight:300})}function x(t){let{data:r,range:a,layout:o,weekStart:s,color:c,colors:u,levels:d,thresholds:f,gap:p,radius:m,maxCellSize:h,monthLabels:g,weekdayLabels:_}=t,v=l(t),y=(0,n.useMemo)(()=>({...v,type:`calendarHeatmap`,data:r,range:a,layout:o,weekStart:s,color:c,colors:u,levels:d,thresholds:f,gap:p,radius:m,maxCellSize:h,monthLabels:g,weekdayLabels:_}),[v,r,a,o,s,c,u,d,f,p,m,h,g,_]),b=(0,n.useMemo)(()=>{let t=y.legend===!1?0:34;return o===`months`?560:e.calendarStrips(y)*120+t+16},[y,o]);return(0,i.jsx)(C,{props:t,options:y,defaultHeight:b})}function S(e){let{data:t,orientation:r,ranges:a,rangeLabels:o,rangeColors:s,barSize:c,targetColor:u,ticks:d}=e,f=l(e),p=(0,n.useMemo)(()=>({...f,type:`bullet`,data:t,orientation:r,ranges:a,rangeLabels:o,rangeColors:s,barSize:c,targetColor:u,ticks:d}),[f,t,r,a,o,s,c,u,d]),m=p.legend?34:0,h=r===`vertical`?320:Math.max(96,t.length*64+16)+m;return(0,i.jsx)(C,{props:e,options:p,defaultHeight:h})}function C({props:e,options:t,defaultHeight:n,onDrill:r}){return(0,i.jsx)(u,{options:t,height:e.height??n,width:e.width,className:e.className,style:e.style,handleRef:e.ref,onHover:e.onHover,onClick:e.onClick,onToggle:e.onToggle,onDrill:r,renderTooltip:e.renderTooltip})}exports.BulletChart=S,exports.CalendarHeatmap=x,exports.DonutChart=f,exports.FunnelChart=g,exports.GaugeChart=h,exports.PieChart=d,exports.RadarChart=m,exports.RadialBarChart=b,exports.SankeyChart=v,exports.SunburstChart=y,exports.TreemapChart=_;
 //# sourceMappingURL=shapes.cjs.map