@funnest/charts-ui 0.6.13 → 0.6.15

package/dist/context.d.ts

@@ -60,6 +60,15 @@ export interface SearchCategory {
     label: Record<Locale, string>;
     match(info: SymbolInfo): boolean;
 }
+/**
+ * An exchange listed in the symbol search sidebar from the start (before any results), with its
+ * logo. `name` is the `SymbolInfo.exchange` its symbols carry; `label` what to show.
+ */
+export interface SearchExchange {
+    name: string;
+    label?: Record<Locale, string>;
+    logoUrl?: string;
+}
 /** Everything components need; created once per widget. */
 export interface WidgetContext {
     /** The widget's root element (theme variables live here). */
@@ -70,6 +79,9 @@ export interface WidgetContext {
     storage: WidgetStorage;
     intervalGroups: readonly IntervalGroup[];
     searchCategories: readonly SearchCategory[];
+    searchExchanges: readonly SearchExchange[];
+    /** Rows per exchange before a "모두 보기" (0: all). */
+    searchPreviewPerExchange: number;
     /** IANA zone used for the status-bar clock (KST for Korean users by default). */
     displayTimezone: string;
     showLogo: boolean;

package/dist/i18n.d.ts

@@ -124,6 +124,7 @@ export declare const STRINGS: {
         allSymbols: string;
         favorites: string;
         exchanges: string;
+        showAllIn: string;
         noFavorites: string;
         navigate: string;
         openAction: string;
@@ -268,6 +269,7 @@ export declare const STRINGS: {
         allSymbols: string;
         favorites: string;
         exchanges: string;
+        showAllIn: string;
         noFavorites: string;
         navigate: string;
         openAction: string;

package/dist/index.d.ts

@@ -8,6 +8,6 @@ export { createMultiChart } from './multi-chart';
 export type { MultiChart, MultiChartEvents, MultiChartOptions, MultiChartState, PaneSpec } from './multi-chart';
 export { LAYOUT_GROUPS, LAYOUTS, MAX_PANES, paneCount } from './layouts';
 export type { LayoutId, SplitNode, SplitSizes } from './layouts';
-export type { ContextMenuItem, ContextMenuItems, IntervalGroup, LayoutSync, SearchCategory } from './context';
+export type { ContextMenuItem, ContextMenuItems, IntervalGroup, LayoutSync, SearchCategory, SearchExchange } from './context';
 export type { ColorScheme, TradingChart, TradingChartOptions, TradingChartSlots } from './trading-chart';
 export { resolutionLabel } from './i18n';

package/dist/index.js

@@ -549,6 +549,7 @@ var STRINGS = {
     allSymbols: "\uC804\uCCB4",
     favorites: "\uC990\uACA8\uCC3E\uAE30",
     exchanges: "\uAC70\uB798\uC18C",
+    showAllIn: "{exchange} {n}\uAC1C \uBAA8\uB450 \uBCF4\uAE30 \u203A",
     noFavorites: "\uC990\uACA8\uCC3E\uAE30\uD55C \uC885\uBAA9\uC774 \uC5C6\uC5B4\uC694. \u2606\uB97C \uB20C\uB7EC \uCD94\uAC00\uD574 \uBCF4\uC138\uC694",
     navigate: "\uC774\uB3D9",
     openAction: "\uC5F4\uAE30",
@@ -693,6 +694,7 @@ var STRINGS = {
     allSymbols: "All",
     favorites: "Favorites",
     exchanges: "Exchanges",
+    showAllIn: "All {n} on {exchange} \u203A",
     noFavorites: "No favorites yet \u2014 tap \u2606 to add one",
     navigate: "navigate",
     openAction: "open",
@@ -1836,6 +1838,41 @@ function Highlight({ text, query }) {
   parts.push(text.slice(i3));
   return /* @__PURE__ */ a3($, { children: parts });
 }
+var sparkCache = /* @__PURE__ */ new Map();
+var SPARK_TTL = 12e4;
+var SPARK_DWELL_MS = 300;
+function LazySparkline({ ctx, info, up }) {
+  const ref = T2(null);
+  const [values, setValues] = d2(info.sparkline ?? null);
+  A2(() => {
+    if (info.sparkline || !ctx.datafeed.getSparkline || !ref.current) return;
+    let alive = true;
+    const load = () => {
+      let hit = sparkCache.get(info.symbol);
+      if (!hit || Date.now() - hit.at > SPARK_TTL) {
+        hit = { at: Date.now(), values: ctx.datafeed.getSparkline(info.symbol).catch(() => []) };
+        sparkCache.set(info.symbol, hit);
+      }
+      void hit.values.then((v3) => alive && setValues(v3));
+    };
+    let timer;
+    const io = new IntersectionObserver((entries) => {
+      clearTimeout(timer);
+      if (!entries.some((e3) => e3.isIntersecting)) return;
+      timer = setTimeout(() => {
+        io.disconnect();
+        load();
+      }, SPARK_DWELL_MS);
+    });
+    io.observe(ref.current);
+    return () => {
+      alive = false;
+      clearTimeout(timer);
+      io.disconnect();
+    };
+  }, [info.symbol]);
+  return /* @__PURE__ */ a3("span", { ref, class: "fnc-sr-spark-slot", children: values && /* @__PURE__ */ a3(Sparkline, { values, up }) });
+}
 function Sparkline({ values, up }) {
   if (values.length < 2) return null;
   const min = Math.min(...values);
@@ -1855,6 +1892,7 @@ function SymbolSearch({ ctx }) {
   const [exchange, setExchange] = d2(null);
   const [results, setResults] = d2(null);
   const [loading, setLoading] = d2(true);
+  const [pending, setPending] = d2(true);
   const [recent, setRecent] = d2(() => ctx.storage.get(RECENT_KEY2, []));
   const [favorites, setFavorites] = d2(() => ctx.storage.get(FAVORITE_KEY, []));
   const [active, setActive] = d2(0);
@@ -1864,8 +1902,19 @@ function SymbolSearch({ ctx }) {
   A2(() => {
     let alive = true;
     setLoading(true);
+    setPending(true);
     const id = setTimeout(() => {
-      ctx.datafeed.searchSymbols?.(query.trim()).then((items) => alive && setResults(items)).catch(() => alive && setResults([])).finally(() => alive && setLoading(false));
+      const feed = ctx.datafeed;
+      const search = feed.searchSymbolsProgressive ? feed.searchSymbolsProgressive(query.trim(), (partial) => {
+        if (!alive) return;
+        setResults(partial);
+        setLoading(false);
+      }) : feed.searchSymbols?.(query.trim());
+      search?.then((items) => alive && setResults(items)).catch(() => alive && setResults([])).finally(() => {
+        if (!alive) return;
+        setLoading(false);
+        setPending(false);
+      });
     }, DEBOUNCE_MS);
     return () => {
       alive = false;
@@ -1879,14 +1928,33 @@ function SymbolSearch({ ctx }) {
   const exchanges = w2(() => {
     const counts = /* @__PURE__ */ new Map();
     for (const r3 of results ?? []) if (matchCategory(r3)) counts.set(r3.exchange, (counts.get(r3.exchange) ?? 0) + 1);
-    return [...counts.entries()].sort((a4, b) => b[1] - a4[1]);
+    const declared = ctx.searchExchanges.map((e3) => ({ ...e3, count: counts.get(e3.name) }));
+    const others = [...counts.entries()].filter(([name]) => !ctx.searchExchanges.some((e3) => e3.name === name)).sort((a4, b) => b[1] - a4[1]).map(([name, count]) => ({ name, label: void 0, logoUrl: void 0, count }));
+    return [...declared, ...others];
   }, [results, category]);
   const q2 = query.trim().toLowerCase();
   const favoriteRows = filter(favorites).filter((f4) => !q2 || f4.name.toLowerCase().includes(q2) || f4.symbol.toLowerCase().includes(q2));
   const showRecent = view.kind === "all" && !q2 && recent.length > 0;
   const recentRows = showRecent ? filter(recent) : [];
-  const resultRows = view.kind === "favorites" ? favoriteRows : filter(results ?? []);
+  const allResults = view.kind === "favorites" ? favoriteRows : filter(results ?? []);
+  const preview = ctx.searchPreviewPerExchange;
+  const more = /* @__PURE__ */ new Map();
+  let resultRows = allResults;
+  if (preview > 0 && view.kind === "all" && !exchange) {
+    const seen = /* @__PURE__ */ new Map();
+    const total = /* @__PURE__ */ new Map();
+    for (const r3 of allResults) total.set(r3.exchange, (total.get(r3.exchange) ?? 0) + 1);
+    resultRows = [];
+    for (const r3 of allResults) {
+      const n2 = (seen.get(r3.exchange) ?? 0) + 1;
+      seen.set(r3.exchange, n2);
+      if (n2 > preview) continue;
+      resultRows.push(r3);
+      if (n2 === preview && (total.get(r3.exchange) ?? 0) > preview) more.set(resultRows.length - 1, { exchange: r3.exchange, count: total.get(r3.exchange) });
+    }
+  }
   const rows = [...recentRows, ...resultRows];
+  const exchangeLabel = (name) => ctx.searchExchanges.find((e3) => e3.name === name)?.label?.[locale] ?? name;
   A2(() => setActive(0), [query, category, exchange, view, results]);
   A2(() => {
     listRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
@@ -1957,7 +2025,7 @@ function SymbolSearch({ ctx }) {
               cat && ` \xB7 ${cat.label[locale]}`
             ] })
           ] }),
-          info.sparkline && /* @__PURE__ */ a3(Sparkline, { values: info.sparkline, up }),
+          (info.sparkline || ctx.datafeed.getSparkline) && /* @__PURE__ */ a3(LazySparkline, { ctx, info, up }, info.symbol),
           info.price !== void 0 && /* @__PURE__ */ a3("span", { class: "fnc-sr-quote", children: [
             /* @__PURE__ */ a3("b", { children: formatPrice(info.price, info.pricePrecision) }),
             info.changePercent !== void 0 && /* @__PURE__ */ a3("span", { class: trend, children: [
@@ -1983,7 +2051,8 @@ function SymbolSearch({ ctx }) {
       }
     );
   };
-  const sideItem = (label, selected, onClick, extra) => /* @__PURE__ */ a3("button", { class: "fnc-sr-side-item", "aria-pressed": selected, onClick, children: [
+  const sideItem = (label, selected, onClick, extra, logoUrl) => /* @__PURE__ */ a3("button", { class: "fnc-sr-side-item", "aria-pressed": selected, onClick, children: [
+    logoUrl !== void 0 && (logoUrl ? /* @__PURE__ */ a3("img", { class: "fnc-sr-side-logo", src: logoUrl, alt: "", "aria-hidden": "true" }) : /* @__PURE__ */ a3("i", { class: "fnc-sr-side-logo", "aria-hidden": "true" })),
     /* @__PURE__ */ a3("span", { children: label }),
     extra
   ] });
@@ -2019,7 +2088,13 @@ function SymbolSearch({ ctx }) {
         sideItem(t3.favorites, view.kind === "favorites", () => (setView({ kind: "favorites" }), setExchange(null)), /* @__PURE__ */ a3("em", { children: favorites.length || "" })),
         exchanges.length > 0 && /* @__PURE__ */ a3("div", { class: "fnc-sr-side-title", children: t3.exchanges }),
         exchanges.map(
-          ([name, count]) => sideItem(name, exchange === name, () => (setView({ kind: "all" }), setExchange(exchange === name ? null : name)), /* @__PURE__ */ a3("em", { children: count }))
+          (x2) => sideItem(
+            x2.label?.[locale] ?? x2.name,
+            exchange === x2.name,
+            () => (setView({ kind: "all" }), setExchange(exchange === x2.name ? null : x2.name)),
+            /* @__PURE__ */ a3("em", { children: x2.count ?? (pending ? "" : 0) }),
+            ctx.searchExchanges.length ? x2.logoUrl ?? "" : void 0
+          )
         )
       ] }),
       /* @__PURE__ */ a3("div", { class: "fnc-sr-list fnc-scroll", id: "fnc-search-results", role: "listbox", ref: listRef, children: [
@@ -2029,7 +2104,13 @@ function SymbolSearch({ ctx }) {
         ] }),
         recentRows.map((info, i3) => row2(info, i3, true)),
         (recentRows.length > 0 || view.kind === "favorites") && /* @__PURE__ */ a3("div", { class: "fnc-sr-section", children: view.kind === "favorites" ? t3.favorites : t3.symbols }),
-        loading && !results && view.kind === "all" ? Array.from({ length: 6 }, () => /* @__PURE__ */ a3("div", { class: "fnc-sr-skeleton", "aria-hidden": "true" })) : resultRows.map((info, i3) => row2(info, recentRows.length + i3, false)),
+        loading && !results && view.kind === "all" ? Array.from({ length: 6 }, () => /* @__PURE__ */ a3("div", { class: "fnc-sr-skeleton", "aria-hidden": "true" })) : resultRows.map((info, i3) => {
+          const m3 = more.get(i3);
+          return m3 ? /* @__PURE__ */ a3($, { children: [
+            row2(info, recentRows.length + i3, false),
+            /* @__PURE__ */ a3("button", { class: "fnc-sr-more", onClick: () => (setView({ kind: "all" }), setExchange(m3.exchange)), children: t3.showAllIn.replace("{exchange}", exchangeLabel(m3.exchange)).replace("{n}", m3.count.toLocaleString(locale === "ko" ? "ko-KR" : "en-US")) })
+          ] }) : row2(info, recentRows.length + i3, false);
+        }),
         !loading && rows.length === 0 && /* @__PURE__ */ a3("div", { class: "fnc-empty", children: view.kind === "favorites" && favorites.length === 0 ? t3.noFavorites : t3.noResults })
       ] })
     ] }),
@@ -3170,6 +3251,10 @@ var CSS = (
 }
 .fnc-sr-side-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .fnc-sr-side-item em { font-style: normal; font-size: 12px; color: var(--fnc-text-2); }
+.fnc-sr-side-logo { flex: none; width: 18px; height: 18px; border-radius: 5px; object-fit: cover; background: var(--fnc-surface); }
+.fnc-sr-spark-slot { display: inline-flex; flex: none; width: 72px; height: 24px; }
+.fnc-sr-more { display: block; width: calc(100% - 16px); margin: 2px 8px 8px; padding: 8px 12px; border-radius: var(--fnc-radius); background: var(--fnc-surface); color: var(--fnc-text-2); font-size: 13px; font-weight: 600; text-align: left; }
+.fnc-sr-more:hover { color: var(--fnc-text); }
 .fnc-sr-side-item:hover { background: var(--fnc-surface); }
 .fnc-sr-side-item[aria-pressed='true'] { background: var(--fnc-surface); font-weight: 700; }
 .fnc-chip-token {
@@ -4196,6 +4281,8 @@ function createPane(shell, config) {
     storage: shell.storage,
     intervalGroups: config.intervalGroups,
     searchCategories: config.searchCategories,
+    searchExchanges: config.searchExchanges ?? [],
+    searchPreviewPerExchange: config.searchPreviewPerExchange ?? 0,
     displayTimezone: config.displayTimezone,
     showLogo: config.symbolLogo,
     searchHotkey: config.searchHotkey,
@@ -4270,6 +4357,8 @@ function createTradingChart(container, options) {
     favoriteIntervals,
     onFavoriteIntervalsChange,
     searchCategories = DEFAULT_SEARCH_CATEGORIES,
+    searchExchanges = [],
+    searchPreviewPerExchange = 0,
     storageKey = "funnest-charts",
     searchHotkey = true,
     symbolLogo = true,
@@ -4299,6 +4388,8 @@ function createTradingChart(container, options) {
     chartType,
     intervalGroups,
     searchCategories,
+    searchExchanges,
+    searchPreviewPerExchange,
     symbolLogo,
     searchHotkey,
     drawingToolbar,
@@ -4368,6 +4459,8 @@ function createMultiChart(container, options) {
     favoriteIntervals,
     onFavoriteIntervalsChange,
     searchCategories = DEFAULT_SEARCH_CATEGORIES,
+    searchExchanges = [],
+    searchPreviewPerExchange = 0,
     storageKey = "funnest-charts",
     searchHotkey = true,
     symbolLogo = true,
@@ -4438,6 +4531,8 @@ function createMultiChart(container, options) {
       chartType,
       intervalGroups,
       searchCategories,
+      searchExchanges,
+      searchPreviewPerExchange,
       symbolLogo,
       searchHotkey,
       drawingToolbar,

package/dist/pane.d.ts

@@ -1,6 +1,6 @@
 /** @jsxImportSource preact */
 import { type Chart, type ChartOptions, type ChartType, type Datafeed, type Resolution } from '@funnest/charts';
-import type { ContextMenuItems, IntervalGroup, MultiControls, SearchCategory, UiState, WidgetContext } from './context';
+import type { ContextMenuItems, IntervalGroup, MultiControls, SearchCategory, SearchExchange, UiState, WidgetContext } from './context';
 import { type Shell } from './shell';
 import { Store } from './store';
 export interface PaneConfig {
@@ -11,6 +11,8 @@ export interface PaneConfig {
     chartType: ChartType;
     intervalGroups: readonly IntervalGroup[];
     searchCategories: readonly SearchCategory[];
+    searchExchanges?: readonly SearchExchange[];
+    searchPreviewPerExchange?: number;
     symbolLogo: boolean;
     drawingToolbar: boolean;
     attribution: boolean;

package/dist/trading-chart.d.ts

@@ -1,6 +1,6 @@
 /** @jsxImportSource preact */
 import { type Chart, type ChartOptions, type ChartType, type Datafeed, type Locale, type ChartState, type Resolution, type ThemeTokens } from '@funnest/charts';
-import type { ContextMenuItems, IntervalGroup, SearchCategory } from './context';
+import type { ContextMenuItems, IntervalGroup, SearchCategory, SearchExchange } from './context';
 import { type ColorScheme, type TradingChartSlots } from './shell';
 export type { ColorScheme, TradingChartSlots } from './shell';
 /** Interval menu: 분 | 시간 | 일. '12M' is shown as 1년. */
@@ -22,6 +22,13 @@ export interface TradingChartOptions extends Omit<ChartOptions, 'datafeed'> {
     onFavoriteIntervalsChange?: (intervals: Resolution[]) => void;
     /** Symbol search tabs. */
     searchCategories?: readonly SearchCategory[];
+    /** Exchanges listed in the symbol search sidebar from the start, with logos (counts fill in as results come). */
+    searchExchanges?: readonly SearchExchange[];
+    /**
+     * Symbol search: rows per exchange shown at first, each followed by "N개 모두 보기" when there
+     * are more (picking the exchange lists them all). Default 0: everything at once.
+     */
+    searchPreviewPerExchange?: number;
     /**
      * localStorage key prefix for UI preferences (favorite intervals, recent searches).
      * Default 'funnest-charts'. Pass null to keep them in memory only.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts-ui",
-  "version": "0.6.13",
+  "version": "0.6.15",
   "description": "Pro trading UI (toolbar, drawing tools, sheets) for Funnest Charts. Framework-agnostic.",
   "keywords": [
     "chart",
@@ -42,7 +42,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@funnest/charts": "0.6.13"
+    "@funnest/charts": "0.6.15"
   },
   "devDependencies": {
     "preact": "^11.2.0"