Ajout d'un compteur de lignes de données avec possibilité d'affichage dans la page.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "freedatas2html",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "Visualization of data from various sources (CSV, API, HTML...) with filters, classification, pagination, etc.",
   "main": "index.js",
   "scripts": {

public/index.html

@@ -19,15 +19,16 @@
       <div id="paginationOptions" class="col-12 col"></div>
     </div>
     
-
+    <h3>Nombre total de résultats : <span id="compteur"></span></h3>
     <article id="datas">
         <p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier csv.</p>
     </article>
     <p id="pages"></p>
     <aside><p>Les données affichées viennent d'<a href="datas/elements-chimiques.csv">un fichier CSV</a> reprenant une partie des informations trouvées <a href="https://fr.wikipedia.org/wiki/%C3%89l%C3%A9ment_chimique#Caract%C3%A9ristiques_des_diff%C3%A9rents_%C3%A9l%C3%A9ments" target="_blank">sur Wikipédia</a>.</p>
     <p>La dernière colonne permet de montrer la possibilité d'<b>extraire des données d'une colonne ayant plusieurs valeurs par ligne</b>, ici séparées par une virgule.<br>Ce choix de la virgule comme séparateur ne pose pas de problème, tant le fichier CSV est correctement conçu.<br>Elle ne doit par contre pas être présente dans les expressions à extraire de la colonne, sachant que l'on peut désigner n'importe quel autre caractère séparateur.</p>
-    <p>Toujours en option, certaines peuvent être désignées comme permettant de classer les données : un 1ᵉʳ clic lance un classement par ordre croissant, le 2ᵉ pour ordre décroissant et ainsi de suite.</p>
-    <p>Enfin, une dernière option permet de <b>paginer les résultat</b>.</p>
+    <p>Toujours en option, certaines peuvent être désignées comme permettant de <b>classer les données</b> : un 1ᵉʳ clic lance un classement par ordre croissant, le 2ᵉ pour ordre décroissant et ainsi de suite.</p>
+    <p>Il est également possible d'afficher le nombre total de résultats, avec prise en compte des éventuels filtres.</p>
+    <p>Enfin, une dernière option permet de <b>paginer les résultats</b>.</p>
      <p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></aside>
 </body>
 </html>

src/firstExample.ts

@@ -33,6 +33,7 @@ const initialise = async () =>
         pagination.rend2HTML();
         
         // Affichage initial
+        converter.datasCounter={ id:"compteur" };
         await converter.run();
        
         // Création d'outils permettant de filtrer les données des champs de données

src/freeDatas2HTML.ts

@@ -2,7 +2,7 @@ const Papa = require("papaparse");
 const errors = require("./errors.js");
 const { compare }= require('natural-orderby');
 
-import { DOMElement, Paginations,  Selectors, SortingFields,  SortingFunctions } from "./freeDatas2HTMLInterfaces";
+import { Counter, DOMElement, Paginations,  Selectors, SortingFields,  SortingFunctions } from "./freeDatas2HTMLInterfaces";
 import { Pagination} from "./freeDatas2HTMLPagination";
 import { Selector } from "./freeDatas2HTMLSelector";
 import { SortingField } from "./freeDatas2HTMLSortingField";
@@ -37,6 +37,8 @@ export class FreeDatas2HTML
     datasSortedField: SortingFields|undefined;
     // La Pagination :
     pagination: Paginations|undefined;
+    // Affichage du nombre total de lignes de données (optionnel) :
+    private _datasCounter: Counter = {}; 
 
     // Vérifie s'il y a bien un élément dans le DOM pour l'id fourni
     public static checkInDOMById(checkedElt: DOMElement) : DOMElement
@@ -89,6 +91,21 @@ export class FreeDatas2HTML
         }
     }
 
+    // On teste l'id de l'élément du DOM où afficher le compteur s'il est fourni
+    set datasCounter(counterDisplayElement: DOMElement)
+    {
+        this._datasCounter={ displayElement: FreeDatas2HTML.checkInDOMById(counterDisplayElement), value: undefined };
+    }
+
+    // Retourne la valeur du compteur de lignes (sans l'élément DOM)
+    public getDatasCounterValue(): number|undefined
+    {
+        if(this._datasCounter !== undefined && this._datasCounter.value !=  undefined)
+            return this._datasCounter.value;
+        else
+            return undefined;
+    }  
+
     // Retourne l'éventuelle fonction spécifique de classement associée à un champ
     public getSortingFunctionForField(datasFieldNb: number): SortingFunctions|undefined
     {
@@ -234,6 +251,11 @@ export class FreeDatas2HTML
                 nbTotal++;
         }
         datasHTML+="</tbody></table>";
+        if(this._datasCounter !== undefined && this._datasCounter.displayElement !== undefined)
+        {
+            this._datasCounter.value=nbTotal;
+            this._datasCounter.displayElement.eltDOM!.innerHTML=""+nbTotal; // eltDOM ne peut être undefined (cf setter)
+        }
         // Tout réaffichage peut entraîner une modification du nombre de pages (évolution filtres, etc.)
         if(this.pagination !== undefined)
             this.pagination.creaPageSelector(nbTotal);

src/freeDatas2HTMLInterfaces.ts

@@ -1,3 +1,8 @@
+export interface Counter
+{
+    displayElement?: DOMElement; // peut être undefined si on ne souhaite pas d'affichage automatique dans la page
+    value?: number; // undefined jusqu'à recevoir sa première valeur
+}
 export interface DOMElement
 {
     id: string;

tests/freeDatas2HTMLSpec.ts

@@ -184,6 +184,17 @@ describe("Test du script central de FreeDatas2HTML", () =>
             let txtDatasViewsElt=document.getElementById("datas").innerHTML;
             expect(txtDatasViewsElt).toEqual(fixtures.datasHTML);
         });
+
+        it("Si demandé, doit afficher le nombre de lignes de données du fichier.", async () =>
+        {
+            converter.datasViewElt={ id:"datas" };            
+            converter.datasSourceUrl="http://localhost:9876/datas/datas1.csv";
+            converter.datasCounter={ id:"counter" };
+            await converter.run();
+            let txtDatasViewsElt=document.getElementById("counter").innerHTML;
+            expect(txtDatasViewsElt).toEqual("118");
+        });
+        
     });
 
 });