@tradejs/app 1.0.0

package/src/app/components/Dashboard/KlineChart/hooks/useBtcCorrelation.ts

@@ -0,0 +1,155 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import _ from 'lodash';
+import { Chart } from 'klinecharts';
+import { Filters, Provider } from '@tradejs/types';
+import { useData } from '@store';
+import { CORRELATION_WINDOW } from '@tradejs/core/constants';
+import { getCloseAtOrBefore, grayDashedLineStyle } from './indicatorShared';
+import { useManagedIndicator } from './useManagedIndicator';
+
+const WINDOW = CORRELATION_WINDOW;
+
+const pearson = (x: number[], y: number[]) => {
+  const len = x.length;
+  if (len < 2) return undefined;
+
+  const sumX = x.reduce((acc, value) => acc + value, 0);
+  const sumY = y.reduce((acc, value) => acc + value, 0);
+  const meanX = sumX / len;
+  const meanY = sumY / len;
+
+  let numerator = 0;
+  let denomX = 0;
+  let denomY = 0;
+
+  for (let i = 0; i < len; i++) {
+    const dx = x[i] - meanX;
+    const dy = y[i] - meanY;
+
+    numerator += dx * dy;
+    denomX += dx * dx;
+    denomY += dy * dy;
+  }
+
+  if (denomX <= 0 || denomY <= 0) return undefined;
+
+  const value = numerator / Math.sqrt(denomX * denomY);
+  if (!Number.isFinite(value)) return undefined;
+
+  return Math.max(-1, Math.min(1, value));
+};
+
+const buildCorrelationValues = (
+  kLineDataList: Array<{ timestamp: number; close: number }>,
+  btcByTs: Record<number, { close: number }>,
+  btcCandles: Array<{ timestamp: number; close: number }>,
+) => {
+  const valuesByTs: Record<number, Record<string, number | undefined>> = {};
+  const symbolWindow: number[] = [];
+  const btcWindow: number[] = [];
+
+  for (let i = 0; i < kLineDataList.length; i++) {
+    const candle = kLineDataList[i];
+    const btcClose =
+      btcByTs[candle.timestamp]?.close ??
+      getCloseAtOrBefore(btcCandles, candle.timestamp);
+
+    if (Number.isFinite(candle.close) && Number.isFinite(btcClose)) {
+      symbolWindow.push(candle.close);
+      btcWindow.push(Number(btcClose));
+
+      if (symbolWindow.length > WINDOW) {
+        symbolWindow.shift();
+        btcWindow.shift();
+      }
+    }
+
+    valuesByTs[candle.timestamp] = {
+      BTC_CORR: pearson(symbolWindow, btcWindow),
+      BTC_CORR_LEVEL: 0.5,
+    };
+  }
+
+  return valuesByTs;
+};
+
+export const useBtcCorrelation = (
+  chart: Chart | null,
+  enabled: boolean,
+  filters: Filters,
+) => {
+  const indicatorId = 'btc_correlation_indicator';
+  const paneId = 'btc_correlation_indicator_pane';
+  const btcByTimestampRef = useRef<Record<number, { close: number }>>({});
+  const btcCandlesRef = useRef<Array<{ timestamp: number; close: number }>>([]);
+
+  const btcFilters = useMemo(
+    () => ({
+      ...filters,
+      provider: (filters.provider || 'bybit') as Provider,
+      symbol: enabled ? 'BTCUSDT' : '',
+    }),
+    [filters, enabled],
+  );
+
+  const { data: btcData } = useData(btcFilters);
+
+  const btcByTimestamp = useMemo(
+    () => _.keyBy(btcData, 'timestamp'),
+    [btcData],
+  );
+  const btcCandles = useMemo(
+    () =>
+      btcData
+        .map((candle) => ({ timestamp: candle.timestamp, close: candle.close }))
+        .sort((a, b) => a.timestamp - b.timestamp),
+    [btcData],
+  );
+
+  useEffect(() => {
+    btcByTimestampRef.current = btcByTimestamp;
+    btcCandlesRef.current = btcCandles;
+  }, [btcByTimestamp, btcCandles]);
+
+  const calc = useCallback(
+    (kLineDataList: Array<{ timestamp: number; close: number }>) =>
+      buildCorrelationValues(
+        kLineDataList,
+        btcByTimestampRef.current,
+        btcCandlesRef.current,
+      ),
+    [],
+  );
+
+  const template = useMemo(
+    () => ({
+      shortName: 'BTC Correlation',
+      calcParams: [],
+      figures: [
+        {
+          key: 'BTC_CORR',
+          title: `BTC Correlation(${WINDOW}): `,
+          type: 'line',
+        },
+        {
+          key: 'BTC_CORR_LEVEL',
+          title: 'Correlation Level(0.5): ',
+          type: 'line',
+          styles: grayDashedLineStyle,
+        },
+      ],
+    }),
+    [],
+  );
+
+  useManagedIndicator({
+    chart,
+    enabled,
+    indicatorName: 'BTC_CORRELATION',
+    indicatorId,
+    paneId,
+    template,
+    calc,
+    updateDeps: [btcData],
+  });
+};

