@funnest/charts-ui 0.6.18 → 0.6.20

package/README.md

@@ -1,8 +1,6 @@
 # @funnest/charts-ui
 
-툴바·심볼 검색·지표·그리기 도구가 있는 트레이딩 차트 위젯
-
-Full trading chart widget (toolbar, symbol search, indicators, drawing tools). Framework-free.
+The full trading chart widget: toolbar, symbol search, indicators and drawing tools. Framework-free.
 
 ```bash
 npm i @funnest/charts-ui
@@ -13,18 +11,19 @@ import { createTradingChart } from '@funnest/charts-ui';
 
 const widget = createTradingChart(document.getElementById('chart')!, {
   datafeed: myDatafeed,
-  symbol: '005930',
+  symbol: 'AAPL',
   resolution: '1D',
-  colorScheme: 'system', // OS 라이트/다크 설정을 따라요
+  colorScheme: 'system', // follows the OS light/dark setting
 });
 ```
 
-- 프레임워크와 상관없이 동작해요. React는 `@funnest/charts-react`의 `<FnChart />`를 쓰세요.
-- 슬롯(`toolbar`, `toolbarEnd`, `belowToolbar`, `footer`)으로 내 UI를 끼워 넣어요.
-- `save()` / `load()`로 레이아웃(지표, 그리기, 설정)을 JSON으로 저장·복원해요.
+- Works with any framework. In React, use `<FnChart />` from `@funnest/charts-react`.
+- Put your own UI into slots: `toolbar`, `toolbarEnd`, `belowToolbar`, `footer`.
+- `save()` / `load()` keep the layout (indicators, drawings, settings) as JSON.
+- English by default, Korean for a Korean browser; replace any word with the `strings` option.
 
-## 링크
+## Links
 
-- 문서: https://charts.funnest.xyz/docs/
-- GitHub: https://github.com/funnest-xyz/funnest-charts
-- 라이선스: Apache-2.0
+- Docs: https://charts.funnest.xyz/docs/
+- GitHub: https://github.com/funnest-xyz/funnest-charts ([한국어](https://github.com/funnest-xyz/funnest-charts/blob/main/README.ko.md))
+- License: Apache-2.0

package/dist/context.d.ts

@@ -1,4 +1,4 @@
-import type { Chart, ChartContextMenu, ChartLayout, ChartType, CompareInfo, Datafeed, Drawing, DrawingType, IndicatorConfig, Locale, ReplayStatus, Resolution, SymbolInfo } from '@funnest/charts';
+import type { Chart, ChartContextMenu, ChartLayout, ChartType, CompareInfo, Datafeed, Drawing, DrawingType, IndicatorConfig, LegendItem, Locale, ReplayStatus, Resolution, SymbolInfo } from '@funnest/charts';
 import type { LayoutId } from './layouts';
 import type { WidgetStorage } from './storage';
 import type { Strings } from './i18n';
@@ -40,6 +40,8 @@ export interface UiState {
     canUndo: boolean;
     canRedo: boolean;
     compares: CompareInfo[];
+    /** The app's legend rows (chart.addLegendItem). */
+    legendItems: readonly LegendItem[];
     replay: ReplayStatus;
 }
 /** A row in the chart's right-click menu, or a divider. */

package/dist/index.js

@@ -2624,6 +2624,27 @@ function IndicatorItem({ ctx, item }) {
     }
   );
 }
+function AppItem({ ctx, item }) {
+  const t3 = stringsOf(ctx.store.get());
+  return /* @__PURE__ */ a3("div", { class: item.visible ? "fnc-ind" : "fnc-ind fnc-ind-hidden", children: [
+    item.onToggle && /* @__PURE__ */ a3(
+      "button",
+      {
+        class: "fnc-ind-btn fnc-ind-eye",
+        "data-tip": item.visible ? t3.hide : t3.show,
+        "aria-label": `${item.name} ${item.visible ? t3.hide : t3.show}`,
+        "aria-pressed": !item.visible,
+        onClick: () => ctx.chart.setLegendItemVisible(item.id, !item.visible),
+        children: item.visible ? /* @__PURE__ */ a3(EyeIcon, {}) : /* @__PURE__ */ a3(EyeOffIcon, {})
+      }
+    ),
+    /* @__PURE__ */ a3("span", { class: "fnc-ind-title", children: item.name }),
+    /* @__PURE__ */ a3("span", { class: "fnc-ind-actions", children: [
+      item.onSettings && /* @__PURE__ */ a3("button", { class: "fnc-ind-btn", "data-tip": t3.indicatorSettings, "aria-label": `${item.name} ${t3.indicatorSettings}`, onClick: () => item.onSettings?.(), children: /* @__PURE__ */ a3(GearIcon, {}) }),
+      item.onRemove && /* @__PURE__ */ a3("button", { class: "fnc-ind-btn", "data-tip": t3.removeIndicator, "aria-label": `${item.name} ${t3.removeIndicator}`, onClick: () => item.onRemove?.(), children: /* @__PURE__ */ a3(SmallCloseIcon, {}) })
+    ] })
+  ] });
+}
 function Legend({ ctx }) {
   const s3 = useStore(ctx.store);
   const t3 = stringsOf(s3);
@@ -2729,7 +2750,8 @@ 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(ChevronUpIcon, {}) }))
+      !collapsed && s3.legendItems.map((item) => /* @__PURE__ */ a3(AppItem, { ctx, item })),
+      overlayItems.length + s3.legendItems.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 }) })
@@ -4281,6 +4303,7 @@ function createPane(shell, config) {
     canUndo: chart.canUndo,
     canRedo: chart.canRedo,
     compares: chart.getCompares(),
+    legendItems: chart.legendItems,
     replay: chart.replay,
     chartType: config.chartType,
     drawingTool: null,
@@ -4307,6 +4330,7 @@ function createPane(shell, config) {
     chart.on("chartTypeChange", (chartType) => store.set({ chartType })),
     chart.on("historyChange", ({ canUndo, canRedo }) => store.set({ canUndo, canRedo })),
     chart.on("comparesChange", (compares) => store.set({ compares })),
+    chart.on("legendItemsChange", (legendItems) => store.set({ legendItems })),
     chart.on("replayChange", (replay) => store.set({ replay }))
   ];
   const load = (sym, res) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts-ui",
-  "version": "0.6.18",
+  "version": "0.6.20",
   "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.18"
+    "@funnest/charts": "0.6.20"
   },
   "devDependencies": {
     "preact": "^11.2.0"