Different types of charts

src/main/java/com/example/components/ApexChart.java

@@ -7,45 +7,26 @@ import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.shared.Registration;
 import tools.jackson.databind.json.JsonMapper;
 
-import java.util.List;
 import java.util.Map;
 
 @Tag("apex-chart")
 @NpmPackage(value = "apexcharts", version = "5.15.2")
 @JsModule("./components/apex-chart.ts")
-public class ApexChart extends Component implements HasSize {
+public abstract class ApexChart extends Component implements HasSize {
 
-    public enum ChartType {
-        BAR ("bar"),
-        LINE ("line")
-        ;
+    protected static final JsonMapper MAPPER = JsonMapper.builder().build();
 
-        private final String type;
+    private final String chartType;
 
-        ChartType(String type) {
-            this.type = type;
-        }
-
-        public String getType() {
-            return type;
-        }
-    }
-
-    private static final JsonMapper MAPPER = JsonMapper.builder().build();
-
-    private final ChartType chartType;
-
-    public ApexChart(ChartType chartType) {
+    protected ApexChart(String chartType) {
         this.chartType = chartType;
     }
 
-    public void setData(String seriesName, List<Double> values, List<String> categories) {
-        Map<String, Object> options = Map.of(
-                "chart", Map.of("type", chartType.getType(), "height", "100%"),
-                "series", List.of(Map.of("name", seriesName, "data", values)),
-                "xaxis", Map.of("categories", categories)
-        );
+    protected String getChartType() {
+        return chartType;
+    }
 
+    protected void sendOptions(Map<String, Object> options) {
         getElement().callJsFunction("renderChart", MAPPER.writeValueAsString(options));
     }
 

src/main/java/com/example/components/AxisChart.java

@@ -0,0 +1,21 @@
+package com.example.components;
+
+import java.util.List;
+import java.util.Map;
+
+public abstract class AxisChart extends ApexChart {
+
+    protected AxisChart(String chartType) {
+        super(chartType);
+    }
+
+    public void setData(String seriesName, List<Double> values, List<String> categories) {
+        Map<String, Object> options = Map.of(
+                "chart", Map.of("type", getChartType(), "height", "100%"),
+                "series", List.of(Map.of("name", seriesName, "data", values)),
+                "xaxis", Map.of("categories", categories)
+        );
+
+        sendOptions(options);
+    }
+}

src/main/java/com/example/components/BarChart.java

@@ -0,0 +1,8 @@
+package com.example.components;
+
+public class BarChart extends AxisChart {
+
+    public BarChart() {
+        super("bar");
+    }
+}

src/main/java/com/example/components/LineChart.java

@@ -0,0 +1,8 @@
+package com.example.components;
+
+public class LineChart extends AxisChart {
+
+    public LineChart() {
+        super("line");
+    }
+}

src/main/java/com/example/components/PieChart.java

@@ -0,0 +1,21 @@
+package com.example.components;
+
+import java.util.List;
+import java.util.Map;
+
+public class PieChart extends ApexChart {
+
+    public PieChart() {
+        super("pie");
+    }
+
+    public void setData(List<Double> values, List<String> labels) {
+        Map<String, Object> options = Map.of(
+                "chart", Map.of("type", "pie", "height", "100%"),
+                "series", values,
+                "labels", labels
+        );
+
+        sendOptions(options);
+    }
+}

src/main/java/com/example/views/DashboardView.java

@@ -1,6 +1,8 @@
 package com.example.views;
 
-import com.example.components.ApexChart;
+import com.example.components.BarChart;
+import com.example.components.LineChart;
+import com.example.components.PieChart;
 import com.vaadin.flow.component.notification.Notification;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.router.Route;
@@ -11,18 +13,38 @@ import java.util.List;
 public class DashboardView extends VerticalLayout {
 
     public DashboardView() {
-        ApexChart chart = new ApexChart(ApexChart.ChartType.LINE);
-        chart.setWidthFull();
-        chart.setHeight("400px");
-        chart.setData("Umsatz 2026",
+        LineChart lineChart = new LineChart();
+        lineChart.setWidthFull();
+        lineChart.setHeight("400px");
+        lineChart.setData("Umsatz 2026",
                 List.of(30.0, 40.0, 35.0, 50.0, 49.0, 60.0),
                 List.of("Jan", "Feb", "Mär", "Apr", "Mai", "Jun"));
-
-        chart.addPointClickListener(e -> {
+        lineChart.addPointClickListener(e -> {
             Notification.show("Serie %d, Punkt %d"
                     .formatted(e.getSeriesIndex(), e.getDataPointIndex()));
         });
 
-        add(chart);
+        BarChart barChart = new BarChart();
+        barChart.setWidthFull();
+        barChart.setHeight("400px");
+        barChart.setData("Umsatz 2026",
+                List.of(30.0, 40.0, 35.0, 50.0, 49.0, 60.0),
+                List.of("Jan", "Feb", "Mär", "Apr", "Mai", "Jun"));
+        barChart.addPointClickListener(e -> {
+            Notification.show("Serie %d, Punkt %d"
+                    .formatted(e.getSeriesIndex(), e.getDataPointIndex()));
+        });
+
+        PieChart pieChart = new PieChart();
+        pieChart.setWidthFull();
+        pieChart.setHeight("400px");
+        pieChart.setData(
+                List.of(30.0, 40.0, 35.0, 50.0),
+                List.of("Nord", "Süd", "Ost", "West"));
+        pieChart.addPointClickListener(e -> {
+            Notification.show("Slice %d".formatted(e.getDataPointIndex()));
+        });
+
+        add(lineChart, barChart, pieChart);
     }
 }