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.
➡ Après rafraîchissement, dans la zone d'aperçu du flux, il est demandé de spécifier un modèle HTML.
- Vous pouvez spécifier le modèle depuis l'interface dédiée Modèle Html en cliquant sur le lien ou le bouton Modèle dans la barre d'outils.
— ou —
générer un modèle et l'afficher directement dans l'aperçu en cliquant sur le lien générez-en un automatiquement. Celui-ci est centré horizontalement et verticalement par défaut. Vous pourrez l'éditer ensuite via l'interface dédiée.
Pour plus d’informations sur la création ou l’édition d’un modèle HTML, consultez le paragraphe ci-dessous. - Une fois le modèle spécifié, vous pouvez ajuster les styles depuis l'onglet Thèmes. Consultez la page Modifier le style / thème pour plus de détails.
Modèle HTML
Lorsque vous ouvrez la boite de dialogue Modèle Html, le modèle généré automatiquement est proposé. Celui-ci est centré horizontalement et verticalement par défaut.
Dans le cas où vous avez un modèle sauvegardé comme modèle par défaut, c’est ce dernier qui est utilisé.
Vous pouvez le modifier en Mode texte ou sélectionner un fichier modèle en Mode fichier.
Mode texte
Le mode texte est le mode par défaut. Dans ce cas, le modèle HTML est stocké directement dans le flux.
Vous pouvez modifier le contenu du modèle par défaut facilement grâce à l’éditeur de code WYSIWYG.
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 limage.svg')
Vous pouvez revenir à tout moment au modèle généré automatiquement en cliquant sur le bouton Génération auto.
Mode fichier
Le mode fichier permet de pointer dynamiquement vers un fichier modèle HTML présent sur un serveur de fichiers.
Pour accéder à ce mode :
- Cliquez sur le bandeau Mode fichier en haut de la fenêtre.
- Sélectionnez Mode fichier.
➡ Il vous est proposé de créer un fichier avec le modèle courant. - Cliquez sur Oui pour enregistrer le modèle actuel comme fichier modèle sur le serveur souhaité.
➡ Le fichier et le serveur utilisés sont alors indiqués dans le bandeau Mode fichier.
- Cliquez sur Non pour sélectionner un fichier existant sur un serveur de fichiers.
➡ La boite Recherche de fichiers distants s'affiche : sélectionnez le serveur de fichiers puis le fichier et cliquez sur OK. Le fichier et le serveur utilisés sont alors indiqués dans le bandeau Mode fichier.
Cliquez sur Recharger pour revenir à la version d'origine, ou sur Choisir un autre fichier pour en sélectionner un autre.
Il est possible de modifier le contenu du fichier stocké sur le serveur de fichiers directement dans l'éditeur HTML. Lors du clic sur le bouton OK de la fenêtre du gestionnaire, il vous sera alors demandé si vous souhaitez écraser le fichier existant.
Sauvegarde par défaut
Il est possible de sauvegarder le modèle courant comme valeurs par défaut. Le contenu du modèle HTML sera alors appliqué par défaut pour tout nouveau rapport HTML créé par l'utilisateur.
Pour cela :
- Cliquez sur le bouton Sauvegarder comme valeurs par défaut.
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 Rapport HTML:
/* !! 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.