how to change Apexchart pie chart after select event?

63 views Asked by At

I am using vaadin 24.3.3 with springboot 3.2.1, and I am using Apexchart.js add-ons 24.0.0, my series and labels are changed based on selection filter by, when select first choice, the labels and series will be something, when select the second choice the labels and series will be something else. The problem is whatever choice I select after construct the chart, it is not changed! this is my code

PieChart.java

import com.github.appreciated.apexcharts.ApexChartsBuilder;
import com.github.appreciated.apexcharts.config.builder.ChartBuilder;
import com.github.appreciated.apexcharts.config.builder.LegendBuilder;
import com.github.appreciated.apexcharts.config.builder.ResponsiveBuilder;
import com.github.appreciated.apexcharts.config.chart.Type;
import com.github.appreciated.apexcharts.config.legend.Position;
import com.github.appreciated.apexcharts.config.responsive.builder.OptionsBuilder;

public class PieChart extends ApexChartsBuilder {

    private ApexChartsBuilder apexChartsBuilder;
    String[] colors = {"#a7be54","#4a9342", "#be7e54"};
    private double[] series;

    public PieChart(){
        apexChartsBuilder = new ApexChartsBuilder();
    }

    public void init() {

        apexChartsBuilder = withChart(ChartBuilder.get().withType(Type.PIE).build())
                .withLegend(LegendBuilder.get()
                        .withPosition(Position.BOTTOM)
                        .build())
                .withColors(colors)
                .withResponsive(ResponsiveBuilder.get()
                        .withOptions(OptionsBuilder.get()
                                .withLegend(LegendBuilder.get().withPosition(Position.BOTTOM).build())
                                .build())
                        .build());
    }



    public ApexChartsBuilder getApexChartsBuilder() {
        return apexChartsBuilder;
    }

    public void setApexChartsBuilder(ApexChartsBuilder apexChartsBuilder) {
        this.apexChartsBuilder = apexChartsBuilder;
    }
}

DashboardView.java

public class DashboardView extends VerticalLayout {

    private final LogService logService;

    private PieChart pieChart;
    private VerticalLayout chartContainer = new VerticalLayout();
    private Select<String> filterBySelection = new Select<>();

    private static final String FILTER_BY_STATUS_CODE = "Status Code";
    private static final String FILTER_BY_DECISIONS = "Decisions";


    public DashboardView(LogService logService) {
        this.logService = logService;
        setSizeFull();
        initChart();
        filterByStatusCode();
        chartContainer.add(pieChart.build());
        chartContainer.setHeight("25%");
        chartContainer.setWidth("50%");
        getStyle().set("overflow", "auto");
        setSizeUndefined();
        prepareSelection();
        add(chartContainer,filterBySelection);
    }

    private void initChart(){
        pieChart = new PieChart();
        pieChart.init();
        pieChart.build().setHeight("25%");
    }


    public void filterByStatusCode(){
        pieChart.withLabels(String.valueOf(HttpStatus.BAD_REQUEST.value()), String.valueOf(HttpStatus.OK.value()));
        pieChart.withSeries(logService.numberOfBadRequestLog(), logService.numberOfSuccessfulRequestLog());
    }




    public void filterByDecisions(){
        pieChart = new PieChart();
        pieChart.init();
        pieChart.withLabels("rewrite", "continue", "stop");
        pieChart.withSeries(256.5,
                52.4,
                69.4);
    }

    private void prepareSelection(){
        filterBySelection.setLabel("Filter By");
        filterBySelection.setItems(FILTER_BY_STATUS_CODE, FILTER_BY_DECISIONS);
        filterBySelection.setValue(FILTER_BY_STATUS_CODE);
        filterBySelection.addValueChangeListener(it -> {
           if (it.getValue().equals(FILTER_BY_STATUS_CODE)){
               filterByStatusCode();
           } else if (it.getValue().equals(FILTER_BY_DECISIONS)){
               filterByDecisions();
           }
        });
    }


}

what is the problem ?

0

There are 0 answers