@tradejs/app 1.0.0

package/src/app/components/Dashboard/KlineChart/figures/entryLinePointFigure.ts

@@ -0,0 +1 @@
+export { createEntryLinePointFigure } from '@tradejs/core/figures';

package/src/app/components/Dashboard/KlineChart/figures/entryPointsPointFigure.ts

@@ -0,0 +1 @@
+export { createEntryPointsPointFigure } from '@tradejs/core/figures';

package/src/app/components/Dashboard/KlineChart/figures/entryZonePointFigure.ts

@@ -0,0 +1 @@
+export { createEntryZonePointFigure } from '@tradejs/core/figures';

package/src/app/components/Dashboard/KlineChart/figures/index.ts

@@ -0,0 +1,213 @@
+import { registerFigure } from 'klinecharts';
+import { diamond } from './diamond';
+import { rectangle } from './rectangle';
+import { circle } from './circle';
+import { star } from './star';
+import { square } from './square';
+import { triangle } from './triangle';
+import { label } from './label';
+
+// label
+registerFigure({
+  name: 'btLabel',
+  draw: (
+    ctx: CanvasRenderingContext2D,
+    attrs: {
+      x: number;
+      y: number;
+      text: string;
+      width: number;
+      height: number;
+      color: string;
+    },
+  ) => {
+    label({
+      ctx,
+      x: attrs.x,
+      y: attrs.y,
+      text: attrs.text,
+      width: attrs.width,
+      height: attrs.height,
+      color: attrs.color,
+    });
+  },
+  checkEventOn: (coordinate, attrs) => {
+    const { x, y } = coordinate;
+    const { width, height } = attrs;
+    return Math.abs(x * height) + Math.abs(y * width) <= (width * height) / 2;
+  },
+});
+
+// прямоугольник
+registerFigure({
+  name: 'btRect',
+  draw: (
+    ctx: CanvasRenderingContext2D,
+    attrs: {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+      color: string;
+    },
+  ) => {
+    rectangle({
+      ctx,
+      x: attrs.x,
+      y: attrs.y,
+      width: attrs.width,
+      height: attrs.height,
+      color: attrs.color,
+    });
+  },
+  checkEventOn: (coordinate, attrs) => {
+    const { x, y } = coordinate;
+    const { width, height } = attrs;
+    return Math.abs(x * height) + Math.abs(y * width) <= (width * height) / 2;
+  },
+});
+
+// ромб
+registerFigure({
+  name: 'btDiamond',
+  draw: (
+    ctx: CanvasRenderingContext2D,
+    attrs: {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+      color: string;
+    },
+  ) => {
+    diamond({
+      ctx,
+      x: attrs.x,
+      y: attrs.y,
+      width: attrs.width,
+      height: attrs.height,
+      color: attrs.color,
+    });
+  },
+  checkEventOn: (coordinate, attrs) => {
+    const { x, y } = coordinate;
+    const { width, height } = attrs;
+    return Math.abs(x * height) + Math.abs(y * width) <= (width * height) / 2;
+  },
+});
+
+// звезда / крестик
+registerFigure({
+  name: 'btStar',
+  draw: (
+    ctx: CanvasRenderingContext2D,
+    attrs: {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+      color: string;
+    },
+  ) => {
+    star({
+      ctx,
+      x: attrs.x,
+      y: attrs.y,
+      width: attrs.width,
+      height: attrs.height,
+      color: attrs.color,
+    });
+  },
+  checkEventOn: (coordinate, attrs) => {
+    const { x, y } = coordinate;
+    const { width, height } = attrs;
+    return Math.abs(x * height) + Math.abs(y * width) <= (width * height) / 2;
+  },
+});
+
+// кружок
+registerFigure({
+  name: 'btCircle',
+  draw: (
+    ctx: CanvasRenderingContext2D,
+    attrs: {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+      color: string;
+    },
+  ) => {
+    circle({
+      ctx,
+      x: attrs.x,
+      y: attrs.y,
+      width: attrs.width,
+      height: attrs.height,
+      color: attrs.color,
+    });
+  },
+  checkEventOn: (coordinate, attrs) => {
+    const { x, y } = coordinate;
+    const { width, height } = attrs;
+    return Math.abs(x * height) + Math.abs(y * width) <= (width * height) / 2;
+  },
+});
+
+// квадрат
+registerFigure({
+  name: 'btSquare',
+  draw: (
+    ctx: CanvasRenderingContext2D,
+    attrs: {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+      color: string;
+    },
+  ) => {
+    square({
+      ctx,
+      x: attrs.x,
+      y: attrs.y,
+      width: attrs.width,
+      height: attrs.height,
+      color: attrs.color,
+    });
+  },
+  checkEventOn: (coordinate, attrs) => {
+    const { x, y } = coordinate;
+    const { width, height } = attrs;
+    return Math.abs(x * height) + Math.abs(y * width) <= (width * height) / 2;
+  },
+});
+
+// треугольник
+registerFigure({
+  name: 'btTriangle',
+  draw: (
+    ctx: CanvasRenderingContext2D,
+    attrs: {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+      color: string;
+    },
+  ) => {
+    triangle({
+      ctx,
+      x: attrs.x,
+      y: attrs.y,
+      width: attrs.width,
+      height: attrs.height,
+      color: attrs.color,
+    });
+  },
+  checkEventOn: (coordinate, attrs) => {
+    const { x, y } = coordinate;
+    const { width, height } = attrs;
+    return Math.abs(x * height) + Math.abs(y * width) <= (width * height) / 2;
+  },
+});

