Skip to content

Commit 7ddae41

Browse files
AB-xdevAB-xdev
authored
Merge pull request #4 from xdev-software/develop
Release
2 parents 69c7bea + 3b0803b commit 7ddae41

File tree

14 files changed

+343
-101
lines changed

14 files changed

+343
-101
lines changed

‎README.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,62 @@ A Chart.js 4+ Wrapper for Vaadin
1010

1111
![demo](assets/demo.png)
1212

13+
## Usage
14+
15+
1. Define a custom chart or use the ``showChart``-method directly.<br/>Example:
16+
17+
```java
18+
public class ExampleChartContainer extends ChartContainer
19+
{
20+
public void show(Data data)
21+
{
22+
BarData data = ...; // Build the bar chart data from the handed over data
23+
this.showChart(new BarChart(data)
24+
.setOptions(new BarOptions()
25+
.setResponsive(true)
26+
.setMaintainAspectRatio(false)
27+
.setPlugins(new Plugins()
28+
.setTitle(new Title()
29+
.setText("Age")
30+
.setDisplay(true))))
31+
.toJson());
32+
}
33+
}
34+
```
35+
36+
2. Add the chart to your view/component:
37+
38+
```java
39+
public class ExampleView extends VerticalLayout
40+
{
41+
private final ExampleChartContainer chart = new ExampleChartContainer();
42+
43+
public ExampleView()
44+
{
45+
this.add(this.chart);
46+
// ...
47+
}
48+
49+
private void loadDataAndShowChart()
50+
{
51+
this.chart.showLoading();
52+
53+
UI ui = UI.getCurrent();
54+
CompletableFuture.runAsync(() -> {
55+
try {
56+
var data = ...; // Load some data from the backend
57+
// You may also convert the data here and call showChart
58+
ui.access(() -> this.chart.show(data));
59+
} catch (Exception ex) {
60+
// Display the error message when loading fails
61+
ui.access(() -> this.chart.showFailed(ex.getMessage()));
62+
}
63+
});
64+
}
65+
}
66+
```
67+
68+
For more usage examples please have a look at [the demo](./vaadin-chartjs-wrapper-demo/src/main/java/software/xdev/vaadin/chartjs/demo/).
1369

