Rapport HTML

Last modified by Aurelie Bertrand on 2025/03/13 09:11

Le Rapport HTML Icone_rapport_HTML présente les données en se basant sur un modèle HTML.

Configurer un rapport HTML

ℹ En fonction de la conception du rapport HTML, celui-ci peut avoir un rendu différent en export PDF.

Pour configurer un rapport HTML :

  1. Glissez-déposez les mesures/dimensions à utiliser dans la zone Mesures et dimensions.
  2. ➡ Dans la zone d'aperçu du flux, il est demandé de spécifier un modèle HTML.
    Flow_HTML_message_template_FR.png
  3. Si vous disposez d'un modèle HTML ou que vous souhaitez en créer un de zéro, cliquez sur Modèle à droite du type de flux dans la barre d'outils.
    Bouton Modèle
    ​​​Le modèle doit obligatoirement comporter un élément dont la classe est égale à row-template.
    Dans le cas d'un fichier contenant un modèle HTML, cliquez sur Sélectionner pour charger le fichier de votre choix.
    Sinon, vous pouvez cliquer sur le lien générez-en un automatiquement et l'éditer si besoin (rajouter du texte, une image, etc).
    Flow_HTML_template_edit_FR.png
  4. 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.
  5. 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')
  6. Cliquez sur OK.
  7. Modifiez ensuite le style depuis l'onglet Thèmes. Consultez la page Modifier le style.

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 :
Rapport_HTML_auto

Nous souhaitons ajouter une icône et des styles. Pour cela, nous créons le modèle HTML suivant :

<div class="row-template" onclick="">
   <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:

/* HTML REPORT */

/* !! 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 :

Rapport_HTML_perso

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.