Fachschaft/KickerELO
5
0
Fork 0
mirror of https://github.com/AJMicke/KickerELO.git synced 2026-03-11 13:31:02 +01:00
Code Activity

Switch to chart.js

Browse Source
This commit is contained in:
lmarz
2025-05-14 14:15:49 +02:00
committed by GitHub
parent c0be312e8d
commit c25fe2789b
6 changed files with 73 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
pom.xml
View File

@@ -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>

45
src/main/java/org/kickerelo/kickerelo/views/Chart.java Normal file
View File

@@ -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);
}
}

50
src/main/java/org/kickerelo/kickerelo/views/Chart1vs1.java
View File

@@ -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);
}
}

41
src/main/java/org/kickerelo/kickerelo/views/Chart2vs2.java
View File

@@ -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);
}
}

20
src/main/java/org/kickerelo/kickerelo/views/Graph1vs1View.java
View File

@@ -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);
}
}

21
src/main/java/org/kickerelo/kickerelo/views/Graph2vs2View.java
View File

@@ -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);
}
}