minerva-design 1.6.0 → 1.7.0

package/dist/vue/components/Chart/OrderBookHeatmap.vue.d.ts

@@ -12,6 +12,11 @@ declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractP
     colorScale: import('vue').PropType<import('../../../charts/core.js').OrderBookHeatmapScale>;
     contrast: NumberConstructor;
     maxSize: NumberConstructor;
+    sizeUnit: StringConstructor;
+    legend: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
     colors: import('vue').PropType<readonly string[]>;
     bubbles: {
         readonly type: BooleanConstructor;
@@ -71,6 +76,11 @@ declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractP
     colorScale: import('vue').PropType<import('../../../charts/core.js').OrderBookHeatmapScale>;
     contrast: NumberConstructor;
     maxSize: NumberConstructor;
+    sizeUnit: StringConstructor;
+    legend: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
     colors: import('vue').PropType<readonly string[]>;
     bubbles: {
         readonly type: BooleanConstructor;
@@ -120,6 +130,7 @@ declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractP
     onFollowChange?: ((follow: boolean) => any) | undefined;
 }>, {
     tooltip: boolean;
+    legend: boolean;
     bubbles: boolean;
     interactive: boolean;
     deep: boolean;

package/dist/vue/components/Chart/orderbook.d.ts

@@ -196,6 +196,13 @@ export declare const orderBookHeatmapProps: {
     contrast: NumberConstructor;
     /** Size drawn with the last color; follows the data by default */
     maxSize: NumberConstructor;
+    /** Unit after the sizes of the legend and tooltip, e.g. "BTC" */
+    sizeUnit: StringConstructor;
+    /** Color legend with its size range at the top left (default `true`) */
+    legend: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
     /** Colors from no liquidity to `maxSize` (any CSS colors) */
     colors: PropType<readonly string[]>;
     /** Trades as bubbles (default `true`) */

package/dist/vue/components/Chart/orderbook.js

@@ -72,6 +72,8 @@ var a = {
 	colorScale: String,
 	contrast: Number,
 	maxSize: Number,
+	sizeUnit: String,
+	legend: a,
 	colors: Array,
 	bubbles: a,
 	bubbleSize: Number,

package/dist/vue/components/Chart/orderbook.js.map

@@ -1 +1 @@
-{"version":3,"file":"orderbook.js","names":["optionalBoolean","commonProps","chartFrameProps","depthChartProps","orderBookProps","orderBookHeatmapProps","timeAndSalesProps","STREAMED","useBookWidget","previous","feed","list","raw","props","before","trades","n","engine","useChartEngine","factory","definedOptions","instance","bind","watch","book"],"sources":["../../../../../vue/src/components/Chart/orderbook.ts"],"sourcesContent":["import { watch, type PropType } from \"vue\";\nimport type {\n  ChartRendererPreference,\n  ChartTimeZone,\n  DepthChartLabels,\n  DepthChartPriceLine,\n  OrderBookColorConvention,\n  OrderBookDelta,\n  OrderBookHeatmapLabels,\n  OrderBookHeatmapScale,\n  OrderBookLabels,\n  OrderBookMode,\n  OrderBookSnapshot,\n  TimeAndSalesColumn,\n  TimeAndSalesLabels,\n} from \"minerva-design/charts/core\";\nimport { raw, useChartEngine, type EngineInstance } from \"./engine\";\nimport { chartFrameProps } from \"./props\";\nimport { definedOptions } from \"./trading\";\nimport type { ChartTrades } from \"./types\";\n\nconst optionalBoolean = { type: Boolean, default: undefined } as const;\n\n/** Options shared by the order book components */\nconst commonProps = {\n  ...chartFrameProps,\n  /** Color of the bids / buys (any CSS color); from `colorConvention` by default */\n  upColor: String,\n  /** Color of the asks / sells */\n  downColor: String,\n  /** `red-up` swaps the default colors (default `green-up`) */\n  colorConvention: String as PropType<OrderBookColorConvention>,\n  /** Decimals of the prices; detected from the data by default */\n  pricePrecision: Number,\n  /** Decimals of the sizes; detected from the data by default */\n  sizePrecision: Number,\n  /** Locale of the numbers and texts (`\"zh-CN\"`); the page language by default */\n  locale: String,\n  /** Formats the prices; overrides `pricePrecision` */\n  formatPrice: Function as PropType<(price: number) => string>,\n  /** Formats the sizes; overrides `sizePrecision` */\n  formatSize: Function as PropType<(size: number) => string>,\n  /** Font family of the texts (default: the theme font) */\n  fontFamily: String,\n  /** Font size of the texts, in pixels (default 12) */\n  fontSize: Number,\n  /** Accessible label */\n  ariaLabel: String,\n};\n\n/** Props of DepthChart */\nexport const depthChartProps = {\n  ...commonProps,\n  /** Book to draw, applied when the object changes (stream updates through the handle's `applyDeltas`) */\n  book: Object as PropType<OrderBookSnapshot>,\n  /** Visible range on each side of the mid price, as a fraction of the mid; fits the book by default */\n  range: Number,\n  /** Smallest and largest `range` reachable by zooming (default `[0.0005, 0.5]`) */\n  rangeLimits: Array as unknown as PropType<readonly [number, number]>,\n  /** Zoom around the mid with the wheel / pinch (default `true`) */\n  zoomable: optionalBoolean,\n  /** Stepped or straight curves (default `step`) */\n  curve: String as PropType<\"step\" | \"linear\">,\n  /** Cumulative amount in the base asset or the quote notional (default `base`) */\n  amount: String as PropType<\"base\" | \"quote\">,\n  /** Eased transitions between books (default `true`) */\n  animate: optionalBoolean,\n  /** Opacity of the areas, 0-1 (default 0.28) */\n  fillOpacity: Number,\n  /** Line and label at the mid price (default `true`) */\n  midLine: optionalBoolean,\n  /** Legend with the spread (default `true`) */\n  legend: optionalBoolean,\n  /** Grid lines (default `true`) */\n  grid: optionalBoolean,\n  /** Price and amount axes (default `true`) */\n  axes: optionalBoolean,\n  /** Hover readout (default `true`) */\n  tooltip: optionalBoolean,\n  /** Mirrored readout on the other side (default `true`) */\n  mirror: optionalBoolean,\n  /** Reference lines at prices (an order, a liquidation) */\n  priceLines: Array as PropType<readonly DepthChartPriceLine[]>,\n  /** Overrides of the built-in texts of the `locale` */\n  labels: Object as PropType<Partial<DepthChartLabels>>,\n};\n\n/** Props of OrderBook */\nexport const orderBookProps = {\n  ...commonProps,\n  /** Book to draw, applied when the object changes (stream updates through the handle's `applyDeltas`) */\n  book: Object as PropType<OrderBookSnapshot>,\n  /** Price of the spread row, colored by its last move; the mid price when omitted */\n  lastPrice: { type: Number as PropType<number | null>, default: undefined },\n  /** Sides shown (default `both`) */\n  mode: String as PropType<OrderBookMode>,\n  /** Price step the levels are grouped by (default 0: none) */\n  grouping: Number,\n  /** Rows per side; fills the height by default */\n  rows: Number,\n  /** Height of a row, in pixels (default 20) */\n  rowHeight: Number,\n  /** Depth bars behind the rows (default `cumulative`) */\n  depthBars: String as PropType<\"cumulative\" | \"level\" | \"none\">,\n  /** Total column in the base asset or the quote notional (default `base`) */\n  total: String as PropType<\"base\" | \"quote\">,\n  /** Columns, in order (default `[\"price\", \"size\", \"total\"]`) */\n  columns: Array as PropType<readonly (\"price\" | \"size\" | \"total\")[]>,\n  /** Flashes the changed sizes (default `true`) */\n  flash: optionalBoolean,\n  /** Duration of a flash, in ms (default 450) */\n  flashDuration: Number,\n  /** Highlights the levels at or above this size */\n  largeOrderThreshold: Number,\n  /** Column headers (default `true`) */\n  header: optionalBoolean,\n  /** Spread row between the sides (default `true`) */\n  spreadRow: optionalBoolean,\n  /** Bid / ask imbalance bar (default `true`) */\n  imbalance: optionalBoolean,\n  /** Hover summary of the cumulative levels (default `true`) */\n  tooltip: optionalBoolean,\n  /** Overrides of the built-in texts of the `locale` */\n  labels: Object as PropType<Partial<OrderBookLabels>>,\n};\n\n/** Props of OrderBookHeatmap */\nexport const orderBookHeatmapProps = {\n  ...commonProps,\n  /** Book, applied when the object changes (stream updates through the handle's `applyDeltas`) */\n  book: Object as PropType<OrderBookSnapshot>,\n  /** Trades; when the array grows, only the appended ones are added */\n  trades: Array as PropType<ChartTrades>,\n  /** Price step of the rows; detected from the book by default */\n  tickSize: Number,\n  /** Duration of a column, in ms (default 100) */\n  interval: Number,\n  /** Time shown, in ms (default 60000) */\n  window: Number,\n  /** Time kept for panning back, in ms (default 300000) */\n  history: Number,\n  /** Price levels kept on each side (default 160) */\n  depth: Number,\n  /** Price range shown around the mid; from `depth` by default */\n  priceSpan: Number,\n  /** Scale of the sizes to the colors (default `log`) */\n  colorScale: String as PropType<OrderBookHeatmapScale>,\n  /** Contrast of the colors (default 1) */\n  contrast: Number,\n  /** Size drawn with the last color; follows the data by default */\n  maxSize: Number,\n  /** Colors from no liquidity to `maxSize` (any CSS colors) */\n  colors: Array as PropType<readonly string[]>,\n  /** Trades as bubbles (default `true`) */\n  bubbles: optionalBoolean,\n  /** Diameter of the largest bubble, in pixels (default 28) */\n  bubbleSize: Number,\n  /** Trade volume of the largest bubble; follows the data by default */\n  bubbleVolume: Number,\n  /** Best bid / ask lines (default `true`) */\n  bestLines: optionalBoolean,\n  /** Size profile of the current book at the right (default `true`) */\n  profile: optionalBoolean,\n  /** Zoom and pan (default `true`) */\n  interactive: optionalBoolean,\n  /** Hover readout (default `true`) */\n  tooltip: optionalBoolean,\n  /** Backend: WebGPU, then WebGL2, WebGL, Canvas2D (default `auto`) */\n  renderer: String as PropType<ChartRendererPreference>,\n  /** Clock of the time axis and the tooltip: the local time or UTC, the clock of most exchanges (default `local`) */\n  timeZone: String as PropType<ChartTimeZone>,\n  /** Overrides of the built-in texts of the `locale` */\n  labels: Object as PropType<Partial<OrderBookHeatmapLabels>>,\n};\n\n/** Props of TimeAndSales */\nexport const timeAndSalesProps = {\n  ...commonProps,\n  /** Trades, oldest first; when the array grows, only the appended ones are added (other changes replace the tape) */\n  trades: Array as PropType<ChartTrades>,\n  /** Trades kept (default 200000) */\n  capacity: Number,\n  /** Height of a row, in pixels (default 20) */\n  rowHeight: Number,\n  /** Columns, in order (default `[\"time\", \"price\", \"size\"]`) */\n  columns: Array as PropType<readonly TimeAndSalesColumn[]>,\n  /** Hides the trades below this size (default 0) */\n  minSize: Number,\n  /** Highlights the trades at or above this size */\n  largeTradeThreshold: Number,\n  /** Merges the consecutive trades of the same side and price (default `false`) */\n  aggregate: optionalBoolean,\n  /** Price color: the side of the trade or the tick direction (default `side`) */\n  priceColor: String as PropType<\"side\" | \"tick\">,\n  /** Pauses the tape while hovered (default `true`) */\n  pauseOnHover: optionalBoolean,\n  /** Slides the new rows in (default `true`) */\n  animate: optionalBoolean,\n  /** Column headers (default `true`) */\n  header: optionalBoolean,\n  /** Milliseconds in the times (default `true`) */\n  milliseconds: optionalBoolean,\n  /** Clock of the default time format: the local time or UTC, the clock of most exchanges (default `local`) */\n  timeZone: String as PropType<ChartTimeZone>,\n  /** Formats the times */\n  formatTime: Function as PropType<(time: number) => string>,\n  /** Overrides of the built-in texts of the `locale` */\n  labels: Object as PropType<Partial<TimeAndSalesLabels>>,\n};\n\n/** Props passed through engine methods rather than the options */\nconst STREAMED = [\"book\", \"trades\", \"lastPrice\"];\n\ninterface Widget<O> extends EngineInstance<O> {\n  setBook?(snapshot: OrderBookSnapshot): void;\n  applyDeltas?(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;\n}\n\n/**\n * Mounts an order book engine: the options are every set prop but the\n * streamed ones; `book` goes through `setBook` when the object changes,\n * `trades` through `add` (the appended trades) / `replace` (any other\n * change)\n */\nexport function useBookWidget<O, I extends Widget<O>>(\n  factory: (container: HTMLElement, options: O) => I,\n  props: Record<string, unknown> & {\n    book?: OrderBookSnapshot;\n    trades?: ChartTrades;\n    deep?: boolean;\n  },\n  bind: (engine: I) => Array<() => void>,\n  trades?: {\n    add: (engine: I, trades: ChartTrades) => void;\n    replace: (engine: I, trades: ChartTrades) => void;\n  },\n) {\n  let previous: ChartTrades | undefined;\n  const feed = (engine: I) => {\n    const list = raw(props.trades);\n    const before = previous;\n    previous = list;\n    if (!trades || !list || list === before) return;\n    const n = before?.length ?? 0;\n    if (\n      before &&\n      n > 0 &&\n      list.length >= n &&\n      list[0] === before[0] &&\n      list[n - 1] === before[n - 1]\n    ) {\n      if (list.length > n) trades.add(engine, list.slice(n));\n      return;\n    }\n    trades.replace(engine, list);\n  };\n  const engine = useChartEngine<O, I>(\n    factory,\n    props,\n    () => definedOptions<O>(props, STREAMED),\n    (instance) => {\n      previous = undefined;\n      if (props.book) instance.setBook?.(raw(props.book));\n      feed(instance);\n      return bind(instance);\n    },\n    () => definedOptions(props, STREAMED),\n  );\n  watch(\n    () => props.book,\n    (book) => {\n      if (book) engine.instance.value?.setBook?.(raw(book));\n    },\n  );\n  watch(\n    () => props.trades,\n    () => {\n      if (engine.instance.value) feed(engine.instance.value);\n    },\n  );\n  return engine;\n}\n"],"mappings":";;;;;AAqBA,IAAMA,IAAkB;CAAE,MAAM;CAAS,SAAS,KAAA;AAAU,GAGtDC,IAAc;CAClB,GAAGC;CAEH,SAAS;CAET,WAAW;CAEX,iBAAiB;CAEjB,gBAAgB;CAEhB,eAAe;CAEf,QAAQ;CAER,aAAa;CAEb,YAAY;CAEZ,YAAY;CAEZ,UAAU;CAEV,WAAW;AACb,GAGaC,IAAkB;CAC7B,GAAGF;CAEH,MAAM;CAEN,OAAO;CAEP,aAAa;CAEb,UAAUD;CAEV,OAAO;CAEP,QAAQ;CAER,SAASA;CAET,aAAa;CAEb,SAASA;CAET,QAAQA;CAER,MAAMA;CAEN,MAAMA;CAEN,SAASA;CAET,QAAQA;CAER,YAAY;CAEZ,QAAQ;AACV,GAGaI,IAAiB;CAC5B,GAAGH;CAEH,MAAM;CAEN,WAAW;EAAE,MAAM;EAAmC,SAAS,KAAA;CAAU;CAEzE,MAAM;CAEN,UAAU;CAEV,MAAM;CAEN,WAAW;CAEX,WAAW;CAEX,OAAO;CAEP,SAAS;CAET,OAAOD;CAEP,eAAe;CAEf,qBAAqB;CAErB,QAAQA;CAER,WAAWA;CAEX,WAAWA;CAEX,SAASA;CAET,QAAQ;AACV,GAGaK,IAAwB;CACnC,GAAGJ;CAEH,MAAM;CAEN,QAAQ;CAER,UAAU;CAEV,UAAU;CAEV,QAAQ;CAER,SAAS;CAET,OAAO;CAEP,WAAW;CAEX,YAAY;CAEZ,UAAU;CAEV,SAAS;CAET,QAAQ;CAER,SAASD;CAET,YAAY;CAEZ,cAAc;CAEd,WAAWA;CAEX,SAASA;CAET,aAAaA;CAEb,SAASA;CAET,UAAU;CAEV,UAAU;CAEV,QAAQ;AACV,GAGaM,IAAoB;CAC/B,GAAGL;CAEH,QAAQ;CAER,UAAU;CAEV,WAAW;CAEX,SAAS;CAET,SAAS;CAET,qBAAqB;CAErB,WAAWD;CAEX,YAAY;CAEZ,cAAcA;CAEd,SAASA;CAET,QAAQA;CAER,cAAcA;CAEd,UAAU;CAEV,YAAY;CAEZ,QAAQ;AACV,GAGMO,IAAW;CAAC;CAAQ;CAAU;AAAW;AAa/C,SAAgBC,EACd,GACA,GAKA,GACA,GAIA;CACA,IAAIC,GACEC,KAAQ,MAAc;EAC1B,IAAMC,IAAOC,EAAIC,EAAM,MAAM,GACvBC,IAASL;EAEf,IADA,IAAWE,GACP,CAACI,KAAU,CAACJ,KAAQA,MAASG,GAAQ;EACzC,IAAME,IAAIF,GAAQ,UAAU;EAC5B,IACEA,KACAE,IAAI,KACJL,EAAK,UAAUK,KACfL,EAAK,OAAOG,EAAO,MACnBH,EAAKK,IAAI,OAAOF,EAAOE,IAAI,IAC3B;GACA,AAAIL,EAAK,SAASK,KAAGD,EAAO,IAAIE,GAAQN,EAAK,MAAMK,CAAC,CAAC;GACrD;EACF;EACA,EAAO,QAAQC,GAAQN,CAAI;CAC7B,GACMM,IAASC,EACbC,GACAN,SACMO,EAAkBP,GAAON,CAAQ,IACtC,OACC,IAAW,KAAA,GACPM,EAAM,QAAMQ,EAAS,UAAUT,EAAIC,EAAM,IAAI,CAAC,GAClDH,EAAKW,CAAQ,GACNC,EAAKD,CAAQ,UAEhBD,EAAeP,GAAON,CAAQ,CACtC;CAaA,OAZAgB,QACQV,EAAM,OACX,MAAS;EACR,AAAIW,KAAMP,EAAO,SAAS,OAAO,UAAUL,EAAIY,CAAI,CAAC;CACtD,CACF,GACAD,QACQV,EAAM,cACN;EACJ,AAAII,EAAO,SAAS,SAAOP,EAAKO,EAAO,SAAS,KAAK;CACvD,CACF,GACOA;AACT"}
+{"version":3,"file":"orderbook.js","names":["optionalBoolean","commonProps","chartFrameProps","depthChartProps","orderBookProps","orderBookHeatmapProps","timeAndSalesProps","STREAMED","useBookWidget","previous","feed","list","raw","props","before","trades","n","engine","useChartEngine","factory","definedOptions","instance","bind","watch","book"],"sources":["../../../../../vue/src/components/Chart/orderbook.ts"],"sourcesContent":["import { watch, type PropType } from \"vue\";\nimport type {\n  ChartRendererPreference,\n  ChartTimeZone,\n  DepthChartLabels,\n  DepthChartPriceLine,\n  OrderBookColorConvention,\n  OrderBookDelta,\n  OrderBookHeatmapLabels,\n  OrderBookHeatmapScale,\n  OrderBookLabels,\n  OrderBookMode,\n  OrderBookSnapshot,\n  TimeAndSalesColumn,\n  TimeAndSalesLabels,\n} from \"minerva-design/charts/core\";\nimport { raw, useChartEngine, type EngineInstance } from \"./engine\";\nimport { chartFrameProps } from \"./props\";\nimport { definedOptions } from \"./trading\";\nimport type { ChartTrades } from \"./types\";\n\nconst optionalBoolean = { type: Boolean, default: undefined } as const;\n\n/** Options shared by the order book components */\nconst commonProps = {\n  ...chartFrameProps,\n  /** Color of the bids / buys (any CSS color); from `colorConvention` by default */\n  upColor: String,\n  /** Color of the asks / sells */\n  downColor: String,\n  /** `red-up` swaps the default colors (default `green-up`) */\n  colorConvention: String as PropType<OrderBookColorConvention>,\n  /** Decimals of the prices; detected from the data by default */\n  pricePrecision: Number,\n  /** Decimals of the sizes; detected from the data by default */\n  sizePrecision: Number,\n  /** Locale of the numbers and texts (`\"zh-CN\"`); the page language by default */\n  locale: String,\n  /** Formats the prices; overrides `pricePrecision` */\n  formatPrice: Function as PropType<(price: number) => string>,\n  /** Formats the sizes; overrides `sizePrecision` */\n  formatSize: Function as PropType<(size: number) => string>,\n  /** Font family of the texts (default: the theme font) */\n  fontFamily: String,\n  /** Font size of the texts, in pixels (default 12) */\n  fontSize: Number,\n  /** Accessible label */\n  ariaLabel: String,\n};\n\n/** Props of DepthChart */\nexport const depthChartProps = {\n  ...commonProps,\n  /** Book to draw, applied when the object changes (stream updates through the handle's `applyDeltas`) */\n  book: Object as PropType<OrderBookSnapshot>,\n  /** Visible range on each side of the mid price, as a fraction of the mid; fits the book by default */\n  range: Number,\n  /** Smallest and largest `range` reachable by zooming (default `[0.0005, 0.5]`) */\n  rangeLimits: Array as unknown as PropType<readonly [number, number]>,\n  /** Zoom around the mid with the wheel / pinch (default `true`) */\n  zoomable: optionalBoolean,\n  /** Stepped or straight curves (default `step`) */\n  curve: String as PropType<\"step\" | \"linear\">,\n  /** Cumulative amount in the base asset or the quote notional (default `base`) */\n  amount: String as PropType<\"base\" | \"quote\">,\n  /** Eased transitions between books (default `true`) */\n  animate: optionalBoolean,\n  /** Opacity of the areas, 0-1 (default 0.28) */\n  fillOpacity: Number,\n  /** Line and label at the mid price (default `true`) */\n  midLine: optionalBoolean,\n  /** Legend with the spread (default `true`) */\n  legend: optionalBoolean,\n  /** Grid lines (default `true`) */\n  grid: optionalBoolean,\n  /** Price and amount axes (default `true`) */\n  axes: optionalBoolean,\n  /** Hover readout (default `true`) */\n  tooltip: optionalBoolean,\n  /** Mirrored readout on the other side (default `true`) */\n  mirror: optionalBoolean,\n  /** Reference lines at prices (an order, a liquidation) */\n  priceLines: Array as PropType<readonly DepthChartPriceLine[]>,\n  /** Overrides of the built-in texts of the `locale` */\n  labels: Object as PropType<Partial<DepthChartLabels>>,\n};\n\n/** Props of OrderBook */\nexport const orderBookProps = {\n  ...commonProps,\n  /** Book to draw, applied when the object changes (stream updates through the handle's `applyDeltas`) */\n  book: Object as PropType<OrderBookSnapshot>,\n  /** Price of the spread row, colored by its last move; the mid price when omitted */\n  lastPrice: { type: Number as PropType<number | null>, default: undefined },\n  /** Sides shown (default `both`) */\n  mode: String as PropType<OrderBookMode>,\n  /** Price step the levels are grouped by (default 0: none) */\n  grouping: Number,\n  /** Rows per side; fills the height by default */\n  rows: Number,\n  /** Height of a row, in pixels (default 20) */\n  rowHeight: Number,\n  /** Depth bars behind the rows (default `cumulative`) */\n  depthBars: String as PropType<\"cumulative\" | \"level\" | \"none\">,\n  /** Total column in the base asset or the quote notional (default `base`) */\n  total: String as PropType<\"base\" | \"quote\">,\n  /** Columns, in order (default `[\"price\", \"size\", \"total\"]`) */\n  columns: Array as PropType<readonly (\"price\" | \"size\" | \"total\")[]>,\n  /** Flashes the changed sizes (default `true`) */\n  flash: optionalBoolean,\n  /** Duration of a flash, in ms (default 450) */\n  flashDuration: Number,\n  /** Highlights the levels at or above this size */\n  largeOrderThreshold: Number,\n  /** Column headers (default `true`) */\n  header: optionalBoolean,\n  /** Spread row between the sides (default `true`) */\n  spreadRow: optionalBoolean,\n  /** Bid / ask imbalance bar (default `true`) */\n  imbalance: optionalBoolean,\n  /** Hover summary of the cumulative levels (default `true`) */\n  tooltip: optionalBoolean,\n  /** Overrides of the built-in texts of the `locale` */\n  labels: Object as PropType<Partial<OrderBookLabels>>,\n};\n\n/** Props of OrderBookHeatmap */\nexport const orderBookHeatmapProps = {\n  ...commonProps,\n  /** Book, applied when the object changes (stream updates through the handle's `applyDeltas`) */\n  book: Object as PropType<OrderBookSnapshot>,\n  /** Trades; when the array grows, only the appended ones are added */\n  trades: Array as PropType<ChartTrades>,\n  /** Price step of the rows; detected from the book by default */\n  tickSize: Number,\n  /** Duration of a column, in ms (default 100) */\n  interval: Number,\n  /** Time shown, in ms (default 60000) */\n  window: Number,\n  /** Time kept for panning back, in ms (default 300000) */\n  history: Number,\n  /** Price levels kept on each side (default 160) */\n  depth: Number,\n  /** Price range shown around the mid; from `depth` by default */\n  priceSpan: Number,\n  /** Scale of the sizes to the colors (default `log`) */\n  colorScale: String as PropType<OrderBookHeatmapScale>,\n  /** Contrast of the colors (default 1) */\n  contrast: Number,\n  /** Size drawn with the last color; follows the data by default */\n  maxSize: Number,\n  /** Unit after the sizes of the legend and tooltip, e.g. \"BTC\" */\n  sizeUnit: String,\n  /** Color legend with its size range at the top left (default `true`) */\n  legend: optionalBoolean,\n  /** Colors from no liquidity to `maxSize` (any CSS colors) */\n  colors: Array as PropType<readonly string[]>,\n  /** Trades as bubbles (default `true`) */\n  bubbles: optionalBoolean,\n  /** Diameter of the largest bubble, in pixels (default 28) */\n  bubbleSize: Number,\n  /** Trade volume of the largest bubble; follows the data by default */\n  bubbleVolume: Number,\n  /** Best bid / ask lines (default `true`) */\n  bestLines: optionalBoolean,\n  /** Size profile of the current book at the right (default `true`) */\n  profile: optionalBoolean,\n  /** Zoom and pan (default `true`) */\n  interactive: optionalBoolean,\n  /** Hover readout (default `true`) */\n  tooltip: optionalBoolean,\n  /** Backend: WebGPU, then WebGL2, WebGL, Canvas2D (default `auto`) */\n  renderer: String as PropType<ChartRendererPreference>,\n  /** Clock of the time axis and the tooltip: the local time or UTC, the clock of most exchanges (default `local`) */\n  timeZone: String as PropType<ChartTimeZone>,\n  /** Overrides of the built-in texts of the `locale` */\n  labels: Object as PropType<Partial<OrderBookHeatmapLabels>>,\n};\n\n/** Props of TimeAndSales */\nexport const timeAndSalesProps = {\n  ...commonProps,\n  /** Trades, oldest first; when the array grows, only the appended ones are added (other changes replace the tape) */\n  trades: Array as PropType<ChartTrades>,\n  /** Trades kept (default 200000) */\n  capacity: Number,\n  /** Height of a row, in pixels (default 20) */\n  rowHeight: Number,\n  /** Columns, in order (default `[\"time\", \"price\", \"size\"]`) */\n  columns: Array as PropType<readonly TimeAndSalesColumn[]>,\n  /** Hides the trades below this size (default 0) */\n  minSize: Number,\n  /** Highlights the trades at or above this size */\n  largeTradeThreshold: Number,\n  /** Merges the consecutive trades of the same side and price (default `false`) */\n  aggregate: optionalBoolean,\n  /** Price color: the side of the trade or the tick direction (default `side`) */\n  priceColor: String as PropType<\"side\" | \"tick\">,\n  /** Pauses the tape while hovered (default `true`) */\n  pauseOnHover: optionalBoolean,\n  /** Slides the new rows in (default `true`) */\n  animate: optionalBoolean,\n  /** Column headers (default `true`) */\n  header: optionalBoolean,\n  /** Milliseconds in the times (default `true`) */\n  milliseconds: optionalBoolean,\n  /** Clock of the default time format: the local time or UTC, the clock of most exchanges (default `local`) */\n  timeZone: String as PropType<ChartTimeZone>,\n  /** Formats the times */\n  formatTime: Function as PropType<(time: number) => string>,\n  /** Overrides of the built-in texts of the `locale` */\n  labels: Object as PropType<Partial<TimeAndSalesLabels>>,\n};\n\n/** Props passed through engine methods rather than the options */\nconst STREAMED = [\"book\", \"trades\", \"lastPrice\"];\n\ninterface Widget<O> extends EngineInstance<O> {\n  setBook?(snapshot: OrderBookSnapshot): void;\n  applyDeltas?(deltas: OrderBookDelta | readonly OrderBookDelta[]): void;\n}\n\n/**\n * Mounts an order book engine: the options are every set prop but the\n * streamed ones; `book` goes through `setBook` when the object changes,\n * `trades` through `add` (the appended trades) / `replace` (any other\n * change)\n */\nexport function useBookWidget<O, I extends Widget<O>>(\n  factory: (container: HTMLElement, options: O) => I,\n  props: Record<string, unknown> & {\n    book?: OrderBookSnapshot;\n    trades?: ChartTrades;\n    deep?: boolean;\n  },\n  bind: (engine: I) => Array<() => void>,\n  trades?: {\n    add: (engine: I, trades: ChartTrades) => void;\n    replace: (engine: I, trades: ChartTrades) => void;\n  },\n) {\n  let previous: ChartTrades | undefined;\n  const feed = (engine: I) => {\n    const list = raw(props.trades);\n    const before = previous;\n    previous = list;\n    if (!trades || !list || list === before) return;\n    const n = before?.length ?? 0;\n    if (\n      before &&\n      n > 0 &&\n      list.length >= n &&\n      list[0] === before[0] &&\n      list[n - 1] === before[n - 1]\n    ) {\n      if (list.length > n) trades.add(engine, list.slice(n));\n      return;\n    }\n    trades.replace(engine, list);\n  };\n  const engine = useChartEngine<O, I>(\n    factory,\n    props,\n    () => definedOptions<O>(props, STREAMED),\n    (instance) => {\n      previous = undefined;\n      if (props.book) instance.setBook?.(raw(props.book));\n      feed(instance);\n      return bind(instance);\n    },\n    () => definedOptions(props, STREAMED),\n  );\n  watch(\n    () => props.book,\n    (book) => {\n      if (book) engine.instance.value?.setBook?.(raw(book));\n    },\n  );\n  watch(\n    () => props.trades,\n    () => {\n      if (engine.instance.value) feed(engine.instance.value);\n    },\n  );\n  return engine;\n}\n"],"mappings":";;;;;AAqBA,IAAMA,IAAkB;CAAE,MAAM;CAAS,SAAS,KAAA;AAAU,GAGtDC,IAAc;CAClB,GAAGC;CAEH,SAAS;CAET,WAAW;CAEX,iBAAiB;CAEjB,gBAAgB;CAEhB,eAAe;CAEf,QAAQ;CAER,aAAa;CAEb,YAAY;CAEZ,YAAY;CAEZ,UAAU;CAEV,WAAW;AACb,GAGaC,IAAkB;CAC7B,GAAGF;CAEH,MAAM;CAEN,OAAO;CAEP,aAAa;CAEb,UAAUD;CAEV,OAAO;CAEP,QAAQ;CAER,SAASA;CAET,aAAa;CAEb,SAASA;CAET,QAAQA;CAER,MAAMA;CAEN,MAAMA;CAEN,SAASA;CAET,QAAQA;CAER,YAAY;CAEZ,QAAQ;AACV,GAGaI,IAAiB;CAC5B,GAAGH;CAEH,MAAM;CAEN,WAAW;EAAE,MAAM;EAAmC,SAAS,KAAA;CAAU;CAEzE,MAAM;CAEN,UAAU;CAEV,MAAM;CAEN,WAAW;CAEX,WAAW;CAEX,OAAO;CAEP,SAAS;CAET,OAAOD;CAEP,eAAe;CAEf,qBAAqB;CAErB,QAAQA;CAER,WAAWA;CAEX,WAAWA;CAEX,SAASA;CAET,QAAQ;AACV,GAGaK,IAAwB;CACnC,GAAGJ;CAEH,MAAM;CAEN,QAAQ;CAER,UAAU;CAEV,UAAU;CAEV,QAAQ;CAER,SAAS;CAET,OAAO;CAEP,WAAW;CAEX,YAAY;CAEZ,UAAU;CAEV,SAAS;CAET,UAAU;CAEV,QAAQD;CAER,QAAQ;CAER,SAASA;CAET,YAAY;CAEZ,cAAc;CAEd,WAAWA;CAEX,SAASA;CAET,aAAaA;CAEb,SAASA;CAET,UAAU;CAEV,UAAU;CAEV,QAAQ;AACV,GAGaM,IAAoB;CAC/B,GAAGL;CAEH,QAAQ;CAER,UAAU;CAEV,WAAW;CAEX,SAAS;CAET,SAAS;CAET,qBAAqB;CAErB,WAAWD;CAEX,YAAY;CAEZ,cAAcA;CAEd,SAASA;CAET,QAAQA;CAER,cAAcA;CAEd,UAAU;CAEV,YAAY;CAEZ,QAAQ;AACV,GAGMO,IAAW;CAAC;CAAQ;CAAU;AAAW;AAa/C,SAAgBC,EACd,GACA,GAKA,GACA,GAIA;CACA,IAAIC,GACEC,KAAQ,MAAc;EAC1B,IAAMC,IAAOC,EAAIC,EAAM,MAAM,GACvBC,IAASL;EAEf,IADA,IAAWE,GACP,CAACI,KAAU,CAACJ,KAAQA,MAASG,GAAQ;EACzC,IAAME,IAAIF,GAAQ,UAAU;EAC5B,IACEA,KACAE,IAAI,KACJL,EAAK,UAAUK,KACfL,EAAK,OAAOG,EAAO,MACnBH,EAAKK,IAAI,OAAOF,EAAOE,IAAI,IAC3B;GACA,AAAIL,EAAK,SAASK,KAAGD,EAAO,IAAIE,GAAQN,EAAK,MAAMK,CAAC,CAAC;GACrD;EACF;EACA,EAAO,QAAQC,GAAQN,CAAI;CAC7B,GACMM,IAASC,EACbC,GACAN,SACMO,EAAkBP,GAAON,CAAQ,IACtC,OACC,IAAW,KAAA,GACPM,EAAM,QAAMQ,EAAS,UAAUT,EAAIC,EAAM,IAAI,CAAC,GAClDH,EAAKW,CAAQ,GACNC,EAAKD,CAAQ,UAEhBD,EAAeP,GAAON,CAAQ,CACtC;CAaA,OAZAgB,QACQV,EAAM,OACX,MAAS;EACR,AAAIW,KAAMP,EAAO,SAAS,OAAO,UAAUL,EAAIY,CAAI,CAAC;CACtD,CACF,GACAD,QACQV,EAAM,cACN;EACJ,AAAII,EAAO,SAAS,SAAOP,EAAKO,EAAO,SAAS,KAAK;CACvD,CACF,GACOA;AACT"}

package/dist/weapp/charts/canvas.js

@@ -495,7 +495,8 @@ var normalizeData = (data, resolveX, resolveY = toNumber) => {
 		q1: null,
 		q3: null,
 		outliers: null,
-		details: null
+		details: null,
+		ids: null
 	};
 	if (isColumns(data)) {
 		const count = data.y.length;
@@ -546,6 +547,7 @@ var normalizeData = (data, resolveX, resolveY = toNumber) => {
 	let q3 = null;
 	let outliers = null;
 	let details = null;
+	let ids = null;
 	const nanColumn = () => new Float64Array(count).fill(NaN);
 	for (let i = 0; i < count; i++) {
 		const item = list[i];
@@ -586,6 +588,10 @@ var normalizeData = (data, resolveX, resolveY = toNumber) => {
 				details ??= new Array(count);
 				details[i] = d.details;
 			}
+			if (d.id !== void 0) {
+				ids ??= new Array(count);
+				ids[i] = d.id;
+			}
 		} else {
 			x[i] = i;
 			y[i] = NaN;
@@ -603,7 +609,8 @@ var normalizeData = (data, resolveX, resolveY = toNumber) => {
 		q1,
 		q3,
 		outliers,
-		details
+		details,
+		ids
 	});
 };
 /** First index whose x is >= value (sorted x) */
@@ -1512,6 +1519,38 @@ var decades = (range) => {
 	const hi = Math.ceil(range[1] - 1e-9);
 	return [lo, hi > lo ? hi : lo + 1];
 };
+/** Exponent of `m × 10^k`, exact for the values of the ticks */
+var niceExponent = (m, k) => Math.log10(Number((m * 10 ** k).toPrecision(12)));
+/**
+* A log range widened to the closest 1, 2 or 5 × 10^k bounds (the values
+* 900 - 140k -> 500 - 200k), tighter than whole decades
+*/
+var niceLogRange = (range) => {
+	const below = (e) => {
+		const k = Math.floor(e + 1e-9);
+		let best = k;
+		for (const m of [2, 5]) {
+			const v = niceExponent(m, k);
+			if (v <= e + 1e-9) best = v;
+		}
+		return best;
+	};
+	const above = (e) => {
+		const k = Math.floor(e - 1e-9);
+		for (const m of [
+			1,
+			2,
+			5
+		]) {
+			const v = niceExponent(m, k);
+			if (v >= e - 1e-9) return v;
+		}
+		return k + 1;
+	};
+	const lo = below(range[0]);
+	const hi = above(range[1]);
+	return [lo, hi > lo + 1e-9 ? hi : above(lo + 1e-6)];
+};
 /**
 * Plots a series through a map: its columns, bars, stacks and lower
 * edges (bars / areas of the right axis start at `zero`)
@@ -1861,7 +1900,7 @@ var buildModel = (options, theme, hidden, cache, resolver = null) => {
 			xRange = [xRange[0] - pad, xRange[1] + pad];
 		}
 		if ((xOpts?.nice ?? (pointsOnly && xType === "linear")) && xType === "linear") xRange = niceDomain(xRange[0], xRange[1], xOpts?.tickCount ?? 6);
-		if (xLog && xOpts?.nice !== false) xRange = decades(xRange);
+		if (xLog && xOpts?.nice !== false) xRange = niceLogRange(xRange);
 	}
 	const xBound = (v) => xLog ? Math.log10(v) : v;
 	if (xOpts?.min !== void 0) xRange[0] = xBound(xOpts.min);
@@ -2176,7 +2215,7 @@ var drawBackground = (ctx, input) => {
 	}
 };
 var 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;
-var inside = (r, plot) => r.x >= plot.x && r.y >= plot.y && r.x + r.width <= plot.x + plot.width && r.y + r.height <= plot.y + plot.height;
+var inside$1 = (r, plot) => r.x >= plot.x && r.y >= plot.y && r.x + r.width <= plot.x + plot.width && r.y + r.height <= plot.y + plot.height;
 /** Text with a halo in the background color (readable over data) */
 var haloText = (ctx, text, x, y, color, halo) => {
 	ctx.lineWidth = 3;
@@ -2231,7 +2270,7 @@ var placeLabels = (labels, plot, measure, height, occupied = []) => {
 			},
 			above,
 			below
-		]).find((c) => inside(c, plot) && !occupied.some((o) => overlaps(o, c)));
+		]).find((c) => inside$1(c, plot) && !occupied.some((o) => overlaps(o, c)));
 		if (!box) continue;
 		occupied.push(box);
 		placed.push({
@@ -3569,44 +3608,180 @@ var ARROW_HEAD = {
 	length: 6,
 	half: 3.5
 };
-/** Bars (or dots) of every category, the first visible one per category */
-var rowSpans = (model, sc) => {
-	const rows = /* @__PURE__ */ new Map();
+var taskIndex = (model, sc, valuePx, categoryPx) => {
+	const index = {
+		boxes: [],
+		byId: /* @__PURE__ */ new Map(),
+		byRow: /* @__PURE__ */ new Map(),
+		ids: /* @__PURE__ */ new Set()
+	};
+	const categories = model.x.type === "category" ? model.x.categories : null;
 	for (const s of model.series) {
-		if (s.hidden || !s.tooltip) continue;
 		if (s.type !== "bar" && s.type !== "scatter") continue;
+		const ids = s.raw.ids;
+		if (ids) {
+			for (const id of ids) if (id !== void 0) index.ids.add(id);
+		}
+		if (s.hidden || !s.tooltip) continue;
 		const { x, y, count } = s.cols;
 		const bar = s.type === "bar" && s.barBase && s.barTop;
-		const half = bar ? s.barHalfWidth / Math.abs(sc.xPerPx) : dotSize(s, 0) / 2;
+		const offset = slotOffset(s);
 		for (let i = 0; i < count; i++) {
-			const k = Math.round(x[i]);
-			if (rows.has(k)) continue;
 			const start = bar ? s.barBase[i] : y[i];
 			const end = bar ? s.barTop[i] : y[i];
-			if (!Number.isFinite(start) || !Number.isFinite(end)) continue;
-			rows.set(k, {
-				at: x[i] + slotOffset(s),
-				start: Math.min(start, end),
-				end: Math.max(start, end),
+			if (!Number.isFinite(x[i]) || !Number.isFinite(start) || !Number.isFinite(end)) continue;
+			const half = bar ? s.barHalfWidth / Math.abs(sc.xPerPx) : dotSize(s, i) / 2;
+			const p0 = valuePx(Math.min(start, end));
+			const p1 = valuePx(Math.max(start, end));
+			const pad = bar ? 0 : half;
+			const box = {
+				c: categoryPx(x[i] + offset),
 				half,
+				start: p0,
+				end: p1,
+				lo: Math.min(p0, p1) - pad,
+				hi: Math.max(p0, p1) + pad,
 				dot: !bar
-			});
-		}
+			};
+			index.boxes.push(box);
+			const id = ids?.[i];
+			if (id !== void 0 && !index.byId.has(id)) index.byId.set(id, box);
+			const row = categories ? categories[Math.round(x[i])] : String(s.raw.x[i]);
+			if (row !== void 0 && !index.byRow.has(row)) index.byRow.set(row, box);
+		}
+	}
+	return index;
+};
+/** Run of an arrow out of a bar before it turns, in pixels */
+var ARROW_RUN = 8;
+/** Distance an arrow keeps from the bars it passes, in pixels */
+var ARROW_CLEARANCE = 4;
+/** Value-axis extents of bars (with the clearance), sorted and merged */
+var blockedLanes = (boxes) => {
+	const list = boxes.map((o) => [o.lo - ARROW_CLEARANCE, o.hi + ARROW_CLEARANCE]).sort((p, q) => p[0] - q[0]);
+	const out = [];
+	for (const r of list) {
+		const last = out[out.length - 1];
+		if (last && r[0] <= last[1]) last[1] = Math.max(last[1], r[1]);
+		else out.push(r);
 	}
-	return rows;
+	return out;
+};
+var inside = (lanes, v) => lanes.some(([lo, hi]) => v > lo + 1e-6 && v < hi - 1e-6);
+/** First free lane from `from` towards `to` (direction `dir`), or null */
+var freeLane = (lanes, from, to, dir) => {
+	const candidates = [from];
+	for (const [lo, hi] of lanes) candidates.push(lo, hi);
+	let best = null;
+	for (const v of candidates) {
+		const along = dir * (v - from);
+		if (along < 0 || dir * (to - v) < 0 || inside(lanes, v)) continue;
+		if (best === null || along < dir * (best - from)) best = v;
+	}
+	return best;
+};
+/** Free lane closest to `want` (ties: the lower one) */
+var nearestLane = (lanes, want) => {
+	const hit = lanes.find(([lo, hi]) => want > lo + 1e-6 && want < hi - 1e-6);
+	if (!hit) return want;
+	const [lo, hi] = hit;
+	return want - lo <= hi - want ? lo : hi;
+};
+/** Drops repeated points and the middle of straight runs */
+var straighten = (points) => {
+	const out = [];
+	const same = (p, q) => Math.abs(p - q) < 1e-6;
+	for (const p of points) {
+		const last = out[out.length - 1];
+		if (last && same(last[0], p[0]) && same(last[1], p[1])) continue;
+		const prev = out[out.length - 2];
+		if (prev && last && (same(prev[0], last[0]) && same(last[0], p[0]) || same(prev[1], last[1]) && same(last[1], p[1]))) out.pop();
+		out.push(p);
+	}
+	return out;
+};
+/**
+* Route of an arrow as (value pixel, category pixel) corners, from the end
+* of `a` (`ev`) to the base of the head before `b` (`base`): one lane
+* across the rows clear of the other bars, searched from the predecessor
+* towards the successor; else (no such lane, or the successor starts
+* before the predecessor ends) along the gaps between the rows, crossing
+* every row in a free lane
+*/
+var routeArrow = (a, b, ev, base, dir, boxes) => {
+	const ca = a.c;
+	const cb = b.c;
+	const exit = ev + dir * ARROW_RUN;
+	const room = dir * (base - exit) >= 0;
+	const lo = Math.min(ca, cb);
+	const hi = Math.max(ca, cb);
+	const others = hi - lo < .5 ? [] : boxes.filter((o) => o !== a && o !== b && o.c + o.half > lo && o.c - o.half < hi);
+	if (room) {
+		const lane = freeLane(blockedLanes(others), exit, base, dir);
+		if (lane !== null) return straighten([
+			[ev, ca],
+			[lane, ca],
+			[lane, cb],
+			[base, cb]
+		]);
+	}
+	const side = Math.sign(cb - ca) || 1;
+	const rows = /* @__PURE__ */ new Map();
+	for (const o of others) {
+		if (Math.abs(o.c - ca) < .5 || Math.abs(o.c - cb) < .5) continue;
+		const key = Math.round(o.c * 2);
+		const row = rows.get(key);
+		if (row) {
+			row.half = Math.max(row.half, o.half);
+			row.of.push(o);
+		} else rows.set(key, {
+			c: o.c,
+			half: o.half,
+			of: [o]
+		});
+	}
+	const stops = [
+		{
+			c: ca,
+			half: a.half,
+			lanes: []
+		},
+		...[...rows.values()].sort((p, q) => side * (p.c - q.c)).map((r) => ({
+			c: r.c,
+			half: r.half,
+			lanes: blockedLanes(r.of)
+		})),
+		{
+			c: cb,
+			half: b.half,
+			lanes: []
+		}
+	];
+	const back = base - dir * ARROW_RUN;
+	const points = [[ev, ca], [exit, ca]];
+	let v = exit;
+	for (let k = 0; k + 1 < stops.length; k++) {
+		const from = stops[k];
+		const to = stops[k + 1];
+		const m = Math.abs(to.c - from.c) < .5 ? from.c + side * (Math.max(from.half, to.half) + ARROW_CLEARANCE) : (from.c + side * from.half + to.c - side * to.half) / 2;
+		const lane = k + 2 === stops.length ? room && dir * (base - v) >= 0 ? v : back : nearestLane(to.lanes, room ? v : back);
+		if (lane !== v) {
+			points.push([v, m], [lane, m]);
+			v = lane;
+		}
+	}
+	points.push([v, cb], [base, cb]);
+	return straighten(points);
 };
 /**
 * Dependency arrows (`dependencies`, Gantt charts): from the end of the
-* predecessor to the start of the successor; when the successor starts
-* too early the line turns around between the rows
+* predecessor to the start of the successor, both found by point `id`
+* (else by category), on any x axis and orientation. The line crosses the
+* rows in a lane clear of the other bars, or goes along the gaps between
+* the rows (also when the successor starts too early)
 */
 var dependencyArrows = (model, sc, dependencies) => {
-	if (!dependencies.length || model.x.type !== "category") return [];
-	const rows = rowSpans(model, sc);
-	const index = /* @__PURE__ */ new Map();
-	model.x.categories.forEach((c, i) => {
-		if (!index.has(c)) index.set(c, i);
-	});
+	if (!dependencies.length) return [];
 	const horizontal = sc.horizontal;
 	const pt = (v, c) => horizontal ? {
 		x: v,
@@ -3624,33 +3799,24 @@ var dependencyArrows = (model, sc, dependencies) => {
 		return horizontal ? p.y : p.x;
 	};
 	const dir = Math.sign(valuePx(sc.view.y[1]) - valuePx(sc.view.y[0])) || 1;
-	const rowPx = Math.abs(categoryPx(1) - categoryPx(0));
+	const tasks = taskIndex(model, sc, valuePx, categoryPx);
+	const find = (key) => tasks.byId.get(key) ?? (tasks.ids.has(key) ? void 0 : tasks.byRow.get(key));
 	const { length, half } = ARROW_HEAD;
-	const gap = 8;
 	const out = [];
 	for (const d of dependencies) {
-		const a = rows.get(index.get(d.from) ?? NaN);
-		const b = rows.get(index.get(d.to) ?? NaN);
+		const a = find(d.from);
+		const b = find(d.to);
 		if (!a || !b || a === b) continue;
-		const ev = valuePx(a.end) + (a.dot ? dir * a.half : 0);
-		const ca = categoryPx(a.at);
-		const sv = valuePx(b.start) - dir * (b.dot ? b.half + 1 : 1);
-		const cb = categoryPx(b.at);
+		const ev = a.end + (a.dot ? dir * a.half : 0);
+		const sv = b.start - dir * (b.dot ? b.half + 1 : 1);
 		const base = sv - dir * length;
-		const points = [pt(ev, ca)];
-		const exit = ev + dir * gap;
-		if (dir * (base - exit) >= 0) points.push(pt(exit, ca), pt(exit, cb), pt(base, cb));
-		else {
-			const between = ca + (Math.sign(cb - ca) || 1) * Math.max(a.half + 3, rowPx / 2);
-			const back = base - dir * gap;
-			points.push(pt(exit, ca), pt(exit, between), pt(back, between), pt(back, cb), pt(base, cb));
-		}
+		const route = routeArrow(a, b, ev, base, dir, tasks.boxes);
 		out.push({
-			points,
+			points: route.map(([v, c]) => pt(v, c)),
 			head: [
-				pt(sv, cb),
-				pt(base, cb - half),
-				pt(base, cb + half)
+				pt(sv, b.c),
+				pt(base, b.c - half),
+				pt(base, b.c + half)
 			],
 			color: d.color,
 			width: 1.25
@@ -6872,6 +7038,16 @@ var ganttSeries = (tasks, options = {}) => {
 	const taskName = options.taskName ?? names.tasks;
 	const progressName = options.progressName ?? names.progress;
 	const separator = /^(zh|ja)\b/i.test(locale) ? "、" : ", ";
+	const idOf = (t) => t.id ?? t.name;
+	const rowOf = (t) => t.row ?? t.name;
+	const byKey = /* @__PURE__ */ new Map();
+	for (const t of tasks) if (!byKey.has(idOf(t))) byKey.set(idOf(t), t);
+	for (const t of tasks) if (!byKey.has(t.name)) byKey.set(t.name, t);
+	const point = (t) => ({
+		x: rowOf(t),
+		id: idOf(t),
+		...rowOf(t) !== t.name ? { label: t.name } : {}
+	});
 	const groups = [];
 	for (const t of tasks) {
 		const g = t.group ?? taskName;
@@ -6902,10 +7078,10 @@ var ganttSeries = (tasks, options = {}) => {
 			});
 			if (t.dependencies?.length) details.push({
 				name: options.dependenciesName ?? rows.dependencies,
-				value: t.dependencies.join(separator)
+				value: t.dependencies.map((k) => byKey.get(k)?.name ?? k).join(separator)
 			});
 			return {
-				x: t.name,
+				...point(t),
 				y0: time(t.start),
 				y: time(t.end ?? t.start),
 				...t.color ? { color: t.color } : {},
@@ -6927,7 +7103,7 @@ var ganttSeries = (tasks, options = {}) => {
 			const end = time(t.end ?? t.start);
 			const share = Math.min(1, Math.max(0, t.progress ?? 0));
 			return {
-				x: t.name,
+				x: rowOf(t),
 				y0: start,
 				y: start + (end - start) * share,
 				label: formatProgress(share),
@@ -6944,7 +7120,7 @@ var ganttSeries = (tasks, options = {}) => {
 		pointSize: 13,
 		opacity: 1,
 		data: milestones.map((t) => ({
-			x: t.name,
+			...point(t),
 			y: time(t.start),
 			...t.color ? { color: t.color } : {}
 		}))
@@ -6956,19 +7132,19 @@ var ganttSeries = (tasks, options = {}) => {
 		if (v > hi) hi = v;
 	}
 	const pad = Number.isFinite(hi - lo) ? Math.max((hi - lo) * .025, 1) : 0;
-	const known = new Set(tasks.map((t) => t.name));
 	const dependencies = [];
-	if (options.dependencyArrows !== false) for (const t of tasks) for (const from of t.dependencies ?? []) {
-		if (from === t.name || !known.has(from)) continue;
+	if (options.dependencyArrows !== false) for (const t of tasks) for (const key of t.dependencies ?? []) {
+		const from = byKey.get(key);
+		if (!from || from === t) continue;
 		dependencies.push({
-			from,
-			to: t.name,
+			from: idOf(from),
+			to: idOf(t),
 			...options.dependencyColor ? { color: options.dependencyColor } : {}
 		});
 	}
 	return {
 		series,
-		categories: tasks.map((t) => t.name),
+		categories: [...new Set(tasks.map(rowOf))],
 		domain: Number.isFinite(lo) ? [lo - pad, hi + pad] : [0, 1],
 		dependencies
 	};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minerva-design",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Minerva Design: React, Vue, Angular, Web Components and native platform components with shared design tokens and contracts",
   "license": "MIT",
   "author": "fwx5618177 <fwx5618177@gmail.com>",