mr-azazael / lightweightcharts.blazor Goto Github PK

@using LightweightCharts.Blazor.Charts;
@using LightweightCharts.Blazor.Customization.Chart;
@using LightweightCharts.Blazor.Customization.Enums;
@using LightweightCharts.Blazor.Customization.Series;
@using LightweightCharts.Blazor.DataItems;
@using LightweightCharts.Blazor.Models.Events;
@using LightweightCharts.Blazor.Series;
@using LightweightCharts.Blazor;
@using System.Collections.Generic;
@using System.Drawing;
@using System.Linq;
@using System.Threading.Tasks;
@using Microsoft.AspNetCore.Components.Web


@rendermode Microsoft.AspNetCore.Components.Web.RenderMode.InteractiveServer

@page "/Counter"
<PageTitle>ChartComponent</PageTitle>
@log

<div style="width:1800px;height:600px;">

    <ChartComponent @ref="@ChartComponent" />
</div>


@code {

    ISeriesApi<CandlestickStyleOptions> _Candlestick;
    ISeriesApi<HistogramStyleOptions> _Histogram;
    IEnumerable<SeriesPrice> _MouseHoverPrices;
    string _LastClickedId;
    bool _InitChartComponent;

    ChartOptionsBase _Options;


    bool _Initialize;
    ChartComponent _ChartComponent;
    ChartComponent ChartComponent
    {
        set
        {
            if( _ChartComponent == value )
                return;
            log = " ChartComponent ChartComponent _Initialize true , ";
            _ChartComponent = value;
            _Initialize = true;
            StateHasChanged();
        }
    }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if( firstRender )
        {
            StateHasChanged();
        }
        if( _Initialize )
        {
            log = " OnAfterRenderAsync       , ";
            _Initialize = false;
            await InitializeChartComponent();
        }
    }

    string _BackgroundType;
    string BackgroundType
    {
        get => _BackgroundType;
        set
        {
            _BackgroundType = value;
            _Options.Layout.Background = _BackgroundType switch
            {
                "Solid" => new SolidColor(),
                _ => new VerticalGradientColor()
            };
        }
    }


    string log = "Started ";
    async Task InitializeChartComponent()
    {
        log = "InitializeChartComponent 0";
        if( _ChartComponent == null )
        {
            log = "return _ChartComponent == null";
            return;
        }


        await _ChartComponent.InitializationCompleted;
        log += "await InitializationCompleted 1";

        _ChartComponent.Clicked += OnChartClicked;
        _ChartComponent.CrosshairMoved += OnChartCrosshairMoved;

        await _ChartComponent.ApplyOptions(new ChartOptionsBase
            {
                Crosshair = new CrosshairOptions
                {
                    Mode = CrosshairMode.Normal
                },
                LeftPriceScale = new PriceScaleOptions
                {
                    Visible = false
                },
                RightPriceScale = new PriceScaleOptions
                {
                    ScaleMargins = new LightweightCharts.Blazor.Customization.PriceScaleMargins
                    {
                        Bottom = 0.1d,
                        Top = 0
                    }
                },
                OverlayPriceScale = new BasePriceScaleOptions
                {
                    ScaleMargins = new LightweightCharts.Blazor.Customization.PriceScaleMargins
                    {
                        Bottom = 0,
                        Top = 0.9d
                    }
                }
            });
        log += " , ApplyOptions end";
        _Options = await _ChartComponent.Options();
        BackgroundType = "Solid";
        StateHasChanged();

        await SetupCandlestickSeries();


        var timeScale = await _ChartComponent.TimeScaleAsync();
        await timeScale.FitContent();

        log += "FitContent end";
        StateHasChanged();
    }
    List<CandlestickData> graphCandleData = new();
    async Task SetupCandlestickSeries()
    {

        var random = new Random();
        int c = 0;
        DateTime StartTime = DateTime.Now.AddDays(-12);
        for( int i = 1; i <= 120; i++ )
        {
            CandlestickData a = new CandlestickData();
            a.Open = random.Next(1, 5) * random.Next(5, 15);
            a.Close = random.Next(1, 5) * random.Next(5, 15);
            a.High = random.Next(1, 5) * random.Next(5, 15);
            a.Low = random.Next(1, 5) * random.Next(5, 15);
            a.Time = StartTime.AddHours(i);
            c++;
            if( c > 24 )
            {
                StartTime = StartTime.AddDays(2);
                c = 0;
            }

            graphCandleData.Add(a);
        }

        _Candlestick = await _ChartComponent.AddCandlestickSeriesAsync();

        await _Candlestick.SetData(graphCandleData);
    }


    void OnChartCrosshairMoved(object sender, MouseEventParams e)
    {
        _MouseHoverPrices = e.SeriesPrices;
        StateHasChanged();
    }

    async void OnChartClicked(object sender, MouseEventParams e)
    {
    }

    async Task OnApplyOptions()
    {
        await _ChartComponent.ApplyOptions(_Options);
    }

}

    await chart.ApplyOptions(new LightweightCharts.Blazor.Customization.Chart.ChartOptions
		{
			LeftPriceScale = new LightweightCharts.Blazor.Customization.Chart.PriceScaleOptions
			{
				Visible = false
			},
			RightPriceScale = new LightweightCharts.Blazor.Customization.Chart.PriceScaleOptions
			{
				ScaleMargins = new LightweightCharts.Blazor.Customization.PriceScaleMargins
				{
					Bottom = 0.1d,
					Top = 0
				}
			},
			OverlayPriceScale = new LightweightCharts.Blazor.Customization.Chart.BasePriceScaleOptions
			{
				ScaleMargins = new LightweightCharts.Blazor.Customization.PriceScaleMargins
				{
					Bottom = 0,
					Top = 0.9d
				}
			},
			Layout = new LightweightCharts.Blazor.Customization.Chart.LayoutOptions
			{
				Background = new LightweightCharts.Blazor.Customization.Chart.SolidColor { Color = Color.RoyalBlue },
				TextColor = Color.Red,
				FontSize = 14
			}
		});

	await SetupCandlestickSeries(chart);
	await SetupHistogramSeries(chart);

	var timeScale = await chart.TimeScaleAsync();
	await timeScale.FitContent();
	initialLoad = false;
}

