Widgets

Tableau simple

Dans un tableau simple, vous pouvez aggréger les données selon autant de dimensions que souhaité et afficher toutes les mesures que vous voulez. Vous pouvez aussi ajouter des Mesures calculées. Une Mesure calculée est une colonne du tableau qui est obtenue par calcul à partir des autres colonnes. Dans la capture ci-dessous (i.e. qui est un tableau simple avec pliage), la colonne Prix moyen est obtenu avec la formule line[4]/line[3].

Pliage d'un tableau simple

Si vous activez le pliage (dans le menu Plier/déplier), l'utilisateur peut plier/déplier les données en cliquant sur l'icône + ou - de la première colonne:

alt text

Dans une table pliée, les lignes roses sont les totaux intermédiaires, la ligne bleu est le grand total. Le grand total n'est affiché que si sur l'une des colonnes, l'option afficher le total est activée. Pour cacher le total intermédiaire d'une colonne, il faut utiliser l'option Cacher le total intermédiaire de mise en forme de la colonne.

Free-table

La free-table est un tableau dans lequel chaque cellule est configurable de manière indépendante. Le type de chaque cellule doit être choisi parmi :

  • text : le contenu de la cellule est un texte.
  • value : le contenu de la cellule est le (ou les) résultat(s) d'une requête sur une source de données.
  • formula : le contenu de la cellule est le résultat d'une formule calculée à partir des autres cellules du tableau.

Mode HTML

Si le mode HTML est activé pour une cellule, celle-ci affichera le contenu HTML fourni.

Si la cellule est de type value, la N-ième donnée requêtée peut être obtenue dans le HTML avec la variable {{valueN}}. A noter que le la Formule de calcul et le Formatage numérique ont déjà été appliqués sur le résultat obtenu.

Il est aussi possible d'utiliser toutes les fonctions disponibles dans les formules de dashboard, par exemple : {{value2>=0 ? "green" : "red"}} ou {{abs(value2) * 2}}.

Utilisation des valeurs dans le HTML et du formatage numérique

