You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

91 lines
2.5 KiB

Graphique des visites en d3.js. J'ai essayé de séparer une partie "graph" (plus générale) d'une partie "statistiques" plus particulière à ce graphique particulier, mais ce n'est pas évident. Le fichier prive/stats/visites charge les JS et CSS de d3 et pour notre graphique. Il crée alors de graphique des visites. Pour cela, la fonction `spip_d3_statistiques_create(id)` va - créer un objet Spip_d3_graph() notamment en indiquant la locale désirée. Cet objet est stocké dans la balise #id par un jQuery .data() pour pouvoir le réutiliser ensuite (pour ré-actualiser le graphique avec d'autres données) - déclarer comment seront préparées et traitées les données JSON reçues (ici on remplit les dates manquantes, et on actualise le tableau html et le graphique svg) - localiser les dates de d3 avec la locale demandé - préparer le code html et svg nécessaire (appelle la fonction spip_d3_statistiques_prepare_graph() qui va préparer les axes, histogramme, ligne, etc, mais sans connaître encore les données) - executer graph.updateJson(), qui va télécharger le json de données, et appliquer dessus les traitements déclarés, ce qui va in fine exécuter spip_d3_statistiques_update_graph() qui dessinera le graphique) Une navigation au dessus du graphique permet de basculer sur différentes dates et collections de données : 3 mois (90 jours), 2 ans (730 jours), 5 ans (60 mois) et infini (en années). Jusqu'à 2 ans, les données retournées par SPIP sont quotidiennes. En demandant 5 ans, on obtient 60 mois (avec la somme cumulée des visites sur le premier jour du mois) ; en demandant infini (durée -1), on obtient des visites annuelles : ce choix n'est pas anodin car il correspond très exactement à ce qui est proposé en archivage des statistiques : les statistiques de plus de 2 ans sont regroupées en début de mois, et de plus de 5 ans en début d'année. De la sorte, il devrait être possible de mettre une tache périodique qui archive systématiquement les statistiques, pour alléger la base de données, tout en gardant un affichage des graphiques a peu près corrects, même si on perd une partie de l'information.
2 years ago
[<link rel="stylesheet" type="text/css" href="(#CHEMIN{css/spip_d3_graph.css})" />]
[<link rel="stylesheet" type="text/css" href="(#CHEMIN{css/spip_d3_statistiques.css})" />]
[<script type="text/javascript" src="(#CHEMIN{lib/d3/d3.min.js})"></script>]
[<script type="text/javascript" src="(#CHEMIN{javascript/spip_d3_graph.js})"></script>]
[<script type="text/javascript" src="(#CHEMIN{javascript/spip_d3_statistiques.js})"></script>]
<script type="text/javascript">
Graphique des visites en d3.js. J'ai essayé de séparer une partie "graph" (plus générale) d'une partie "statistiques" plus particulière à ce graphique particulier, mais ce n'est pas évident. Le fichier prive/stats/visites charge les JS et CSS de d3 et pour notre graphique. Il crée alors de graphique des visites. Pour cela, la fonction `spip_d3_statistiques_create(id)` va - créer un objet Spip_d3_graph() notamment en indiquant la locale désirée. Cet objet est stocké dans la balise #id par un jQuery .data() pour pouvoir le réutiliser ensuite (pour ré-actualiser le graphique avec d'autres données) - déclarer comment seront préparées et traitées les données JSON reçues (ici on remplit les dates manquantes, et on actualise le tableau html et le graphique svg) - localiser les dates de d3 avec la locale demandé - préparer le code html et svg nécessaire (appelle la fonction spip_d3_statistiques_prepare_graph() qui va préparer les axes, histogramme, ligne, etc, mais sans connaître encore les données) - executer graph.updateJson(), qui va télécharger le json de données, et appliquer dessus les traitements déclarés, ce qui va in fine exécuter spip_d3_statistiques_update_graph() qui dessinera le graphique) Une navigation au dessus du graphique permet de basculer sur différentes dates et collections de données : 3 mois (90 jours), 2 ans (730 jours), 5 ans (60 mois) et infini (en années). Jusqu'à 2 ans, les données retournées par SPIP sont quotidiennes. En demandant 5 ans, on obtient 60 mois (avec la somme cumulée des visites sur le premier jour du mois) ; en demandant infini (durée -1), on obtient des visites annuelles : ce choix n'est pas anodin car il correspond très exactement à ce qui est proposé en archivage des statistiques : les statistiques de plus de 2 ans sont regroupées en début de mois, et de plus de 5 ans en début d'année. De la sorte, il devrait être possible de mettre une tache périodique qui archive systématiquement les statistiques, pour alléger la base de données, tout en gardant un affichage des graphiques a peu près corrects, même si on perd une partie de l'information.
2 years ago
function spip_d3_statistiques_create(id, options = {}) {
if (jQuery(id).data('graph')) {
return;
}
Graphique des visites en d3.js. J'ai essayé de séparer une partie "graph" (plus générale) d'une partie "statistiques" plus particulière à ce graphique particulier, mais ce n'est pas évident. Le fichier prive/stats/visites charge les JS et CSS de d3 et pour notre graphique. Il crée alors de graphique des visites. Pour cela, la fonction `spip_d3_statistiques_create(id)` va - créer un objet Spip_d3_graph() notamment en indiquant la locale désirée. Cet objet est stocké dans la balise #id par un jQuery .data() pour pouvoir le réutiliser ensuite (pour ré-actualiser le graphique avec d'autres données) - déclarer comment seront préparées et traitées les données JSON reçues (ici on remplit les dates manquantes, et on actualise le tableau html et le graphique svg) - localiser les dates de d3 avec la locale demandé - préparer le code html et svg nécessaire (appelle la fonction spip_d3_statistiques_prepare_graph() qui va préparer les axes, histogramme, ligne, etc, mais sans connaître encore les données) - executer graph.updateJson(), qui va télécharger le json de données, et appliquer dessus les traitements déclarés, ce qui va in fine exécuter spip_d3_statistiques_update_graph() qui dessinera le graphique) Une navigation au dessus du graphique permet de basculer sur différentes dates et collections de données : 3 mois (90 jours), 2 ans (730 jours), 5 ans (60 mois) et infini (en années). Jusqu'à 2 ans, les données retournées par SPIP sont quotidiennes. En demandant 5 ans, on obtient 60 mois (avec la somme cumulée des visites sur le premier jour du mois) ; en demandant infini (durée -1), on obtient des visites annuelles : ce choix n'est pas anodin car il correspond très exactement à ce qui est proposé en archivage des statistiques : les statistiques de plus de 2 ans sont regroupées en début de mois, et de plus de 5 ans en début d'année. De la sorte, il devrait être possible de mettre une tache périodique qui archive systématiquement les statistiques, pour alléger la base de données, tout en gardant un affichage des graphiques a peu près corrects, même si on perd une partie de l'information.
2 years ago
const $nav = jQuery(id).parent().find('.statistiques-nav');
if ($nav.find('.groupe-boutons--stats-graph .bouton.principal').length) {
jQuery(id)[0].dataset.json = $nav.find('.groupe-boutons--stats-graph .bouton.principal').data('json');
}
const table_visible = !!$nav.find('.btn--stats-to-table.principal').length;
Graphique des visites en d3.js. J'ai essayé de séparer une partie "graph" (plus générale) d'une partie "statistiques" plus particulière à ce graphique particulier, mais ce n'est pas évident. Le fichier prive/stats/visites charge les JS et CSS de d3 et pour notre graphique. Il crée alors de graphique des visites. Pour cela, la fonction `spip_d3_statistiques_create(id)` va - créer un objet Spip_d3_graph() notamment en indiquant la locale désirée. Cet objet est stocké dans la balise #id par un jQuery .data() pour pouvoir le réutiliser ensuite (pour ré-actualiser le graphique avec d'autres données) - déclarer comment seront préparées et traitées les données JSON reçues (ici on remplit les dates manquantes, et on actualise le tableau html et le graphique svg) - localiser les dates de d3 avec la locale demandé - préparer le code html et svg nécessaire (appelle la fonction spip_d3_statistiques_prepare_graph() qui va préparer les axes, histogramme, ligne, etc, mais sans connaître encore les données) - executer graph.updateJson(), qui va télécharger le json de données, et appliquer dessus les traitements déclarés, ce qui va in fine exécuter spip_d3_statistiques_update_graph() qui dessinera le graphique) Une navigation au dessus du graphique permet de basculer sur différentes dates et collections de données : 3 mois (90 jours), 2 ans (730 jours), 5 ans (60 mois) et infini (en années). Jusqu'à 2 ans, les données retournées par SPIP sont quotidiennes. En demandant 5 ans, on obtient 60 mois (avec la somme cumulée des visites sur le premier jour du mois) ; en demandant infini (durée -1), on obtient des visites annuelles : ce choix n'est pas anodin car il correspond très exactement à ce qui est proposé en archivage des statistiques : les statistiques de plus de 2 ans sont regroupées en début de mois, et de plus de 5 ans en début d'année. De la sorte, il devrait être possible de mettre une tache périodique qui archive systématiquement les statistiques, pour alléger la base de données, tout en gardant un affichage des graphiques a peu près corrects, même si on perd une partie de l'information.
2 years ago
const graph = new Spip_d3_graph(id, {
language: '#ENV{lang}',
d3_directory: '[(#CHEMIN{lib/d3/d3.min.js}|dirname)]',
});
Graphique des visites en d3.js. J'ai essayé de séparer une partie "graph" (plus générale) d'une partie "statistiques" plus particulière à ce graphique particulier, mais ce n'est pas évident. Le fichier prive/stats/visites charge les JS et CSS de d3 et pour notre graphique. Il crée alors de graphique des visites. Pour cela, la fonction `spip_d3_statistiques_create(id)` va - créer un objet Spip_d3_graph() notamment en indiquant la locale désirée. Cet objet est stocké dans la balise #id par un jQuery .data() pour pouvoir le réutiliser ensuite (pour ré-actualiser le graphique avec d'autres données) - déclarer comment seront préparées et traitées les données JSON reçues (ici on remplit les dates manquantes, et on actualise le tableau html et le graphique svg) - localiser les dates de d3 avec la locale demandé - préparer le code html et svg nécessaire (appelle la fonction spip_d3_statistiques_prepare_graph() qui va préparer les axes, histogramme, ligne, etc, mais sans connaître encore les données) - executer graph.updateJson(), qui va télécharger le json de données, et appliquer dessus les traitements déclarés, ce qui va in fine exécuter spip_d3_statistiques_update_graph() qui dessinera le graphique) Une navigation au dessus du graphique permet de basculer sur différentes dates et collections de données : 3 mois (90 jours), 2 ans (730 jours), 5 ans (60 mois) et infini (en années). Jusqu'à 2 ans, les données retournées par SPIP sont quotidiennes. En demandant 5 ans, on obtient 60 mois (avec la somme cumulée des visites sur le premier jour du mois) ; en demandant infini (durée -1), on obtient des visites annuelles : ce choix n'est pas anodin car il correspond très exactement à ce qui est proposé en archivage des statistiques : les statistiques de plus de 2 ans sont regroupées en début de mois, et de plus de 5 ans en début d'année. De la sorte, il devrait être possible de mettre une tache périodique qui archive systématiquement les statistiques, pour alléger la base de données, tout en gardant un affichage des graphiques a peu près corrects, même si on perd une partie de l'information.
2 years ago
jQuery(id).data('graph', graph);
graph.set_dataLoader(data => {
// ici on peuple les dates manquantes du json
return new Promise((resolve, reject) => {
function fillInDates(meta, data){
// put current data hash for efficient retrieval
// determine min/max of data
const currentDates = {};
const minDate = meta.start_date;
let currentDate = minDate;
const maxDate = meta.end_date;
Graphique des visites en d3.js. J'ai essayé de séparer une partie "graph" (plus générale) d'une partie "statistiques" plus particulière à ce graphique particulier, mais ce n'est pas évident. Le fichier prive/stats/visites charge les JS et CSS de d3 et pour notre graphique. Il crée alors de graphique des visites. Pour cela, la fonction `spip_d3_statistiques_create(id)` va - créer un objet Spip_d3_graph() notamment en indiquant la locale désirée. Cet objet est stocké dans la balise #id par un jQuery .data() pour pouvoir le réutiliser ensuite (pour ré-actualiser le graphique avec d'autres données) - déclarer comment seront préparées et traitées les données JSON reçues (ici on remplit les dates manquantes, et on actualise le tableau html et le graphique svg) - localiser les dates de d3 avec la locale demandé - préparer le code html et svg nécessaire (appelle la fonction spip_d3_statistiques_prepare_graph() qui va préparer les axes, histogramme, ligne, etc, mais sans connaître encore les données) - executer graph.updateJson(), qui va télécharger le json de données, et appliquer dessus les traitements déclarés, ce qui va in fine exécuter spip_d3_statistiques_update_graph() qui dessinera le graphique) Une navigation au dessus du graphique permet de basculer sur différentes dates et collections de données : 3 mois (90 jours), 2 ans (730 jours), 5 ans (60 mois) et infini (en années). Jusqu'à 2 ans, les données retournées par SPIP sont quotidiennes. En demandant 5 ans, on obtient 60 mois (avec la somme cumulée des visites sur le premier jour du mois) ; en demandant infini (durée -1), on obtient des visites annuelles : ce choix n'est pas anodin car il correspond très exactement à ce qui est proposé en archivage des statistiques : les statistiques de plus de 2 ans sont regroupées en début de mois, et de plus de 5 ans en début d'année. De la sorte, il devrait être possible de mettre une tache périodique qui archive systématiquement les statistiques, pour alléger la base de données, tout en gardant un affichage des graphiques a peu près corrects, même si on perd une partie de l'information.
2 years ago
data.forEach(d => {
currentDates[d.date] = d;
});
// loop data and fill in missing dates
const filledInDates = [];
while (currentDate < maxDate) {
if (currentDates[currentDate]) {
filledInDates.push(currentDates[currentDate]);
} else {
filledInDates.push({"date": currentDate, "visites": 0});
}
Graphique des visites en d3.js. J'ai essayé de séparer une partie "graph" (plus générale) d'une partie "statistiques" plus particulière à ce graphique particulier, mais ce n'est pas évident. Le fichier prive/stats/visites charge les JS et CSS de d3 et pour notre graphique. Il crée alors de graphique des visites. Pour cela, la fonction `spip_d3_statistiques_create(id)` va - créer un objet Spip_d3_graph() notamment en indiquant la locale désirée. Cet objet est stocké dans la balise #id par un jQuery .data() pour pouvoir le réutiliser ensuite (pour ré-actualiser le graphique avec d'autres données) - déclarer comment seront préparées et traitées les données JSON reçues (ici on remplit les dates manquantes, et on actualise le tableau html et le graphique svg) - localiser les dates de d3 avec la locale demandé - préparer le code html et svg nécessaire (appelle la fonction spip_d3_statistiques_prepare_graph() qui va préparer les axes, histogramme, ligne, etc, mais sans connaître encore les données) - executer graph.updateJson(), qui va télécharger le json de données, et appliquer dessus les traitements déclarés, ce qui va in fine exécuter spip_d3_statistiques_update_graph() qui dessinera le graphique) Une navigation au dessus du graphique permet de basculer sur différentes dates et collections de données : 3 mois (90 jours), 2 ans (730 jours), 5 ans (60 mois) et infini (en années). Jusqu'à 2 ans, les données retournées par SPIP sont quotidiennes. En demandant 5 ans, on obtient 60 mois (avec la somme cumulée des visites sur le premier jour du mois) ; en demandant infini (durée -1), on obtient des visites annuelles : ce choix n'est pas anodin car il correspond très exactement à ce qui est proposé en archivage des statistiques : les statistiques de plus de 2 ans sont regroupées en début de mois, et de plus de 5 ans en début d'année. De la sorte, il devrait être possible de mettre une tache périodique qui archive systématiquement les statistiques, pour alléger la base de données, tout en gardant un affichage des graphiques a peu près corrects, même si on perd une partie de l'information.
2 years ago
currentDate = graph.nextDate(currentDate, meta.unite, 1);
}
Graphique des visites en d3.js. J'ai essayé de séparer une partie "graph" (plus générale) d'une partie "statistiques" plus particulière à ce graphique particulier, mais ce n'est pas évident. Le fichier prive/stats/visites charge les JS et CSS de d3 et pour notre graphique. Il crée alors de graphique des visites. Pour cela, la fonction `spip_d3_statistiques_create(id)` va - créer un objet Spip_d3_graph() notamment en indiquant la locale désirée. Cet objet est stocké dans la balise #id par un jQuery .data() pour pouvoir le réutiliser ensuite (pour ré-actualiser le graphique avec d'autres données) - déclarer comment seront préparées et traitées les données JSON reçues (ici on remplit les dates manquantes, et on actualise le tableau html et le graphique svg) - localiser les dates de d3 avec la locale demandé - préparer le code html et svg nécessaire (appelle la fonction spip_d3_statistiques_prepare_graph() qui va préparer les axes, histogramme, ligne, etc, mais sans connaître encore les données) - executer graph.updateJson(), qui va télécharger le json de données, et appliquer dessus les traitements déclarés, ce qui va in fine exécuter spip_d3_statistiques_update_graph() qui dessinera le graphique) Une navigation au dessus du graphique permet de basculer sur différentes dates et collections de données : 3 mois (90 jours), 2 ans (730 jours), 5 ans (60 mois) et infini (en années). Jusqu'à 2 ans, les données retournées par SPIP sont quotidiennes. En demandant 5 ans, on obtient 60 mois (avec la somme cumulée des visites sur le premier jour du mois) ; en demandant infini (durée -1), on obtient des visites annuelles : ce choix n'est pas anodin car il correspond très exactement à ce qui est proposé en archivage des statistiques : les statistiques de plus de 2 ans sont regroupées en début de mois, et de plus de 5 ans en début d'année. De la sorte, il devrait être possible de mettre une tache périodique qui archive systématiquement les statistiques, pour alléger la base de données, tout en gardant un affichage des graphiques a peu près corrects, même si on perd une partie de l'information.
2 years ago
return filledInDates;
}
Graphique des visites en d3.js. J'ai essayé de séparer une partie "graph" (plus générale) d'une partie "statistiques" plus particulière à ce graphique particulier, mais ce n'est pas évident. Le fichier prive/stats/visites charge les JS et CSS de d3 et pour notre graphique. Il crée alors de graphique des visites. Pour cela, la fonction `spip_d3_statistiques_create(id)` va - créer un objet Spip_d3_graph() notamment en indiquant la locale désirée. Cet objet est stocké dans la balise #id par un jQuery .data() pour pouvoir le réutiliser ensuite (pour ré-actualiser le graphique avec d'autres données) - déclarer comment seront préparées et traitées les données JSON reçues (ici on remplit les dates manquantes, et on actualise le tableau html et le graphique svg) - localiser les dates de d3 avec la locale demandé - préparer le code html et svg nécessaire (appelle la fonction spip_d3_statistiques_prepare_graph() qui va préparer les axes, histogramme, ligne, etc, mais sans connaître encore les données) - executer graph.updateJson(), qui va télécharger le json de données, et appliquer dessus les traitements déclarés, ce qui va in fine exécuter spip_d3_statistiques_update_graph() qui dessinera le graphique) Une navigation au dessus du graphique permet de basculer sur différentes dates et collections de données : 3 mois (90 jours), 2 ans (730 jours), 5 ans (60 mois) et infini (en années). Jusqu'à 2 ans, les données retournées par SPIP sont quotidiennes. En demandant 5 ans, on obtient 60 mois (avec la somme cumulée des visites sur le premier jour du mois) ; en demandant infini (durée -1), on obtient des visites annuelles : ce choix n'est pas anodin car il correspond très exactement à ce qui est proposé en archivage des statistiques : les statistiques de plus de 2 ans sont regroupées en début de mois, et de plus de 5 ans en début d'année. De la sorte, il devrait être possible de mettre une tache périodique qui archive systématiquement les statistiques, pour alléger la base de données, tout en gardant un affichage des graphiques a peu près corrects, même si on perd une partie de l'information.
2 years ago
data.data = fillInDates(data.meta, data.data);
Graphique des visites en d3.js. J'ai essayé de séparer une partie "graph" (plus générale) d'une partie "statistiques" plus particulière à ce graphique particulier, mais ce n'est pas évident. Le fichier prive/stats/visites charge les JS et CSS de d3 et pour notre graphique. Il crée alors de graphique des visites. Pour cela, la fonction `spip_d3_statistiques_create(id)` va - créer un objet Spip_d3_graph() notamment en indiquant la locale désirée. Cet objet est stocké dans la balise #id par un jQuery .data() pour pouvoir le réutiliser ensuite (pour ré-actualiser le graphique avec d'autres données) - déclarer comment seront préparées et traitées les données JSON reçues (ici on remplit les dates manquantes, et on actualise le tableau html et le graphique svg) - localiser les dates de d3 avec la locale demandé - préparer le code html et svg nécessaire (appelle la fonction spip_d3_statistiques_prepare_graph() qui va préparer les axes, histogramme, ligne, etc, mais sans connaître encore les données) - executer graph.updateJson(), qui va télécharger le json de données, et appliquer dessus les traitements déclarés, ce qui va in fine exécuter spip_d3_statistiques_update_graph() qui dessinera le graphique) Une navigation au dessus du graphique permet de basculer sur différentes dates et collections de données : 3 mois (90 jours), 2 ans (730 jours), 5 ans (60 mois) et infini (en années). Jusqu'à 2 ans, les données retournées par SPIP sont quotidiennes. En demandant 5 ans, on obtient 60 mois (avec la somme cumulée des visites sur le premier jour du mois) ; en demandant infini (durée -1), on obtient des visites annuelles : ce choix n'est pas anodin car il correspond très exactement à ce qui est proposé en archivage des statistiques : les statistiques de plus de 2 ans sont regroupées en début de mois, et de plus de 5 ans en début d'année. De la sorte, il devrait être possible de mettre une tache périodique qui archive systématiquement les statistiques, pour alléger la base de données, tout en gardant un affichage des graphiques a peu près corrects, même si on perd une partie de l'information.
2 years ago
resolve(data);
})
.then(data => {
graph.update_table(data);
spip_d3_statistiques_update_graph(id, data);
});
});
Graphique des visites en d3.js. J'ai essayé de séparer une partie "graph" (plus générale) d'une partie "statistiques" plus particulière à ce graphique particulier, mais ce n'est pas évident. Le fichier prive/stats/visites charge les JS et CSS de d3 et pour notre graphique. Il crée alors de graphique des visites. Pour cela, la fonction `spip_d3_statistiques_create(id)` va - créer un objet Spip_d3_graph() notamment en indiquant la locale désirée. Cet objet est stocké dans la balise #id par un jQuery .data() pour pouvoir le réutiliser ensuite (pour ré-actualiser le graphique avec d'autres données) - déclarer comment seront préparées et traitées les données JSON reçues (ici on remplit les dates manquantes, et on actualise le tableau html et le graphique svg) - localiser les dates de d3 avec la locale demandé - préparer le code html et svg nécessaire (appelle la fonction spip_d3_statistiques_prepare_graph() qui va préparer les axes, histogramme, ligne, etc, mais sans connaître encore les données) - executer graph.updateJson(), qui va télécharger le json de données, et appliquer dessus les traitements déclarés, ce qui va in fine exécuter spip_d3_statistiques_update_graph() qui dessinera le graphique) Une navigation au dessus du graphique permet de basculer sur différentes dates et collections de données : 3 mois (90 jours), 2 ans (730 jours), 5 ans (60 mois) et infini (en années). Jusqu'à 2 ans, les données retournées par SPIP sont quotidiennes. En demandant 5 ans, on obtient 60 mois (avec la somme cumulée des visites sur le premier jour du mois) ; en demandant infini (durée -1), on obtient des visites annuelles : ce choix n'est pas anodin car il correspond très exactement à ce qui est proposé en archivage des statistiques : les statistiques de plus de 2 ans sont regroupées en début de mois, et de plus de 5 ans en début d'année. De la sorte, il devrait être possible de mettre une tache périodique qui archive systématiquement les statistiques, pour alléger la base de données, tout en gardant un affichage des graphiques a peu près corrects, même si on perd une partie de l'information.
2 years ago
graph.loading_start();
Promise.resolve()
.then((d) => {
// charger la locale de date avant de créer les axes… sinon ils ne sont pas traduits
return graph.localize_d3_time(d);
})
.then(() => {
graph.prepare_table(table_visible);
spip_d3_statistiques_prepare_graph(id, !table_visible);
graph.updateJson();
});
}
Graphique des visites en d3.js. J'ai essayé de séparer une partie "graph" (plus générale) d'une partie "statistiques" plus particulière à ce graphique particulier, mais ce n'est pas évident. Le fichier prive/stats/visites charge les JS et CSS de d3 et pour notre graphique. Il crée alors de graphique des visites. Pour cela, la fonction `spip_d3_statistiques_create(id)` va - créer un objet Spip_d3_graph() notamment en indiquant la locale désirée. Cet objet est stocké dans la balise #id par un jQuery .data() pour pouvoir le réutiliser ensuite (pour ré-actualiser le graphique avec d'autres données) - déclarer comment seront préparées et traitées les données JSON reçues (ici on remplit les dates manquantes, et on actualise le tableau html et le graphique svg) - localiser les dates de d3 avec la locale demandé - préparer le code html et svg nécessaire (appelle la fonction spip_d3_statistiques_prepare_graph() qui va préparer les axes, histogramme, ligne, etc, mais sans connaître encore les données) - executer graph.updateJson(), qui va télécharger le json de données, et appliquer dessus les traitements déclarés, ce qui va in fine exécuter spip_d3_statistiques_update_graph() qui dessinera le graphique) Une navigation au dessus du graphique permet de basculer sur différentes dates et collections de données : 3 mois (90 jours), 2 ans (730 jours), 5 ans (60 mois) et infini (en années). Jusqu'à 2 ans, les données retournées par SPIP sont quotidiennes. En demandant 5 ans, on obtient 60 mois (avec la somme cumulée des visites sur le premier jour du mois) ; en demandant infini (durée -1), on obtient des visites annuelles : ce choix n'est pas anodin car il correspond très exactement à ce qui est proposé en archivage des statistiques : les statistiques de plus de 2 ans sont regroupées en début de mois, et de plus de 5 ans en début d'année. De la sorte, il devrait être possible de mettre une tache périodique qui archive systématiquement les statistiques, pour alléger la base de données, tout en gardant un affichage des graphiques a peu près corrects, même si on perd une partie de l'information.
2 years ago
function spip_dessiner_statistiques(){
spip_d3_statistiques_create("#statistiques_visites");
}
jQuery(function($) {
Graphique des visites en d3.js. J'ai essayé de séparer une partie "graph" (plus générale) d'une partie "statistiques" plus particulière à ce graphique particulier, mais ce n'est pas évident. Le fichier prive/stats/visites charge les JS et CSS de d3 et pour notre graphique. Il crée alors de graphique des visites. Pour cela, la fonction `spip_d3_statistiques_create(id)` va - créer un objet Spip_d3_graph() notamment en indiquant la locale désirée. Cet objet est stocké dans la balise #id par un jQuery .data() pour pouvoir le réutiliser ensuite (pour ré-actualiser le graphique avec d'autres données) - déclarer comment seront préparées et traitées les données JSON reçues (ici on remplit les dates manquantes, et on actualise le tableau html et le graphique svg) - localiser les dates de d3 avec la locale demandé - préparer le code html et svg nécessaire (appelle la fonction spip_d3_statistiques_prepare_graph() qui va préparer les axes, histogramme, ligne, etc, mais sans connaître encore les données) - executer graph.updateJson(), qui va télécharger le json de données, et appliquer dessus les traitements déclarés, ce qui va in fine exécuter spip_d3_statistiques_update_graph() qui dessinera le graphique) Une navigation au dessus du graphique permet de basculer sur différentes dates et collections de données : 3 mois (90 jours), 2 ans (730 jours), 5 ans (60 mois) et infini (en années). Jusqu'à 2 ans, les données retournées par SPIP sont quotidiennes. En demandant 5 ans, on obtient 60 mois (avec la somme cumulée des visites sur le premier jour du mois) ; en demandant infini (durée -1), on obtient des visites annuelles : ce choix n'est pas anodin car il correspond très exactement à ce qui est proposé en archivage des statistiques : les statistiques de plus de 2 ans sont regroupées en début de mois, et de plus de 5 ans en début d'année. De la sorte, il devrait être possible de mettre une tache périodique qui archive systématiquement les statistiques, pour alléger la base de données, tout en gardant un affichage des graphiques a peu près corrects, même si on perd une partie de l'information.
2 years ago
spip_dessiner_statistiques();
onAjaxLoad(spip_dessiner_statistiques);
});
Graphique des visites en d3.js. J'ai essayé de séparer une partie "graph" (plus générale) d'une partie "statistiques" plus particulière à ce graphique particulier, mais ce n'est pas évident. Le fichier prive/stats/visites charge les JS et CSS de d3 et pour notre graphique. Il crée alors de graphique des visites. Pour cela, la fonction `spip_d3_statistiques_create(id)` va - créer un objet Spip_d3_graph() notamment en indiquant la locale désirée. Cet objet est stocké dans la balise #id par un jQuery .data() pour pouvoir le réutiliser ensuite (pour ré-actualiser le graphique avec d'autres données) - déclarer comment seront préparées et traitées les données JSON reçues (ici on remplit les dates manquantes, et on actualise le tableau html et le graphique svg) - localiser les dates de d3 avec la locale demandé - préparer le code html et svg nécessaire (appelle la fonction spip_d3_statistiques_prepare_graph() qui va préparer les axes, histogramme, ligne, etc, mais sans connaître encore les données) - executer graph.updateJson(), qui va télécharger le json de données, et appliquer dessus les traitements déclarés, ce qui va in fine exécuter spip_d3_statistiques_update_graph() qui dessinera le graphique) Une navigation au dessus du graphique permet de basculer sur différentes dates et collections de données : 3 mois (90 jours), 2 ans (730 jours), 5 ans (60 mois) et infini (en années). Jusqu'à 2 ans, les données retournées par SPIP sont quotidiennes. En demandant 5 ans, on obtient 60 mois (avec la somme cumulée des visites sur le premier jour du mois) ; en demandant infini (durée -1), on obtient des visites annuelles : ce choix n'est pas anodin car il correspond très exactement à ce qui est proposé en archivage des statistiques : les statistiques de plus de 2 ans sont regroupées en début de mois, et de plus de 5 ans en début d'année. De la sorte, il devrait être possible de mettre une tache périodique qui archive systématiquement les statistiques, pour alléger la base de données, tout en gardant un affichage des graphiques a peu près corrects, même si on perd une partie de l'information.
2 years ago
</script>
Graphique des visites en d3.js. J'ai essayé de séparer une partie "graph" (plus générale) d'une partie "statistiques" plus particulière à ce graphique particulier, mais ce n'est pas évident. Le fichier prive/stats/visites charge les JS et CSS de d3 et pour notre graphique. Il crée alors de graphique des visites. Pour cela, la fonction `spip_d3_statistiques_create(id)` va - créer un objet Spip_d3_graph() notamment en indiquant la locale désirée. Cet objet est stocké dans la balise #id par un jQuery .data() pour pouvoir le réutiliser ensuite (pour ré-actualiser le graphique avec d'autres données) - déclarer comment seront préparées et traitées les données JSON reçues (ici on remplit les dates manquantes, et on actualise le tableau html et le graphique svg) - localiser les dates de d3 avec la locale demandé - préparer le code html et svg nécessaire (appelle la fonction spip_d3_statistiques_prepare_graph() qui va préparer les axes, histogramme, ligne, etc, mais sans connaître encore les données) - executer graph.updateJson(), qui va télécharger le json de données, et appliquer dessus les traitements déclarés, ce qui va in fine exécuter spip_d3_statistiques_update_graph() qui dessinera le graphique) Une navigation au dessus du graphique permet de basculer sur différentes dates et collections de données : 3 mois (90 jours), 2 ans (730 jours), 5 ans (60 mois) et infini (en années). Jusqu'à 2 ans, les données retournées par SPIP sont quotidiennes. En demandant 5 ans, on obtient 60 mois (avec la somme cumulée des visites sur le premier jour du mois) ; en demandant infini (durée -1), on obtient des visites annuelles : ce choix n'est pas anodin car il correspond très exactement à ce qui est proposé en archivage des statistiques : les statistiques de plus de 2 ans sont regroupées en début de mois, et de plus de 5 ans en début d'année. De la sorte, il devrait être possible de mettre une tache périodique qui archive systématiquement les statistiques, pour alléger la base de données, tout en gardant un affichage des graphiques a peu près corrects, même si on perd une partie de l'information.
2 years ago