candleview 1.1.1 → 1.1.3

package/dist/index.mjs

@@ -3388,11 +3388,10 @@ class ua extends $.Component {
       onChartTypeClick: c,
       onFullscreenClick: d,
       onTimezoneClick: p,
-      showToolbar: f = !0,
-      onCameraClick: k,
-      i18n: P
+      onCameraClick: f,
+      i18n: k
     } = this.props;
-    return f ? this.isMobileView() ? /* @__PURE__ */ m.jsxs("div", { style: {
+    return this.isMobileView() ? /* @__PURE__ */ m.jsxs("div", { style: {
       background: t.panel.backgroundColor,
       borderBottom: `1px solid ${t.panel.borderColor}`,
       padding: "9px 13px",
@@ -3425,11 +3424,11 @@ class ua extends $.Component {
               transition: "all 0.2s ease",
               minHeight: "31px"
             },
-            onMouseEnter: (_) => {
-              h || (_.currentTarget.style.background = t.toolbar.button.hover);
+            onMouseEnter: (P) => {
+              h || (P.currentTarget.style.background = t.toolbar.button.hover);
             },
-            onMouseLeave: (_) => {
-              h || (_.currentTarget.style.background = "transparent");
+            onMouseLeave: (P) => {
+              h || (P.currentTarget.style.background = "transparent");
             },
             children: /* @__PURE__ */ m.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
               /* @__PURE__ */ m.jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
@@ -3463,11 +3462,11 @@ class ua extends $.Component {
             transition: "all 0.3s ease",
             position: "relative"
           },
-          onMouseEnter: (_) => {
-            _.currentTarget.style.background = t.toolbar.button.hover;
+          onMouseEnter: (P) => {
+            P.currentTarget.style.background = t.toolbar.button.hover;
           },
-          onMouseLeave: (_) => {
-            _.currentTarget.style.background = "transparent";
+          onMouseLeave: (P) => {
+            P.currentTarget.style.background = "transparent";
           },
           children: /* @__PURE__ */ m.jsx("div", { style: {
             width: "16px",
@@ -3528,11 +3527,11 @@ class ua extends $.Component {
               transition: "all 0.2s ease",
               minHeight: "31px"
             },
-            onMouseEnter: (_) => {
-              n || (_.currentTarget.style.background = t.toolbar.button.hover);
+            onMouseEnter: (P) => {
+              n || (P.currentTarget.style.background = t.toolbar.button.hover);
             },
-            onMouseLeave: (_) => {
-              n || (_.currentTarget.style.background = "transparent");
+            onMouseLeave: (P) => {
+              n || (P.currentTarget.style.background = "transparent");
             },
             children: e
           }
@@ -3566,11 +3565,11 @@ class ua extends $.Component {
               transition: "all 0.2s ease",
               minHeight: "31px"
             },
-            onMouseEnter: (_) => {
-              o || (_.currentTarget.style.background = t.toolbar.button.hover);
+            onMouseEnter: (P) => {
+              o || (P.currentTarget.style.background = t.toolbar.button.hover);
             },
-            onMouseLeave: (_) => {
-              o || (_.currentTarget.style.background = "transparent");
+            onMouseLeave: (P) => {
+              o || (P.currentTarget.style.background = "transparent");
             },
             children: [
               /* @__PURE__ */ m.jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
@@ -3610,11 +3609,11 @@ class ua extends $.Component {
               transition: "all 0.2s ease",
               minHeight: "31px"
             },
-            onMouseEnter: (_) => {
-              a || (_.currentTarget.style.background = t.toolbar.button.hover);
+            onMouseEnter: (P) => {
+              a || (P.currentTarget.style.background = t.toolbar.button.hover);
             },
-            onMouseLeave: (_) => {
-              a || (_.currentTarget.style.background = "transparent");
+            onMouseLeave: (P) => {
+              a || (P.currentTarget.style.background = "transparent");
             },
             children: oe(i, {
               size: 17
@@ -3650,11 +3649,11 @@ class ua extends $.Component {
               transition: "all 0.2s ease",
               minHeight: "31px"
             },
-            onMouseEnter: (_) => {
-              s || (_.currentTarget.style.background = t.toolbar.button.hover);
+            onMouseEnter: (P) => {
+              s || (P.currentTarget.style.background = t.toolbar.button.hover);
             },
-            onMouseLeave: (_) => {
-              s || (_.currentTarget.style.background = "transparent");
+            onMouseLeave: (P) => {
+              s || (P.currentTarget.style.background = "transparent");
             },
             children: [
               /* @__PURE__ */ m.jsx(
@@ -3664,7 +3663,7 @@ class ua extends $.Component {
                   color: s ? t.toolbar.button.activeTextColor || t.layout.textColor : t.toolbar.button.color
                 }
               ),
-              P.Indicators
+              k.Indicators
             ]
           }
         ),
@@ -3680,7 +3679,7 @@ class ua extends $.Component {
         /* @__PURE__ */ m.jsx(
           "button",
           {
-            title: P.toolbarButtons.fullScreen,
+            title: k.toolbarButtons.fullScreen,
             onClick: d,
             style: {
               background: "transparent",
@@ -3696,11 +3695,11 @@ class ua extends $.Component {
               minHeight: "31px",
               minWidth: "31px"
             },
-            onMouseEnter: (_) => {
-              _.currentTarget.style.background = t.toolbar.button.hover;
+            onMouseEnter: (P) => {
+              P.currentTarget.style.background = t.toolbar.button.hover;
             },
-            onMouseLeave: (_) => {
-              _.currentTarget.style.background = "transparent";
+            onMouseLeave: (P) => {
+              P.currentTarget.style.background = "transparent";
             },
             children: /* @__PURE__ */ m.jsx(we, { size: 17, color: t.toolbar.button.color })
           }
@@ -3714,8 +3713,8 @@ class ua extends $.Component {
         /* @__PURE__ */ m.jsx(
           "button",
           {
-            title: P.toolbarButtons.screenshot,
-            onClick: k,
+            title: k.toolbarButtons.screenshot,
+            onClick: f,
             style: {
               background: "transparent",
               border: "none",
@@ -3730,11 +3729,11 @@ class ua extends $.Component {
               minHeight: "31px",
               minWidth: "31px"
             },
-            onMouseEnter: (_) => {
-              _.currentTarget.style.background = t.toolbar.button.hover;
+            onMouseEnter: (P) => {
+              P.currentTarget.style.background = t.toolbar.button.hover;
             },
-            onMouseLeave: (_) => {
-              _.currentTarget.style.background = "transparent";
+            onMouseLeave: (P) => {
+              P.currentTarget.style.background = "transparent";
             },
             children: /* @__PURE__ */ m.jsx(ve, { size: 17, color: t.toolbar.button.color })
           }
@@ -3764,11 +3763,11 @@ class ua extends $.Component {
             transition: "all 0.3s ease",
             position: "relative"
           },
-          onMouseEnter: (_) => {
-            _.currentTarget.style.background = t.toolbar.button.hover;
+          onMouseEnter: (P) => {
+            P.currentTarget.style.background = t.toolbar.button.hover;
           },
-          onMouseLeave: (_) => {
-            _.currentTarget.style.background = "transparent";
+          onMouseLeave: (P) => {
+            P.currentTarget.style.background = "transparent";
           },
           children: /* @__PURE__ */ m.jsx("div", { style: {
             width: "16px",
@@ -3792,7 +3791,7 @@ class ua extends $.Component {
           ] }) })
         }
       ) })
-    ] }) : null;
+    ] });
   }
 }
 class Ri {
@@ -48210,8 +48209,7 @@ class Lo extends $.Component {
     return null;
   }
   render() {
-    const { showToolbar: t = !0 } = this.props;
-    return t ? /* @__PURE__ */ m.jsxs("div", { style: { position: "relative" }, children: [
+    return /* @__PURE__ */ m.jsxs("div", { style: { position: "relative" }, children: [
       /* @__PURE__ */ m.jsx("div", { style: {
         background: this.props.currentTheme.panel.backgroundColor,
         borderRight: `1px solid ${this.props.currentTheme.panel.borderColor}`,
@@ -48255,7 +48253,7 @@ class Lo extends $.Component {
       this.renderProjectInfoModal(),
       this.renderIrregularShapeModal(),
       this.renderTextToolModal()
-    ] }) : null;
+    ] });
   }
 }
 class kt extends $.Component {
@@ -49931,11 +49929,7 @@ const qo = {
 class Zo extends $.Component {
   // ===================== Internal Data Buffer =====================
   constructor(t) {
-    super({
-      showLeftPanel: !1,
-      showTopPanel: !1,
-      ...t
-    }), this.candleViewContainerRef = $.createRef(), this.chartRef = $.createRef(), this.chartContainerRef = $.createRef(), this.drawingLayerRef = $.createRef(), this.chart = null, this.resizeObserver = null, this.realTimeInterval = null, this.currentSeries = null, this.chartManager = null, this.updateTimeout = null, this.viewportManager = null, this.chartEventManager = null, this.preparedData = [], this.originalData = [], this.loadDataAsync = (e) => {
+    super(t), this.candleViewContainerRef = $.createRef(), this.chartRef = $.createRef(), this.chartContainerRef = $.createRef(), this.drawingLayerRef = $.createRef(), this.chart = null, this.resizeObserver = null, this.realTimeInterval = null, this.currentSeries = null, this.chartManager = null, this.updateTimeout = null, this.viewportManager = null, this.chartEventManager = null, this.preparedData = [], this.originalData = [], this.loadDataAsync = (e) => {
       this.setState({
         dataLoadProgress: 0,
         isDataLoading: !0
@@ -50264,8 +50258,6 @@ class Zo extends $.Component {
       isTimeFormatModalOpen: !1,
       isCloseTimeModalOpen: !1,
       isTradingDayModalOpen: !1,
-      currentCloseTime: "17:00",
-      currentTradingDayType: "trading-session",
       // time
       activeTimeframe: x.ONE_DAY,
       timeframe: Uo(t.timeframe) || x.ONE_DAY,
@@ -50277,7 +50269,9 @@ class Zo extends $.Component {
       displayData: [],
       isDataLoading: !1,
       dataLoadProgress: 0,
-      loadError: null
+      loadError: null,
+      showTopPanel: t.showTopPanel || !1,
+      showLeftPanel: t.showLeftPanel || !1
     }, this.chartEventManager = new Ri();
   }
   // ======================================== life cycle start ========================================
@@ -50293,10 +50287,11 @@ class Zo extends $.Component {
       const r = this.props.theme || "dark";
       this.setState({
         currentTheme: this.getThemeConfig(r)
-      }), this.updateChartTheme();
-      return;
+      }), this.handleThemeToggle();
     }
-    if (t.data !== this.props.data || t.url !== this.props.url) {
+    if (t.i18n !== this.props.i18n && (this.setState({
+      currentI18N: this.getI18nConfig(this.props.i18n || "en")
+    }), this.updateChartI18n(this.props.i18n || "en")), t.data !== this.props.data || t.url !== this.props.url) {
       this.setState({
         isDataLoading: !0,
         dataLoadProgress: 0
@@ -50398,6 +50393,13 @@ class Zo extends $.Component {
         }
     }), this.resizeObserver.observe(this.chartContainerRef.current));
   }
+  updateChartI18n(t) {
+    this.chart && this.chart.applyOptions({
+      localization: {
+        locale: t
+      }
+    });
+  }
   updateChartTheme() {
     const { currentTheme: t } = this.state;
     if (this.chart)
@@ -50435,7 +50437,7 @@ class Zo extends $.Component {
     return t === "en" ? le : Ho;
   }
   render() {
-    const { currentTheme: t, isDataLoading: e } = this.state, { height: i = 500, showToolbar: r = !0 } = this.props, n = `
+    const { currentTheme: t, isDataLoading: e } = this.state, { height: i = 500 } = this.props, r = `
     .custom-scrollbar::-webkit-scrollbar {
       width: 6px;
     }
@@ -50463,7 +50465,7 @@ class Zo extends $.Component {
     .modal-scrollbar::-webkit-scrollbar-thumb:hover {
       background: ${t.toolbar.button.color}60;
     }
-  `, s = this.state.isTimeframeModalOpen || this.state.isIndicatorModalOpen || this.state.isTradeModalOpen || this.state.isChartTypeModalOpen || this.state.isSubChartModalOpen || this.state.isTimezoneModalOpen || this.state.isTimeFormatModalOpen || this.state.isCloseTimeModalOpen || this.state.isTradingDayModalOpen || this.state.isMobileMenuOpen, a = this.state.currentI18N === le ? "Loading data..." : "正在加载数据...", o = this.state.currentI18N === le ? "Load failed" : "加载失败";
+  `, n = this.state.isTimeframeModalOpen || this.state.isIndicatorModalOpen || this.state.isTradeModalOpen || this.state.isChartTypeModalOpen || this.state.isSubChartModalOpen || this.state.isTimezoneModalOpen || this.state.isTimeFormatModalOpen || this.state.isCloseTimeModalOpen || this.state.isTradingDayModalOpen || this.state.isMobileMenuOpen, s = this.state.currentI18N === le ? "Loading data..." : "正在加载数据...", a = this.state.currentI18N === le ? "Load failed" : "加载失败";
     return /* @__PURE__ */ m.jsxs(
       "div",
       {
@@ -50481,7 +50483,7 @@ class Zo extends $.Component {
         "candleview-container": "true",
         onContextMenu: this.handleContextMenu,
         children: [
-          /* @__PURE__ */ m.jsx("style", { children: n }),
+          /* @__PURE__ */ m.jsx("style", { children: r }),
           e && /* @__PURE__ */ m.jsx(
             "div",
             {
@@ -50528,7 +50530,7 @@ class Zo extends $.Component {
                       fontSize: "16px",
                       fontWeight: 500,
                       textAlign: "center"
-                    }, children: a }),
+                    }, children: s }),
                     this.state.dataLoadProgress > 0 && /* @__PURE__ */ m.jsxs("div", { style: {
                       width: "240px",
                       marginTop: "8px",
@@ -50584,7 +50586,7 @@ class Zo extends $.Component {
                       borderRadius: "6px",
                       maxWidth: "320px"
                     }, children: [
-                      o,
+                      a,
                       ": ",
                       this.state.loadError
                     ] })
@@ -50599,7 +50601,7 @@ class Zo extends $.Component {
             100% { transform: rotate(360deg); }
           }
         ` }),
-          s && /* @__PURE__ */ m.jsx(
+          n && /* @__PURE__ */ m.jsx(
             "div",
             {
               style: {
@@ -50614,7 +50616,7 @@ class Zo extends $.Component {
               onClick: this.handleCloseModals
             }
           ),
-          this.props.showTopPanel && /* @__PURE__ */ m.jsx(
+          this.state.showTopPanel && /* @__PURE__ */ m.jsx(
             ua,
             {
               currentTheme: t,
@@ -50639,7 +50641,6 @@ class Zo extends $.Component {
               onTimezoneSelect: this.handleTimezoneSelect,
               handleSelectedSubChartIndicator: this.handleSelectedSubChartIndicator,
               handleSelectedMainChartIndicator: this.handleSelectedMainChartIndicator,
-              showToolbar: r,
               onCloseModals: this.handleCloseModals,
               onSubChartClick: this.handleSubChartClick,
               selectedSubChartIndicators: this.state.selectedSubChartIndicators,
@@ -50652,8 +50653,6 @@ class Zo extends $.Component {
               onTimeFormatClick: this.handleTimeFormatClick,
               onCloseTimeClick: this.handleCloseTimeClick,
               onTradingDayClick: this.handleTradingDayClick,
-              currentCloseTime: this.state.currentCloseTime,
-              currentTradingDayType: this.state.currentTradingDayType,
               isMobileMenuOpen: this.state.isMobileMenuOpen,
               onMobileMenuToggle: this.handleMobileMenuToggle
             }
@@ -50664,14 +50663,13 @@ class Zo extends $.Component {
             minHeight: 0,
             position: "relative"
           }, children: [
-            this.props.showLeftPanel && /* @__PURE__ */ m.jsx(
+            this.state.showLeftPanel && /* @__PURE__ */ m.jsx(
               Lo,
               {
                 currentTheme: t,
                 activeTool: this.state.activeTool,
                 onToolSelect: this.handleToolSelect,
                 onTradeClick: this.handleTradeClick,
-                showToolbar: r,
                 drawingLayerRef: this.drawingLayerRef,
                 selectedEmoji: this.state.selectedEmoji,
                 onEmojiSelect: this.handleEmojiSelect,
@@ -50746,11 +50744,11 @@ class Zo extends $.Component {
                         opacity: 0,
                         transition: "opacity 0.3s ease"
                       },
-                      onMouseEnter: (h) => {
-                        h.currentTarget.style.opacity = "1";
+                      onMouseEnter: (o) => {
+                        o.currentTarget.style.opacity = "1";
                       },
-                      onMouseLeave: (h) => {
-                        h.currentTarget.style.opacity = "0";
+                      onMouseLeave: (o) => {
+                        o.currentTarget.style.opacity = "0";
                       },
                       children: [
                         /* @__PURE__ */ m.jsx(

package/package.json

@@ -1,83 +1,82 @@
-{
-  "name": "candleview",
-  "version": "1.1.1",
-  "description": "A data visualization charts and draw graph engine for the financial industry.",
-  "keywords": [
-    "Finance",
-    "Financial Analysis",
-    "Financial Charts",
-    "Finance Trading",
-    "Trading",
-    "Chart",
-    "Charts",
-    "K-Line",
-    "KLine"
-  ],
-  "author": "happyboy",
-  "license": "AGPL-3.0-only",
-  "repository": "https://github.com/0xhappyboy/candleview",
-  "bugs": {
-    "url": "https://github.com/0xhappyboy/candleview/issues"
-  },
-  "homepage": "https://github.com/0xhappyboy/candleview#readme",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "source": "src/index.tsx",
-  "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    }
-  },
-  "engines": {
-    "node": ">=16"
-  },
-  "scripts": {
-    "clean": "rm -rf dist node_modules/.cache .tsbuildinfo",
-    "build": "vite build",
-    "build:fast": "vite build --mode development",
-    "build:types": "tsc --emitDeclarationOnly --outDir dist",
-    "start": "vite build --watch",
-    "dev": "vite",
-    "prepare": "npm run build",
-    "test": "run-s test:unit test:lint",
-    "test:build": "vite build",
-    "test:lint": "eslint .",
-    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
-    "test:watch": "react-scripts test --env=jsdom",
-    "predeploy": "cd example && yarn install && yarn run build",
-    "deploy": "gh-pages -d example/build"
-  },
-  "peerDependencies": {
-    "lightweight-charts": "^5.0.9",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "dependencies": {
-    "lightweight-charts": "^5.0.9",
-    "resize-observer-polyfill": "^1.5.1"
-  },
-  "devDependencies": {
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0",
-    "@typescript-eslint/eslint-plugin": "^8.26.1",
-    "@typescript-eslint/parser": "^8.26.1",
-    "@vitejs/plugin-react": "^5.1.1",
-    "cross-env": "^7.0.3",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react": "^7.37.4",
-    "gh-pages": "^6.3.0",
-    "npm-run-all": "^4.1.5",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-scripts": "^5.0.1",
-    "typescript": "^5.7.3",
-    "vite": "^7.2.6",
-    "vite-plugin-dts": "^4.5.4"
-  },
-  "files": [
-    "dist"
-  ]
-}
+{
+  "name": "candleview",
+  "version": "1.1.3",
+  "description": "A data visualization charts and draw graph engine for the financial industry.",
+  "keywords": [
+    "Finance",
+    "Financial Analysis",
+    "Financial Charts",
+    "Finance Trading",
+    "Trading",
+    "Chart",
+    "Charts",
+    "K-Line",
+    "KLine"
+  ],
+  "author": "happyboy",
+  "license": "AGPL-3.0-only",
+  "repository": "https://github.com/0xhappyboy/candleview",
+  "bugs": {
+    "url": "https://github.com/0xhappyboy/candleview/issues"
+  },
+  "homepage": "https://github.com/0xhappyboy/candleview#readme",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "source": "src/index.tsx",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "scripts": {
+    "clean": "rm -rf dist node_modules/.cache .tsbuildinfo",
+    "build": "vite build",
+    "build:fast": "vite build --mode development",
+    "build:types": "tsc --emitDeclarationOnly --outDir dist",
+    "start": "vite build --watch",
+    "dev": "vite",
+    "prepare": "npm run build",
+    "test": "run-s test:unit test:lint",
+    "test:build": "vite build",
+    "test:lint": "eslint .",
+    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
+    "test:watch": "react-scripts test --env=jsdom",
+    "predeploy": "cd example && yarn install && yarn run build",
+    "deploy": "gh-pages -d example/build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "lightweight-charts": "^5.0.9",
+    "resize-observer-polyfill": "^1.5.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@typescript-eslint/eslint-plugin": "^8.26.1",
+    "@typescript-eslint/parser": "^8.26.1",
+    "@vitejs/plugin-react": "^5.1.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react": "^7.37.4",
+    "gh-pages": "^6.3.0",
+    "npm-run-all": "^4.1.5",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-scripts": "^5.0.1",
+    "typescript": "^5.7.3",
+    "vite": "^7.2.6",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "files": [
+    "dist"
+  ]
+}