@tradejs/app 1.0.0

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

@@ -0,0 +1,125 @@
+'use client';
+
+import { useEffect } from 'react';
+import _ from 'lodash';
+import { Chart, registerOverlay } from 'klinecharts';
+import { getSupportResistanceLevels } from '@tradejs/core/indicators';
+
+type SupportResistanceOverlayPoint = {
+  timestamp: number;
+  value: number;
+};
+
+export const useSupportResistanceLines = (
+  chart: Chart | null,
+  enabled: boolean,
+) => {
+  const data = chart?.getDataList();
+
+  // регистрируем оверлеи один раз
+  useEffect(() => {
+    registerOverlay({
+      name: 'SupportLine',
+      totalStep: 2,
+      needDefaultPointFigure: false,
+      needDefaultXAxisFigure: false,
+      needDefaultYAxisFigure: false,
+      createPointFigures: ({ coordinates }) => {
+        if (coordinates.length < 2) return [];
+        return [
+          {
+            type: 'line',
+            attrs: {
+              coordinates: [coordinates[0], coordinates[1]],
+            },
+            styles: {
+              color: '#22c55e', // зелёный
+              size: 1,
+              style: 'dashed',
+            },
+          },
+        ];
+      },
+    });
+
+    registerOverlay({
+      name: 'ResistanceLine',
+      totalStep: 2,
+      needDefaultPointFigure: false,
+      needDefaultXAxisFigure: false,
+      needDefaultYAxisFigure: false,
+      createPointFigures: ({ coordinates }) => {
+        if (coordinates.length < 2) return [];
+        return [
+          {
+            type: 'line',
+            attrs: {
+              coordinates: [coordinates[0], coordinates[1]],
+            },
+            styles: {
+              color: '#ef4444', // красный
+              size: 1,
+              style: 'dashed',
+            },
+          },
+        ];
+      },
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!chart || !enabled || !data || _.isEmpty(data)) return;
+
+    // находим уровни
+    const { supportLevels, resistanceLevels } =
+      getSupportResistanceLevels(data);
+
+    // конструируем точки для горизонтальных линий:
+    // нам нужна линия "цена = const" через всю видимую область.
+    // У оверлея klinecharts минимум 2 точки [ (t1,price), (t2,price) ].
+    // Возьмём первую и последнюю свечу, чтобы растянуть линию.
+    const first = data[0];
+    const last = data[data.length - 1];
+
+    const firstTs = first.timestamp;
+    const lastTs = last.timestamp;
+
+    // SUPPORT
+    for (const level of supportLevels) {
+      const points: SupportResistanceOverlayPoint[] = [
+        { timestamp: firstTs, value: level.price },
+        { timestamp: lastTs, value: level.price },
+      ];
+
+      chart.createOverlay({
+        name: 'SupportLine',
+        id: level.id,
+        points,
+      });
+    }
+
+    // RESISTANCE
+    for (const level of resistanceLevels) {
+      const points: SupportResistanceOverlayPoint[] = [
+        { timestamp: firstTs, value: level.price },
+        { timestamp: lastTs, value: level.price },
+      ];
+
+      chart.createOverlay({
+        name: 'ResistanceLine',
+        id: level.id,
+        points,
+      });
+    }
+
+    // cleanup: убрать все созданные уровни при следующем ререндере
+    return () => {
+      if (supportLevels.length) {
+        chart.removeOverlay({ name: 'SupportLine' });
+      }
+      if (resistanceLevels.length) {
+        chart.removeOverlay({ name: 'ResistanceLine' });
+      }
+    };
+  }, [chart, enabled, data]);
+};

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

@@ -0,0 +1,139 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import _ from 'lodash';
+import { Chart, registerOverlay } from 'klinecharts';
+import { getSignal } from '@actions/signal';
+import { toMs } from '@tradejs/core/time';
+import { createTrendlineEngine } from '@tradejs/core/indicators';
+import { Signal, TrendLine } from '@tradejs/types';
+import { createTrendLinePointFigure } from '../figures/trendLinePointFigure';
+import { createTrendLinePointsPointFigure } from '../figures/trendLinePointsPointFigure';
+
+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 useTrendLine = (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) return;
+    getSignal(symbol, signalId).then(setSignal);
+  }, [signalId, symbol]);
+
+  useEffect(() => {
+    registerOverlay({
+      name: 'TrendLine',
+      totalStep: 2,
+      needDefaultPointFigure: false,
+      needDefaultXAxisFigure: false,
+      needDefaultYAxisFigure: false,
+      createPointFigures: createTrendLinePointFigure,
+    });
+
+    registerOverlay({
+      name: 'TrendLinePoints',
+      needDefaultPointFigure: true,
+      needDefaultXAxisFigure: false,
+      needDefaultYAxisFigure: false,
+      createPointFigures: createTrendLinePointsPointFigure,
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!chart || !enabled || !data || _.isEmpty(data)) return;
+
+    const lastDataTsMs = toMs(data[data.length - 1].timestamp);
+
+    const currentSymbol = chart.getSymbol()?.ticker;
+
+    const buildLinesForMode = (mode: TrendLine['mode']) =>
+      createTrendlineEngine(data, { mode, minTouches: 4 }).getLines();
+
+    const trendLine = signal?.figures?.trendLine;
+
+    if (!trendLine) {
+      return;
+    }
+
+    const lowLines: TrendLine[] =
+      signalId && signal?.symbol === currentSymbol
+        ? trendLine?.mode === 'lows'
+          ? [trendLine]
+          : []
+        : buildLinesForMode('lows');
+
+    const highLines: TrendLine[] =
+      signalId && signal?.symbol === currentSymbol
+        ? trendLine?.mode === 'highs'
+          ? [trendLine]
+          : []
+        : buildLinesForMode('highs');
+
+    const lines = [...lowLines, ...highLines];
+
+    if (!lines) {
+      return;
+    }
+
+    for (const line of lines) {
+      const points = [...line.points, ...line.touches];
+
+      const extendData = {
+        mode: line.mode,
+      };
+
+      chart.createOverlay({
+        name: 'TrendLine',
+        id: line.id,
+        points: line.points,
+        zLevel: 10,
+        extendData,
+      });
+
+      chart.createOverlay({
+        name: 'TrendLinePoints',
+        id: `${line.id}-points`,
+        points: points,
+        zLevel: 12,
+      });
+    }
+
+    if (autoZoom && Number.isFinite(lastDataTsMs)) {
+      fitKeepRightZoom(chart, lastDataTsMs);
+    }
+
+    return () => {
+      chart.removeOverlay({ name: 'TrendLine' });
+      chart.removeOverlay({ name: 'TrendLinePoints' });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chart, enabled, data.length, signal]);
+};

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

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { Chart } from 'klinecharts';
+
+export const useVolIndicator = (chart: Chart | null, enabled: boolean) => {
+  useEffect(() => {
+    if (!chart || !enabled) {
+      return () => null;
+    }
+
+    setTimeout(() => {
+      chart.createIndicator('VOL', true, { minHeight: 80 });
+    }, 100);
+
+    return () => {
+      chart.removeIndicator({ name: 'VOL' });
+    };
+  }, [chart, enabled]);
+};

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

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

package/src/app/components/Dashboard/KlineChart/index.tsx

@@ -0,0 +1,169 @@
+'use client';
+
+import React, { useEffect, useRef } from 'react';
+import _ from 'lodash';
+import {
+  init,
+  Chart,
+  dispose,
+  DataLoaderSubscribeBarParams,
+} from 'klinecharts';
+import { OverlaySpinner } from '@UI';
+import { Indicator, UIFilters } from '@tradejs/types';
+import {
+  useBbIndicator,
+  useAtrIndicator,
+  useMaIndicator,
+  useEmaIndicator,
+  useWmaIndicator,
+  useVolIndicator,
+  useBtcIndicator,
+  useBtcCorrelation,
+  useSpreadIndicator,
+  useSignal,
+  useBacktest,
+  useSupportResistanceLines,
+  useResize,
+  useSetup,
+} from './hooks';
+import { usePluginIndicators } from './hooks/usePluginIndicators';
+import { IndicatorRendererConfig, useData } from '@store';
+import { darkTheme } from './styles';
+
+interface KlineChartProps {
+  id: string;
+  filters: UIFilters;
+  indicators: Record<string, Indicator>;
+  indicatorRenderers: Record<string, IndicatorRendererConfig>;
+}
+
+export const KlineChart = ({
+  id,
+  filters,
+  indicators,
+  indicatorRenderers,
+}: KlineChartProps) => {
+  const chartRef = useRef<Chart | null>(null);
+  const { data, key, fulfilled } = useData(filters);
+  const updateDataCallback = useRef<
+    DataLoaderSubscribeBarParams['callback'] | null
+  >(null);
+  const RIGHT_EDGE_EPSILON_BARS = 1;
+
+  useEffect(() => {
+    const chart = init(id) as Chart;
+    chartRef.current = chart;
+
+    darkTheme(chart);
+
+    return () => {
+      dispose(id);
+      chartRef.current = null;
+    };
+  }, [id]);
+
+  useEffect(() => {
+    if (!chartRef.current || _.isEmpty(data)) {
+      return;
+    }
+
+    const chart = chartRef.current;
+    const currentSymbol = chart.getSymbol()?.ticker;
+    const currentInterval = chart.getPeriod()?.span;
+    const nextInterval = parseInt(filters.interval, 10);
+    const symbolChanged = currentSymbol !== filters.symbol;
+    const intervalChanged = currentInterval !== nextInterval;
+
+    if (symbolChanged || intervalChanged) {
+      chartRef.current.setSymbol({ ticker: filters.symbol, pricePrecision: 9 });
+      chartRef.current.setPeriod({
+        span: nextInterval,
+        type: 'minute',
+      });
+
+      chartRef.current.setDataLoader({
+        getBars: ({ callback }) => {
+          callback(data);
+        },
+        subscribeBar: ({ callback }) => {
+          updateDataCallback.current = callback;
+        },
+      });
+
+      return;
+    }
+
+    if (!fulfilled || !updateDataCallback.current) {
+      return;
+    }
+
+    const currentData = chart.getDataList();
+    const visibleRangeBeforeUpdate = chart.getVisibleRange();
+    const maxVisibleDataIndex = currentData.length - 1;
+    const wasPinnedToRightEdge =
+      maxVisibleDataIndex <= 0 ||
+      maxVisibleDataIndex - visibleRangeBeforeUpdate.realTo <=
+        RIGHT_EDGE_EPSILON_BARS;
+    const dataIndexToKeepVisible = Math.max(
+      0,
+      Math.min(
+        maxVisibleDataIndex,
+        Math.floor(visibleRangeBeforeUpdate.realTo),
+      ),
+    );
+    const dataByTimestamp = _.keyBy(currentData, 'timestamp');
+
+    const updatedCandles = data.filter((c) => {
+      const prevCandle = dataByTimestamp[c.timestamp];
+
+      if (!prevCandle) {
+        return true;
+      }
+
+      if (
+        prevCandle.close !== c.close ||
+        prevCandle.open !== c.open ||
+        prevCandle.high !== c.high ||
+        prevCandle.low !== c.low ||
+        prevCandle.volume !== c.volume
+      ) {
+        return true;
+      }
+
+      return false;
+    });
+
+    updatedCandles.forEach((candle) => {
+      updateDataCallback.current?.(candle);
+    });
+
+    if (!wasPinnedToRightEdge) {
+      chart.scrollToDataIndex(dataIndexToKeepVisible);
+    }
+  }, [data, filters.interval, filters.symbol, fulfilled, key]);
+
+  const chart = chartRef.current;
+
+  useResize(chart, id);
+  useAtrIndicator(chart, indicators.atr.enabled, indicators.atr.periods || []);
+  useBbIndicator(chart, indicators.bb.enabled, indicators.bb.periods || []);
+  useMaIndicator(chart, indicators.ma.enabled, indicators.ma.periods || []);
+  useEmaIndicator(chart, indicators.ema.enabled, indicators.ema.periods || []);
+  useWmaIndicator(chart, indicators.wma.enabled, indicators.wma.periods || []);
+  useVolIndicator(chart, indicators.vol.enabled);
+  useBtcIndicator(chart, indicators.btc.enabled, filters);
+  useBtcCorrelation(chart, indicators.btcCorrelation?.enabled, filters);
+  useSpreadIndicator(chart, indicators.spread?.enabled, filters);
+  useBacktest(chart, filters.backtestId || undefined);
+  useSupportResistanceLines(chart, indicators.resistant?.enabled);
+  useSignal(chart, true);
+  useSetup(chart, true);
+  usePluginIndicators(chart, indicators, indicatorRenderers, data);
+
+  return (
+    <>
+      <div id={id} />
+      {!fulfilled && <OverlaySpinner />}
+    </>
+  );
+};

package/src/app/components/Dashboard/KlineChart/styles.ts

@@ -0,0 +1,70 @@
+import { Chart } from 'klinecharts';
+
+export const darkTheme = (chart: Chart) => {
+  chart.setStyles({
+    grid: {
+      horizontal: {
+        color: '#374151', // цвет горизонтальных линий сетки
+      },
+      vertical: {
+        color: '#374151', // цвет вертикальных линий сетки
+      },
+    },
+    candle: {
+      // type: 'candle_solid',
+      bar: {
+        upColor: '#26a69a', // цвет свечи вверх
+        downColor: '#ef5350', // цвет свечи вниз
+        noChangeColor: '#888888', // цвет свечи без изменения
+        upBorderColor: '#26a69a',
+        downBorderColor: '#ef5350',
+        noChangeBorderColor: '#888888',
+        upWickColor: '#26a69a',
+        downWickColor: '#ef5350',
+        noChangeWickColor: '#888888',
+      },
+    },
+    xAxis: {
+      axisLine: {
+        color: '#4b5563', // цвет оси X
+      },
+      tickLine: {
+        color: '#4b5563',
+      },
+      tickText: {
+        color: '#9ca3af', // цвет текста подписей по оси X
+      },
+    },
+    yAxis: {
+      axisLine: {
+        color: '#4b5563', // цвет оси Y
+      },
+      tickLine: {
+        color: '#4b5563',
+      },
+      tickText: {
+        color: '#9ca3af', // цвет текста подписей по оси Y
+      },
+    },
+    crosshair: {
+      horizontal: {
+        line: {
+          color: '#6b7280', // цвет горизонтальной линии перекрестия
+        },
+        text: {
+          color: '#f3f4f6', // цвет текста горизонтальной линии перекрестия
+          backgroundColor: '#1f2937', // фон текста горизонтальной линии перекрестия
+        },
+      },
+      vertical: {
+        line: {
+          color: '#6b7280', // цвет вертикальной линии перекрестия
+        },
+        text: {
+          color: '#f3f4f6', // цвет текста вертикальной линии перекрестия
+          backgroundColor: '#1f2937', // фон текста вертикальной линии перекрестия
+        },
+      },
+    },
+  });
+};

package/src/app/components/Dashboard/MainChart/index.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import _ from 'lodash';
+import { useEffect } from 'react';
+import { useFilters, useIndicators } from '@store';
+import { getTimestamp } from '@tradejs/core/time';
+import { KlineChart } from '../KlineChart';
+
+const DASHBOARD_REFRESH_DELAY = 10_000;
+
+export const MainChart = () => {
+  const { filters, setFilters } = useFilters();
+  const { indicatorsByKey, indicatorRenderers } = useIndicators();
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setFilters({
+        end: getTimestamp(),
+      });
+    }, DASHBOARD_REFRESH_DELAY);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [setFilters]);
+
+  return (
+    <KlineChart
+      id="main-chart"
+      filters={filters}
+      indicators={indicatorsByKey}
+      indicatorRenderers={indicatorRenderers}
+    />
+  );
+};

