//=============================================================================
// Sphinx-Chart.js
//=============================================================================
/*:
* @plugindesc Chart.js pour RMMV
* @author Sphinx
*
* @param x
* @desc Valeur par défaut de la position du graphique sur l'axe horizontal
* @default 208
*
* @param y
* @desc Valeur par défaut de la position du graphique sur l'axe vertical
* @default 112
*
* @param width
* @desc Valeur par défaut de la largeur du graphique
* @default 400
*
* @param height
* @desc Valeur par défaut de la heuteur du graphique
* @default 400
*
* @help
* Ce plugin est diffusé sous licence Creative Commons 3.0 BY-NC :
* Vous pouvez l'utiliser dans tout projet non commercial simplement en
* créditant l'auteur Sphinx dans votre jeu
*
* Ce plugin est une adaptation de la bibliothèque javascript Chart.js pour
* RPG Maker MV.
* Ce plugin nécessite l'ajout préalable de Chart.js au projet. Pour se faire,
* il vous suffit de télécharger la dernière version depuis le site
* https://www.chartjs.org
* /!\ Si vous téléchargez la version minifiée de la bibliothèque, il faudra
* enlever le .min de son nom. En effet, dans la liste des plugins RMMV, le
* nom de la bibliothèque sera Chart (pour un nom de fichier Char.min.js) car
* RMMV ne garde que la partie avant le point. Ensuite, il va chercher un
* fichier javascript Chart.js (et non Chart.min.js) ce qui génèrera une
* erreur
*
* Usage :
* chart = new SphinxChart(
* type: TYPE,
* coords: COORDS,
* data: DATAS
* );
* où :
* TYPE : type de graphique voulu. Les types de graphiques actuellement
* disponibles sont "line", "bar", "horizontalBar", "radar", "pie",
* "doughnut", "polarArea", "bubble", "scatter"
* COORDS : objet javascript de la forme suivante :
* {
* x: Coordonnée horizontale (X) du graphique dans la fenêtre de jeu,
* y: Coordonnée verticale (Y) du graphique dans la fenêtre de jeu,
* width: Largeur du graphique,
* height: Hauteur du graphique
* }
* DATAS : données du graphique telles que décrites dans la documentation
* de ChartJs (doc officielle : https://www.chartjs.org/docs/latest/)
* Une fois la scène terminée (où n'importe quand, quand le graphique doit être
* supprimé), pensez à appeler chart.destroy() pour effacer le graphique.
*/
(function() {
Game_Interpreter.prototype.SphinxDebug_pluginCommand = Game_Interpreter.prototype.pluginCommand;
Game_Interpreter.prototype.pluginCommand = function(command, args) {
switch(command) {
case "RADAR_HEROS":
if(this.chart != null) {
this.chart.destroy();
}
datasets = [];
for(var id in $gameActors._data) {
actor = $gameActors.actor(id);
datasets.push({
label: actor.name(),
data: [ actor.mhp, actor.mmp, actor.atk, actor.def, actor.mat, actor.mdf, actor.agi, actor.luk ]
});
}
this.chart = new SphinxChart({
type: "radar",
coords: {
x: 414,
y: 222
},
data: {
labels: [ "PV", "PM", "Attaque", "Défense", "Magie", "Défense Magie", "Agilité", "Chance" ],
datasets: datasets
},
options: {
scale: {
ticks: {
display: false
}
}
}
});
break;
case "DETRUIRE_RADAR_HEROS":
if(this.chart != null) {
this.chart.destroy();
this.chart = null;
}
break;
default:
Game_Interpreter.prototype.SphinxDebug_pluginCommand.call(this, command, args);
break;
}
};
function SphinxChart() {
this.initialize.apply(this, arguments);
}
SphinxChart.prototype.constructor = SphinxChart;
SphinxChart.listCharts = {};
SphinxChart.prototype.initialize = function(config) {
// Récupération des paramètres du plugin
var parameters = PluginManager.parameters("Sphinx-Charts");
var defaultX = parameters["x"];
var defaultY = parameters["y"];
var defaultWidth = parameters["width"];
var defaultHeight = parameters["height"];
// Vérification du type de graphique
var typesAutorises = [ "line", "bar", "horizontalBar", "radar", "pie", "doughnut", "polarArea", "bubble", "scatter" ];
if(!typesAutorises.includes(config.type)) {
throw new Error(config.type + " is not an available chart type");
}
// Vérification des coordonnées
if(config.coords == null) {
config.coords = {
x: defaultX,
y: defaultY,
w: defaultWidth,
h: defaultHeight
};
}
if(config.coords.x == null) {
config.coords.x = defaultX;
}
if(config.coords.y == null) {
config.coords.y = defaultY;
}
if(config.coords.width == null) {
config.coords.width = defaultWidth;
}
if(config.coords.height == null) {
config.coords.height = defaultHeight;
}
this.coords = config.coords;
this.type = config.type;
this.data = config.data;
this.options = config.options;
this.initCanvas();
};
SphinxChart.prototype.initCanvas = function() {
this.container = document.createElement("div");
this.container.style.position = "absolute";
this.container.style.zIndex = 5;
this.canvas = document.createElement("canvas");
do {
this.container.id = 'chart_' + Math.random().toString(36);
} while(document.getElementById(this.container.id));
this.container.appendChild(this.canvas);
document.body.appendChild(this.container);
SphinxChart.listCharts[this.container.id] = this;
this.updatePositionAndSize();
this.chart = new Chart(this.canvas, {
type: this.type,
data: this.data,
options: this.options
});
this.update();
}
SphinxChart.prototype.update = function() {
this.updatePositionAndSize();
this.chart.update();
}
SphinxChart.prototype.updatePositionAndSize = function() {
this.container.style.left = Graphics.canvasToPageX(this.coords.x) + "px";
this.container.style.top = Graphics.canvasToPageY(this.coords.y) + "px";
this.container.style.width = Math.floor(this.coords.width * Graphics._realScale) + "px";
this.container.style.height = Math.floor(this.coords.height * Graphics._realScale) + "px";
this.canvas.width = Math.floor(this.coords.width * Graphics._realScale);
this.canvas.height = Math.floor(this.coords.height * Graphics._realScale);
}
SphinxChart.prototype.destroy = function() {
this.container.remove();
}
Element.prototype.remove = function() {
this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
for(var i = this.length - 1; i >= 0; i--) {
if(this[i] && this[i].parentElement) {
this[i].parentElement.removeChild(this[i]);
}
}
}
Graphics._sphinxChartsUpdateAllElements = Graphics._updateAllElements;
Graphics._updateAllElements = function() {
Graphics._sphinxChartsUpdateAllElements.call(this);
for(var id in SphinxChart.listCharts) {
SphinxChart.listCharts[id].update();
}
}
Graphics.canvasToPageX = function(x) {
if (this._canvas) {
var left = this._canvas.offsetLeft;
return Math.round(x * this._realScale + left);
} else {
return 0;
}
};
Graphics.canvasToPageY = function(y) {
if (this._canvas) {
var top = this._canvas.offsetTop;
return Math.round(y * this._realScale + top);
} else {
return 0;
}
};
})();