binbot-charts 0.4.2 → 0.5.0

package/README.md

@@ -6,7 +6,7 @@ Import it in your project as a React component
 
 ## How to start
 
-1. Run `yarn install && yarn start`. It will build the project and open a default browser with the Charting Library.
+1. Run `npm install && npm start`. It will build the project and open a default browser with the Charting Library.
 2. `library_path` should be `node_modules/dist/charting_library`
 3. Write a script to copy `charting_library` to `public/charting_library` during build. E.g. `cp -r node_modules/dist/charting_library/ src/public/charting_library`
 
@@ -15,4 +15,4 @@ Import it in your project as a React component
 This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
 
 ## Notes
-The earliest supported version of the charting library for these examples is `v20`.
+The earliest supported version of Node of the charting library for these examples is `v20`.

package/dist/components/datafeed.js

@@ -6,9 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _helpers = require("./helpers.js");
 var _streaming = require("./streaming.js");
-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 {
@@ -36,111 +33,105 @@ const getConfigurationData = async () => {
 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,
-          name: symbolName,
-          ticker: symbolName,
-          description: symbolName,
-          type: "crypto",
-          session: "24x7",
-          timezone: "Etc/UTC",
-          exchange: "Binance",
-          minmov: 100,
-          pricescale: 100000,
-          has_daily: true,
-          has_intraday: true,
-          has_no_volume: false,
-          has_seconds: true,
-          seconds_multipliers: [1],
-          volume: "hundreds",
-          volume_precision: 9,
-          data_status: "streaming",
-          resolution: "1h"
-        };
+    let interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "1h";
+    this.streaming = null;
+    this.timescaleMarks = timescaleMarks;
+    this.interval = interval;
+  }
+  onReady = async callback => {
+    this.configurationData = await getConfigurationData();
+    callback(this.configurationData);
+  };
+  searchSymbols = async (userInput, exchange, symbolType, onResultReadyCallback) => {
+    const symbols = await (0, _helpers.getAllSymbols)(userInput);
+    onResultReadyCallback(symbols);
+  };
+  resolveSymbol = async (symbolName, onSymbolResolvedCallback, onResolveErrorCallback) => {
+    if (!symbolName) {
+      await onResolveErrorCallback("cannot resolve symbol");
+      return;
+    }
+    const symbolInfo = () => {
+      return {
+        ticker: symbolName,
+        name: symbolName,
+        ticker: symbolName,
+        description: symbolName,
+        type: "crypto",
+        session: "24x7",
+        timezone: "Etc/UTC",
+        exchange: "Binance",
+        minmov: 100,
+        pricescale: 100000000,
+        has_daily: true,
+        has_intraday: true,
+        has_no_volume: false,
+        has_seconds: true,
+        seconds_multipliers: [1],
+        volume: "hundreds",
+        volume_precision: 9,
+        data_status: "streaming",
+        resolution: "1h"
       };
-      const symbol = await symbolInfo();
-      onSymbolResolvedCallback(symbol);
-    });
-    _defineProperty(this, "getBars", async (symbolInfo, resolution, periodParams, onHistoryCallback, onErrorCallback) => {
-      const {
-        from,
-        to,
-        firstDataRequest
-      } = 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";
-        } else {
-          interval = resolution + "m";
-        }
+    };
+    const symbol = await symbolInfo();
+    onSymbolResolvedCallback(symbol);
+  };
+  getBars = async (symbolInfo, resolution, periodParams, onHistoryCallback, onErrorCallback) => {
+    const {
+      from,
+      to,
+      firstDataRequest
+    } = 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";
       } else {
-        interval = resolution.toLowerCase().replace(/[a-z]\b/g, c => c.toLowerCase());
+        interval = resolution + "m";
       }
