Skip to content

Commit

Permalink
[GovWayMonitor]
Browse files Browse the repository at this point in the history 
Il report 'heatmap' fornito con la distribuzione statistica in 3 dimensioni presente nella funzionalità di "Analisi Statistica" è stato migliorato per:
- contenere una legenda che descriva la corrispondenza tra tonalità del colore e misura rappresentata;
- possibilità di visualizzare in ogni quadratino la misura.

Squashed commit of the following:

commit 23edb24
Author: Giuliano Pintori <pintori@link.it>
Date:   Tue Feb 13 09:28:16 2024 +0100

    [GovWayMonitor]
    Aggiunta visualizzazione delle label dei valori all'interno del grafico heatmap.
    Aggiunta visualizzazione della legenda all'interno del grafico heatmap.
  • Loading branch information
@pintorig @andreapoli
pintorig authored and andreapoli committed Feb 13, 2024
1 parent 7dd67e3 commit be9769c
Show file tree
Hide file tree
Showing 21 changed files with 435 additions and 83 deletions.
8 changes: 8 additions & 0 deletions ChangeLog
View file
@@ -1,3 +1,11 @@
2024-02-13 Giuliano Pintori <pintori@link.it>

* [GovWayMonitor]
Aggiunta funzionalità OP-1710
Il report 'heatmap' fornito con la distribuzione statistica in 3 dimensioni presente nella funzionalità di "Analisi Statistica" è stato migliorato per:
- contenere una legenda che descriva la corrispondenza tra tonalità del colore e misura rappresentata;
- possibilità di visualizzare in ogni quadratino la misura.

2024-02-10 Andrea Poli <apoli@link.it>

