Discussion :

[feelwatt]

Bonjour, (surement une question simple mais..)
J'ai deux arrays
- users avec id_user et id_region
- regions avec id_region et nom_region

Pour charts.js, je souhaite construire un array présentant le nombre d'user / region
Ma première idée est de faire 2 boucles imbriquée:
La 1ère listant les regions

La 2ème listant les users

Si id_user['id_region']==region['id_region']

> on incrémente le nombre

En js ca ferait ça:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
array_region = new Array();
for (var i_region = 0; i_region < regions.length; i_region++) { // list regions
nb_user_region = 0;
  for (var i_user = 0; i_user < users.length; i_user++) { // list users
 
    if (users[i_user]['id_region'] == regions[i_region]['id_region']) // test
      {
        nb_user_by_region++; // Incrémente
      }
 
  }
array_region[i_region]=nb_user_by_region; // Renseigner array
}

Il y a beaucoup de users (800) et peu de régions (16).

D'où les questions,
- peut-on trouver directement dans l'array users les id_regions (sans tout lister) ?
Sinon, (obligé de ister)
- Vaut-il mieux lister les regions puis les users ou l'inverse ?


Merci pour les idées

[Invité]

Bonjour,

Une autre approche, en ne parcourant chaque array qu'une fois :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
"use strict";
let array_region = new Array();
 
for (var i_region = 0, regions_nbre = regions.length; i_region < regions_nbre; i_region++) // list regions
{
	array_region[i_region] = 0; // permet d'initialiser la variable (pour cette région)
}
for (var i_user = 0, users_nbre = users.length;; i_user < users_nbre; i_user++) // list users
{
	array_region[users[i_user]['id_region']] += 1; // on incrémente
}

N.B. La 1ère boucle est nécessaire, pour les régions qui n'ont pas de user.

Remarque :
en écrivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

