Search code examples
javaspring-bootvaadinvaadin-flowvaadin-grid

Vaadin ItemClickListener only works once

so I am trying to create a WebApp, one component is the stocks, these are stored in a Grid component and an OHLC Graph. For those to talk to each other I made an ItemClickListener on the Grid which returns the StockObject. I then gather the needed data for the Chart from the Yahoo finance API. Now it all works just fine on the first click. The first time the eventListener is fired everything works fine. On any other attempts, the Eventlistener does not fire, basically, the whole browser just freezes. Could anyone tell me how to solve this? Thanks in advance! Best Regards.

Grid Code

this.stockGrid = new Grid<>(Stock.class, false);
this.stockGrid.addColumn(Stock::getSymbol).setHeader("Symbol");
this.stockGrid.addColumn(Stock::getCurrentPrice).setHeader("Market Price [USD]");
this.stockGrid.addColumn(Stock::getMouvment).setHeader("Mouvment [%]");
this.stockGrid.addColumn(Stock::getROI).setHeader("ROI [%]");
List<Stock> currentHoldings = this.hld.holdings;
this.stockGrid.setItems(currentHoldings);
this.stockGrid.setSelectionMode(Grid.SelectionMode.SINGLE);

ChartSetup

this.stockGraph = new Chart(ChartType.OHLC);
this.stockChartconfiguration = this.stockGraph.getConfiguration();
stockChartconfiguration.getTitle().setText("");

this.stockSeries = new DataSeries();
PlotOptionsOhlc plotOptionsOhlc = new PlotOptionsOhlc();
DataGrouping grouping = new DataGrouping();
grouping.addUnit(new TimeUnitMultiples(TimeUnit.WEEK, 1));
grouping.addUnit(new TimeUnitMultiples(TimeUnit.MONTH, 1, 2, 3, 4, 6));
plotOptionsOhlc.setDataGrouping(grouping);
this.stockSeries.setPlotOptions(plotOptionsOhlc);

this.stockChartconfiguration.setSeries(this.stockSeries);

RangeSelector rangeSelector = new RangeSelector();
rangeSelector.setSelected(1);
this.stockChartconfiguration.setRangeSelector(rangeSelector);
stockGraph.setTimeline(true);

and the EventListener

stockGrid.addItemClickListener((var event) -> {
            try {
                this.stockSeries.clear();

                Stock selectedStock = event.getItem();

                if(selectedStock != null){
                    setDebugLable("Loading " + selectedStock.symbol + " Chart...");
                    selectedStock.update();
                    LinkedHashMap<Date, List> history = selectedStock.getHistory();
                    Set<Date> keys = history.keySet();
                    for(Date date : keys){
                        List data = history.get(date);
                        OhlcItem item = new OhlcItem();
                        item.setX(date);
                        item.setLow((Double)data.get(1));
                        item.setHigh((Double)data.get(0));
                        item.setClose((Double)data.get(3));
                        item.setOpen((Double)data.get(2));
                        this.stockSeries.add(item);
                    }
                    this.stockChartconfiguration.getTitle().setText(selectedStock.name + " ("  + selectedStock.symbol + ")");
                    this.stockGraph.drawChart();

                    this.stockInfo.setValue(selectedStock.DTO.getStockInfo());
                    this.stockholdings.setValue("Stock: " + selectedStock.getSymbol() + "\n" +
                                                "Current value: " + selectedStock.currentPrice + " USD\n" +
                                                "Amount of shares: " + selectedStock.shares + "\n\n" +
                                                "Purchase value: " + selectedStock.purchasePrice * selectedStock.shares+ " USD\n" +
                                                "Current value: " + selectedStock.currentPrice * selectedStock.shares + " USD\n" +
                                                "ROI: " + selectedStock.calcROI_curreny() + "USD/" + selectedStock.calcROI_percent() + "%");

                    tabSheet.getTabAt(1).setEnabled(true);
                    tabSheet.setSelectedTab(tabSheet.getTabAt(1));
                    setDebugLable(selectedStock.symbol + " Chart loaded.");
                }
            } catch (IOException ex) {
                Logger.getLogger(MainView.class.getName()).log(Level.SEVERE, null, ex);
            } catch (Exception ex){
                setDebugLable(ex.toString());
            }
        });