package/src/app/components/Dashboard/KlineChart/hooks/useBtcIndicator.ts

@@ -0,0 +1,185 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import _ from 'lodash';
+import { Chart } from 'klinecharts';
+import { Filters, Provider } from '@tradejs/types';
+import { useData } from '@store';
+import { getCloseAtOrBefore } from './indicatorShared';
+import { useManagedIndicator } from './useManagedIndicator';
+
+const buildBtcValues = (
+  kLineDataList: Array<{ timestamp: number }>,
+  bybitByTs: Record<number, { close: number }>,
+  binanceByTs: Record<number, { close: number }>,
+  coinbaseByTs: Record<number, { close: number }>,
+  bybitCandles: Array<{ timestamp: number; close: number }>,
+  binanceCandles: Array<{ timestamp: number; close: number }>,
+  coinbaseCandles: Array<{ timestamp: number; close: number }>,
+) => {
+  return kLineDataList.reduce<
+    Record<number, Record<string, number | undefined>>
+  >((acc, { timestamp }) => {
+    const bybitValue =
+      bybitByTs[timestamp]?.close ??
+      getCloseAtOrBefore(bybitCandles, timestamp);
+    const binanceValue =
+      binanceByTs[timestamp]?.close ??
+      getCloseAtOrBefore(binanceCandles, timestamp);
+    const coinbaseValue =
+      coinbaseByTs[timestamp]?.close ??
+      getCloseAtOrBefore(coinbaseCandles, timestamp);
+
+    acc[timestamp] = {
+      BTC_BYBIT: bybitValue,
+      BTC_BINANCE: binanceValue,
+      BTC_COINBASE: coinbaseValue,
+    };
+
+    return acc;
+  }, {});
+};
+
+export const useBtcIndicator = (
+  chart: Chart | null,
+  enabled: boolean,
+  filters: Filters,
+) => {
+  const indicatorId = 'btc_indicator';
+  const paneId = 'btc_indicator_pane';
+  const bybitByTimestampRef = useRef<Record<number, { close: number }>>({});
+  const binanceByTimestampRef = useRef<Record<number, { close: number }>>({});
+  const coinbaseByTimestampRef = useRef<Record<number, { close: number }>>({});
+  const bybitCandlesRef = useRef<Array<{ timestamp: number; close: number }>>(
+    [],
+  );
+  const binanceCandlesRef = useRef<Array<{ timestamp: number; close: number }>>(
+    [],
+  );
+  const coinbaseCandlesRef = useRef<
+    Array<{ timestamp: number; close: number }>
+  >([]);
+
+  const btcFilters = useMemo(
+    () => ({
+      bybit: {
+        ...filters,
+        provider: 'bybit' as Provider,
+        symbol: enabled ? 'BTCUSDT' : '',
+      },
+      binance: {
+        ...filters,
+        provider: 'binance' as Provider,
+        symbol: enabled ? 'BTCUSDT' : '',
+      },
+      coinbase: {
+        ...filters,
+        provider: 'coinbase' as Provider,
+        symbol: enabled ? 'BTCUSDT' : '',
+      },
+    }),
+    [filters, enabled],
+  );
+
+  const { data: bybitData } = useData(btcFilters.bybit);
+  const { data: binanceData } = useData(btcFilters.binance);
+  const { data: coinbaseData } = useData(btcFilters.coinbase);
+
+  const bybitByTimestamp = useMemo(
+    () => _.keyBy(bybitData, 'timestamp'),
+    [bybitData],
+  );
+  const bybitCandles = useMemo(
+    () =>
+      bybitData
+        .map((candle) => ({ timestamp: candle.timestamp, close: candle.close }))
+        .sort((a, b) => a.timestamp - b.timestamp),
+    [bybitData],
+  );
+  const binanceByTimestamp = useMemo(
+    () => _.keyBy(binanceData, 'timestamp'),
+    [binanceData],
+  );
+  const binanceCandles = useMemo(
+    () =>
+      binanceData
+        .map((candle) => ({ timestamp: candle.timestamp, close: candle.close }))
+        .sort((a, b) => a.timestamp - b.timestamp),
+    [binanceData],
+  );
+  const coinbaseByTimestamp = useMemo(
+    () => _.keyBy(coinbaseData, 'timestamp'),
+    [coinbaseData],
+  );
+  const coinbaseCandles = useMemo(
+    () =>
+      coinbaseData
+        .map((candle) => ({ timestamp: candle.timestamp, close: candle.close }))
+        .sort((a, b) => a.timestamp - b.timestamp),
+    [coinbaseData],
+  );
+
+  useEffect(() => {
+    bybitByTimestampRef.current = bybitByTimestamp;
+    binanceByTimestampRef.current = binanceByTimestamp;
+    coinbaseByTimestampRef.current = coinbaseByTimestamp;
+    bybitCandlesRef.current = bybitCandles;
+    binanceCandlesRef.current = binanceCandles;
+    coinbaseCandlesRef.current = coinbaseCandles;
+  }, [
+    bybitByTimestamp,
+    binanceByTimestamp,
+    coinbaseByTimestamp,
+    bybitCandles,
+    binanceCandles,
+    coinbaseCandles,
+  ]);
+
+  const calc = useCallback(
+    (kLineDataList: Array<{ timestamp: number }>) =>
+      buildBtcValues(
+        kLineDataList,
+        bybitByTimestampRef.current,
+        binanceByTimestampRef.current,
+        coinbaseByTimestampRef.current,
+        bybitCandlesRef.current,
+        binanceCandlesRef.current,
+        coinbaseCandlesRef.current,
+      ),
+    [],
+  );
+
+  const template = useMemo(
+    () => ({
+      shortName: 'BTC',
+      calcParams: [],
+      figures: [
+        {
+          key: 'BTC_BYBIT',
+          title: 'BTC ByBit: ',
+          type: 'line',
+        },
+        {
+          key: 'BTC_BINANCE',
+          title: 'BTC Binance: ',
+          type: 'line',
+        },
+        {
+          key: 'BTC_COINBASE',
+          title: 'BTC Coinbase: ',
+          type: 'line',
+        },
+      ],
+    }),
+    [],
+  );
+
+  useManagedIndicator({
+    chart,
+    enabled,
+    indicatorName: 'BTC',
+    indicatorId,
+    paneId,
+    template,
+    calc,
+    updateDeps: [bybitData, binanceData, coinbaseData],
+  });
+};

