Export charts from local lean engine to trading view lightweight charts

I tried to post git hub link but it isnt working ‘lightweight-charts-QuantConnect’ my username is BurnOutTrader

using System;
using QuantConnect.Statistics;
using System.IO;
using System.Linq;
using System.Collections.Generic;
using CsvHelper;
using System.Globalization;
using QuantConnect;
using static CustomQCAddon.CommonRunTime;
using Newtonsoft.Json;
using QuantConnect.Data.Market;

namespace CustomQCAddon
{
    public class Trade
    {
        public string Symbol { get; set; }
        public long EntryTime { get; set; }
        public long ExitTime { get; set; }
        public decimal EntryPrice { get; set; }
        public decimal ExitPrice { get; set; }
        public string Side { get; set; }
    }

    public class Bar
    {
        public long Time { get; set; }
        public decimal Open { get; set; }
        public decimal High { get; set; }
        public decimal Low { get; set; }
        public decimal Close { get; set; }
    }

    public static class TradesExport
    {
        public static void ExportAllCharts()
        {
            var trades = algorithm.TradeBuilder.ClosedTrades.Select(t => new Trade
            {
                Symbol = t.Symbol,
                EntryTime = new DateTimeOffset(t.EntryTime.ToUniversalTime()).ToUnixTimeSeconds(),
                ExitTime = new DateTimeOffset(t.ExitTime.ToUniversalTime()).ToUnixTimeSeconds(),
                EntryPrice = t.EntryPrice,
                ExitPrice = t.ExitPrice,
                Side = t.Direction.ToString().ToLower(),

            }).ToList();

            // Group trades by Symbol
            var tradesBySymbol = trades.GroupBy(t => t.Symbol);

            var path = Path.Combine("/Applications", "Algo Trading", "Trades");

            // Format the DateTime to avoid invalid characters in filename
            string date = DateTime.Now.ToString("yyyyMMdd_HHmmss");

            foreach (var group in tradesBySymbol)
            {
                // Get the first and last trade times for each group (symbol)
                DateTime firstTradeTime = DateTimeOffset.FromUnixTimeSeconds(group.Min(t => t.EntryTime)).DateTime.Date.AddDays(-2);
                DateTime lastTradeTime = DateTimeOffset.FromUnixTimeSeconds(group.Max(t => t.ExitTime)).DateTime.Date.AddDays(2);

                // Request history for the period from 20 days before the first trade to 20 days after the last trade
                var quoteBars = algorithm.History<QuoteBar>(group.Key, firstTradeTime, lastTradeTime, Resolution.Hour);

                // Convert QuoteBars to Bars
                // Convert QuoteBars to Bars
                var history = quoteBars.Select(q => new Bar
                {
                    Time = new DateTimeOffset(q.Time.ToUniversalTime()).ToUnixTimeSeconds(),  // Removed ToString() here
                    Open = q.Open,
                    High = q.High,
                    Low = q.Low,
                    Close = q.Close
                }).ToList();


                // Create a directory for each symbol
                var symbolPath = Path.Combine(path, $"{algorithm.Name} {date}", $"{group.Key}");

                if (!Directory.Exists(symbolPath))
                {
                    Directory.CreateDirectory(symbolPath);
                }

                // Create a file name for each symbol
                var tradeFile = Path.Combine(symbolPath, $"Trades_{date}.json");
                var historyFile = Path.Combine(symbolPath, $"History_{date}.json");

                string mainHtmlPath = $@"/Applications/Algo Trading/Trades/main.html"; // Path to your main.html file
                string newHtmlPath = Path.Combine(symbolPath, $"main_{date}.html");

                // Copy the file
                File.Copy(mainHtmlPath, newHtmlPath, true);  // 'true' allows the overwriting of an existing file

                // Serialize lists to JSON
                string tradesJson = JsonConvert.SerializeObject(group.ToList(), Formatting.Indented);
                string historyJson = JsonConvert.SerializeObject(history, Formatting.Indented);

                // Write JSON string to files
                File.WriteAllText(tradeFile, tradesJson);
                File.WriteAllText(historyFile, historyJson);

                try
                {
                    // Read HTML template into a string
                    var html = File.ReadAllText(mainHtmlPath);

                    // Replace the placeholders with your JSON data
                    html = html.Replace("{TRADE_DATA}", tradesJson);
                    html = html.Replace("{CANDLESTICK_DATA}", historyJson);

                    // Write the new HTML to a new file
                    File.WriteAllText(newHtmlPath, html);
                }
                catch (Exception e)
                {
                    Console.WriteLine($"Exception caught trying to write HTML files: {e.Message}");
                }
            }
        }
    }
}

public override void OnEndOfAlgorithm()
{

            TradesExport.ExportAllCharts();
            base.OnEndOfAlgorithm();
}
        
