Campaign dashboard definition SORMAS-Foundation#2527

 Dynamically resize charts, when screen size changes
Make sure charts take the exact height defined (e.g. 90%)
Reduce header font size to better fit on small screens

Author: Martin Wahnschaffe

sormas-ui/src/main/java/de/symeda/sormas/ui/dashboard/campaigns/CampaignDashboardDiagramComponent.java

@@ -9,14 +9,15 @@
 import java.util.function.Function;
 import java.util.stream.Collectors;
 
-import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.VerticalLayout;
 
 import de.symeda.sormas.api.campaign.diagram.CampaignDiagramDataDto;
 import de.symeda.sormas.api.campaign.diagram.CampaignDiagramDefinitionDto;
 import de.symeda.sormas.api.campaign.diagram.CampaignDiagramSeries;
 import de.symeda.sormas.ui.highcharts.HighChart;
 
-public class CampaignDashboardDiagramComponent extends CssLayout {
+@SuppressWarnings("serial")
+public class CampaignDashboardDiagramComponent extends VerticalLayout {
 
 	private CampaignDiagramDefinitionDto diagramDefinition;
 
@@ -32,8 +33,10 @@ public CampaignDashboardDiagramComponent(CampaignDiagramDefinitionDto diagramDef
 
 		campaignColumnChart = new HighChart();
 
+		setSizeFull();
 		campaignColumnChart.setSizeFull();
 
+		setMargin(false);
 		addComponent(campaignColumnChart);
 //		setExpandRatio(campaignColumnChart, 1);
 
@@ -64,8 +67,6 @@ private void buildDiagramChart(String title) {
 		hcjs.append("var options = {"
 				+ "chart:{ "
 				+ " type: 'column', "
-				+ " width: $(\"#container\").height(), "
-				+ " height: $(\"#container\").width(), "
 				+ " backgroundColor: 'transparent', "
 				+ " borderRadius: '1', "
 				+ " borderWidth: '1', "
@@ -78,7 +79,7 @@ private void buildDiagramChart(String title) {
 				+ "},"
 				+ "legend: { backgroundColor: 'transparent', margin: 30 },"
 				+ "colors: ['#4472C4', '#ED7D31', '#A5A5A5', '#FFC000', '#5B9BD5', '#70AD47', '#FF0000', '#6691C4','#ffba08','#519e8a','#ed254e','#39a0ed','#FF8C00','#344055','#D36135','#82d173'],"
-				+ "title:{ text: '" + title + "'},");
+				+ "title:{ text: '" + title + "', style: { fontSize: '15px' } },");
 		//@formatter:on
 
 		Map<String, Long> stackMap = diagramDefinition.getCampaignDiagramSeriesList()

sormas-ui/src/main/java/de/symeda/sormas/ui/dashboard/campaigns/CampaignDashboardView.java

@@ -118,16 +118,22 @@ public void refreshDashboard() {
 			final VerticalLayout diagramsWrapper = new VerticalLayout();
 			diagramsWrapper.setMargin(new MarginInfo(false, true, false, true));
 			diagramsWrapper.setId(tabId);
-			diagramsWrapper.setSizeFull();
 
-			final CssLayout diagramsLayout = new CssLayout();
-			diagramsLayout.setWidth(
-				dashboardElements.size() == 1 && gridTemplateAreaCreator.getNrOfGridAreaColumns() == 1 ? gridTemplateAreaCreator.getWidthsSum() : 100,
+			diagramsWrapper.setWidth(
+				dashboardElements.size() == 1 && gridTemplateAreaCreator.getGridColumns() == 1 ? gridTemplateAreaCreator.getWidthsSum() : 100,
 				Unit.PERCENTAGE);
-			diagramsLayout.setHeight(gridTemplateAreaCreator.getGridContainerHeight(), Unit.PERCENTAGE);
+			diagramsWrapper.setHeight(gridTemplateAreaCreator.getGridContainerHeight(), Unit.PERCENTAGE);
+
+			final CssLayout diagramsLayout = new CssLayout();
+			diagramsLayout.setSizeFull();
 			final String gridCssClass = tabId.replaceAll("[^a-zA-Z]+", "") + generateRandomString() + GRID_CONTAINER;
 
-			styles.add(createDiagramGridStyle(gridCssClass, gridTemplateAreaCreator.getFormattedGridTemplate()));
+			styles.add(
+				createDiagramGridStyle(
+					gridCssClass,
+					gridTemplateAreaCreator.getFormattedGridTemplate(),
+					gridTemplateAreaCreator.getGridRows(),
+					gridTemplateAreaCreator.getGridColumns()));
 			diagramsLayout.setStyleName(gridCssClass);
 
 			campaignFormDataMap.forEach((campaignDashboardDiagramDto, diagramData) -> {
@@ -162,10 +168,11 @@ private String generateRandomString() {
 		return UUID.randomUUID().toString().substring(0, 6);
 	}
 
-	private String createDiagramGridStyle(String gridCssClass, String gridAreasTemplate) {
+	private String createDiagramGridStyle(String gridCssClass, String gridAreasTemplate, int rows, int columns) {
 		final String s = "." + gridCssClass;
 		campaignDashboardDiagramStyles.add(s);
-		return s + "{ display: grid; grid-gap:10px; grid-auto-columns: 1fr; grid-auto-rows: 1fr; grid-template-areas:" + gridAreasTemplate + "; }";
+		return s + "{ display: grid; grid-gap:1%; grid-auto-columns: " + (100 / columns - 1) + "%; grid-auto-rows: " + (100 / rows - 1)
+			+ "%; grid-template-areas:" + gridAreasTemplate + "; }";
 	}
 
 	private String createDiagramStyle(String diagramCssClass, String diagramId) {

sormas-ui/src/main/java/de/symeda/sormas/ui/dashboard/campaigns/GridTemplateAreaCreator.java

@@ -86,10 +86,22 @@ public Integer getWidthsSum() {
 		return widthsSum;
 	}
 
-	public Integer getNrOfGridAreaColumns() {
+	public Integer getGridColumns() {
 		return nrOfGridAreaColumns;
 	}
 
+	public int getGridRows() {
+		int rows = 0;
+		for (int x = 0; x < nrOfGridAreaRows; x++) {
+			if (rowIsNull(x, nrOfGridAreaColumns)) {
+				continue;
+			} else {
+				rows++;
+			}
+		}
+		return rows;
+	}
+
 	private boolean rowIsNull(int x, Integer nrOfGridColumnAreas) {
 		for (int y = 0; y < nrOfGridColumnAreas; y++) {
 			if (grid[y][x] != null)