diff --git a/pom.xml b/pom.xml
index ef2bdd1..62b52d6 100644
--- a/pom.xml
+++ b/pom.xml
@@ -42,11 +42,6 @@
com.vaadin
vaadin-spring-boot-starter
-
- com.github.appreciated
- apexcharts
- 24.0.2
-
org.mariadb.jdbc
@@ -143,4 +138,4 @@
-
\ No newline at end of file
+
diff --git a/src/main/java/org/kickerelo/kickerelo/views/Chart.java b/src/main/java/org/kickerelo/kickerelo/views/Chart.java
new file mode 100644
index 0000000..38bb729
--- /dev/null
+++ b/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 xvalues, List 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);
+
+ }
+
+}
diff --git a/src/main/java/org/kickerelo/kickerelo/views/Chart1vs1.java b/src/main/java/org/kickerelo/kickerelo/views/Chart1vs1.java
deleted file mode 100644
index 48e7df3..0000000
--- a/src/main/java/org/kickerelo/kickerelo/views/Chart1vs1.java
+++ /dev/null
@@ -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 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);
- }
-}
diff --git a/src/main/java/org/kickerelo/kickerelo/views/Chart2vs2.java b/src/main/java/org/kickerelo/kickerelo/views/Chart2vs2.java
deleted file mode 100644
index 696e0cd..0000000
--- a/src/main/java/org/kickerelo/kickerelo/views/Chart2vs2.java
+++ /dev/null
@@ -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 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);
- }
-}
diff --git a/src/main/java/org/kickerelo/kickerelo/views/Graph1vs1View.java b/src/main/java/org/kickerelo/kickerelo/views/Graph1vs1View.java
index 6d86fc6..1c7d6b1 100644
--- a/src/main/java/org/kickerelo/kickerelo/views/Graph1vs1View.java
+++ b/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 names = new ArrayList<>();
+ List 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);
}
}
diff --git a/src/main/java/org/kickerelo/kickerelo/views/Graph2vs2View.java b/src/main/java/org/kickerelo/kickerelo/views/Graph2vs2View.java
index 26ad677..62a23be 100644
--- a/src/main/java/org/kickerelo/kickerelo/views/Graph2vs2View.java
+++ b/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 names = new ArrayList<>();
+ List 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);
}
}