public static QCAlgorithm algorithm
        
Initialise()
{
	algorithm = this;
}
        

<!DOCTYPE html>
<!-- Please visit https://tradingview.github.io/lightweight-charts/tutorials/customization for more information on this tutorial. -->
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />
    <title>Lightweight Charts Customization Tutorial</title>
    <!-- Adding Google Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
    <!-- Adding the standalone version of Lightweight charts -->
    <script type="text/javascript"
        src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
</head>

<style>
    body {
        padding: 0;
        margin: 0;
        /* Add a background color to match the chart */
        background-color: #222;
    }
</style>
<div id="container" style="position: absolute; width: 100%; height: 100%"></div>

<div id="candlestick-data">{CANDLESTICK_DATA}</div>
<div id="trade-data">{TRADE_DATA}</div>
<script type="text/javascript">

    const chart = LightweightCharts.createChart(
        document.getElementById('container'),
        {
            layout: {
                background: { color: '#222' },
                textColor: '#DDD',
            },
            grid: {
                vertLines: { color: '#444' },
                horzLines: { color: '#444' },
            },
        }
    );

    // Import the data from the placeholders
    let CANDLESTICK_DATA;
    try {
        CANDLESTICK_DATA = JSON.parse(document.getElementById('candlestick-data').textContent);
    } catch (e) {
        console.error("Parsing error: ", e);
    }

    // Import the data from the placeholders
    let TRADE_DATA;
    try {
        TRADE_DATA = JSON.parse(document.getElementById('trade-data').textContent);
    } catch (e) {
        console.error("Parsing error: ", e);
    }

    // Parse the candlestick data
    function parseCandlestickData(data) {
        return data.map(function (bar) {
            return {
                time: bar.Time,
                open: bar.Open,
                high: bar.High,
                low: bar.Low,
                close: bar.Close,
            };
        });
    }

    // Parse the candlestick data
    function parseTradeData(data) {
        return data.map(function (trade) {
            return {
                entryTime: trade.EntryTime,
                exitTime: trade.ExitTime,
                entryPrice: trade.EntryPrice,
                exitPrice: trade.ExitPrice,
                side: trade.Side,
            };
        });
    }


    // Generate the candlestick data
    const candlestickData = parseCandlestickData(CANDLESTICK_DATA);
    const tradeData = parseTradeData(TRADE_DATA);

    // Start with an empty array of markers

    var count = 0;
    var markers = [];
    function generateMarkers(tradeData) {
        tradeData.forEach((trade) => {
            // Increment the count to track trade number
            count++;

            // Add entry marker
            if (trade.side === 'long' || trade.side === 'short') {
                markers.push({
                    time: trade.entryTime,
                    position: trade.side === 'long' ? 'belowBar' : 'aboveBar',
                    color: trade.side === 'long' ? '#008000' : '#FF0000',  // green for buys and red for sells
                    shape: trade.side === 'long' ? 'arrowUp' : 'arrowDown',
                    text: `#${count} Entry ${trade.side} @ ${trade.entryPrice}`
                });
            }

            // Add exit marker
            markers.push({
                time: trade.exitTime,
                position: trade.side === 'long' ? 'aboveBar' : 'belowBar',
                color: trade.side === 'long' ? '#FF0000' : '#008000',  // green for buys and red for sells
                shape: trade.side === 'long' ? 'arrowDown' : 'arrowUp',
                text: `#${count} Exit ${trade.side} @ ${trade.exitPrice}`
            });
        });

        return markers;
    }

    markers = generateMarkers(tradeData);

    window.addEventListener('resize', () => {
        chart.resize(window.innerWidth, window.innerHeight);
    });

    // Setting the border color for the vertical axis
    chart.priceScale().applyOptions({
        borderColor: '#71649C',
    });

    // Setting the border color for the horizontal axis
    chart.timeScale().applyOptions({
        borderColor: '#71649C',
    })

    // Customizing the Crosshair
    chart.applyOptions({
        crosshair: {
            // Change mode from default 'magnet' to 'normal'.
            mode: LightweightCharts.CrosshairMode.Normal,

            // Vertical crosshair line (showing Date in Label)
            vertLine: {
                width: 8,
                color: '#C3BCDB44',
                style: LightweightCharts.LineStyle.Solid,
                labelBackgroundColor: '#9B7DFF',
            },

            // Horizontal crosshair line (showing Price in Label)
            horzLine: {
                color: '#9B7DFF',
                labelBackgroundColor: '#9B7DFF',
            },
        },
    });
    // Create the Main Series (Candlesticks)
    const mainSeries = chart.addCandlestickSeries();

    // Set the data for the Main Series
    mainSeries.setData(candlestickData);

    // Finally, set the markers to the series
    mainSeries.setMarkers(markers);

    chart.fitContent();
</script>
</body>

</html>