Skip to content

Commit 2f15f39

Browse files
committed
Init
1 parent 6108745 commit 2f15f39

24 files changed

+956
-3
lines changed

vaadin-chartjs-demo/pom.xml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,12 @@
7474
<version>${project.version}</version>
7575
</dependency>
7676

77+
<dependency>
78+
<groupId>software.xdev</groupId>
79+
<artifactId>chartjs-java-model</artifactId>
80+
<version>2.8.1</version>
81+
</dependency>
82+
7783
<!-- Spring -->
7884
<dependency>
7985
<groupId>com.vaadin</groupId>
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
package software.xdev.vaadin.chartjs.example;
2+
3+
import software.xdev.chartjs.model.charts.BarChart;
4+
import software.xdev.chartjs.model.data.BarData;
5+
import software.xdev.chartjs.model.dataset.BarDataset;
6+
import software.xdev.chartjs.model.options.BarOptions;
7+
import software.xdev.chartjs.model.options.Plugins;
8+
import software.xdev.chartjs.model.options.Title;
9+
import software.xdev.vaadin.chartjs.ChartContainer;
10+
11+
12+
public class ExampleChartContainer extends ChartContainer
13+
{
14+
public void show()
15+
{
16+
final BarData barData = new BarData()
17+
.addLabels("2020", "2021", "2022", "2023")
18+
.addDataset(new BarDataset()
19+
.setBackgroundColor("#c02222")
20+
.setLabel("Hans")
21+
.addData(1)
22+
.addData(2)
23+
.addData(3)
24+
.addData(4))
25+
.addDataset(new BarDataset()
26+
.setBackgroundColor("orange")
27+
.setLabel("Franz")
28+
.addData(2)
29+
.addData(3)
30+
.addData(4)
31+
.addData(5));
32+
33+
final BarChart bc = new BarChart(barData)
34+
.setOptions(new BarOptions()
35+
.setResponsive(true)
36+
.setPlugins(new Plugins()
37+
.setTitle(new Title()
38+
.setText("Age")
39+
.setDisplay(true)))
40+
.setMaintainAspectRatio(false)
41+
.setResponsive(true));
42+
43+
this.displayChart(bc.toJson());
44+
}
45+
}
Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
package software.xdev.vaadin.chartjs.example;
2+
3+
import java.util.concurrent.CompletableFuture;
4+
5+
import com.vaadin.flow.component.AttachEvent;
6+
import com.vaadin.flow.component.UI;
7+
import com.vaadin.flow.component.button.Button;
8+
import com.vaadin.flow.component.checkbox.Checkbox;
9+
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
10+
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
11+
import com.vaadin.flow.router.Route;
12+
import com.vaadin.flow.theme.lumo.Lumo;
13+
14+
import software.xdev.vaadin.chartjs.resources.js.src.ChartThemeManager;
15+
16+
17+
@Route("")
18+
public class ExampleView extends VerticalLayout
19+
{
20+
private final ExampleChartContainer chart = new ExampleChartContainer();
21+
22+
public ExampleView()
23+
{
24+
this.setSizeFull();
25+
this.chart.setHeight("50%");
26+
27+
this.chart.setId("test");
28+
this.add(
29+
this.chart,
30+
new Button("Run dummy load", ev -> this.runDummyLoad()),
31+
new HorizontalLayout(
32+
new Button("Load", ev -> this.chart.showLoading()),
33+
new Button("Show data", ev -> this.chart.show()),
34+
new Button(
35+
"Show data with problem indicator", ev -> {
36+
this.chart.show();
37+
this.chart.showProblemsIndicator("Failed to load some data because ...");
38+
}),
39+
new Button("Error", ev -> this.chart.showFailed("Something went wrong"))
40+
),
41+
new Checkbox(
42+
"DarkMode (requires chart rebuild)", ev -> {
43+
this.getElement().executeJs(
44+
"document.documentElement.setAttribute('theme', $0)",
45+
Boolean.TRUE.equals(ev.getValue()) ? Lumo.DARK : Lumo.LIGHT);
46+
this.getElement().executeJs(ChartThemeManager.TRY_UPDATE_CHART_JS_THEMING.formatted(true));
47+
}));
48+
}
49+
50+
private void runDummyLoad()
51+
{
52+
this.chart.showLoading();
53+
54+
final UI ui = UI.getCurrent();
55+
CompletableFuture.runAsync(() -> {
56+
try
57+
{
58+
Thread.sleep(1000);
59+
}
60+
catch(final InterruptedException iex)
61+
{
62+
Thread.currentThread().interrupt();
63+
}
64+
ui.access(this.chart::show);
65+
});
66+
}
67+
68+
@Override
69+
protected void onAttach(final AttachEvent attachEvent)
70+
{
71+
this.runDummyLoad();
72+
}
73+
}

