Nouvelle version des pages d'exemples en vue créant du site de présentation.
This commit is contained in:
parent
bc7a64a65f
commit
6c1ef358dd
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
278
public/datas/grandes-villes-fr.csv
Normal file
278
public/datas/grandes-villes-fr.csv
Normal file
@ -0,0 +1,278 @@
|
|||||||
|
Rang en 2011,Commune,Département,Région,Population 2018,Population 1990,Population 1968
|
||||||
|
1,Paris,,Île-de-France,2175601,2152423,2590771
|
||||||
|
2,Marseille,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,868277,800550,889029
|
||||||
|
3,Lyon,Métropole de Lyon,Auvergne-Rhône-Alpes,518635,415487,527800
|
||||||
|
4,Toulouse,Haute-Garonne,Occitanie,486828,358688,370796
|
||||||
|
5,Nice,Alpes-Maritimes,Provence-Alpes-Côte d'Azur,341032,342439,322442
|
||||||
|
6,Nantes,Loire-Atlantique,Pays de la Loire,314138,244995,259208
|
||||||
|
7,Montpellier,Hérault,Occitanie,290053,207996,161910
|
||||||
|
8,Strasbourg,Bas-Rhin,Grand Est,284677,252338,249396
|
||||||
|
9,Bordeaux,Gironde,Nouvelle-Aquitaine,257068,210336,266662
|
||||||
|
10,Lille,Nord,Hauts-de-France,233098,172142,190546
|
||||||
|
11,Rennes,Ille-et-Vilaine,Bretagne,217728,197536,180943
|
||||||
|
12,Reims,Marne,Grand Est,182211,180620,152967
|
||||||
|
13,Toulon,Var,Provence-Alpes-Côte d'Azur,176198,167619,174746
|
||||||
|
14,Saint-Étienne,Loire,Auvergne-Rhône-Alpes,173089,199396,223223
|
||||||
|
15,Le Havre,Seine-Maritime,Normandie,169733,195854,199509
|
||||||
|
16,Grenoble,Isère,Auvergne-Rhône-Alpes,157650,150758,161616
|
||||||
|
17,Dijon,Côte-d'Or,Bourgogne-Franche-Comté,156854,146703,145357
|
||||||
|
18,Angers,Maine-et-Loire,Pays de la Loire,154508,141404,128533
|
||||||
|
19,Villeurbanne,Métropole de Lyon,Auvergne-Rhône-Alpes,150659,116872,119879
|
||||||
|
20,Saint-Denis,La Réunion,La Réunion,150535,121999,85444
|
||||||
|
21,Nîmes,Gard,Occitanie,149633,128471,123292
|
||||||
|
22,Clermont-Ferrand,Puy-de-Dôme,Auvergne-Rhône-Alpes,146734,136181,148896
|
||||||
|
23,Le Mans,Sarthe,Pays de la Loire,143252,145502,143246
|
||||||
|
24,Aix-en-Provence,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,143097,123842,89566
|
||||||
|
25,Brest,Finistère,Bretagne,139602,147956,154023
|
||||||
|
26,Tours,Indre-et-Loire,Centre-Val de Loire,136463,129509,128120
|
||||||
|
27,Amiens,Somme,Hauts-de-France,133891,131872,117888
|
||||||
|
28,Limoges,Haute-Vienne,Nouvelle-Aquitaine,131479,133464,132935
|
||||||
|
29,Annecy,Haute-Savoie,Auvergne-Rhône-Alpes,128199,49644,54484
|
||||||
|
30,Boulogne-Billancourt,Hauts-de-Seine,Île-de-France,121334,101743,109008
|
||||||
|
31,Perpignan,Pyrénées-Orientales,Occitanie,119188,105983,102191
|
||||||
|
32,Besançon,Doubs,Bourgogne-Franche-Comté,116775,113828,113220
|
||||||
|
33,Metz,Moselle,Grand Est,116581,119594,107537
|
||||||
|
34,Orléans,Loiret,Centre-Val de Loire,116238,105111,95828
|
||||||
|
35,Saint-Denis,Seine-Saint-Denis,Île-de-France,112091,89988,99268
|
||||||
|
36,Rouen,Seine-Maritime,Normandie,111360,102723,120471
|
||||||
|
37,Argenteuil,Val-d'Oise,Île-de-France,110213,93096,90480
|
||||||
|
38,Montreuil,Seine-Saint-Denis,Île-de-France,109914,94754,95714
|
||||||
|
39,Mulhouse,Haut-Rhin,Grand Est,108942,108357,116336
|
||||||
|
40,Caen,Calvados,Normandie,105512,112846,110262
|
||||||
|
41,Nancy,Meurthe-et-Moselle,Grand Est,104885,99351,123428
|
||||||
|
42,Saint-Paul,La Réunion,La Réunion,103492,71669,43129
|
||||||
|
43,Roubaix,Nord,Hauts-de-France,98089,97746,114547
|
||||||
|
44,Tourcoing,Nord,Hauts-de-France,97442,93765,98755
|
||||||
|
45,Nanterre,Hauts-de-Seine,Île-de-France,96807,84565,90332
|
||||||
|
46,Vitry-sur-Seine,Val-de-Marne,Île-de-France,94649,82400,77846
|
||||||
|
47,Créteil,Val-de-Marne,Île-de-France,92265,82088,49197
|
||||||
|
48,Avignon,Vaucluse,Provence-Alpes-Côte d'Azur,91729,86939,86096
|
||||||
|
49,Poitiers,Vienne,Nouvelle-Aquitaine,88665,78894,70681
|
||||||
|
50,Aubervilliers,Seine-Saint-Denis,Île-de-France,87572,67557,73695
|
||||||
|
51,Dunkerque,Nord,Hauts-de-France,86865,70331,27504
|
||||||
|
52,Aulnay-sous-Bois,Seine-Saint-Denis,Île-de-France,86278,82314,61521
|
||||||
|
53,Colombes,Hauts-de-Seine,Île-de-France,86052,78513,80357
|
||||||
|
54,Asnières-sur-Seine,Hauts-de-Seine,Île-de-France,85946,71850,80113
|
||||||
|
55,Versailles,Yvelines,Île-de-France,85205,87789,90829
|
||||||
|
56,Saint-Pierre,La Réunion,La Réunion,84961,58846,40355
|
||||||
|
57,Courbevoie,Hauts-de-Seine,Île-de-France,82198,65389,58118
|
||||||
|
58,Le Tampon,La Réunion,La Réunion,79385,47593,31378
|
||||||
|
59,Cherbourg-en-Cotentin,Manche,Normandie,79144,27121,38243
|
||||||
|
60,Fort-de-France,Martinique,Martinique,78126,100080,96943
|
||||||
|
61,Rueil-Malmaison,Hauts-de-Seine,Île-de-France,77986,66401,60804
|
||||||
|
62,Béziers,Hérault,Occitanie,77599,70996,80492
|
||||||
|
63,Champigny-sur-Marne,Val-de-Marne,Île-de-France,77039,79486,70419
|
||||||
|
64,Pau,Pyrénées-Atlantiques,Nouvelle-Aquitaine,76275,82157,74005
|
||||||
|
65,La Rochelle,Charente-Maritime,Nouvelle-Aquitaine,76114,71094,73347
|
||||||
|
66,Saint-Maur-des-Fossés,Val-de-Marne,Île-de-France,75298,77206,77251
|
||||||
|
67,Cannes,Alpes-Maritimes,Provence-Alpes-Côte d'Azur,73965,68676,67152
|
||||||
|
68,Calais,Pas-de-Calais,Hauts-de-France,72929,75309,74624
|
||||||
|
69,Antibes,Alpes-Maritimes,Provence-Alpes-Côte d'Azur,72915,70005,47547
|
||||||
|
70,Drancy,Seine-Saint-Denis,Île-de-France,72109,60707,64430
|
||||||
|
71,Ajaccio,Corse-du-Sud,Corse,70817,58949,43438
|
||||||
|
72,Mérignac,Gironde,Nouvelle-Aquitaine,70813,57273,45951
|
||||||
|
73,Saint-Nazaire,Loire-Atlantique,Pays de la Loire,70619,64812,63289
|
||||||
|
74,Colmar,Haut-Rhin,Grand Est,68703,63498,59550
|
||||||
|
75,Issy-les-Moulineaux,Hauts-de-Seine,Île-de-France,68260,46127,50442
|
||||||
|
76,Noisy-le-Grand,Seine-Saint-Denis,Île-de-France,68126,54032,25440
|
||||||
|
77,Évry-Courcouronnes,Essonne,Île-de-France,67131,45531,7113
|
||||||
|
78,Vénissieux,Métropole de Lyon,Auvergne-Rhône-Alpes,67129,60444,47613
|
||||||
|
79,Cergy,Val-d'Oise,Île-de-France,66322,48226,2203
|
||||||
|
80,Levallois-Perret,Hauts-de-Seine,Île-de-France,65817,47548,58941
|
||||||
|
81,Valence,Drôme,Auvergne-Rhône-Alpes,64726,63437,62358
|
||||||
|
82,Bourges,Cher,Centre-Val de Loire,64668,75609,70814
|
||||||
|
83,Pessac,Gironde,Nouvelle-Aquitaine,64374,51055,36986
|
||||||
|
84,Cayenne,Guyane,Guyane,63652,41067,24518
|
||||||
|
85,Ivry-sur-Seine,Val-de-Marne,Île-de-France,63309,53619,60455
|
||||||
|
86,Quimper,Finistère,Bretagne,63166,59437,52496
|
||||||
|
87,La Seyne-sur-Mer,Var,Provence-Alpes-Côte d'Azur,62888,59968,43783
|
||||||
|
88,Antony,Hauts-de-Seine,Île-de-France,62858,57771,56638
|
||||||
|
89,Villeneuve-d'Ascq,Nord,Hauts-de-France,62727,65320,11618
|
||||||
|
90,Clichy,Hauts-de-Seine,Île-de-France,62485,48030,52477
|
||||||
|
91,Troyes,Aube,Grand Est,61996,59255,74898
|
||||||
|
92,Montauban,Tarn-et-Garonne,Occitanie,60952,51224,45895
|
||||||
|
93,Neuilly-sur-Seine,Hauts-de-Seine,Île-de-France,59940,61768,70995
|
||||||
|
94,Pantin,Seine-Saint-Denis,Île-de-France,59060,47303,47607
|
||||||
|
95,Niort,Deux-Sèvres,Nouvelle-Aquitaine,59059,57012,48469
|
||||||
|
96,Chambéry,Savoie,Auvergne-Rhône-Alpes,58833,54120,51066
|
||||||
|
97,Sarcelles,Val-d'Oise,Île-de-France,58811,56833,51674
|
||||||
|
98,Le Blanc-Mesnil,Seine-Saint-Denis,Île-de-France,57150,46956,48487
|
||||||
|
99,Lorient,Morbihan,Bretagne,57084,59271,66444
|
||||||
|
100,Saint-André,La Réunion,La Réunion,56747,35049,22094
|
||||||
|
101,Beauvais,Oise,Hauts-de-France,56605,54190,46777
|
||||||
|
102,Maisons-Alfort,Val-de-Marne,Île-de-France,55899,53375,53149
|
||||||
|
103,Meaux,Seine-et-Marne,Île-de-France,55416,48305,30167
|
||||||
|
104,Narbonne,Aude,Occitanie,55375,45849,38441
|
||||||
|
105,Chelles,Seine-et-Marne,Île-de-France,55148,45365,33281
|
||||||
|
106,Hyères,Var,Provence-Alpes-Côte d'Azur,55069,48043,34875
|
||||||
|
107,Villejuif,Val-de-Marne,Île-de-France,54964,48405,51120
|
||||||
|
108,Épinay-sur-Seine,Seine-Saint-Denis,Île-de-France,54771,48762,41774
|
||||||
|
109,La Roche-sur-Yon,Vendée,Pays de la Loire,54766,45219,36067
|
||||||
|
110,Bobigny,Seine-Saint-Denis,Île-de-France,54272,44659,39453
|
||||||
|
111,Cholet,Maine-et-Loire,Pays de la Loire,54186,55132,41766
|
||||||
|
112,Bondy,Seine-Saint-Denis,Île-de-France,54055,46676,51652
|
||||||
|
113,Saint-Quentin,Aisne,Hauts-de-France,53856,60644,64196
|
||||||
|
114,Fréjus,Var,Provence-Alpes-Côte d'Azur,53786,41486,23629
|
||||||
|
115,Saint-Louis,La Réunion,La Réunion,53589,37420,26663
|
||||||
|
116,Vannes,Morbihan,Bretagne,53438,45644,36576
|
||||||
|
117,Les Abymes,Guadeloupe,Guadeloupe,53082,62605,39911
|
||||||
|
118,Clamart,Hauts-de-Seine,Île-de-France,52926,47227,54906
|
||||||
|
119,Sartrouville,Yvelines,Île-de-France,52269,50329,40277
|
||||||
|
120,Fontenay-sous-Bois,Val-de-Marne,Île-de-France,52256,51868,38962
|
||||||
|
121,Cagnes-sur-Mer,Alpes-Maritimes,Provence-Alpes-Côte d'Azur,51411,40902,22110
|
||||||
|
122,Bayonne,Pyrénées-Atlantiques,Nouvelle-Aquitaine,51411,40051,42743
|
||||||
|
123,Sevran,Seine-Saint-Denis,Île-de-France,51225,48478,20253
|
||||||
|
124,Arles,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,51031,52058,45774
|
||||||
|
125,Corbeil-Essonnes,Essonne,Île-de-France,50954,40345,32192
|
||||||
|
126,Vaulx-en-Velin,Métropole de Lyon,Auvergne-Rhône-Alpes,50823,44174,20726
|
||||||
|
127,Saint-Ouen-sur-Seine,Seine-Saint-Denis,Île-de-France,50670,42343,48886
|
||||||
|
128,Massy,Essonne,Île-de-France,50632,38574,37055
|
||||||
|
129,Vincennes,Val-de-Marne,Île-de-France,49635,42267,49143
|
||||||
|
130,Laval,Mayenne,Pays de la Loire,49573,50473,45674
|
||||||
|
131,Albi,Tarn,Occitanie,48993,46579,42930
|
||||||
|
132,Grasse,Alpes-Maritimes,Provence-Alpes-Côte d'Azur,48865,41388,30907
|
||||||
|
133,Suresnes,Hauts-de-Seine,Île-de-France,48763,35998,40616
|
||||||
|
134,Montrouge,Hauts-de-Seine,Île-de-France,48734,38106,44922
|
||||||
|
135,Martigues,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,48420,42678,27945
|
||||||
|
136,Bastia,Haute-Corse,Corse,48044,37845,38746
|
||||||
|
137,Gennevilliers,Hauts-de-Seine,Île-de-France,47702,44818,46074
|
||||||
|
138,Aubagne,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,47208,41100,27938
|
||||||
|
139,Belfort,Territoire de Belfort,Bourgogne-Franche-Comté,46954,50125,53214
|
||||||
|
140,Évreux,Eure,Normandie,46707,49103,42550
|
||||||
|
141,Brive-la-Gaillarde,Corrèze,Nouvelle-Aquitaine,46630,49765,46561
|
||||||
|
142,Carcassonne,Aude,Occitanie,46513,43470,43616
|
||||||
|
143,Saint-Priest,Métropole de Lyon,Auvergne-Rhône-Alpes,46510,41876,20419
|
||||||
|
144,Saint-Malo,Ille-et-Vilaine,Bretagne,46478,48057,42297
|
||||||
|
145,Charleville-Mézières,Ardennes,Grand Est,46391,57008,55543
|
||||||
|
146,Saint-Herblain,Loire-Atlantique,Pays de la Loire,46352,42774,18604
|
||||||
|
147,Choisy-le-Roi,Val-de-Marne,Île-de-France,46154,34068,41440
|
||||||
|
148,Rosny-sous-Bois,Seine-Saint-Denis,Île-de-France,46043,37489,30705
|
||||||
|
149,Blois,Loir-et-Cher,Centre-Val de Loire,45871,49318,42264
|
||||||
|
150,Meudon,Hauts-de-Seine,Île-de-France,45748,45339,50623
|
||||||
|
151,Saint-Laurent-du-Maroni,Guyane,Guyane,45576,13616,5031
|
||||||
|
152,Salon-de-Provence,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,45400,34054,30722
|
||||||
|
153,Livry-Gargan,Seine-Saint-Denis,Île-de-France,45012,35387,32063
|
||||||
|
154,Puteaux,Hauts-de-Seine,Île-de-France,44837,42756,37946
|
||||||
|
155,Chalon-sur-Saône,Saône-et-Loire,Bourgogne-Franche-Comté,44810,54575,50589
|
||||||
|
156,Saint-Germain-en-Laye,Yvelines,Île-de-France,44750,39926,38308
|
||||||
|
157,Les Sables-d'Olonne,Vendée,Pays de la Loire,44355,15830,18093
|
||||||
|
158,Alfortville,Val-de-Marne,Île-de-France,44287,36119,35023
|
||||||
|
159,Châlons-en-Champagne,Marne,Grand Est,44246,48423,50764
|
||||||
|
160,Mantes-la-Jolie,Yvelines,Île-de-France,44227,45087,26058
|
||||||
|
161,Noisy-le-Sec,Seine-Saint-Denis,Île-de-France,44223,36309,34079
|
||||||
|
162,Saint-Brieuc,Côtes-d'Armor,Bretagne,44170,44752,50281
|
||||||
|
163,La Courneuve,Seine-Saint-Denis,Île-de-France,43946,34139,43318
|
||||||
|
164,Sète,Hérault,Occitanie,43686,41510,40476
|
||||||
|
165,Châteauroux,Indre,Centre-Val de Loire,43442,50969,49138
|
||||||
|
166,Istres,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,43411,35163,13404
|
||||||
|
167,Valenciennes,Nord,Hauts-de-France,43405,38441,46626
|
||||||
|
168,Garges-lès-Gonesse,Val-d'Oise,Île-de-France,42956,42144,27312
|
||||||
|
169,Caluire-et-Cuire,Métropole de Lyon,Auvergne-Rhône-Alpes,42847,41311,37603
|
||||||
|
170,Talence,Gironde,Nouvelle-Aquitaine,42701,34485,29161
|
||||||
|
171,Tarbes,Hautes-Pyrénées,Occitanie,42426,47566,55375
|
||||||
|
172,Rezé,Loire-Atlantique,Pays de la Loire,42368,33262,33509
|
||||||
|
173,Bron,Métropole de Lyon,Auvergne-Rhône-Alpes,42216,39683,41619
|
||||||
|
174,Castres,Tarn,Occitanie,41795,44812,40457
|
||||||
|
175,Angoulême,Charente,Nouvelle-Aquitaine,41711,42876,47822
|
||||||
|
176,Arras,Pas-de-Calais,Hauts-de-France,41555,38983,49144
|
||||||
|
177,Le Cannet,Alpes-Maritimes,Provence-Alpes-Côte d'Azur,41471,41842,23231
|
||||||
|
178,Bourg-en-Bresse,Ain,Auvergne-Rhône-Alpes,41248,40972,37887
|
||||||
|
179,Wattrelos,Nord,Hauts-de-France,40885,43675,43754
|
||||||
|
180,Bagneux,Hauts-de-Seine,Île-de-France,40812,36364,42006
|
||||||
|
181,Alès,Gard,Occitanie,40802,41037,42818
|
||||||
|
182,Boulogne-sur-Mer,Pas-de-Calais,Hauts-de-France,40664,43678,49276
|
||||||
|
183,Le Lamentin,Martinique,Martinique,40581,30028,18553
|
||||||
|
184,Gap,Hautes-Alpes,Provence-Alpes-Côte d'Azur,40559,33444,23994
|
||||||
|
185,Compiègne,Oise,Hauts-de-France,40542,41896,29700
|
||||||
|
186,Thionville,Moselle,Grand Est,40477,39712,37079
|
||||||
|
187,Melun,Seine-et-Marne,Île-de-France,39947,35319,34518
|
||||||
|
188,Douai,Nord,Hauts-de-France,39634,42175,49187
|
||||||
|
189,Gagny,Seine-Saint-Denis,Île-de-France,39618,36059,35780
|
||||||
|
190,Anglet,Pyrénées-Atlantiques,Nouvelle-Aquitaine,39604,33041,21190
|
||||||
|
191,Montélimar,Drôme,Auvergne-Rhône-Alpes,39415,29982,26748
|
||||||
|
192,Draguignan,Var,Provence-Alpes-Côte d'Azur,39106,30183,18376
|
||||||
|
193,Colomiers,Haute-Garonne,Occitanie,39097,26979,10584
|
||||||
|
194,Stains,Seine-Saint-Denis,Île-de-France,38666,34879,32169
|
||||||
|
195,Marcq-en-Barœul,Nord,Hauts-de-France,38570,36601,35136
|
||||||
|
196,Chartres,Eure-et-Loir,Centre-Val de Loire,38426,39595,34469
|
||||||
|
197,Saint-Martin-d'Hères,Isère,Auvergne-Rhône-Alpes,38398,34341,33605
|
||||||
|
198,Poissy,Yvelines,Île-de-France,38313,36745,33555
|
||||||
|
199,Joué-lès-Tours,Indre-et-Loire,Centre-Val de Loire,38250,36798,17826
|
||||||
|
200,Pontault-Combault,Seine-et-Marne,Île-de-France,37867,26804,9282
|
||||||
|
201,Saint-Joseph,La Réunion,La Réunion,37517,25630,22361
|
||||||
|
202,Villepinte,Seine-Saint-Denis,Île-de-France,37280,30303,12103
|
||||||
|
203,Saint-Benoît,La Réunion,La Réunion,37274,26187,19492
|
||||||
|
204,Châtillon,Hauts-de-Seine,Île-de-France,37010,26411,24640
|
||||||
|
205,Franconville,Val-d'Oise,Île-de-France,37010,33802,16205
|
||||||
|
206,Échirolles,Isère,Auvergne-Rhône-Alpes,36961,34435,15429
|
||||||
|
207,Savigny-sur-Orge,Essonne,Île-de-France,36734,33295,32075
|
||||||
|
208,Villefranche-sur-Saône,Rhône,Auvergne-Rhône-Alpes,36288,29542,26338
|
||||||
|
209,Annemasse,Haute-Savoie,Auvergne-Rhône-Alpes,36250,27669,17166
|
||||||
|
210,Tremblay-en-France,Seine-Saint-Denis,Île-de-France,36230,31385,26846
|
||||||
|
211,Sainte-Geneviève-des-Bois,Essonne,Île-de-France,36015,31286,23684
|
||||||
|
212,Creil,Oise,Hauts-de-France,35800,31956,32544
|
||||||
|
213,Neuilly-sur-Marne,Seine-Saint-Denis,Île-de-France,35680,31461,22543
|
||||||
|
214,Conflans-Sainte-Honorine,Yvelines,Île-de-France,35656,31467,26304
|
||||||
|
215,Saint-Raphaël,Var,Provence-Alpes-Côte d'Azur,35633,26616,17844
|
||||||
|
216,Palaiseau,Essonne,Île-de-France,35590,28395,23343
|
||||||
|
217,Bagnolet,Seine-Saint-Denis,Île-de-France,35442,32600,34038
|
||||||
|
218,La Ciotat,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,35281,30620,23916
|
||||||
|
219,Villenave-d'Ornon,Gironde,Nouvelle-Aquitaine,35278,25609,21263
|
||||||
|
220,Thonon-les-Bains,Haute-Savoie,Auvergne-Rhône-Alpes,35241,29677,20700
|
||||||
|
221,Athis-Mons,Essonne,Île-de-France,35101,29123,27640
|
||||||
|
222,Saint-Chamond,Loire,Auvergne-Rhône-Alpes,34979,38878,37728
|
||||||
|
223,Montluçon,Allier,Auvergne-Rhône-Alpes,34938,44248,57871
|
||||||
|
224,Haguenau,Bas-Rhin,Grand Est,34789,27675,22944
|
||||||
|
225,Auxerre,Yonne,Bourgogne-Franche-Comté,34764,38819,35784
|
||||||
|
226,Villeneuve-Saint-Georges,Val-de-Marne,Île-de-France,34607,26952,30488
|
||||||
|
227,Saint-Leu,La Réunion,La Réunion,34196,20931,16870
|
||||||
|
228,Châtenay-Malabry,Hauts-de-Seine,Île-de-France,34170,29197,27484
|
||||||
|
229,Meyzieu,Métropole de Lyon,Auvergne-Rhône-Alpes,34151,28077,10012
|
||||||
|
230,Saint-Martin,Saint-Martin est une collectivité d'outre-mer,,34065,28518,4992
|
||||||
|
231,Roanne,Loire,Auvergne-Rhône-Alpes,34004,41756,53373
|
||||||
|
232,Mâcon,Saône-et-Loire,Bourgogne-Franche-Comté,33810,37275,33445
|
||||||
|
233,Le Perreux-sur-Marne,Val-de-Marne,Île-de-France,33793,28477,29099
|
||||||
|
234,Six-Fours-les-Plages,Var,Provence-Alpes-Côte d'Azur,33665,28957,15118
|
||||||
|
235,Le Port,La Réunion,La Réunion,33531,34692,19768
|
||||||
|
236,Nevers,Nièvre,Bourgogne-Franche-Comté,33279,41968,42422
|
||||||
|
237,Sainte-Marie,La Réunion,La Réunion,33234,20158,14367
|
||||||
|
238,Romans-sur-Isère,Drôme,Auvergne-Rhône-Alpes,33160,32734,31545
|
||||||
|
239,Vitrolles,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,33101,35397,5058
|
||||||
|
240,Schiltigheim,Bas-Rhin,Grand Est,33069,29155,29198
|
||||||
|
241,Agen,Lot-et-Garonne,Nouvelle-Aquitaine,33012,30553,34949
|
||||||
|
242,Les Mureaux,Yvelines,Île-de-France,32949,33089,21733
|
||||||
|
243,Matoury,Guyane,Guyane,32942,10152,567
|
||||||
|
244,Nogent-sur-Marne,Val-de-Marne,Île-de-France,32922,25248,26238
|
||||||
|
245,Marignane,Bouches-du-Rhône,Provence-Alpes-Côte d'Azur,32793,32325,20044
|
||||||
|
246,La Possession,La Réunion,La Réunion,32633,15614,7626
|
||||||
|
247,Montigny-le-Bretonneux,Yvelines,Île-de-France,32575,31687,768
|
||||||
|
248,Cambrai,Nord,Hauts-de-France,32501,33092,37532
|
||||||
|
249,Houilles,Yvelines,Île-de-France,32449,29650,29338
|
||||||
|
250,Épinal,Vosges,Grand Est,32223,36732,36856
|
||||||
|
251,Trappes,Yvelines,Île-de-France,32120,30878,16799
|
||||||
|
252,Châtellerault,Vienne,Nouvelle-Aquitaine,31733,34678,35337
|
||||||
|
253,Lens,Pas-de-Calais,Hauts-de-France,31606,35017,41874
|
||||||
|
254,Saint-Médard-en-Jalles,Gironde,Nouvelle-Aquitaine,31536,22064,8955
|
||||||
|
255,Vigneux-sur-Seine,Essonne,Île-de-France,31463,25203,22577
|
||||||
|
256,Pontoise,Val-d'Oise,Île-de-France,31422,27150,17509
|
||||||
|
257,L'Haÿ-les-Roses,Val-de-Marne,Île-de-France,31417,29746,24352
|
||||||
|
258,Le Chesnay-Rocquencourt,Yvelines,Île-de-France,31306,29542,14184
|
||||||
|
259,Baie-Mahault,Guadeloupe,Guadeloupe,31193,15036,7398
|
||||||
|
260,Plaisir,Yvelines,Île-de-France,31013,25877,6871
|
||||||
|
261,Cachan,Val-de-Marne,Île-de-France,30884,24266,26187
|
||||||
|
262,Pierrefitte-sur-Seine,Seine-Saint-Denis,Île-de-France,30828,23822,19017
|
||||||
|
263,Malakoff,Hauts-de-Seine,Île-de-France,30711,30959,36198
|
||||||
|
264,Viry-Châtillon,Essonne,Île-de-France,30706,30580,27045
|
||||||
|
265,Dreux,Eure-et-Loir,Centre-Val de Loire,30664,35230,29408
|
||||||
|
266,Goussainville,Val-d'Oise,Île-de-France,30642,24812,16097
|
||||||
|
267,Bezons,Val-d'Oise,Île-de-France,30484,25680,24475
|
||||||
|
268,Liévin,Pas-de-Calais,Hauts-de-France,30423,33623,35853
|
||||||
|
269,Rillieux-la-Pape,Métropole de Lyon,Auvergne-Rhône-Alpes,30410,30791,9591
|
||||||
|
270,Chatou,Yvelines,Île-de-France,30330,27977,22619
|
||||||
|
271,Menton,Alpes-Maritimes,Provence-Alpes-Côte d'Azur,30231,29141,25040
|
||||||
|
272,Herblay-sur-Seine,Val-d'Oise,Île-de-France,30095,22135,12264
|
||||||
|
273,Périgueux,Dordogne,Nouvelle-Aquitaine,30060,30280,37450
|
||||||
|
274,Charenton-le-Pont,Val-de-Marne,Île-de-France,30053,21872,22300
|
||||||
|
275,Saint-Cloud,Hauts-de-Seine,Île-de-France,30038,28597,28158
|
||||||
|
276,Vandœuvre-lès-Nancy,Meurthe-et-Moselle,Grand Est,30009,34105,19686
|
||||||
|
277,Villemomble,Seine-Saint-Denis,Île-de-France,30005,26863,28756
|
||||||
|
@ -3,133 +3,80 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="description" content="Page d'exemple d'utilisation du script freeDatas2HTML pour visualiser des informations venant d'un fichier CSV.">
|
<meta name="description" content="Présentation de FreeDatas2HTML, module TypeScript permettant de parser, afficher, filtrer... des données, côté client.">
|
||||||
<meta name="robots" content="noindex">
|
<meta name="robots" content="index, follow">
|
||||||
<link rel="stylesheet" href="CSS/paper.min.css">
|
<link rel="stylesheet" href="CSS/paper.min.css">
|
||||||
<link rel="stylesheet" href="CSS/fd2html.css">
|
<link rel="stylesheet" href="CSS/fd2html.css">
|
||||||
<script src="JS/exampleWithHTML.app.js" defer></script>
|
<title>FreeDatas2HTML : parser et afficher des données en TypeScript/JavaScript</title>
|
||||||
<title>freeDatas2HTML : démo d'affichage de données venant du DOM (HTML)</title>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="paper container">
|
<body class="paper container">
|
||||||
<h1>freeDatas2HTML</h1>
|
<h1>FreeDatas2HTML</h1>
|
||||||
<p>Autres pages d'exemple avec des données transmises <a href="./withJSON.html">en JSON</a> ou <a href="./withCSV.html">en CSV</a>.</p>
|
<h2>Parser, afficher, paginer, filtrer, classer des données… à l’aide de TypeScript/JavaScript</h2>
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div id="filtre1" class="sm-12 md-6 lg-4 col"></div>
|
|
||||||
<div id="filtre2" class="sm-12 md-6 lg-4 col"></div>
|
|
||||||
<div id="filtre3" class="sm-12 md-6 lg-4 col"></div>
|
|
||||||
<div id="paginationOptions" class="col-12 col"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Nombre total de résultats : <span id="compteur"></span></h3>
|
|
||||||
<article id="datas">
|
<article id="datas">
|
||||||
<table>
|
<h3>Parser des données JSON, CSV ou HTML</h3>
|
||||||
<thead>
|
|
||||||
<tr>
|
<p>FreeDatas2HTML vous permet de <strong>parser des données</strong> listées dans une page internet ou encore une ressource distante. Les formats de données possibles sont le <a href="/withJSON.html" title="Page d'exemple">JSON</a>, le <a href="/withCSV.html" title="Page d'exemple">CSV</a> ou encore le <a href="/withHTML.html" title="Page d'exemple">HTML</a>, pour peu que les données y soient listées de manière rigoureuse.</p>
|
||||||
<th>Séquence</th><th>Signification</th><th>Décrit en section</th><th>Défini originellement en CSS niveau</th>
|
|
||||||
</tr>
|
<p><a href="/userFile.html" title="Page de test" class="paper-btn btn-success">Testez ici avec votre propre fichier CSV.</a></p>
|
||||||
</thead
|
|
||||||
<tbody>
|
<p>Le parseur retourne de manière distincte une liste des champs trouvés, une liste des « enregistrements », ainsi que les éventuelles anomalies rencontrées durant le traitement. Vous pouvez <strong>utiliser votre propre parseur</strong>, par exemple pour gérer d’autres formats de données (XML…).</p>
|
||||||
<tr><td>*</td><td>tout élément</td><td>Sélecteur universel</td><td>2</td></tr>
|
|
||||||
<tr><td>E</td><td>tout élément de type E</td><td>Sélecteur de type d'élément</td><td>1</td></tr>
|
<p>Une fois les données parsées, <strong>tous les traitements se font côté client</strong>, sans nouvel appel nécessaire à l’éventuelle source de données distante.</p>
|
||||||
<tr><td>E[foo]</td><td>tout élément E portant l'attribut "foo"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
|
|
||||||
<tr><td>E[foo="bar"]</td><td>tout élément E portant l'attribut"
|
<h3>Afficher les données dans votre page web</h3>
|
||||||
foo" et dont la valeur de cet attribut est exactement "bar"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
|
|
||||||
<tr><td>E[foo~="bar"]</td><td>tout élément E dont l'attribut "foo"
|
<p>FreeDatas2HTML vous permet d’afficher les données dans votre page web, par défaut <strong>sous forme de tableau</strong>. Mais il est possible de paramèter d’autres formats, par exemple <strong>une liste HTML</strong> ou encore d’utiliser son propre moteur de rendu, tout en bénéficiant du reste du code de FreeDatas2HTML.</p>
|
||||||
contient une liste de valeurs séparées par des espaces, l'une
|
|
||||||
de ces valeurs étant exactement égale à "bar"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
|
<p>Vous pouvez choisir de ne <strong>pas afficher tous les champs trouvés</strong> par le parseur, tout en les gardant disponibles pour les filtres. En option, un <strong>compteur d’enregistrements</strong> peut être affiché.</p>
|
||||||
<tr><td>E[foo^="bar"]</td><td>tout élément E dont la valeur de l'attribut
|
|
||||||
"foo" commence exactement par la chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
|
<h3>Classer les données</h3>
|
||||||
<tr><td>E[foo$="bar"]</td><td>tout élément E dont la valeur de l'attribut
|
|
||||||
"foo" finit exactement par la chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
|
<p>Certains champs peuvent être proposés pour permettre de classer les données affichées.</p>
|
||||||
<tr><td>E[foo*="bar"]</td><td>tout élément E dont la valeur de l'attribut
|
|
||||||
"foo" contient la sous-chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
|
<p>Par défaut, <strong>le classement se fait de manière alphabétique et « naturelle »</strong>, c’est-à-dire qu’en ordre ascendant « 20 » sera devant « 100 », malgré le fait que « 1 » se trouve devant « 2 »…</p>
|
||||||
<tr><td>E[lang|="en"]</td><td>tout élément E dont l'attribut 'lang"
|
|
||||||
est une liste de valeurs séparées par des tirets et commençant
|
<p>Mais il est possible de <strong>fournir des fonctions spécifiques de classement</strong> pour certains champs, pour peu qu’elles soient compatibles avec <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" target="_blank" title="Voir sur MDN (Mozilla)" rel="noopener">la fonction sort() de JavaScript</a>.</p>
|
||||||
(à gauche) par "en"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
|
|
||||||
<tr><td>E:root</td><td>un élément E, racine du document</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
<h3>Filtrer les données</h3>
|
||||||
<tr><td>E:nth-child(n)</td><td>un élément E qui est le n-ième enfant
|
|
||||||
de son parent</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
<p>Il peut être proposé à l’utilisateur de filtrer les données, via des listes <SELECT> reprenant les valeurs distinctes d’un champ, classées de la même manière que vu précédemment.</p>
|
||||||
<tr><td>E:nth-last-child(n)</td><td>un élément E qui est le n-ième enfant
|
|
||||||
de son parent en comptant depuis le dernier enfant</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
<p>Si plusieurs filtres sont ainsi proposés, leurs actions s’additionnent, c’est-à-dire que <strong>seuls les enregistrements validant tous les filtres sélectionnés seront fournis en résultat</strong>.</p>
|
||||||
<tr><td>E:nth-of-type(n)</td><td>un élément E qui est le n-ième enfant
|
|
||||||
de son parent et de ce type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
<h3>Moteur de recherche</h3>
|
||||||
<tr><td>E:nth-last-of-type(n)</td><td>un élément E qui est le n-ième enfant
|
|
||||||
de son parent et de ce type en comptant depuis le dernier enfant</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
<p>Un moteur de recherche peut aussi être proposé à l’utilisateur.<br />
|
||||||
<tr><td>E:first-child</td><td>un élément E, premier enfant de son parent</td><td>Pseudo-classes structurelles</td><td>2</td></tr>
|
Il agit comme les filtres précédents, si ce n’est que <strong>la saisie est libre et que la recherche se fait sur plusieurs champs</strong>.</p>
|
||||||
<tr><td>E:last-child</td><td>un élément E, dernier enfant de son parent</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
|
||||||
<tr><td>E:first-of-type</td><td>un élément E, premier enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
<p>Il est possible de définir les champs sur lesquels effectuer la recherche ou les garder tous (par défaut).</p>
|
||||||
<tr><td>E:last-of-type</td><td>un élément E, dernier enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
|
||||||
<tr>
|
<p>La recherche <strong>peut être lancée dès la saisie d’un certain nombre de caractères</strong>, ou attendre un clic sur le bouton d’envoi.</p>
|
||||||
<td height="19">E:only-child</td><td height="19">un élément E, seul enfant de
|
|
||||||
son parent</td><td height="19">Pseudo-classes
|
<h3>Pagination</h3>
|
||||||
structurelles</td><td height="19">3</td></tr>
|
|
||||||
<tr><td>E:only-of-type</td><td>un élément E, seul enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
<p>Une valeur de pagination peut être définie et/ou plusieurs <strong>options de pagination</strong> proposées aux utilisateurs finaux.</p>
|
||||||
<tr><td>E:empty</td><td>un élément E qui n'a aucun enfant (y compris
|
|
||||||
noeuds textuels purs)</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
<h3>Adaptable à vos besoins</h3>
|
||||||
<tr><td>E:link <br>
|
|
||||||
E:visited</td><td>un élément E qui est la source d'un hyperlien
|
<p><strong>Toutes les fonctionnalités de FreeDatas2HTML sont proposées en option.</strong></p>
|
||||||
dont la cible n'a pas encore été visitée (:link) ou
|
|
||||||
a déjà été visitée (:visited)</td><td>Les pseudo-classes de lien</td><td>1</td></tr>
|
<p>Vous pouvez très bien n’utiliser FreeDatas2HTML que pour parser les données et en faire ensuite ce que bon vous semble…</p>
|
||||||
<tr><td>E:active <br>
|
|
||||||
E:hover <br>
|
<p>Vous pouvez écrire vos propres scripts pour <strong>remplacer n’importe quelle classe du projet</strong>, pour peu qu’il respecte son interface. Cela peut être assez simple, en vous inspirant de l’existant.</p>
|
||||||
E:focus</td><td>un élément E pendant certaines actions de
|
|
||||||
l'usager</td><td>Les pseudo-classes d'action
|
<p>FreeDatas2HTML est partagé <a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/LICENSE" target="_blank" title="Lire la licence" rel="noopener">sous licence AGPL</a>, ce qui vous donne le droit de modifier et partager son code, mais en gardant les mêmes droits (copyleft).</p>
|
||||||
Usager </td><td>1 and 2</td></tr>
|
|
||||||
<tr><td>E:target</td><td>un élément E qui est la cible de l'URL d'origine
|
<p>N’hésitez pas à me contacter pour me signaler un bug ou me demander de l’aide pour une intégration. Pas forcément gratuitement, dans le deuxième cas :-)</p>
|
||||||
contenant lui-même un fragment identifiant.</td><td>La pseudo-classe :target</td><td>3</td></tr>
|
|
||||||
<tr><td>E:lang(c)</td><td>un élément E dont le langage (humain) est
|
<h3>Code et dépendances</h3>
|
||||||
c (le langage du document spécifie comment le langage humain est
|
|
||||||
déterminé)</td><td>La pseudo-classe :lang() </td><td>2</td></tr>
|
<p>FreeDatas2HTML est écrit en <a href="https://www.typescriptlang.org/" target="_blank" title="Site du projet (en)" rel="noopener">TypeScript</a>, les tests étant réalisés via <a href="https://karma-runner.github.io/latest/index.html" title="Site du projet (en)" target="_blank" rel="noopener">Karma</a> et <a href="https://jasmine.github.io/" target="_blank" title="Site du projet (en)" rel="noopener">Jasmine</a> dans environnement Node/Webpack. Deux modules externes sont utilisés : <a href="https://www.papaparse.com" rel="noopener" target="_blank" title="Site du projet (en)">Papa Parse</a> pour parser les données CSV et <a href="https://www.npmjs.com/package/natural-orderby" rel="noopener" target="_blank" title="Page du projet sur NPM (en)">natural-orderby</a> pour optimiser le classement par défaut des données.</p>
|
||||||
<tr><td>E:enabled<br>
|
|
||||||
E:disabled </td><td>un élément d'interface utilisateur E qui
|
<p><a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML" target="_blank" title="accéder au dépôt GIT" rel="noopener" class="paper-btn btn-secondary">Accéder au dépôt GIT du projet.</a></p>
|
||||||
est actif ou inactif.</td><td>Les pseudo-classes d'état
|
|
||||||
d'élément d'interface</td><td>3</td></tr>
|
|
||||||
<tr><td>E:checked<br>
|
|
||||||
E:indeterminate </td><td>un élément d'interface utilisateur E qui
|
|
||||||
est coché ou dont l'état est indéterminé (par
|
|
||||||
exemple un bouton-radio ou une case à cocher)</td><td>Les pseudo-classes d'état
|
|
||||||
d'élément d'interface</td><td>3</td></tr>
|
|
||||||
<tr><td>E:contains("foo")</td><td>un élément E dont le contenu textuel concaténé
|
|
||||||
contient la sous-chaîne "foo"</td><td>La pseudo-classe de contenu</td><td>3</td></tr>
|
|
||||||
<tr><td>E::first-line</td><td>la première ligne formatée d'un élément
|
|
||||||
E</td><td>The :first-line pseudo-element</td><td>1</td></tr>
|
|
||||||
<tr><td>E::first-letter</td><td>le premier caractère formaté d'un élément
|
|
||||||
E</td><td>Le pseudo-élément
|
|
||||||
::first-letter </td><td>1</td></tr>
|
|
||||||
<tr><td>E::selection</td><td>la partie d'un élément E qui est actuellement
|
|
||||||
sélectionnée/mise en exergue par l'usager</td><td>Les pseudo-éléments
|
|
||||||
fragments d'éléments d'interface</td><td>3</td></tr>
|
|
||||||
<tr><td>E::before</td><td>le contenu généré avant un élément
|
|
||||||
E</td><td>Le pseudo-élément
|
|
||||||
::before </td><td>2</td></tr>
|
|
||||||
<tr><td>E::after</td><td>le contenu généré après un
|
|
||||||
élément E</td><td>Le pseudo-élément
|
|
||||||
::after </td><td>2</td></tr>
|
|
||||||
<tr><td>E.warning</td><td><i>Uniquement en HTML</i>. Identique à E[class~="warning"].</td><td>Sélecteurs de classe</td><td>1</td></tr>
|
|
||||||
<tr><td>E#myid</td><td>un élément E dont l'ID est égal à
|
|
||||||
"myid".</td><td>Sélecteurs d'ID</td><td>1</td></tr>
|
|
||||||
<tr><td>E:not(s)</td><td> un élément E qui n'est pas représenté
|
|
||||||
par le sélecteur simple s</td><td>La pseudo-classe de négation</td><td>3</td></tr>
|
|
||||||
<tr><td>E F</td><td>un élément F qui est le descendant d'un
|
|
||||||
élément E</td><td>Combinateur de descendance
|
|
||||||
</td><td>1</td></tr>
|
|
||||||
<tr><td>E > F</td><td>un élément F qui est le fils d'un élément
|
|
||||||
E</td><td>Combinateur filial</td><td>2</td></tr>
|
|
||||||
<tr><td>E + F</td><td>un élément F immédiatement précédé
|
|
||||||
par un élément E</td><td>Combinateur d'adjacence
|
|
||||||
directe</td><td>2</td></tr>
|
|
||||||
<tr><td>E ~ F</td><td>un élément F précédé
|
|
||||||
par un élément E</td><td>Combinateur d'adjacence
|
|
||||||
indirecte</td><td>3</td></tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</article>
|
</article>
|
||||||
<p id="pages"></p>
|
|
||||||
<aside><p>Le tableau vient du <a href="https://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#selectors" targe="_blank">W3C</a> qui pourra vous donner quelques pistes pour créer vos sélecteurs CSS si besoin.</p>
|
<footer><p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
|
||||||
<p>Certains champs (=colonnes) peuvent être désignées comme devant permettre 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>Une autre 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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -8,29 +8,33 @@
|
|||||||
<link rel="stylesheet" href="CSS/paper.min.css">
|
<link rel="stylesheet" href="CSS/paper.min.css">
|
||||||
<link rel="stylesheet" href="CSS/fd2html.css">
|
<link rel="stylesheet" href="CSS/fd2html.css">
|
||||||
<script src="JS/exampleWithUserFile.app.js" defer></script>
|
<script src="JS/exampleWithUserFile.app.js" defer></script>
|
||||||
<title>freeDatas2HTML : afficher les données d'un fichier CSV dans une page web</title>
|
<title>Afficher les données d'un fichier CSV dans une page web à l'aide de FreeDatas2HTML</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="paper container">
|
<body class="paper container">
|
||||||
<h1>freeDatas2HTML</h1>
|
<h1>FreeDatas2HTML</h1>
|
||||||
<h2>Afficher votre fichier CSV dans la page web</h2>
|
<h2>Afficher votre fichier CSV dans la page web</h2>
|
||||||
<p>Sur cette page vous permet de tester directement freeDatas2HTML en affichant les données d'un fichier CSV de votre choix. Vous pourrez choisir les champs/colonnes à afficher. Suivant la taille de votre écran ou encore le nombre champs, le résultat peut être + ou moins lisible. freeDatas2HTML permet d'afficher les données autrement que sous forme de tableau pour prévoir ce type de situation.</p>
|
|
||||||
<p>Pour rappel, freeDatas2HTML s'exécute uniquement côté client, c'est-à-dire dans votre navigateur. Les donnée de votre fichier ne sont donc pas envoyées sur un serveur. En conséquence, si vous partager cette page avec d'autres personnes, elles devront elles-mêmes sélectionner le fichier pour visualiser les données. Il est évidemment possible d'indiquer un fichier à afficher par défaut. C'est ce qui est fait dans les autres exemples présentés sur ce site.</p>
|
<p>Cette page vous permet de tester directement freeDatas2HTML en affichant les données d'un fichier CSV de votre choix. Vous pourrez choisir les champs/colonnes à afficher. Suivant la taille de votre écran ou encore le nombre champs, le résultat peut être + ou - lisible... Sachez que FreeDatas2HTML permet d'afficher les données autrement que sous forme de tableau quan cela est plus pratique.</p>
|
||||||
|
|
||||||
<form id="userSettings">
|
<form id="userSettings">
|
||||||
<fieldset class="form-group">
|
<fieldset class="form-group">
|
||||||
<label for="myFile">Sélectionnez votre fichier CSV :</label><input type="file" id="myFile" name="myFile" accept=".csv, .tsv">
|
<label for="myFile">Sélectionnez votre fichier CSV :</label><input type="file" id="myFile" name="myFile" accept=".csv">
|
||||||
</fieldset>
|
|
||||||
<div id="displayOptions">
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
<div id="displayOptions"></div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div id="paginationOptions" class="col-12 col"></div>
|
<div id="paginationOptions" class="sm-12 md-6 lg-3 col"></div>
|
||||||
<div id="search" class="sm-12 md-6 lg-6 col"></div>
|
<div id="search" class="sm-12 md-6 lg-9 col"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<article id="datas"></article>
|
<article id="datas"></article>
|
||||||
|
|
||||||
<p id="pages"></p>
|
<p id="pages"></p>
|
||||||
<aside><p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></aside>
|
|
||||||
|
<aside>
|
||||||
|
<p>Pour rappel, freeDatas2HTML s'exécute uniquement côté client, c'est-à-dire dans votre navigateur. Les donnée de votre fichier ne sont donc pas envoyées sur un serveur. En conséquence, si vous partager cette page avec d'autres personnes, elles devront elles-mêmes sélectionner le fichier pour visualiser les données. Il est évidemment possible d'indiquer un fichier à afficher par défaut. C'est ce qui est fait dans les autres exemples présentés sur ce site.</p>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<footer><p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -3,16 +3,16 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="description" content="Page d'exemple d'utilisation du script freeDatas2HTML pour visualiser des informations venant d'un fichier CSV.">
|
<meta name="description" content="Exemple d'utilisation de FreeDatas2HTML pour visualiser des informations venant d'un fichier CSV.">
|
||||||
<meta name="robots" content="noindex">
|
<meta name="robots" content="index, follow">
|
||||||
<link rel="stylesheet" href="CSS/paper.min.css">
|
<link rel="stylesheet" href="CSS/paper.min.css">
|
||||||
<link rel="stylesheet" href="CSS/fd2html.css">
|
<link rel="stylesheet" href="CSS/fd2html.css">
|
||||||
<script src="JS/exampleWithCSV.app.js" defer></script>
|
<script src="JS/exampleWithCSV.app.js" defer></script>
|
||||||
<title>freeDatas2HTML : démo d'affichage de données venant d'un fichier CSV</title>
|
<title>Parser et afficher des données CSV via FreeDatas2HTML</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="paper container">
|
<body class="paper container">
|
||||||
<h1>freeDatas2HTML</h1>
|
<h1>FreeDatas2HTML</h1>
|
||||||
<p><a href="./withJSON.html">Autre page d'exemple avec des données transmises en JSON</a>.</p>
|
<h2>Parser et afficher des données CSV</h2>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div id="filtre1" class="sm-12 md-6 lg-4 col"></div>
|
<div id="filtre1" class="sm-12 md-6 lg-4 col"></div>
|
||||||
@ -27,12 +27,16 @@
|
|||||||
<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" rel="noopener">sur Wikipédia</a>.</p>
|
||||||
<p>Le dernier filtre (Mots-clés) permet de montrer la possibilité d’<b>extraire des données d’un champ ayant plusieurs valeurs par ligne</b>, ici séparées par une virgule, sachant que l’on peut désigner n’importe quel autre caractère séparateur.</p>
|
<p>Le dernier filtre (Mots-clés) permet de montrer la possibilité d’<b>extraire des données d’un champ ayant plusieurs valeurs par ligne</b>, ici séparées par une virgule, sachant que l’on peut désigner n’importe quel autre caractère séparateur.</p>
|
||||||
<p>Certains champs (=colonnes) peuvent être désignées comme devant permettre 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>Certains champs (=colonnes) peuvent être désignées comme devant permettre 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>Il est également possible d’afficher le nombre total de résultats, avec prise en compte des éventuels filtres.</p>
|
||||||
<p>Une autre option permet de <b>paginer les résultats</b>.</p>
|
<p>Une autre option permet de <b>paginer les résultats</b>.</p>
|
||||||
<p>Enfin il est possible d’<b>afficher les données autrement que sous forme de tableau HTML</b>. Si vous affichez cette page sur un écran large de moins de 800 px, les données seront simplement listées. Si vous avez un grand écran, vous pouvez visualiser cet affichage en faisant « Alt+Maj+M », puis « F5 ». Appuyez de nouveau sur « F5 », une fois de retour sur grand écran pour revoir le tableau.</p>
|
<p>Enfin il est possible d’<b>afficher les données autrement que sous forme de tableau HTML</b>. Si vous affichez cette page sur un écran large de moins de 800 px, les données seront simplement listées. Si vous avez un grand écran, vous pouvez visualiser cet affichage en faisant « Alt+Maj+M », puis « F5 ». Appuyez de nouveau sur « F5 », une fois de retour sur grand écran pour revoir le tableau.</p>
|
||||||
<p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></aside>
|
</aside>
|
||||||
|
|
||||||
|
<footer><p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
137
public/withHTML.html
Normal file
137
public/withHTML.html
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="Exemple d'utilisation de FreeDatas2HTML pour parser et adapter l'affichage d'un tableau HTML.">
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<link rel="stylesheet" href="CSS/paper.min.css">
|
||||||
|
<link rel="stylesheet" href="CSS/fd2html.css">
|
||||||
|
<script src="JS/exampleWithHTML.app.js" defer></script>
|
||||||
|
<title>Parser et afficher un tableau HTML via FreeDatas2HTML</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="paper container">
|
||||||
|
<h1>FreeDatas2HTML</h1>
|
||||||
|
<h2>Parser un tableau HTML pour adapter son affichage</h2>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div id="filtre1" class="sm-12 md-6 lg-6 col"></div>
|
||||||
|
<div id="paginationOptions" class="sm-12 md-6 lg-6 col"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Nombre total de résultats : <span id="compteur"></span></h3>
|
||||||
|
<article id="datas">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Séquence</th><th>Signification</th><th>Décrit en section</th><th>Version CSS</th>
|
||||||
|
</tr>
|
||||||
|
</thead
|
||||||
|
<tbody>
|
||||||
|
<tr><td>*</td><td>tout élément</td><td>Sélecteur universel</td><td>2</td></tr>
|
||||||
|
<tr><td>E</td><td>tout élément de type E</td><td>Sélecteur de type d'élément</td><td>1</td></tr>
|
||||||
|
<tr><td>E[foo]</td><td>tout élément E portant l'attribut "foo"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
|
||||||
|
<tr><td>E[foo="bar"]</td><td>tout élément E portant l'attribut"
|
||||||
|
foo" et dont la valeur de cet attribut est exactement "bar"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
|
||||||
|
<tr><td>E[foo~="bar"]</td><td>tout élément E dont l'attribut "foo"
|
||||||
|
contient une liste de valeurs séparées par des espaces, l'une
|
||||||
|
de ces valeurs étant exactement égale à "bar"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
|
||||||
|
<tr><td>E[foo^="bar"]</td><td>tout élément E dont la valeur de l'attribut
|
||||||
|
"foo" commence exactement par la chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
|
||||||
|
<tr><td>E[foo$="bar"]</td><td>tout élément E dont la valeur de l'attribut
|
||||||
|
"foo" finit exactement par la chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
|
||||||
|
<tr><td>E[foo*="bar"]</td><td>tout élément E dont la valeur de l'attribut
|
||||||
|
"foo" contient la sous-chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
|
||||||
|
<tr><td>E[lang|="en"]</td><td>tout élément E dont l'attribut 'lang"
|
||||||
|
est une liste de valeurs séparées par des tirets et commençant
|
||||||
|
(à gauche) par "en"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
|
||||||
|
<tr><td>E:root</td><td>un élément E, racine du document</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||||||
|
<tr><td>E:nth-child(n)</td><td>un élément E qui est le n-ième enfant
|
||||||
|
de son parent</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||||||
|
<tr><td>E:nth-last-child(n)</td><td>un élément E qui est le n-ième enfant
|
||||||
|
de son parent en comptant depuis le dernier enfant</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||||||
|
<tr><td>E:nth-of-type(n)</td><td>un élément E qui est le n-ième enfant
|
||||||
|
de son parent et de ce type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||||||
|
<tr><td>E:nth-last-of-type(n)</td><td>un élément E qui est le n-ième enfant
|
||||||
|
de son parent et de ce type en comptant depuis le dernier enfant</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||||||
|
<tr><td>E:first-child</td><td>un élément E, premier enfant de son parent</td><td>Pseudo-classes structurelles</td><td>2</td></tr>
|
||||||
|
<tr><td>E:last-child</td><td>un élément E, dernier enfant de son parent</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||||||
|
<tr><td>E:first-of-type</td><td>un élément E, premier enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||||||
|
<tr><td>E:last-of-type</td><td>un élément E, dernier enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||||||
|
<tr>
|
||||||
|
<td height="19">E:only-child</td><td height="19">un élément E, seul enfant de
|
||||||
|
son parent</td><td height="19">Pseudo-classes
|
||||||
|
structurelles</td><td height="19">3</td></tr>
|
||||||
|
<tr><td>E:only-of-type</td><td>un élément E, seul enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||||||
|
<tr><td>E:empty</td><td>un élément E qui n'a aucun enfant (y compris
|
||||||
|
noeuds textuels purs)</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
|
||||||
|
<tr><td>E:link <br>
|
||||||
|
E:visited</td><td>un élément E qui est la source d'un hyperlien
|
||||||
|
dont la cible n'a pas encore été visitée (:link) ou
|
||||||
|
a déjà été visitée (:visited)</td><td>Les pseudo-classes de lien</td><td>1</td></tr>
|
||||||
|
<tr><td>E:active <br>
|
||||||
|
E:hover <br>
|
||||||
|
E:focus</td><td>un élément E pendant certaines actions de
|
||||||
|
l'usager</td><td>Les pseudo-classes d'action
|
||||||
|
Usager </td><td>1 and 2</td></tr>
|
||||||
|
<tr><td>E:target</td><td>un élément E qui est la cible de l'URL d'origine
|
||||||
|
contenant lui-même un fragment identifiant.</td><td>La pseudo-classe :target</td><td>3</td></tr>
|
||||||
|
<tr><td>E:lang(c)</td><td>un élément E dont le langage (humain) est
|
||||||
|
c (le langage du document spécifie comment le langage humain est
|
||||||
|
déterminé)</td><td>La pseudo-classe :lang() </td><td>2</td></tr>
|
||||||
|
<tr><td>E:enabled<br>
|
||||||
|
E:disabled </td><td>un élément d'interface utilisateur E qui
|
||||||
|
est actif ou inactif.</td><td>Les pseudo-classes d'état
|
||||||
|
d'élément d'interface</td><td>3</td></tr>
|
||||||
|
<tr><td>E:checked<br>
|
||||||
|
E:indeterminate </td><td>un élément d'interface utilisateur E qui
|
||||||
|
est coché ou dont l'état est indéterminé (par
|
||||||
|
exemple un bouton-radio ou une case à cocher)</td><td>Les pseudo-classes d'état
|
||||||
|
d'élément d'interface</td><td>3</td></tr>
|
||||||
|
<tr><td>E:contains("foo")</td><td>un élément E dont le contenu textuel concaténé
|
||||||
|
contient la sous-chaîne "foo"</td><td>La pseudo-classe de contenu</td><td>3</td></tr>
|
||||||
|
<tr><td>E::first-line</td><td>la première ligne formatée d'un élément
|
||||||
|
E</td><td>The :first-line pseudo-element</td><td>1</td></tr>
|
||||||
|
<tr><td>E::first-letter</td><td>le premier caractère formaté d'un élément
|
||||||
|
E</td><td>Le pseudo-élément
|
||||||
|
::first-letter </td><td>1</td></tr>
|
||||||
|
<tr><td>E::selection</td><td>la partie d'un élément E qui est actuellement
|
||||||
|
sélectionnée/mise en exergue par l'usager</td><td>Les pseudo-éléments
|
||||||
|
fragments d'éléments d'interface</td><td>3</td></tr>
|
||||||
|
<tr><td>E::before</td><td>le contenu généré avant un élément
|
||||||
|
E</td><td>Le pseudo-élément
|
||||||
|
::before </td><td>2</td></tr>
|
||||||
|
<tr><td>E::after</td><td>le contenu généré après un
|
||||||
|
élément E</td><td>Le pseudo-élément
|
||||||
|
::after </td><td>2</td></tr>
|
||||||
|
<tr><td>E.warning</td><td><i>Uniquement en HTML</i>. Identique à E[class~="warning"].</td><td>Sélecteurs de classe</td><td>1</td></tr>
|
||||||
|
<tr><td>E#myid</td><td>un élément E dont l'ID est égal à
|
||||||
|
"myid".</td><td>Sélecteurs d'ID</td><td>1</td></tr>
|
||||||
|
<tr><td>E:not(s)</td><td> un élément E qui n'est pas représenté
|
||||||
|
par le sélecteur simple s</td><td>La pseudo-classe de négation</td><td>3</td></tr>
|
||||||
|
<tr><td>E F</td><td>un élément F qui est le descendant d'un
|
||||||
|
élément E</td><td>Combinateur de descendance
|
||||||
|
</td><td>1</td></tr>
|
||||||
|
<tr><td>E > F</td><td>un élément F qui est le fils d'un élément
|
||||||
|
E</td><td>Combinateur filial</td><td>2</td></tr>
|
||||||
|
<tr><td>E + F</td><td>un élément F immédiatement précédé
|
||||||
|
par un élément E</td><td>Combinateur d'adjacence
|
||||||
|
directe</td><td>2</td></tr>
|
||||||
|
<tr><td>E ~ F</td><td>un élément F précédé
|
||||||
|
par un élément E</td><td>Combinateur d'adjacence
|
||||||
|
indirecte</td><td>3</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</article>
|
||||||
|
<p id="pages"></p>
|
||||||
|
|
||||||
|
<aside>
|
||||||
|
<p>Dans cette page, avant l'action de FreeDatas2HTML, toutes les données sont affichées, sans proposer de pagination ni de filtre.</p>
|
||||||
|
<p>C'est un cas d'usage possible de FreeDatas2HTML : vous avez listé des données dans une page via votre code backend (PHP, Python, node.js...). Vous souhaitez proposer à vos utilisateurs de passer de pages en pages, d'effectuer des recherches... tout cela sans avoir à appeler de nouveau votre backend. Le résultat est plus fluide et cela économise les ressources de votre serveur, tout se faisant dans le navigateur de l'utilisateur.</p>
|
||||||
|
<p>Il est tout à fait possible de lister vos données autrement que dans un tableau, du moment qu'il reste possible de cibler séparément le nom des champs et la liste des enregistrements via des sélecteurs CSS. D'où le tableau ci-dessous, venant du <a href="https://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#selectors" target="_blank" rel="noopener">W3C</a> et dont le contenu pourra donc vous être utile :-)</p>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<footer><p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -3,30 +3,32 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="description" content="Page d'exemple d'utilisation du script freeDatas2HTML pour visualiser des informations venant d'un fichier CSV.">
|
<meta name="description" content="Exemple d'utilisation de FreeDatas2HTML pour parser et adapter l'affichage de données JSON.">
|
||||||
<meta name="robots" content="noindex">
|
<meta name="robots" content="index, follow">
|
||||||
<link rel="stylesheet" href="CSS/paper.min.css">
|
<link rel="stylesheet" href="CSS/paper.min.css">
|
||||||
<link rel="stylesheet" href="CSS/fd2html.css">
|
<link rel="stylesheet" href="CSS/fd2html.css">
|
||||||
<script src="JS/exampleWithJSON.app.js" defer></script>
|
<script src="JS/exampleWithJSON.app.js" defer></script>
|
||||||
<title>freeDatas2HTML : démo d'affichage de données transmises en JSON.</title>
|
<title>Parser et afficher des données JSON via FreeDatas2HTML</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="paper container">
|
<body class="paper container">
|
||||||
<h1>freeDatas2HTML</h1>
|
<h1>FreeDatas2HTML</h1>
|
||||||
<p><a href="./">Autre page d'exemple avec des données transmises en CSV.</a>.</p>
|
<h2>Parser et afficher des données JSON</h2>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div id="filtre1" class="sm-12 md-6 lg-4 col"></div>
|
<div id="filtre1" class="sm-12 md-6 lg-6 col"></div>
|
||||||
<div id="filtre2" class="sm-12 md-6 lg-4 col"></div>
|
<div id="paginationOptions" class="sm-12 md-6 lg-6 col"></div>
|
||||||
<div id="filtre3" class="sm-12 md-6 lg-4 col"></div>
|
|
||||||
<div id="paginationOptions" class="col-12 col"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Nombre total de résultats : <span id="compteur"></span></h3>
|
<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 JSON.</p>
|
||||||
</article>
|
</article>
|
||||||
<p id="pages"></p>
|
<p id="pages"></p>
|
||||||
<aside><p>Le fonctionnement est similaire qu'avec du CSV. Les données JSON ont été recopiées de l'<a href="https://jsonplaceholder.typicode.com/" target="_blank">API de test {JSON} Placeholder</a>.</p>
|
<aside>
|
||||||
<p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></aside>
|
<p>Le format JSON est sans doute le plus utilisé de nos jours, surtout si vous cherchez à <strong>afficher les données provenant d'une API</strong>, ce que permet FreeDatas2HTML en passant par exemple un token en entête de votre requête.</p>
|
||||||
|
<p>Pour le reste, le fonctionnement est similaire qu'<a href="./withCSV.html">avec du CSV</a>.<br>Les données JSON ont été recopiées de l'<a href="https://jsonplaceholder.typicode.com/" target="_blank"rel="noopener">API de test {JSON} Placeholder</a>.</p>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<footer><p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -1,103 +0,0 @@
|
|||||||
import { FreeDatas2HTML, Pagination, Render, SearchEngine, Selector, SortingField } from "./FreeDatas2HTML";
|
|
||||||
|
|
||||||
const initialise = async () =>
|
|
||||||
{
|
|
||||||
try
|
|
||||||
{
|
|
||||||
// Fonction spécifique de classement utile pour les données du 4ième champs
|
|
||||||
const mySort = (a: any, b: any, order: "asc"|"desc" = "asc") =>
|
|
||||||
{
|
|
||||||
const values = [ "> 100000", "> 1 et < 100 000", "≤ 1", "Traces", "Inexistant"];
|
|
||||||
if(order === "desc")
|
|
||||||
values.reverse();
|
|
||||||
if(values.indexOf(a) > values.indexOf(b))
|
|
||||||
return -1;
|
|
||||||
else if(values.indexOf(a) < values.indexOf(b))
|
|
||||||
return 1;
|
|
||||||
else
|
|
||||||
return 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Création d'un convertisseur parsant les données d'un fichier CSV "distant"
|
|
||||||
let converter=new FreeDatas2HTML("CSV");
|
|
||||||
converter.parser.setRemoteSource({ url:"http://localhost:8080/datas/elements-chimiques.csv" });
|
|
||||||
converter.datasViewElt={ id:"datas" };
|
|
||||||
await converter.run();
|
|
||||||
|
|
||||||
// Adaptation du rendu suivant la taille de l'écran
|
|
||||||
const myRender=new Render();
|
|
||||||
if(window.innerWidth < 800)
|
|
||||||
{
|
|
||||||
myRender.settings=
|
|
||||||
{
|
|
||||||
allBegining:"<h4>Affichage petits écrans !</h4>",
|
|
||||||
allEnding:"",
|
|
||||||
linesBegining:"<ul>",
|
|
||||||
linesEnding:"</ul>",
|
|
||||||
lineBegining:"<li><ul>",
|
|
||||||
lineEnding:"</ul></li>",
|
|
||||||
dataDisplaying:"<li><b>#FIELDNAME :</b> #VALUE</li>",
|
|
||||||
};
|
|
||||||
converter.datasRender=myRender;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
myRender.settings.allBegining="<table class='table-hover'>";
|
|
||||||
converter.datasRender=myRender;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ajout d'une fonction de classement spécifique
|
|
||||||
converter.datasSortingFunctions=[{ datasFieldNb:4, sort:mySort }];
|
|
||||||
|
|
||||||
// Configuration de la pagination
|
|
||||||
const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :");
|
|
||||||
pagination.options={ displayElement: { id:"paginationOptions" }, values: [10,20,50,500] , name: "Choix de pagination :" };
|
|
||||||
pagination.selectedValue=10;
|
|
||||||
converter.pagination=pagination;
|
|
||||||
pagination.options2HTML();
|
|
||||||
|
|
||||||
// Affichage initial
|
|
||||||
converter.datasCounterElt={ id:"compteur" };
|
|
||||||
await converter.run();
|
|
||||||
|
|
||||||
// Création d'outils permettant de filtrer les données des champs de données
|
|
||||||
let filtre1=new Selector(converter, 3, { id:"filtre1"} );
|
|
||||||
filtre1.filter2HTML();
|
|
||||||
let filtre2=new Selector(converter, 4, { id:"filtre2"} );
|
|
||||||
filtre2.filter2HTML();
|
|
||||||
let filtre3=new Selector(converter, 5, { id:"filtre3"}, ",");
|
|
||||||
filtre3.filter2HTML();
|
|
||||||
// + un moteur de recherche
|
|
||||||
const mySearch=new SearchEngine(converter, { id:"search" }, [1,3,5]);
|
|
||||||
mySearch.label="Qui cherche trouve ?";
|
|
||||||
mySearch.btnTxt="Va chercher !";
|
|
||||||
mySearch.automaticSearch=true;
|
|
||||||
mySearch.nbCharsForSearch=2;
|
|
||||||
mySearch.placeholder="Tapes en NB, chef !";
|
|
||||||
mySearch.filter2HTML();
|
|
||||||
// + Injection des filtres dans le convertisseur
|
|
||||||
converter.datasFilters=[filtre1,filtre2,filtre3, mySearch];
|
|
||||||
|
|
||||||
// Ajout de champs permettant de classer les données
|
|
||||||
// Uniquement avec un rendu tableau (grand écran), car entêtes de colonne nécessaires
|
|
||||||
if(window.innerWidth >= 800)
|
|
||||||
{
|
|
||||||
let sortingField1=new SortingField(converter, 0);
|
|
||||||
sortingField1.field2HTML();
|
|
||||||
let sortingField2=new SortingField(converter, 1);
|
|
||||||
sortingField2.field2HTML();
|
|
||||||
let sortingField3=new SortingField(converter, 2);
|
|
||||||
sortingField3.field2HTML();
|
|
||||||
let sortingField4=new SortingField(converter, 4);
|
|
||||||
sortingField4.field2HTML();
|
|
||||||
converter.datasSortingFields=[sortingField1,sortingField2,sortingField3,sortingField4];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
catch(e)
|
|
||||||
{
|
|
||||||
console.error(e);
|
|
||||||
if(document.getElementById("datas")!==null)
|
|
||||||
document.getElementById("datas")!.innerHTML="<strong>Désolé, mais un problème technique empêche l'affichage des données.</strong>";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
initialise();
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
import { FreeDatas2HTML, Pagination, Render, Selector, SortingField } from "./FreeDatas2HTML";
|
|
||||||
|
|
||||||
const initialise = async () =>
|
|
||||||
{
|
|
||||||
try
|
|
||||||
{
|
|
||||||
// Création d'un convertisseur parsant des données transmises en HTML
|
|
||||||
let converter=new FreeDatas2HTML("HTML");
|
|
||||||
converter.datasViewElt={ id:"datas" };
|
|
||||||
await converter.run();
|
|
||||||
// Adaptation du rendu suivant la taille de l'écran
|
|
||||||
const myRender=new Render();
|
|
||||||
if(window.innerWidth < 800)
|
|
||||||
{
|
|
||||||
myRender.settings=
|
|
||||||
{
|
|
||||||
allBegining:"<h4>Affichage petits écrans !</h4>",
|
|
||||||
allEnding:"",
|
|
||||||
linesBegining:"<ul>",
|
|
||||||
linesEnding:"</ul>",
|
|
||||||
lineBegining:"<li><ul>",
|
|
||||||
lineEnding:"</ul></li>",
|
|
||||||
dataDisplaying:"<li><b>#FIELDNAME :</b> #VALUE</li>",
|
|
||||||
};
|
|
||||||
converter.datasRender=myRender;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
myRender.settings.allBegining="<table class='table-hover'>";
|
|
||||||
converter.datasRender=myRender;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Configuration de la pagination
|
|
||||||
const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :");
|
|
||||||
pagination.options={ displayElement: { id:"paginationOptions" }, values: [15,30,50] , name: "Nombre de lignes par page :" };
|
|
||||||
pagination.selectedValue=30;
|
|
||||||
converter.pagination=pagination;
|
|
||||||
pagination.options2HTML();
|
|
||||||
|
|
||||||
// Affichage initial
|
|
||||||
converter.datasCounterElt={ id:"compteur" };
|
|
||||||
await converter.run();
|
|
||||||
|
|
||||||
// Création d'un filtre par auteur :
|
|
||||||
let filtre1=new Selector(converter, 3, { id:"filtre1"} );
|
|
||||||
filtre1.filter2HTML();
|
|
||||||
converter.datasFilters=[filtre1];
|
|
||||||
|
|
||||||
// Ajout de champs permettant de classer les données
|
|
||||||
// Uniquement avec un rendu tableau (grand écran), car entêtes de colonne nécessaires
|
|
||||||
if(window.innerWidth >= 800)
|
|
||||||
{
|
|
||||||
let sortingField1=new SortingField(converter, 2);
|
|
||||||
sortingField1.field2HTML();
|
|
||||||
let sortingField2=new SortingField(converter, 3);
|
|
||||||
sortingField2.field2HTML();
|
|
||||||
converter.datasSortingFields=[sortingField1,sortingField2];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
catch(e)
|
|
||||||
{
|
|
||||||
console.error(e);
|
|
||||||
if(document.getElementById("datas")!==null)
|
|
||||||
document.getElementById("datas")!.innerHTML="<strong>Désolé, mais un problème technique empêche l'affichage des données.</strong>";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
initialise();
|
|
||||||
@ -1,70 +0,0 @@
|
|||||||
import { FreeDatas2HTML, Pagination, Render, Selector, SortingField } from "./FreeDatas2HTML";
|
|
||||||
|
|
||||||
const initialise = async () =>
|
|
||||||
{
|
|
||||||
try
|
|
||||||
{
|
|
||||||
// Création d'un convertisseur parsant des données transmises en JSON
|
|
||||||
let converter=new FreeDatas2HTML("JSON");
|
|
||||||
converter.parser.setRemoteSource({ url: "http://localhost:8080/datas/posts.json", withCredentials:true, headers: [{ key:"Authorization", value:"Token YWxhZGRpbjpvcGVuc2VzYW1l" }] });
|
|
||||||
converter.datasViewElt={ id:"datas" };
|
|
||||||
await converter.run();
|
|
||||||
// Adaptation du rendu suivant la taille de l'écran
|
|
||||||
const myRender=new Render();
|
|
||||||
if(window.innerWidth < 800)
|
|
||||||
{
|
|
||||||
myRender.settings=
|
|
||||||
{
|
|
||||||
allBegining:"<h4>Affichage petits écrans !</h4>",
|
|
||||||
allEnding:"",
|
|
||||||
linesBegining:"<ul>",
|
|
||||||
linesEnding:"</ul>",
|
|
||||||
lineBegining:"<li><ul>",
|
|
||||||
lineEnding:"</ul></li>",
|
|
||||||
dataDisplaying:"<li><b>#FIELDNAME :</b> #VALUE</li>",
|
|
||||||
};
|
|
||||||
converter.datasRender=myRender;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
myRender.settings.allBegining="<table class='table-hover'>";
|
|
||||||
converter.datasRender=myRender;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Configuration de la pagination
|
|
||||||
const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :");
|
|
||||||
pagination.options={ displayElement: { id:"paginationOptions" }, values: [15,30,50,100] , name: "Nombre de lignes par page :" };
|
|
||||||
pagination.selectedValue=15;
|
|
||||||
converter.pagination=pagination;
|
|
||||||
pagination.options2HTML();
|
|
||||||
|
|
||||||
// Affichage initial
|
|
||||||
converter.datasCounterElt={ id:"compteur" };
|
|
||||||
await converter.run();
|
|
||||||
|
|
||||||
// Création d'un filtre par auteur :
|
|
||||||
let filtre1=new Selector(converter, 0, { id:"filtre1"} );
|
|
||||||
filtre1.filter2HTML();
|
|
||||||
converter.datasFilters=[filtre1];
|
|
||||||
|
|
||||||
// Ajout de champs permettant de classer les données
|
|
||||||
// Uniquement avec un rendu tableau (grand écran), car entêtes de colonne nécessaires
|
|
||||||
if(window.innerWidth >= 800)
|
|
||||||
{
|
|
||||||
let sortingField1=new SortingField(converter, 0);
|
|
||||||
sortingField1.field2HTML();
|
|
||||||
let sortingField2=new SortingField(converter, 1);
|
|
||||||
sortingField2.field2HTML();
|
|
||||||
let sortingField3=new SortingField(converter, 2);
|
|
||||||
sortingField3.field2HTML();
|
|
||||||
converter.datasSortingFields=[sortingField1,sortingField2,sortingField3];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
catch(e)
|
|
||||||
{
|
|
||||||
console.error(e);
|
|
||||||
if(document.getElementById("datas")!==null)
|
|
||||||
document.getElementById("datas")!.innerHTML="<strong>Désolé, mais un problème technique empêche l'affichage des données.</strong>";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
initialise();
|
|
||||||
@ -1,112 +0,0 @@
|
|||||||
import { FreeDatas2HTML, Pagination, Render, SearchEngine, Selector, SortingField } from "./FreeDatas2HTML";
|
|
||||||
|
|
||||||
const initialise = async () =>
|
|
||||||
{
|
|
||||||
try
|
|
||||||
{
|
|
||||||
const myForm=document.getElementById("userSettings") as HTMLElement;
|
|
||||||
const myFile=document.getElementById("myFile") as HTMLInputElement;
|
|
||||||
const dataDisplayElt=document.getElementById("datas");
|
|
||||||
const dataDisplayOptionsElt=document.getElementById("displayOptions");
|
|
||||||
|
|
||||||
if(myFile === null || myForm === null || dataDisplayOptionsElt === null || dataDisplayElt === null)
|
|
||||||
throw new Error("Certains éléments nécessaires au fonctionnement n'ont pas été trouvés dans le DOM;");
|
|
||||||
|
|
||||||
const converter=new FreeDatas2HTML("CSV");
|
|
||||||
const myRender=new Render();
|
|
||||||
myRender.settings.allBegining="<table class='table-hover'><caption>Nombre de résultats : <span id='counter'></span></caption>";
|
|
||||||
converter.datasRender=myRender;
|
|
||||||
|
|
||||||
myFile.addEventListener("change", function(e)
|
|
||||||
{
|
|
||||||
dataDisplayElt.innerHTML="";
|
|
||||||
dataDisplayOptionsElt.innerHTML="";
|
|
||||||
const selectedFiles=myFile.files;
|
|
||||||
if(selectedFiles !== null && selectedFiles.length === 1)
|
|
||||||
{
|
|
||||||
if(selectedFiles[0].type !== "text/csv" && selectedFiles[0].type !== "text/tsv")
|
|
||||||
dataDisplayOptionsElt.innerHTML=`<p class='text-danger'>Le document que vous avez sélectionné ne semble pas être un fichier CSV valide.</p>`;
|
|
||||||
else
|
|
||||||
{
|
|
||||||
const reader=new FileReader();
|
|
||||||
reader.onload=async function(e)
|
|
||||||
{
|
|
||||||
converter.parser.datas2Parse=reader.result as string;
|
|
||||||
await converter.run();
|
|
||||||
let fieldsSelectorHTML=`<fieldset class="form-group"><legend>Quels champs souhaitez-vous afficher ?</legend>`;
|
|
||||||
for(let i=0; i < converter.fields.length; i++)
|
|
||||||
fieldsSelectorHTML+=`<label for="selectedField_${i}" class="paper-check"> <input type="checkbox" class="selectedFields" id="selectedField_${i}" name="selectedField_${i}" value=${i} checked> <span>${converter.fields[i]}</span></label>`;
|
|
||||||
fieldsSelectorHTML+=`</fieldset>`;
|
|
||||||
dataDisplayOptionsElt.innerHTML=fieldsSelectorHTML+`<button type="submit" class="btn-success">Valider</button>`;
|
|
||||||
};
|
|
||||||
reader.readAsText(selectedFiles[0]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
myForm.addEventListener("submit", function(e)
|
|
||||||
{
|
|
||||||
e.preventDefault();
|
|
||||||
dataDisplayElt.innerHTML="";
|
|
||||||
const fields2Rend: number[]=[];
|
|
||||||
let checkBox: HTMLInputElement, nbSelector=0;
|
|
||||||
for(let i=0; i < converter.fields.length; i++)
|
|
||||||
{
|
|
||||||
checkBox=document.getElementById("selectedField_"+i) as HTMLInputElement;
|
|
||||||
if(checkBox !== null)
|
|
||||||
{
|
|
||||||
if(checkBox.checked)
|
|
||||||
fields2Rend.push(i);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if( fields2Rend.length === 0)
|
|
||||||
dataDisplayElt.innerHTML=`<p class='text-danger'>Vous n'avez sélectionné aucun champ à afficher !</p>`;
|
|
||||||
else
|
|
||||||
{
|
|
||||||
converter.fields2Rend=fields2Rend;
|
|
||||||
converter.datasViewElt={ id:"datas" };
|
|
||||||
|
|
||||||
// + Un moteur de recherche :
|
|
||||||
const mySearch=new SearchEngine(converter, { id:"search" });
|
|
||||||
mySearch.label="Qui cherche trouve ?";
|
|
||||||
mySearch.btnTxt="Va chercher !";
|
|
||||||
mySearch.automaticSearch=true;
|
|
||||||
mySearch.nbCharsForSearch=2;
|
|
||||||
mySearch.placeholder="Saisir un moins 2 caractères";
|
|
||||||
mySearch.filter2HTML();
|
|
||||||
converter.datasFilters=[mySearch];
|
|
||||||
|
|
||||||
// + Pagination :
|
|
||||||
const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :");
|
|
||||||
pagination.options={ displayElement: { id:"paginationOptions" }, values: [10,20,50,500] , name: "Choix de pagination :" };
|
|
||||||
pagination.selectedValue=10;
|
|
||||||
converter.pagination=pagination;
|
|
||||||
pagination.options2HTML();
|
|
||||||
|
|
||||||
// Actualisation de l'affichage
|
|
||||||
converter.refreshView();
|
|
||||||
|
|
||||||
// + Compteur :
|
|
||||||
converter.datasCounterElt={ id:"counter" };
|
|
||||||
converter.datasCounter2HTML();
|
|
||||||
|
|
||||||
// +Toutes les colonnes classables :
|
|
||||||
let sortingField: SortingField;
|
|
||||||
for(let i=0; i < converter.fields2Rend.length; i++)
|
|
||||||
{
|
|
||||||
sortingField=new SortingField(converter, i);
|
|
||||||
sortingField.field2HTML();
|
|
||||||
converter.datasSortingFields.push(sortingField);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
catch(e)
|
|
||||||
{
|
|
||||||
console.error(e);
|
|
||||||
if(document.getElementById("datas")!==null)
|
|
||||||
document.getElementById("datas")!.innerHTML=`<strong>Désolé, mais un problème imprévu empêche l'affichage des données.</strong>`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
initialise();
|
|
||||||
Loading…
Reference in New Issue
Block a user