From c25fe2789b8f7d2c7dfb4623874db258d08e921d Mon Sep 17 00:00:00 2001 From: lmarz Date: Wed, 14 May 2025 14:15:49 +0200 Subject: [PATCH] Switch to chart.js --- pom.xml | 7 +-- .../org/kickerelo/kickerelo/views/Chart.java | 45 +++++++++++++++++ .../kickerelo/kickerelo/views/Chart1vs1.java | 50 ------------------- .../kickerelo/kickerelo/views/Chart2vs2.java | 41 --------------- .../kickerelo/views/Graph1vs1View.java | 20 +++++--- .../kickerelo/views/Graph2vs2View.java | 21 +++++--- 6 files changed, 73 insertions(+), 111 deletions(-) create mode 100644 src/main/java/org/kickerelo/kickerelo/views/Chart.java delete mode 100644 src/main/java/org/kickerelo/kickerelo/views/Chart1vs1.java delete mode 100644 src/main/java/org/kickerelo/kickerelo/views/Chart2vs2.java 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); } }