1470
## Installation
1571
[Installation guide for the latest release](https://github.com/xdev-software/vaadin-chartjs-wrapper/releases/latest#Installation)

‎vaadin-chartjs-wrapper-demo/src/main/java/software/xdev/vaadin/chartjs/DemoView.java

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
package software.xdev.vaadin.chartjs;
2+
3+
import java.util.List;
4+
5+
import com.vaadin.flow.component.AttachEvent;
6+
import com.vaadin.flow.component.Composite;
7+
import com.vaadin.flow.component.grid.Grid;
8+
import com.vaadin.flow.component.grid.GridVariant;
9+
import com.vaadin.flow.component.html.Anchor;
10+
import com.vaadin.flow.component.html.Span;
11+
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
12+
import com.vaadin.flow.data.renderer.ComponentRenderer;
13+
import com.vaadin.flow.router.PageTitle;
14+
import com.vaadin.flow.router.Route;
15+
16+
import software.xdev.vaadin.chartjs.demo.ClientToServerUpdateableDemo;
17+
import software.xdev.vaadin.chartjs.demo.MinimalisticDemo;
18+
19+
20+
@PageTitle("ChartJS + Vaadin demos")
21+
@Route("")
22+
public class DemoView extends Composite<VerticalLayout>
23+
{
24+
private final Grid<Example> grExamples = new Grid<>();
25+
26+
public DemoView()
27+
{
28+
this.grExamples
29+
.addColumn(new ComponentRenderer<>(example -> {
30+
final Anchor anchor = new Anchor(example.route(), example.name());
31+
32+
final Span spDesc = new Span(example.desc());
33+
spDesc.getStyle().set("font-size", "90%");
34+
spDesc.getStyle().set("white-space", "pre");
35+
36+
final VerticalLayout vl = new VerticalLayout(anchor, spDesc);
37+
vl.setSpacing(false);
38+
return vl;
39+
}))
40+
.setHeader("Available demos");
41+
42+
this.grExamples.setSizeFull();
43+
this.grExamples.addThemeVariants(GridVariant.LUMO_COMPACT, GridVariant.LUMO_NO_BORDER);
44+
45+
this.getContent().add(this.grExamples);
46+
this.getContent().setHeightFull();
47+
}
48+
49+
@Override
50+
protected void onAttach(final AttachEvent attachEvent)
51+
{
52+
this.grExamples.setItems(List.of(
53+
new Example(
54+
MinimalisticDemo.NAV,
55+
"Minimalistic",
56+
"Showcasing the simplest form of using ChartJS"
57+
),
58+
new Example(
59+
ClientToServerUpdateableDemo.NAV,
60+
"Client to Server updateable",
61+
"Shows how charts can be dynamically requested by the client e.g. when using a Grid."
62+
)
63+
));
64+
}
65+
66+
record Example(String route, String name, String desc)
67+
{
68+
}
69+
}

‎vaadin-chartjs-wrapper-demo/src/main/java/software/xdev/vaadin/chartjs/demo/ClientToServerUpdateableDemo.java

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
package software.xdev.vaadin.chartjs.demo;
2+
3+
import java.util.function.BiFunction;
4+
import java.util.stream.IntStream;
5+
6+
import com.vaadin.flow.component.checkbox.Checkbox;
7+
import com.vaadin.flow.component.grid.Grid;
8+
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
9+
import com.vaadin.flow.data.provider.Query;
10+
import com.vaadin.flow.data.renderer.ComponentRenderer;
11+
import com.vaadin.flow.router.Route;
12+
13+
import software.xdev.chartjs.model.charts.BarChart;
14+
import software.xdev.chartjs.model.data.BarData;
15+
import software.xdev.chartjs.model.dataset.BarDataset;
16+
import software.xdev.chartjs.model.enums.IndexAxis;
17+
import software.xdev.chartjs.model.options.BarOptions;
18+
import software.xdev.chartjs.model.options.scale.Scales;
19+
import software.xdev.chartjs.model.options.scale.cartesian.linear.LinearScaleOptions;
20+
import software.xdev.vaadin.chartjs.ChartContainer;
21+
import software.xdev.vaadin.chartjs.ClientToServerUpdateableChartContainer;
22+
23+
24+
@Route(ClientToServerUpdateableDemo.NAV)
25+
public class ClientToServerUpdateableDemo extends VerticalLayout
26+
{
27+
public static final String NAV = "/client2server-update";
28+
29+
private final Grid<Integer> grid = new Grid<>();
30+
31+
public ClientToServerUpdateableDemo()
32+
{
33+
this.setSizeFull();
34+
35+
final Checkbox chbxUseClientToServerUpdatable =
36+
new Checkbox("Use " + ClientToServerUpdateableChartContainer.class.getSimpleName());
37+
chbxUseClientToServerUpdatable.setHelperText(
38+
"If you disable this the default implementation ("
39+
+ ChartContainer.class.getSimpleName()
40+
+ ") is used, which will NOT be displayed correctly");
41+
this.add(this.grid, chbxUseClientToServerUpdatable);
42+
43+
this.grid.setItems(IntStream.rangeClosed(1, 1_000).boxed().toList());
44+
45+
chbxUseClientToServerUpdatable.addValueChangeListener(ev -> {
46+
final BiFunction<Integer, Integer, ChartContainer> chartContainerProvider =
47+
Boolean.TRUE.equals(ev.getValue())
48+
? WorkingChartContainer::new
49+
: BrokenChartContainer::new;
50+
51+
this.grid.removeAllColumns();
52+
this.grid.addColumn(Object::toString);
53+
this.grid.addColumn(new ComponentRenderer<>(value -> {
54+
final ChartContainer chartContainer = chartContainerProvider.apply(
55+
value,
56+
this.grid.getDataProvider().size(new Query<>()));
57+
// Set a fix height, otherwise it will be dynamic for each chart
58+
chartContainer.setHeight("6em");
59+
return chartContainer;
60+
}));
61+
});
62+
// Init
63+
chbxUseClientToServerUpdatable.setValue(true);
64+
}
65+
66+
static String buildChartPayload(final int value, final int max)
67+
{
68+
return new BarChart(new BarData()
69+
.addLabels("value")
70+
.addDataset(new BarDataset()
71+
.setBackgroundColor("#c02222")
72+
.setLabel("Dataset " + value)
73+
.addData(value)))
74+
.setOptions(new BarOptions()
75+
.setIndexAxis(IndexAxis.Y) // Horizontal
76+
.setResponsive(true)
77+
.setMaintainAspectRatio(false)
78+
.setAnimation(false)
79+
.setScales(new Scales()
80+
.addScale(
81+
Scales.ScaleAxis.X,
82+
new LinearScaleOptions()
83+
.setBeginAtZero(true)
84+
.setSuggestedMax(max))
85+
))
86+
.toJson();
87+
}
88+
89+
@SuppressWarnings("java:S110") // Not caused by us!
90+
static class BrokenChartContainer extends ChartContainer
91+
{
92+
public BrokenChartContainer(final int value, final int max)
93+
{
94+
this.showChart(buildChartPayload(value, max));
95+
}
96+
}
97+
98+
99+
@SuppressWarnings("java:S110") // Not caused by us!
100+
static class WorkingChartContainer extends ClientToServerUpdateableChartContainer
101+
{
102+
private final String payload;
103+
104+
public WorkingChartContainer(final int value, final int max)
105+
{
106+
this.payload = buildChartPayload(value, max);
107+
108+
// Important
109+
// This tells the client to run the update function once it's rendered!
110+
this.scheduleUpdateViaScript();
111+
}
112+
113+
@Override
114+
protected void update()
115+
{
116+
this.showChart(this.payload);
117+
}
118+
}
119+
}

‎vaadin-chartjs-wrapper-demo/src/main/java/software/xdev/vaadin/chartjs/example/ExampleView.java renamed to ‎vaadin-chartjs-wrapper-demo/src/main/java/software/xdev/vaadin/chartjs/demo/MinimalisticDemo.java

Lines changed: 46 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
package software.xdev.vaadin.chartjs.example;
1+
package software.xdev.vaadin.chartjs.demo;
22

33
import java.util.concurrent.CompletableFuture;
44

@@ -11,20 +11,28 @@
1111
import com.vaadin.flow.router.Route;
1212
import com.vaadin.flow.theme.lumo.Lumo;
1313

14+
import software.xdev.chartjs.model.charts.BarChart;
15+
import software.xdev.chartjs.model.data.BarData;
16+
import software.xdev.chartjs.model.dataset.BarDataset;
17+
import software.xdev.chartjs.model.options.BarOptions;
18+
import software.xdev.chartjs.model.options.Plugins;
19+
import software.xdev.chartjs.model.options.Title;
20+
import software.xdev.vaadin.chartjs.ChartContainer;
1421
import software.xdev.vaadin.chartjs.resources.js.src.ChartThemeManager;
1522

1623

17-
@Route("")
18-
public class ExampleView extends VerticalLayout
24+
@Route(MinimalisticDemo.NAV)
25+
public class MinimalisticDemo extends VerticalLayout
1926
{
20-
private final ExampleChartContainer chart = new ExampleChartContainer();
27+
public static final String NAV = "/minimalistic";
2128

22-
public ExampleView()
29+
private final DummyChartContainer chart = new DummyChartContainer();
30+
31+
public MinimalisticDemo()
2332
{
2433
this.setSizeFull();
2534
this.chart.setHeight("50%");
2635

27-
this.chart.setId("test");
2836
this.add(
2937
this.chart,
3038
new Button("Run dummy load", ev -> this.runDummyLoad()),
@@ -70,4 +78,36 @@ protected void onAttach(final AttachEvent attachEvent)
7078
{
7179
this.runDummyLoad();
7280
}
81+
82+
@SuppressWarnings("java:S110") // Not caused by us!
83+
public static class DummyChartContainer extends ChartContainer
84+
{
85+
public void show()
86+
{
87+
this.showChart(new BarChart(new BarData()
88+
.addLabels("2020", "2021", "2022", "2023")
89+
.addDataset(new BarDataset()
90+
.setBackgroundColor("#c02222")
91+
.setLabel("Hans")
92+
.addData(1)
93+
.addData(2)
94+
.addData(3)
95+
.addData(4))
96+
.addDataset(new BarDataset()
97+
.setBackgroundColor("orange")
98+
.setLabel("Franz")
99+
.addData(2)
100+
.addData(3)
101+
.addData(4)
102+
.addData(5)))
103+
.setOptions(new BarOptions()
104+
.setResponsive(true)
105+
.setMaintainAspectRatio(false)
106+
.setPlugins(new Plugins()
107+
.setTitle(new Title()
108+
.setText("Age")
109+
.setDisplay(true))))
110+
.toJson());
111+
}
112+
}
73113
}

‎vaadin-chartjs-wrapper-demo/src/main/java/software/xdev/vaadin/chartjs/example/ExampleChartContainer.java

Lines changed: 0 additions & 45 deletions
This file was deleted.

0 commit comments

Comments
 (0)