package/src/app/components/Dashboard/KlineChart/hooks/useEmaIndicator.ts

@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+import { EMA } from 'technicalindicators';
+import { registerIndicator, Chart } from 'klinecharts';
+
+export const useEmaIndicator = (
+  chart: Chart | null,
+  enabled: boolean,
+  periods: number[],
+) => {
+  useEffect(() => {
+    registerIndicator({
+      name: 'EMA',
+      shortName: 'EMA',
+      calcParams: periods,
+      figures: periods.map((period) => ({
+        key: `EMA${period}`,
+        title: `EMA${period}: `,
+        type: 'line',
+      })),
+
+      // Calculation results
+      calc: (kLineDataList) => {
+        const closesPrices = kLineDataList.map((item) => item.close);
+
+        const values = periods.map((period) =>
+          EMA.calculate({
+            period,
+            values: closesPrices,
+          }),
+        );
+
+        return kLineDataList.reduce<Record<number, Record<string, number>>>(
+          (acc, { timestamp }, candleIndex) => {
+            const ema: Record<string, number> = {};
+            periods.forEach((period, j) => {
+              if (candleIndex >= period - 1) {
+                ema[`EMA${period}`] = values[j][candleIndex - (period - 1)];
+              }
+            });
+
+            acc[timestamp] = ema;
+
+            return acc;
+          },
+          {},
+        );
+      },
+    });
+  }, [periods]);
+
+  useEffect(() => {
+    if (!chart || !enabled) {
+      return () => null;
+    }
+
+    chart.createIndicator('EMA', true, { id: 'candle_pane' });
+
+    return () => {
+      chart.removeIndicator({ name: 'EMA' });
+    };
+  }, [chart, enabled]);
+};

package/src/app/components/Dashboard/KlineChart/hooks/useMaIndicator.ts

@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+import { SMA } from 'technicalindicators';
+import { registerIndicator, Chart } from 'klinecharts';
+
+export const useMaIndicator = (
+  chart: Chart | null,
+  enabled: boolean,
+  periods: number[],
+) => {
+  useEffect(() => {
+    registerIndicator({
+      name: 'MA',
+      shortName: 'MA',
+      calcParams: periods,
+      figures: periods.map((period) => ({
+        key: `MA${period}`,
+        title: `MA${period}: `,
+        type: 'line',
+      })),
+
+      // Calculation results
+      calc: (kLineDataList) => {
+        const closesPrices = kLineDataList.map((item) => item.close);
+
+        const values = periods.map((period) =>
+          SMA.calculate({
+            period,
+            values: closesPrices,
+          }),
+        );
+
+        return kLineDataList.reduce<Record<number, Record<string, number>>>(
+          (acc, { timestamp }, candleIndex) => {
+            const ma: Record<string, number> = {};
+            periods.forEach((period, j) => {
+              if (candleIndex >= period - 1) {
+                ma[`MA${period}`] = values[j][candleIndex - (period - 1)];
+              }
+            }, {});
+
+            acc[timestamp] = ma;
+
+            return acc;
+          },
+          {},
+        );
+      },
+    });
+  }, [periods]);
+
+  useEffect(() => {
+    if (!chart || !enabled) {
+      return () => null;
+    }
+
+    chart.createIndicator('MA', true, { id: 'candle_pane' });
+
+    return () => {
+      chart.removeIndicator({ name: 'MA' });
+    };
+  }, [chart, enabled]);
+};