-      let urlParameters = {
-        symbol: symbolInfo.name,
-        interval: interval,
-        startTime: Math.abs(from * 1000),
-        endTime: Math.abs(to * 1000),
-        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([], {
-            noData: true
-          });
-          return;
-        }
-        let bars = [];
-        data.forEach(bar => {
-          if (bar[0] >= from * 1000 && bar[0] < to * 1000) {
-            bars = [...bars, {
-              time: bar[0],
-              low: bar[3],
-              high: bar[2],
-              open: bar[1],
-              close: bar[4],
-              volume: bar[5]
-            }];
-          }
-        });
-        onHistoryCallback(bars, {
-          noData: false
+    } else {
+      interval = resolution.toLowerCase().replace(/[a-z]\b/g, c => c.toLowerCase());
+    }
+    let urlParameters = {
+      symbol: symbolInfo.name,
+      interval: interval,
+      startTime: Math.abs(from * 1000),
+      endTime: Math.abs(to * 1000),
+      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([], {
+          noData: true
         });
-      } catch (error) {
-        console.log("[getBars]: Get error", error);
-        onErrorCallback(error);
+        return;
       }
-    });
-    _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;
-  }
+      let bars = [];
+      data.forEach(bar => {
+        if (bar[0] >= from * 1000 && bar[0] < to * 1000) {
+          bars = [...bars, {
+            time: bar[0],
+            low: bar[3],
+            high: bar[2],
+            open: bar[1],
+            close: bar[4],
+            volume: bar[5]
+          }];
+        }
+      });
+      onHistoryCallback(bars, {
+        noData: false
+      });
+    } catch (error) {
+      console.log("[getBars]: Get error", error);
+      onErrorCallback(error);
+    }
+  };
   getTimescaleMarks(symbolInfo, from, to, onDataCallback, resolution) {
     if (this.timescaleMarks.length > 0) {
       let timescaleMarks = Object.assign([], this.timescaleMarks);
@@ -152,5 +143,11 @@ class Datafeed {
     const serverTime = data.serverTime / 1000;
     onServertimeCallback(serverTime);
   }
+  subscribeBars = (symbolInfo, resolution, onRealtimeCallback, subscribeUID, onResetCacheNeededCallback) => {
+    (0, _streaming.subscribeOnStream)(symbolInfo, resolution, onRealtimeCallback, subscribeUID, onResetCacheNeededCallback, this.interval);
+  };
+  unsubscribeBars = subscriberUID => {
+    (0, _streaming.unsubscribeFromStream)(subscriberUID);
+  };
 }
 exports.default = Datafeed;

package/dist/components/index.js

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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.2",
+  "version": "0.5.0",
   "name": "binbot-charts",
   "dependencies": {
     "react": "^17.0.1",
@@ -11,11 +11,12 @@
     "@babel/core": "^7.18.13",
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.19.0",
+    "@types/node": "^22.7.5",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "immer": "^9.0.17",
     "react-scripts": "^5.0.1",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.5"
   },
   "scripts": {
     "start": "react-scripts start",

package/dist/components/TVChartContainer.js

@@ -1,122 +0,0 @@
-"use strict";
-
-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 = "BTCUSDT",
-    interval = "1h",
-    libraryPath = "/charting_library/",
-    timescaleMarks = [],
-    orderLines = [],
-    height = "calc(100vh - 80px)",
-    onTick,
-    getLatestBar
-  } = _ref;
-  const containerRef = (0, _react.useRef)(null);
-  const [chartOrderLines, setChartOrderLines] = (0, _useImmer.useImmer)([]);
-  const [widgetState, setWidgetState] = (0, _useImmer.useImmer)(null);
-  const [symbolState] = (0, _react.useState)(null);
-  const prevTimescaleMarks = (0, _react.useRef)(timescaleMarks);
-  (0, _react.useEffect)(() => {
-    if (!widgetState) {
-      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 = interval => {
-    const widgetOptions = {
-      symbol: symbol,
-      datafeed: new _datafeed.default(timescaleMarks, interval),
-      interval: interval,
-      container: containerRef.current,
-      library_path: libraryPath,
-      locale: "en",
-      fullscreen: false,
-      autosize: true,
-      studies_overrides: {},
-      symbol_search_request_delay: 1000,
-      overrides: {
-        volumePaneSize: "small",
-        "mainSeriesProperties.barStyle.dontDrawOpen": false
-      }
-    };
-    const tvWidget = new _charting_library.widget(widgetOptions);
-    tvWidget.onChartReady(() => {
-      tvWidget.subscribe("onTick", event => onTick(event));
-      setWidgetState(tvWidget);
-
-      // get latest bar for last price
-      const prices = async () => {
-        const data = await tvWidget.activeChart().exportData({
-          includeTime: false,
-          includeSeries: true,
-          includedStudies: []
-        });
-        getLatestBar(data.data[data.data.length - 1]);
-      };
-      prices();
-    });
-  };
-  const updateOrderLines = orderLines => {
-    if (chartOrderLines && chartOrderLines.length > 0) {
-      chartOrderLines.forEach(item => {
-        orderLines.forEach(order => {
-          if (item.id == order.id) {
-            item.setText(order.text).setTooltip(order.tooltip).setQuantity(order.quantity).setPrice(order.price);
-          }
-        });
-      });
-    } else {
-      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
-          chartOrderLine.id = order.id;
-          setChartOrderLines(draft => {
-            draft.push(chartOrderLine);
-            return draft;
-          });
-        });
-      }
-    }
-  };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: containerRef,
-    style: {
-      height: height
-    }
-  });
-}
-TVChartContainer.propTypes = {
-  apiKey: _propTypes.default.string,
-  symbol: _propTypes.default.string,
-  interval: _propTypes.default.string,
-  libraryPath: _propTypes.default.string,
-  timescaleMarks: _propTypes.default.array,
-  orderLines: _propTypes.default.array,
-  height: _propTypes.default.string,
-  onTick: _propTypes.default.func,
-  getLatestBar: _propTypes.default.func
-};