binbot-charts 0.0.3 → 0.0.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.3",
+  "version": "0.0.4",
   "name": "binbot-charts",
   "dependencies": {
     "@babel/cli": "^7.18.10",
@@ -12,7 +12,8 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "rm -rf dist && NODE_ENV=production babel src/components src/charting_library --out-dir dist --copy-files"
+    "build": "rm -rf dist && NODE_ENV=production babel src/components src/charting_library --out-dir dist --copy-files",
+    "publish": "yarn build && npm publish"
   },
   "description": "Binbot charts is the default candlestick bars chart used in terminal.binbot.com to render bots graphically.",
   "repository": {

package/src/App.jsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import './App.css';
 import { TVChartContainer } from './components/TVChartContainer';
-import { version } from './charting_library';
 
 class App extends React.Component {
+	
 	render() {
 		return (
 			<div className={ 'App' }>
-				<TVChartContainer />
+				<TVChartContainer symbol="symbol" interval="D"/>
 				
 			</div>
 		);

package/src/components/TVChartContainer.jsx

@@ -1,17 +1,8 @@
-import * as React from "react";
+import React, { Component } from "react";
 import { widget } from "../charting_library";
+import Datafeed from "./datafeed";
 
-export class TVChartContainer extends React.PureComponent {
-  static defaultProps = {
-    symbol: "AAPL",
-    interval: "D",
-    datafeedUrl: "https://demo_feed.tradingview.com",
-    libraryPath: "/charting_library/",
-    chartsStorageApiVersion: "1.1",
-    fullscreen: false,
-    autosize: true,
-    studiesOverrides: {},
-  };
+export default class TVChartContainer extends Component {
 
   tvWidget = null;
 
@@ -22,26 +13,25 @@ export class TVChartContainer extends React.PureComponent {
   }
 
   componentDidMount() {
+
+    
     const widgetOptions = {
       symbol: "AAPL",
       // BEWARE: no trailing slash is expected in feed URL
-      datafeed: new window.Datafeeds.UDFCompatibleDatafeed(
-        this.props.datafeedUrl
-      ),
-      interval: this.props.interval,
+      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: this.props.fullscreen,
-      autosize: this.props.autosize,
-      studies_overrides: this.props.studiesOverrides,
+      // 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);

package/src/components/datafeed.js

@@ -0,0 +1,201 @@
+import { makeApiRequest, generateSymbol, parseFullSymbol } from "./helpers.js";
+import { subscribeOnStream, unsubscribeFromStream } from "./streaming.js";
+
+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 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 = generateSymbol(
+        exchange,
+        leftPairPart,
+        rightPairPart
+      );
+      return {
+        symbol: symbol.short,
+        full_name: symbol.full,
+        description: symbol.short,
+        exchange: exchange,
+        type: "crypto",
+      };
+    });
+    allSymbols = [...allSymbols, ...symbols];
+  }
+  return allSymbols;
+}
+
+export default class Datafeed {
+  static onReady = (callback) => {
+    console.log("[onReady]: Method call");
+    setTimeout(() => callback(configurationData));
+  };
+
+  static 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);
+  };
+
+  static resolveSymbol = async (
+    symbolName,
+    onSymbolResolvedCallback,
+    onResolveErrorCallback
+  ) => {
+    console.log("[resolveSymbol]: Method call", symbolName);
+    const symbols = await getAllSymbols();
+    const symbolItem = symbols.find(
+      ({ full_name }) => 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);
+  };
+
+  static getBars = async (
+    symbolInfo,
+    resolution,
+    periodParams,
+    onHistoryCallback,
+    onErrorCallback
+  ) => {
+    const { from, to, firstDataRequest } = periodParams;
+    console.log("[getBars]: Method call", symbolInfo, resolution, from, to);
+    const parsedSymbol = 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) => `${name}=${encodeURIComponent(urlParameters[name])}`)
+      .join("&");
+    try {
+      const data = await makeApiRequest(`data/histoday?${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, {
+          ...bars[bars.length - 1],
+        });
+      }
+      console.log(`[getBars]: returned ${bars.length} bar(s)`);
+      onHistoryCallback(bars, {
+        noData: false,
+      });
+    } catch (error) {
+      console.log("[getBars]: Get error", error);
+      onErrorCallback(error);
+    }
+  };
+
+  static subscribeBars = (
+    symbolInfo,
+    resolution,
+    onRealtimeCallback,
+    subscribeUID,
+    onResetCacheNeededCallback
+  ) => {
+    console.log(
+      "[subscribeBars]: Method call with subscribeUID:",
+      subscribeUID
+    );
+    subscribeOnStream(
+      symbolInfo,
+      resolution,
+      onRealtimeCallback,
+      subscribeUID,
+      onResetCacheNeededCallback,
+      lastBarsCache.get(symbolInfo.full_name)
+    );
+  };
+
+  static unsubscribeBars = (subscriberUID) => {
+    console.log(
+      "[unsubscribeBars]: Method call with subscriberUID:",
+      subscriberUID
+    );
+    unsubscribeFromStream(subscriberUID);
+  };
+}

package/src/components/helpers.js

@@ -0,0 +1,32 @@
+// Make requests to CryptoCompare API
+export async function makeApiRequest(path) {
+    try {
+      const response = await fetch(`https://min-api.cryptocompare.com/${path}`);
+      return response.json();
+    } catch (error) {
+      throw new Error(`CryptoCompare request error: ${error.status}`);
+    }
+  }
+  
+  // Generate a symbol ID from a pair of the coins
+  export function generateSymbol(exchange, fromSymbol, toSymbol) {
+    const short = `${fromSymbol}/${toSymbol}`;
+    return {
+      short,
+      full: `${exchange}:${short}`,
+    };
+  }
+  
+  export function parseFullSymbol(fullSymbol) {
+    const match = fullSymbol.match(/^(\w+):(\w+)\/(\w+)$/);
+    if (!match) {
+      return null;
+    }
+  
+    return {
+      exchange: match[1],
+      fromSymbol: match[2],
+      toSymbol: match[3],
+    };
+  }
+  

package/src/components/streaming.js

@@ -0,0 +1,136 @@
+import { parseFullSymbol } from "./helpers.js";
+import io from 'socket.io-client';
+
+const socket = io("wss://streamer.cryptocompare.com");
+const channelToSubscription = new Map();
+
+socket.on("connect", () => {
+  console.log("[socket] Connected");
+});
+
+socket.on("disconnect", (reason) => {
+  console.log("[socket] Disconnected:", reason);
+});
+
+socket.on("error", (error) => {
+  console.log("[socket] Error:", error);
+});
+
+socket.on("m", (data) => {
+  console.log("[socket] Message:", data);
+  const [
+    eventTypeStr,
+    exchange,
+    fromSymbol,
+    toSymbol,
+    ,
+    ,
+    tradeTimeStr,
+    ,
+    tradePriceStr,
+  ] = data.split("~");
+
+  if (parseInt(eventTypeStr) !== 0) {
+    // skip all non-TRADE events
+    return;
+  }
+  const tradePrice = parseFloat(tradePriceStr);
+  const tradeTime = parseInt(tradeTimeStr);
+  const channelString = `0~${exchange}~${fromSymbol}~${toSymbol}`;
+  const subscriptionItem = channelToSubscription.get(channelString);
+  if (subscriptionItem === undefined) {
+    return;
+  }
+  const lastDailyBar = subscriptionItem.lastDailyBar;
+  const nextDailyBarTime = getNextDailyBarTime(lastDailyBar.time);
+
+  let bar;
+  if (tradeTime >= nextDailyBarTime) {
+    bar = {
+      time: nextDailyBarTime,
+      open: tradePrice,
+      high: tradePrice,
+      low: tradePrice,
+      close: tradePrice,
+    };
+    console.log("[socket] Generate new bar", bar);
+  } else {
+    bar = {
+      ...lastDailyBar,
+      high: Math.max(lastDailyBar.high, tradePrice),
+      low: Math.min(lastDailyBar.low, tradePrice),
+      close: tradePrice,
+    };
+    console.log("[socket] Update the latest bar by price", tradePrice);
+  }
+  subscriptionItem.lastDailyBar = bar;
+
+  // send data to every subscriber of that symbol
+  subscriptionItem.handlers.forEach((handler) => handler.callback(bar));
+});
+
+function getNextDailyBarTime(barTime) {
+  const date = new Date(barTime * 1000);
+  date.setDate(date.getDate() + 1);
+  return date.getTime() / 1000;
+}
+
+export function subscribeOnStream(
+  symbolInfo,
+  resolution,
+  onRealtimeCallback,
+  subscribeUID,
+  onResetCacheNeededCallback,
+  lastDailyBar
+) {
+  const parsedSymbol = parseFullSymbol(symbolInfo.full_name);
+  const channelString = `0~${parsedSymbol.exchange}~${parsedSymbol.fromSymbol}~${parsedSymbol.toSymbol}`;
+  const handler = {
+    id: subscribeUID,
+    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,
+    lastDailyBar,
+    handlers: [handler],
+  };
+  channelToSubscription.set(channelString, subscriptionItem);
+  console.log(
+    "[subscribeBars]: Subscribe to streaming. Channel:",
+    channelString
+  );
+  socket.emit("SubAdd", { subs: [channelString] });
+}
+
+export 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
+        );
+        socket.emit("SubRemove", { subs: [channelString] });
+        channelToSubscription.delete(channelString);
+        break;
+      }
+    }
+  }
+}

package/dist/yarn.lock

@@ -1,4 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-

package/public/charting_library/yarn.lock

@@ -1,4 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-

package/src/charting_library/yarn.lock

@@ -1,4 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-