@trdrs/quickcharts 2.2.0 → 2.4.0

package/dist/index.js

@@ -110,6 +110,9 @@ import {
   ICON_CATEGORIES,
   isEmojiGlyph
 } from "./chunk-QYGSDD2Q.js";
+import {
+  symbolNames
+} from "./chunk-GFQQSY47.js";
 
 // src/datafeed.ts
 function olderPageVerdict(page, askedTo, alreadyHopped) {
@@ -3079,7 +3082,8 @@ var FEATURE_KEYS = {
   replay: "flag",
   history: "flag",
   sessions: "flag",
-  crosshair: "flag"
+  crosshair: "flag",
+  navigation: "flag"
 };
 var TOP_BAR_KEYS = {
   symbol: "flag",
@@ -3108,7 +3112,9 @@ var UI_KEYS = {
   toasts: "flag",
   symbolSearch: "flag",
   indicatorPicker: "flag",
-  indicatorSettings: "flag"
+  indicatorSettings: "flag",
+  priceScale: "flag",
+  crosshair: { horizontal: "flag", labels: "flag", solid: "flag" }
 };
 function checkKeys(path, value, keys) {
   if (value === void 0) return;
@@ -3136,7 +3142,8 @@ function resolveFeatures(config) {
     replay: on(config?.replay),
     history: on(config?.history),
     sessions: on(config?.sessions),
-    crosshair: on(config?.crosshair)
+    crosshair: on(config?.crosshair),
+    navigation: on(config?.navigation)
   };
 }
 var shown = (value) => value !== false;
@@ -3152,6 +3159,9 @@ function resolveUi(config, features, offered = {}) {
   const inLegend = (key) => legend2 && (typeof legendConfig !== "object" || shown(legendConfig[key]));
   const symbolSearch = shown(config?.symbolSearch);
   const indicatorPicker = shown(config?.indicatorPicker);
+  const crosshairConfig = config?.crosshair;
+  const crosshair = features.crosshair && shown(crosshairConfig);
+  const inCrosshair = (key) => crosshair && (typeof crosshairConfig !== "object" || shown(crosshairConfig[key]));
   return {
     topBar,
     symbolPill: inBar("symbol") && symbolSearch,
@@ -3175,13 +3185,19 @@ function resolveUi(config, features, offered = {}) {
     legend: legend2,
     legendValues: inLegend("values"),
     marketStatus: inLegend("marketStatus"),
-    navigation: shown(config?.navigation),
+    navigation: features.navigation && shown(config?.navigation),
     contextMenu: shown(config?.contextMenu),
     replayTransport: features.replay && shown(config?.replayTransport),
     toasts: shown(config?.toasts),
     symbolSearch,
     indicatorPicker,
-    indicatorSettings: shown(config?.indicatorSettings)
+    indicatorSettings: shown(config?.indicatorSettings),
+    priceScale: shown(config?.priceScale),
+    crosshair,
+    crosshairHorizontal: inCrosshair("horizontal"),
+    crosshairLabels: inCrosshair("labels"),
+    // Solid is the one part that is off unless named: a crosshair is dashed by default.
+    crosshairSolid: crosshair && typeof crosshairConfig === "object" && crosshairConfig.solid === true
   };
 }
 function canCopyImage() {
@@ -3310,6 +3326,29 @@ function styleOptions(style, paint) {
       return candleOptions(paint);
   }
 }
+function fadedStyleOptions(style, paint, alpha) {
+  const a = Math.min(1, Math.max(0, alpha));
+  const up = paint.appearance.upColor;
+  const down = paint.appearance.downColor;
+  switch (style) {
+    case "line":
+    case "stepline":
+      return { color: withAlpha2(paint.canvas.neutral, a) };
+    case "area":
+      return { lineColor: withAlpha2(up, a), topColor: withAlpha2(up, 0.28 * a), bottomColor: withAlpha2(up, 0.04 * a) };
+    case "baseline":
+      return {
+        topLineColor: withAlpha2(up, a),
+        bottomLineColor: withAlpha2(down, a),
+        topFillColor1: withAlpha2(up, 0.28 * a),
+        topFillColor2: withAlpha2(up, 0.04 * a),
+        bottomFillColor1: withAlpha2(down, 0.04 * a),
+        bottomFillColor2: withAlpha2(down, 0.28 * a)
+      };
+    default:
+      return styleOptions(style, paint);
+  }
+}
 function lineOptions(paint) {
   return { color: paint.canvas.neutral, lineWidth: 2 };
 }
@@ -4960,6 +4999,7 @@ import {
   createChart as createRenderer,
   HistogramSeries as HistogramSeries2,
   LineSeries as LineSeries4,
+  LineStyle as LineStyle3,
   TrackingModeExitMode
 } from "lightweight-charts";
 
@@ -5014,6 +5054,59 @@ function coerceScaleMode(raw) {
   return SCALE_MODES.includes(raw ?? "") ? raw : "normal";
 }
 
+// src/widget/styleMorph.ts
+var STYLE_MORPH_MS = 500;
+function morphEase(t) {
+  const clamped = Math.min(1, Math.max(0, t));
+  return (1 - Math.cos(Math.PI * clamped)) / 2;
+}
+function foldBar(bar, fold) {
+  const keep = 1 - Math.min(1, Math.max(0, fold));
+  return {
+    time: bar.t,
+    open: bar.c + (bar.o - bar.c) * keep,
+    high: bar.c + (bar.h - bar.c) * keep,
+    low: bar.c + (bar.l - bar.c) * keep,
+    close: bar.c
+  };
+}
+function startStyleMorph(deps) {
+  const frame = deps.frame ?? ((tick2) => requestAnimationFrame(tick2));
+  const cancel = deps.cancelFrame ?? ((handle2) => cancelAnimationFrame(handle2));
+  const now = deps.now ?? (() => performance.now());
+  const start = now();
+  let handle = null;
+  let ended = false;
+  const draw = (t) => {
+    const p = morphEase(t);
+    const fold = deps.direction === "fold" ? p : 1 - p;
+    deps.bars.setData(deps.shown().map((bar) => foldBar(bar, fold)));
+    deps.fadeLine(fold);
+  };
+  const finish = () => {
+    if (ended) return;
+    ended = true;
+    if (handle !== null) cancel(handle);
+    handle = null;
+    draw(1);
+    deps.done();
+  };
+  const tick = () => {
+    handle = null;
+    if (ended) return;
+    const t = (now() - start) / STYLE_MORPH_MS;
+    if (t >= 1) {
+      finish();
+      return;
+    }
+    draw(t);
+    handle = frame(tick);
+  };
+  draw(0);
+  handle = frame(tick);
+  return { running: () => !ended, finish };
+}
+
 // src/widget/baselineLevel.ts
 var BASELINE_SCREEN_PERCENT = 50;
 var BASELINE_DRIFT_PX = 0.5;
@@ -5707,8 +5800,8 @@ function bundledGlyphSource(glyph2) {
 }
 
 // src/pointerInput.ts
-function pointerLock(locked) {
-  const on = !locked;
+function pointerLock(locked, navigable = true) {
+  const on = !locked && navigable;
   return {
     handleScroll: on,
     handleScale: { mouseWheel: on, pinch: false, axisPressedMouseMove: on, axisDoubleClickReset: on },
@@ -6822,7 +6915,7 @@ function attachDrawings(options) {
   const locked = () => allLocked || workflow().allLocked === true;
   const changed = () => events.onChange?.();
   const lockPointer = (locked2) => {
-    const lock = pointerLock(locked2);
+    const lock = pointerLock(locked2, options.navigable ?? true);
     chart.applyOptions({ handleScroll: lock.handleScroll, handleScale: lock.handleScale });
     container.style.touchAction = lock.touchAction;
   };
@@ -10336,6 +10429,7 @@ function attachDrawingsPlane(deps) {
   const handle = attachDrawings({
     chart: deps.chart,
     series: deps.series,
+    navigable: deps.navigable,
     container: deps.container,
     symbol: deps.symbol,
     timeframe: deps.timeframe,
@@ -12584,42 +12678,6 @@ function attachCompare(chart, deps) {
   return handle;
 }
 
-// src/symbolLabel.ts
-function bareTicker(symbol) {
-  return /^[A-Za-z][A-Za-z0-9._-]*:([A-Za-z0-9][A-Za-z0-9._!]*)$/.exec(symbol)?.[1] ?? symbol;
-}
-var SLASH_PAIR = /^[A-Za-z][A-Za-z0-9.]*\/[A-Za-z][A-Za-z0-9.]*$/;
-function symbolLabel(symbol) {
-  const ticker = bareTicker(symbol);
-  return SLASH_PAIR.test(ticker) ? ticker.replace("/", "") : ticker;
-}
-var PAIR_MARKETS = /* @__PURE__ */ new Set(["crypto", "forex"]);
-function pairLabel(ticker, type, currencyCode) {
-  const quote = currencyCode?.trim();
-  if (!quote || !PAIR_MARKETS.has(type.toLowerCase())) return null;
-  const bare = bareTicker(ticker);
-  const base = bare.length > quote.length && bare.toUpperCase().endsWith(quote.toUpperCase()) ? bare.slice(0, -quote.length) : bare;
-  return base && base.toUpperCase() !== quote.toUpperCase() ? `${base} / ${quote}` : null;
-}
-function factsOf(symbol) {
-  if (typeof symbol === "string") return { ticker: symbol, type: "", shortName: "", longName: "", currencyCode: void 0 };
-  if ("symbol" in symbol) return { ticker: symbol.symbol, type: symbol.type, shortName: "", longName: symbol.name.trim(), currencyCode: symbol.currencyCode };
-  const name2 = symbol.name.trim();
-  const description = symbol.description.trim();
-  return { ticker: symbol.ticker, type: symbol.type, shortName: name2 !== description ? name2 : "", longName: description, currencyCode: symbol.currencyCode };
-}
-function symbolNames(symbol) {
-  const facts = factsOf(symbol);
-  if (facts.type.toLowerCase() === "spread") return { mark: facts.ticker, title: facts.ticker, description: facts.ticker };
-  const bare = bareTicker(facts.ticker);
-  const pair = pairLabel(facts.ticker, facts.type, facts.currencyCode) ?? (SLASH_PAIR.test(bare) ? bare.replace("/", " / ") : null);
-  return {
-    mark: pair ? pair.replace(" / ", "") : symbolLabel(facts.ticker),
-    title: pair ?? (facts.shortName || bare),
-    description: pair ?? (facts.longName || bare)
-  };
-}
-
 // src/widget/compare.ts
 var CHIP_THROTTLE_MS = 250;
 function attachComparePlane(deps) {
@@ -12787,6 +12845,7 @@ function composeFormingBar(parent, subs, k) {
 }
 
 // src/widget/replay.ts
+var START_HOLD_MS = 250;
 function coerceReplaySpeed(raw) {
   const n = Number(raw);
   return REPLAY_SPEEDS.includes(n) ? n : 10;
@@ -12805,6 +12864,13 @@ function attachReplayPlane(deps) {
   let stepping = null;
   let generation = 0;
   let destroyed = false;
+  let glide = null;
+  const stopGlide = () => {
+    if (glide) {
+      clearTimeout(glide);
+      glide = null;
+    }
+  };
   const invalidateStep = () => {
     generation += 1;
     stepping = null;
@@ -12825,15 +12891,34 @@ function attachReplayPlane(deps) {
   const currentGrain = () => autoGrain ? "auto" : manualGrain ?? "auto";
   const paintCursor = () => {
     if (!master) return;
+    stopGlide();
     deps.paint(master.slice(0, cursor));
     deps.chart.timeScale().scrollToRealTime();
   };
   const paintForming = () => {
     if (!master || !subs) return;
+    stopGlide();
     const parent = master[cursor - 1];
     deps.paint([...master.slice(0, cursor - 1), composeFormingBar(parent, subs, formK)]);
     deps.chart.timeScale().scrollToRealTime();
   };
+  const paintStart = () => {
+    if (!master) return;
+    const scale = deps.chart.timeScale();
+    const shown2 = scale.getVisibleRange();
+    const view = scale.getVisibleLogicalRange();
+    const chosen = master[cursor - 1].t;
+    const from = shown2?.from;
+    const to = shown2?.to;
+    if (!view || typeof from !== "number" || typeof to !== "number" || chosen < from || chosen > to) return paintCursor();
+    stopGlide();
+    deps.paint(master.slice(0, cursor));
+    scale.setVisibleLogicalRange(view);
+    glide = setTimeout(() => {
+      glide = null;
+      if (master && !destroyed && !deps.disposed()) scale.scrollToRealTime();
+    }, START_HOLD_MS);
+  };
   const stopTimer = () => {
     if (timer) {
       clearInterval(timer);
@@ -12917,6 +13002,7 @@ function attachReplayPlane(deps) {
   };
   function abandon() {
     invalidateStep();
+    stopGlide();
     if (!master) return;
     stopTimer();
     playing = false;
@@ -12944,7 +13030,7 @@ function attachReplayPlane(deps) {
       const idx = master.findIndex((b) => b.t >= atSec);
       cursor = Math.max(2, (idx === -1 ? master.length - 1 : idx) + 1);
       deps.setHeader(true);
-      paintCursor();
+      paintStart();
       sync();
     },
     exit() {
@@ -13467,7 +13553,7 @@ function attachExtensionsPlane(deps) {
     },
     lockPanZoom: (locked) => {
       if (deps.disposed()) return;
-      const state = pointerLock(locked);
+      const state = pointerLock(locked, deps.navigable);
       deps.chart.applyOptions({ handleScroll: state.handleScroll, handleScale: state.handleScale });
       deps.setTouchAction(state.touchAction);
     }
@@ -15976,10 +16062,11 @@ function registerChartCommands(deps) {
   });
   add({ id: "chart.view.reset", scope: "chart", label: "command.viewReset", shortcut: "Alt+KeyR", available: always, execute: () => handle.reset() });
   add({ id: "chart.view.goLive", scope: "chart", label: "command.viewGoLive", shortcut: "Alt+KeyL", available: always, execute: () => handle.goLive() });
-  add({ id: "chart.view.zoomIn", scope: "chart", label: "command.viewZoomIn", shortcut: "Equal", available: always, execute: () => deps.zoom("in") });
-  add({ id: "chart.view.zoomOut", scope: "chart", label: "command.viewZoomOut", shortcut: "Minus", available: always, execute: () => deps.zoom("out") });
-  add({ id: "chart.view.scrollLeft", scope: "chart", label: "command.viewScrollLeft", shortcut: "ArrowLeft", available: always, execute: () => deps.scroll("left") });
-  add({ id: "chart.view.scrollRight", scope: "chart", label: "command.viewScrollRight", shortcut: "ArrowRight", available: always, execute: () => deps.scroll("right") });
+  const navigable = () => features.navigation;
+  add({ id: "chart.view.zoomIn", scope: "chart", label: "command.viewZoomIn", shortcut: "Equal", available: navigable, execute: () => deps.zoom("in") });
+  add({ id: "chart.view.zoomOut", scope: "chart", label: "command.viewZoomOut", shortcut: "Minus", available: navigable, execute: () => deps.zoom("out") });
+  add({ id: "chart.view.scrollLeft", scope: "chart", label: "command.viewScrollLeft", shortcut: "ArrowLeft", available: navigable, execute: () => deps.scroll("left") });
+  add({ id: "chart.view.scrollRight", scope: "chart", label: "command.viewScrollRight", shortcut: "ArrowRight", available: navigable, execute: () => deps.scroll("right") });
   add({
     id: "chart.data.download",
     scope: "chart",
@@ -16783,14 +16870,21 @@ function createChartInstance(deps) {
       vertLines: { color: canvas().grid, visible: eff.appearance.grid },
       horzLines: { color: canvas().grid, visible: eff.appearance.grid }
     },
-    crosshair: { mode: deps.features.crosshair ? CrosshairMode.Normal : CrosshairMode.Hidden },
+    crosshair: {
+      mode: deps.ui.crosshair ? CrosshairMode.Normal : CrosshairMode.Hidden,
+      vertLine: { labelVisible: deps.ui.crosshairLabels, ...deps.ui.crosshairSolid ? { style: LineStyle3.Solid } : {} },
+      horzLine: { visible: deps.ui.crosshairHorizontal, labelVisible: deps.ui.crosshairLabels, ...deps.ui.crosshairSolid ? { style: LineStyle3.Solid } : {} }
+    },
     // A finger held on the plot scrubs the crosshair for as long as it stays down, and lifting it
     // takes the crosshair away, so the next one-finger drag pans: the way a native chart reads.
     trackingMode: { exitMode: TrackingModeExitMode.OnTouchEnd },
     // The renderer's own momentum throws a flick as fast as seven pixels a millisecond and coasts
     // it thousands of pixels; the chart coasts a flick itself, calmly.
     kineticScroll: { touch: false, mouse: false },
-    rightPriceScale: { borderVisible: false, scaleMargins: { top: 0.08, bottom: 0.08 } },
+    // A chart that holds its view takes no drag, wheel, pinch or scale gesture from the renderer.
+    handleScroll: deps.features.navigation,
+    handleScale: deps.features.navigation,
+    rightPriceScale: { visible: deps.ui.priceScale, borderVisible: false, scaleMargins: { top: 0.08, bottom: 0.08 } },
     timeScale: { borderVisible: false, timeVisible: true, secondsVisible: false, rightOffset: 4, barSpacing: 8, minBarSpacing: 0.5 }
   });
   const anchor = chart.addSeries(LineSeries4, {
@@ -16799,7 +16893,13 @@ function createChartInstance(deps) {
     priceLineVisible: false,
     crosshairMarkerVisible: false
   });
-  let series2 = addStyleSeries(chart, style, paint());
+  const addMainSeries = (id) => {
+    const added = addStyleSeries(chart, id, paint());
+    if (!deps.ui.priceScale) added.applyOptions({ priceLineVisible: false, lastValueVisible: false });
+    return added;
+  };
+  let series2 = addMainSeries(style);
+  let morph = null;
   const baselineLevel = createBaselineLevel({ paneHeight: () => chart.paneSize().height });
   if (style === "baseline") baselineLevel.follow(series2);
   const volume2 = chart.addSeries(HistogramSeries2, {
@@ -16930,15 +17030,17 @@ function createChartInstance(deps) {
   const crosshairSubs = /* @__PURE__ */ new Set();
   const timeClickSubs = /* @__PURE__ */ new Set();
   const rangeSubs = /* @__PURE__ */ new Set();
+  const reducedMotion = () => gestures.ownerDocument.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
   const ranges = createRangeApi({
     chart,
     disposed: disposedFn,
     muted,
     mirrored,
     onGlide: () => followLiveEdge(),
-    reducedMotion: () => gestures.ownerDocument.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false
+    reducedMotion
   });
-  const fling = attachFling({ chart, target: gestures });
+  const still = { stop: () => void 0, destroy: () => void 0 };
+  const fling = deps.features.navigation ? attachFling({ chart, target: gestures }) : still;
   let unregisterRangeMirror = () => void 0;
   function applyTimezone() {
     if (disposed) return;
@@ -17046,6 +17148,7 @@ function createChartInstance(deps) {
   const drawings2 = attachDrawingsPlane({
     chart,
     series: anchor,
+    navigable: deps.features.navigation,
     container: gestures,
     chrome: chrome2,
     chartId: deps.id,
@@ -17119,7 +17222,7 @@ function createChartInstance(deps) {
     setHeader: () => legend2.setHeader(symbol, tf),
     // A chart whose crosshair the host switched OFF keeps it off: replay may take the crosshair
     // away for the length of a question, never hand one back that was never there.
-    setCrosshair: (visible) => chart.applyOptions({ crosshair: { mode: visible && deps.features.crosshair ? CrosshairMode.Normal : CrosshairMode.Hidden } }),
+    setCrosshair: (visible) => chart.applyOptions({ crosshair: { mode: visible && deps.ui.crosshair ? CrosshairMode.Normal : CrosshairMode.Hidden } }),
     // The feed's own grains: a chart never offers, or fetches, a timeframe its feed cannot serve.
     resolutions: () => deps.capabilities().resolutions,
     persist: (key, value) => storage.set(key === "speed" ? REPLAY_SPEED_KEY : REPLAY_TIMEFRAME_KEY, value),
@@ -17153,6 +17256,7 @@ function createChartInstance(deps) {
   const extensions = attachExtensionsPlane({
     chartId: deps.id,
     chart,
+    navigable: deps.features.navigation,
     series: () => anchor,
     visible: () => series2,
     gestures,
@@ -17260,8 +17364,8 @@ function createChartInstance(deps) {
   navigationRoot.addEventListener("mouseup", onNativeDragEnd, { passive: true });
   navigationRoot.addEventListener("pointerup", onNativeDragEnd, { passive: true });
   navigationRoot.addEventListener("pointercancel", onNativeDragEnd, { passive: true });
-  const pinch = attachPinch({ chart, target: gestures });
-  const freePan = deps.freePan ? attachFreePan({
+  const pinch = deps.features.navigation ? attachPinch({ chart, target: gestures }) : null;
+  const freePan = deps.freePan && deps.features.navigation ? attachFreePan({
     chart,
     target: gestures,
     framing: () => priceAxisPolicy() === "auto",
@@ -17285,9 +17389,11 @@ function createChartInstance(deps) {
     const painted = shownBars();
     const values = painted.map((b) => ({ time: b.t, value: b.c }));
     anchor.setData(values);
-    series2.setData(
-      shaped ? values : painted.map((b) => ({ time: b.t, open: b.o, high: b.h, low: b.l, close: b.c }))
-    );
+    if (morph?.bars !== series2) {
+      series2.setData(
+        shaped ? values : painted.map((b) => ({ time: b.t, open: b.o, high: b.h, low: b.l, close: b.c }))
+      );
+    }
     if (volumeInstance()) paintVolume();
     indicators2.recompute();
     compare?.sync();
@@ -17613,20 +17719,48 @@ function createChartInstance(deps) {
   function setStyle(next) {
     if (disposed || next === style || !deps.styles.includes(next)) return;
     const keep = chart.timeScale().getVisibleLogicalRange();
+    morph?.run.finish();
     const previous = series2;
+    const previousStyle = style;
     style = next;
     storage.set(STYLE_KEY, next);
-    series2 = addStyleSeries(chart, next, paint());
+    series2 = addMainSeries(next);
     baselineLevel.follow(next === "baseline" ? series2 : null);
     countdown?.seriesChanged(previous);
     extensions.visibleSeriesReplaced();
     applyPriceFormat();
-    try {
-      chart.removeSeries(previous);
-    } catch {
-    }
+    const remove = (leaving) => {
+      try {
+        chart.removeSeries(leaving);
+      } catch {
+      }
+    };
+    const folding = valueShaped(next) && !valueShaped(previousStyle);
+    const unfolding = !valueShaped(next) && valueShaped(previousStyle);
+    const morphing = !!deps.styleMorph && (folding || unfolding) && !reducedMotion();
+    if (!morphing) remove(previous);
     paintAll();
     if (keep) chart.timeScale().setVisibleLogicalRange(keep);
+    if (morphing) {
+      const bars2 = folding ? previous : series2;
+      const line2 = folding ? series2 : previous;
+      const lineStyle2 = folding ? next : previousStyle;
+      const entry = {
+        bars: bars2,
+        run: startStyleMorph({
+          bars: bars2,
+          fadeLine: (alpha) => line2.applyOptions(fadedStyleOptions(lineStyle2, paint(), alpha)),
+          shown: shownBars,
+          direction: folding ? "fold" : "unfold",
+          done: () => {
+            if (morph === entry) morph = null;
+            remove(previous);
+            if (folding) line2.applyOptions(styleOptions(lineStyle2, paint()));
+          }
+        })
+      };
+      morph = entry;
+    }
     events.emit("style", next);
   }
   function content() {
@@ -18038,8 +18172,9 @@ function createChartInstance(deps) {
       countdownClock.destroy();
       pointer?.destroy();
       ranges.stopGlide();
+      morph?.run.finish();
       fling.destroy();
-      pinch.destroy();
+      pinch?.destroy();
       freePan?.destroy();
       plotArea.destroy();
       extensions.destroy();
@@ -23133,6 +23268,7 @@ function createChart(options) {
           container: element,
           hostContainer: options.container,
           freePan: options.touch?.freePan === true,
+          styleMorph: options.transitions?.style === true,
           layer,
           datafeed: options.datafeed,
           externalDrawingToolbar: !!options.drawingToolbarContainer,