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

This commit is contained in:
Fabrice PENHOËT 2021-09-23 11:28:27 +02:00
parent 692ae9fa86
commit 1b84eb8192
7 changed files with 46 additions and 6 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "freedatas2html", "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.", "description": "Visualization of data from various sources (CSV, API, HTML...) with filters, classification, pagination, etc.",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

View File

@ -19,15 +19,16 @@
<div id="paginationOptions" class="col-12 col"></div> <div id="paginationOptions" class="col-12 col"></div>
</div> </div>
<h3>Nombre total de résultats : <span id="compteur"></span></h3>
<article id="datas"> <article id="datas">
<p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier csv.</p> <p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier csv.</p>
</article> </article>
<p id="pages"></p> <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> <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>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>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>Enfin, une dernière option permet de <b>paginer les résultat</b>.</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> <p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></aside>
</body> </body>
</html> </html>

View File

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

View File

@ -2,7 +2,7 @@ const Papa = require("papaparse");
const errors = require("./errors.js"); const errors = require("./errors.js");
const { compare }= require('natural-orderby'); 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 { Pagination} from "./freeDatas2HTMLPagination";
import { Selector } from "./freeDatas2HTMLSelector"; import { Selector } from "./freeDatas2HTMLSelector";
import { SortingField } from "./freeDatas2HTMLSortingField"; import { SortingField } from "./freeDatas2HTMLSortingField";
@ -37,6 +37,8 @@ export class FreeDatas2HTML
datasSortedField: SortingFields|undefined; datasSortedField: SortingFields|undefined;
// La Pagination : // La Pagination :
pagination: Paginations|undefined; 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 // Vérifie s'il y a bien un élément dans le DOM pour l'id fourni
public static checkInDOMById(checkedElt: DOMElement) : DOMElement 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 // Retourne l'éventuelle fonction spécifique de classement associée à un champ
public getSortingFunctionForField(datasFieldNb: number): SortingFunctions|undefined public getSortingFunctionForField(datasFieldNb: number): SortingFunctions|undefined
{ {
@ -234,6 +251,11 @@ export class FreeDatas2HTML
nbTotal++; nbTotal++;
} }
datasHTML+="</tbody></table>"; 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.) // Tout réaffichage peut entraîner une modification du nombre de pages (évolution filtres, etc.)
if(this.pagination !== undefined) if(this.pagination !== undefined)
this.pagination.creaPageSelector(nbTotal); this.pagination.creaPageSelector(nbTotal);

View File

@ -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 export interface DOMElement
{ {
id: string; id: string;

File diff suppressed because one or more lines are too long

View File

@ -184,6 +184,17 @@ describe("Test du script central de FreeDatas2HTML", () =>
let txtDatasViewsElt=document.getElementById("datas").innerHTML; let txtDatasViewsElt=document.getElementById("datas").innerHTML;
expect(txtDatasViewsElt).toEqual(fixtures.datasHTML); 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");
});
}); });
}); });