@funnest/charts-ui 0.6.21 → 0.6.23

package/dist/i18n.d.ts

@@ -93,6 +93,8 @@ export declare const STRINGS: {
         addIndicator: string;
         indicatorSettings: string;
         removeIndicator: string;
+        hideVolume: string;
+        volumeDesc: string;
         apply: string;
         cancel: string;
         numbersHint: string;
@@ -238,6 +240,8 @@ export declare const STRINGS: {
         addIndicator: string;
         indicatorSettings: string;
         removeIndicator: string;
+        hideVolume: string;
+        volumeDesc: string;
         apply: string;
         cancel: string;
         numbersHint: string;

package/dist/index.js

@@ -518,6 +518,8 @@ var STRINGS = {
     addIndicator: "\uC9C0\uD45C \uCD94\uAC00",
     indicatorSettings: "\uC9C0\uD45C \uC124\uC815",
     removeIndicator: "\uC9C0\uD45C \uC0AD\uC81C",
+    hideVolume: "\uAC70\uB798\uB7C9 \uC228\uAE30\uAE30",
+    volumeDesc: "\uBD09\uB9C8\uB2E4 \uAC70\uB798\uB41C \uC591 (\uAC00\uACA9 \uC544\uB798 \uC601\uC5ED)",
     apply: "\uC801\uC6A9",
     cancel: "\uCDE8\uC18C",
     numbersHint: "\uC27C\uD45C\uB85C \uAD6C\uBD84 (\uC608: 5, 20, 60)",
@@ -665,6 +667,8 @@ var STRINGS = {
     addIndicator: "Add indicator",
     indicatorSettings: "Indicator settings",
     removeIndicator: "Remove indicator",
+    hideVolume: "Hide volume",
+    volumeDesc: "How much traded in each bar (pane under the price)",
     apply: "Apply",
     cancel: "Cancel",
     numbersHint: "Comma separated (e.g. 5, 20, 60)",
@@ -1451,11 +1455,16 @@ function IndicatorPicker({ ctx }) {
   const all = ctx.chart.indicatorDefinitions().filter((d3) => !d3.hidden);
   const q2 = query.trim().toLowerCase();
   const matches = (d3) => !q2 || [d3.type, d3.name.ko, d3.name.en, d3.description[locale]].some((s3) => s3.toLowerCase().includes(q2));
+  const volumeHidden = !ctx.chart.settings.volume && (!q2 || [t3.settingVolume, t3.volume, "volume"].some((s3) => s3.toLowerCase().includes(q2)));
+  const showVolume = () => {
+    ctx.chart.setVolumeVisible(true);
+    close();
+  };
   const groups = [
-    [locale === "ko" ? "\uAC00\uACA9 \uCC28\uD2B8\uC5D0 \uD45C\uC2DC" : "On price", all.filter((d3) => d3.overlay && matches(d3))],
-    [locale === "ko" ? "\uC544\uB798 \uC601\uC5ED\uC5D0 \uD45C\uC2DC" : "Separate pane", all.filter((d3) => !d3.overlay && matches(d3))]
-  ].filter(([, defs]) => defs.length > 0);
-  const first = groups[0]?.[1][0];
+    { label: locale === "ko" ? "\uAC00\uACA9 \uCC28\uD2B8\uC5D0 \uD45C\uC2DC" : "On price", defs: all.filter((d3) => d3.overlay && matches(d3)), volume: false },
+    { label: locale === "ko" ? "\uC544\uB798 \uC601\uC5ED\uC5D0 \uD45C\uC2DC" : "Separate pane", defs: all.filter((d3) => !d3.overlay && matches(d3)), volume: volumeHidden }
+  ].filter((g3) => g3.defs.length > 0 || g3.volume);
+  const first = groups.find((g3) => g3.defs.length)?.defs[0];
   return /* @__PURE__ */ a3(Dialog, { title: t3.addIndicator, onClose: close, children: [
     all.length > SEARCH_THRESHOLD && /* @__PURE__ */ a3("div", { class: "fnc-search fnc-ind-search", children: /* @__PURE__ */ a3(
       "input",
@@ -1470,8 +1479,12 @@ function IndicatorPicker({ ctx }) {
     ) }),
     /* @__PURE__ */ a3("div", { class: "fnc-sr-list fnc-scroll", children: [
       groups.length === 0 && /* @__PURE__ */ a3("div", { class: "fnc-empty", children: t3.noResults }),
-      groups.map(([label, defs]) => /* @__PURE__ */ a3($, { children: [
+      groups.map(({ label, defs, volume }) => /* @__PURE__ */ a3($, { children: [
         /* @__PURE__ */ a3("div", { class: "fnc-sr-section", children: label }),
+        volume && /* @__PURE__ */ a3("button", { class: "fnc-sr-row", onClick: showVolume, children: /* @__PURE__ */ a3("span", { class: "fnc-sr-main", children: [
+          /* @__PURE__ */ a3("span", { class: "fnc-sr-name", children: t3.settingVolume }),
+          /* @__PURE__ */ a3("span", { class: "fnc-sr-meta", children: t3.volumeDesc })
+        ] }) }),
         defs.map((def) => {
           const type = def.type;
           return /* @__PURE__ */ a3("button", { class: "fnc-sr-row", onClick: () => add(type), children: /* @__PURE__ */ a3("span", { class: "fnc-sr-main", children: [
@@ -2645,6 +2658,26 @@ function AppItem({ ctx, item }) {
     ] })
   ] });
 }
+function VolumeItem({ ctx, value }) {
+  const t3 = stringsOf(ctx.store.get());
+  return /* @__PURE__ */ a3("div", { class: "fnc-ind fnc-volume-item", children: [
+    /* @__PURE__ */ a3("span", { class: "fnc-ind-title", children: t3.settingVolume }),
+    value !== null && /* @__PURE__ */ a3("b", { class: "fnc-flat", children: value }),
+    /* @__PURE__ */ a3("span", { class: "fnc-ind-actions", children: [
+      /* @__PURE__ */ a3(
+        "button",
+        {
+          class: "fnc-ind-btn",
+          "data-tip": t3.chartSettings,
+          "aria-label": `${t3.settingVolume} ${t3.chartSettings}`,
+          onClick: () => ctx.store.set({ dialog: { kind: "chartSettings" } }),
+          children: /* @__PURE__ */ a3(GearIcon, {})
+        }
+      ),
+      /* @__PURE__ */ a3("button", { class: "fnc-ind-btn", "data-tip": t3.hideVolume, "aria-label": t3.hideVolume, onClick: () => ctx.chart.setVolumeVisible(false), children: /* @__PURE__ */ a3(SmallCloseIcon, {}) })
+    ] })
+  ] });
+}
 function Legend({ ctx }) {
   const s3 = useStore(ctx.store);
   const t3 = stringsOf(s3);
@@ -2722,6 +2755,7 @@ function Legend({ ctx }) {
   const items = s3.indicators.length ? ctx.chart.indicatorLegend(hover?.index) : [];
   const overlayItems = items.filter((i3) => i3.overlay);
   const paneLegends = s3.layout.panes.filter((p3) => p3.kind === "indicator").map((pane) => ({ pane, item: items.find((i3) => i3.id === pane.id) }));
+  const volumePane = s3.layout.panes.find((p3) => p3.kind === "volume");
   return /* @__PURE__ */ a3($, { children: [
     /* @__PURE__ */ a3("div", { class: "fnc-legend", ref, children: [
       /* @__PURE__ */ a3("div", { class: "fnc-legend-title", children: [
@@ -2753,6 +2787,7 @@ function Legend({ ctx }) {
       !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, {}) }))
     ] }),
+    volumePane && /* @__PURE__ */ a3("div", { class: "fnc-legend fnc-pane-legend", style: { top: `${volumePane.top + 4}px` }, children: /* @__PURE__ */ a3(VolumeItem, { ctx, value: bar?.volume !== void 0 ? formatCompact(bar.volume, s3.locale) : null }) }),
     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 }) })
     )

package/package.json

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