Microsoft.JSInterop.JSException
  HResult=0x80131500
  Message=There are multiple .NET runtimes present, so a default dispatcher could not be resolved. Use DotNetObject to invoke .NET instance methods.
Error: There are multiple .NET runtimes present, so a default dispatcher could not be resolved. Use DotNetObject to invoke .NET instance methods.
    at v (https://localhost:44307/_framework/blazor.web.js:1:2037)
    at e.invokeMethodAsync (https://localhost:44307/_framework/blazor.web.js:1:2428)
    at Object.lightweightChartsInvoke (https://localhost:44307/_content/LightweightCharts.Blazor/lightweight-charts.scripts.js:19:45)
    at https://localhost:44307/_framework/blazor.web.js:1:3244
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (https://localhost:44307/_framework/blazor.web.js:1:3201)
    at fn._invokeClientMethod (https://localhost:44307/_framework/blazor.web.js:1:62541)
    at fn._processIncomingData (https://localhost:44307/_framework/blazor.web.js:1:60016)
    at connection.onreceive (https://localhost:44307/_framework/blazor.web.js:1:53657)
    at i.onmessage (https://localhost:44307/_framework/blazor.web.js:1:81802)
  Source=System.Private.CoreLib
  StackTrace:
   at System.Threading.Tasks.ValueTask`1.get_Result()
   at System.Runtime.CompilerServices.ValueTaskAwaiter`1.GetResult()
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1.MoveNext()
   at System.Threading.Tasks.ValueTask`1.get_Result()
   at System.Runtime.CompilerServices.ValueTaskAwaiter`1.GetResult()
   at LightweightCharts.Blazor.Charts.ChartComponent.<JavascriptInvokeAsync>d__53`1.MoveNext() in C:\Projects\GSL.CryptoHunter\LightweightCharts.Blazor\Charts\ChartComponent.cs:line 436
   at LightweightCharts.Blazor.Charts.ChartComponent.<Options>d__38.MoveNext() in C:\Projects\GSL.CryptoHunter\LightweightCharts.Blazor\Charts\ChartComponent.cs:line 287
   at BlazorApp1.Components.Pages.CandlestickSeries.<InitializeChartComponent>d__13.MoveNext() in C:\Projects\GSL.CryptoHunter\BlazorApp1\BlazorApp1\Components\Pages\CandlestickSeries.razor.cs:line 96

var XAxis = new NumericAxis()
    {
        Id = $"X{i}",
        MaxAutoTicks = 5,
        DrawMajorGridLines = false,
        GrowBy = new SciChartNumberRange(0, 0.2),
        VisibleRange = new SciChartNumberRange(-1000.0, 1000.0),
        VisibleRangeLimit = new SciChartNumberRange(-1000.0, 1000.0),
        IsVisible = (i == 0)
    };
await _chartBuilder.AddAxis(XAxis, AxisType.X);