[Custom Widget] Compteur de lignes

[Amandine]

Nouvelle version du widget, présentée plus bas dans les commentaires

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
Depot : grist-custom-widgets/FR/compteur-lignes at main · amandinedug/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.

[Amandine]

Hello

J’ai fait une petite upgrade sur ce widget, qui a maintenant cette allure là :

Mais surtout, la plus grosse update, c’est le menu de personnalisation :

Par contre, ça ne marche que via url, ne pas hésiter à forker si besoin pour plus d’autonomie

(J’ai aussi fait un peu de rangement dans mon depo, donc toutes les urls ont changée : Depot : grist-custom-widgets/FR/compteur-lignes at main · amandinedug/grist-custom-widgets · GitHub — URL Custom : Compteur de lignes )

Et sinon, j’ai aussi fait une version DSFR :

Depot : grist-custom-widgets/DSFR/dsfr-compteur at main · amandinedug/grist-custom-widgets · GitHub — URL Custom : Compteur de lignes

[mmot]

Très propre et simple à mettre en œuvre

Ma première idée était de l’utiliser pour ajouter un compteur sur les pages de détail, mais à l’usage je me rends compte que ça pose parfois problème dans ce contexte : la place que prend le widget (la taille du texte + l’espace mangé sur les bords par une vue dans Grist), mais aussi la décorrélation qui peut survenir entre les filtres personnalisés de la vue de détail et ceux du compteur.

Par contre, c’est très bien sur une page de récap/tableau de bord !