Example of 3D Charts about plotly.blazor HOT 6 CLOSED

@using Plotly.Blazor
@using PBT = Plotly.Blazor.Traces
@using PBL = Plotly.Blazor.LayoutLib

@inject yourdatabase db;

<PlotlyChart style="height: 60vh; min-height: 150px" @bind-Config="config" @bind-Layout="layout" @bind-Data="data" @ref="chart" />

@code
{

    Plotly.Blazor.PlotlyChart chart;

    Plotly.Blazor.Config config = new Plotly.Blazor.Config
    {
        Responsive = true//,
                         //DisplayModeBar = Plotly.Blazor.ConfigLib.DisplayModeBarEnum.False
    };

    Plotly.Blazor.Layout layout = new Plotly.Blazor.Layout
    {
        Title = new PBL.Title
        {
            Text = "Surface",
            Font = new PBL.TitleLib.Font
            {
                Color = "#AAA"
            }
        },
        Legend = new PBL.Legend
        {
            Font = new PBL.LegendLib.Font
            {
                Color = "#AAA"
            }
        },
        XAxis = new List<PBL.XAxis>
       {
            new PBL.XAxis
            {
                Title = new PBL.XAxisLib.Title
                {
                    Text = "Position (m)",
                    Font = new PBL.XAxisLib.TitleLib.Font
                    {
                        Color = "#AAA"
                    }
                }
            }
        },
        YAxis = new List<PBL.YAxis>
       {
            new PBL.YAxis
            {
                Title = new PBL.YAxisLib.Title
                {
                    Text = "Time",
                    Font = new PBL.YAxisLib.TitleLib.Font
                    {
                        Color = "#AAA"
                    }
                }
            }
        },

        Scene = new List<PBL.Scene>
        {
            new PBL.Scene{
                XAxis = new PBL.SceneLib.XAxis
                {
                    Title = new PBL.SceneLib.XAxisLib.Title
                    {
                        Text = "Position (m)",
                        Font = new PBL.SceneLib.XAxisLib.TitleLib.Font
                        {
                            Color = "#AAA"
                        }
                    }
                },
                YAxis = new PBL.SceneLib.YAxis
                {
                    Title = new PBL.SceneLib.YAxisLib.Title
                    {
                        Text = "Time",
                        Font = new PBL.SceneLib.YAxisLib.TitleLib.Font
                        {
                            Color = "#AAA"
                        }
                    }
                },
                ZAxis = new PBL.SceneLib.ZAxis
                {
                    Title = new PBL.SceneLib.ZAxisLib.Title
                    {
                        Text = "Angle (º)",
                        Font = new PBL.SceneLib.ZAxisLib.TitleLib.Font
                        {
                            Color = "#AAA"
                        }
                    }
                },
                Camera = new PBL.SceneLib.Camera
                {
                    Eye = new PBL.SceneLib.CameraLib.Eye
                    {
                        X = 2.5m,Y = 2m, Z = 0.5m
                    },
                    Up = new PBL.SceneLib.CameraLib.Up
                    {
                        X = 0m, Y = 0m, Z = 1m
                    },
                    Center = new PBL.SceneLib.CameraLib.Center
                    {
                        X = 0m, Y = 0m, Z = -0.3m
                    }
                },
                AspectMode = PBL.SceneLib.AspectModeEnum.Manual,
                AspectRatio = new PBL.SceneLib.AspectRatio
                {
                    X = 2m, Y = 3m, Z = 1m
                }
            }
        },

        PaperBgColor = "#262626",
        PlotBgColor = "#262626",
    };

    IList<ITrace> data = new List<ITrace>
    {
        new PBT.Surface
        {
            Name = "SurfaceTrace",

            X = new List<object>(),
            Y = new List<object>(),
            Z = new List<object>(),
            ColorBar = new PBT.SurfaceLib.ColorBar()
            {
                OutlineColor = "#AAA",
                BorderColor = "#AAA",
                TickColor = "#AAA",
                TickFont = new PBT.SurfaceLib.ColorBarLib.TickFont
                {
                    Color = "#AAA"
                }
            }
        }
    };

    List<object> xVals;

    private async Task SetData()
    {
        var angles = await db.GetAngles();
        var h = data[0] as PBT.Surface;
        int maxIdx = 0;

        if (angles == null || angles.Count() < 1)
            return;

        List<object> z = new List<object>();

        foreach (var item in angles)
        {
            h.Y.Add(item.Id); // row in database or datetime for time axis
            maxIdx = Math.Max(maxIdx, item.Pitch.Length); // this should not change or explosion
            z.Add(item.Roll);  // Roll is a float[] of same length as x axis item array
        }

        h.Z = z;

        if (xVals == null)
        {
            xVals = new List<object>(maxIdx);
            for (int i = 0; i < maxIdx; i++)
            {
                xVals.Add(i);
            }
        }

        h.X = xVals;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            try
            {
                await SetData();
                await chart.NewPlot();
            }
            catch (Exception e)
            {

            }
        }
    }
}