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

Rotated labels on the graph, and first attempt at dark mode

This commit is contained in:
Anton Micke
2025-02-07 23:45:05 +01:00
parent ff17b0444c
commit b5c2f2f21d
3 changed files with 25 additions and 1 deletions

View File

@@ -0,0 +1,12 @@
window.applyTheme = () => {
const theme = window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "";
document.documentElement.setAttribute("theme", theme);
};
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener('change', function () {
window.applyTheme()
});
window.applyTheme();

View File

@@ -2,6 +2,7 @@ package org.kickerelo.kickerelo.layout;
import com.vaadin.flow.component.applayout.AppLayout;
import com.vaadin.flow.component.applayout.DrawerToggle;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.orderedlayout.Scroller;
import com.vaadin.flow.component.sidenav.SideNav;
@@ -14,6 +15,7 @@ import com.vaadin.flow.theme.lumo.LumoUtility;
import org.kickerelo.kickerelo.views.*;
@Layout
@JsModule("prefers-color-scheme.js")
public class KickerAppLayout extends AppLayout {
public KickerAppLayout() {

View File

@@ -7,6 +7,8 @@ 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.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 org.kickerelo.kickerelo.data.Spieler;
@@ -17,12 +19,20 @@ import java.util.List;
public class Chart1vs1 extends ApexChartsBuilder {
public Chart1vs1(List<Spieler> l) {
Style style = new Style();
style.setColors(List.of("#80C3FC"));
Labels labels = new Labels();
labels.setRotate(270d);
labels.setShow(true);
labels.setRotateAlways(false);
labels.setStyle(style);
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()).build())
.withXaxis(XAxisBuilder.get().withCategories(l.stream().sorted(new Spieler1vs1EloComparator())
.map(Spieler::getName).toList()).withLabels(labels).build())
.withYaxis(YAxisBuilder.get().build());
}
}