search

lzear / LeekWars_Kikimeter

5 stars 3 forks source link

Graph de visualisation des données dans le temps #7

Closed yLark closed 10 years ago

yLark commented 10 years ago

Permettra, notamment en regardant la courbe de vie/dégâts, de voir rapidement si un combat était serré ou largement gagné, etc.

Foudge commented 10 years ago

En découvrant le script kikimeter sur le forum, je me suis moi même pris au jeu et j'ai commencé à modifier le script pour afficher le graphe d'évolution des PV des poireaux.

Niveau bibliothèque, j'utilise Charts.js : http://www.chartjs.org Au niveau du code, il y avait déjà presque tout ce dont il me fallait : j'ai simplement ajouté la fonction getRoundData(round, dataName) à l'objet Leek. Le seul truc vraiment dommage, c'est qu'on a pas la vie totale des poireaux :( Si quelqu'un a une piste à ce niveau..

Voici un aperçu de mon POC : http://snag.gy/djlNS.jpg

yLark commented 10 years ago

Excellent, tu peux en faire profiter tout le monde ? Fais-donc un fork et un pull request. Ou alors, tu peux demander à Zear06 de te mettre en contributeur sur le projet.

Pour obtenir la vie totale des poireaux, j'avais pensé à une requête ajax sur la page http://leekwars.com/fight/xxxx. Mais elle n'est pas dispo sur la page de base, elle est chargée par la suite. Donc faudrait récupérer cette donnée chargée ensuite (peut-être directement en faisant la requête ajax de la page http://leekwars.com/fight/xxxx).

yLark commented 10 years ago

Une requête post sur http://leekwars.com/fight_get avec en contenu de la requête l'ID du combat renvoie un tableau avec tout ce dont on a besoin : les données de base de chaque poireau, et toutes les actions réalisées. C'est un peu du chinois, mais ça va sûrement permettre d'améliorer le kikimeter.

Exemple : http://pastebin.com/hbcy8Fbb

yLark commented 10 years ago

Je récupère la vie en quatre lignes de code, donc c'est bon pour afficher la vie au fil des tours.

Foudge commented 10 years ago

Très bonne nouvelle ! Tu les as ces 4 lignes de code que je les incorpore ? J'dois aussi m'occuper d'un problème d'échel de l'axe vertical (le mode automatique n'est pas toujours optimal). Ce soir je fork et j'intègre mes modifs sauf si Zear06 m'ajoute en tant que dontributeur, ce qui serait plus simple.

yLark commented 10 years ago

Le plus simple serait probablement que je l'intègre directement dans le js de base, et que tu te l'utilises ensuite ? Je suppose que tu as une fonction d'un seul bloc, alors que je dois faire des modifications du code ici et là. J'attends ta validation pour faire ces ajouts.

Foudge commented 10 years ago

Ok, je te laisse faire. Tu l'auras fait ce soir, ou alors je fork avant tes modifs ? Ca peut être intégré dans un 2ème temps, c'est pas bien grave.

yLark commented 10 years ago

Ok, je fais la modif avant ce soir. Tu as demandé à Zear06 de t'ajouter en contributeur ?

yLark commented 10 years ago

Les modifications sont faites, la vie de base est disponible, pas la vie à chaque tour, il faut la calculer.

Foudge commented 10 years ago

Mon travail a été ajouté en utilisant la valeur de la vie totale de chaque poireau :)

Lib qui peut être pas mal pour avoir une légende interactive : D3.js http://dataaddict.fr/prenoms/

yLark commented 10 years ago

J'avais pensé à faire quelque chose un peu moins détaillé que ça dans les options : http://code.shutterstock.com/rickshaw/examples/extensions.html

yLark commented 10 years ago

Suggestion intéressante de Rominou par MP : Faire un graphique à la "League of legends". Un exemple : http://matchhistory.euw.leagueoflegends.com/fr/#match-details/EUW1/1691062814/21699077 . Ce que je veux dire, c'est qu'en haut du graphique, quand on passe la souris sur les petit ou gros points, on voit les kills qui ont été fait. Ou alors la même chose mais avec les chip utilisé sur le tour.

yLark commented 10 years ago

Effectivement, chart.js est un peu limité. Rickshaw devrait permettre de produire davantage de choses.

Foudge commented 10 years ago

J'ai trouvé une lib tout aussi simple à utiliser que Chart.js mais plus évoluée : NVD3.js qui se base sur D3.js (comme les graphes de GitHub, comme Rickshaw, comme les graphes de LoL, etc.). Ce qu'il apporte :

J'ai donc implémenté la chose sur une page HTML locale sans problème mais une fois dans le script kikimeter, je perd mon affichage. Testé sur une page toute simple et un script GM minimaliste, même problème. Mais aucune erreur remontée dans la console, c'est comme s'il n'était pas possible de dessiner dans un SVG depuis un script GM. Une idée ? C'est pas la 1ère lib graphique qui supporte mal le portage dans un script GM.

Voilà ce que ça donne : http://olivier.fouge.free.fr/LW-kikimeter-test.html

yLark commented 10 years ago

Pas mal cette lib. Aucune idée sur l'origine du problème. Tu n'as pas avancé ? Est-ce que la lib est bien chargée avant de tracer le svg ?

Foudge commented 10 years ago

Oui tout est chargé : le SVG est bien présent, il fait la bonne taille, les script JS sont chargés, les appels à la lib ne provoquent pas d'erreur, j'ai même le texte de la légende (le nom des poireaux) qui apparait ! Par contre aucun dessin. Je me demande s'il n'y a pas des restrictions de sécurité (de GM) pour l'accès en écriture à certains éléments considérés comme potentiellement risqués.

Faudrait que je reteste avec Rickshaw mais la dernière fois j'avais un peu galéré à l'intégrer, donc je m'étais rabattu sur qqch de plus simple. Ceci dit, si c'est D3.js qui pose problème, on aura le même bug. Un volontaire pour valider Rickshaw dans un script GM (juste un POC) ?

edit: c'est p'tet lié au navigateur, je ne teste que sous Firefox

yLark commented 10 years ago

Je testerai RickShaw dès que j'aurai le temps. Je compte l'utiliser dans un autre projet, donc pas de soucis si je me casse un peu les dents dessus.

yLark commented 10 years ago

Bon, même s'il y a encore un peu à faire pour avoir un graph tip-top, je pense que je peux close cette issue. Quitte à en ouvrir une autre plus spécifique aux améliorations qu'on peut faire aux graphes.