N°541 - Dashlets: Improve readability when to much labels (pie chart) or too long labels (bar chart)

application/displayblock.class.inc.php

@@ -1611,7 +1611,6 @@ JS
 
 			$iTotalCount = 0;
 			$aURLs = array();
-			$iMaxNbCharsInLabel = 0;
 
 			foreach ($aRes as $iRow => $aRow) {
 				$sValue = $aRow['grouped_by_1'];
@@ -1623,9 +1622,6 @@ JS
 					'value' => (float)$aRow[$sFctVar],
 				);
 
-				if ($iMaxNbCharsInLabel < mb_strlen($sValue)) {
-					$iMaxNbCharsInLabel = mb_strlen($sValue);
-				}
 
 				// Build the search for this subset
 				$oSubsetSearch = $this->m_oFilter->DeepClone();
@@ -1643,9 +1639,13 @@ JS
 
 		switch ($sChartType) {
 			case 'bars':
-				$aNames = array();
+				$iMaxNbCharsInLabel = 0;
+				$aNames = [];
 				foreach ($aValues as $idx => $aValue) {
 					$aNames[$idx] = $aValue['label'];
+					if ($iMaxNbCharsInLabel < mb_strlen($aValue['label'])) {
+						$iMaxNbCharsInLabel = mb_strlen($aValue['label']);
+					}
 				}
 				$oBlock = new BlockChartAjaxBars();
 				$oBlock->sJSNames = json_encode($aNames);
@@ -1653,21 +1653,31 @@ JS
 				$oBlock->sId = $sId;
 				$oBlock->sJSURLs = $sJSURLs;
 				$oBlock->sURLForRefresh = str_replace("'", "\'", $sUrl);
+				$oBlock->iMaxNbCharsInLabel = $iMaxNbCharsInLabel;
 				break;
 
 			case 'pie':
-				$aColumns = array();
+				$aColumns = [];
-				$aNames = array();
+				$aNames = [];
 				foreach ($aValues as $idx => $aValue) {
 					$aColumns[] = array('series_'.$idx, (float)$aValue['value']);
 					$aNames['series_'.$idx] = $aValue['label'];
 				}
+
+				$iNbLinesToAddForName = 0;
+				if (count($aNames) > 50) {
+					// Calculation of the number of legends line add to the height of the graph to have a maximum of 5 legend columns
+					$iNbLinesIncludedInChartHeight = 10;
+					$iNbLinesToAddForName = ceil(count($aNames) / 5) - $iNbLinesIncludedInChartHeight;
+				}
+
 				$oBlock = new BlockChartAjaxPie();
 				$oBlock->sJSColumns = json_encode($aColumns);
 				$oBlock->sJSNames = json_encode($aNames);
 				$oBlock->sId = $sId;
 				$oBlock->sJSURLs = $sJSURLs;
 				$oBlock->sURLForRefresh = str_replace("'", "\'", $sUrl);
+				$oBlock->iNbLinesToAddForName = $iNbLinesToAddForName;
 				break;
 		}
 		if (isset($aExtraParams["surround_with_panel"]) && $aExtraParams["surround_with_panel"]) {

sources/application/UI/DisplayBlock/BlockChartAjaxBars/BlockChartAjaxBars.php

@@ -28,7 +28,9 @@ class BlockChartAjaxBars extends UIBlock
 	public $sId;
 	/** @var string */
 	public $sJSURLs;
-
+	/** @var string */
 	public $sURLForRefresh;
+	/** @var int */
+	public $iMaxNbCharsInLabel;
 
 }

sources/application/UI/DisplayBlock/BlockChartAjaxPie/BlockChartAjaxPie.php

@@ -28,6 +28,8 @@ class BlockChartAjaxPie extends UIBlock
 	public $sJSURLs;
 	/** @var string */
 	public $sJSNames;
-
+	/** @var string */
 	public $sURLForRefresh;
+	/** @var int */
+	public $iNbLinesToAddForName;
 }

templates/application/display-block/block-chart-ajax-bars/layout.js.twig

@@ -1,5 +1,11 @@
 {# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
+
+var iChartDefaultHeight = 200,
+        iChartLegendHeight = 6 * {{ oUIBlock.iMaxNbCharsInLabel }},
+        iChartTotalHeight = iChartDefaultHeight+iChartLegendHeight;
+$('#my_chart_{{ oUIBlock.sId }}').height(iChartTotalHeight+'px');
+
 var chart = c3.generate({
     bindto: d3.select('#my_chart_{{ oUIBlock.sId }}'),
     data: {

templates/application/display-block/block-chart-ajax-pie/layout.js.twig

@@ -1,6 +1,12 @@
 {# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
 
+// Calculate height of graph : 200px (minimum height for the chart) + 20*iNbLinesToAddForName for the legend
+var iChartDefaultHeight = 200,
+        iChartLegendHeight = 20 * {{ oUIBlock.iNbLinesToAddForName }} ,
+        iChartTotalHeight = (iChartDefaultHeight+iChartLegendHeight);
+$('#my_chart_{{ oUIBlock.sId }}').height(iChartTotalHeight+'px');
+
 var chart = c3.generate({
     bindto: d3.select('#my_chart_{{ oUIBlock.sId }}'),
     data: {
@@ -9,7 +15,7 @@ var chart = c3.generate({
         names: {{ oUIBlock.sJSNames|raw }},
         onclick: function (d) {
             var aURLs = {{ oUIBlock.sJSURLs|raw }};
-            window.location.href= aURLs[d.index];
+            window.location.href = aURLs[d.index];
         },
         order: null
     },
@@ -19,17 +25,19 @@ var chart = c3.generate({
     },
     tooltip: {
         format: {
-            value: function (value) { return value; }
+            value: function (value) {
+                return value;
+            }
         }
-    }
+    },
 });
 
-if (typeof(charts) === "undefined")
+if (typeof (charts) === "undefined")
 {
     charts = [];
-	refreshChart = [];
+    refreshChart = [];
 }
-var idxChart=charts.length;
+var idxChart = charts.length;
 charts.push(chart);
 var refreshChart{{ oUIBlock.sId|sanitize(constant('utils::ENUM_SANITIZATION_FILTER_VARIABLE_NAME')) }}='	$.post("{{ oUIBlock.sURLForRefresh|raw }}&refresh='+idxChart+'","", function (data) {'+
 															'charts['+idxChart+'].unload();'+