Rapport HTML
Le Rapport HTML 
présente les données en se basant sur un modèle HTML.
Configurer un rapport HTML
Pour configurer un rapport HTML :
- Glissez-déposez les mesures/dimensions à utiliser dans la zone Mesures et dimensions.
- ➡ Dans la zone d'aperçu du flux, il est demandé de spécifier un modèle HTML.
- Si vous disposez d'un modèle HTML, cliquez sur Modèle dans la zone Visualisation en haut à droite de la fenêtre pour le charger. Ce fichier doit comporter un élément dont la classe est égale à row-template.
Sinon, vous pouvez cliquer sur le lien générez-en un automatiquement et l'éditer si besoin (rajouter du texte, une image, etc).
- Utilisez le bouton Ajouter un mot-clé pour modifier ou ajouter des éléments de vos données.
Les mots clés utilisent la position des dimensions et des mesures.- ${Dimension1} : renvoie le nom de la dimension présente sur l'axe 1.
- ${Member1} : renvoie membre de la dimension présente sur l'axe 1.
- ${ValueMeasure0} : renvoie la valeur de première mesure.
- ${Measure0} : renvoie le nom de la première mesure.
- Vous pouvez utiliser des images ajoutées depuis le Gestionnaire d'images. Il faudra spécifier son emplacement comme suit :
url('../../../../file?item=config/web/public/vectoricons/nom de l'image.svg') - Cliquez sur OK.
- Modifiez ensuite le style depuis l'onglet Thèmes. Consultez la page Modifier le style / thème.
Exemple
Nous souhaitons créer un rapport HTML affichant le chiffre d'affaires de notre entreprise de vente au détail.
Nous ajoutons donc la mesure CA à la colonne mesure puis créons un modèle en cliquant sur le lien générez-en un automatiquement dans la zone d'aperçu du graphique.
➡ Le modèle HTML est créé comme illustré ci-dessus avec les mots-clés donnant le nom et la valeur de mesure automatiquement insérés.
Le rapport HTML résultant avec le thème (style) par défaut est le suivant :
Nous souhaitons ajouter une icône et des styles. Pour cela, nous créons le modèle HTML suivant :
<table>
<tr id="row_1">
<td id="block_img" rowspan=2>
<img src="url('../../../../file?item=config/web/public/vectoricons/icone_ca.svg')"/>
</td>
<td id="val">${Measure0}</td>
</tr>
<tr id="row_2">
<td id="block_1">
<span>${ValueMeasure0}</span>
</td>
</tr>
</table>
</div>
Nous modifions ensuite le style :
/* !! display first row only !! */
/*
#table > tbody > tr:first-child {
display: table-row;
}
*/
iframe, html, body, table, .row-template {
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
/*background-color: rgba(255,255,255,0) !important*/
}
table, td, tr {
/*background-color: rgb(255,250,240);*/
margin: 0 !important;
padding: 0 !important;
text-align: center;
vertical-align: middle;
}
#row_1 {
height: 50% !important;
width: 100%;
text-align: center !important;
}
#row_2 {
height: 50% !important;
text-align: center;
font-size: 10vmin;
}
#block_img img {
height: 40vmin;
width: auto;
text-align: center;
}
#block_img .cellSpan, #block_0 .cellSpan {
font-size: 10vmin;
}
#block_img {
width:8%;
text-align: right;
}
#block_img > div {
height: 60%;
background-repeat: no-repeat;
background-position: right 0% bottom 50%;
background-size: 100% 100%;
}
#block_1 {
font-size: 15vmin;
width:25%;
text-align: justify;
vertical-align: top !important;
position:relative;
left: 7.75%;
color : #4D4D4D;
font-weight : 700;
}
#val {
font-size: 50vmin;
vertical-align: bottom !important;
text-align: justify;
position:relative;
left: 7.75%;
font-weight: 100;
color:#366273;
}
.row-template{
border-bottom: 4px solid ;
}
.row-template{
border-bottom-color: #366273;
background-color: #DEFCF6;
}
Nous obtenons alors le rapport HTML suivant :
Modifier le thème
Consultez la page Modifier le style / thème pour plus de détails sur la configuration du thème.
Configurer des interactions
Pour savoir comment configurer des interactions, consultez la page dédiée Configurer des interactions.