Different types of charts
This commit is contained in:
@@ -0,0 +1,24 @@
|
||||
name: CI
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
branches:
|
||||
- master
|
||||
|
||||
jobs:
|
||||
build-and-test:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Set up Java 25 (Temurin)
|
||||
uses: actions/setup-java@v4
|
||||
with:
|
||||
distribution: temurin
|
||||
java-version: '25'
|
||||
cache: maven
|
||||
|
||||
- name: Build and Test
|
||||
run: |
|
||||
chmod +x mvnw
|
||||
./mvnw verify
|
||||
@@ -7,45 +7,26 @@ import com.vaadin.flow.component.dependency.NpmPackage;
|
||||
import com.vaadin.flow.shared.Registration;
|
||||
import tools.jackson.databind.json.JsonMapper;
|
||||
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
|
||||
@Tag("apex-chart")
|
||||
@NpmPackage(value = "apexcharts", version = "5.15.2")
|
||||
@JsModule("./components/apex-chart.ts")
|
||||
public class ApexChart extends Component implements HasSize {
|
||||
public abstract class ApexChart extends Component implements HasSize {
|
||||
|
||||
public enum ChartType {
|
||||
BAR ("bar"),
|
||||
LINE ("line")
|
||||
;
|
||||
protected static final JsonMapper MAPPER = JsonMapper.builder().build();
|
||||
|
||||
private final String type;
|
||||
private final String chartType;
|
||||
|
||||
ChartType(String type) {
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
public String getType() {
|
||||
return type;
|
||||
}
|
||||
}
|
||||
|
||||
private static final JsonMapper MAPPER = JsonMapper.builder().build();
|
||||
|
||||
private final ChartType chartType;
|
||||
|
||||
public ApexChart(ChartType chartType) {
|
||||
protected ApexChart(String chartType) {
|
||||
this.chartType = chartType;
|
||||
}
|
||||
|
||||
public void setData(String seriesName, List<Double> values, List<String> categories) {
|
||||
Map<String, Object> options = Map.of(
|
||||
"chart", Map.of("type", chartType.getType(), "height", "100%"),
|
||||
"series", List.of(Map.of("name", seriesName, "data", values)),
|
||||
"xaxis", Map.of("categories", categories)
|
||||
);
|
||||
protected String getChartType() {
|
||||
return chartType;
|
||||
}
|
||||
|
||||
protected void sendOptions(Map<String, Object> options) {
|
||||
getElement().callJsFunction("renderChart", MAPPER.writeValueAsString(options));
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
package com.example.components;
|
||||
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
|
||||
public abstract class AxisChart extends ApexChart {
|
||||
|
||||
protected AxisChart(String chartType) {
|
||||
super(chartType);
|
||||
}
|
||||
|
||||
public void setData(String seriesName, List<Double> values, List<String> categories) {
|
||||
Map<String, Object> options = Map.of(
|
||||
"chart", Map.of("type", getChartType(), "height", "100%"),
|
||||
"series", List.of(Map.of("name", seriesName, "data", values)),
|
||||
"xaxis", Map.of("categories", categories)
|
||||
);
|
||||
|
||||
sendOptions(options);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
package com.example.components;
|
||||
|
||||
public class BarChart extends AxisChart {
|
||||
|
||||
public BarChart() {
|
||||
super("bar");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
package com.example.components;
|
||||
|
||||
public class LineChart extends AxisChart {
|
||||
|
||||
public LineChart() {
|
||||
super("line");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
package com.example.components;
|
||||
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
|
||||
public class PieChart extends ApexChart {
|
||||
|
||||
public PieChart() {
|
||||
super("pie");
|
||||
}
|
||||
|
||||
public void setData(List<Double> values, List<String> labels) {
|
||||
Map<String, Object> options = Map.of(
|
||||
"chart", Map.of("type", "pie", "height", "100%"),
|
||||
"series", values,
|
||||
"labels", labels
|
||||
);
|
||||
|
||||
sendOptions(options);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
package com.example.views;
|
||||
|
||||
import com.example.components.ApexChart;
|
||||
import com.example.components.BarChart;
|
||||
import com.example.components.LineChart;
|
||||
import com.example.components.PieChart;
|
||||
import com.vaadin.flow.component.notification.Notification;
|
||||
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
|
||||
import com.vaadin.flow.router.Route;
|
||||
@@ -11,18 +13,38 @@ import java.util.List;
|
||||
public class DashboardView extends VerticalLayout {
|
||||
|
||||
public DashboardView() {
|
||||
ApexChart chart = new ApexChart(ApexChart.ChartType.LINE);
|
||||
chart.setWidthFull();
|
||||
chart.setHeight("400px");
|
||||
chart.setData("Umsatz 2026",
|
||||
LineChart lineChart = new LineChart();
|
||||
lineChart.setWidthFull();
|
||||
lineChart.setHeight("400px");
|
||||
lineChart.setData("Umsatz 2026",
|
||||
List.of(30.0, 40.0, 35.0, 50.0, 49.0, 60.0),
|
||||
List.of("Jan", "Feb", "Mär", "Apr", "Mai", "Jun"));
|
||||
|
||||
chart.addPointClickListener(e -> {
|
||||
lineChart.addPointClickListener(e -> {
|
||||
Notification.show("Serie %d, Punkt %d"
|
||||
.formatted(e.getSeriesIndex(), e.getDataPointIndex()));
|
||||
});
|
||||
|
||||
add(chart);
|
||||
BarChart barChart = new BarChart();
|
||||
barChart.setWidthFull();
|
||||
barChart.setHeight("400px");
|
||||
barChart.setData("Umsatz 2026",
|
||||
List.of(30.0, 40.0, 35.0, 50.0, 49.0, 60.0),
|
||||
List.of("Jan", "Feb", "Mär", "Apr", "Mai", "Jun"));
|
||||
barChart.addPointClickListener(e -> {
|
||||
Notification.show("Serie %d, Punkt %d"
|
||||
.formatted(e.getSeriesIndex(), e.getDataPointIndex()));
|
||||
});
|
||||
|
||||
PieChart pieChart = new PieChart();
|
||||
pieChart.setWidthFull();
|
||||
pieChart.setHeight("400px");
|
||||
pieChart.setData(
|
||||
List.of(30.0, 40.0, 35.0, 50.0),
|
||||
List.of("Nord", "Süd", "Ost", "West"));
|
||||
pieChart.addPointClickListener(e -> {
|
||||
Notification.show("Slice %d".formatted(e.getDataPointIndex()));
|
||||
});
|
||||
|
||||
add(lineChart, barChart, pieChart);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
server.port=${PORT:8080}
|
||||
logging.level.org.atmosphere=warn
|
||||
|
||||
# Launch the default browser when starting the application in development mode
|
||||
vaadin.launch-browser=true
|
||||
|
||||
# To improve the performance during development.
|
||||
# For more information https://vaadin.com/docs/latest/flow/integrations/spring/configuration#special-configuration-parameters
|
||||
vaadin.allowed-packages=com.vaadin,org.vaadin,com.flowingcode,com.example
|
||||
@@ -0,0 +1,16 @@
|
||||
server:
|
||||
port: ${PORT:8080}
|
||||
servlet:
|
||||
session:
|
||||
timeout: ${SESSION_TIMEOUT:15m}
|
||||
|
||||
logging:
|
||||
level:
|
||||
org.atmosphere: warn
|
||||
|
||||
vaadin:
|
||||
# Launch the default browser when starting the application in development mode
|
||||
launch-browser: true
|
||||
# To improve the performance during development.
|
||||
# For more information https://vaadin.com/docs/latest/flow/integrations/spring/configuration#special-configuration-parameters
|
||||
allowed-packages: com.vaadin,org.vaadin,com.flowingcode,com.example
|
||||
Reference in New Issue
Block a user