@funnest/charts-ui 0.6.22 → 0.6.24

package/dist/i18n.d.ts

@@ -1,4 +1,4 @@
-import type { Locale, Resolution } from '@funnest/charts';
+import type { Locale } from '@funnest/charts';
 export declare const STRINGS: {
     ko: {
         searchSymbol: string;
@@ -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;
@@ -300,8 +304,4 @@ export declare function stringsOf(s: {
     locale: Locale;
     strings?: Partial<Strings> | undefined;
 }): Strings;
-/**
- * '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;
+export { resolutionLabel } from '@funnest/charts';

package/dist/index.js

@@ -424,6 +424,7 @@ function G2(n2, t3) {
 }
 
 // src/i18n.ts
+import { resolutionLabel } from "@funnest/charts";
 var STRINGS = {
   ko: {
     searchSymbol: "\uC885\uBAA9 \uAC80\uC0C9",
@@ -518,6 +519,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 +668,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)",
@@ -725,28 +730,6 @@ function stringsOf(s3) {
   if (!byLocale) merged.set(s3.strings, byLocale = {});
   return byLocale[s3.locale] ??= { ...STRINGS[s3.locale], ...s3.strings };
 }
-function resolutionLabel(resolution, locale, form = "short") {
-  const match = /^(\d*)([SDWM]?)$/i.exec(resolution.trim());
-  if (!match) return resolution;
-  const n2 = 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 ? `${n2}\uCD08` : `${n2}s`;
-    case "D":
-      return ko ? n2 === 1 && !long ? "\uC77C" : `${n2}\uC77C` : `${n2}D`;
-    case "W":
-      return ko ? n2 === 1 && !long ? "\uC8FC" : `${n2}\uC8FC` : `${n2}W`;
-    case "M":
-      if (n2 % 12 === 0) return ko ? `${n2 / 12}\uB144` : `${n2 / 12}Y`;
-      return ko ? n2 === 1 && !long ? "\uC6D4" : `${n2}\uAC1C\uC6D4` : `${n2}M`;
-    default:
-      if (n2 >= 60 && n2 % 60 === 0) return ko ? `${n2 / 60}\uC2DC\uAC04` : `${n2 / 60}h`;
-      return ko ? `${n2}\uBD84` : `${n2}m`;
-  }
-}
 
 // ../../node_modules/.pnpm/preact@11.2.0/node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs
 var f3 = /* @__PURE__ */ Symbol.for("pv");
@@ -1451,11 +1434,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 +1458,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 +2637,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 +2734,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 +2766,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 }) })
     )
@@ -4369,7 +4383,7 @@ function createPane(shell, config) {
     setSearchOpen: (open, target = "symbol") => store.set(open ? { searchOpen: true, searchTarget: target } : { searchOpen: false }),
     screenshot: () => {
       const s3 = store.get();
-      chart.takeScreenshot().toBlob((blob) => {
+      chart.takeScreenshot({ legend: true }).toBlob((blob) => {
         if (!blob) return;
         const a4 = document.createElement("a");
         a4.href = URL.createObjectURL(blob);

package/package.json

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