* [GovWayCore]
Expand Down
16 changes: 14 additions & 2 deletions tools/web_interfaces/monitor/deploy/pages/stat/pages/form/distribAzioneGrafico.xhtml
View file
Expand Up @@ -444,7 +444,7 @@
var chartId = 'distribuzioneAzioneHeatmapId';
var chartDivId = 'distribuzioneAzioneHeatmapDiv';
var chartWidth = jQuery('#chartPanelHeatmap_body').width() -40;
var chartHeight = 650;
var chartHeight = 700;
var chartType = 'heatmap';
var data0 = '#{distribuzionePerAzioneBean.data}';
// init
Expand Down Expand Up @@ -491,7 +491,7 @@
</style>
</a4j:outputPanel>
<h:inputHidden value="true" id="usaSVG"/>
<h:panelGrid columns="#{distribuzioneAzioneSearchForm.useGraficiSVG ? 5 : 3 }" >
<h:panelGrid columns="#{distribuzioneAzioneSearchForm.useGraficiSVG ? 7 : 3 }" >
<h:panelGrid columns="2" rendered="#{distribuzioneAzioneSearchForm.useGraficiSVG}">
<h:outputLabel value="Label" styleClass="direzioneLabelGrafici" />
<rich:comboBox id="rotazioneCombo" value="#{distribuzionePerAzioneBean.direzioneLabel}" defaultLabel="Seleziona Label"
Expand All @@ -515,6 +515,18 @@
<a4j:outputPanel rendered="#{distribuzioneAzioneSearchForm.useGraficiSVG}" layout="block" >
<h:outputText value="&#160;&#160;&#160;&#160;&#160;&#160;" />
</a4j:outputPanel>
<h:panelGrid columns="2" rendered="#{distribuzioneAzioneSearchForm.useGraficiSVG}">
<h:outputLabel value="Mostra Valori" styleClass="labelMostraValoriGrafico" />
<rich:comboBox id="visualizzaValoriNelleCelle" value="#{distribuzionePerAzioneBean.visualizzaTotaleNelleCelleGraficoHeatmap}"
defaultLabel="Mostra valori grafico" width="55" enableManualInput="false" converter="selectItemConverter">
<f:selectItem itemValue="true" itemLabel="Si"/>
<f:selectItem itemValue="false" itemLabel="No"/>
<a4j:support status="mainStatus" event="onselect" reRender="scriptHeatmapChartPanel,gridComandiHeatmap" actionListener="#{distribuzionePerAzioneBean.updateChartVisualizzaTotaleNelleCelleGraficoHeatmap}" />
</rich:comboBox>
</h:panelGrid>
<a4j:outputPanel rendered="#{distribuzioneAzioneSearchForm.useGraficiSVG}" layout="block" >
<h:outputText value="&#160;&#160;&#160;&#160;&#160;&#160;" />
</a4j:outputPanel>
<h:panelGrid columns="2">
<h:outputLabel value="Larghezza Grafico" styleClass="labelSliderGrafici width-160-important"/>
<rich:inputNumberSlider id="sliderLarghezzaGrafico" value="#{distribuzionePerAzioneBean.larghezzaGrafico}" onchange="updateChart3(this)"
Expand Down
16 changes: 14 additions & 2 deletions tools/web_interfaces/monitor/deploy/pages/stat/pages/form/distribErroriGrafico.xhtml
View file
Expand Up @@ -438,7 +438,7 @@
var chartId = 'distribuzioneErroriHeatmapId';
var chartDivId = 'distribuzioneErroriHeatmapDiv';
var chartWidth = jQuery('#chartPanelHeatmap_body').width() -40;
var chartHeight = 650;
var chartHeight = 700;
var chartType = 'heatmap';
var data0 = '#{distribuzionePerErroriBean.data}';
// init
Expand Down Expand Up @@ -485,7 +485,7 @@
</style>
</a4j:outputPanel>
<h:inputHidden value="true" id="usaSVG"/>
<h:panelGrid columns="#{distribuzioneErroriSearchForm.useGraficiSVG ? 5 : 3 }" >
<h:panelGrid columns="#{distribuzioneErroriSearchForm.useGraficiSVG ? 7 : 3 }" >
<h:panelGrid columns="2" rendered="#{distribuzioneErroriSearchForm.useGraficiSVG}">
<h:outputLabel value="Label" styleClass="direzioneLabelGrafici" />
<rich:comboBox id="rotazioneCombo" value="#{distribuzionePerErroriBean.direzioneLabel}" defaultLabel="Seleziona Label"
Expand All @@ -509,6 +509,18 @@
<a4j:outputPanel rendered="#{distribuzioneErroriSearchForm.useGraficiSVG}" layout="block" >
<h:outputText value="&#160;&#160;&#160;&#160;&#160;&#160;" />
</a4j:outputPanel>
<h:panelGrid columns="2" rendered="#{distribuzioneErroriSearchForm.useGraficiSVG}">
<h:outputLabel value="Mostra Valori" styleClass="labelMostraValoriGrafico" />
<rich:comboBox id="visualizzaValoriNelleCelle" value="#{distribuzionePerErroriBean.visualizzaTotaleNelleCelleGraficoHeatmap}"
defaultLabel="Mostra valori grafico" width="55" enableManualInput="false" converter="selectItemConverter">
<f:selectItem itemValue="true" itemLabel="Si"/>
<f:selectItem itemValue="false" itemLabel="No"/>
<a4j:support status="mainStatus" event="onselect" reRender="scriptHeatmapChartPanel,gridComandiHeatmap" actionListener="#{distribuzionePerErroriBean.updateChartVisualizzaTotaleNelleCelleGraficoHeatmap}" />
</rich:comboBox>
</h:panelGrid>
<a4j:outputPanel rendered="#{distribuzioneErroriSearchForm.useGraficiSVG}" layout="block" >
<h:outputText value="&#160;&#160;&#160;&#160;&#160;&#160;" />
</a4j:outputPanel>
<h:panelGrid columns="2">
<h:outputLabel value="Larghezza Grafico" styleClass="labelSliderGrafici width-160-important"/>
<rich:inputNumberSlider id="sliderLarghezzaGrafico" value="#{distribuzionePerErroriBean.larghezzaGrafico}" onchange="updateChart3(this)"
Expand Down
16 changes: 14 additions & 2 deletions tools/web_interfaces/monitor/deploy/pages/stat/pages/form/distribSAGrafico.xhtml
View file
Expand Up @@ -483,7 +483,7 @@
var chartId = 'distribuzioneSAHeatmapId';
var chartDivId = 'distribuzioneSAHeatmapDiv';
var chartWidth = jQuery('#chartPanelHeatmap_body').width() -40;
var chartHeight = 650;
var chartHeight = 700;
var chartType = 'heatmap';
var data0 = '#{distribuzionePerSABean.data}';
// init
Expand Down Expand Up @@ -530,7 +530,7 @@
</style>
</a4j:outputPanel>
<h:inputHidden value="true" id="usaSVG"/>
<h:panelGrid columns="#{distribuzioneSASearchForm.useGraficiSVG ? 5 : 3 }" >
<h:panelGrid columns="#{distribuzioneSASearchForm.useGraficiSVG ? 7 : 3 }" >
<h:panelGrid columns="2" rendered="#{distribuzioneSASearchForm.useGraficiSVG}">
<h:outputLabel value="Label" styleClass="direzioneLabelGrafici" />
<rich:comboBox id="rotazioneCombo" value="#{distribuzionePerSABean.direzioneLabel}" defaultLabel="Seleziona Label"
Expand All @@ -554,6 +554,18 @@
<a4j:outputPanel rendered="#{distribuzioneSASearchForm.useGraficiSVG}" layout="block" >
<h:outputText value="&#160;&#160;&#160;&#160;&#160;&#160;" />
</a4j:outputPanel>
<h:panelGrid columns="2" rendered="#{distribuzioneSASearchForm.useGraficiSVG}">
<h:outputLabel value="Mostra Valori" styleClass="labelMostraValoriGrafico" />
<rich:comboBox id="visualizzaValoriNelleCelle" value="#{distribuzionePerSABean.visualizzaTotaleNelleCelleGraficoHeatmap}"
defaultLabel="Mostra valori grafico" width="55" enableManualInput="false" converter="selectItemConverter">
<f:selectItem itemValue="true" itemLabel="Si"/>
<f:selectItem itemValue="false" itemLabel="No"/>
<a4j:support status="mainStatus" event="onselect" reRender="scriptHeatmapChartPanel,gridComandiHeatmap" actionListener="#{distribuzionePerSABean.updateChartVisualizzaTotaleNelleCelleGraficoHeatmap}" />
</rich:comboBox>
</h:panelGrid>
<a4j:outputPanel rendered="#{distribuzioneSASearchForm.useGraficiSVG}" layout="block" >
<h:outputText value="&#160;&#160;&#160;&#160;&#160;&#160;" />
</a4j:outputPanel>
<h:panelGrid columns="2">
<h:outputLabel value="Larghezza Grafico" styleClass="labelSliderGrafici width-160-important"/>
<rich:inputNumberSlider id="sliderLarghezzaGrafico" value="#{distribuzionePerSABean.larghezzaGrafico}" onchange="updateChart3(this)"
Expand Down
16 changes: 14 additions & 2 deletions tools/web_interfaces/monitor/deploy/pages/stat/pages/form/distribServizioGrafico.xhtml
View file
Expand Up @@ -429,7 +429,7 @@
var chartId = 'distribuzioneServizioHeatmapId';
var chartDivId = 'distribuzioneServizioHeatmapDiv';
var chartWidth = jQuery('#chartPanelHeatmap_body').width() -40;
var chartHeight = 650;
var chartHeight = 700;
var chartType = 'heatmap';
var data0 = '#{distribuzionePerServizioBean.data}';
// init
Expand Down Expand Up @@ -476,7 +476,7 @@
</style>
</a4j:outputPanel>
<h:inputHidden value="true" id="usaSVG"/>
<h:panelGrid columns="#{distribuzioneServizioSearchForm.useGraficiSVG ? 5 : 3 }" >
<h:panelGrid columns="#{distribuzioneServizioSearchForm.useGraficiSVG ? 7 : 3 }" >
<h:panelGrid columns="2" rendered="#{distribuzioneServizioSearchForm.useGraficiSVG}">
<h:outputLabel value="Label" styleClass="direzioneLabelGrafici" />
<rich:comboBox id="rotazioneCombo" value="#{distribuzionePerServizioBean.direzioneLabel}" defaultLabel="Seleziona Label"
Expand All @@ -500,6 +500,18 @@
<a4j:outputPanel rendered="#{distribuzioneServizioSearchForm.useGraficiSVG}" layout="block" >
<h:outputText value="&#160;&#160;&#160;&#160;&#160;&#160;" />
</a4j:outputPanel>
<h:panelGrid columns="2" rendered="#{distribuzioneServizioSearchForm.useGraficiSVG}">
<h:outputLabel value="Mostra Valori" styleClass="labelMostraValoriGrafico" />
<rich:comboBox id="visualizzaValoriNelleCelle" value="#{distribuzionePerServizioBean.visualizzaTotaleNelleCelleGraficoHeatmap}"
defaultLabel="Mostra valori grafico" width="55" enableManualInput="false" converter="selectItemConverter">
<f:selectItem itemValue="true" itemLabel="Si"/>
<f:selectItem itemValue="false" itemLabel="No"/>
<a4j:support status="mainStatus" event="onselect" reRender="scriptHeatmapChartPanel,gridComandiHeatmap" actionListener="#{distribuzionePerServizioBean.updateChartVisualizzaTotaleNelleCelleGraficoHeatmap}" />
</rich:comboBox>
</h:panelGrid>
<a4j:outputPanel rendered="#{distribuzioneServizioSearchFormdistribuzioneServizioSearchForm.useGraficiSVG}" layout="block" >
<h:outputText value="&#160;&#160;&#160;&#160;&#160;&#160;" />
</a4j:outputPanel>
<h:panelGrid columns="2">
<h:outputLabel value="Larghezza Grafico" styleClass="labelSliderGrafici width-160-important"/>
<rich:inputNumberSlider id="sliderLarghezzaGrafico" value="#{distribuzionePerServizioBean.larghezzaGrafico}" onchange="updateChart3(this)"
Expand Down
16 changes: 14 additions & 2 deletions tools/web_interfaces/monitor/deploy/pages/stat/pages/form/distribSoggettoGrafico.xhtml
View file
Expand Up @@ -431,7 +431,7 @@
var chartId = 'distribuzioneSoggettoHeatmapId';
var chartDivId = 'distribuzioneSoggettoHeatmapDiv';
var chartWidth = jQuery('#chartPanelHeatmap_body').width() -40;
var chartHeight = 650;
var chartHeight = 700;
var chartType = 'heatmap';
var data0 = '#{distribuzionePerSoggettoBean.data}';
// init
Expand Down Expand Up @@ -478,7 +478,7 @@
</style>
</a4j:outputPanel>
<h:inputHidden value="true" id="usaSVG"/>
<h:panelGrid columns="#{distribuzioneSoggettoSearchForm.useGraficiSVG ? 5 : 3 }" >
<h:panelGrid columns="#{distribuzioneSoggettoSearchForm.useGraficiSVG ? 7 : 3 }" >
<h:panelGrid columns="2" rendered="#{distribuzioneSoggettoSearchForm.useGraficiSVG}">
<h:outputLabel value="Label" styleClass="direzioneLabelGrafici" />
<rich:comboBox id="rotazioneCombo" value="#{distribuzionePerSoggettoBean.direzioneLabel}" defaultLabel="Seleziona Label"
Expand All @@ -502,6 +502,18 @@
<a4j:outputPanel rendered="#{distribuzioneSoggettoSearchForm.useGraficiSVG}" layout="block" >
<h:outputText value="&#160;&#160;&#160;&#160;&#160;&#160;" />
</a4j:outputPanel>
<h:panelGrid columns="2" rendered="#{distribuzioneSoggettoSearchForm.useGraficiSVG}">
<h:outputLabel value="Mostra Valori" styleClass="labelMostraValoriGrafico" />
<rich:comboBox id="visualizzaValoriNelleCelle" value="#{distribuzionePerSoggettoBean.visualizzaTotaleNelleCelleGraficoHeatmap}"
defaultLabel="Mostra valori grafico" width="55" enableManualInput="false" converter="selectItemConverter">
<f:selectItem itemValue="true" itemLabel="Si"/>
<f:selectItem itemValue="false" itemLabel="No"/>
<a4j:support status="mainStatus" event="onselect" reRender="scriptHeatmapChartPanel,gridComandiHeatmap" actionListener="#{distribuzionePerSoggettoBean.updateChartVisualizzaTotaleNelleCelleGraficoHeatmap}" />
</rich:comboBox>
</h:panelGrid>
<a4j:outputPanel rendered="#{distribuzioneSoggettoSearchForm.useGraficiSVG}" layout="block" >
<h:outputText value="&#160;&#160;&#160;&#160;&#160;&#160;" />
</a4j:outputPanel>
<h:panelGrid columns="2">
<h:outputLabel value="Larghezza Grafico" styleClass="labelSliderGrafici width-160-important"/>
<rich:inputNumberSlider id="sliderLarghezzaGrafico" value="#{distribuzionePerSoggettoBean.larghezzaGrafico}" onchange="updateChart3(this)"
Expand Down
6 changes: 6 additions & 0 deletions tools/web_interfaces/monitor/deploy/properties/monitor.properties
View file
Expand Up @@ -466,6 +466,12 @@ statistiche.timeoutRicercaStatistiche=60
# Visualizzazione latenza porta
statistiche.latenzaPorta.enabled=false

