Switch to chart.js

pom.xml

@@ -42,11 +42,6 @@
             <groupId>com.vaadin</groupId>
             <artifactId>vaadin-spring-boot-starter</artifactId>
         </dependency>
-        <dependency>
-            <groupId>com.github.appreciated</groupId>
-            <artifactId>apexcharts</artifactId>
-            <version>24.0.2</version>
-        </dependency>
 
         <dependency>
             <groupId>org.mariadb.jdbc</groupId>
@@ -143,4 +138,4 @@
         </profile>
     </profiles>
 
-</project>
+</project>

src/main/java/org/kickerelo/kickerelo/views/Chart.java

@@ -0,0 +1,45 @@
+package org.kickerelo.kickerelo.views;
+
+import java.util.List;
+
+import com.vaadin.flow.component.Component;
+import com.vaadin.flow.component.UI;
+import com.vaadin.flow.component.Tag;
+
+import org.json.JSONArray;
+
+@Tag("canvas")
+public class Chart extends Component {
+
+    public Chart(List<String> xvalues, List<Float> yvalues) {
+        setId("chart");
+
+        UI.getCurrent().getPage().addJavaScript("https://cdn.jsdelivr.net/npm/chart.js");
+
+        JSONArray x = new JSONArray(xvalues);
+        JSONArray y = new JSONArray(yvalues);
+
+        String js = "";
+
+        // Dark mode setting
+        js += "if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {";
+        js +=     "Chart.defaults.color = 'hsla(214, 96%, 96%, 0.9)';";
+        js +=     "Chart.defaults.borderColor = 'hsla(214, 78%, 88%, 0.5)';";
+        js += "}";
+
+        // Font size
+        js += "Chart.defaults.font.size = 16;";
+
+        // Chart
+        js += "new Chart(document.getElementById('chart'), {type: 'line', ";
+        js += "options: {showLine: false, pointRadius: 7, plugins: { legend: { display: false}}, layout: { padding: 10}}, ";
+
+        // Data
+        js += "data: { labels: " + x + ", datasets:[{data: " + y + ", ";
+        js += "borderColor: 'hsl(214, 90%, 48%)', backgroundColor: 'hsl(214, 90%, 77%)'}]}});";
+
+        getElement().executeJs(js);
+
+    }
+
+}

src/main/java/org/kickerelo/kickerelo/views/Chart1vs1.java

@@ -1,50 +0,0 @@
-package org.kickerelo.kickerelo.views;
-
-import com.github.appreciated.apexcharts.ApexChartsBuilder;
-import com.github.appreciated.apexcharts.config.Theme;
-import com.github.appreciated.apexcharts.config.builder.ChartBuilder;
-import com.github.appreciated.apexcharts.config.builder.XAxisBuilder;
-import com.github.appreciated.apexcharts.config.builder.YAxisBuilder;
-import com.github.appreciated.apexcharts.config.chart.Type;
-import com.github.appreciated.apexcharts.config.chart.builder.ZoomBuilder;
-import com.github.appreciated.apexcharts.config.chart.zoom.ZoomType;
-import com.github.appreciated.apexcharts.config.theme.Mode;
-import com.github.appreciated.apexcharts.config.theme.Monochrome;
-import com.github.appreciated.apexcharts.config.xaxis.Labels;
-import com.github.appreciated.apexcharts.config.xaxis.labels.Style;
-import com.github.appreciated.apexcharts.config.yaxis.Title;
-import com.github.appreciated.apexcharts.helper.Series;
-import com.vaadin.flow.component.UI;
-import com.vaadin.flow.component.button.Button;
-import com.vaadin.flow.server.VaadinService;
-import com.vaadin.flow.theme.lumo.Lumo;
-import org.kickerelo.kickerelo.data.Spieler;
-import org.kickerelo.kickerelo.util.Spieler1vs1EloComparator;
-
-import java.math.BigDecimal;
-import java.util.List;
-
-public class Chart1vs1 extends ApexChartsBuilder {
-    public Chart1vs1(List<Spieler> l) {
-        Theme theme = new Theme();
-        Monochrome monochrome = new Monochrome();
-        monochrome.setEnabled(true);
-        theme.setMode(Mode.DARK);
-        theme.setMonochrome(monochrome);
-        Labels labels = new Labels();
-        labels.setRotate(270d);
-        labels.setShow(true);
-        labels.setRotateAlways(false);
-
-
-        withChart(ChartBuilder.get().withType(Type.SCATTER)
-                .withZoom(ZoomBuilder.get().withEnabled(true).withType(ZoomType.XY).build()).build())
-                .withSeries(new Series<>("ELO",
-                        l.stream().sorted(new Spieler1vs1EloComparator()).map(Spieler::getElo1vs1).toArray()
-                        ))
-                .withXaxis(XAxisBuilder.get().withCategories(l.stream().sorted(new Spieler1vs1EloComparator())
-                        .map(Spieler::getName).toList()).withLabels(labels).build())
-                .withYaxis(YAxisBuilder.get().build())
-                .withTheme(theme);
-    }
-}

src/main/java/org/kickerelo/kickerelo/views/Chart2vs2.java

