SORMAS-Foundation#3349: added ability to switch from column to bar chart, where column is default as defined in DiagramType

Author: ssferrazza

sormas-api/src/main/java/de/symeda/sormas/api/i18n/Captions.java

@@ -715,6 +715,8 @@ public interface Captions {
 	String dashboardUncooperative = "dashboardUncooperative";
 	String dashboardUnderFollowUp = "dashboardUnderFollowUp";
 	String dashboardUnderFollowUpShort = "dashboardUnderFollowUpShort";
+	String dashboardViewAsBarChart = "dashboardViewAsBarChart";
+	String dashboardViewAsColumnChart = "dashboardViewAsColumnChart";
 	String dashboardWeekBefore = "dashboardWeekBefore";
 	String dashboardYesterday = "dashboardYesterday";
 	String date = "date";

sormas-api/src/main/resources/captions.properties

@@ -792,6 +792,8 @@ dashboardShowDataLabels=Show data labels
 dashboardHideDataLabels=Hide data labels
 dashboardAggregatedNumber=Count
 dashboardProportion=Proportion (%)
+dashboardViewAsColumnChart=View as Column Chart
+dashboardViewAsBarChart=View as Bar Chart
 
 defaultRegion=Default Region
 defaultDistrict=Default District

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

@@ -18,6 +18,7 @@
 
 import com.vaadin.ui.JavaScript;
 import com.vaadin.ui.JavaScriptFunction;
+import de.symeda.sormas.api.campaign.diagram.DiagramType;
 import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.text.StringEscapeUtils;
 
@@ -46,6 +47,7 @@ public class CampaignDashboardDiagramComponent extends VerticalLayout {
 	private final Map<CampaignDashboardTotalsReference, Double> totalValuesMap;
 	private boolean totalValuesWithoutStacks;
 	private boolean showPercentages;
+	private boolean showAsColumnChart;
 	private boolean showDataLabels = false;
 	private final HighChart campaignColumnChart;
 
@@ -63,6 +65,7 @@ public CampaignDashboardDiagramComponent(
 			totalValuesWithoutStacks = true;
 		}
 
+		showAsColumnChart = DiagramType.values().length > 0 && DiagramType.COLUMN == DiagramType.values()[0];
 		campaignColumnChart = new HighChart();
 
 		setSizeFull();
@@ -107,6 +110,12 @@ public CampaignDashboardDiagramComponent(
 					buildDiagramChart(diagramDefinition.getDiagramCaption(), campaignJurisdictionLevelGroupBy);
 				});
 
+		JavaScript.getCurrent()
+				.addFunction("changeDiagramChartType_" + diagramDefinition.getDiagramId(), (JavaScriptFunction) jsonArray -> {
+					setShowAsColumnChart(!isShowAsColumnChart());
+					buildDiagramChart(diagramDefinition.getDiagramCaption(), campaignJurisdictionLevelGroupBy);
+				});
+
 		buildDiagramChart(diagramDefinition.getDiagramCaption(), campaignJurisdictionLevelGroupBy);
 	}
 
@@ -116,7 +125,7 @@ public void buildDiagramChart(String title, CampaignJurisdictionLevel campaignJu
 		//@formatter:off
 		hcjs.append("var options = {"
 				+ "chart:{ "
-				+ " type: 'column', "
+				+ " type: '" + (showAsColumnChart ? "column" : "bar") + "', "
 				+ " backgroundColor: 'white', "
 				+ " borderRadius: '1', "
 				+ " borderWidth: '1', "
@@ -143,6 +152,15 @@ public void buildDiagramChart(String title, CampaignJurisdictionLevel campaignJu
 						: I18nProperties.getCaption(Captions.dashboardShowPercentageValues))
 					+ "' } ");
 		}
+
+		hcjs.append(
+				", toggleChartType: { onclick: function() { window.changeDiagramChartType_" + diagramDefinition.getDiagramId()
+						+ "(); }, text: '"
+						+ (showAsColumnChart
+						   ? I18nProperties.getCaption(Captions.dashboardViewAsBarChart)
+						   : I18nProperties.getCaption(Captions.dashboardViewAsColumnChart))
+						+ "' } ");
+
 		hcjs.append(" }, ");
 
 		hcjs.append(" buttons:{ contextButton:{ theme:{ fill: 'transparent' }, ")
@@ -154,6 +172,7 @@ public void buildDiagramChart(String title, CampaignJurisdictionLevel campaignJu
 			hcjs.append(", 'togglePercentages'");
 		}
 
+		hcjs.append(", 'toggleChartType'");
 		hcjs.append("]");
 
 		final Map<String, Long> stackMap = diagramDefinition.getCampaignDiagramSeries()
@@ -336,4 +355,12 @@ public boolean isShowDataLabels() {
 	public void setShowDataLabels(boolean showDataLabels) {
 		this.showDataLabels = showDataLabels;
 	}
+
+	public boolean isShowAsColumnChart() {
+		return showAsColumnChart;
+	}
+
+	public void setShowAsColumnChart(boolean showAsColumnChart) {
+		this.showAsColumnChart = showAsColumnChart;
+	}
 }