Skip to content

GitLab

Commit 1fc99ad8 authored by Jean-Clement Gallardo's avatar Jean-Clement Gallardo
Browse files

Add scale selector : auto and proportional ok, begin manual

parent fa7d5fcc
Hide whitespace changes
Inline Side-by-side
app/view/form/fluxMappingForm/FluxMappingForm.js
View file @ 1fc99ad8
......@@ -7,7 +7,8 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingForm', {
alias: 'widget.fluxMappingForm',
requires: [
"metExploreViz.view.form.fluxMappingForm.FluxMappingFormController",
"metExploreViz.view.form.fluxMappingForm.FluxMappingFormModel"
"metExploreViz.view.form.fluxMappingForm.FluxMappingFormModel",
"metExploreViz.view.form.continuousNumberMappingEditor.ContinuousNumberMappingEditor"
],
controller: "form-fluxMappingForm-fluxMappingForm",
viewModel: {
......@@ -205,6 +206,51 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingForm', {
]
},
{
xtype: 'label',
html: 'Scale selector :',
margin: '15 15 5 15'
},
{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
store: {
fields: ['selectScale'],
data: [
{'selectScale' : 'Automatic'},
{'selectScale' : 'Proportional'},
{'selectScale' : 'Manual'}
]
},
xtype: 'combobox',
displayField: 'selectScale',
valueField: 'selectScale',
queryMode: 'local',
editable: false,
value: 'Automatic',
margin: '5 5 5 5',
width: '100%',
reference: 'scaleSelector'
}
]
},
{
xtype: "panel",
reference: "scaleEditor",
height: 110,
hidden:true,
width: 550,
html: "<svg id='scaleEditor' height='110' width='250px'> </svg>"
},
{
xtype: 'checkboxfield',
boxLabel: 'Distribution graph : only display data',
......
app/view/form/fluxMappingForm/FluxMappingFormController.js
View file @ 1fc99ad8
......@@ -73,19 +73,20 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
var nbColSelect = view.lookupReference('selectColNumber').getValue();
var condSelect = view.lookupReference('selectConditionFlux').getValue();
var switchGraph = view.lookupReference('displayGraphDistrib').getValue();
var scaleSelector = view.lookupReference('scaleSelector').getValue();
if (selectedFile !== null && nbColSelect !== null && condSelect !== null){
if (nbColSelect === "one"){
var color = document.getElementById("html5colorpickerFlux1").value;
metExploreD3.GraphStyleEdition.fluxPath1 = true;
me.computeFlux(selectedFile, nbColSelect, condSelect, "null", color, switchGraph);
me.computeFlux(selectedFile, nbColSelect, condSelect, "null", color, switchGraph, scaleSelector);
}
if (nbColSelect === "two"){
var color = [document.getElementById("html5colorpickerFlux1").value,
document.getElementById("html5colorpickerFlux2").value];
metExploreD3.GraphStyleEdition.fluxPath2 = true;
var condSelect2 = view.lookupReference('selectConditionFlux2').getValue();
me.computeFlux(selectedFile, nbColSelect, condSelect, condSelect2, color, switchGraph);
me.computeFlux(selectedFile, nbColSelect, condSelect, condSelect2, color, switchGraph, scaleSelector);
}
if (view.lookupReference('addValueNetwork').getValue() === true){
var size = view.lookupReference('fontSize').getValue();
......@@ -127,19 +128,20 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
var nbColSelect = view.lookupReference('selectColNumber').getValue();
var condSelect = view.lookupReference('selectConditionFlux').getValue();
var switchGraph = view.lookupReference('displayGraphDistrib').getValue();
var scaleSelector = view.lookupReference('scaleSelector').getValue();
if (selectedFile !== null && nbColSelect !== null && condSelect !== null){
if (nbColSelect === "one"){
var color = document.getElementById("html5colorpickerFlux1").value;
metExploreD3.GraphStyleEdition.fluxPath1 = true;
me.computeFlux(selectedFile, nbColSelect, condSelect, "null", color, switchGraph);
me.computeFlux(selectedFile, nbColSelect, condSelect, "null", color, switchGraph, scaleSelector);
}
if (nbColSelect === "two"){
var color = [document.getElementById("html5colorpickerFlux1").value,
document.getElementById("html5colorpickerFlux2").value];
metExploreD3.GraphStyleEdition.fluxPath2 = true;
var condSelect2 = view.lookupReference('selectConditionFlux2').getValue();
me.computeFlux(selectedFile, nbColSelect, condSelect, condSelect2, color, switchGraph);
me.computeFlux(selectedFile, nbColSelect, condSelect, condSelect2, color, switchGraph, scaleSelector);
}
if (view.lookupReference('addValueNetwork').getValue() === true){
var size = view.lookupReference('fontSize').getValue();
......@@ -194,6 +196,21 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
}
}
});
view.lookupReference('scaleSelector').on({
change: function(){
if (this.getValue() === "Manual"){
view.lookupReference('scaleEditor').setHidden(false);
var condSelect = view.lookupReference('selectConditionFlux').getValue();
if (condSelect !== null){
me.drawScaleEditor();
}
}
if (this.getValue() !== "Manual"){
view.lookupReference('scaleEditor').setHidden(true);
}
}
});
},
colParse: function(nbCol, selectedFile){
......@@ -245,7 +262,7 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
condStore.setData(fileName);
},
computeFlux: function(selectedFile, nbCol, condSelect, condSelect2, color, switchGraph){
computeFlux: function(selectedFile, nbCol, condSelect, condSelect2, color, switchGraph, scaleSelector){
var fluxList = _metExploreViz.flux;
var fileIndex = [];
fluxList.forEach(function(list, i){
......@@ -294,13 +311,46 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
conData.push(data);
}
}
metExploreD3.GraphFlux.displayChoice(conData, targetLabel, nbCol, color);
metExploreD3.GraphFlux.displayChoice(conData, targetLabel, nbCol, color, scaleSelector);
if (nbCol === "one"){
metExploreD3.GraphFlux.graphDistribOne(conData, color, switchGraph);
metExploreD3.GraphFlux.graphDistribOne(conData, color, switchGraph, scaleSelector);
}
if (nbCol === "two"){
metExploreD3.GraphFlux.graphDistribTwo(conData, color, switchGraph);
metExploreD3.GraphFlux.graphDistribTwo(conData, color, switchGraph, scaleSelector);
}
},
drawScaleEditor : function() {
var me = this;
var view = me.getView();
var margin = 0;
var width = 190;
var height = 50;
var scaleRange = [
{id:"start",value:-10,styleValue:1},
{id:1,value:-10,styleValue:1},
{id:2,value:1000,styleValue:5},
{id:"end",value:1000,styleValue:5}
];
var svg = d3.select(view.lookupReference('scaleEditor').el.dom).select("#scaleEditor");
var test = d3.select("#viz");
metExploreD3.GraphNumberScaleEditor.createNumberScaleCaption(svg, width, height, margin, scaleRange);
svg.on("click", function(){
var win = Ext.create("metExploreViz.view.form.continuousNumberMappingEditor.ContinuousNumberMappingEditor", {
height : 300,
aStyleFormParent : view
});
win.show();
});
}
});
resources/lib/functions/GraphFlux.js
View file @ 1fc99ad8
......@@ -11,19 +11,19 @@
metExploreD3.GraphFlux = {
displayChoice: function(fluxData, targetLabel, nbCol, color){
displayChoice: function(fluxData, targetLabel, nbCol, color, scaleSelector){
var session = _metExploreViz.getSessionById('viz');
var networkData = session.getD3Data();
if (nbCol === "one"){
this.oneCompute(fluxData, networkData, targetLabel, color);
this.oneCompute(fluxData, networkData, targetLabel, color, scaleSelector);
}
if (nbCol === "two"){
this.twoCompute(fluxData, networkData, targetLabel, color);
this.twoCompute(fluxData, networkData, targetLabel, color, scaleSelector);
}
},
oneCompute: function(fluxData, networkData, targetLabel, color){
oneCompute: function(fluxData, networkData, targetLabel, color, scaleSelector){
var valuePos = {};
var valueNeg = {};
var valPosDistri = [];
......@@ -78,12 +78,12 @@ metExploreD3.GraphFlux = {
if (nodes !== undefined){
if (Object.keys(valuePos).includes(nodes.id)){
var edgeWidth = metExploreD3.GraphFlux.computeWidth(posDistrib, valuePos[nodes.id]);
var edgeWidth = metExploreD3.GraphFlux.computeWidth(posDistrib, valuePos[nodes.id], scaleSelector);
nodes.fluxDirection1 = edgeWidth;
nodes.color1 = color;
}
if (Object.keys(valueNeg).includes(nodes.id)){
var edgeWidth = metExploreD3.GraphFlux.computeWidth(negDistrib, valueNeg[nodes.id]);
var edgeWidth = metExploreD3.GraphFlux.computeWidth(negDistrib, valueNeg[nodes.id], scaleSelector);
nodes.fluxDirection1 = edgeWidth*(-1);
nodes.color1 = color;
}
......@@ -92,7 +92,7 @@ metExploreD3.GraphFlux = {
metExploreD3.GraphFlux.curveEdge();
},
twoCompute: function(fluxData, networkData, targetLabel, color){
twoCompute: function(fluxData, networkData, targetLabel, color, scaleSelector){
var valuePos = {first:{}, second:{}};
var valueNeg = {first:{}, second:{}};
var valPosDistri = [];
......@@ -163,23 +163,23 @@ metExploreD3.GraphFlux = {
if (nodes !== undefined){
if (Object.keys(valuePos["first"]).includes(nodes.id)){
var edgeWidth = metExploreD3.GraphFlux.computeWidth(posDistrib, valuePos["first"][nodes.id]);
var edgeWidth = metExploreD3.GraphFlux.computeWidth(posDistrib, valuePos["first"][nodes.id], scaleSelector);
nodes.fluxDirection1 = edgeWidth;
nodes.color1 = color[0];
}
if (Object.keys(valueNeg["first"]).includes(nodes.id)){
var edgeWidth = metExploreD3.GraphFlux.computeWidth(negDistrib, valueNeg["first"][nodes.id]);
var edgeWidth = metExploreD3.GraphFlux.computeWidth(negDistrib, valueNeg["first"][nodes.id], scaleSelector);
nodes.fluxDirection1 = edgeWidth*(-1);
nodes.color1 = color[0];
}
if (Object.keys(valuePos["second"]).includes(nodes.id)){
var edgeWidth = metExploreD3.GraphFlux.computeWidth(posDistrib, valuePos["second"][nodes.id]);
var edgeWidth = metExploreD3.GraphFlux.computeWidth(posDistrib, valuePos["second"][nodes.id], scaleSelector);
nodes.fluxDirection2 = edgeWidth;
nodes.color2 = color[1];
}
if (Object.keys(valueNeg["second"]).includes(nodes.id)){
var edgeWidth = metExploreD3.GraphFlux.computeWidth(negDistrib, valueNeg["second"][nodes.id]);
var edgeWidth = metExploreD3.GraphFlux.computeWidth(negDistrib, valueNeg["second"][nodes.id], scaleSelector);
nodes.fluxDirection2 = edgeWidth*(-1);
nodes.color2 = color[1];
}
......@@ -188,7 +188,7 @@ metExploreD3.GraphFlux = {
metExploreD3.GraphFlux.curveTwoEdge();
},
computeWidth: function(fluxDistri, fluxValue){
computeWidth: function(fluxDistri, fluxValue, scaleSelector){
var min = fluxDistri["min"];
var inter = fluxDistri["inter"];
var max = fluxDistri["max"];
......@@ -202,17 +202,26 @@ metExploreD3.GraphFlux = {
if (fluxValue === max){
return 5;
}
if (fluxValue === inter){
return 3;
}
if (fluxValue > inter){
var coef = 2 / (max - inter);
var widthCompute = 3 + (fluxValue - inter) * coef;
return widthCompute;
if (scaleSelector === "Automatic"){
if (fluxValue === inter){
return 3;
}
if (fluxValue > inter){
var coef = 2 / (max - inter);
var widthCompute = 3 + (fluxValue - inter) * coef;
return widthCompute;
}
if (fluxValue < inter){
var coef = 2 / (inter - min);
var widthCompute = 3 - (inter - fluxValue) * coef;
return widthCompute;
}
}
if (fluxValue < inter){
var coef = 2 / (inter - min);
var widthCompute = 3 - (inter - fluxValue) * coef;
if (scaleSelector === "Proportional"){
var coef = 4 / (max - min);
var widthCompute = 1 + (fluxValue - min) * coef;
return widthCompute;
}
},
......@@ -231,6 +240,11 @@ metExploreD3.GraphFlux = {
// value = 250 -> width = 2,615
// value = 50 -> width = 1,075
// Pour Proportional
// coef = 4 / (max - min)
// width = 1 + (fluxValue - min) * coef
// exemple : min = 100, max = 460, value = 400 -> coef = 0.011 => width = 4.3
fluxDistribution: function(fluxValues){
var distrib = {};
......@@ -1203,8 +1217,7 @@ metExploreD3.GraphFlux = {
}
},
graphDistribOne: function(fluxData, color, switchGraph){
console.log(fluxData);
graphDistribOne: function(fluxData, color, switchGraph, scaleSelector){
var data = [];
var valNeg = [];
var valPos = [];
......@@ -1311,25 +1324,27 @@ metExploreD3.GraphFlux = {
.style("text-decoration", "underline")
.text("Distribution Graph");
if (interLineNeg.x1 !== undefined){
svg.append("line")
.attr("x1", function(){ return x(interLineNeg.x1) })
.attr("x2", function(){ return x(interLineNeg.x2) })
.attr("y1", interLineNeg.y1)
.attr("y2", interLineNeg.y2)
.attr("stroke","red");
}
if (interLinePos.x1 !== undefined){
svg.append("line")
.attr("x1", function(){ return x(interLinePos.x1) })
.attr("x2", function(){ return x(interLinePos.x2) })
.attr("y1", interLinePos.y1)
.attr("y2", interLinePos.y2)
.attr("stroke","green");
if (scaleSelector !== "Proportional"){
if (interLineNeg.x1 !== undefined){
svg.append("line")
.attr("x1", function(){ return x(interLineNeg.x1) })
.attr("x2", function(){ return x(interLineNeg.x2) })
.attr("y1", interLineNeg.y1)
.attr("y2", interLineNeg.y2)
.attr("stroke","red");
}
if (interLinePos.x1 !== undefined){
svg.append("line")
.attr("x1", function(){ return x(interLinePos.x1) })
.attr("x2", function(){ return x(interLinePos.x2) })
.attr("y1", interLinePos.y1)
.attr("y2", interLinePos.y2)
.attr("stroke","green");
}
}
},
graphDistribTwo: function(fluxData, color, switchGraph){
graphDistribTwo: function(fluxData, color, switchGraph, scaleSelector){
var data1 = [];
var data2 = [];
var valNeg = [];
......@@ -1496,21 +1511,23 @@ metExploreD3.GraphFlux = {
.style("text-decoration", "underline")
.text("Distribution Graph");
if (interLineNeg.x1 !== undefined){
svg.append("line")
.attr("x1", function(){ return x(interLineNeg.x1) })
.attr("x2", function(){ return x(interLineNeg.x2) })
.attr("y1", interLineNeg.y1)
.attr("y2", interLineNeg.y2)
.attr("stroke","red");
}
if (interLinePos.x1 !== undefined){
svg.append("line")
.attr("x1", function(){ return x(interLinePos.x1) })
.attr("x2", function(){ return x(interLinePos.x2) })
.attr("y1", interLinePos.y1)
.attr("y2", interLinePos.y2)
.attr("stroke","green");
if (scaleSelector !== "Proportional"){
if (interLineNeg.x1 !== undefined){
svg.append("line")
.attr("x1", function(){ return x(interLineNeg.x1) })
.attr("x2", function(){ return x(interLineNeg.x2) })
.attr("y1", interLineNeg.y1)
.attr("y2", interLineNeg.y2)
.attr("stroke","red");
}
if (interLinePos.x1 !== undefined){
svg.append("line")
.attr("x1", function(){ return x(interLinePos.x1) })
.attr("x2", function(){ return x(interLinePos.x2) })
.attr("y1", interLinePos.y1)
.attr("y2", interLinePos.y2)
.attr("stroke","green");
}
}
},
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment