@funnest/charts 0.6.2 → 0.6.4

package/dist/chart.d.ts

@@ -209,6 +209,14 @@ export declare class Chart {
     private connectionState;
     private readonly displayTimezone;
     private loadingHistory;
+    /**
+     * Bumped by every data replacement (setData) and history request: a page answers only if it
+     * is still the latest request for the bars on screen. (The load token alone isn't enough — a
+     * page requested while setSymbol() awaits carries the new token but the old symbol's bars.)
+     */
+    private historyRequest;
+    /** setSymbol() is between its request and setData(). */
+    private symbolLoading;
     private noMoreHistory;
     private historyRequestedFor;
     private countdownLabel;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { Chart, createChart, fallbackResolution } from './chart';
-export { DEFAULT_CHART_SETTINGS, parseChartState } from './settings';
-export type { ChartSettings, ChartState } from './settings';
+export { CHART_THEMES, DEFAULT_CHART_SETTINGS, matchChartTheme, parseChartState } from './settings';
+export type { ChartSettings, ChartState, ChartThemeColors, ChartThemePreset } from './settings';
 export type { ChartContextMenu, ChartEvents, ChartLayout, ChartOptions, ChartPaneLayout, CompareInfo, IndicatorLegendItem, ReplayStatus } from './chart';
 export type { PriceScaleMode } from './model/price-scale';
 export type { CrosshairInfo, PaneId } from './render/renderer';

package/dist/index.js

@@ -1793,6 +1793,41 @@ function snapToOhlc(bar, y, priceToY) {
 }
 
 // src/settings.ts
+var FOLLOW = { upColor: null, downColor: null, background: null, gridColor: null, textColor: null };
+var CHART_THEMES = [
+  { id: "default", name: { ko: "\uAE30\uBCF8", en: "Default" }, colors: FOLLOW },
+  { id: "global", name: { ko: "\uCD08\uB85D\xB7\uBE68\uAC15", en: "Green \xB7 Red" }, colors: { ...FOLLOW, upColor: "#26A69A", downColor: "#EF5350" } },
+  {
+    id: "midnight",
+    name: { ko: "\uBBF8\uB4DC\uB098\uC787", en: "Midnight" },
+    colors: { upColor: "#2EBD85", downColor: "#F6465D", background: "#0E1117", gridColor: "#1A1F29", textColor: "#C9D1D9" }
+  },
+  {
+    id: "navy",
+    name: { ko: "\uB525 \uB124\uC774\uBE44", en: "Deep navy" },
+    colors: { upColor: "#FF5A5F", downColor: "#4C8DFF", background: "#0F1A2E", gridColor: "#1B2A44", textColor: "#C8D3E6" }
+  },
+  {
+    id: "mono",
+    name: { ko: "\uBAA8\uB178", en: "Mono" },
+    colors: { upColor: "#E4E4E7", downColor: "#6B6B75", background: "#121214", gridColor: "#1F1F23", textColor: "#D4D4D8" }
+  },
+  {
+    id: "paper",
+    name: { ko: "\uD398\uC774\uD37C", en: "Paper" },
+    colors: { upColor: "#F04452", downColor: "#3182F6", background: "#FFFFFF", gridColor: "#F0F2F5", textColor: "#333D4B" }
+  },
+  {
+    id: "sepia",
+    name: { ko: "\uC138\uD53C\uC544", en: "Sepia" },
+    colors: { upColor: "#C2410C", downColor: "#2F6690", background: "#F6F0E4", gridColor: "#E9DFCB", textColor: "#4A3F33" }
+  }
+];
+function matchChartTheme(settings) {
+  const keys = Object.keys(FOLLOW);
+  const same = (a, b) => (a ?? "").toLowerCase() === (b ?? "").toLowerCase();
+  return CHART_THEMES.find((t) => keys.every((k) => same(t.colors[k], settings[k])));
+}
 var DEFAULT_CHART_SETTINGS = {
   highLowMarkers: true,
   lastPriceLine: true,
@@ -1803,7 +1838,10 @@ var DEFAULT_CHART_SETTINGS = {
   priceScale: "normal",
   countdown: true,
   upColor: null,
-  downColor: null
+  downColor: null,
+  background: null,
+  gridColor: null,
+  textColor: null
 };
 var CHART_TYPES = ["candles", "line", "area"];
 function parseChartState(input) {
@@ -2684,6 +2722,14 @@ var Chart = class {
   connectionState = null;
   displayTimezone;
   loadingHistory = false;
+  /**
+   * Bumped by every data replacement (setData) and history request: a page answers only if it
+   * is still the latest request for the bars on screen. (The load token alone isn't enough — a
+   * page requested while setSymbol() awaits carries the new token but the old symbol's bars.)
+   */
+  historyRequest = 0;
+  /** setSymbol() is between its request and setData(). */
+  symbolLoading = false;
   noMoreHistory = false;
   historyRequestedFor = Number.NaN;
   countdownLabel = null;
@@ -2765,6 +2811,8 @@ var Chart = class {
     this.volumeScale.autoScale = true;
     this.noMoreHistory = false;
     this.historyRequestedFor = Number.NaN;
+    this.historyRequest++;
+    this.loadingHistory = false;
     this.dataVersion++;
     this.invalidate();
   }
@@ -2817,6 +2865,7 @@ var Chart = class {
       this.quoteSymbol = null;
     }
     this.emitter.emit("loadingChange", true);
+    this.symbolLoading = true;
     let info;
     let result;
     try {
@@ -2831,7 +2880,10 @@ var Chart = class {
       });
       if (token !== this.loadToken) return;
     } finally {
-      if (token === this.loadToken) this.emitter.emit("loadingChange", false);
+      if (token === this.loadToken) {
+        this.symbolLoading = false;
+        this.emitter.emit("loadingChange", false);
+      }
     }
     const previous = this.symbol?.symbol ?? "";
     if (previous !== info.symbol) {
@@ -3994,14 +4046,16 @@ var Chart = class {
   }
   resolvePalette() {
     const t = this.theme;
+    const s = this.settingsValue;
     const c = (v) => this.colors.color(v);
+    const muted = s.textColor && /^#[0-9a-f]{6}$/i.test(s.textColor) ? `${s.textColor}99` : null;
     return {
-      background: c(t.background),
-      text: c(t.text),
-      textSecondary: c(t.textSecondary),
-      grid: c(t.grid),
-      border: c(t.border),
-      crosshair: c(t.crosshair),
+      background: c(s.background ?? t.background),
+      text: c(s.textColor ?? t.text),
+      textSecondary: c(muted ?? t.textSecondary),
+      grid: c(s.gridColor ?? t.grid),
+      border: c(s.gridColor ?? t.border),
+      crosshair: c(muted ?? t.crosshair),
       up: c(this.settingsValue.upColor ?? t.up),
       down: c(this.settingsValue.downColor ?? t.down),
       accent: c(t.accent)
@@ -4036,6 +4090,7 @@ var Chart = class {
   requestHistory() {
     const oldest = this.store.first();
     if (!oldest || this.loadingHistory || this.noMoreHistory || oldest.time === this.historyRequestedFor) return;
+    if (this.symbolLoading) return;
     this.historyRequestedFor = oldest.time;
     const feed = this.datafeed;
     if (!feed || !this.symbol || !this.resolution) {
@@ -4043,6 +4098,8 @@ var Chart = class {
       return;
     }
     const token = this.loadToken;
+    const request = ++this.historyRequest;
+    const current = () => token === this.loadToken && request === this.historyRequest;
     this.loadingHistory = true;
     const to = oldest.time - 1;
     feed.getBars(this.symbol, this.resolution, {
@@ -4050,13 +4107,13 @@ var Chart = class {
       to,
       countBack: this.historyBatchSize
     }).then((result) => {
-      if (token !== this.loadToken) return;
+      if (!current()) return;
       this.prependData(result.bars, { noMoreData: result.noMoreData || result.bars.length === 0 });
       const first = this.store.first();
       if (first) void this.tradingSync.loadOlder(first.time);
       for (const entry of this.compares.values()) void this.loadOlderCompare(entry);
     }).catch((error) => this.emitter.emit("error", error)).finally(() => {
-      if (token === this.loadToken) this.loadingHistory = false;
+      if (current()) this.loadingHistory = false;
     });
   }
   // ── Crosshair ──────────────────────────────────────────────────────
@@ -4497,6 +4554,7 @@ function combineDatafeeds(feeds) {
 }
 export {
   BUILTIN_DRAWINGS,
+  CHART_THEMES,
   Chart,
   DEFAULT_CHART_SETTINGS,
   FIB_LEVELS,
@@ -4522,6 +4580,7 @@ export {
   lightTheme,
   maLines,
   macd,
+  matchChartTheme,
   monitorLatency,
   parseChartState,
   priceSource,

package/dist/settings.d.ts

@@ -22,7 +22,28 @@ export interface ChartSettings {
     /** Up/down candle colors; null follows the theme. */
     upColor: string | null;
     downColor: string | null;
+    /** Chart canvas colors (a theme from CHART_THEMES or your own); null follows the theme. `textColor` must be #rrggbb. */
+    background: string | null;
+    gridColor: string | null;
+    textColor: string | null;
 }
+/** The settings a chart theme sets. */
+export type ChartThemeColors = Pick<ChartSettings, 'upColor' | 'downColor' | 'background' | 'gridColor' | 'textColor'>;
+export interface ChartThemePreset {
+    id: string;
+    name: {
+        ko: string;
+        en: string;
+    };
+    colors: ChartThemeColors;
+}
+/**
+ * Ready-made chart themes for the settings dialog. Applying one sets the five color settings;
+ * 'default' clears them so the chart follows the page theme again.
+ */
+export declare const CHART_THEMES: readonly ChartThemePreset[];
+/** The preset whose colors `settings` match, if any. */
+export declare function matchChartTheme(settings: ChartSettings): ChartThemePreset | undefined;
 export declare const DEFAULT_CHART_SETTINGS: ChartSettings;
 /**
  * Everything needed to restore a chart layout: symbol, interval, chart type, settings,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "Canvas charting engine for financial charts",
   "keywords": [
     "chart",