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.
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 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.