[Custom Widget] Compteur de lignes

[Amandine]

Hello again

Deuxième widget custom mis au propre : un compteur de lignes qui affiche le nombre total de lignes dans votre tableau.
Vous pouvez appliquer un filtre sur le widget, ce qui va ajuster le compte en prenant en compte ces filtres.

Fonctionnalités :

• Affiche le nombre total de lignes dans votre tableau
• Inclut une info-bulle au survol

Demo : Custom Widget Portfolio - Grist
Code : grist-custom-widgets/row-counter at main · agrippaharfleur/grist-custom-widgets · GitHub

Aperçu :

Bonne journée!

[audezu]

Trop chouette et j’aime beaucoup le design ! Moi j’utilise souvent le compte de lignes / colonnes affiché en bas à droite de la table - que je n’avais jamais vu avant que Dmitry en fasse la démo lors du Grist Paris Summit… (je l’ai mis là PI : Raccourcis et astuces)

Mais ça ne permet pas d’afficher plusieurs nombres de lignes à la fois avec les filtres comme dans ton widget !

[Vlacoume]

Merci pour cette bonne idée.

Je l’ai adaptée à une de mes vues (suivi des formations déployées par mon service)

J’ai rajouté d’autres indicateurs à cette vue :

La somme des valeurs numériques sur une colonne (pour moi le nombre total d’enseignants) :

let somme = 0;
records.forEach(record => {
somme += parseFloat(record.Nb_enseignants) || 0;
});

La formation la plus déployée :

//Top Formation
const topformation = records.reduce((acc, record) => {
const value = record.Module;
acc[value] = (acc[value] || 0) + 1; // Compter les occurrences de chaque valeur
return acc;
}, {});
const valeurMaxOccurrences = Object.keys(topformation).reduce((a, b) => topformation[a] > topformation[b] ? a : b);
document.getElementById(‹ Topformation ›).innerText = valeurMaxOccurrences;

Et enfin le Top 3 des formations les plus déployées

const sortedValues = Object.entries(topformation)
.map(([valeur, occurrences]) => ({ valeur, occurrences }))
.sort((a, b) => b.occurrences - a.occurrences);

// Récupére les 3 premières valeurs
const top3 = sortedValues.slice(0, 3).map(item => item.valeur);
const top3WithOccurrences = sortedValues.slice(0, 3).map(item => `${item.   valeur} (${item.occurrences} sessions)`);

  document.getElementById('Top3').innerHTML = top3WithOccurrences.join('<br>');

});

[Amandine]

Génial @Vlacoume ! Tu as moyen de partager des captures écran voir le rendu ?

[Vlacoume]

Encore quelques améliorations à faire : « Infos bulles » par exemple que je n’ai pas adaptées à chaque indicateur.