binbot-charts 0.7.2 → 0.7.4

package/src/datafeed.ts

@@ -0,0 +1,295 @@
+import { getAllSymbols, makeApiRequest } from "./helpers";
+import { subscribeOnStream, unsubscribeFromStream } from "./streaming";
+
+enum BinanceResolutions {
+  one_second = "1s",
+  one_minute = "1m",
+  three_minute = "3m",
+  five_minute = "5m",
+  fifteen_minute = "15m",
+  thirty_minute = "30m",
+  one_hour = "1h",
+  two_hour = "2h",
+  four_hour = "4h",
+  six_hour = "6h",
+  eight_hour = "8h",
+  twelve_hour = "12h",
+  one_day = "1d",
+  three_day = "3d",
+  one_week = "1w",
+  one_month = "1M",
+}
+
+interface ConfigurationData {
+  supports_marks: boolean;
+  supports_timescale_marks: boolean;
+  supports_time: boolean;
+  supported_resolutions: string[];
+  exchanges: { value: string; name: string; desc: string }[];
+  symbols_types: { name: string; value: string }[];
+}
+
+const getConfigurationData = async (): Promise<ConfigurationData> => {
+  return {
+    supports_marks: true,
+    supports_timescale_marks: true,
+    supports_time: true,
+    supported_resolutions: [
+      "1S",
+      "1",
+      "3",
+      "5",
+      "15",
+      "30",
+      "60",
+      "120",
+      "240",
+      "360",
+      "480",
+      "720",
+      "1D",
+      "3D",
+      "1W",
+      "12M",
+    ],
+    exchanges: [
+      {
+        value: "Binance",
+        name: "Binance",
+        desc: "Binance",
+      },
+    ],
+    symbols_types: [
+      {
+        name: "crypto",
+        value: "crypto",
+      },
+    ],
+  };
+};
+
+interface TimescaleMark {
+  id: string;
+  time: number;
+  color: string;
+  label: string;
+  tooltip: string;
+}
+
+interface SymbolInfo {
+  name: string;
+  ticker: string;
+  description: string;
+  type: string;
+  session: string;
+  timezone: string;
+  exchange: string;
+  minmov: number;
+  pricescale: number;
+  has_daily: boolean;
+  has_intraday: boolean;
+  has_no_volume: boolean;
+  has_seconds: boolean;
+  seconds_multipliers: number[];
+  volume: string;
+  volume_precision: number;
+  data_status: string;
+  resolution: string;
+}
+
+interface PeriodParams {
+  from: number;
+  to: number;
+  firstDataRequest: boolean;
+}
+
+interface Bar {
+  time: number;
+  low: number;
+  high: number;
+  open: number;
+  close: number;
+  volume: number;
+}
+
+export default class Datafeed {
+  private streaming: any;
+  private timescaleMarks: TimescaleMark[];
+  private interval: string;
+  private configurationData: ConfigurationData | null = null;
+
+  constructor(timescaleMarks: TimescaleMark[] = [], interval: string = "1h") {
+    this.streaming = null;
+    this.timescaleMarks = timescaleMarks;
+    this.interval = interval;
+  }
+
+  onReady = async (callback: (data: ConfigurationData) => void): Promise<void> => {
+    this.configurationData = await getConfigurationData();
+    callback(this.configurationData);
+  };
+
+  searchSymbols = async (
+    userInput: string,
+    exchange: string,
+    symbolType: string,
+    onResultReadyCallback: (symbols: any[]) => void
+  ): Promise<void> => {
+    const symbols = await getAllSymbols(userInput);
+    onResultReadyCallback(symbols);
+  };
+
+  resolveSymbol = async (
+    symbolName: string,
+    onSymbolResolvedCallback: (symbolInfo: SymbolInfo) => void,
+    onResolveErrorCallback: (error: string) => void
+  ): Promise<void> => {
+    if (!symbolName) {
+      await onResolveErrorCallback("cannot resolve symbol");
+      return;
+    }
+
+    const symbolInfo = async (): Promise<SymbolInfo> => {
+
+      const symbolData = await makeApiRequest(`api/v3/exchangeInfo?symbol=${symbolName}`);
+      const priceScale = symbolData.symbols[0].baseAssetPrecision;
+
+      return {
+        name: symbolName,
+        ticker: symbolName,
+        description: symbolName,
+        type: "crypto",
+        session: "24x7",
+        timezone: "Etc/UTC",
+        exchange: "Binance",
+        minmov: 1,
+        pricescale: 10 ** parseFloat(priceScale),
+        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();
+    console.log("Resolve requested for:", symbol);
+
+    onSymbolResolvedCallback(symbol);
+  };
+
+  getBars = async (
+    symbolInfo: SymbolInfo,
+    resolution: string,
+    periodParams: PeriodParams,
+    onHistoryCallback: (bars: Bar[], meta: { noData: boolean }) => void,
+    onErrorCallback: (error: any) => void
+  ): Promise<void> => {
+    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";
+      }
+    } 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 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: Bar[] = [];
+      data.forEach((bar: any) => {
+        if (bar[0] >= from * 1000 && bar[0] < to * 1000) {
+          // Binance returns string values; convert to numbers so the library can compute volume
+          const open = parseFloat(bar[1]);
+          const high = parseFloat(bar[2]);
+          const low = parseFloat(bar[3]);
+          const close = parseFloat(bar[4]);
+          const volume = parseFloat(bar[5]);
+          bars = [
+            ...bars,
+            {
+              time: bar[0],
+              low,
+              high,
+              open,
+              close,
+              volume,
+            },
+          ];
+        }
+      });
+      onHistoryCallback(bars, {
+        noData: false,
+      });
+    } catch (error) {
+      console.log("[getBars]: Get error", error);
+      onErrorCallback(error);
+    }
+  };
+
+  getTimescaleMarks(
+    symbolInfo: SymbolInfo,
+    from: number,
+    to: number,
+    onDataCallback: (marks: TimescaleMark[]) => void,
+    resolution: string
+  ): void {
+    if (this.timescaleMarks.length > 0) {
+      let timescaleMarks = Object.assign([], this.timescaleMarks);
+      onDataCallback(timescaleMarks);
+    }
+  }
+
+  async getServerTime(onServertimeCallback: (time: number) => void): Promise<void> {
+    const data = await makeApiRequest(`api/v3/time`);
+    const serverTime = data.serverTime / 1000;
+    onServertimeCallback(serverTime);
+  }
+
+  subscribeBars = (
+    symbolInfo: SymbolInfo,
+    resolution: string,
+    onRealtimeCallback: (bar: Bar) => void,
+    subscribeUID: string,
+    onResetCacheNeededCallback: () => void
+  ): void => {
+    subscribeOnStream(
+      symbolInfo,
+      resolution,
+      onRealtimeCallback,
+      subscribeUID,
+      onResetCacheNeededCallback,
+      this.interval
+    );
+  };
+
+  unsubscribeBars = (subscriberUID: string): void => {
+    unsubscribeFromStream(subscriberUID);
+  };
+}

