vaadin / flow-components

Java counterpart of Vaadin Web Components
101 stars 66 forks source link

Charts: JavaScript Error this.configuration.series[$1] is undefined #3741

Open enver-haase opened 2 years ago

enver-haase commented 2 years ago

Description

Use below code and click Item description link "Detsinyi Christian".

In development mode you'll see the error in the bottom right behind the V logo.

Expected outcome

Expected: No JS errors whatsoever.

Minimal reproducible example

package com.example.application.views.test;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import com.vaadin.flow.component.notification.Notification;
import org.apache.commons.lang3.RandomStringUtils;

import com.example.application.views.MainLayout;
import com.vaadin.flow.component.charts.Chart;
import com.vaadin.flow.component.charts.model.AxisType;
import com.vaadin.flow.component.charts.model.ChartType;
import com.vaadin.flow.component.charts.model.Configuration;
import com.vaadin.flow.component.charts.model.Cursor;
import com.vaadin.flow.component.charts.model.DataSeries;
import com.vaadin.flow.component.charts.model.DataSeriesItem;
import com.vaadin.flow.component.charts.model.DrilldownCallback;
import com.vaadin.flow.component.charts.model.PlotOptionsColumn;
import com.vaadin.flow.component.charts.model.PlotOptionsSeries;
import com.vaadin.flow.component.charts.model.Series;
import com.vaadin.flow.component.charts.model.StackLabels;
import com.vaadin.flow.component.charts.model.Stacking;
import com.vaadin.flow.component.charts.model.XAxis;
import com.vaadin.flow.component.charts.model.YAxis;
import com.vaadin.flow.component.charts.model.style.SolidColor;
import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;

@PageTitle("KPITest")
@Route(value = "", layout = MainLayout.class)
public class KPITest extends Div {

    public static class KPIChangeRunDto implements Serializable {
        private static final long serialVersionUID = 6032642107534296188L;
        private final String categorie;
        private final Double sum;
        public KPIChangeRunDto(String categorie, Double sum) {
            super();
            this.categorie = categorie;
            this.sum = sum;
        }
        public String getCategorie() {
            return categorie;
        }
        public Double getSum() {
            return sum;
        }
    }
    public static final String NAME = "KPITest";
    private final VerticalLayout container;
    private final HorizontalLayout filter;
    private final ComboBox<java.lang.String> cbKindOfReport;
    public KPITest() {
        container = new VerticalLayout();
        container.setSizeFull();
        add(container);
        filter = new HorizontalLayout();
        cbKindOfReport = new ComboBox<>();
        cbKindOfReport.setItems("percent", "absolute", "absolutestacked");
        cbKindOfReport.setValue("percent");
        cbKindOfReport.addValueChangeListener(listener -> drawBarChart());
        drawBarChart();
    }

