binbot-charts 0.2.6 → 0.2.7

package/dist/components/TVChartContainer.js

@@ -1,12 +1,12 @@
 "use strict";
 
-require("core-js/modules/web.dom-collections.iterator.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = TVChartContainer;
 
+require("core-js/modules/web.dom-collections.iterator.js");
+
 require("core-js/modules/es.promise.js");
 
 var _react = _interopRequireWildcard(require("react"));
@@ -17,6 +17,8 @@ var _datafeed = _interopRequireDefault(require("./datafeed"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _useImmer = require("use-immer");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -35,7 +37,8 @@ function TVChartContainer(_ref) {
     getLatestBar
   } = _ref;
   const containerRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(async () => {
+  const [chartOrderLines, setChartOrderLines] = (0, _useImmer.useImmer)([]);
+  (0, _react.useEffect)(() => {
     const widgetOptions = {
       symbol: symbol,
       datafeed: new _datafeed.default(timescaleMarks),
@@ -56,8 +59,11 @@ function TVChartContainer(_ref) {
     tvWidget.onChartReady(() => {
       if (orderLines.length > 0) {
         orderLines.forEach(order => {
-          const lineStyle = order.lineStyle || 0;
-          tvWidget.chart().createPositionLine().setText(order.text).setTooltip(order.tooltip).setQuantity(order.quantity).setQuantityFont("bold 12pt Verdana").setQuantityBackgroundColor(order.color).setQuantityBorderColor(order.color).setLineStyle(lineStyle).setLineLength(25).setLineColor(order.color).setBodyFont("bold 12pt Verdana").setBodyBorderColor(order.color).setBodyTextColor(order.color).setPrice(order.price);
+          const orderLine = updateOrderLines(tvWidget, order);
+          setChartOrderLines(draft => {
+            draft.push(orderLine);
+            return draft;
+          });
         });
       }
 
@@ -76,18 +82,30 @@ function TVChartContainer(_ref) {
     }); // returned function will be called on component unmount
 
     return () => {
-      if (this.tvWidget !== null) {
-        this.tvWidget.remove();
-        this.tvWidget = null;
+      if (!tvWidget) {
+        tvWidget.remove();
       }
     };
-  }, []);
-  return /*#__PURE__*/_react.default.createElement("div", {
+  }, [orderLines, timescaleMarks]);
+
+  const updateOrderLines = (tvWidget, order) => {
+    if (chartOrderLines && chartOrderLines.length > 0) {
+      chartOrderLines.forEach(item => {
+        item.remove();
+      });
+    }
+
+    const lineStyle = order.lineStyle || 0;
+    const chartOrderLine = tvWidget.chart().createOrderLine().setText(order.text).setTooltip(order.tooltip).setQuantity(order.quantity).setQuantityFont("inherit 14px Arial").setQuantityBackgroundColor(order.color).setQuantityBorderColor(order.color).setLineStyle(lineStyle).setLineLength(25).setLineColor(order.color).setBodyFont("inherit 14px Arial").setBodyBorderColor(order.color).setBodyTextColor(order.color).setPrice(order.price);
+    return chartOrderLine;
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, console.log(chartOrderLines), /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
     style: {
       height: height
     }
-  });
+  }));
 }
 
 TVChartContainer.propTypes = {

package/package.json

@@ -1,10 +1,11 @@
 {
-  "version": "0.2.6",
+  "version": "0.2.7",
   "name": "binbot-charts",
   "dependencies": {
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "^5.0.1"
+    "react-scripts": "^5.0.1",
+    "use-immer": "^0.7.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.18.10",