composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-13 07:24:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
acognet
2023-04-24 14:15:00 +02:00
parent f839638e0b
commit d6e5069dd5
5 changed files with 43 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
application/displayblock.class.inc.php
View File

@@ -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();
$aNames = array();
$aColumns = [];
$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"]) {

4
sources/application/UI/DisplayBlock/BlockChartAjaxBars/BlockChartAjaxBars.php
View File

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

4
sources/application/UI/DisplayBlock/BlockChartAjaxPie/BlockChartAjaxPie.php
View File

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

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

@@ -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: {

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

@@ -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();'+