# Visualizzazione dei totali all'interno delle celle del grafico heatmap
statistiche.graficoHeatmap.visualizzaValoriNelleCelle.enabled=false

# Indica se visualizzare il totale uguale a zero all'interno delle celle del grafico heatmap
statistiche.graficoHeatmap.visualizzaValoreZero.enabled=false

# Configurazione per forzare l'utilizzo di un indice
# Proprietà che possono essere definite o direttamente nel file di properties della govwayMonitor o all'interno del file indicato nella property 'forceIndex.repository'
# NOTA: il file indicato nella property 'forceIndex.repository' viene riletto sempre e quindi permette uno switch immediato sull'utilizzo o meno di un indice
Expand Down
6 changes: 6 additions & 0 deletions tools/web_interfaces/monitor/deploy/tema_css/css/linkit-form.css
View file
Expand Up @@ -419,6 +419,12 @@ input[type="submit"]:hover, input[type="button"]:hover, .buttonrow a:hover, .but
background-image: none;
}

.labelMostraValoriGrafico {
width: 90px !important;
margin-right: 0px !important;
padding-top: 4px !important;
}

.labelSliderGrafici {
width: 160px !important;
padding-top: 4px !important;
Expand Down
79 changes: 38 additions & 41 deletions tools/web_interfaces/monitor/deploy/web-content/scripts/ChartMap.js
View file
Expand Up @@ -476,6 +476,9 @@ function chartMapping(_dataJson, _type, _size) {
dpChart.clickItemLegenda = _dataJson.hasOwnProperty('clickItemLegenda')?_dataJson.clickItemLegenda:true;
dpChart.valoreRealeTorta = _dataJson.hasOwnProperty('valoreRealeTorta')?_dataJson.valoreRealeTorta:false;
dpChart.pieTotal = 0;
dpChart.heatMapVisualizzaValori = _dataJson.hasOwnProperty('visualizzaValoreNellaCella')?_dataJson.visualizzaValoreNellaCella:false;
dpChart.heatMapVisualizzaValoreZero = _dataJson.hasOwnProperty('visualizzaValoreZero')?_dataJson.visualizzaValoreZero:false;
dpChart.heatMapLegendValues = _dataJson.hasOwnProperty('labelLegenda')?_dataJson.labelLegenda:[];

var serieRef = [];
var serie = [];
Expand All @@ -497,8 +500,8 @@ function chartMapping(_dataJson, _type, _size) {
if(_type == 'heatmap') {
if(_dataJson.hasOwnProperty("scalaValori")) {
// colori
var minTmp = _dataJson.scalaValori.min;
var maxTmp = _dataJson.scalaValori.max;
let minTmp = _dataJson.scalaValori.min;
let maxTmp = _dataJson.scalaValori.max;

// range di colori minimo e massimo
heatMapColorRange.push(minTmp.colore);
Expand All @@ -515,50 +518,44 @@ function chartMapping(_dataJson, _type, _size) {

if(_dataJson.hasOwnProperty("categorie") && _dataJson.hasOwnProperty("dati") &&
_dataJson.hasOwnProperty("coloriAutomatici")) {
serieRef = _dataJson.categorie.map(function (item) {
return item.key;
});
if (!_dataJson.coloriAutomatici) {
serieColors = _dataJson.categorie.map(function (item) {
return item.colore;
});
}
else serieColors = colorSerie(serieRef.length - 1);
for (var i = 0; i < _dataJson.categorie.length; i++) {
labelRef[_dataJson.categorie[i].key] = labelUnescape(_dataJson.categorie[i].label);
}
serie = _dataJson.dati.map(function (item) {
var obj = {};
var rowdata = [];
for (var i = 0; i < serieRef.length; i++) {
rowdata.push(obj[serieRef[i]] = item[serieRef[i]]);
}
return rowdata;
});

//Check for no results
if(noData != 0) {
tips = _dataJson.dati.map(function (item) {
var obj = {};
var rowdata = [];
for (var i = 0; i < serieRef.length; i++) {
rowdata.push(obj[serieRef[i] + '_tooltip'] = labelUnescape(item[serieRef[i] + '_tooltip']));
}
return rowdata;
});

// serie asse x
var xSeriesTmp = _dataJson.dati.map(function(item){return decodeHTML(item.xLabel);});
xSeries = [...new Set(xSeriesTmp)];
let xSeriesTmp = _dataJson.dati.map(function(item){
return { valore: decodeHTML(item.x), label: decodeHTML(item.xLabel) };
});
// Elimina i duplicati basati su valore e label
jQuery.each(xSeriesTmp, function(index, item) {
var isDuplicate = false;
jQuery.each(xSeries, function(innerIndex, innerItem) {
if (innerItem.valore === item.valore && innerItem.label === item.label) {
isDuplicate = true;
return false; // Esci dal ciclo interno
}
});
if (!isDuplicate) {
xSeries.push(item);
}
});

// serie asse y
var ySeriesTmp = _dataJson.dati.map(function(item){return decodeHTML(item.yLabel);});
ySeries = [...new Set(ySeriesTmp)];

cats = _dataJson.dati.map(function (cat) {
return { data: decodeHTML(labelUnescape(cat.xLabel)), visible: (cat.xLabel == undefined || cat.xLabel != '') };
});


let ySeriesTmp = _dataJson.dati.map(function(item){
return { valore: decodeHTML(item.y), label: decodeHTML(item.yLabel) };
});
// Elimina i duplicati basati su valore e label
jQuery.each(ySeriesTmp, function(index, item) {
var isDuplicate = false;
jQuery.each(ySeries, function(innerIndex, innerItem) {
if (innerItem.valore === item.valore && innerItem.label === item.label) {
isDuplicate = true;
return false; // Esci dal ciclo interno
}
});
if (!isDuplicate) {
ySeries.push(item);
}
});
}
}

Expand Down

0 comments on commit be9769c

Please sign in to comment.