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

12
view.php
View File

@ -25,14 +25,14 @@
<!-- Dépendences Javascript --> <!-- Dépendences Javascript -->
<script type='text/javascript' src='/f/js/input-checker/js/lib' ></script> <!-- Gestion dynamique des saisies --> <script type='text/javascript' src='/f/js/input-checker/js/lib' ></script> <!-- Gestion dynamique des saisies -->
<script type='text/javascript' src='/f/js/reset/js/lib' ></script> <!-- Corrections Javascript natif (ajouts) --> <script type='text/javascript' src='/f/js/reset/js/lib' ></script> <!-- Corrections Javascript natif (ajouts) -->
<script type='text/javascript' src='/f/js/api/js/lib' ></script> <!-- Gestion des transactions avec le serveur --> <script type='text/javascript' src='/f/js/api/js/lib' ></script> <!-- Gestion des transactions avec le serveur -->
<script type='text/javascript' src='/f/js/page-manager/js/lib' ></script> <!-- Gestion réseau/chargement/liens/URL --> <script type='text/javascript' src='/f/js/page-manager/js/lib' ></script> <!-- Gestion réseau/chargement/liens/URL -->
<!-- Librairies Externes Javascript --> <!-- 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-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> </head>
<body> <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 2 - SOCIOGRAMME EGOCENTRE -->
<section> <section>
<center><h6>SOCIOGRAMME EGOCENTRE</h6></center> <center><h6>SOCIOGRAMME EGOCENTRE</h6></center>

181
view/js/charts.js
View File

@ -10,8 +10,31 @@ var SOCIOGRAM = {
nodes: null, nodes: null,
edges: null edges: null
}; };
// Initialisation de SIGMA /* (0.5) Surcharge graph */
SOCIOGRAM.sigma = new sigma(SOCIOGRAM.container); // 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 */ /* (1) On recupere les informations via l'API */
api.send(SOCIOGRAM.request, function(response){ api.send(SOCIOGRAM.request, function(response){
@ -24,7 +47,13 @@ api.send(SOCIOGRAM.request, function(response){
/* (2) Parametrage de SIGMA */ /* (2) Parametrage de SIGMA */
SOCIOGRAM.sigma.settings({ 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 // On calcule l'angle min
var ang = 2*Math.PI / SOCIOGRAM.response.data.alter.length; var ang = 2*Math.PI / SOCIOGRAM.response.data.alter.length;
// Parametres d'affichage
var ray = 500;
// Pour chaque alter // Pour chaque alter
for( var i = 0 ; i < SOCIOGRAM.response.data.alter.length ; i++ ){ for( var i = 0 ; i < SOCIOGRAM.response.data.alter.length ; i++ ){
SOCIOGRAM.nodes.push({ SOCIOGRAM.nodes.push({
'id': 'n-'+SOCIOGRAM.response.data.alter[i][0], 'id': 'n-'+SOCIOGRAM.response.data.alter[i][0],
'label': SOCIOGRAM.response.data.alter[i][1], 'label': SOCIOGRAM.response.data.alter[i][1],
'x': 500+ 100*Math.cos(ang*i), 'x': ray+ ray*Math.cos(ang*i),
'y': 500+ 100*Math.sin(ang*i), 'y': ray+ ray*Math.sin(ang*i),
'size': SOCIOGRAM.response.data.alter[i][2]/10 'size': SOCIOGRAM.response.data.alter[i][2]
}); });
} }
@ -69,10 +101,145 @@ api.send(SOCIOGRAM.request, function(response){
SOCIOGRAM.sigma.graph.addEdge(SOCIOGRAM.edges[i]); SOCIOGRAM.sigma.graph.addEdge(SOCIOGRAM.edges[i]);
/* (7) Gestion des interactions */ /* (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 */ /* (8) On affiche le graphique */
SOCIOGRAM.sigma.camera.ratio = 2; SOCIOGRAM.sigma.camera.ratio = 1.2;
SOCIOGRAM.sigma.refresh(); 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);