@funnest/charts 0.6.22 → 0.6.24

package/dist/chart.d.ts

@@ -145,6 +145,15 @@ export interface LegendItem extends LegendItemOptions {
     id: string;
     visible: boolean;
 }
+export interface ScreenshotOptions {
+    /**
+     * Paints the legend into the image, where @funnest/charts-ui shows it: symbol · interval ·
+     * exchange and the capture time, the last bar's OHLC and change, compares, and the values of
+     * visible indicators (overlays at the top, pane indicators and volume on their panes).
+     * Default false: a bare chart has no legend on screen either.
+     */
+    legend?: boolean;
+}
 export interface IndicatorLegendItem {
     id: string;
     type: IndicatorType;
@@ -321,7 +330,9 @@ export declare class Chart {
     /** Inverse of indexToTime(). */
     private timeToIndex;
     /** Snapshot of the chart (without the crosshair) at device resolution. */
-    takeScreenshot(): HTMLCanvasElement;
+    takeScreenshot(options?: ScreenshotOptions): HTMLCanvasElement;
+    /** The legend rows, painted where the DOM legend sits (see ScreenshotOptions.legend). */
+    private paintScreenshotLegend;
     /**
      * Re-fetches the latest window and merges it in, keeping the view. Datafeeds trigger this
      * via the `onResetCache` callback of subscribeBars after a WebSocket reconnect, so bars

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { Chart, createChart, fallbackResolution } from './chart';
 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, LegendItem, LegendItemOptions, ReplayStatus } from './chart';
+export type { ChartContextMenu, ChartEvents, ChartLayout, ChartOptions, ChartPaneLayout, CompareInfo, IndicatorLegendItem, LegendItem, LegendItemOptions, ReplayStatus, ScreenshotOptions } from './chart';
 export type { PriceScaleMode } from './model/price-scale';
 export type { CrosshairInfo, PaneId } from './render/renderer';
 export type { Locale } from './model/time-format';
@@ -12,7 +12,7 @@ export type { DirectionPreset, ThemeTokens } 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';
+export { isIntradayResolution, resolutionLabel, resolutionToMs } from './resolution';
 export type { ChartType } from './render/renderer';
 export type { BuiltinDrawingType, Drawing, DrawingDefinition, DrawingGeometry, DrawingPoint, DrawingRenderContext, DrawingStyle, DrawingColorSlot, DrawingType, } from './objects/drawings';
 export { BUILTIN_DRAWINGS, distToSegment, FIB_LEVELS } from './objects/drawings';

package/dist/index.js

@@ -2587,6 +2587,85 @@ function drawCrosshairValue(p, m, ch) {
   p.text(valueLabel, f.plotWidth + 8, by, pal.background);
 }
 
+// src/render/screenshot-legend.ts
+var ROW_GAP = 2;
+var DOT2 = 8;
+var DOT_GAP = 6;
+var LEGEND_LEFT = 12;
+var LEGEND_TOP = 8;
+var LEGEND_RIGHT_CLEARANCE = 80;
+function layoutLegend(rows, left, top, maxWidth, measure) {
+  const runs = [];
+  let y = top;
+  let right = left;
+  rows.forEach((row, i) => {
+    if (i > 0) y += ROW_GAP;
+    let x = left;
+    let lineStart = true;
+    const widths = row.groups.map((g) => g.reduce((w, r) => w + runWidth(r, row.size, measure), 0));
+    row.groups.forEach((group, gi) => {
+      const w = widths[gi];
+      if (!lineStart && x + row.gap + w > left + maxWidth) {
+        y += row.lineHeight;
+        x = left;
+        lineStart = true;
+      }
+      if (!lineStart) x += row.gap;
+      for (const run of group) {
+        runs.push({ run, x, y: y + row.lineHeight / 2, size: row.size });
+        x += runWidth(run, row.size, measure);
+      }
+      right = Math.max(right, x);
+      lineStart = false;
+    });
+    y += row.lineHeight;
+  });
+  return { runs, bottom: y, right };
+}
+function runWidth(run, size, measure) {
+  return (run.dot ? DOT2 + DOT_GAP : 0) + (run.text ? measure(run.text, size, run.weight ?? 400) : 0);
+}
+var font = (size, weight, family) => `${weight} ${size}px ${family}`;
+function canvasMeasure(ctx, family) {
+  return (text, size, weight) => {
+    ctx.font = font(size, weight, family);
+    return ctx.measureText(text).width;
+  };
+}
+function paintLegend(ctx, layout, family, backdrop) {
+  ctx.save();
+  if (backdrop && layout.runs.length) {
+    const pad = 4;
+    ctx.globalAlpha = 0.85;
+    ctx.fillStyle = backdrop.color;
+    ctx.beginPath();
+    ctx.roundRect(backdrop.left - pad, backdrop.top - pad, layout.right - backdrop.left + pad * 2, layout.bottom - backdrop.top + pad * 2, 6);
+    ctx.fill();
+    ctx.globalAlpha = 1;
+  }
+  ctx.textBaseline = "middle";
+  ctx.textAlign = "left";
+  for (const { run, x, y, size } of layout.runs) {
+    let tx = x;
+    if (run.dot) {
+      ctx.fillStyle = run.color;
+      ctx.beginPath();
+      ctx.arc(x + DOT2 / 2, y, DOT2 / 2, 0, Math.PI * 2);
+      ctx.fill();
+      tx += DOT2 + DOT_GAP;
+      if (!run.text) continue;
+    }
+    ctx.font = font(size, run.weight ?? 400, family);
+    ctx.fillStyle = run.color;
+    ctx.fillText(run.text, tx, y);
+  }
+  ctx.restore();
+}
+var LEGEND_STRINGS = {
+  ko: { open: "\uC2DC", high: "\uACE0", low: "\uC800", close: "\uC885", volume: "\uAC70\uB798\uB7C9", volumePane: "\uAC70\uB798\uB7C9" },
+  en: { open: "O", high: "H", low: "L", close: "C", volume: "Vol", volumePane: "Volume" }
+};
+
 // src/resolution.ts
 var MINUTE = 6e4;
 var DAY_MS = 864e5;
@@ -2610,6 +2689,28 @@ function resolutionToMs(resolution) {
 function isIntradayResolution(resolution) {
   return resolutionToMs(resolution) < DAY_MS;
 }
+function resolutionLabel(resolution, locale, form = "short") {
+  const match = /^(\d*)([SDWM]?)$/i.exec(resolution.trim());
+  if (!match) return resolution;
+  const n = match[1] ? Number(match[1]) : 1;
+  const unit = (match[2] ?? "").toUpperCase();
+  const ko = locale === "ko";
+  const long = form === "long";
+  switch (unit) {
+    case "S":
+      return ko ? `${n}\uCD08` : `${n}s`;
+    case "D":
+      return ko ? n === 1 && !long ? "\uC77C" : `${n}\uC77C` : `${n}D`;
+    case "W":
+      return ko ? n === 1 && !long ? "\uC8FC" : `${n}\uC8FC` : `${n}W`;
+    case "M":
+      if (n % 12 === 0) return ko ? `${n / 12}\uB144` : `${n / 12}Y`;
+      return ko ? n === 1 && !long ? "\uC6D4" : `${n}\uAC1C\uC6D4` : `${n}M`;
+    default:
+      if (n >= 60 && n % 60 === 0) return ko ? `${n / 60}\uC2DC\uAC04` : `${n / 60}h`;
+      return ko ? `${n}\uBD84` : `${n}m`;
+  }
+}
 
 // src/realtime.ts
 var offsetFormatters = /* @__PURE__ */ new Map();
@@ -3178,15 +3279,86 @@ var Chart = class {
     return i + (b > a ? (time - a) / (b - a) : 0);
   }
   /** Snapshot of the chart (without the crosshair) at device resolution. */
-  takeScreenshot() {
+  takeScreenshot(options = {}) {
     if (this.rafId || this.mainDirty) this.render();
     const src2 = this.mainLayer.canvas;
     const out = document.createElement("canvas");
     out.width = src2.width;
     out.height = src2.height;
-    out.getContext("2d")?.drawImage(src2, 0, 0);
+    const ctx = out.getContext("2d");
+    if (ctx) {
+      ctx.drawImage(src2, 0, 0);
+      if (options.legend) this.paintScreenshotLegend(ctx);
+    }
     return out;
   }
+  /** The legend rows, painted where the DOM legend sits (see ScreenshotOptions.legend). */
+  paintScreenshotLegend(ctx) {
+    const symbol = this.symbol;
+    const frame = this.frame;
+    if (!symbol || !frame) return;
+    const pal = this.resolvePalette();
+    const family = this.colors.fontFamily(this.theme.fontFamily);
+    const measure = canvasMeasure(ctx, family);
+    const words = LEGEND_STRINGS[this.locale];
+    const bars = this.store.bars;
+    const last = bars.length - 1;
+    const bar = bars[last];
+    const prev = bars[last - 1];
+    const fmt = (p) => formatPrice(p, this.pricePrecision);
+    const dir = (v) => v > 0 ? pal.up : v < 0 ? pal.down : pal.text;
+    const label = (text) => ({ text, color: pal.textSecondary });
+    const value = (text, color) => ({ text, color, weight: 600 });
+    const dot = { text: "\xB7", color: pal.textSecondary };
+    const title = [[{ text: symbol.name, color: pal.text, weight: 700 }], [dot]];
+    if (this.resolution) title.push([label(resolutionLabel(this.resolution, this.locale))], [dot]);
+    title.push([label(symbol.exchange)], [label(this.formatter.crosshairLabel(Date.now(), true))]);
+    const rows = [{ groups: title, gap: 6, size: 13, lineHeight: 20 }];
+    if (bar) {
+      const c = dir(bar.close - bar.open);
+      const change = prev ? bar.close - prev.close : 0;
+      const pct = prev && prev.close ? change / prev.close * 100 : 0;
+      const sign = change > 0 ? "+" : "";
+      const groups = [
+        [label(`${words.open} `), value(fmt(bar.open), c)],
+        [label(`${words.high} `), value(fmt(bar.high), c)],
+        [label(`${words.low} `), value(fmt(bar.low), c)],
+        [label(`${words.close} `), value(fmt(bar.close), c)],
+        [value(`${sign}${fmt(change)} (${sign}${pct.toFixed(2)}%)`, dir(change))]
+      ];
+      if (bar.volume !== void 0) groups.push([label(`${words.volume} `), value(formatCompact(bar.volume, this.locale), pal.text)]);
+      rows.push({ groups, gap: 10, size: 12, lineHeight: 18 });
+    }
+    for (const cmp of this.compareLegend()) {
+      rows.push({ groups: [[{ text: "", color: cmp.color, dot: true }, { text: cmp.name, color: pal.text }], [value(cmp.value, pal.text)]], gap: 6, size: 12, lineHeight: 22 });
+    }
+    const indicators = this.indicatorLegend().filter((item) => item.visible);
+    const indicatorRow = (item) => ({
+      groups: [[label(item.title)], ...item.values.map((v) => [value(v.value, v.color)])],
+      gap: 8,
+      size: 12,
+      lineHeight: 20
+    });
+    for (const item of indicators) if (item.overlay) rows.push(indicatorRow(item));
+    for (const item of this.legendExtras) if (item.visible) rows.push({ groups: [[label(item.name)]], gap: 8, size: 12, lineHeight: 20 });
+    const dpr = this.mainLayer.dpr;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    const maxWidth = Math.max(80, this.size.width - LEGEND_LEFT - LEGEND_RIGHT_CLEARANCE);
+    const main = layoutLegend(rows, LEGEND_LEFT, LEGEND_TOP, maxWidth, measure);
+    const covers = main.bottom + 4 > this.mainScale.insetTop;
+    paintLegend(ctx, main, family, covers ? { color: pal.background, top: LEGEND_TOP, left: LEGEND_LEFT } : null);
+    for (const pane of frame.panes) {
+      let row = null;
+      if (pane.kind === "volume") {
+        const v = bar?.volume;
+        row = { groups: [[label(words.volumePane)], ...v !== void 0 ? [[value(formatCompact(v, this.locale), pal.text)]] : []], gap: 8, size: 12, lineHeight: 20 };
+      } else if (pane.kind === "indicator") {
+        const item = indicators.find((i) => i.id === pane.id);
+        if (item) row = indicatorRow(item);
+      }
+      if (row) paintLegend(ctx, layoutLegend([row], LEGEND_LEFT, pane.top + 4, maxWidth, measure), family, null);
+    }
+  }
   /**
    * Re-fetches the latest window and merges it in, keeping the view. Datafeeds trigger this
    * via the `onResetCache` callback of subscribeBars after a WebSocket reconnect, so bars
@@ -4042,9 +4214,9 @@ var Chart = class {
       return (v) => formatPrice(v, decimals);
     };
     const fontFamily = this.colors.fontFamily(this.theme.fontFamily);
-    const font = `${this.theme.fontSize}px ${fontFamily}`;
+    const font2 = `${this.theme.fontSize}px ${fontFamily}`;
     const ctx = this.mainLayer.ctx;
-    ctx.font = font;
+    ctx.font = font2;
     let range = { from: 0, to: -1 };
     let highLow = null;
     let priceTicks = [];
@@ -4128,7 +4300,7 @@ var Chart = class {
       settings: this.settingsValue,
       overlays: [...overlays.map((o) => o.output), ...compareOverlays],
       palette: this.resolvePalette(),
-      font,
+      font: font2,
       radius: this.theme.radius,
       countdown: this.countdownLabel
     };
@@ -4807,6 +4979,7 @@ export {
   monitorLatency,
   parseChartState,
   priceSource,
+  resolutionLabel,
   resolutionToMs,
   resolveTickSize,
   roundToTick,

package/dist/render/screenshot-legend.d.ts

@@ -0,0 +1,73 @@
+/**
+ * The legend painted into screenshots: the same rows @funnest/charts-ui shows over the chart
+ * (symbol · interval · exchange, OHLC and change, compares, indicator values), as text on the
+ * canvas, so a saved or shared image says what it is. Layout mirrors the DOM legend's CSS
+ * (12px from the left, 8px from the top, 80px clear of the price axis, wrapping items).
+ */
+/** A piece of text (or a color dot) drawn as-is. */
+export interface LegendRun {
+    text: string;
+    color: string;
+    /** Default 400. */
+    weight?: number;
+    /** A filled circle of this color before the text (compare rows). */
+    dot?: boolean;
+}
+/** Runs that stay together on one line; groups wrap between them. */
+export type LegendGroup = LegendRun[];
+export interface LegendRow {
+    groups: LegendGroup[];
+    /** Space between groups. */
+    gap: number;
+    size: number;
+    lineHeight: number;
+}
+export interface PlacedRun {
+    run: LegendRun;
+    x: number;
+    /** Middle of the line. */
+    y: number;
+    size: number;
+}
+export interface LegendLayout {
+    runs: PlacedRun[];
+    /** Bottom of the last line. */
+    bottom: number;
+    /** Right edge of the widest line. */
+    right: number;
+}
+export type MeasureText = (text: string, size: number, weight: number) => number;
+export declare const LEGEND_LEFT = 12;
+export declare const LEGEND_TOP = 8;
+export declare const LEGEND_RIGHT_CLEARANCE = 80;
+/** Places rows top-down from (left, top), wrapping groups that don't fit within maxWidth. */
+export declare function layoutLegend(rows: readonly LegendRow[], left: number, top: number, maxWidth: number, measure: MeasureText): LegendLayout;
+export declare function canvasMeasure(ctx: CanvasRenderingContext2D, family: string): MeasureText;
+/**
+ * Paints a layout. With `backdrop`, a translucent panel goes behind it first — for legends taller
+ * than the space the chart keeps clear above the candles.
+ */
+export declare function paintLegend(ctx: CanvasRenderingContext2D, layout: LegendLayout, family: string, backdrop: {
+    color: string;
+    top: number;
+    left: number;
+} | null): void;
+/** Words the screenshot legend uses (the widget's own strings live in @funnest/charts-ui). */
+export declare const LEGEND_STRINGS: {
+    readonly ko: {
+        readonly open: '시';
+        readonly high: '고';
+        readonly low: '저';
+        readonly close: '종';
+        readonly volume: '거래량';
+        readonly volumePane: '거래량';
+    };
+    readonly en: {
+        readonly open: 'O';
+        readonly high: 'H';
+        readonly low: 'L';
+        readonly close: 'C';
+        readonly volume: 'Vol';
+        readonly volumePane: 'Volume';
+    };
+};

package/dist/resolution.d.ts

@@ -1,3 +1,4 @@
+import type { Locale } from './model/time-format';
 import type { Resolution } from './types';
 export declare const DAY_MS = 86400000;
 /**
@@ -6,3 +7,8 @@ export declare const DAY_MS = 86400000;
  */
 export declare function resolutionToMs(resolution: Resolution): number;
 export declare function isIntradayResolution(resolution: Resolution): boolean;
+/**
+ * '1' → 1분, '60' → 1시간, '1D' → 일 (short) / 1일 (long), '12M' → 1년.
+ * Short labels are for the toolbar chips, long ones for the interval menu.
+ */
+export declare function resolutionLabel(resolution: Resolution, locale: Locale, form?: 'short' | 'long'): string;

package/package.json

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