@funnest/charts 0.6.16 → 0.6.18

package/dist/index.d.ts

@@ -5,10 +5,11 @@ export type { ChartContextMenu, ChartEvents, ChartLayout, ChartOptions, ChartPan
 export type { PriceScaleMode } from './model/price-scale';
 export type { CrosshairInfo, PaneId } from './render/renderer';
 export type { Locale } from './model/time-format';
+export { browserLocale } from './model/time-format';
 export type { IndexRange, TimeScaleOptions } from './model/time-scale';
 export type { Bar, BarsRequest, BarsResult, Datafeed, Resolution, SymbolInfo, TickSize, Unsubscribe, SymbolType, SymbolSearchResult, Quote, ConnectionState, } from './types';
 export type { DirectionPreset, ThemeTokens } from './theme';
-export { createTheme, darkTheme, lightTheme } from './theme';
+export { createTheme, darkTheme, directionColors, lightTheme } from './theme';
 export type { FormatPriceOptions } from './price';
 export { decimalsOf, formatCompact, formatPrice, krxTickSize, resolveTickSize, roundToTick } from './price';
 export { isIntradayResolution, resolutionToMs } from './resolution';

package/dist/index.js

@@ -679,6 +679,11 @@ function niceTicks(min, max, maxCount, minStep = 0) {
 }
 
 // src/model/time-format.ts
+function browserLocale() {
+  const nav = typeof navigator === "undefined" ? void 0 : navigator;
+  const first = nav?.languages?.[0] ?? nav?.language ?? "";
+  return /^ko\b/i.test(first) ? "ko" : "en";
+}
 var WEEKDAY_INDEX = { Sun: 0, Mon: 1, Tue: 2, Wed: 3, Thu: 4, Fri: 5, Sat: 6 };
 var WEEKDAYS = {
   ko: ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"],
@@ -2407,6 +2412,25 @@ function drawMain(layer, m) {
     }
   }
   if (f.settings.gridVertical) for (const tick of f.timeTicks) p.vLine(tick.x, 0, f.panesHeight, pal.grid);
+  const o = m.objects;
+  const rc = { painter: p, coords: o.coords, palette: pal };
+  const runOverlay = (overlay) => {
+    ctx.save();
+    try {
+      overlay.render(rc);
+    } catch (error) {
+      console.error("[fnc] overlay", error);
+    }
+    ctx.restore();
+  };
+  if (o.overlays.some((x) => x.layer === "below")) {
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(0, main.top, f.plotWidth, main.height);
+    ctx.clip();
+    for (const overlay of o.overlays) if (overlay.layer === "below") runOverlay(overlay);
+    ctx.restore();
+  }
   const hasBars = f.range.to >= f.range.from;
   if (hasBars) {
     ctx.save();
@@ -2446,17 +2470,7 @@ function drawMain(layer, m) {
   ctx.beginPath();
   ctx.rect(0, main.top, f.plotWidth, main.height);
   ctx.clip();
-  const o = m.objects;
-  const rc = { painter: p, coords: o.coords, palette: pal };
-  for (const overlay of o.overlays) {
-    ctx.save();
-    try {
-      overlay.render(rc);
-    } catch (error) {
-      console.error("[fnc] overlay", error);
-    }
-    ctx.restore();
-  }
+  for (const overlay of o.overlays) if (overlay.layer !== "below") runOverlay(overlay);
   o.trading.render(rc, m.bars, o.barIndexAt, (i) => m.timeScale.indexToX(i), o.tradingLabels, badges);
   o.drawings.render(rc, badges, m.bars, o.barIndexAt);
   ctx.restore();
@@ -2724,6 +2738,7 @@ var darkTheme = {
   border: "#2C2C35",
   crosshair: "#7E7E87"
 };
+var directionColors = (preset) => ({ ...DIRECTION_COLORS[preset] });
 function createTheme(base, overrides = {}, direction) {
   return { ...base, ...direction ? DIRECTION_COLORS[direction] : {}, ...overrides };
 }
@@ -2863,7 +2878,7 @@ var Chart = class {
   paneWeightTotal = 1;
   constructor(container, options = {}) {
     this.theme = { ...lightTheme, ...options.theme };
-    this.locale = options.locale ?? "ko";
+    this.locale = options.locale ?? browserLocale();
     this.formatter = new TimeFormatter(options.timezone ?? defaultTimeZone(), this.locale);
     this.pricePrecision = options.pricePrecision ?? 2;
     this.tickSize = options.tickSize ?? 0;
@@ -4726,12 +4741,14 @@ export {
   SERIES_COLORS,
   TickAggregator,
   bollinger,
+  browserLocale,
   bucketStart,
   combineDatafeeds,
   createChart,
   createTheme,
   darkTheme,
   decimalsOf,
+  directionColors,
   distToSegment,
   ema,
   fallbackResolution,

package/dist/model/time-format.d.ts

@@ -1,6 +1,11 @@
 import type { Bar } from '../types';
 import type { TimeScale } from './time-scale';
 export type Locale = 'ko' | 'en';
+/**
+ * The locale when none is given: Korean for a browser set to Korean, English for everyone else
+ * (and outside a browser).
+ */
+export declare function browserLocale(): Locale;
 export interface TimeParts {
     year: number;
     /** 1–12 */

package/dist/objects/types.d.ts

@@ -29,6 +29,11 @@ export interface ObjectRenderContext {
  */
 export interface ChartOverlay {
     render(rc: ObjectRenderContext): void;
+    /**
+     * 'below': painted right after the grid, under the candles and indicators (an order-book
+     * heatmap, session shading). Default 'above'.
+     */
+    layer?: 'above' | 'below';
 }
 export type ObjectHit = {
     kind: 'drawing';

package/dist/theme.d.ts

@@ -21,4 +21,6 @@ export interface ThemeTokens {
 export type DirectionPreset = 'kr' | 'global';
 export declare const lightTheme: ThemeTokens;
 export declare const darkTheme: ThemeTokens;
+/** Up/down candle colors: 'kr' red up · blue down (Korea), 'global' green up · red down. */
+export declare const directionColors: (preset: DirectionPreset) => Pick<ThemeTokens, 'up' | 'down'>;
 export declare function createTheme(base: ThemeTokens, overrides?: Partial<ThemeTokens>, direction?: DirectionPreset): ThemeTokens;

package/package.json

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