NxTIC/view/js/charts.js

/* [1] Gestion du sociogramme
=========================================================*/
/* (0) On recupere les elements importants */
var SOCIOGRAM = {
	container: document.getElementById('sociogram'),
	sigma: null,

	request: { path: 'charts/network_data' },
	response: null,
	nodes: null,
	edges: null
};

/* (0.5) Surcharge graph */
// On recupere les voisins d'un noeud
sigma.classes.graph.addMethod('nodeNeighbors', function(nodeId){
	// On recupere les voisins du noeud courant
	var neighbors = this.allNeighborsIndex[nodeId];

	// Pile des voisins pour lesquels il faut chercher leurs voisins
	var stack = [];
	for( neighborId in neighbors ) stack.push(neighborId);

	// Tant qu'il reste des voisins a trouver
	while( stack.length > 0 ){
		var subneighbors = this.allNeighborsIndex[stack[0]];
		for( subId in subneighbors )
			// Si le voisin est pas deja dans la liste/pile, on l'ajoute a la liste des voisins
			if( neighbors[subId] == null ){
				stack.push(subId); // On ajoute a la pile
				neighbors[subId] = subneighbors[subId]; // On ajoute a la liste complete
			}

		stack.shift();
	}


	// On retourne le resultat
	return neighbors;
});


/* (0.8) Initialisation de SIGMA */
SOCIOGRAM.sigma = new sigma({renderer: { container: SOCIOGRAM.container, 'type': 'canvas' }});





/* (1) On recupere les informations via l'API */
api.send(SOCIOGRAM.request, function(response){
	// Si erreur, on quitte
	if( response.ModuleError != 0 ) return;

	// Sinon on enregistre
	SOCIOGRAM.response = response;


	/* (2) Parametrage de SIGMA */
	SOCIOGRAM.sigma.settings({
			defaultNodeColor: '#348ed8',
			defaultLabelSize: 14,
	        defaultLabelBGColor: "#ddd",
	        defaultHoverLabelBGColor: "#002147",
	        defaultLabelHoverColor: "#fff",
	        labelThreshold: 10,
	        defaultEdgeType: "curve"
		});


	/* (3) On recupere la liste des noeuds */
	SOCIOGRAM.nodes = [];

	// On calcule l'angle min
	var ang = 2*Math.PI / SOCIOGRAM.response.data.alter.length;

	// Parametres d'affichage
	var ray            = 500;

	// Pour chaque alter
	for( var i = 0 ; i < SOCIOGRAM.response.data.alter.length ; i++ ){
		SOCIOGRAM.nodes.push({
				'id':    'n-'+SOCIOGRAM.response.data.alter[i][0],
				'label': SOCIOGRAM.response.data.alter[i][1],
				'x':     ray+ ray*Math.cos(ang*i),
				'y':     ray+ ray*Math.sin(ang*i),
				'size':  SOCIOGRAM.response.data.alter[i][2]
			});
	}



	/* (4) On recupere la liste des liens */
	SOCIOGRAM.edges = [];

	for( var i = 0 ; i < SOCIOGRAM.response.data.inter.length ; i++ ){
		SOCIOGRAM.edges.push({
				'id':     'e-'+SOCIOGRAM.response.data.inter[i][0]+'-'+SOCIOGRAM.response.data.inter[i][1],
				'source': 'n-'+SOCIOGRAM.response.data.inter[i][0],
				'target': 'n-'+SOCIOGRAM.response.data.inter[i][1]
			});
	}



	/* (5) On ajoute nos noeuds */
	for( var i = 0 ; i < SOCIOGRAM.nodes.length ; i++)
		SOCIOGRAM.sigma.graph.addNode(SOCIOGRAM.nodes[i]);

	/* (6) On ajoute nos liens */
	for( var i = 0 ; i < SOCIOGRAM.edges.length ; i++)
		SOCIOGRAM.sigma.graph.addEdge(SOCIOGRAM.edges[i]);

	/* (7) Gestion des interactions */
	// On affiche que les voisins d'un noeud
	SOCIOGRAM.sigma.bind('clickNode', function(e){
		var nodeId = e.data.node.id;
		// On recupere les voisins
		var neighborNodes = SOCIOGRAM.sigma.graph.nodeNeighbors(nodeId);
		neighborNodes[nodeId] = e.data.node; // on ajoute le noeud clique

		SOCIOGRAM.sigma.graph.nodes().forEach(function(n) {
			if( neighborNodes[n.id] != null ) n.color = n.originalColor;
			else                              n.color = '#eee';
        });

		SOCIOGRAM.sigma.refresh();
	});

	// On affiche tous les noeuds quand on clique dans le vide
	SOCIOGRAM.sigma.bind('clickStage', function(e){
		SOCIOGRAM.sigma.graph.nodes().forEach(function(n) { n.color = n.originalColor; });

		SOCIOGRAM.sigma.refresh();
	});

	/* (8) On affiche le graphique */
	SOCIOGRAM.sigma.camera.ratio = 1.2;
	SOCIOGRAM.sigma.refresh();

});
























































// var i,
//     s,
//     o,
//     L = 10,
//     N = 100,
//     E = 500,
//     g = {
//       nodes: [],
//       edges: []
//     },
//     step = 0;
// // Generate a random graph:
// for (i = 0; i < N; i++) {
//   o = {
//     id: 'n' + i,
//     label: 'Node ' + i,
//     circular_x: L * Math.cos(Math.PI * 2 * i / N - Math.PI / 2),
//     circular_y: L * Math.sin(Math.PI * 2 * i / N - Math.PI / 2),
//     circular_size: Math.random(),
//     circular_color: '#' + (
//       Math.floor(Math.random() * 16777215).toString(16) + '000000'
//     ).substr(0, 6),
//     grid_x: i % L,
//     grid_y: Math.floor(i / L),
//     grid_size: 1,
//     grid_color: '#ccc'
//   };
//   ['x', 'y', 'size', 'color'].forEach(function(val) {
//     o[val] = o['grid_' + val];
//   });
//   g.nodes.push(o);
// }
// for (i = 0; i < E; i++)
//   g.edges.push({
//     id: 'e' + i,
//     source: 'n' + (Math.random() * N | 0),
//     target: 'n' + (Math.random() * N | 0),
//   });
// // Instantiate sigma:
// s = new sigma({
//   graph: g,
//   renderer: { container: document.getElementById('graph-container'), 'type': 'canvas' },
//   settings: {
//     animationsTime: 1000
//   }
// });

// setInterval(function(){
// 	var prefix = ['grid_', 'circular_'][step = +!step];
// 	  sigma.plugins.animate(
// 	    s,
// 	    {
// 	      x: prefix + 'x',
// 	      y: prefix + 'y',
// 	      size: prefix + 'size',
// 	      color: prefix + 'color'
// 	    }
// 	  );
// }, 10000);