xdrm-brackets
/
NxTIC
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Sociogramme plus ergonomique reste le placement relatif à gérer.

This commit is contained in:
xdrm-brackets 2016-04-15 15:07:25 +02:00
parent d2ad9576a6
commit 5ebc8891ac
7 changed files with 239 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
js/lib/sigma/plugins/sigma.layout.forceAtlas2.min.js → js/lib/sigma/plugins/sigma-layout-forceAtlas2-min.js vendored
View File

0
js/lib/sigma/plugins/sigma.plugins.animate.min.js → js/lib/sigma/plugins/sigma-plugins-animate-min.js vendored
View File

0
js/lib/sigma/plugins/sigma.renderers.customShapes.min.js → js/lib/sigma/plugins/sigma-renderers-customShapes-min.js vendored
View File

101
manager/module/chart/networkChart.php
View File

@ -20,54 +20,54 @@
/* (2) Liste des alters */
'alter' => array(
// Pour chaque alter, on a ID_ALTER, NOM_ALTER, AFFINITE_ALTER
array( 653, "Norris", 2 ),
array( 1743, "Melissa", 79 ),
array( 3739, "Sue", 38 ),
array( 36, "Rasmussen", 34 ),
array( 1372, "Brown", 35 ),
array( 3030, "Brock", 84 ),
array( 3821, "Savage", 21 ),
array( 1288, "Black", 17 ),
array( 1443, "Susie", 69 ),
array( 4129, "Rowe", 66 ),
array( 71, "Dillard", 87 ),
array( 1002, "Richmond", 5 ),
array( 640, "Morris", 24 ),
array( 2335, "Daugherty", 53 ),
array( 2541, "Hughes", 74 ),
array( 3963, "Roach", 13 ),
array( 4550, "Hazel", 30 ),
array( 3120, "Eugenia", 97 ),
array( 4302, "Nicholson", 25 ),
array( 859, "Marguerite", 70 ),
array( 2551, "Aurora", 36 ),
array( 3612, "Tracie", 55 ),
array( 3040, "Fulton", 62 ),
array( 1895, "Stuart", 37 ),
array( 4342, "Latasha", 21 ),
array( 2957, "Coleen", 1 ),
array( 2493, "Contreras", 100 ),
array( 4776, "Holmes", 97 ),
array( 3623, "Hallie", 88 ),
array( 3660, "Ginger", 26 ),
array( 471, "Slater", 23 ),
array( 4581, "Elnora", 23 ),
array( 286, "Patton", 71 ),
array( 3210, "Autumn", 23 ),
array( 1896, "Benton", 99 ),
array( 4875, "Fern", 17 ),
array( 2156, "Bond", 99 ),
array( 1556, "Ingrid", 34 ),
array( 2097, "Case", 23 ),
array( 3024, "Pat", 57 ),
array( 1121, "Reeves", 41 ),
array( 1832, "Francis", 75 ),
array( 3733, "Moore", 77 ),
array( 737, "Elva", 49 ),
array( 1137, "Stevenson", 10 ),
array( 988, "Lauri", 44 ),
array( 1182, "Boone", 19 ),
array( 909, "Morin", 68 )
array( 653, "Norris", 2*5/100 ),
array( 1743, "Melissa", 79*5/100 ),
array( 3739, "Sue", 38*5/100 ),
array( 36, "Rasmussen", 34*5/100 ),
array( 1372, "Brown", 35*5/100 ),
array( 3030, "Brock", 84*5/100 ),
array( 3821, "Savage", 21*5/100 ),
array( 1288, "Black", 17*5/100 ),
array( 1443, "Susie", 69*5/100 ),
array( 4129, "Rowe", 66*5/100 ),
array( 71, "Dillard", 87*5/100 ),
array( 1002, "Richmond", 5*5/100 ),
array( 640, "Morris", 24*5/100 ),
array( 2335, "Daugherty", 53*5/100 ),
array( 2541, "Hughes", 74*5/100 ),
array( 3963, "Roach", 13*5/100 ),
array( 4550, "Hazel", 30*5/100 ),
array( 3120, "Eugenia", 97*5/100 ),
array( 4302, "Nicholson", 25*5/100 ),
array( 859, "Marguerite", 70*5/100 ),
array( 2551, "Aurora", 36*5/100 ),
array( 3612, "Tracie", 55*5/100 ),
array( 3040, "Fulton", 62*5/100 ),
array( 1895, "Stuart", 37*5/100 ),
array( 4342, "Latasha", 21*5/100 ),
array( 2957, "Coleen", 1*5/100 ),
array( 2493, "Contreras", 100*5/100 ),
array( 4776, "Holmes", 97*5/100 ),
array( 3623, "Hallie", 88*5/100 ),
array( 3660, "Ginger", 26*5/100 ),
array( 471, "Slater", 23*5/100 ),
array( 4581, "Elnora", 23*5/100 ),
array( 286, "Patton", 71*5/100 ),
array( 3210, "Autumn", 23*5/100 ),
array( 1896, "Benton", 99*5/100 ),
array( 4875, "Fern", 17*5/100 ),
array( 2156, "Bond", 99*5/100 ),
array( 1556, "Ingrid", 34*5/100 ),
array( 2097, "Case", 23*5/100 ),
array( 3024, "Pat", 57*5/100 ),
array( 1121, "Reeves", 41*5/100 ),
array( 1832, "Francis", 75*5/100 ),
array( 3733, "Moore", 77*5/100 ),
array( 737, "Elva", 49*5/100 ),
array( 1137, "Stevenson", 10*5/100 ),
array( 988, "Lauri", 44*5/100 ),
array( 1182, "Boone", 19*5/100 ),
array( 909, "Morin", 68*5/100 )
),
/* (1) Liste des relations */
@ -91,7 +91,6 @@
array( 2156, 3030 ),
array( 4342, 4302 ),
array( 71, 286 ),
array( 1896, 1896 ),
array( 3120, 1182 ),
array( 3821, 3660 ),
array( 2541, 1743 ),
@ -171,8 +170,8 @@
foreach($data['alter'] as $i=>$alter){
// On calcule l'origine (centre du cercle)
$origins[$alter[0]] = array(
'x' => 500 + (100-$alter[2])*(400/100) * cos($ang*$i),
'y' => 500 + (100-$alter[2])*(400/100) * sin($ang*$i)
'x' => 500 + (5-$alter[2])*(400/5) * cos($ang*$i),
'y' => 500 + (5-$alter[2])*(400/5) * sin($ang*$i)
);
// On ajoute le cercle associe a l'alter courant

2
view.php
View File

@ -32,7 +32,7 @@
<!-- Librairies Externes Javascript -->
<script type='text/javascript' src='/f/js/sigma-min/sigma' ></script> <!-- Gestion du graphique de type réseau -->
<script type='text/javascript' src='/f/js/sigma-parsers-json-min/sigma/plugins' ></script> <!-- Gestion du JSON pour le graphique reseau -->
<script type='text/javascript' src='/f/js/sigma-plugins-animate-min/sigma/plugins' ></script> <!-- Gestion du JSON pour le graphique reseau -->
</head>
<body>

8
view/charts.php
View File

@ -49,6 +49,14 @@ $render = $answer->get('render');
<!-- SECTION 1 BIS - SOCIOGRAMME SPATIAL -->
<section>
<center><h6>SOCIOGRAMME EGOCENTRE</h6></center>
<div id='graph-container' style='border-radius:3px;border: 1px solid #ddd;margin: 2em;width:30em;height: 30em;'></div>
</section>
<!-- SECTION 2 - SOCIOGRAMME EGOCENTRE -->
<section>
<center><h6>SOCIOGRAMME EGOCENTRE</h6></center>

181
view/js/charts.js
View File

@ -10,8 +10,31 @@ var SOCIOGRAM = {
nodes: null,
edges: null
};
// Initialisation de SIGMA
SOCIOGRAM.sigma = new sigma(SOCIOGRAM.container);
/* (0.5) Surcharge graph */
// On recupere les voisins d'un noeud
sigma.classes.graph.addMethod('getNeighbords', function(nodeId){
// On recupere les voisins du noeud courant
var neighbors = this.allNeighborsIndex[nodeId];
var tmp = neighbors;
// Et on recupere les voisins des voisins
for( subnodeId in tmp ){
var subneighbors = this.allNeighborsIndex[subnodeId];
for( subneighbor in subneighbors )
neighbors[subneighbor] = subneighbors[subneighbor];
}
// 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){
@ -24,7 +47,13 @@ api.send(SOCIOGRAM.request, function(response){
/* (2) Parametrage de SIGMA */
SOCIOGRAM.sigma.settings({
defaultNodeColor: '#ec5148'
defaultNodeColor: '#348ed8',
defaultLabelSize: 14,
defaultLabelBGColor: "#ddd",
defaultHoverLabelBGColor: "#002147",
defaultLabelHoverColor: "#fff",
labelThreshold: 10,
defaultEdgeType: "curve"
});
@ -34,14 +63,17 @@ api.send(SOCIOGRAM.request, function(response){
// 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': 500+ 100*Math.cos(ang*i),
'y': 500+ 100*Math.sin(ang*i),
'size': SOCIOGRAM.response.data.alter[i][2]/10
'x': ray+ ray*Math.cos(ang*i),
'y': ray+ ray*Math.sin(ang*i),
'size': SOCIOGRAM.response.data.alter[i][2]
});
}
@ -69,10 +101,145 @@ api.send(SOCIOGRAM.request, function(response){
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.getNeighbords(nodeId);
neighborNodes[nodeId] = e.data.node; // on ajoute le noeud clique
SOCIOGRAM.sigma.graph.nodes().forEach(function(n) {
if( neighborNodes[n.id] ) 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 = 2;
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);