Change Geom in client side Blazor

[Bellt-GCA]

Hi, I was testing your component but was not able to change the geom type depending on what type of chart the user has selected. When I refresh the page (F5) the the data is shown correctly. This is the code I use for selecting the geom:

    switch (ChartType)
    {
        case 1:
            reportData = Plot.New(reportSource, x: pX, o => o.Value)
                .Geom_Bar(position: PositionAdjustment.Dodge)
                .Scale_X_Discrete(expand: (0.0, 0.1, 0, 0.1), formatter: labeller)
                .Scale_Fill_Discrete(o => o.Id, Colors.Brewer.YlGnBu[4], direction: -1)
                .YLab("y label%")
                .XLab("Parameters")
                .Title("Test report")
                .Theme(dark: false);
            break;
        default:
            reportData = Plot.New(reportSource, x: pX, o => o.Value)
                .Geom_Bar(position: PositionAdjustment.Stack)
                .Scale_X_Discrete(expand: (0.0, 0.1, 0, 0.1), formatter: labeller)
                .Scale_Fill_Discrete(o => o.Id, Colors.Brewer.YlGnBu[4], direction: -1)
                .YLab("y label%")
                .XLab("Parameters")
                .Title("Test report")
                .Theme(dark: false);
            break;
    }

[Bellt-GCA]

Also every time I call this code, the data in the chart seems to be added...

[pablofrommars]

Hi,

Can you please advise on the version your are using?

I will have a look at it ASAP.

Thanks for reporting.

[Bellt-GCA]

Hi Pablo, thanks for the quick reply, I used the latest version 1.3.9 Regards, Jan

[pablofrommars]

Here are a couple of options.

Solution1:

Setting a key in the Plot tag forces Blazor to create a new component everytime a new reportData is created.

@page "/solution1"

@using GGNet
@using GGNet.Components

<button type="button" class="btn btn-primary" @onclick=SwapChartType>Swap Chart Type</button>

<div class="border rounded-lg m-5 p-1" style="width: 720px;">
    <Plot Data=@reportData T="(double, double, int)" TX=Double TY=Double @key=@reportData/>
</div>

@code {

    Source<(double x, double y, int id)> reportSource;
    Data<(double x, double y, int id), double, double> reportData;

    protected override void OnInitialized()
    {
        reportSource = new Source<(double x, double y, int id)>(new[]
        {
            (x: 1.0, y:1.0, id: 1),
            (x: 1.0, y:1.0, id: 2),
            (x: 2.0, y:0.5, id: 1),
            (x: 2.0, y:1.2, id: 2)
        });

        SwapChartType();
    }

    private int ChartType = 2;

    private void SwapChartType()
    {
        if (ChartType == 2)
        {
            ChartType = 1;
        }
        else
        {
            ChartType = 2;
        }

        switch (ChartType)
        {
            case 1:
                reportData = Plot.New(reportSource, o => o.x, o => o.y)
                    .Geom_Bar(position: PositionAdjustment.Dodge)
                    .Scale_Fill_Discrete(o => o.id, Colors.Brewer.YlGnBu[4], direction: -1)
                    .YLab("y label%")
                    .XLab("Parameters")
                    .Title("Test report")
                    .Theme(dark: false);
                break;

            default:
                reportData = Plot.New(reportSource, o => o.x, o => o.y)
                    .Geom_Bar(position: PositionAdjustment.Stack)
                    .Scale_Fill_Discrete(o => o.id, Colors.Brewer.YlGnBu[4], direction: -1)
                    .YLab("y label%")
                    .XLab("Parameters")
                    .Title("Test report")
                    .Theme(dark: false);
                break;
        }
    }
}

Solution2:

Create all chart types in advance and use some CSS dark magic to selectively choose the desired chart to be displayed.

@page "/solution2"

@using GGNet
@using GGNet.Components

<button type="button" class="btn btn-primary" @onclick=SwapChartType>Swap Chart Type</button>

<div class="border rounded-lg m-5 p-1" style="display: @(ChartType == 1 ? "block" : "none");width: 720px;">
    <Plot Data=@reportData1 T="(double, double, int)" TX=Double TY=Double />
</div>

<div class="border rounded-lg m-5 p-1" style="display: @(ChartType != 1 ? "block" : "none");width: 720px;">
    <Plot Data=@reportData2 T="(double, double, int)" TX=Double TY=Double />
</div>

@code {

    Source<(double x, double y, int id)> reportSource;
    Data<(double x, double y, int id), double, double> reportData1;
    Data<(double x, double y, int id), double, double> reportData2;

    protected override void OnInitialized()
    {
        reportSource = new Source<(double x, double y, int id)>(new[]
        {
            (x: 1.0, y:1.0, id: 1),
            (x: 1.0, y:1.0, id: 2),
            (x: 2.0, y:0.5, id: 1),
            (x: 2.0, y:1.2, id: 2)
        });

        reportData1 = Plot.New(reportSource, o => o.x, o => o.y)
            .Geom_Bar(position: PositionAdjustment.Dodge)
            .Scale_Fill_Discrete(o => o.id, Colors.Brewer.YlGnBu[4], direction: -1)
            .YLab("y label%")
            .XLab("Parameters")
            .Title("Test report")
            .Theme(dark: false);

        reportData2 = Plot.New(reportSource, o => o.x, o => o.y)
            .Geom_Bar(position: PositionAdjustment.Stack)
            .Scale_Fill_Discrete(o => o.id, Colors.Brewer.YlGnBu[4], direction: -1)
            .YLab("y label%")
            .XLab("Parameters")
            .Title("Test report")
            .Theme(dark: false);
    }

    private int ChartType = 1;

    private void SwapChartType()
    {
        if (ChartType == 2)
        {
            ChartType = 1;
        }
        else
        {
            ChartType = 2;
        }
    }
}

Solution3:

Requires work on my end as I haven't really planned for your use case.

TODO: Add a Data.ClearGeoms function and let RenderPolicy.Auto take care of the updates.

Let me know!

[Bellt-GCA]

Wauw thanks for the quick reply!! Solution 1 works form me, so for now I am good (building a prototype of an application) in the long run I must look into it in more detail...