for (var i_region = 0; i_region < regions.length; i_region++) { // list regions

regions.length est RE-calculé à chaque tour de boucle.
avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

for (var i_region = 0, regions_nbre = regions.length; i_region < regions_nbre; i_region++) // list regions

regions.length n'est calculé qu'UNE fois.

[feelwatt]

Oui, le calculdes longueurs était redondant
Pour

Une autre approche, en ne parcourant chaque array qu'une fois :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
"use strict";
let array_region = new Array();
 
for (var i_region = 0, regions_nbre = regions.length; i_region < regions_nbre; i_region++) // list regions
{
	array_region[i_region] = 0; // permet d'initialiser la variable (pour cette région)
}
for (var i_user = 0, users_nbre = users.length;; i_user < users_nbre; i_user++) // list users
{
	array_region[users[i_user]['id_region']] += 1; // on incrémente
}

Ca y est, compris > Deuxième boucle: On incrémente la valeur de l'index.

Par contre je vois que dans la Bd des régions ont été supprimées
alors que des users avaient les id_region de ces régions supprimées.
> donc, je pensais faire l'array_region avec comme index les id_region.

[danielhagnoul]

[...]Merci pour les idées

On peut gérer le problème d'une autre manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
const nom_region = [
    'Auvergne-Rhône-Alpes',
    'Bourgogne-Franche-Comté',
    'Bretagne',
    'Centre-Val de Loire',
    'Corse',
    'Grand Est',
    'Hauts-de-France',
    'Île-de-France',
    'Normandie',
    'Nouvelle-Aquitaine',
    'Occitanie',
    'Pays de la Loire',
    "Provence-Alpes-Côte d'Azur",
    'Guadeloupe',
    'Guyane',
    'Martinique',
    'La Réunion',
    'Mayotte',
];
 
const region_length = nom_region.length;
 
let array_region = Array.from(new Array(region_length), (item, i) => [nom_region[i], 0]);
let array_user = []
 
function add_user(ar_user) {
    array_user.push(ar_user);
 
    for (const item of array_region) {
        if (item[0] === ar_user[1]) {
            item[1] += 1
        }
    }
}
 
add_user(['Pierre', 'Martinique'])
add_user(['Daniel', 'Nouvelle-Aquitaine'])
add_user(['Jean', 'La Réunion'])
add_user(['François', 'Île-de-France'])
add_user(['Luc', "Provence-Alpes-Côte d'Azur"])
 
console.table(array_region);
console.table(array_user);

[feelwatt]

Joli, beau concept.

Dans le cas où il y a bcq de users (il y en a 800)
est-ce que ca risque pas de faire bcq d'appels à la function add_user(ar_user){} ?

Au vu du volume,
je serais bien sur l'idée d'incrémenter la valeur de l'index.
et à la boucle users de tester si l'index existe, si oui > on incrémente.

***
Hum, le but est de donner ces array à digérer à chart.js,

Si les index ne se suivent pas,
ca va lui être compliqué à gérer, non ?

[NoSmoking]

Bonjour,

j'aurais une approche encore différente attendu que Chart.js attend des Array indexés pour les données sur ses axes X et Y.

Partant sur la base de données ressemblant à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
const dataRegions = [{
  "id_region": "reg-1",
  "nom_region": "Auvergne-Rhône-Alpes"
}, {
  "id_region": "reg-2",
  "nom_region": "Bourgogne-Franche-Comté"
}, {
  "id_region": "reg-3",
  "nom_region": "Bretagne"
}, 
// etc{

... pour les données régions, et à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
const dataUsers = [{
  "id_user": "id-1",
  "id_region": "reg-10"
}, {
  "id_user": "id-2",
  "id_region": "reg-6"
}, {
  "id_user": "id-3",
  "id_region": "reg-14"
}, 
// etc{

... pour les données users je ferais quelque chose comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
// comptage users par régions
const comptResult = {}
dataUsers.forEach((el) => {
  // si n'existe pas on crée et on met à zéro
  if (!comptResult[el.id_region]) comptResult[el.id_region] = 0;
  // incrémentation du compteur
  comptResult[el.id_region] += 1
});

... l'objet résultat, comptResult, ressemblera à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
{
  "reg-1": 41,
  "reg-10": 37,
  "reg-11": 38,
  "reg-12": 40,
  "reg-13": 38,
  // etc

... ensuite pour la récupération des données pour X et Y il suffira de faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
// récupération des datasAxeY et datasAxeX
const datasAxeY = [];
const datasAxeX = [];
dataRegions.forEach((el) => {
  datasAxeY.push(comptResult[el.id_region] || 0);
  datasAxeX.push(el.nom_region);
});

l'intégration dans la chart se faisant, par exemple, comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
// tracé du graphique
const oChart = new Chart(document.getElementById("id-canvas"), {
  "type": "bar",
  "data": {
    "labels": datasAxeX,
    "datasets": [{
      "data": datasAxeY
    }]
  },

[EDIT] précision du format de sortie de la première boucle

[feelwatt]

Ok, NoSmoking
je ne fonctionnait qu'avec for (var i=0...)
et .forEach((el) => {...} je ne connaissait pas.
Bonne solution.

J'aime bien l'humour > le fait que dans ton exemple il n'y avait pas de users correspondants aux regions. ,

Une question, comme je vais proposer de changer les données des graphs (chart.js) sur des boutons onclick,
vaut-il mieux:
- construire tous les arrays au chargement de la page ?
- les construire lors des onclick ?

Pour info, j'avais pensé locaStorage pour éviter de créer les array à chaque chargement de page
et stocké 800 users (avec chacun 7 items)
> ca a explosé le quota du localStorage.

[NoSmoking]

J'aime bien l'humour > le fait que dans ton exemple il n'y avait pas de users correspondants aux regions. ,

Je n'ai pas bien compris, le morceau de code mis se termine par // etc{ !

Une question, comme je vais proposer de changer les données des graphs (chart.js) sur des boutons onclick,
vaut-il mieux:
- construire tous les arrays au chargement de la page ?
- les construire lors des onclick ?

Qu’appelles tu construire, le fait qu'à partir des données de bases tu calcules les datas à donner à ChartJS, si c'est cela tu peux le faire au click.

Je viens de faire un test rapide en utilisant le code que je t'ai mis et pour « 10000 users » le traitement dure mois de 50ms sur FireFox, donc la moitié sous Chrome

[feelwatt]

pour « 10000 users » le traitement dure mois de 50ms sur FireFox, donc la moitié sous Chrome

Pas de soucis alors, ca envoi !

J'aime bien l'humour > le fait que dans ton exemple il n'y avait pas de users correspondants aux regions.

C'est juste que j'ai cherché pourquoi les compteurs étaient à zéro,
mais ca m'a permis de bien entrer dans les boucles et de les comprendre.

Et c'est ce que j'aime bien chez developpez.net !