package/src/app/components/Dashboard/KlineChart/figures/label.ts

@@ -0,0 +1,14 @@
+import { Figure } from '@tradejs/types';
+
+export const label = ({ ctx, x, y, text = '', color }: Figure) => {
+  ctx.save();
+
+  ctx.font = '10px sans-serif';
+  ctx.textAlign = 'left';
+  ctx.textBaseline = 'middle';
+
+  ctx.fillStyle = color;
+  ctx.fillText(text, x + 6, y);
+
+  ctx.restore();
+};

package/src/app/components/Dashboard/KlineChart/figures/rectangle.ts

@@ -0,0 +1,20 @@
+import { Figure } from '@tradejs/types';
+
+export const rectangle = ({
+  ctx,
+  x: baseX,
+  y: baseY,
+  width,
+  height,
+  color,
+}: Figure) => {
+  const x = baseX - width / 2;
+  const y = baseY - height / 2;
+
+  ctx.fillStyle = color;
+  ctx.fillRect(x, y, width, height);
+
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = 'white';
+  ctx.strokeRect(x, y, width, height);
+};

package/src/app/components/Dashboard/KlineChart/figures/square.ts

@@ -0,0 +1,21 @@
+interface FigureParams {
+  ctx: CanvasRenderingContext2D;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  color: string;
+}
+
+export const square = ({ ctx, x, y, width, height, color }: FigureParams) => {
+  const size = Math.min(width, height);
+  const half = size / 2;
+
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(x - half, y - half, size, size);
+  ctx.fillStyle = color;
+  ctx.fill();
+  ctx.closePath();
+  ctx.restore();
+};

package/src/app/components/Dashboard/KlineChart/figures/star.ts

@@ -0,0 +1,39 @@
+import { Figure } from '@tradejs/types';
+
+export const star = ({
+  ctx,
+  x: baseX,
+  y: baseY,
+  width: baseWidth,
+  height: baseHeight,
+  color,
+}: Figure) => {
+  const x = baseX - 10;
+  const y = baseY - 10;
+  const width = baseWidth + 10;
+  const height = baseHeight + 10;
+  const cx = x + width / 2;
+  const cy = y + height / 2;
+  const outerRadius = Math.min(width, height) / 2;
+  const innerRadius = outerRadius / 2.5;
+  const points = 5;
+
+  ctx.beginPath();
+  for (let i = 0; i < points * 2; i++) {
+    const angle = (Math.PI / points) * i;
+    const radius = i % 2 === 0 ? outerRadius : innerRadius;
+    const sx = cx + Math.cos(angle - Math.PI / 2) * radius;
+    const sy = cy + Math.sin(angle - Math.PI / 2) * radius;
+    if (i === 0) {
+      ctx.moveTo(sx, sy);
+    } else {
+      ctx.lineTo(sx, sy);
+    }
+  }
+  ctx.closePath();
+  ctx.fillStyle = color;
+  ctx.fill();
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = 'white';
+  ctx.stroke();
+};

