Upgrade to Platform 10.0.0.beta9 and Charts 6.0.0.beta3. Workaround for

vaadin/flow#4017

pom.xml

@@ -18,9 +18,8 @@
         <failOnMissingWebXml>false</failOnMissingWebXml>
 
         <!-- Dependencies -->
-        <vaadin.platform.version>10.0.0.beta5</vaadin.platform.version>
-        <!-- Needed for production mode -->
-        <flow.project.version>1.0.0.beta5</flow.project.version>
+        <vaadin.platform.version>10.0.0.beta9</vaadin.platform.version>
+        <servlet.api.version>3.1.0</servlet.api.version>
         <selenium.server.version>3.4.0</selenium.server.version>
 
         <!-- Plugins -->
@@ -29,10 +28,6 @@
         <maven.clean.plugin.version>3.0.0</maven.clean.plugin.version>
         <maven.war.plugin.version>3.1.0</maven.war.plugin.version>
 
-        <!-- Frontend -->
-        <node.version>v8.9.0</node.version>
-        <yarn.version>v1.3.2</yarn.version>
-
         <frontend.working.directory>${project.basedir}/src/main/webapp/frontend</frontend.working.directory>
         <jetty.extra.resource.base>${project.basedir}/src/main/webapp/</jetty.extra.resource.base>
     </properties>
@@ -77,10 +72,10 @@
         <dependencies>
             <dependency>
                 <groupId>com.vaadin</groupId>
-                <artifactId>vaadin-webjars-bom</artifactId>
+                <artifactId>vaadin-bom</artifactId>
                 <type>pom</type>
                 <scope>import</scope>
-                <version>${flow.project.version}</version>
+                <version>${vaadin.platform.version}</version>
             </dependency>
         </dependencies>
     </dependencyManagement>
@@ -92,6 +87,12 @@
             <version>${vaadin.platform.version}</version>
         </dependency>
 
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>vaadin-charts-flow</artifactId>
+            <version>6.0.0.beta3</version>
+        </dependency>
+
         <dependency>
             <groupId>commons-beanutils</groupId>
             <artifactId>commons-beanutils</artifactId>

src/main/java/com/vaadin/demo/stockdata/ui/MainView.java

@@ -1,6 +1,8 @@
 package com.vaadin.demo.stockdata.ui;
 
+import com.vaadin.flow.component.DomEvent;
 import com.vaadin.flow.component.charts.Chart;
+import com.vaadin.flow.component.charts.events.XAxesExtremesSetEvent;
 import com.vaadin.flow.component.charts.model.ChartType;
 import com.vaadin.flow.component.charts.model.Configuration;
 import com.vaadin.flow.component.charts.model.DataSeries;
@@ -47,6 +49,10 @@
 @BodySize(height = "100vh", width = "100vw")
 public class MainView extends HorizontalLayout {
 
+    // Workaround for https://github.com/vaadin/flow/issues/4017
+    public static final String EXTREMES_EVENT_DATA_MIN = "event.detail.originalEvent.min";
+    public static final String EXTREMES_EVENT_DATA_MAX = "event.detail.originalEvent.max";
+
     private final Random randomGen = new Random();
 
     private Chart detailChart;
@@ -179,11 +185,12 @@ private Chart newDetailChart() {
         chart.setWidth("100%");
 
         // Listen to x-axis extremes event and send random data within range. Ideally this should be fetched from SERVICE.
-        // This could also be done with a vaadin-date-picker for start and end because currently lots of this
-        // extremes events get generated for a simple drag so not very efficient (unless debounced).
-        chart.addListener(XAxisExtremesEvent.class, event -> {
+        // Using the low-level Element API should no longer be required after https://github.com/vaadin/flow/issues/4017
+        chart.getElement().addEventListener(XAxesExtremesSetEvent.class.getAnnotation(DomEvent.class).value(), event -> {
+            final double min = event.getEventData().getNumber(EXTREMES_EVENT_DATA_MIN);
+            final double max = event.getEventData().getNumber(EXTREMES_EVENT_DATA_MAX);
             List<DataSeriesItem> randomDataWithinRange = randomDataSeriesItems().stream()
-                    .filter(e -> e.getX().doubleValue() >= event.getMin() && e.getX().doubleValue() <= event.getMax())
+                    .filter(e -> e.getX().doubleValue() >= min && e.getX().doubleValue() <= max)
                     .collect(toList());
 
             aaplSeries.setData(randomDataWithinRange);
@@ -193,12 +200,11 @@ private Chart newDetailChart() {
             configuration.fireAxesRescaled(yAxis, newMinMax.getLeft(), newMinMax.getRight(), true, true);
 
             System.out.println("XAxis rescaled! Sending fine-grained data for: "
-                    + toPrettyDate(event.getMin()) + " - " + toPrettyDate(event.getMax()));
-        });
-
-        // Listen to y-axis extremes. Not needed for this demo, just to show how it could be done.
-        chart.addListener(YAxisExtremesEvent.class, event ->
-                System.out.println("YAxis rescaled! New range: " + event.getMin() + " - " + event.getMax()));
+                    + toPrettyDate(min) + " - " + toPrettyDate(max));
+        })
+        .addEventData(EXTREMES_EVENT_DATA_MIN)
+        .addEventData(EXTREMES_EVENT_DATA_MAX)
+        .debounce(400);
 
         return chart;
     }