binbot-charts 0.0.19 → 0.0.22

package/README.md

@@ -7,6 +7,8 @@ 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.
+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`
 
 ## About This Project
 

package/dist/{TVChartContainer.js → components/TVChartContainer.js}

@@ -21,7 +21,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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; }
 
-class TVChartContainer extends _react.Component {
+class TVChartContainer extends _react.PureComponent {
   constructor(props) {
     super(props);
 
@@ -32,28 +32,27 @@ class TVChartContainer extends _react.Component {
 
   componentDidMount() {
     const widgetOptions = {
-      symbol: "AAPL",
+      symbol: this.props.symbol,
       // BEWARE: no trailing slash is expected in feed URL
-      datafeed: _datafeed.default,
-      // interval: this.props.interval,
+      datafeed: new _datafeed.default(this.props.timescaleMarks),
+      interval: this.props.interval,
       container: this.ref.current,
       library_path: this.props.libraryPath,
       locale: "en",
-      // disabled_features: ["use_localstorage_for_settings"],
-      // enabled_features: ["study_templates"],
-      // charts_storage_url: this.props.chartsStorageUrl,
-      // charts_storage_api_version: this.props.chartsStorageApiVersion,
-      // client_id: this.props.clientId,
-      // user_id: this.props.userId,
-      fullscreen: false,
-      autosize: false,
-      studies_overrides: {}
+      fullscreen: this.props.fullscreen,
+      autosize: this.props.autosize,
+      studies_overrides: this.props.studiesOverrides
     };
     const tvWidget = new _charting_library.widget(widgetOptions);
     this.tvWidget = tvWidget;
     tvWidget.onChartReady(() => {
-      const takeProfit = tvWidget.chart().createOrderLine().setText("Take profit").setLineLength(3).setLineStyle(1).setLineColor("green").setBodyBorderColor("green").setBodyTextColor("green").setQuantityBackgroundColor("green").setQuantityBorderColor("green").setQuantityTextColor("green").setQuantity("225 USDT");
-      takeProfit.setPrice(182);
+      this.props.orderLines.forEach(element => {
+        tvWidget.chart().createPositionLine().setText(element.text).setTooltip(element.tooltip) // .setProtectTooltip("Protect position")
+        // .setCloseTooltip("Close position")
+        // .setReverseTooltip("Reverse position")
+        .setQuantity(element.quantity).setQuantityBackgroundColor(element.color).setQuantityBorderColor(element.color) // .setExtendLeft(false)
+        .setLineStyle(0).setLineLength(25).setLineColor(element.color).setBodyBackgroundColor(element.color).setBodyBorderColor(element.color).setBodyTextColor(element.color).setPrice(element.price);
+      });
     });
   }
 
@@ -75,4 +74,18 @@ class TVChartContainer extends _react.Component {
 
 }
 
-exports.default = TVChartContainer;
+exports.default = TVChartContainer;
+
+_defineProperty(TVChartContainer, "defaultProps", {
+  symbol: "AAPL",
+  interval: "D",
+  datafeedUrl: "https://demo_feed.tradingview.com",
+  libraryPath: "/charting_library/",
+  chartsStorageUrl: "https://saveload.tradingview.com",
+  chartsStorageApiVersion: "1.1",
+  clientId: "tradingview.com",
+  userId: "public_user_id",
+  fullscreen: false,
+  autosize: true,
+  studiesOverrides: {}
+});

package/dist/components/datafeed.js

@@ -0,0 +1,203 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.promise.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+var _helpers = require("./helpers.js");
+
+var _streaming = require("./streaming.js");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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; }
+
+const lastBarsCache = new Map();
+const exchange = "Binance";
+const configurationData = {
+  // trading_options: true,
+  supports_marks: true,
+  supports_time: true,
+  supports_timescale_marks: true,
+  supported_resolutions: ["1D", "1W", "1M"],
+  exchanges: [{
+    value: "Binance",
+    name: "Binance",
+    desc: "Binance"
+  }],
+  symbols_types: [{
+    name: "crypto",
+    value: "crypto"
+  }]
+};
+
+async function getAllSymbols() {
+  const data = await (0, _helpers.makeApiRequest)("data/v3/all/exchanges");
+  let allSymbols = [];
+  const pairs = data.Data[exchange].pairs;
+
+  for (const leftPairPart of Object.keys(pairs)) {
+    const symbols = pairs[leftPairPart].map(rightPairPart => {
+      const symbol = (0, _helpers.generateSymbol)(exchange, leftPairPart, rightPairPart);
+      return {
+        symbol: symbol.short,
+        full_name: symbol.full,
+        description: symbol.short,
+        exchange: exchange,
+        type: "crypto"
+      };
+    });
+    allSymbols = [...allSymbols, ...symbols];
+  }
+
+  return allSymbols;
+}
+
+class Datafeed {
+  constructor() {
+    let timescaleMarks = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let lineOrders = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+
+    _defineProperty(this, "onReady", callback => {
+      console.log("[onReady]: Method call");
+      setTimeout(() => callback(configurationData));
+    });
+
+    _defineProperty(this, "searchSymbols", async (userInput, exchange, symbolType, onResultReadyCallback) => {
+      console.log("[searchSymbols]: Method call");
+      const symbols = await getAllSymbols();
+      const newSymbols = symbols.filter(symbol => {
+        const isExchangeValid = exchange === "" || symbol.exchange === exchange;
+        const isFullSymbolContainsInput = symbol.full_name.toLowerCase().indexOf(userInput.toLowerCase()) !== -1;
+        return isExchangeValid && isFullSymbolContainsInput;
+      });
+      onResultReadyCallback(newSymbols);
+    });
+
+    _defineProperty(this, "resolveSymbol", async (symbolName, onSymbolResolvedCallback, onResolveErrorCallback) => {
+      console.log("[resolveSymbol]: Method call", symbolName);
+      const symbols = await getAllSymbols();
+      const symbolItem = symbols.find(_ref => {
+        let {
+          full_name
+        } = _ref;
+        return full_name === symbolName;
+      });
+
+      if (!symbolItem) {
+        console.log("[resolveSymbol]: Cannot resolve symbol", symbolName);
+        onResolveErrorCallback("cannot resolve symbol");
+        return;
+      }
+
+      const symbolInfo = {
+        ticker: symbolItem.full_name,
+        name: symbolItem.symbol,
+        description: symbolItem.description,
+        type: symbolItem.type,
+        session: "24x7",
+        timezone: "Etc/UTC",
+        exchange: symbolItem.exchange,
+        minmov: 1,
+        pricescale: 100,
+        has_intraday: true,
+        has_no_volume: false,
+        has_weekly_and_monthly: false,
+        supported_resolutions: ["1D", "1W", "1M"],
+        volume_precision: 4,
+        data_status: "streaming"
+      };
+      console.log("[resolveSymbol]: Symbol resolved", symbolName);
+      onSymbolResolvedCallback(symbolInfo);
+    });
+
+    _defineProperty(this, "getBars", async (symbolInfo, resolution, periodParams, onHistoryCallback, onErrorCallback) => {
+      const {
+        from,
+        to,
+        firstDataRequest
+      } = periodParams;
+      console.log("[getBars]: Method call");
+      const parsedSymbol = (0, _helpers.parseFullSymbol)(symbolInfo.full_name);
+      const urlParameters = {
+        e: parsedSymbol.exchange,
+        fsym: parsedSymbol.fromSymbol,
+        tsym: parsedSymbol.toSymbol,
+        toTs: to,
+        limit: 2000
+      };
+      const query = Object.keys(urlParameters).map(name => "".concat(name, "=").concat(encodeURIComponent(urlParameters[name]))).join("&");
+
+      try {
+        const data = await (0, _helpers.makeApiRequest)("data/histoday?".concat(query));
+
+        if (data.Response && data.Response === "Error" || data.Data.length === 0) {
+          // "noData" should be set if there is no data in the requested period.
+          onHistoryCallback([], {
+            noData: true
+          });
+          return;
+        }
+
+        let bars = [];
+        data.Data.forEach(bar => {
+          if (bar.time >= from && bar.time < to) {
+            bars = [...bars, {
+              time: bar.time * 1000,
+              low: bar.low,
+              high: bar.high,
+              open: bar.open,
+              close: bar.close
+            }];
+          }
+        });
+
+        if (firstDataRequest) {
+          lastBarsCache.set(symbolInfo.full_name, _objectSpread({}, bars[bars.length - 1]));
+        }
+
+        console.log("[getBars]: returned ".concat(bars.length, " bar(s)"));
+        onHistoryCallback(bars, {
+          noData: false
+        });
+      } catch (error) {
+        console.log("[getBars]: Get error", error);
+        onErrorCallback(error);
+      }
+    });
+
+    _defineProperty(this, "subscribeBars", (symbolInfo, resolution, onRealtimeCallback, subscribeUID, onResetCacheNeededCallback) => {
+      console.log("[subscribeBars]: Method call with subscribeUID:", subscribeUID);
+      (0, _streaming.subscribeOnStream)(symbolInfo, resolution, onRealtimeCallback, subscribeUID, onResetCacheNeededCallback, lastBarsCache.get(symbolInfo.full_name));
+    });
+
+    _defineProperty(this, "unsubscribeBars", subscriberUID => {
+      console.log("[unsubscribeBars]: Method call with subscriberUID:", subscriberUID);
+      (0, _streaming.unsubscribeFromStream)(subscriberUID);
+    });
+
+    this.timescaleMarks = timescaleMarks;
+    this.lineOrders = lineOrders;
+  }
+
+  getTimescaleMarks(symbolInfo, from, to, onDataCallback, resolution) {
+    let timescaleMarks = [];
+
+    if (this.timescaleMarks.length > 0) {
+      timescaleMarks = this.timescaleMarks;
+      onDataCallback(timescaleMarks);
+    }
+  }
+
+}
+
+exports.default = Datafeed;

package/dist/{index.js → components/index.js}

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

package/dist/{streaming.js → components/streaming.js}

@@ -41,7 +41,7 @@ socket.on("error", error => {
 });
 socket.on("m", data => {
   console.log("[socket] Message:", data);
-  const [eventTypeStr, exchange, fromSymbol, toSymbol,,, tradeTimeStr,, tradePriceStr] = data.split("~");
+  const [eventTypeStr, exchange, fromSymbol, toSymbol, tradeTimeStr, tradePriceStr] = data.split("~");
 
   if (parseInt(eventTypeStr) !== 0) {
     // skip all non-TRADE events

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.19",
+  "version": "0.0.22",
   "name": "binbot-charts",
   "dependencies": {
     "@babel/cli": "^7.18.10",
@@ -8,11 +8,12 @@
     "@babel/preset-env": "^7.18.10",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "socket.io-client": "^4.5.2"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "rm -rf dist && NODE_ENV=production babel src/lib/components src/lib/index.js --out-dir dist --copy-files && cp -r src/lib/charting_library dist/charting_library",
+    "build": "rm -rf dist && NODE_ENV=production babel src/components/ -d dist/components && cp -r src/charting_library dist/charting_library",
     "publish": "yarn build && npm publish"
   },
   "description": "Binbot charts is the default candlestick bars chart used in terminal.binbot.com to render bots graphically.",
@@ -20,7 +21,11 @@
     "type": "git",
     "url": "git+https://github.com/carkod/binbot-charts.git"
   },
-  "main": "dist/index.js",
+  "module": "dist/components/index.js",
+  "main": "dist/components/index.js",
+  "files": [
+    "dist"
+  ],
   "keywords": [
     "binbot",
     "charts"

package/babel.config.json

@@ -1,18 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/env",
-      {
-        "targets": {
-          "edge": "17",
-          "firefox": "60",
-          "chrome": "67",
-          "safari": "11.1"
-        },
-        "useBuiltIns": "usage",
-        "corejs": "3.6.5"
-      }
-    ],
-    "@babel/preset-react"
-  ]
-}

package/browserslist

@@ -1,31 +0,0 @@
-# This is an rcfile for Browserslist (https://www.npmjs.com/package/browserslist)
-
-# All browsers with significant market share
-> 1% in US
-> 1% in RU
-
-# Desktop
-last 3 Chrome versions
-last 3 Edge versions
-last 3 Firefox versions
-last 3 Safari versions
-last 3 Opera versions
-
-# Mobile
-last 3 iOS versions
-last 3 ChromeAndroid versions
-last 3 Android versions
-last 3 FirefoxAndroid versions
-
-# Restrict min supported versions
-not Android < 66
-not Chrome < 66
-not ChromeAndroid < 66
-not Safari < 13
-not iOS < 13
-
-# Long dead browsers
-not Explorer <= 11
-not ExplorerMobile <= 11
-not OperaMini all  # Opera mini has very limited JS support, no canvas and no websockets
-not OperaMobile <= 12.1  # Opera mobile Presto

package/dist/datafeed.js

@@ -1,183 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-require("core-js/modules/es.promise.js");
-
-require("core-js/modules/es.symbol.description.js");
-
-var _helpers = require("./helpers.js");
-
-var _streaming = require("./streaming.js");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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; }
-
-const lastBarsCache = new Map();
-const exchange = "Binance";
-const configurationData = {
-  supported_resolutions: ["1D", "1W", "1M"],
-  exchanges: [{
-    value: "Binance",
-    name: "Binance",
-    desc: "Binance"
-  }],
-  symbols_types: [{
-    name: "crypto",
-    // `symbolType` argument for the `searchSymbols` method, if a user selects this symbol type
-    value: "crypto"
-  } // ...
-  ]
-};
-
-async function getAllSymbols() {
-  const data = await (0, _helpers.makeApiRequest)("data/v3/all/exchanges");
-  let allSymbols = [];
-  const pairs = data.Data[exchange].pairs;
-
-  for (const leftPairPart of Object.keys(pairs)) {
-    const symbols = pairs[leftPairPart].map(rightPairPart => {
-      const symbol = (0, _helpers.generateSymbol)(exchange, leftPairPart, rightPairPart);
-      return {
-        symbol: symbol.short,
-        full_name: symbol.full,
-        description: symbol.short,
-        exchange: exchange,
-        type: "crypto"
-      };
-    });
-    allSymbols = [...allSymbols, ...symbols];
-  }
-
-  return allSymbols;
-}
-
-class Datafeed {}
-
-exports.default = Datafeed;
-
-_defineProperty(Datafeed, "onReady", callback => {
-  console.log("[onReady]: Method call");
-  setTimeout(() => callback(configurationData));
-});
-
-_defineProperty(Datafeed, "searchSymbols", async (userInput, exchange, symbolType, onResultReadyCallback) => {
-  console.log("[searchSymbols]: Method call");
-  const symbols = await getAllSymbols();
-  const newSymbols = symbols.filter(symbol => {
-    const isExchangeValid = exchange === "" || symbol.exchange === exchange;
-    const isFullSymbolContainsInput = symbol.full_name.toLowerCase().indexOf(userInput.toLowerCase()) !== -1;
-    return isExchangeValid && isFullSymbolContainsInput;
-  });
-  onResultReadyCallback(newSymbols);
-});
-
-_defineProperty(Datafeed, "resolveSymbol", async (symbolName, onSymbolResolvedCallback, onResolveErrorCallback) => {
-  console.log("[resolveSymbol]: Method call", symbolName);
-  const symbols = await getAllSymbols();
-  const symbolItem = symbols.find(_ref => {
-    let {
-      full_name
-    } = _ref;
-    return full_name === symbolName;
-  });
-
-  if (!symbolItem) {
-    console.log("[resolveSymbol]: Cannot resolve symbol", symbolName);
-    onResolveErrorCallback("cannot resolve symbol");
-    return;
-  }
-
-  const symbolInfo = {
-    ticker: symbolItem.full_name,
-    name: symbolItem.symbol,
-    description: symbolItem.description,
-    type: symbolItem.type,
-    session: "24x7",
-    timezone: "Etc/UTC",
-    exchange: symbolItem.exchange,
-    minmov: 1,
-    pricescale: 100,
-    has_intraday: false,
-    has_no_volume: true,
-    has_weekly_and_monthly: false,
-    supported_resolutions: ["1D", "1W", "1M"],
-    volume_precision: 2,
-    data_status: "streaming"
-  };
-  console.log("[resolveSymbol]: Symbol resolved", symbolName);
-  onSymbolResolvedCallback(symbolInfo);
-});
-
-_defineProperty(Datafeed, "getBars", async (symbolInfo, resolution, periodParams, onHistoryCallback, onErrorCallback) => {
-  const {
-    from,
-    to,
-    firstDataRequest
-  } = periodParams;
-  console.log("[getBars]: Method call", symbolInfo, resolution, from, to);
-  const parsedSymbol = (0, _helpers.parseFullSymbol)(symbolInfo.full_name);
-  const urlParameters = {
-    e: parsedSymbol.exchange,
-    fsym: parsedSymbol.fromSymbol,
-    tsym: parsedSymbol.toSymbol,
-    toTs: to,
-    limit: 2000
-  };
-  const query = Object.keys(urlParameters).map(name => "".concat(name, "=").concat(encodeURIComponent(urlParameters[name]))).join("&");
-
-  try {
-    const data = await (0, _helpers.makeApiRequest)("data/histoday?".concat(query));
-
-    if (data.Response && data.Response === "Error" || data.Data.length === 0) {
-      // "noData" should be set if there is no data in the requested period.
-      onHistoryCallback([], {
-        noData: true
-      });
-      return;
-    }
-
-    let bars = [];
-    data.Data.forEach(bar => {
-      if (bar.time >= from && bar.time < to) {
-        bars = [...bars, {
-          time: bar.time * 1000,
-          low: bar.low,
-          high: bar.high,
-          open: bar.open,
-          close: bar.close
-        }];
-      }
-    });
-
-    if (firstDataRequest) {
-      lastBarsCache.set(symbolInfo.full_name, _objectSpread({}, bars[bars.length - 1]));
-    }
-
-    console.log("[getBars]: returned ".concat(bars.length, " bar(s)"));
-    onHistoryCallback(bars, {
-      noData: false
-    });
-  } catch (error) {
-    console.log("[getBars]: Get error", error);
-    onErrorCallback(error);
-  }
-});
-
-_defineProperty(Datafeed, "subscribeBars", (symbolInfo, resolution, onRealtimeCallback, subscribeUID, onResetCacheNeededCallback) => {
-  console.log("[subscribeBars]: Method call with subscribeUID:", subscribeUID);
-  (0, _streaming.subscribeOnStream)(symbolInfo, resolution, onRealtimeCallback, subscribeUID, onResetCacheNeededCallback, lastBarsCache.get(symbolInfo.full_name));
-});
-
-_defineProperty(Datafeed, "unsubscribeBars", subscriberUID => {
-  console.log("[unsubscribeBars]: Method call with subscriberUID:", subscriberUID);
-  (0, _streaming.unsubscribeFromStream)(subscriberUID);
-});

package/lib/components/TVChartContainer.jsx

@@ -1,67 +0,0 @@
-import React, { Component } from "react";
-import { widget } from "../charting_library/charting_library";
-import Datafeed from "./datafeed";
-
-export default class TVChartContainer extends Component {
-
-  tvWidget = null;
-
-  constructor(props) {
-    super(props);
-
-    this.ref = React.createRef();
-  }
-
-  componentDidMount() {
-
-    
-    const widgetOptions = {
-      symbol: "AAPL",
-      // BEWARE: no trailing slash is expected in feed URL
-      datafeed: Datafeed,
-      // interval: this.props.interval,
-      container: this.ref.current,
-      library_path: this.props.libraryPath,
-      locale: "en",
-      // disabled_features: ["use_localstorage_for_settings"],
-      // enabled_features: ["study_templates"],
-      // charts_storage_url: this.props.chartsStorageUrl,
-      // charts_storage_api_version: this.props.chartsStorageApiVersion,
-      // client_id: this.props.clientId,
-      // user_id: this.props.userId,
-      fullscreen: false,
-      autosize: false,
-      studies_overrides: {},
-    };
-
-    const tvWidget = new widget(widgetOptions);
-    this.tvWidget = tvWidget;
-
-    tvWidget.onChartReady(() => {
-      const takeProfit = tvWidget.chart()
-        .createOrderLine()
-        .setText("Take profit")
-        .setLineLength(3)
-        .setLineStyle(1)
-		.setLineColor("green")
-		.setBodyBorderColor("green")
-		.setBodyTextColor("green")
-		.setQuantityBackgroundColor("green")
-		.setQuantityBorderColor("green")
-		.setQuantityTextColor("green")
-        .setQuantity("225 USDT");
-      takeProfit.setPrice(182);
-    });
-  }
-
-  componentWillUnmount() {
-    if (this.tvWidget !== null) {
-      this.tvWidget.remove();
-      this.tvWidget = null;
-    }
-  }
-
-  render() {
-    return <div ref={this.ref} style={{ height: "calc(100vh - 80px)" }} />;
-  }
-}