    void drawBarChart() {
        Chart chart = new Chart(ChartType.COLUMN);
        Configuration conf = chart.getConfiguration();
        conf.setTitle("Change/Run");
        YAxis yAxis = new YAxis();
        yAxis.setMin(0);
        StackLabels sLabels = new StackLabels(true);
        yAxis.setStackLabels(sLabels);
        conf.addyAxis(yAxis);
        PlotOptionsColumn plotOptions = new PlotOptionsColumn();
        SolidColor[] color = {new SolidColor(54, 77, 110), new SolidColor(192, 207, 225)};
        plotOptions.setColors(color);
        switch (cbKindOfReport.getValue()) {
            case "absolute":
                plotOptions.setStacking(Stacking.NONE);
                break;
            case "absolutestacked":
                plotOptions.setStacking(Stacking.NORMAL);
                break;
            default:
                plotOptions.setStacking(Stacking.PERCENT);
                break;
        }

        plotOptions.setAllowPointSelect(true);
        plotOptions.setCursor(Cursor.POINTER);
        plotOptions.setShowInLegend(true);
        conf.setPlotOptions(plotOptions);

        DataSeries changeSeries = new DataSeries("Change");
        changeSeries.addItemWithDrilldown(new DataSeriesItem("Detsinyi Christian", 40.1));
        changeSeries.addItemWithDrilldown(new DataSeriesItem("Antoni Roland", 30.1));
        changeSeries.addItemWithDrilldown(new DataSeriesItem("Columbo, Frank", 70.1));

        DataSeries runSeries = new DataSeries("Run");
        runSeries.addItemWithDrilldown(new DataSeriesItem("Detsinyi Christian", 40.1));
        runSeries.addItemWithDrilldown(new DataSeriesItem("Antoni Roland", 20.1));
        runSeries.addItemWithDrilldown(new DataSeriesItem("Columbo, Frank", 60.1));

        DataSeries testSeries = new DataSeries("Test");
        testSeries.addItemWithDrilldown(new DataSeriesItem("Detsinyi Christian", 50.1));
        testSeries.addItemWithDrilldown(new DataSeriesItem("Antoni Roland", 40.1));
        testSeries.addItemWithDrilldown(new DataSeriesItem("Columbo, Frank", 30.1));

        XAxis xAxis = new XAxis();
        conf.addxAxis(xAxis);
        xAxis.setType(AxisType.CATEGORY);

        PlotOptionsSeries poChangeSeries = new PlotOptionsSeries();
        poChangeSeries.setColor(new SolidColor(192, 207, 225));
        changeSeries.setPlotOptions(poChangeSeries);

        PlotOptionsSeries poRunSeries = new PlotOptionsSeries();
        poRunSeries.setColor(new SolidColor(111, 141, 185));
        runSeries.setPlotOptions(poRunSeries);

        PlotOptionsSeries poTestSeries = new PlotOptionsSeries();
        poTestSeries.setColor(new SolidColor(0, 0, 255));
        testSeries.setPlotOptions(poTestSeries);

        conf.addSeries(changeSeries);
        conf.addSeries(runSeries);
        conf.addSeries(testSeries);

        conf.getyAxis().setTitle("Test");

        chart.setDrilldownCallback(KPITest::getPointDrilldown);

        chart.setConfiguration(conf);
        chart.drawChart();

        container.removeAll();
        container.add(filter, chart);
    }

    private static Series getPointDrilldown(DrilldownCallback.DrilldownDetails event) {
        List<KPIChangeRunDto> listChangeRun = new ArrayList<>();
        Notification.show("Event: Item is " + event.getItem().getName() + ", item index is " + event.getItemIndex() + ", Series is " + event.getSeries().getName());

        System.err.println(event.getItem().getName() + " ## " + event.getSeries().getName());
        listChangeRun.add(new KPIChangeRunDto("Projekt1", 24.5));
        listChangeRun.add(new KPIChangeRunDto("Projekt2", 42.0));
        listChangeRun.add(new KPIChangeRunDto("Projekt3", 14.5));
        listChangeRun.add(new KPIChangeRunDto("Projekt4", 24.5));

        ArrayList<String> alCategories = new ArrayList<>();
        ArrayList<Number> alData = new ArrayList<>();

        for (KPIChangeRunDto kpiChangeRun : listChangeRun) {
            alCategories.add(kpiChangeRun.getCategorie());
            alData.add(kpiChangeRun.getSum());
        }

        DataSeries drill = new DataSeries(event.getItem().getName() + " " + event.getSeries().getName());
        String[] categories = new String[alCategories.size()];
        categories = alCategories.toArray(categories);
        Number[] data = new Number[alData.size()];
        data = alData.toArray(data);

        drill.setData(categories, data);
        drill.setId(RandomStringUtils.randomAlphabetic(15));
        return drill;
    }
}

Steps to reproduce

Use below code and click Item description link "Detsinyi Christian".

In development mode you'll see the error in the bottom right behind the V logo.

Environment

Vaadin version(s): 23.2.1 OS: macOS latest

Tested in Chrome.

Browsers

Chrome, Issue is not browser related

mhosio commented 2 years ago

This is a side effect caused by https://github.com/vaadin/flow-components/issues/3742