Skip to content

Commit

Permalink
Minor code revision and bug fix (doesn't reload page on exporting csv…
Browse files Browse the repository at this point in the history 
… anymore). (refs #130)
  • Loading branch information
@doomsayer2
doomsayer2 committed Feb 8, 2018
1 parent 4516cc7 commit 0ec96dd
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 114 deletions.
50 changes: 24 additions & 26 deletions src/sankey_detail.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ class SankeyDetail implements MAppViews {

private $node: d3.Selection<any>;
private detailSVG: d3.Selection<any>;
//Check if path was clicked already twice
// Check if path was clicked already twice
private clicked: number = 0;
//Draw SVG Bar Chart
// Draw SVG Bar Chart
private drawSvg: number = 0;
//Look if the bar chart is drawn
// Look if the bar chart is drawn
private drawBarChart: number = 0;
private toolbox;
private toolbox2;
Expand All @@ -38,7 +38,7 @@ class SankeyDetail implements MAppViews {
// this.build();
this.attachListener();

//Return the promise directly as long there is no dynamical data to update
// Return the promise directly as long there is no dynamical data to update
return Promise.resolve(this);
}

Expand All @@ -55,7 +55,6 @@ class SankeyDetail implements MAppViews {
*/
private attachListener() {
events.on(AppConstants.EVENT_CLICKED_PATH, (evt, data, json, coordinates) => {
//console.log('Coordinaten, mouseclick evenet', coordinates, coordinates[0], coordinates[0]);
if (this.clicked <= 1 ) {
SimpleLogging.log('flow detail clicked', [data.source.name, data.target.name]);
this.drawDetails(data, json, coordinates);
Expand Down Expand Up @@ -97,36 +96,33 @@ class SankeyDetail implements MAppViews {
const value = clickedPath.target.value;

const columnLabels : any = JSON.parse(localStorage.getItem('columnLabels'));
/** unit of flows (e.g., '€'). Extracted from CSV header. */
// Unit of flows (e.g., '€'). Extracted from CSV header
const valuePostFix = (columnLabels == null) ? '' : ' ' + columnLabels.valueNode;

//Tooltip for the bar chart
// Tooltip for the bar chart
const tooltip = this.$node.append('div')
.attr('class', 'tooltip')
.style('opacity', 0)
.style('z-index', '200000');

//get width and height of sankey div to calculate position of svg
// Get width and height of sankey div to calculate position of svg
const widthSankeyDiv = (<any>d3).select('.sankey_vis').node().getBoundingClientRect().width;
const heightSankeyDiv = (<any>d3).select('.sankey_vis').node().getBoundingClientRect().height;

const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

//position of svg in the sankey_diagram div
//let xpositionSvg = widthSankeyDiv / 2 + 100;
// Position of svg in the sankey_diagram div
const xpositionSvg = windowWidth / 2 - (w/2);
const ypositionSvg = coordinates[1] + h;
const newYPositionSvg = ypositionSvg + 10;

if (this.drawSvg === 0) {

this.$node.append('svg')
.attr('class', 'sankey_details')
.attr('transform', 'translate(' + xpositionSvg + ',' + newYPositionSvg + ')')
.attr('width', w + margin.left + margin.right + 'px')
.attr('height', h + margin.top + margin.bottom + 'px')
//.style('background-color', '#e0e0e0')
.style('z-index', '10000');

this.$node.select('svg.sankey_details').append('g')
Expand Down Expand Up @@ -192,6 +188,9 @@ class SankeyDetail implements MAppViews {
SimpleLogging.log('export time series', sourceAndTarget);

Export.exportSingleFlowOverTime('svg.sankey_details rect.bar', sourceAndTarget);
const evt = <MouseEvent>d3.event;
evt.preventDefault();
evt.stopPropagation();
// Export.exportSingleFlowOverTime('svg.sankey_details2 rect.bar');
});

Expand All @@ -203,7 +202,6 @@ class SankeyDetail implements MAppViews {
.attr('transform', 'translate(' + xpositionSvg + ',' + (h + newYPositionSvg) + ')')
.attr('width', w + margin.left + margin.right + 'px')
.attr('height', h + margin.top + margin.bottom + 'px')
//.style('background-color', '#e0e0e0')
.style('z-index', '10000');

this.$node.select('svg.sankey_details2').append('g')
Expand Down Expand Up @@ -274,30 +272,30 @@ class SankeyDetail implements MAppViews {
this.drawSvg = 0;
}

//Filter data based on the clicked path (sourceName and targetName) and store it
// Filter data based on the clicked path (sourceName and targetName) and store it
const path = json.filter((obj) => {
return obj.sourceNode === sourceName && obj.targetNode === targetName;
});

//Data for the bar chart
// Data for the bar chart
const valueOverTime = {};
for(const key in path) {
if(path.hasOwnProperty(key)) {
for (const key in path) {
if (path.hasOwnProperty(key)) {
valueOverTime[path[key].timeNode] = path[key];
}
}
const data = [];
for(const i in valueOverTime) {
if(valueOverTime.hasOwnProperty(i)) {
for (const i in valueOverTime) {
if (valueOverTime.hasOwnProperty(i)) {
data.push({timeNode: +valueOverTime[i].timeNode, valueNode: +valueOverTime[i].valueNode});
}
}

//X-Scale and equal distribution
// X-Scale and equal distribution
const x = (<any>d3).scale.ordinal()
.rangeBands([0, w], 0.2);

//Y-Scale for the chart
// Y-Scale for the chart
const y = d3.scale.linear()
.range([h, 0]);

Expand All @@ -309,15 +307,15 @@ class SankeyDetail implements MAppViews {
y.domain([0, d3.max(data, function(d) { return d.valueNode; })]);

if (this.drawBarChart === 0) {
//Add the svg for the bars and transform it slightly to be in position of the box
// Add the svg for the bars and transform it slightly to be in position of the box
this.detailSVG = d3.select('svg.sankey_details')
.append('g')
.attr('class', 'bars')
.attr('transform', 'translate(' + (margin.left + 10) + ',' + margin.top + ')');
++this.drawBarChart;

} else {
//Add the svg for the bars and transform it slightly to be in position of the box
// Add the svg for the bars and transform it slightly to be in position of the box
this.detailSVG = d3.select('svg.sankey_details2')
.append('g')
.attr('class', 'bars')
Expand All @@ -332,7 +330,7 @@ class SankeyDetail implements MAppViews {
.style('text-anchor', 'end')
.text(valuePostFix);

//Add in the bar charts and the tooltips if user mouses over them.
// Add in the bar charts and the tooltips if user mouses over them.
this.detailSVG.selectAll('.bar')
.data(data)
.enter()
Expand All @@ -352,7 +350,7 @@ class SankeyDetail implements MAppViews {
tooltip.transition().duration(500).style('opacity', 0);
});

//Define the axes and draw them
// Define the axes and draw them
const xAxis = d3.svg.axis().scale(x)
.tickFormat(TimeFormat.format)
.orient('bottom');
Expand All @@ -378,7 +376,7 @@ class SankeyDetail implements MAppViews {
.attr('class', 'y axis')
.call(yAxis.ticks(4).tickFormat((d) => { return format(d).replace(',', '.'); }));

//Append the close button or link to the SVG
// Append the close button or link to the SVG
const close = this.detailSVG.append('g').attr('class', 'closeLink');
close.append('text')
.attr('font-family', 'FontAwesome')
Expand Down
102 changes: 42 additions & 60 deletions src/sankey_features.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ class SankeyFeatures implements MAppViews {
this.build();
this.attachListener();

//Return the promise directly as long there is no dynamical data to update
// Return the promise directly as long there is no dynamical data to update
return Promise.resolve(this);
}

Expand All @@ -38,102 +38,84 @@ class SankeyFeatures implements MAppViews {
*/
private build() {
this.$node.html(`
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<h5>
Filter
</h5>
<div class="row">
<div class="col-md-3">
<button type="button" class= 'btn_design' id='clearAllFilters' class="btn btn-default">
Clear All
</button>
</div>
<div class="col-md-3">
<div class="btn-group">
<button class= 'btn_design' class="btn btn-default">
Time
</button>
</div>
</div>
<div class="col-md-3">
<div class="btn-group">
<button class ='btn_design' class="btn btn-default">
Attribute
</button>
</div>
</div>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-3'>
<h5>Filter</h5>
<div class='row'>
<div class='col-md-3'>
<button type='button' class= 'btn_design' id='clearAllFilters' class='btn btn-default'>
Clear All
</button>
</div>
<div class='col-md-3'>
<div class='btn-group'>
<button class= 'btn_design' class='btn btn-default'>Time</button>
</div>
</div>
<div class='col-md-3'>
<div class='btn-group'>
<button class ='btn_design' class='btn btn-default'>Attribute</button>
</div>
</div>
</div>
<div class="row">
<p>
<div class="col-md-12">
<span class="label label-default">2016Q2 - 2017Q1</span>
<div class='row'>
<p>
<div class='col-md-12'>
<span class='label label-default'>2016Q2 - 2017Q1</span>
</div>
</p>
</p>
</div>
</div>
<!--Global Filters-->
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6" id = 'btn_above'>
<div class='col-md-3'>
<div class='row'>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-6' id = 'btn_above'>
<h5>Show State <i class='fa fa-question-circle' aria-hidden='true'></i></h5>
<button type="button" class ='btn_design' class="btn btn-default">Absolute Value</button>
<button type="button" class ='btn_design' class="btn btn-default">Number of Links</button>
<button type='button' class ='btn_design' class='btn btn-default'>Absolute Value</button>
<button type='button' class ='btn_design' class='btn btn-default'>Number of Links</button>
</div>
<div class="col-md-6" id = 'btn_above'>
<div class='col-md-6' id = 'btn_above'>
<h5>Show Change <i class='fa fa-question-circle' aria-hidden='true'></i></h5>
<button type="button" class ='btn_design' class="btn btn-default">Absolute Value</button>
<button type="button" class ='btn_design' class="btn btn-default">Relative Value</button>
<button type='button' class ='btn_design' class='btn btn-default'>Absolute Value</button>
<button type='button' class ='btn_design' class='btn btn-default'>Relative Value</button>
</div>
</div>
</div>
</div>
</div>
<!--Export Settings-->
<div class="col-md-2">
<h5>
Export Settings
</h5>
<button type="button" class= 'btn_design' class="btn btn-default" id="exportData">
<div class='col-md-2'>
<h5>Export Settings</h5>
<button type='button' class= 'btn_design' class='btn btn-default' id='exportData'>
Export Data
</button>
</div>
<!--Notebook-->
<div class="col-md-2">
<h5>
Notebook
</h5>
<button type="button" class= 'btn_design' class="btn btn-default">
<div class='col-md-2'>
<h5>Notebook</h5>
<button type='button' class= 'btn_design' class='btn btn-default'>
Notebook
</button>
</div>
</div>
</div>
`);

}

/**
* Attach the event listeners
*/
private attachListener() {
//this.createButtonBar();
this.$node.select('#clearAllFilters').on('click', (d) => {
events.fire(AppConstants.EVENT_CLEAR_FILTERS, d, null);
});
}

/* private createButtonBar () {
const buttonBar = this.$node.select('.button_bar');
}*/

}

/**
Expand Down
Loading

0 comments on commit 0ec96dd

Please sign in to comment.