Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Component Render Error #416

Open
LiamDGuru opened this issue Mar 21, 2024 · 1 comment
Open

Component Render Error #416

LiamDGuru opened this issue Mar 21, 2024 · 1 comment

Comments

@LiamDGuru
Copy link

On initially rendering the chart everything is laid out perfectly works as expected. Upon leaving the page with the PlotlyChart and reentering, the Plotly component gets broken down and spread across the page. I'm not able to find a difference in the HTML but there are differences in the Computed values.

Below is the Code:

@rendermode InteractiveServer
@page "/scatter-plot-server"
@using Plotly.Blazor.Traces.ScatterGlLib
@using Plotly.Blazor.LayoutLib
@using Plotly.Blazor.LayoutLib.YAxisLib
@using System.Diagnostics
@using Title = Plotly.Blazor.LayoutLib.Title
<h3>Scatter Plot Server</h3>

<MudContainer>
    <PlotlyChart @rendermode="InteractiveServer" style="width: 70vw" @bind-Config="_config" @bind-Layout="_layout" @bind-Data="_data" @ref="_chart" AfterRender="AddData" />
</MudContainer>
<MudContainer>
    <MudButton @onclick="()=>AddData(100000)" Variant="Variant.Filled" Color="Color.Primary">Add Data</MudButton>
    <MudButton @onclick="()=>AddData(100000)" Variant="Variant.Filled" Color="Color.Primary">Live Data</MudButton>
</MudContainer>

@code {
    [CascadingParameter] private MudTheme Theme { get; set; } = new MudTheme();
    PlotlyChart _chart = new PlotlyChart();
    Config _config = new Config();
    Layout _layout = new Layout();
    IList<ITrace> _data = new List<ITrace>
    {
        new Plotly.Blazor.Traces.ScatterGl()
        {
            Name = "ScatterTrace",
            Mode = ModeFlag.Lines | ModeFlag.Markers,
            X = new List<object>{1,2,3},
            Y = new List<object>{1,2,3}
        },
        new Plotly.Blazor.Traces.ScatterGl()
        {
            Name = "ScatterTrace2",
            Mode = ModeFlag.Lines | ModeFlag.Markers,
            X = new List<object>{5,6,7},
            Y = new List<object>{5,6,7}
        }
    };
    protected override void OnInitialized()
    {
        _config = new Config
        {
            Responsive = true
        };
        _layout = new Layout
        {
            Title = new Title
            {
                Text = GetType().Name
            },
            PaperBgColor = Theme.PaletteDark.Surface.ToString(),
            PlotBgColor = Theme.PaletteDark.Surface.ToString(),
            Font = new Font
            {
                Color = Theme.PaletteDark.TextPrimary.ToString()
            },
            YAxis = new List<YAxis>
            {
                new()
                {
                    Title = new Plotly.Blazor.LayoutLib.YAxisLib.Title
                    {
                        Text = "ScatterTrace"
                    }
                },
                new()
                {
                    Title = new Plotly.Blazor.LayoutLib.YAxisLib.Title
                    {
                        Text = "ScatterTrace2"
                    },
                }
            }
        };
        _data = new List<ITrace>
        {
            new ScatterGl()
            {
                Name = "ScatterTrace",
                Mode = ModeFlag.Lines | ModeFlag.Markers,
                X = new List<object> { 1, 2, 3 },
                Y = new List<object> { 1, 2, 3 }
            },
            new ScatterGl()
            {
                Name = "ScatterTrace2",
                Mode = ModeFlag.Lines | ModeFlag.Markers,
                X = new List<object> { 5, 6, 7 },
                Y = new List<object> { 5, 6, 7 }
            }
        };
        base.OnInitialized();
    }

    private async void AddData()
    {
        await AddData(1000);
    }

    private async Task AddData(int count = 100)
    {
        if (_chart.Data.FirstOrDefault() is Plotly.Blazor.Traces.ScatterGl scatter)
        {
            var (x, y) = Helper.GenerateData(scatter.X.Count + 1, scatter.X.Count + 1 + count);
            await _chart.ExtendTrace(x, y, _data.IndexOf(scatter));
        }

        if (_chart.Data.Skip(1).FirstOrDefault() is Plotly.Blazor.Traces.ScatterGl scatter2)
        {
            var (x, y) = Helper.GenerateData(scatter2.X.Count + 1, scatter2.X.Count + 1 + count);
            await _chart.ExtendTrace(x, y, _data.IndexOf(scatter2));
        }
    }

image
image
image
image

@LiamDGuru
Copy link
Author

Hitting F5 from the page rerenders back to working correctly. But after initial rendering, leaving the page and coming back has it broken.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant