@tradejs/app 1.0.0

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

@@ -0,0 +1,212 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { Chart, registerIndicator } from 'klinecharts';
+import { Indicator, KlineChartData } from '@tradejs/types';
+import { IndicatorRendererConfig } from '@store';
+
+type RenderersMap = Record<string, IndicatorRendererConfig>;
+type RuntimeEntry = {
+  indicatorId: string;
+  enabled: boolean;
+  indicatorName: string;
+  indicatorRuntimeId: string;
+  paneId: string;
+  minHeight: number;
+  shortName: string;
+  figures: IndicatorRendererConfig['figures'];
+  calc: ReturnType<typeof createCalc>;
+};
+
+const getRuntimeIds = (
+  indicatorId: string,
+  renderer: IndicatorRendererConfig,
+) => {
+  const normalized = indicatorId.replace(/[^a-zA-Z0-9_]/g, '_');
+  return {
+    indicatorName:
+      renderer.indicatorName || `PLUGIN_${normalized.toUpperCase()}`,
+    indicatorRuntimeId: `plugin_indicator_${normalized}`,
+    paneId: renderer.paneId || `plugin_indicator_${normalized}_pane`,
+  };
+};
+
+const createFigureStyles = (
+  figure: IndicatorRendererConfig['figures'][number],
+) => {
+  if (!figure.color && !figure.lineWidth && !figure.dashed) {
+    return undefined;
+  }
+
+  return () =>
+    ({
+      color: figure.color,
+      size: figure.lineWidth,
+      style: figure.dashed ? 'dashed' : undefined,
+      dashedValue: figure.dashed ? [4, 4] : undefined,
+    }) as any;
+};
+
+const createCalc = (renderer: IndicatorRendererConfig) => {
+  const figures = renderer.figures || [];
+
+  return (
+    kLineDataList: Array<{ timestamp?: number } & Record<string, unknown>>,
+  ) => {
+    return kLineDataList.reduce<
+      Record<number, Record<string, number | undefined>>
+    >((acc, candle) => {
+      const timestampRaw = candle.timestamp;
+      const timestamp = Number(timestampRaw);
+      if (!Number.isFinite(timestamp)) {
+        return acc;
+      }
+
+      const point: Record<string, number | undefined> = {};
+
+      for (const figure of figures) {
+        if (
+          typeof figure.constant === 'number' &&
+          Number.isFinite(figure.constant)
+        ) {
+          point[figure.key] = figure.constant;
+          continue;
+        }
+
+        const raw = candle[figure.key];
+        const value = Number(raw);
+        point[figure.key] = Number.isFinite(value) ? value : undefined;
+      }
+
+      acc[timestamp] = point;
+      return acc;
+    }, {});
+  };
+};
+
+const removeIndicator = (
+  chart: Chart,
+  indicatorName: string,
+  indicatorRuntimeId: string,
+) => {
+  chart.removeIndicator({ id: indicatorRuntimeId });
+  chart.removeIndicator({ name: indicatorName });
+};
+
+const ensureIndicator = (
+  chart: Chart,
+  indicatorName: string,
+  indicatorRuntimeId: string,
+  paneId: string,
+  minHeight = 100,
+) => {
+  if (chart.getIndicators({ id: indicatorRuntimeId }).length > 0) {
+    return;
+  }
+
+  chart.createIndicator({ name: indicatorName, id: indicatorRuntimeId }, true, {
+    id: paneId,
+    minHeight,
+  });
+};
+
+export const usePluginIndicators = (
+  chart: Chart | null,
+  indicators: Record<string, Indicator>,
+  indicatorRenderers: RenderersMap,
+  data: KlineChartData,
+) => {
+  const registeredIndicatorsRef = useRef(new Set<string>());
+
+  const runtimeEntries = useMemo<RuntimeEntry[]>(
+    () =>
+      Object.entries(indicatorRenderers || {})
+        .filter(([, renderer]) => renderer?.figures?.length)
+        .map(([indicatorId, renderer]) => {
+          const ids = getRuntimeIds(indicatorId, renderer);
+          return {
+            indicatorId,
+            enabled: Boolean(indicators[indicatorId]?.enabled),
+            indicatorName: ids.indicatorName,
+            indicatorRuntimeId: ids.indicatorRuntimeId,
+            paneId: ids.paneId,
+            minHeight: renderer.minHeight ?? 100,
+            shortName:
+              renderer.shortName ||
+              indicators[indicatorId]?.label ||
+              indicatorId,
+            figures: renderer.figures,
+            calc: createCalc(renderer),
+          };
+        }),
+    [indicatorRenderers, indicators],
+  );
+
+  useEffect(() => {
+    for (const entry of runtimeEntries) {
+      if (registeredIndicatorsRef.current.has(entry.indicatorName)) {
+        continue;
+      }
+
+      registerIndicator({
+        name: entry.indicatorName,
+        shortName: entry.shortName,
+        calcParams: [],
+        figures: entry.figures.map((figure) => ({
+          key: figure.key,
+          title: figure.title || `${figure.key}: `,
+          type: figure.type || 'line',
+          styles: createFigureStyles(figure),
+        })) as any,
+        calc: entry.calc as any,
+      });
+
+      registeredIndicatorsRef.current.add(entry.indicatorName);
+    }
+  }, [runtimeEntries]);
+
+  useEffect(() => {
+    if (!chart) {
+      return;
+    }
+
+    for (const entry of runtimeEntries) {
+      if (!entry.enabled) {
+        removeIndicator(chart, entry.indicatorName, entry.indicatorRuntimeId);
+        continue;
+      }
+
+      ensureIndicator(
+        chart,
+        entry.indicatorName,
+        entry.indicatorRuntimeId,
+        entry.paneId,
+        entry.minHeight,
+      );
+
+      const updated = chart.overrideIndicator({
+        name: entry.indicatorName,
+        calc: entry.calc as any,
+      });
+
+      if (!updated) {
+        ensureIndicator(
+          chart,
+          entry.indicatorName,
+          entry.indicatorRuntimeId,
+          entry.paneId,
+          entry.minHeight,
+        );
+      }
+    }
+  }, [chart, runtimeEntries, data]);
+
+  useEffect(() => {
+    return () => {
+      if (!chart) {
+        return;
+      }
+      for (const entry of runtimeEntries) {
+        removeIndicator(chart, entry.indicatorName, entry.indicatorRuntimeId);
+      }
+    };
+  }, [chart, runtimeEntries]);
+};

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

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { Chart } from 'klinecharts';
+
+export const useResize = (chart: Chart | null, id: string) => {
+  useEffect(() => {
+    const chartElement = document.getElementById(id);
+
+    const resize = () => {
+      if (!chartElement) return;
+
+      const parent = chartElement.parentElement;
+
+      if (!parent) return;
+
+      const parentStyles = window.getComputedStyle(parent);
+      chartElement.style.width = parentStyles.width;
+      chartElement.style.height = parentStyles.height;
+      chart?.resize();
+    };
+
+    const resizeObserver = new ResizeObserver(resize);
+
+    resizeObserver.observe(document.body);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [chart, id]);
+};

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

@@ -0,0 +1,122 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { Chart, registerOverlay } from 'klinecharts';
+import { getSignal } from '@actions/signal';
+import { toMs } from '@tradejs/core/time';
+import { Signal } from '@tradejs/types';
+import { createTradeZonePointFigure } from '../figures/tradeZonePointFigure';
+
+const SETUP = 'Setup';
+const SETUP_START = 'Setup-start';
+
+const FALLBACK_WIDTH_MS = 24 * 60 * 60_000;
+
+type Point = { timestamp: number; value: number };
+
+export const useSetup = (chart: Chart | null, enabled: boolean) => {
+  const [signal, setSignal] = useState<Signal | null>(null);
+  const searchParams = useSearchParams();
+  const signalId = searchParams.get('signalId');
+
+  const symbol = chart?.getSymbol()?.ticker || '';
+
+  useEffect(() => {
+    if (!signalId || !symbol) {
+      setSignal(null);
+      return;
+    }
+    getSignal(symbol, signalId).then(setSignal);
+  }, [symbol, signalId]);
+
+  useEffect(() => {
+    registerOverlay({
+      name: SETUP,
+      totalStep: 2,
+      needDefaultPointFigure: false,
+      needDefaultXAxisFigure: false,
+      needDefaultYAxisFigure: false,
+      createPointFigures: createTradeZonePointFigure,
+    });
+
+    registerOverlay({
+      name: SETUP_START,
+      totalStep: 1,
+      needDefaultPointFigure: true,
+      needDefaultXAxisFigure: false,
+      needDefaultYAxisFigure: false,
+      createPointFigures: ({ coordinates }) => {
+        const { x, y } = coordinates[0];
+
+        return [
+          {
+            type: 'circle',
+            attrs: { x, y, r: 5 },
+            styles: {
+              style: 'fill',
+              color: '#9333ea',
+            },
+            ignoreEvent: true,
+          },
+        ];
+      },
+    });
+  }, []);
+
+  const setupPoints = useMemo(() => {
+    if (!signal) return null;
+
+    const { timestamp, prices } = signal;
+
+    const startTsMs = toMs(timestamp);
+    const endTsMs = startTsMs + FALLBACK_WIDTH_MS;
+
+    const start: Point = { timestamp: startTsMs, value: prices.currentPrice };
+    const tpEnd: Point = { timestamp: endTsMs, value: prices.takeProfitPrice };
+    const slEnd: Point = { timestamp: endTsMs, value: prices.stopLossPrice };
+
+    return { start, tpEnd, slEnd };
+  }, [signal]);
+
+  useEffect(() => {
+    if (!chart || !enabled || !signalId || !signal || !setupPoints) return;
+
+    const currentSymbol = chart.getSymbol()?.ticker;
+    if (signal.symbol !== currentSymbol) return;
+
+    const tpId = `${signal.signalId}-tp`;
+    const slId = `${signal.signalId}-sl`;
+
+    chart.createOverlay({
+      name: SETUP,
+      id: tpId,
+      points: [setupPoints.start, setupPoints.tpEnd],
+      extendData: {
+        mode: 'TP',
+      },
+    });
+
+    chart.createOverlay({
+      name: SETUP,
+      id: slId,
+      points: [setupPoints.start, setupPoints.slEnd],
+      extendData: {
+        mode: 'SL',
+      },
+    });
+
+    chart.createOverlay({
+      name: SETUP_START,
+      points: [setupPoints.start],
+    });
+
+    return () => {
+      chart.removeOverlay({ id: tpId, name: SETUP });
+      chart.removeOverlay({ id: slId, name: SETUP });
+      chart.removeOverlay({ name: SETUP_START });
+    };
+  }, [chart, enabled, signalId, signal, setupPoints]);
+
+  return { signal };
+};

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

@@ -0,0 +1,85 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import _ from 'lodash';
+import { Chart } from 'klinecharts';
+import { getSignal } from '@actions/signal';
+import { Signal } from '@tradejs/types';
+import {
+  drawSignalFigures,
+  ensureBaseFigureOverlaysRegistered,
+  normalizeSignalFigures,
+  removeSignalFigures,
+} from '@tradejs/core/figures';
+import { toMs } from '@tradejs/core/time';
+
+const fitKeepRightZoom = (chart: Chart, lastDataTsMs: number) => {
+  if (!Number.isFinite(lastDataTsMs)) return;
+
+  const size = chart.getSize?.();
+  const width = size?.width ?? 0;
+
+  if (!width) return;
+
+  const MAX_STEPS = 15;
+  const SCALE = 0.85;
+  const RIGHT_MARGIN_RATIO = 0.1;
+
+  chart.scrollToTimestamp(lastDataTsMs);
+
+  for (let i = 0; i < MAX_STEPS; i++) {
+    chart.zoomAtTimestamp(SCALE, lastDataTsMs);
+  }
+
+  const rightOffsetPx = width * RIGHT_MARGIN_RATIO;
+
+  chart.setOffsetRightDistance?.(rightOffsetPx);
+};
+
+export const useSignal = (chart: Chart | null, enabled: boolean) => {
+  const [signal, setSignal] = useState<Signal | null>(null);
+  const searchParams = useSearchParams();
+  const signalId = searchParams.get('signalId');
+  const autoZoom = Boolean(searchParams.get('autoZoom')) ?? false;
+
+  const data = chart?.getDataList();
+  const symbol = chart?.getSymbol()?.ticker || '';
+
+  useEffect(() => {
+    if (!signalId || !symbol) {
+      setSignal(null);
+      return;
+    }
+    getSignal(symbol, signalId).then(setSignal);
+  }, [signalId, symbol]);
+
+  useEffect(() => {
+    if (!chart || !enabled || !data || _.isEmpty(data) || !signal) return;
+
+    const currentSymbol = chart.getSymbol()?.ticker;
+    if (signal.symbol !== currentSymbol) return;
+
+    const normalized = normalizeSignalFigures(signal);
+    if (!normalized) return;
+
+    ensureBaseFigureOverlaysRegistered();
+
+    const overlays = drawSignalFigures({
+      chart,
+      idPrefix: `signal-${signal.signalId}`,
+      figures: normalized,
+    });
+
+    if (autoZoom) {
+      const lastDataTsMs = toMs(data[data.length - 1].timestamp);
+      if (Number.isFinite(lastDataTsMs)) {
+        fitKeepRightZoom(chart, lastDataTsMs);
+      }
+    }
+
+    return () => {
+      removeSignalFigures(chart, overlays);
+    };
+  }, [autoZoom, chart, data, enabled, signal]);
+};

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

@@ -0,0 +1,243 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import _ from 'lodash';
+import { Chart } from 'klinecharts';
+import { Filters, Interval, Provider } from '@tradejs/types';
+import { smoothSpreadSeries } from '@tradejs/indicators';
+import { API } from '@tradejs/core/api';
+import { useData } from '@store';
+import { grayDashedLineStyle } from './indicatorShared';
+import { useManagedIndicator } from './useManagedIndicator';
+
+type SpreadPoint = {
+  ts: string | number | Date;
+  spread: number | null;
+  binance_price?: number | null;
+  coinbase_price?: number | null;
+  binancePrice?: number | null;
+  coinbasePrice?: number | null;
+};
+
+const toSpreadInterval = (interval: string) => {
+  if (interval === '15') return '15m';
+  if (interval === '60' || interval === '240' || interval === '720')
+    return '1h';
+  return null;
+};
+
+const toDataInterval = (interval: string): Interval | null => {
+  if (interval === '15') return '15' as Interval;
+  if (interval === '60' || interval === '240' || interval === '720') {
+    return '60' as Interval;
+  }
+  return null;
+};
+
+const toTimestampMs = (value: SpreadPoint['ts']) => {
+  if (typeof value === 'number') {
+    return value < 1e12 ? value * 1000 : value;
+  }
+
+  if (value instanceof Date) {
+    return value.getTime();
+  }
+
+  const parsed = new Date(value).getTime();
+  return Number.isFinite(parsed) ? parsed : Number.NaN;
+};
+
+const getSpreadAtOrBefore = (
+  points: Array<{ timestamp: number; spread: number | null }>,
+  timestamp: number,
+) => {
+  let left = 0;
+  let right = points.length - 1;
+  let result: number | null | undefined;
+
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2);
+    const point = points[mid];
+
+    if (point.timestamp <= timestamp) {
+      result = point.spread;
+      left = mid + 1;
+    } else {
+      right = mid - 1;
+    }
+  }
+
+  return result;
+};
+
+const buildSpreadValues = (
+  kLineDataList: Array<{ timestamp: number }>,
+  spreadByTs: Record<number, { spread: number | null }>,
+  sortedSpread: Array<{ timestamp: number; spread: number | null }>,
+) => {
+  return kLineDataList.reduce<
+    Record<number, Record<string, number | undefined>>
+  >((acc, { timestamp }) => {
+    const value =
+      spreadByTs[timestamp]?.spread ??
+      getSpreadAtOrBefore(sortedSpread, timestamp);
+
+    acc[timestamp] = {
+      SPREAD: Number.isFinite(Number(value)) ? Number(value) : undefined,
+      SPREAD_ZERO: 0,
+    };
+
+    return acc;
+  }, {});
+};
+
+const getBinancePrice = (row: SpreadPoint) =>
+  row.binancePrice ?? row.binance_price ?? null;
+
+const getCoinbasePrice = (row: SpreadPoint) =>
+  row.coinbasePrice ?? row.coinbase_price ?? null;
+
+export const useSpreadIndicator = (
+  chart: Chart | null,
+  enabled: boolean,
+  filters: Filters,
+) => {
+  const indicatorId = 'spread_indicator';
+  const paneId = 'spread_indicator_pane';
+  const [rows, setRows] = useState<SpreadPoint[]>([]);
+  const spreadByTsRef = useRef<Record<number, { spread: number | null }>>({});
+  const sortedSpreadRef = useRef<
+    Array<{ timestamp: number; spread: number | null }>
+  >([]);
+
+  const spreadInterval = useMemo(
+    () => toSpreadInterval(String(filters.interval)),
+    [filters.interval],
+  );
+  const dataInterval = useMemo(
+    () => toDataInterval(String(filters.interval)),
+    [filters.interval],
+  );
+
+  const fallbackFilters = useMemo(
+    () => ({
+      ...filters,
+      interval: dataInterval ?? filters.interval,
+      symbol: enabled ? filters.symbol.toUpperCase() : '',
+    }),
+    [filters, dataInterval, enabled],
+  );
+
+  const { data: binanceData } = useData({
+    ...fallbackFilters,
+    provider: 'binance' as Provider,
+  });
+  const { data: coinbaseData } = useData({
+    ...fallbackFilters,
+    provider: 'coinbase' as Provider,
+  });
+
+  const fallbackRows = useMemo(() => {
+    if (!dataInterval) return [] as SpreadPoint[];
+
+    const coinbaseByTs = _.keyBy(coinbaseData, 'timestamp');
+    const result: SpreadPoint[] = [];
+
+    for (const binanceCandle of binanceData) {
+      const coinbaseCandle = coinbaseByTs[binanceCandle.timestamp];
+      if (!coinbaseCandle || binanceCandle.close <= 0) continue;
+
+      result.push({
+        ts: binanceCandle.timestamp,
+        spread:
+          (coinbaseCandle.close - binanceCandle.close) / binanceCandle.close,
+        binancePrice: binanceCandle.close,
+        coinbasePrice: coinbaseCandle.close,
+      });
+    }
+
+    return result;
+  }, [dataInterval, binanceData, coinbaseData]);
+
+  useEffect(() => {
+    if (!enabled) {
+      setRows([]);
+      return;
+    }
+    if (!spreadInterval || !filters.symbol) {
+      setRows([]);
+      return;
+    }
+
+    API.get<{ rows?: SpreadPoint[] }>(
+      `/api/spread/${filters.symbol}/${spreadInterval}?from=${filters.start}&to=${filters.end}`,
+    )
+      .then((res) => {
+        setRows(res.rows ?? []);
+      })
+      .catch(() => setRows([]));
+  }, [enabled, filters.symbol, filters.start, filters.end, spreadInterval]);
+
+  useEffect(() => {
+    const sourceRows = rows.length ? rows : fallbackRows;
+    const normalizedRows = sourceRows
+      .map((row) => ({
+        timestamp: toTimestampMs(row.ts),
+        spread: row.spread,
+        binancePrice: getBinancePrice(row),
+        coinbasePrice: getCoinbasePrice(row),
+      }))
+      .filter((row) => Number.isFinite(row.timestamp))
+      .sort((a, b) => a.timestamp - b.timestamp);
+
+    const smoothedRows = smoothSpreadSeries(normalizedRows);
+
+    sortedSpreadRef.current = smoothedRows;
+    spreadByTsRef.current = smoothedRows.reduce<
+      Record<number, { spread: number | null }>
+    >((acc, row) => {
+      acc[row.timestamp] = { spread: row.spread };
+      return acc;
+    }, {});
+  }, [rows, fallbackRows]);
+
+  const calc = useCallback(
+    (kLineDataList: Array<{ timestamp: number }>) =>
+      buildSpreadValues(
+        kLineDataList,
+        spreadByTsRef.current,
+        sortedSpreadRef.current,
+      ),
+    [],
+  );
+
+  const template = useMemo(
+    () => ({
+      shortName: 'SPREAD',
+      calcParams: [],
+      figures: [
+        {
+          key: 'SPREAD',
+          title: 'Spread: ',
+          type: 'line',
+        },
+        {
+          key: 'SPREAD_ZERO',
+          title: 'Zero: ',
+          type: 'line',
+          styles: grayDashedLineStyle,
+        },
+      ],
+    }),
+    [],
+  );
+
+  useManagedIndicator({
+    chart,
+    enabled,
+    indicatorName: 'SPREAD',
+    indicatorId,
+    paneId,
+    template,
+    calc,
+    updateDeps: [rows, fallbackRows],
+  });
+};