Histogramme empilé / Stacked-Bar chart

Indicateurs simples

Indicateur Histogramme empilé / Stacked-Bar chart

Description

Disponible depuis la version 1.2.0 de moovapps-kit-indicators.

L’histogramme est construit grâce à la bibliothèque dc.js et appartient à la famille “barChart”. Ainsi, il utilise tout les paramètres de Filtrage Général. De plus, il fait partie de MarginMixin, donc il utilise aussi tout les paramètres de Marges.

Paramétrage

variables	Valeurs possibles	Valeur par défaut	Commentaire	Dependance
class	com.moovapps.kit.indicators.controllers.extensions.DefaultIndicatorExtension	Aucune	Fonctionnalité à définir, en évolution	Aucune
scaleBand	Boolean	false	recommanded to false: cf d3.scaleBand()	Aucune
average	boolean	false	Permet de faire une moyenne des yAxis selon zAxis	Aucune
centerBar	Boolean	true	Centre les barres autour de leur valeur respective	Aucune
elasticityY	Boolean	false	Redimensionne à chaque filtrage le graphique	Aucune
colorsRange	Couleurs hexa code	#6495ED	Personnalise toutes les barres uniforméments(séparateur: “,”)	Aucune
renderLabel	Boolean	false	Affiche le total au dessus des colonnes	Aucune
renderStackLabel	Boolean	false	Affiche la valeur à l’intérieur de chaque épilement	Aucune
orderxAxis	Boolean	false	Ordonne l’axe des X	Aucune
timeout	Integer	100	An hotfix to translate graphique on right	Aucune

Exemples de paramétrage

Remarque

Requête pour l’exemple

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


SELECT xAxis, xAxisName, yAxis, zAxis, zAxisName, dateFieldFilter, fieldFilter
FROM (
	SELECT  
		r.ProduitId AS xAxis,
		r.Produit AS xAxisName,
		r.NoteDuClient AS yAxis,
		r.Categorie as zAxisName,
		r.sys_CreationDate as dateFieldFilter,
		r.bonusFieldFilter as fieldFilter
	FROM vdp_workflow_instance wi 
	INNER JOIN r_wortest7 r ON wi.resourceTable_id = r.id  
	INNER JOIN vdp_workflow w ON wi.workflow_id = w.id  
	WHERE (((w.workflowContainer_id = 22  ) ) ) 
	ORDER BY xAxis ) r1
INNER JOIN (
  SELECT 
		r.Categorie as zAxisName,
		RANK() OVER (ORDER BY Categorie ASC) as zAxis
	FROM
		vdp_workflow_instance wi
	INNER JOIN r_worcatimprove r ON wi.resourceTable_id = r.id
	INNER JOIN vdp_workflow w ON wi.workflow_id = w.id
	INNER JOIN vdp_workflow_container wc ON w.workflowContainer_id = wc.id
		AND wc.name = 'WOR_IMPROVEMENT_REQUEST'
	where Categorie IS NOT NULL
	group by Categorie
	) AS r2 on r1.zAxisName = r2.zAxisName

Avertissement

Il y a plusieurs points important dans la requête :\n

Identifier les axes xAxis, xAxisName, zAxis, zAxisName.\n
Attention a la correspondence entre zAxis et zAxisName.

Exemple de paramétrage spécifique côté composant :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


class=com.moovapps.kit.indicators.controllers.extensions.DefaultIndicatorExtension
scaleBand=false
average=false
centerBar=true
elasticityY=false
colorsRange=#f2f2f2,#e2e2e2,#d2d2d2,#c2c2c2,#b2b2b2,#a2a2a2
renderLabel=false
renderStackLabel=true
orderxAxis=false
timeout=50

Exemple d’utilisation des filtres

Cf Filtres

Exemple d’utilisation des marges

Cf Marges

Paramétrage des légendes

variables	Valeurs possibles	Valeur par défaut	Commentaire	Dependance
legend	Boolean	false	Active l’affichage d’une légende	Aucune
legendFontSize	Integer	12	taille de la police	legend=true
hideNumber	Boolean	false	Cache ou non le nombre d’élément a droite des légendes	legend=true
legendDynamic	Boolean	false	Permet d’avoir une légende dynamique aux filtres	legend=true
htmlLegend	Boolean	false	cas 1: Utilisation recommandée, affiche la légende à droite du graphe	legend=true
legendX	Integer	50	cas 2: Position x en coordonnée cartésienne sur le graphique (correspond au bas a gauche du carré “legend”)	legend=true
legendY	Integer	400	cas 2: Position Y en coordonnée cartésienne sur le graphique	legend=true
legendHorizontal	Boolean	false	cas 2: Affiche la légende sur une ligne ou sur plusieurs	legend=true
legendItemHeight	Integer	5	cas 2: Poids de la police	legend=true
legendGap	Integer	0	cas 2: Distance entre 2 légendes. Horizontalement ou verticalement	legend=true
highlightSelected	Boolean	false	Active la surbrillance de la légende	legend=true

Exemples d’utilisation des légendes

1
2
3
4
5


legend=true
htmlLegend=true
legendFontSize=12
hideNumber=false
highlightSelected=false

1
2
3
4
5
6
7
8


legend=true
legendFontSize=12
legendX=50
legendY=420
legendHorizontal=true
legendItemHeight=10
legendGap=100
hideNumber=false