package/src/app/components/Dashboard/KlineChart/figures/tradeZonePointFigure.ts

@@ -0,0 +1,44 @@
+type Coordinate = { x: number; y: number };
+
+type OverlayWithExtendData<T> = {
+  extendData?: T;
+};
+
+type CreatePointFiguresParams<T> = {
+  coordinates: Coordinate[];
+  overlay: OverlayWithExtendData<T>;
+};
+
+export type TradeZoneMode = 'TP' | 'SL';
+
+type TradeZoneExtendData = {
+  mode: TradeZoneMode;
+};
+
+export const createTradeZonePointFigure = ({
+  coordinates,
+  overlay,
+}: CreatePointFiguresParams<TradeZoneExtendData>) => {
+  const { mode } = (overlay.extendData || {
+    mode: 'TP',
+  }) as TradeZoneExtendData;
+  const color = mode === 'TP' ? 'rgba(34,197,94,0.22)' : 'rgba(239,68,68,0.22)';
+  const borderColor =
+    mode === 'TP' ? 'rgba(34,197,94,0.7)' : 'rgba(239,68,68,0.7)';
+
+  if (coordinates.length < 2) return [];
+
+  const [p1, p2] = coordinates;
+  const x = Math.min(p1.x, p2.x);
+  const y = Math.min(p1.y, p2.y);
+  const width = Math.abs(p2.x - p1.x);
+  const height = Math.abs(p2.y - p1.y);
+
+  return [
+    {
+      type: 'rect',
+      attrs: { x, y, width, height },
+      styles: { color, borderColor, size: 1 },
+    },
+  ];
+};

package/src/app/components/Dashboard/KlineChart/figures/trendLinePointFigure.ts

@@ -0,0 +1,37 @@
+import { TrendLine } from '@tradejs/types';
+
+type Coordinate = { x: number; y: number };
+
+type OverlayWithExtendData<T> = {
+  extendData?: T;
+};
+
+type CreatePointFiguresParams<T> = {
+  coordinates: Coordinate[];
+  overlay: OverlayWithExtendData<T>;
+};
+
+type TrendLineExtendData = {
+  mode: TrendLine['mode'];
+};
+
+export const createTrendLinePointFigure = ({
+  coordinates,
+  overlay,
+}: CreatePointFiguresParams<TrendLineExtendData>) => {
+  const { mode } = (overlay.extendData || {
+    mode: 'lows',
+  }) as TrendLineExtendData;
+  const figures: any[] = [];
+  const color = mode === 'lows' ? '#facc15' : '#fb923c';
+
+  if (coordinates.length === 2) {
+    figures.push({
+      type: 'line',
+      attrs: { coordinates: [coordinates[0], coordinates[1]] },
+      styles: { color, size: 2, style: 'solid' },
+    });
+  }
+
+  return figures;
+};

package/src/app/components/Dashboard/KlineChart/figures/trendLinePointsPointFigure.ts

@@ -0,0 +1,26 @@
+type Coordinate = { x: number; y: number };
+
+type CreatePointFiguresParams = {
+  coordinates: Coordinate[];
+};
+
+export const createTrendLinePointsPointFigure = ({
+  coordinates,
+}: CreatePointFiguresParams) => {
+  const figures: any[] = [];
+
+  coordinates.forEach(({ x, y }, i) => {
+    figures.push({
+      type: 'circle',
+      key: `pt_${i}`,
+      attrs: { x, y, r: 4 },
+      styles: {
+        style: 'fill',
+        color: '#ef4444',
+      },
+      ignoreEvent: true,
+    });
+  });
+
+  return figures;
+};

package/src/app/components/Dashboard/KlineChart/figures/triangle.ts