Si vous appliquez un formatage numérique (par exemple avec l'option "12.34%" pour spécifier un pourcentage), la valeur correspondante {{valueN}} sera une chaîne de caractères avec le symbole pourcentage. Les formules du type {{valueN*2}} ou {{valueN > 0 ? "a" : "n"}} retourneront une erreur.

Dans ce cas, vous devez convertir {{valueN}} en valeur numérique avec la fonction toNumber, par exemple {{toNumber(valueN) * 2}}.

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
<div style="background-color:#fafafa;
            color:black;
            height:100%;
            text-align:left;
            padding-left:1vw;
            padding-top:1vw;
            padding-bottom:1vw;
            display:flex;
            flex-direction: column;
            justify-content:space-around">

    <div style="color:rgb(77, 144, 147); font-size:1.4vw">
        CA
    </div>

    <div style="font-size:2.5vw; color:rgb(0, 96, 100)">
        {{value1}}
    </div>

    <div style="font-size:1.2vw; color: {{value2>=0 ? "green" : "red"}}">
        <span class="fa fa-angle-double-{{value2>=0 ? "up" : "down"}}"></span>
        {{value2}} vs Mois-1
    </div>
</div>

Histogramme

Configuration du rendu des barres

  • Pad 1 : valeur comprise dans [0,50]. Espace entre les barres (défaut: 10).
  • Pad 2 : valeur comprise dans [0,50]. Espace entre les groupes de barres quand la donnée est divisée (défaut: 20).

Map

Configuration des popups

Par défaut, la popup (quand vous cliquez sur un marqueur) affiche la colonne Label et une liste des mesures sélectionnées. Vous pouvez configurer ce qui est affiché dans une popup en remplissant le champ Popup : template HTML.

Le code HTML fourni peut contenir des formules insérées entre double accolades : {{line[1]}}. Les variables disponibles sont :

  • value : contient la valeur de la colonne choisie comme Label
  • line[N] : contient la valeur de la N-ième mesure sélectionnée

Exemple :

1
2
3
4
5
<h4>{{value}}</h4>

<strong>Population: </strong>{{line[1]}}
<br>
<strong>Altitude : </strong>{{line[2]}}

Widget "custom"

Ce "custom" widget vous permet de coder votre propre widget. Il vous suffit simplement de fournir le code HTML, en incluant le code javascript et CSS dont vous auriez besoin.

Utiliser des librairies tierces (javascript ou CSS)

Bien entendu, vous pouvez utiliser des librairies tierces telles que D3.js pour coder vos propres widgets.

Cependant, vous ne devez utiliser que des librairies qui ne sont pas déjà utilisées par la plateforme Serenytics, telles que D3.js. Vous ne devez pas non plus charger une version différente d'une librairie déjà utilisée par Serenytics (comme Highcharts, Angular, Lodash, etc...). Vous ne devez pas non plus charger une version différente d'une librairie CSS déjà utilisée par Serenytics (comme par exemple Bootstrap).

Si vous n'êtes pas sûr, veuilles contacter le support Serenytics. Autrement votre widget pourrait ne plus marcher lors d'une future mise à jour de la plateforme Serenytics.

Fonctionnement

Il vous suffit d'écrire le code tel que vous l'utiliseriez dans n'importe quelle autre application web. La seule communication avec Serenytics intervient lorsque les données à afficher sont passées au widget.

Pour cela, vous devez utiliser les chaînes de caractères {{rows}} et {{headers}} dans votre code, et elle seront remplacées à l'exécution par les vraies données sérializées en JSON.

Exemple:

1
2
3
4
5
6
7
<script>
    var rows = angular.fromJson('{{rows}}');
    var headers = angular.fromJson('{{headers}}');

    console.log('data rows:', rows);
    console.log('data headers:', headers);
</script>

Si vous avez un jeu de données sur lequel vous avez sélectionné 2 mesures Pays et Montant, le code suivant sera exécuté :

1
2
3
4
5
6
7
<script>
    var rows = angular.fromJson('[["France",470], ["USA":2550]]');
    var headers = angular.fromJson('[{"name":"Pays","type":"str"},{"name":"Montant","type":"float"}]');

    console.log('data rows:', rows);
    console.log('data headers:', headers);
</script>

Exemple complet avec D3.js

  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
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!--
    For this example to work, you need to select 2 columns in the Data config menu.
    The first column will be used as labels and the second one as numerical values.
-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.3/d3.min.js"></script>

<div id="customWidget" style="overflow: auto; height: 100%;"></div>

<script>
    function main() {
        // --- Retrieve data from Serenytics template injection
        var rows = angular.fromJson('{{rows}}');
        var headers = angular.fromJson('{{headers}}');

        if (!rows) {
            console.log('data is not yet loaded');
            return;
        }

        if (typeof d3 === 'undefined') {
            console.log('d3 is not yet loaded');
            return;
        }

        // --- Create a table with inline bars using d3.js

        var table = d3.select("#customWidget").append("table");

        // Create a table with rows and bind a data row to each table row
        var tr = table.selectAll("tr.data")
            .data(rows)
            .enter()
            .append("tr")
            .attr("class", "datarow");

        // Apply style to even rows
        d3.selectAll(".datarow").filter(":nth-child(even)").attr("class", "datarow even")

        // Create the label column
        tr.append("td").attr("class", "data name")
            .text(function (d) {
                return d[0];
            });

        // Create the value column
        var formatValue = d3.format(".2f");
        tr.append("td").attr("class", "data value")
            .text(function (d) {
                return formatValue(d[1]);
            })

        // Create the chart column
        var chart = tr.append("td").attr("class", "chart");

        // Create the div structure of the chart
        chart.append("div").attr("class", "bar");

        // Create the scale to compute bar width
        var xScale = d3.scaleLinear()
            .domain([0, d3.max(rows, function (d) {
                return d[1];
            })])
            .range(["0%", "100%"]);

        // Creates the chart bars
        tr.select("div.bar")
            .style("width", "0%")
            .transition()
            .duration(500)
            .style("width", function (d) {
                return xScale(d[1]);
            });
    }

    main();
</script>

<style>
    #customWidget .chart {
        width: 300px;
        padding-left: 20px;
    }

    #customWidget .bar {
        height: 17px;
        float: left;
        background-color: steelblue;
    }

    #customWidget table {
        font: 14px sans-serif;
        vertical-align: middle;
        text-align: left;
        border-collapse: collapse;
    }

    #customWidget td,th {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    #customWidget tr.even {
        background-color: whitesmoke;
    }

    #customWidget th {
        padding-left: 10px;
    }

    #customWidget td.data {
        padding-left: 10px;

    }
    #customWidget td.value {
        text-align: right;
    }
</style>