binbot-charts 0.3.0 → 0.3.2

package/dist/components/TVChartContainer.js

@@ -4,26 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = TVChartContainer;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _charting_library = require("../charting_library");
-
 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 (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function TVChartContainer(_ref) {
   let {
-    symbol = "APEUSDT",
+    symbol = "BTCUSDT",
     interval = "1h",
     libraryPath = "/charting_library/",
     timescaleMarks = [],
@@ -39,27 +30,23 @@ function TVChartContainer(_ref) {
   const prevTimescaleMarks = (0, _react.useRef)(timescaleMarks);
   (0, _react.useEffect)(() => {
     if (!widgetState) {
-      initializeChart();
+      initializeChart("1h");
     }
-
     if (orderLines && orderLines.length > 0) {
       updateOrderLines(orderLines);
     }
-
     if (widgetState && symbol !== symbolState) {
       widgetState.setSymbol(symbol, interval);
     }
-
     if (widgetState && prevTimescaleMarks.current && timescaleMarks !== prevTimescaleMarks.current) {
       widgetState._options.datafeed.timescaleMarks = timescaleMarks;
       prevTimescaleMarks.current = timescaleMarks;
     }
   }, [orderLines, timescaleMarks]);
-
-  const initializeChart = () => {
+  const initializeChart = interval => {
     const widgetOptions = {
       symbol: symbol,
-      datafeed: new _datafeed.default(timescaleMarks),
+      datafeed: new _datafeed.default(timescaleMarks, interval),
       interval: interval,
       container: containerRef.current,
       library_path: libraryPath,
@@ -76,8 +63,9 @@ function TVChartContainer(_ref) {
     const tvWidget = new _charting_library.widget(widgetOptions);
     tvWidget.onChartReady(() => {
       tvWidget.subscribe("onTick", event => onTick(event));
-      setWidgetState(tvWidget); // get latest bar for last price
+      setWidgetState(tvWidget);
 
+      // get latest bar for last price
       const prices = async () => {
         const data = await tvWidget.activeChart().exportData({
           includeTime: false,
@@ -86,11 +74,9 @@ function TVChartContainer(_ref) {
         });
         getLatestBar(data.data[data.data.length - 1]);
       };
-
       prices();
     });
   };
-
   const updateOrderLines = orderLines => {
     if (chartOrderLines && chartOrderLines.length > 0) {
       chartOrderLines.forEach(item => {
@@ -104,8 +90,9 @@ function TVChartContainer(_ref) {
       if (widgetState && orderLines && orderLines.length > 0) {
         orderLines.forEach(order => {
           const lineStyle = order.lineStyle || 0;
-          let chartOrderLine = widgetState.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); // set custom id easier search
+          let chartOrderLine = widgetState.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);
 
+          // set custom id easier search
           chartOrderLine.id = order.id;
           setChartOrderLines(draft => {
             draft.push(chartOrderLine);
@@ -115,7 +102,6 @@ function TVChartContainer(_ref) {
       }
     }
   };
-
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
     style: {
@@ -123,7 +109,6 @@ function TVChartContainer(_ref) {
     }
   });
 }
-
 TVChartContainer.propTypes = {
   apiKey: _propTypes.default.string,
   symbol: _propTypes.default.string,

package/dist/components/datafeed.js

@@ -4,15 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _helpers = require("./helpers.js");
-
 var _streaming = require("./streaming.js");
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 const binanceResolutions = ["1s", "1m", "3m", "5m", "15m", "30m", "1h", "2h", "4h", "6h", "8h", "12h", "1d", "3d", "1w", "1M"];
-
 const getConfigurationData = async () => {
   return {
     supports_marks: true,
@@ -32,26 +29,27 @@ const getConfigurationData = async () => {
   };
 };
 
+/**
+ * @param timescale { Array }. timescaleMark objects
+ * @param interval { string }. Klines timescale from the list of Binance Enums
+ */
 class Datafeed {
   constructor() {
     let timescaleMarks = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-
+    let _interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "1h";
     _defineProperty(this, "onReady", async callback => {
       this.configurationData = await getConfigurationData();
       callback(this.configurationData);
     });
-
     _defineProperty(this, "searchSymbols", async (userInput, exchange, symbolType, onResultReadyCallback) => {
       const symbols = await (0, _helpers.getAllSymbols)(userInput);
       onResultReadyCallback(symbols);
     });
-
     _defineProperty(this, "resolveSymbol", async (symbolName, onSymbolResolvedCallback, onResolveErrorCallback) => {
       if (!symbolName) {
         await onResolveErrorCallback("cannot resolve symbol");
         return;
       }
-
       const symbolInfo = () => {
         return {
           ticker: symbolName,
@@ -75,11 +73,9 @@ class Datafeed {
           resolution: "1h"
         };
       };
-
       const symbol = await symbolInfo();
       onSymbolResolvedCallback(symbol);
     });
-
     _defineProperty(this, "getBars", async (symbolInfo, resolution, periodParams, onHistoryCallback, onErrorCallback) => {
       const {
         from,
@@ -88,7 +84,6 @@ class Datafeed {
       } = periodParams;
       let interval = "60"; // 1 hour
       // Calculate interval using resolution data
-
       if (!/[a-zA-Z]$/.test(resolution)) {
         if (parseInt(resolution) >= 60) {
           interval = parseInt(resolution) / 60 + "h";
@@ -98,7 +93,6 @@ class Datafeed {
       } else {
         interval = resolution.toLowerCase().replace(/[a-z]\b/g, c => c.toLowerCase());
       }
-
       let urlParameters = {
         symbol: symbolInfo.name,
         interval: interval,
@@ -107,10 +101,8 @@ class Datafeed {
         limit: 600
       };
       const query = Object.keys(urlParameters).map(name => `${name}=${encodeURIComponent(urlParameters[name])}`).join("&");
-
       try {
         const data = await (0, _helpers.makeApiRequest)(`api/v3/uiKlines?${query}`);
-
         if (data.Response && data.Response === "Error" || data.length === 0) {
           // "noData" should be set if there is no data in the requested period.
           onHistoryCallback([], {
@@ -118,7 +110,6 @@ class Datafeed {
           });
           return;
         }
-
         let bars = [];
         data.forEach(bar => {
           if (bar[0] >= from * 1000 && bar[0] < to * 1000) {
@@ -140,32 +131,26 @@ class Datafeed {
         onErrorCallback(error);
       }
     });
-
     _defineProperty(this, "subscribeBars", (symbolInfo, resolution, onRealtimeCallback, subscribeUID, onResetCacheNeededCallback) => {
       (0, _streaming.subscribeOnStream)(symbolInfo, resolution, onRealtimeCallback, subscribeUID, onResetCacheNeededCallback, this.interval);
     });
-
     _defineProperty(this, "unsubscribeBars", subscriberUID => {
       (0, _streaming.unsubscribeFromStream)(subscriberUID);
     });
-
     this.streaming = null;
     this.timescaleMarks = timescaleMarks;
+    this.interval = _interval;
   }
-
   getTimescaleMarks(symbolInfo, from, to, onDataCallback, resolution) {
     if (this.timescaleMarks.length > 0) {
       let timescaleMarks = Object.assign([], this.timescaleMarks);
       onDataCallback(timescaleMarks);
     }
   }
-
   async getServerTime(onServertimeCallback) {
     const data = await (0, _helpers.makeApiRequest)(`api/v3/time`);
     const serverTime = data.serverTime / 1000;
     onServertimeCallback(serverTime);
   }
-
 }
-
 exports.default = Datafeed;

package/dist/components/helpers.js

@@ -6,9 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getAllSymbols = getAllSymbols;
 exports.makeApiRequest = makeApiRequest;
 exports.usePrevious = usePrevious;
-
 var _react = require("react");
-
 async function makeApiRequest(path) {
   try {
     const response = await fetch(`https://api.binance.com/${path}`);
@@ -17,10 +15,8 @@ async function makeApiRequest(path) {
     throw new Error(`Binance request error: ${error.status}`);
   }
 }
-
 async function getAllSymbols(symbol) {
   let newSymbols = [];
-
   try {
     const data = await makeApiRequest(`api/v3/exchangeInfo?symbol=${symbol.toUpperCase()}`);
     data.symbols.forEach(item => {
@@ -38,10 +34,8 @@ async function getAllSymbols(symbol) {
   } catch (e) {
     return newSymbols;
   }
-
   return newSymbols;
 }
-
 function usePrevious(value) {
   const ref = (0, _react.useRef)();
   (0, _react.useEffect)(() => {

package/dist/components/index.js

@@ -9,7 +9,5 @@ Object.defineProperty(exports, "TVChartContainer", {
     return _TVChartContainer.default;
   }
 });
-
 var _TVChartContainer = _interopRequireDefault(require("./TVChartContainer"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/streaming.js

@@ -6,32 +6,25 @@ Object.defineProperty(exports, "__esModule", {
 exports.subscribeOnStream = subscribeOnStream;
 exports.unsubscribeFromStream = unsubscribeFromStream;
 const channelToSubscription = new Map();
-
 function setupSockets(subRequest) {
   const socket = new WebSocket("wss://stream.binance.com:9443/ws");
   window.socket = socket;
-
   socket.onopen = event => {
     console.log("[socket] Connected");
     socket.send(JSON.stringify(subRequest));
   };
-
   socket.onclose = reason => {
     console.log("[socket] Disconnected:", reason);
   };
-
   socket.onerror = error => {
     console.log("[socket] Error:", error);
   };
-
   socket.onmessage = e => {
     const data = JSON.parse(e.data);
-
     if (data.e == undefined) {
       // skip all non-TRADE events
       return;
     }
-
     const {
       s: symbol,
       t: startTime,
@@ -47,11 +40,9 @@ function setupSockets(subRequest) {
     } = data.k;
     const channelString = `${symbol.toLowerCase()}@kline_${interval}`;
     const subscriptionItem = channelToSubscription.get(channelString);
-
     if (subscriptionItem === undefined) {
       return;
     }
-
     const bar = {
       time: startTime,
       open: open,
@@ -59,12 +50,11 @@ function setupSockets(subRequest) {
       low: low,
       close: close,
       volume: volume
-    }; // send data to every subscriber of that symbol
-
+    };
+    // send data to every subscriber of that symbol
     subscriptionItem.handlers.forEach(handler => handler.callback(bar));
   };
 }
-
 function subscribeOnStream(symbolInfo, resolution, onRealtimeCallback, subscribeUID, onResetCacheNeededCallback, interval) {
   const channelString = `${symbolInfo.name.toLowerCase()}@kline_${interval}`;
   const handler = {
@@ -72,13 +62,11 @@ function subscribeOnStream(symbolInfo, resolution, onRealtimeCallback, subscribe
     callback: onRealtimeCallback
   };
   let subscriptionItem = channelToSubscription.get(channelString);
-
   if (subscriptionItem) {
     // already subscribed to the channel, use the existing subscription
     subscriptionItem.handlers.push(handler);
     return;
   }
-
   subscriptionItem = {
     subscribeUID,
     resolution,
@@ -92,17 +80,14 @@ function subscribeOnStream(symbolInfo, resolution, onRealtimeCallback, subscribe
   channelToSubscription.set(channelString, subscriptionItem);
   setupSockets(subRequest);
 }
-
 function unsubscribeFromStream(subscriberUID) {
   // find a subscription with id === subscriberUID
   for (const channelString of channelToSubscription.keys()) {
     const subscriptionItem = channelToSubscription.get(channelString);
     const handlerIndex = subscriptionItem.handlers.findIndex(handler => handler.id === subscriberUID);
-
     if (handlerIndex !== -1) {
       // remove from handlers
       subscriptionItem.handlers.splice(handlerIndex, 1);
-
       if (subscriptionItem.handlers.length === 0) {
         // unsubscribe from the channel, if it was the last handler
         console.log("[unsubscribeBars]: Unsubscribe from streaming. Channel:", channelString);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.0",
+  "version": "0.3.2",
   "name": "binbot-charts",
   "dependencies": {
     "react": "^17.0.1",
@@ -11,14 +11,18 @@
     "@babel/core": "^7.18.13",
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.19.0",
-    "react-scripts": "^5.0.1"
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "immer": "^9.0.17",
+    "react-scripts": "^5.0.1",
+    "typescript": "^4.9.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "rm -rf dist && NODE_ENV=production babel -d dist/components src/components --extensions \".js,.jsx\" && cp -r src/charting_library dist/charting_library",
     "release": "yarn build && yarn publish"
   },
-  "description": "Binbot charts is the default candlestick bars chart used in terminal.binbot.com to render bots graphically.",
+  "description": "Binbot charts is the default candlestick bars chart used in terminal.binbot.in to render bots graphically.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/carkod/binbot-charts.git"