Merge pull request #7 from xdev-software/develop

Release

Author: AB-xdev

README.md

@@ -4,66 +4,64 @@
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=xdev-software_vaadin-chartjs-wrapper&metric=alert_status)](https://sonarcloud.io/dashboard?id=xdev-software_vaadin-chartjs-wrapper)
 ![Vaadin 24+](https://img.shields.io/badge/Vaadin%20Platform/Flow-24+-00b4f0)
 
-# Chart.js Wrapper for Vaadin
+# <img src="https://www.chartjs.org/media/logo.svg" height="38" /> Chart.js Wrapper for Vaadin
 
 A Chart.js 4+ Wrapper for Vaadin
 
 ![demo](assets/demo.png)
 
 ## Usage
 
+0. You may want to use a Java model of Chart.js's configuration, like [XDEV's chartjs-java-model](https://github.com/xdev-software/chartjs-java-model).<br/>Otherwise you have to write the JSON yourself.
 1. Define a custom chart or use the ``showChart``-method directly.<br/>Example:
-
-  ```java
-  public class ExampleChartContainer extends ChartContainer
-  {
-    public void show(Data data)
+    ```java
+    public class ExampleChartContainer extends ChartContainer
     {
-      BarData data = ...; // Build the bar chart data from the handed over data
-      this.showChart(new BarChart(data)
-        .setOptions(new BarOptions()
-          .setResponsive(true)
-          .setMaintainAspectRatio(false)
-          .setPlugins(new Plugins()
-            .setTitle(new Title()
-              .setText("Age")
-              .setDisplay(true))))
-        .toJson());
+      public void show(Data data)
+      {
+        BarData data = ...; // Build the bar chart data from the handed over data
+        this.showChart(new BarChart(data)
+          .setOptions(new BarOptions()
+            .setResponsive(true)
+            .setMaintainAspectRatio(false)
+            .setPlugins(new Plugins()
+              .setTitle(new Title()
+                .setText("Age")
+                .setDisplay(true))))
+          .toJson());
+      }
     }
-  }
-  ```
-
+    ```
 2. Add the chart to your view/component:
-
-  ```java
-  public class ExampleView extends VerticalLayout
-  {
-    private final ExampleChartContainer chart = new ExampleChartContainer();
-    
-    public ExampleView()
+    ```java
+    public class ExampleView extends VerticalLayout
     {
-      this.add(this.chart);
-      // ...
-    }
-    
-    private void loadDataAndShowChart()
-    {
-      this.chart.showLoading();
+      private final ExampleChartContainer chart = new ExampleChartContainer();
+      
+      public ExampleView()
+      {
+        this.add(this.chart);
+        // ...
+      }
 
-      UI ui = UI.getCurrent();
-      CompletableFuture.runAsync(() -> {
-        try {
-          var data = ...; // Load some data from the backend
-          // You may also convert the data here and call showChart
-          ui.access(() -> this.chart.show(data));
-        } catch (Exception ex) {
-          // Display the error message when loading fails
-          ui.access(() -> this.chart.showFailed(ex.getMessage()));
-        }
-      });
-    }	
-  }
-  ```
+      private void loadDataAndShowChart()
+      {
+        this.chart.showLoading();
+        
+        UI ui = UI.getCurrent();
+        CompletableFuture.runAsync(() -> {
+          try {
+            var data = ...; // Load some data from the backend
+            // You may also convert the data here and call showChart
+            ui.access(() -> this.chart.show(data));
+          } catch (Exception ex) {
+            // Display the error message when loading fails
+            ui.access(() -> this.chart.showFailed(ex.getMessage()));
+          }
+        });
+      }	
+    }
+    ```
 
 For more usage examples please have a look at [the demo](./vaadin-chartjs-wrapper-demo/src/main/java/software/xdev/vaadin/chartjs/demo/).
 

vaadin-chartjs-wrapper/src/main/java/software/xdev/vaadin/chartjs/ChartCom.java

@@ -15,6 +15,9 @@
  */
 package software.xdev.vaadin.chartjs;
 
