Charts

import {
  ColorType,
  createChart as createLightWeightChart,
  CrosshairMode,
  ISeriesApi,
  LineStyle,
  UTCTimestamp,
} from "lightweight-charts";

export class ChartManager {
  private candleSeries: ISeriesApi<"Candlestick">;
  private lastUpdateTime: number = 0;
  private chart: any;

  constructor(
    ref: any,
    initialData: any[],
    layout: { background: string; color: string }
  ) {
    const chart = createLightWeightChart(ref, {
      autoSize: true,
      overlayPriceScales: {
        ticksVisible: true,
        borderVisible: true,
      },
      crosshair: {
        mode: CrosshairMode.Normal,
        vertLine: {
          color: "#707070",
          width: 1,
          style: LineStyle.LargeDashed,
        },
        horzLine: {
          color: "#707070",
          width: 1,
          style: LineStyle.LargeDashed,
        },
      },
      rightPriceScale: {
        visible: true,
        ticksVisible: true,
        entireTextOnly: true,
        borderVisible: true,
        borderColor: "#555",
        textColor: "#fff",
      },
      grid: {
        horzLines: { visible: true, color: "#262626" },
        vertLines: { visible: true, color: "#262626" },
      },
      layout: {
        background: { type: ColorType.Solid, color: layout.background },
        textColor: "white",
      },
      timeScale: { borderColor: "#555" },
    });

    // Create candlestick series
    const candleSeries = chart.addCandlestickSeries({
      upColor: "#34cb88",      // Green for bullish
      downColor: "#ff615c",    // Red for bearish
      borderVisible: false,
      wickUpColor: "#5dd5a0",
      wickDownColor: "#ff887f",
    });

    this.chart = chart;
    this.candleSeries = candleSeries;

    // Set initial data
    this.candleSeries.setData(
      initialData.map((data) => ({
        ...data,
        time: (data.timestamp / 1000) as UTCTimestamp,
      }))
    );
  }

  public update(updatedPrice: any) {
    if (!this.lastUpdateTime) {
      this.lastUpdateTime = new Date().getTime();
    }

    this.candleSeries.update({
      time: (this.lastUpdateTime / 1000) as UTCTimestamp,
      close: updatedPrice.close,
      low: updatedPrice.low,
      high: updatedPrice.high,
      open: updatedPrice.open,
    });

    if (updatedPrice.newCandleInitiated) {
      this.lastUpdateTime = updatedPrice.time;
    }
  }

  public destroy() {
    this.chart.remove();
  }
}

import { useCallback, useEffect, useRef, useState } from "react";
import { ChartManager } from "../../utils/chart_manager";
import { getKlines } from "../../utils/requests";

export const TradeView = ({ market }: { market: string }) => {
  const chartRef = useRef<HTMLDivElement>(null);
  const chartManagerRef = useRef<ChartManager | null>(null);
  const [selectedTime, setSelectedTime] = useState("1m");

  const fetchKlineData = useCallback(async (interval: string) => {
    const klineData = await getKlines(
      market,
      interval,
      Math.floor((new Date().getTime() - 1000 * 60 * 60 * 24 * 7) / 1000)
    );

    if (chartRef.current && klineData.length > 0) {
      // Destroy existing chart
      if (chartManagerRef.current) {
        chartManagerRef.current.destroy();
      }

      // Clean and sort data
      const cleanedKlineData = klineData
        .map((x) => ({
          close: parseFloat(x.close),
          high: parseFloat(x.high),
          low: parseFloat(x.low),
          open: parseFloat(x.open),
          timestamp: new Date(x.end),
        }))
        .sort((x, y) => (x.timestamp > y.timestamp ? 1 : -1));

      // Initialize new chart
      const chartManager = new ChartManager(
        chartRef.current,
        cleanedKlineData,
        { background: "#121212", color: "white" }
      );

      chartManagerRef.current = chartManager;
    }
  }, [market]);

  useEffect(() => {
    fetchKlineData(selectedTime);

    // Cleanup on unmount
    return () => {
      if (chartManagerRef.current) {
        chartManagerRef.current.destroy();
        chartManagerRef.current = null;
      }
    };
  }, [fetchKlineData, selectedTime]);

  return <div ref={chartRef} className="w-full h-full"></div>;
};