package/src/app/components/Dashboard/KlineChart/hooks/useManagedIndicator.ts

@@ -0,0 +1,140 @@
+import { useEffect, useState } from 'react';
+import { Chart, registerIndicator } from 'klinecharts';
+
+type CalcFn = (
+  kLineDataList: any[],
+) => Record<number, Record<string, number | undefined>>;
+
+type IndicatorTemplate = {
+  shortName: string;
+  calcParams: unknown[];
+  figures: Array<Record<string, unknown>>;
+};
+
+interface UseManagedIndicatorParams {
+  chart: Chart | null;
+  enabled: boolean;
+  indicatorName: string;
+  indicatorId: string;
+  paneId: string;
+  minHeight?: number;
+  template: IndicatorTemplate;
+  calc: CalcFn;
+  updateDeps: unknown[];
+}
+
+const removeIndicator = (
+  chart: Chart,
+  params: Pick<UseManagedIndicatorParams, 'indicatorId' | 'indicatorName'>,
+) => {
+  chart.removeIndicator({ id: params.indicatorId });
+  chart.removeIndicator({ name: params.indicatorName });
+};
+
+const hasIndicator = (
+  chart: Chart,
+  params: Pick<UseManagedIndicatorParams, 'indicatorId'>,
+) => chart.getIndicators({ id: params.indicatorId }).length > 0;
+
+const createIndicator = (
+  chart: Chart,
+  params: Pick<
+    UseManagedIndicatorParams,
+    'indicatorName' | 'indicatorId' | 'paneId' | 'minHeight'
+  >,
+) => {
+  chart.createIndicator(
+    { name: params.indicatorName, id: params.indicatorId },
+    true,
+    {
+      id: params.paneId,
+      minHeight: params.minHeight ?? 100,
+    },
+  );
+};
+
+const ensureIndicator = (
+  chart: Chart,
+  params: Pick<
+    UseManagedIndicatorParams,
+    'indicatorName' | 'indicatorId' | 'paneId' | 'minHeight'
+  >,
+) => {
+  if (hasIndicator(chart, { indicatorId: params.indicatorId })) return;
+  createIndicator(chart, params);
+};
+
+export const useManagedIndicator = ({
+  chart,
+  enabled,
+  indicatorName,
+  indicatorId,
+  paneId,
+  minHeight = 100,
+  template,
+  calc,
+  updateDeps,
+}: UseManagedIndicatorParams) => {
+  const [registered, setRegistered] = useState(false);
+  const updateDepsKey = JSON.stringify(updateDeps);
+
+  useEffect(() => {
+    if (registered) return;
+
+    registerIndicator({
+      name: indicatorName,
+      shortName: template.shortName,
+      calcParams: template.calcParams,
+      figures: template.figures as any,
+      calc,
+    });
+
+    setRegistered(true);
+  }, [registered, indicatorName, template, calc]);
+
+  useEffect(() => {
+    if (!registered || !chart) return;
+
+    if (!enabled) {
+      removeIndicator(chart, { indicatorId, indicatorName });
+      return;
+    }
+
+    ensureIndicator(chart, { indicatorName, indicatorId, paneId, minHeight });
+
+    return () => {
+      removeIndicator(chart, { indicatorId, indicatorName });
+    };
+  }, [
+    chart,
+    enabled,
+    registered,
+    indicatorName,
+    indicatorId,
+    paneId,
+    minHeight,
+  ]);
+
+  useEffect(() => {
+    if (!registered || !chart || !enabled) return;
+
+    const updated = chart.overrideIndicator({
+      name: indicatorName,
+      calc,
+    });
+
+    if (!updated) {
+      ensureIndicator(chart, { indicatorName, indicatorId, paneId, minHeight });
+    }
+  }, [
+    chart,
+    enabled,
+    registered,
+    indicatorName,
+    indicatorId,
+    paneId,
+    minHeight,
+    calc,
+    updateDepsKey,
+  ]);
+};