package/src/app/components/Shared/AppShell.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { Box } from '@chakra-ui/react';
+import { usePathname } from 'next/navigation';
+import { Sidebar } from '@shared/Sidebar';
+
+const AUTH_ROUTES = ['/routes/signin'];
+
+const isAuthRoute = (pathname: string) =>
+  AUTH_ROUTES.some((route) => pathname.startsWith(route));
+
+export const AppShell = ({ children }: { children: React.ReactNode }) => {
+  const pathname = usePathname();
+  const hideSidebar = isAuthRoute(pathname);
+
+  if (hideSidebar) {
+    return <Box minH="100vh">{children}</Box>;
+  }
+
+  return (
+    <>
+      <Sidebar />
+      <Box ml="60px" minH="100vh">
+        {children}
+      </Box>
+    </>
+  );
+};

package/src/app/components/Shared/FavoriteButton/index.tsx

@@ -0,0 +1,23 @@
+import { IconButton } from '@chakra-ui/react';
+import { FaStar, FaRegStar } from 'react-icons/fa';
+
+interface FavoriteButtonProps {
+  isFavorite: boolean;
+  onChangeFavorite: () => void;
+}
+
+export const FavoriteButton = ({
+  isFavorite,
+  onChangeFavorite,
+}: FavoriteButtonProps) => {
+  return (
+    <IconButton
+      size="xs"
+      colorPalette="teal"
+      variant={isFavorite ? 'solid' : 'outline'}
+      onClick={() => onChangeFavorite()}
+    >
+      {isFavorite ? <FaStar /> : <FaRegStar />}
+    </IconButton>
+  );
+};