@@ -1,41 +0,0 @@
-package org.kickerelo.kickerelo.views;
-
-import com.github.appreciated.apexcharts.ApexChartsBuilder;
-import com.github.appreciated.apexcharts.config.Theme;
-import com.github.appreciated.apexcharts.config.builder.ChartBuilder;
-import com.github.appreciated.apexcharts.config.builder.XAxisBuilder;
-import com.github.appreciated.apexcharts.config.builder.YAxisBuilder;
-import com.github.appreciated.apexcharts.config.chart.Type;
-import com.github.appreciated.apexcharts.config.chart.builder.ZoomBuilder;
-import com.github.appreciated.apexcharts.config.chart.zoom.ZoomType;
-import com.github.appreciated.apexcharts.config.theme.Mode;
-import com.github.appreciated.apexcharts.config.theme.Monochrome;
-import com.github.appreciated.apexcharts.config.xaxis.Labels;
-import com.github.appreciated.apexcharts.helper.Series;
-import org.kickerelo.kickerelo.data.Spieler;
-import org.kickerelo.kickerelo.util.Spieler2vs2EloComparator;
-
-import java.util.List;
-
-public class Chart2vs2 extends ApexChartsBuilder {
-    public Chart2vs2(List<Spieler> l) {
-        Theme theme = new Theme();
-        Monochrome monochrome = new Monochrome();
-        monochrome.setEnabled(true);
-        theme.setMode(Mode.DARK);
-        theme.setMonochrome(monochrome);
-        Labels labels = new Labels();
-        labels.setRotate(270d);
-        labels.setShow(true);
-        labels.setRotateAlways(false);
-
-        withChart(ChartBuilder.get().withType(Type.SCATTER)
-                .withZoom(ZoomBuilder.get().withEnabled(true).withType(ZoomType.XY).build()).build())
-                .withSeries(new Series<>("ELO",
-                        l.stream().sorted(new Spieler2vs2EloComparator()).map(Spieler::getElo2vs2).toArray()
-                ))
-                .withXaxis(XAxisBuilder.get().withCategories(l.stream().sorted(new Spieler2vs2EloComparator()).map(Spieler::getName).toList()).withLabels(labels).build())
-                .withYaxis(YAxisBuilder.get().build())
-                .withTheme(theme);
-    }
-}

src/main/java/org/kickerelo/kickerelo/views/Graph1vs1View.java

@@ -1,23 +1,29 @@
 package org.kickerelo.kickerelo.views;
 
-import com.github.appreciated.apexcharts.ApexCharts;
-import com.vaadin.flow.component.Unit;
+import java.util.ArrayList;
+import java.util.List;
+
 import com.vaadin.flow.component.html.H2;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.router.Route;
+
 import org.kickerelo.kickerelo.repository.SpielerRepository;
+import org.kickerelo.kickerelo.util.Spieler1vs1EloComparator;
 
 @Route("graph1vs1")
 public class Graph1vs1View extends VerticalLayout {
 
-    ApexCharts chart1vs1;
     public Graph1vs1View(SpielerRepository repo) {
         setSizeFull();
         H2 subheading = new H2("1 vs 1 Elo");
-        chart1vs1 = new Chart1vs1(repo.getSpielerWith1vs1Games()).build();
-        chart1vs1.setWidth(100, Unit.PERCENTAGE);
-        chart1vs1.setHeight(100, Unit.PERCENTAGE);
 
-        add(subheading, chart1vs1);
+        List<String> names = new ArrayList<>();
+        List<Float> elo = new ArrayList<>();
+
+        repo.getSpielerWith1vs1Games().stream().sorted(new Spieler1vs1EloComparator()).forEach((s) -> {names.add(s.getName()); elo.add(s.getElo1vs1());});
+
+        Chart chart = new Chart(names, elo);
+
+        add(subheading, chart);
     }
 }

src/main/java/org/kickerelo/kickerelo/views/Graph2vs2View.java

@@ -1,22 +1,29 @@
 package org.kickerelo.kickerelo.views;
 
-import com.github.appreciated.apexcharts.ApexCharts;
-import com.vaadin.flow.component.Unit;
+import java.util.ArrayList;
+import java.util.List;
+
 import com.vaadin.flow.component.html.H2;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.router.Route;
+
 import org.kickerelo.kickerelo.repository.SpielerRepository;
+import org.kickerelo.kickerelo.util.Spieler2vs2EloComparator;
 
 @Route("graph2vs2")
 public class Graph2vs2View extends VerticalLayout {
-    ApexCharts chart2vs2;
+
     public Graph2vs2View(SpielerRepository repo) {
         setSizeFull();
         H2 subheading = new H2("2 vs 2 Elo");
-        chart2vs2 = new Chart2vs2(repo.getSpielerWith2vs2Games()).build();
-        chart2vs2.setWidth(100, Unit.PERCENTAGE);
-        chart2vs2.setHeight(100, Unit.PERCENTAGE);
 
-        add(subheading, chart2vs2);
+        List<String> names = new ArrayList<>();
+        List<Float> elo = new ArrayList<>();
+
+        repo.getSpielerWith2vs2Games().stream().sorted(new Spieler2vs2EloComparator()).forEach((s) -> {names.add(s.getName()); elo.add(s.getElo2vs2());});
+
+        Chart chart = new Chart(names, elo);
+
+        add(subheading, chart);
     }
 }