@funnest/charts-ui 0.6.12 → 0.6.14

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,7 @@ export interface WidgetContext {
     storage: WidgetStorage;
     intervalGroups: readonly IntervalGroup[];
     searchCategories: readonly SearchCategory[];
+    searchExchanges: readonly SearchExchange[];
     /** IANA zone used for the status-bar clock (KST for Korean users by default). */
     displayTimezone: string;
     showLogo: boolean;

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

@@ -827,6 +827,7 @@ var EyeIcon = () => /* @__PURE__ */ a3(Icon, { size: 14, children: [
   /* @__PURE__ */ a3("circle", { cx: "10", cy: "10", r: "2.3" })
 ] });
 var EyeOffIcon = () => /* @__PURE__ */ a3(Icon, { size: 14, children: /* @__PURE__ */ a3("path", { d: "M3 3l14 14M8.2 5a8 8 0 0 1 1.8-.5c5 0 8 5.5 8 5.5a14 14 0 0 1-2.2 2.9M5.4 6.4A14 14 0 0 0 2 10s3 5.5 8 5.5a7.7 7.7 0 0 0 3.6-.9" }) });
+var ChevronUpIcon = () => /* @__PURE__ */ a3(Icon, { size: 14, children: /* @__PURE__ */ a3("path", { d: "M5 12l5-5 5 5" }) });
 var MagnetIcon = () => /* @__PURE__ */ a3(Icon, { children: [
   /* @__PURE__ */ a3("path", { d: "M5 4h3v6.5a2 2 0 0 0 4 0V4h3v6.5a5 5 0 0 1-10 0z" }),
   /* @__PURE__ */ a3("path", { d: "M5 7h3M12 7h3" })
@@ -838,7 +839,6 @@ var StarIcon = ({ filled = false }) => /* @__PURE__ */ a3(Icon, { size: 16, chil
     fill: filled ? "currentColor" : "none"
   }
 ) });
-var CollapseLeftIcon = () => /* @__PURE__ */ a3(Icon, { size: 14, children: /* @__PURE__ */ a3("path", { d: "M11 5l-5 5 5 5M15 5l-5 5 5 5" }) });
 var SettingsIcon = () => /* @__PURE__ */ a3(Icon, { children: [
   /* @__PURE__ */ a3("path", { d: "M10 12.6a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2z" }),
   /* @__PURE__ */ a3("path", { d: "M16.2 12a1.3 1.3 0 0 0 .26 1.43l.05.05a1.6 1.6 0 1 1-2.26 2.26l-.05-.05a1.3 1.3 0 0 0-1.43-.26 1.3 1.3 0 0 0-.79 1.19v.14a1.6 1.6 0 0 1-3.2 0v-.07a1.3 1.3 0 0 0-.85-1.19 1.3 1.3 0 0 0-1.43.26l-.05.05a1.6 1.6 0 1 1-2.26-2.26l.05-.05A1.3 1.3 0 0 0 4.5 12a1.3 1.3 0 0 0-1.19-.79h-.14a1.6 1.6 0 0 1 0-3.2h.07a1.3 1.3 0 0 0 1.19-.85 1.3 1.3 0 0 0-.26-1.43l-.05-.05a1.6 1.6 0 1 1 2.26-2.26l.05.05a1.3 1.3 0 0 0 1.43.26h.06a1.3 1.3 0 0 0 .79-1.19v-.14a1.6 1.6 0 0 1 3.2 0v.07a1.3 1.3 0 0 0 .79 1.19 1.3 1.3 0 0 0 1.43-.26l.05-.05a1.6 1.6 0 1 1 2.26 2.26l-.05.05a1.3 1.3 0 0 0-.26 1.43v.06a1.3 1.3 0 0 0 1.19.79h.14a1.6 1.6 0 0 1 0 3.2h-.07a1.3 1.3 0 0 0-1.19.79z" })
@@ -1836,6 +1836,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 +1890,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 +1900,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,7 +1926,9 @@ 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));
@@ -1957,7 +2006,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 +2032,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 +2069,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: [
@@ -2607,7 +2663,7 @@ function Legend({ ctx }) {
         )
       ] })),
       !collapsed && overlayItems.map((item) => /* @__PURE__ */ a3(IndicatorItem, { ctx, item })),