Solution

  • Many thanks go out to @cfrick for helping me with this. I managed to find out that the data gathering part works just fine but the issue lay within the animation part of graph creation. enter image description here

    Now my solution might be a bit rough but basically, in the event listener I am now removing all components from that tab sheet and adding them again later when the new graph is ready. This now means that the bulk of the initialization and configuration is taken from the main view and added to the event listener. If anyone has any better solutions please let me know. First time making a web app and this seems like a bunch of fun. Cheers

    Inizialisattion

    this.stockGraph = new Chart(ChartType.OHLC);
this.stockChartconfiguration = this.stockGraph.getConfiguration();
this.stockSeries = new DataSeries();

    Event listener

    stockGrid.addItemClickListener((var event) -> {
        try {
            stockLayout.remove(stockGraph,stockdetails);
            Stock selectedStock = event.getItem();

            this.stockGraph = new Chart(ChartType.OHLC);
            this.stockChartconfiguration = this.stockGraph.getConfiguration();
            stockChartconfiguration.getTitle().setText("");


            PlotOptionsOhlc plotOptionsOhlc = new PlotOptionsOhlc();
            DataGrouping grouping = new DataGrouping();
            grouping.addUnit(new TimeUnitMultiples(TimeUnit.WEEK, 1));
            grouping.addUnit(new TimeUnitMultiples(TimeUnit.MONTH, 1, 2, 3, 4, 6));
            plotOptionsOhlc.setDataGrouping(grouping);
            this.stockSeries.setPlotOptions(plotOptionsOhlc);

            this.stockChartconfiguration.setSeries(this.stockSeries);

            RangeSelector rangeSelector = new RangeSelector();
            rangeSelector.setSelected(1);
            this.stockChartconfiguration.setRangeSelector(rangeSelector);

            stockGraph.setTimeline(true);


            if(selectedStock != null){
                this.stockSeries.clear();
                setDebugLable("Loading " + selectedStock.symbol + " Chart...");
                selectedStock.update();
                LinkedHashMap<Date, List> history = selectedStock.getHistory();
                Set<Date> keys = history.keySet();
                for(Date date : keys){
                    List data = history.get(date);
                    OhlcItem item = new OhlcItem();
                    item.setX(date);
                    item.setLow((Double)data.get(1));
                    item.setHigh((Double)data.get(0));
                    item.setClose((Double)data.get(3));
                    item.setOpen((Double)data.get(2));
                    this.stockSeries.add(item);
                }
                this.stockChartconfiguration.getTitle().setText(selectedStock.name + " ("  + selectedStock.symbol + ")");
                this.stockGraph.drawChart(true);

                this.stockInfo.setValue(selectedStock.DTO.getStockInfo());
                this.stockholdings.setValue("Stock: " + selectedStock.getSymbol() + "\n" +
                                            "Current value: " + selectedStock.currentPrice + " USD\n" +
                                            "Amount of shares: " + selectedStock.shares + "\n\n" +
                                            "Purchase value: " + selectedStock.purchasePrice * selectedStock.shares+ " USD\n" +
                                            "Current value: " + selectedStock.currentPrice * selectedStock.shares + " USD\n" +
                                            "ROI: " + selectedStock.calcROI_curreny() + "USD/" + selectedStock.calcROI_percent() + "%");
                
                stockLayout.add(stockGraph, stockdetails);
                tabSheet.getTabAt(1).setEnabled(true);
                tabSheet.setSelectedTab(tabSheet.getTabAt(1));
                setDebugLable(selectedStock.symbol + " Chart loaded.");
            }
        } catch (IOException ex) {
            Logger.getLogger(MainView.class.getName()).log(Level.SEVERE, null, ex);
        } catch (Exception ex){
            setDebugLable(ex.toString());
        }
    });