vaadin-chartjs-wrapper/vaadin-chartjs-wrapper-demo/src/main/java/software/xdev/vaadin/chartjs/demo/ClientToServerUpdateableDemo.java at develop · xdev-software/vaadin-chartjs-wrapper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
package software.xdev.vaadin.chartjs.demo;

import java.util.function.BiFunction;
import java.util.stream.IntStream;

import com.vaadin.flow.component.checkbox.Checkbox;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.data.provider.Query;
import com.vaadin.flow.data.renderer.ComponentRenderer;
import com.vaadin.flow.router.Route;

import software.xdev.chartjs.model.charts.BarChart;
import software.xdev.chartjs.model.data.BarData;
import software.xdev.chartjs.model.dataset.BarDataset;
import software.xdev.chartjs.model.enums.IndexAxis;
import software.xdev.chartjs.model.options.BarOptions;
import software.xdev.chartjs.model.options.scale.Scales;
import software.xdev.chartjs.model.options.scale.cartesian.linear.LinearScaleOptions;
import software.xdev.vaadin.chartjs.ChartContainer;
import software.xdev.vaadin.chartjs.ClientToServerUpdateableChartContainer;


@Route(ClientToServerUpdateableDemo.NAV)
public class ClientToServerUpdateableDemo extends VerticalLayout
{
	public static final String NAV = "/client2server-update";

	private final Grid<Integer> grid = new Grid<>();

	public ClientToServerUpdateableDemo()
	{
		this.setSizeFull();

		final Checkbox chbxUseClientToServerUpdatable =
			new Checkbox("Use " + ClientToServerUpdateableChartContainer.class.getSimpleName());
		chbxUseClientToServerUpdatable.setHelperText(
			"If you disable this the default implementation ("
				+ ChartContainer.class.getSimpleName()
				+ ") is used, which will NOT be displayed correctly");
		this.add(this.grid, chbxUseClientToServerUpdatable);

		this.grid.setItems(IntStream.rangeClosed(1, 1_000).boxed().toList());

		chbxUseClientToServerUpdatable.addValueChangeListener(ev -> {
			final BiFunction<Integer, Integer, ChartContainer> chartContainerProvider =
				Boolean.TRUE.equals(ev.getValue())
					? WorkingChartContainer::new
					: BrokenChartContainer::new;

			this.grid.removeAllColumns();
			this.grid.addColumn(Object::toString);
			this.grid.addColumn(new ComponentRenderer<>(value -> {
				final ChartContainer chartContainer = chartContainerProvider.apply(
					value,
					this.grid.getDataProvider().size(new Query<>()));
				// Set a fix height, otherwise it will be dynamic for each chart
				chartContainer.setHeight("6em");
				return chartContainer;
			}));
		});
		// Init
		chbxUseClientToServerUpdatable.setValue(true);
	}

	static String buildChartPayload(final int value, final int max)
	{
		return new BarChart(new BarData()
			.addLabels("value")
			.addDataset(new BarDataset()
				.setBackgroundColor("#c02222")
				.setLabel("Dataset " + value)
				.addData(value)))
			.setOptions(new BarOptions()
				.setIndexAxis(IndexAxis.Y) // Horizontal
				.setResponsive(true)
				.setMaintainAspectRatio(false)
				.setAnimation(false)
				.setScales(new Scales()
					.addScale(
						Scales.ScaleAxis.X,
						new LinearScaleOptions()
							.setBeginAtZero(true)
							.setSuggestedMax(max))
				))
			.toJson();
	}

	@SuppressWarnings("java:S110")
	static class BrokenChartContainer extends ChartContainer
	{
		BrokenChartContainer(final int value, final int max)
		{
			this.showChart(buildChartPayload(value, max));
		}
	}


	@SuppressWarnings("java:S110")
	static class WorkingChartContainer extends ClientToServerUpdateableChartContainer
	{
		private final String payload;

		WorkingChartContainer(final int value, final int max)
		{
			this.payload = buildChartPayload(value, max);

			// Important
			// This tells the client to run the update function once it's rendered!
			this.scheduleUpdateViaScript();
		}

		@Override
		protected void update()
		{
			this.showChart(this.payload);
		}
	}
}