@@ -0,0 +1,23 @@
+interface FigureParams {
+  ctx: CanvasRenderingContext2D;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  color: string;
+}
+
+export const triangle = ({ ctx, x, y, width, height, color }: FigureParams) => {
+  const halfWidth = width / 2;
+  const halfHeight = height / 2;
+
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(x, y - halfHeight);
+  ctx.lineTo(x - halfWidth, y + halfHeight);
+  ctx.lineTo(x + halfWidth, y + halfHeight);
+  ctx.closePath();
+  ctx.fillStyle = color;
+  ctx.fill();
+  ctx.restore();
+};

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

@@ -0,0 +1,14 @@
+export { useAtrIndicator } from './useAtrIndicator';
+export { useBbIndicator } from './useBbIndicator';
+export { useMaIndicator } from './useMaIndicator';
+export { useEmaIndicator } from './useEmaIndicator';
+export { useWmaIndicator } from './useWmaIndicator';
+export { useVolIndicator } from './useVolIndicator';
+export { useBtcIndicator } from './useBtcIndicator';
+export { useBtcCorrelation } from './useBtcCorrelation';
+export { useSpreadIndicator } from './useSpreadIndicator';
+export { useSignal } from './useSignal';
+export { useBacktest } from './useBacktest';
+export { useSupportResistanceLines } from './useSupportResistanceLines';
+export { useResize } from './useResize';
+export { useSetup } from './useSetup';

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

@@ -0,0 +1,30 @@
+export const getCloseAtOrBefore = (
+  candles: Array<{ timestamp: number; close: number }>,
+  timestamp: number,
+) => {
+  let left = 0;
+  let right = candles.length - 1;
+  let result: number | undefined;
+
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2);
+    const candle = candles[mid];
+
+    if (candle.timestamp <= timestamp) {
+      result = candle.close;
+      left = mid + 1;
+    } else {
+      right = mid - 1;
+    }
+  }
+
+  return result;
+};
+
+export const grayDashedLineStyle = () =>
+  ({
+    color: '#9ca3af',
+    size: 1,
+    style: 'dashed',
+    dashedValue: [4, 4],
+  }) as any;

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

@@ -0,0 +1,75 @@
+import { useEffect } from 'react';
+import { registerIndicator, Chart } from 'klinecharts';
+import { ATR_PCT } from '@tradejs/indicators';
+
+export const useAtrIndicator = (
+  chart: Chart | null,
+  enabled: boolean,
+  periods: number[],
+) => {
+  useEffect(() => {
+    registerIndicator({
+      name: 'ATR_PCT',
+      shortName: 'ATR%',
+      calcParams: periods,
+
+      figures: periods.flatMap((period) => [
+        {
+          key: `ATR_SL${period}`,
+          title: `ATR% SL(${period}): `,
+          type: 'line',
+        },
+      ]),
+
+      calc: (kLineDataList) => {
+        const SMA_SHORT = 7;
+        const SMA_LONG = 50;
+
+        const seriesByPeriod = periods.map((period) => {
+          const { shortLine, longLine } = ATR_PCT(
+            kLineDataList,
+            period,
+            SMA_SHORT,
+            SMA_LONG,
+          );
+
+          return { shortLine, longLine };
+        });
+
+        return kLineDataList.reduce<Record<number, Record<string, number>>>(
+          (acc, { timestamp }, i) => {
+            const out: Record<string, number> = {};
+
+            periods.forEach((period, pIdx) => {
+              const s = seriesByPeriod[pIdx].shortLine[i];
+              const l = seriesByPeriod[pIdx].longLine[i];
+
+              if (
+                typeof s === 'number' &&
+                Number.isFinite(s) &&
+                typeof l === 'number' &&
+                Number.isFinite(l)
+              ) {
+                out[`ATR_SL${period}`] = s / l;
+              }
+            });
+
+            acc[timestamp] = out;
+            return acc;
+          },
+          {},
+        );
+      },
+    });
+  }, [periods]);
+
+  useEffect(() => {
+    if (!chart || !enabled) return;
+
+    chart.createIndicator('ATR_PCT', true, { id: 'atr_pct', minHeight: 80 });
+
+    return () => {
+      chart.removeIndicator({ id: 'atr_pct' });
+    };
+  }, [chart, enabled]);
+};