package/src/helpers.ts

@@ -0,0 +1,53 @@
+import { useEffect, useRef } from "react";
+
+
+export async function makeApiRequest(path) {
+  try {
+    const response = await fetch(`https://api.binance.com/${path}`);
+    return response.json();
+  } catch (error) {
+    throw new Error(`Binance request error: ${error.status}`);
+  }
+}
+
+export async function getAllSymbols(symbol) {
+  let newSymbols = [];
+  try {
+    const data = await makeApiRequest(`api/v3/exchangeInfo?symbol=${symbol.toUpperCase()}`);
+    data.symbols.forEach(item => {
+      if (item.status === "TRADING") {
+        newSymbols.push({
+          symbol: item.symbol,
+          full_name: `${item.baseAsset}/${item.quoteAsset}`,
+          description: `Precision: ${item.quoteAssetPrecision}`,
+          exchange: "Binance",
+          ticker: item.symbol,
+          type: "crypto",
+        });
+      }
+    });
+  } catch (e) {
+    return newSymbols
+  }
+  return newSymbols;
+}
+
+export function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+export function roundTime(ts: number): number {
+  /**
+   * @param ts a JavaScript new Date().getTime() timestamp
+   */
+  let time = new Date(ts);
+  time.setMinutes(0);
+  time.setSeconds(0)
+  time.setMilliseconds(0);
+  const roundFloor = time.getTime();
+  return roundFloor / 1000
+}

package/src/index.css

@@ -0,0 +1,5 @@
+body {
+	margin: 0;
+	padding: 0;
+	font-family: sans-serif;
+}

package/src/index.tsx