+/**
+ * Interface for communicating with charts.
+ */
 public interface ChartCom
 {
 	void showLoading();

vaadin-chartjs-wrapper/src/main/java/software/xdev/vaadin/chartjs/ChartContainer.java

@@ -17,12 +17,13 @@
 
 import java.util.Objects;
 import java.util.UUID;
+import java.util.function.BiConsumer;
+import java.util.function.BiFunction;
 
 import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.component.html.Div;
-import com.vaadin.flow.component.icon.Icon;
 import com.vaadin.flow.component.icon.VaadinIcon;
 import com.vaadin.flow.component.shared.Tooltip;
 import com.vaadin.flow.theme.lumo.LumoUtility;
@@ -39,19 +40,26 @@
 @JsModule(ChartThemeManager.LOCATION)
 @JsModule(ChartControlFunc.LOCATION)
 @CssImport(ChartContainerStyles.LOCATION)
+@SuppressWarnings("java:S1948") // UI classes will never be serialized due to security
 public abstract class ChartContainer extends Div implements ChartCom
 {
 	protected Component loading = new DefaultLoadingLoadComponent();
 	protected Component error = new DefaultLoadingErrorComponent();
 	protected Div chartJSDiv = new Div();
 
-	protected Icon icoProblemsIndicator = VaadinIcon.WARNING.create();
+	protected Component problemsIndicator = VaadinIcon.WARNING.create();
+	
+	protected BiConsumer<Component, String> problemsIndicatorToolTipFunc =
+		(comp, msg) -> Tooltip.forComponent(comp).withText(msg);
+	protected BiFunction<ChartContainer, String, String> wrapJsFunc = (self, js) -> js;
+	protected BiConsumer<ChartContainer, String> executeJsFunc =
+		(self, js) -> self.getElement().executeJs(js);
 
 	protected ChartContainer()
 	{
 		this.loading.addClassName(ChartContainerStyles.LOADING_COMPONENT_CLASS);
 		this.error.addClassName(ChartContainerStyles.ERROR_COMPONENT_CLASS);
-		this.icoProblemsIndicator.addClassName(ChartContainerStyles.PROBLEM_INDICATOR_CLASS);
+		this.problemsIndicator.addClassName(ChartContainerStyles.PROBLEM_INDICATOR_CLASS);
 
 		this.chartJSDiv.addClassNames(
 			ChartContainerStyles.DIV_CLASS,
@@ -67,7 +75,7 @@ protected ChartContainer()
 
 	protected String createChartJSDivId()
 	{
-		return "chartjsdiv" + UUID.randomUUID();
+		return "chartjsdiv-" + UUID.randomUUID();
 	}
 
 	public String getChartJSDivId()
@@ -115,9 +123,11 @@ protected void clear(final boolean forDisplayingChart)
 
 	public void showProblemsIndicator(final String problemsText)
 	{
-		this.add(this.icoProblemsIndicator);
-		Tooltip.forComponent(this.icoProblemsIndicator)
-			.withText(problemsText);
+		this.add(this.problemsIndicator);
+		if(this.problemsIndicatorToolTipFunc != null)
+		{
+			this.problemsIndicatorToolTipFunc.accept(this.problemsIndicator, problemsText);
+		}
 	}
 
 	public void showChart(final String payloadJson)
@@ -139,7 +149,7 @@ protected void tryDestroyChart()
 
 	protected void executeJS(final String js)
 	{
-		this.getElement().executeJs(js);
+		this.executeJsFunc.accept(this, this.wrapJsFunc.apply(this, js));
 	}
 
 	// region Getter + Setter
@@ -173,14 +183,45 @@ public void setChartJSDiv(final Div chartJSDiv)
 		this.chartJSDiv = chartJSDiv;
 	}
 
-	public Icon getIcoProblemsIndicator()
+	public Component getProblemsIndicator()
+	{
+		return this.problemsIndicator;
+	}
+	
+	public void setProblemsIndicator(final Component problemsIndicator)
+	{
+		this.problemsIndicator = problemsIndicator;
+	}
+	
+	public BiConsumer<Component, String> getProblemsIndicatorToolTipFunc()
+	{
+		return this.problemsIndicatorToolTipFunc;
+	}
+	
+	public void setProblemsIndicatorToolTipFunc(final BiConsumer<Component, String> problemsIndicatorToolTipFunc)
+	{
+		this.problemsIndicatorToolTipFunc = problemsIndicatorToolTipFunc;
+	}
+	
+	public BiFunction<ChartContainer, String, String> getWrapJsFunc()
 	{
-		return this.icoProblemsIndicator;
+		return this.wrapJsFunc;
 	}
 
-	public void setIcoProblemsIndicator(final Icon icoProblemsIndicator)
+	public void setWrapJsFunc(final BiFunction<ChartContainer, String, String> wrapJsFunc)
 	{
-		this.icoProblemsIndicator = icoProblemsIndicator;
+		this.wrapJsFunc = Objects.requireNonNull(wrapJsFunc);
 	}
+	
+	public BiConsumer<ChartContainer, String> getExecuteJsFunc()
+	{
+		return this.executeJsFunc;
+	}
+	
+	public void setExecuteJsFunc(final BiConsumer<ChartContainer, String> executeJsFunc)
+	{
+		this.executeJsFunc = Objects.requireNonNull(executeJsFunc);
+	}
+	
 	// endregion
 }

vaadin-chartjs-wrapper/src/main/java/software/xdev/vaadin/chartjs/ClientToServerUpdateableChartContainer.java

@@ -31,6 +31,7 @@
  * @implNote internal/original: TIMELINE-709/2020-09-01
  */
 @JsModule(ChartClientToServerUpdater.LOCATION)
+@SuppressWarnings("java:S110") // Tell that to Vaadin, not me
 public abstract class ClientToServerUpdateableChartContainer extends ChartContainer
 {
 	@ClientCallable
@@ -39,11 +40,6 @@ public void updateFromClient()
 		this.update();
 	}
 
-	protected String maybeWrapForErrorFeedback(final String js)
-	{
-		return js;
-	}
-	
 	/**
 	 * Tries to run a client-side update via a script-tag.
 	 * <p>
@@ -52,9 +48,11 @@ protected String maybeWrapForErrorFeedback(final String js)
 	 */
 	public ClientToServerUpdateableChartContainer scheduleUpdateViaScript()
 	{
-		final String js = this.maybeWrapForErrorFeedback(String.format(
-			ChartClientToServerUpdater.CHECK_IF_EXISTS_ON_CLIENT_AND_UPDATE_SERVER,
-			this.getChartJSDivId()));
+		final String js = this.wrapJsFunc.apply(
+			this,
+			String.format(
+				ChartClientToServerUpdater.CHECK_IF_EXISTS_ON_CLIENT_AND_UPDATE_SERVER,
+				this.getChartJSDivId()));
 
 		final Element el = new Element("script");
 		el.setAttribute("type", "text/javascript");