vaadin-chartjs/pom.xml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@
99
<version>1.0.0-SNAPSHOT</version>
1010
<packaging>jar</packaging>
1111

12-
<name>Chart.js for Vaadin</name>
13-
<description>Chart.js for Vaadin</description>
12+
<name>Chart.js Wrapper for Vaadin</name>
13+
<description>Chart.js Wrapper for Vaadin</description>
1414
<url>https://github.com/xdev-software/vaadin-chartjs</url>
1515

1616
<scm>
1717
<url>https://github.com/xdev-software/vaadin-chartjs</url>
1818
<connection>scm:git:https://github.com/xdev-software/vaadin-chartjs.git</connection>
1919
</scm>
2020

21-
<inceptionYear>2022</inceptionYear>
21+
<inceptionYear>2025</inceptionYear>
2222

2323
<organization>
2424
<name>XDEV Software</name>
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/*
2+
* Copyright © 2025 XDEV Software (https://xdev.software)
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
package software.xdev.vaadin.chartjs;
17+
18+
public interface ChartCom
19+
{
20+
void showLoading();
21+
22+
void showFailed(final String errorMsg);
23+
24+
void clear();
25+
}
Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
/*
2+
* Copyright © 2025 XDEV Software (https://xdev.software)
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
package software.xdev.vaadin.chartjs;
17+
18+
import java.util.Objects;
19+
import java.util.UUID;
20+
21+
import com.vaadin.flow.component.Component;
22+
import com.vaadin.flow.component.dependency.CssImport;
23+
import com.vaadin.flow.component.dependency.JsModule;
24+
import com.vaadin.flow.component.html.Div;
25+
import com.vaadin.flow.component.icon.Icon;
26+
import com.vaadin.flow.component.icon.VaadinIcon;
27+
import com.vaadin.flow.component.shared.Tooltip;
28+
import com.vaadin.flow.theme.lumo.LumoUtility;
29+
30+
import software.xdev.vaadin.chartjs.loading.DefaultLoadingErrorComponent;
31+
import software.xdev.vaadin.chartjs.loading.DefaultLoadingLoadComponent;
32+
import software.xdev.vaadin.chartjs.loading.LoadingErrorComponent;
33+
import software.xdev.vaadin.chartjs.resources.js.JSLibs;
34+
import software.xdev.vaadin.chartjs.resources.js.src.ChartFunc;
35+
import software.xdev.vaadin.chartjs.resources.js.src.ChartThemeManager;
36+
37+
38+
@JsModule(JSLibs.CHARTJS)
39+
@JsModule(ChartThemeManager.LOCATION)
40+
@JsModule(ChartFunc.LOCATION)
41+
@CssImport(ChartContainerStyles.LOCATION)
42+
public abstract class ChartContainer extends Div implements ChartCom
43+
{
44+
protected Component loading = new DefaultLoadingLoadComponent();
45+
protected Component error = new DefaultLoadingErrorComponent();
46+
protected Div chartJSDiv = new Div();
47+
48+
protected Icon icoProblemsIndicator = VaadinIcon.WARNING.create();
49+
50+
protected ChartContainer()
51+
{
52+
this.loading.addClassName(ChartContainerStyles.LOADING_COMPONENT_CLASS);
53+
this.error.addClassName(ChartContainerStyles.ERROR_COMPONENT_CLASS);
54+
this.icoProblemsIndicator.addClassName(ChartContainerStyles.PROBLEM_INDICATOR_CLASS);
55+
56+
this.chartJSDiv.addClassNames(
57+
ChartContainerStyles.DIV_CLASS,
58+
// Otherwise temporary scrollbars might be visible
59+
LumoUtility.Overflow.HIDDEN);
60+
this.chartJSDiv.setId(this.createChartJSDivId());
61+
this.chartJSDiv.setHeightFull();
62+
63+
this.addClassName(ChartContainerStyles.ROOT_CLASS);
64+
this.add(this.chartJSDiv);
65+
this.setSizeFull();
66+
}
67+
68+
protected String createChartJSDivId()
69+
{
70+
return "chartjsdiv" + UUID.randomUUID();
71+
}
72+
73+
public String getChartJSDivId()
74+
{
75+
return this.chartJSDiv.getId().orElseThrow();
76+
}
77+
78+
@Override
79+
public void showLoading()
80+
{
81+
this.clear();
82+
this.add(this.loading);
83+
}
84+
85+
@Override
86+
public void showFailed(final String errorMsg)
87+
{
88+
this.clear();
89+
this.add(this.error);
90+
if(this.error instanceof final LoadingErrorComponent loadingErrorComp)
91+
{
92+
loadingErrorComp.setVisible(true, errorMsg);
93+
}
94+
}
95+
96+
@Override
97+
public void clear()
98+
{
99+
this.clear(false);
100+
}
101+
102+
protected void clear(final boolean forDisplayingChart)
103+
{
104+
// Ignored on forDisplayingChart so that no "flickering" of the chart occurs
105+
if(!forDisplayingChart)
106+
{
107+
this.tryDestroyChart();
108+
this.chartJSDiv.setVisible(false);
109+
this.chartJSDiv.removeAll();
110+
}
111+
this.remove(this.getChildren()
112+
.filter(c -> !Objects.equals(c, this.chartJSDiv))
113+
.toList());
114+
}
115+
116+
public void showProblemsIndicator(final String problemsText)
117+
{
118+
this.add(this.icoProblemsIndicator);
119+
Tooltip.forComponent(this.icoProblemsIndicator)
120+
.withText(problemsText);
121+
}
122+
123+
protected void displayChart(final String payload)
124+
{
125+
Objects.requireNonNull(payload);
126+
127+
this.clear(true);
128+
this.chartJSDiv.setVisible(true);
129+
130+
final String thisid = this.getChartJSDivId();
131+
this.executeJS(String.format(ChartFunc.BUILD_CHART, thisid, thisid + "Canvas", payload));
132+
}
133+
134+
protected void tryDestroyChart()
135+
{
136+
final String thisid = this.getChartJSDivId();
137+
this.executeJS(String.format(ChartFunc.DESTROY_CHART, thisid + "Canvas"));
138+
}
139+
140+
protected void executeJS(final String js)
141+
{
142+
this.getElement().executeJs(js);
143+
}
144+
145+
// region Getter + Setter
146+
public Component getLoading()
147+
{
148+
return this.loading;
149+
}
150+
151+
public void setLoading(final Component loading)
152+
{
153+
this.loading = loading;
154+
}
155+
156+
public Component getError()
157+
{
158+
return this.error;
159+
}
160+
161+
public void setError(final Component error)
162+
{
163+
this.error = error;
164+
}
165+
166+
public Div getChartJSDiv()
167+
{
168+
return this.chartJSDiv;
169+
}
170+
171+
public void setChartJSDiv(final Div chartJSDiv)
172+
{
173+
this.chartJSDiv = chartJSDiv;
174+
}
175+
176+
public Icon getIcoProblemsIndicator()
177+
{
178+
return this.icoProblemsIndicator;
179+
}
180+
181+
public void setIcoProblemsIndicator(final Icon icoProblemsIndicator)
182+
{
183+
this.icoProblemsIndicator = icoProblemsIndicator;
184+
}
185+
// endregion
186+
}
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/*
2+
* Copyright © 2025 XDEV Software (https://xdev.software)
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
package software.xdev.vaadin.chartjs;
17+
18+
public final class ChartContainerStyles
19+
{
20+
public static final String LOCATION = "./styles/chartjsContainer.css";
21+
22+
public static final String ROOT_CLASS = "chartjs-diagram";
23+
public static final String DIV_CLASS = ROOT_CLASS + "-div";
24+
public static final String LOADING_COMPONENT_CLASS = ROOT_CLASS + "-loading-comp";
25+
public static final String ERROR_COMPONENT_CLASS = ROOT_CLASS + "-error-comp";
26+
public static final String PROBLEM_INDICATOR_CLASS = ROOT_CLASS + "-problem-indicator";
27+
28+
private ChartContainerStyles()
29+
{
30+
}
31+
}

0 commit comments

Comments
 (0)