@@ -0,0 +1,10 @@
+import { createRoot } from "react-dom/client";
+import App from "./App"; // Ensure App is a default export from "./App"
+import "./index.css";
+
+const rootElement = document.getElementById("root");
+
+if (rootElement) {
+  const root = createRoot(rootElement);
+  root.render(<App />);
+}

package/src/main.tsx

@@ -0,0 +1,151 @@
+import { FC, useEffect, useRef, useState } from "react";
+import { useImmer } from "use-immer";
+import { type IOrderLine } from "./charting-library-interfaces";
+import {
+  ResolutionString,
+  widget,
+} from "./charting_library/";
+import Datafeed from "./datafeed";
+
+export interface OrderLine extends IOrderLine {
+  id: string;
+  lineStyle?: number;
+}
+
+interface TVChartContainerProps {
+  symbol?: string;
+  interval?: ResolutionString;
+  libraryPath?: string;
+  timescaleMarks?: any[];
+  orderLines?: OrderLine[];
+  height?: string;
+  onTick?: (event: any) => void;
+  getLatestBar?: (data: any) => void;
+}
+
+const TVChartContainer: FC<TVChartContainerProps> = ({
+  symbol = "BTCUSDT",
+  interval = "1h" as ResolutionString,
+  libraryPath = "/charting_library/",
+  timescaleMarks = [],
+  orderLines = [],
+  height = "calc(100vh - 80px)",
+  onTick,
+  getLatestBar,
+}) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const [chartOrderLines, setChartOrderLines] = useImmer<any[]>([]);
+  const [widgetState, setWidgetState] = useImmer<any>(null);
+  const [symbolState] = useState<string | null>(null);
+  const prevTimescaleMarks = useRef<any[]>(timescaleMarks);
+
+  useEffect(() => {
+    if (!widgetState) {
+      initializeChart(interval);
+    }
+
+    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: ResolutionString) => {
+    const widgetOptions: any = {
+      symbol: symbol,
+      datafeed: new Datafeed(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 widget(widgetOptions);
+
+    tvWidget.onChartReady(() => {
+      tvWidget.subscribe("onTick", (event: any) => onTick && 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 && getLatestBar(data.data[data.data.length - 1]);
+      };
+      prices();
+    });
+  };
+
+  const updateOrderLines = (orderLines: OrderLine[]) => {
+    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 <div ref={containerRef} style={{ height: height }} />;
+};
+
+export default TVChartContainer;

package/src/streaming.ts

@@ -0,0 +1,125 @@
+const channelToSubscription = new Map();
+
+declare global {
+  interface Window { socket: WebSocket; }
+}
+
+function setupSockets(subRequest) {
+  const socket: WebSocket = 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,
+      T: closeTime,
+      i: interval,
+      o: open,
+      c: close,
+      h: high,
+      l: low,
+      v: volume,
+      n: trades,
+      q: quoteVolume,
+    } = data.k;
+
+    const channelString = `${symbol.toLowerCase()}@kline_${interval}`;
+    const subscriptionItem = channelToSubscription.get(channelString);
+    if (subscriptionItem === undefined) {
+      return;
+    }
+    const bar = {
+      time: startTime,
+      // Binance stream payload kline fields are strings; convert to numbers
+      open: parseFloat(open),
+      high: parseFloat(high),
+      low: parseFloat(low),
+      close: parseFloat(close),
+      volume: parseFloat(volume),
+    };
+    // send data to every subscriber of that symbol
+    subscriptionItem.handlers.forEach((handler) => handler.callback(bar));
+  };
+}
+
+export function subscribeOnStream(
+  symbolInfo,
+  resolution,
+  onRealtimeCallback,
+  subscribeUID,
+  onResetCacheNeededCallback,
+  interval
+) {
+  const channelString = `${symbolInfo.name.toLowerCase()}@kline_${interval}`;
+  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,
+    handlers: [handler],
+  };
+  const subRequest = {
+    method: "SUBSCRIBE",
+    params: [channelString],
+    id: 1,
+  };
+  channelToSubscription.set(channelString, subscriptionItem);
+  setupSockets(subRequest);
+}
+
+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
+        );
+        const subRequest = {
+          method: "UNSUBSCRIBE",
+          params: [channelString],
+          id: 1,
+        };
+        window.socket.send(JSON.stringify(subRequest));
+        channelToSubscription.delete(channelString);
+        window.socket = undefined;
+        break;
+      }
+    }
+  }
+}