binbot-charts 0.7.3 → 0.7.4

package/package.json

@@ -1,13 +1,11 @@
 {
-  "version": "0.7.3",
+  "version": "0.7.4",
   "name": "binbot-charts",
   "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "use-immer": "^0.10.0"
   },
-  "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
-  },
   "devDependencies": {
     "@babel/cli": "^7.18.10",
     "@babel/core": "^7.18.13",
@@ -24,7 +22,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "rm -rf dist && tsup --config tsup.config.ts --env.NODE_ENV production",
-    "release": "npm run build && npm run publish"
+    "release": "yarn build && yarn publish"
   },
   "description": "Binbot charts is the default candlestick bars chart used in terminal.binbot.in to render bots graphically.",
   "repository": {
@@ -34,20 +32,6 @@
   "main": "./dist/main.js",
   "module": "./dist/main.mjs",
   "types": "./dist/main.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/main.d.ts",
-      "import": "./dist/main.mjs",
-      "require": "./dist/main.js",
-      "default": "./dist/main.mjs"
-    }
-  },
-  "files": [
-    "dist",
-    "public",
-    "README.md",
-    "LICENSE"
-  ],
   "keywords": [
     "binbot",
     "charts"

package/src/App.css

@@ -0,0 +1,26 @@
+.App {
+	text-align: center;
+}
+
+.App-header {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 10px 0;
+	background-color: #222;
+	color: #fff;
+}
+
+.App-tv-logo {
+	height: 45px;
+}
+
+.App-react-logo {
+	display: block;
+	height: 62px;
+}
+
+.App-title {
+	display: block;
+	font-size: 1.5em;
+}

package/src/App.tsx

@@ -0,0 +1,89 @@
+import { type FC, useEffect, useState } from "react";
+import { useImmer } from "use-immer";
+import { Immutable } from "immer";
+import "./App.css";
+import TVChartContainer, { OrderLine } from "./main";
+import { ResolutionString } from "./charting_library/charting_library";
+import { ITimescaleMarks } from "./charting-library-interfaces";
+import { roundTime } from "./helpers";
+
+type TimeMarks = Immutable<ITimescaleMarks>;
+
+export const App: FC<{}> = (): JSX.Element => {
+  const [currentPrice, setCurrentPrice] = useState(null);
+  const [orderLines, setOrderLines] = useImmer<OrderLine[]>([]);
+  const [symbolState, setSymbolState] = useState("QTUMBTC");
+  const [testTimeMarks, setTestTimeMarks] = useState<Array<TimeMarks>>([]);
+
+  useEffect(() => {
+    if (currentPrice) {
+      updateOrderLines();
+    }
+  }, [currentPrice]);
+
+  const updateOrderLines = () => {
+    if (currentPrice) {
+      setOrderLines((draft) => {
+        draft.push({
+          id: "base_order",
+          text: "Base",
+          tooltip: ["Inactive"],
+          quantity: `XX USDT`,
+          price: currentPrice,
+          color: "#1f77d0",
+        });
+        return draft;
+      });
+      setOrderLines((draft) => {
+        draft.push({
+          id: "take_profit",
+          text: "Take profit",
+          tooltip: ["Inactive"],
+          quantity: `XX USDT`,
+          price: parseFloat((currentPrice * 1.03).toFixed(6)),
+          color: "#1f77d0",
+        });
+        return draft;
+      });
+    }
+  };
+
+  const handleTick = (ohlc) => {
+    setCurrentPrice(ohlc.close);
+  };
+  const getLatestBar = (bar) => {
+    const purchaseTs = new Date(2023, 0, 14, 13, 0).getTime();
+    setCurrentPrice(bar[3]);
+    setTestTimeMarks([
+      {
+        id: "tsm4",
+        time: roundTime(purchaseTs),
+        color: "blue",
+        label: "B",
+        tooltip: ["Safety Order 4"],
+      },
+    ]);
+  };
+  const handleChange = (e) => {
+    if (e.target.name === "symbol") {
+      setSymbolState(e.target.value);
+    }
+  };
+  return (
+    <>
+      <h1 style={{ textAlign: "center" }}>Test chart</h1>
+      <label htmlFor="symbol">Type symbol</label>
+      <input name="symbol" type="text" onChange={handleChange} />
+      <TVChartContainer
+        symbol={symbolState}
+        interval={"1h" as ResolutionString}
+        timescaleMarks={testTimeMarks}
+        orderLines={orderLines}
+        onTick={handleTick}
+        getLatestBar={getLatestBar}
+      />
+    </>
+  );
+};
+
+export default App;

package/src/charting-library-interfaces.d.ts

@@ -0,0 +1,36 @@
+import Datafeed from "./datafeed";
+
+export interface IWidgetOptions {
+  symbol: string;
+  // BEWARE: no trailing slash is expected in feed URL
+  datafeed: Datafeed;
+  interval: string;
+  container: HTMLInputElement;
+  library_path: string; // node_modules path of charting_library
+  locale?: string;
+  disabled_features?: Array<string>;
+  enabled_features?: Array<string>;
+  charts_storage_url?: string;
+  charts_storage_api_version?: string;
+  client_id?: string;
+  user_id?: string;
+  fullscreen?: boolean;
+  autosize?: boolean;
+  studies_overrides?: object;
+}
+
+export interface IOrderLine {
+  text: string;
+  tooltip?: Array<string>;
+  quantity?: string;
+  price: Number;
+  color?: string;
+}
+
+export interface ITimescaleMarks {
+  id: string;
+  time: Number;
+  color?: string;
+  label: string;
+  tooltip?: Array<string>;
+}

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 />);
+}