-      overlayItems.length > 0 && (collapsed ? /* @__PURE__ */ a3("button", { class: "fnc-ind-handle", "aria-expanded": "false", "aria-label": t3.expand, "data-tip": t3.expand, onClick: () => setCollapsed(false), children: /* @__PURE__ */ a3("span", {}) }) : /* @__PURE__ */ a3("button", { class: "fnc-ind-collapse", "aria-expanded": "true", "aria-label": t3.collapse, "data-tip": t3.collapse, onClick: () => setCollapsed(true), children: /* @__PURE__ */ a3(CollapseLeftIcon, {}) }))
+      overlayItems.length > 0 && (collapsed ? /* @__PURE__ */ a3("button", { class: "fnc-ind-handle", "aria-expanded": "false", "aria-label": t3.expand, "data-tip": t3.expand, onClick: () => setCollapsed(false), children: /* @__PURE__ */ a3("span", {}) }) : /* @__PURE__ */ a3("button", { class: "fnc-ind-collapse", "aria-expanded": "true", "aria-label": t3.collapse, "data-tip": t3.collapse, onClick: () => setCollapsed(true), children: /* @__PURE__ */ a3(ChevronUpIcon, {}) }))
     ] }),
     paneLegends.map(
       ({ pane, item }) => item && /* @__PURE__ */ a3("div", { class: "fnc-legend fnc-pane-legend", style: { top: `${pane.top + 4}px` }, children: /* @__PURE__ */ a3(IndicatorItem, { ctx, item }) })
@@ -3170,6 +3226,8 @@ 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-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 +4254,7 @@ function createPane(shell, config) {
     storage: shell.storage,
     intervalGroups: config.intervalGroups,
     searchCategories: config.searchCategories,
+    searchExchanges: config.searchExchanges ?? [],
     displayTimezone: config.displayTimezone,
     showLogo: config.symbolLogo,
     searchHotkey: config.searchHotkey,
@@ -4270,6 +4329,7 @@ function createTradingChart(container, options) {
     favoriteIntervals,
     onFavoriteIntervalsChange,
     searchCategories = DEFAULT_SEARCH_CATEGORIES,
+    searchExchanges = [],
     storageKey = "funnest-charts",
     searchHotkey = true,
     symbolLogo = true,
@@ -4299,6 +4359,7 @@ function createTradingChart(container, options) {
     chartType,
     intervalGroups,
     searchCategories,
+    searchExchanges,
     symbolLogo,
     searchHotkey,
     drawingToolbar,
@@ -4368,6 +4429,7 @@ function createMultiChart(container, options) {
     favoriteIntervals,
     onFavoriteIntervalsChange,
     searchCategories = DEFAULT_SEARCH_CATEGORIES,
+    searchExchanges = [],
     storageKey = "funnest-charts",
     searchHotkey = true,
     symbolLogo = true,
@@ -4438,6 +4500,7 @@ function createMultiChart(container, options) {
       chartType,
       intervalGroups,
       searchCategories,
+      searchExchanges,
       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,7 @@ export interface PaneConfig {
     chartType: ChartType;
     intervalGroups: readonly IntervalGroup[];
     searchCategories: readonly SearchCategory[];
+    searchExchanges?: readonly SearchExchange[];
     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,8 @@ 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[];
     /**
      * 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.12",
+  "version": "0.6.14",
   "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.12"
+    "@funnest/charts": "0.6.14"
   },
   "devDependencies": {
     "preact": "^11.2.0"