Skip to content

Commit

Permalink
flesh out functionality of charts for dataset page as per #209 with m…
Browse files Browse the repository at this point in the history 
…inor styling
  • Loading branch information
@joshc0044
joshc0044 committed Jul 12, 2019
1 parent 061a2e2 commit c9589d3
Show file tree
Hide file tree
Showing 4 changed files with 172 additions and 214 deletions.
70 changes: 45 additions & 25 deletions lab/webapp/src/components/Dataset/components/BarChart/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,12 @@ class BarChart extends Component {
this.createBarGraph();
}

componentDidUpdate(prevProps, prevState) {
//this.createBarGraph();
}

// adapted from https://bl.ocks.org/d3noob/bdf28027e0ce70bd132edc64f1dd7ea4
createBarGraph(){
const { dataPreview, valByRowObj, tempKey } = this.props;
let margin = { top: 10, right: 30, bottom: 50, left: 70 },
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
let margin = { top: 10, right: 30, bottom: 20, left: 40 },
width = 400 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;

let chartInnerHTML = "";
//let valByRowObj = this.getDataValByRow();
Expand Down Expand Up @@ -55,9 +51,8 @@ class BarChart extends Component {

let svg = d3.select("#test_bar_chart_" + tempKey)
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("background-color", "blue")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
Expand All @@ -68,23 +63,20 @@ class BarChart extends Component {
.domain(testSet)
.padding(0.2);

svg.append('g')
.attr('transform', `translate(0, ${height})`)
.call(d3.axisBottom(xStuff));

// y - axis
let yStuff = d3.scaleLinear()
.domain([0, d3.max(tempData, (d) => d.entry.testValue)])
.range([height, 0]);

svg.append('g')
.style("color", "white")
.call(d3.axisLeft(yStuff));

svg.selectAll("rect")
.data(tempData).enter()
.append("rect").merge(svg)
.style("stroke", "gray")
.style("fill", "black")
.style("fill", "rgb(125, 91, 166)")
.attr("x", (d, t, s, a) => {
//window.console.log('x stuff', d);
return xStuff(d.entry.testKey);
Expand All @@ -98,21 +90,49 @@ class BarChart extends Component {
return height - yStuff(d.entry.testValue);
})
.attr('width', xStuff.bandwidth())
.on("mouseover", function(){d3.select(this).style("fill", "red");})
.on("mouseout", function(){d3.select(this).style("fill", "black");});
.on("mouseover", () => { tooltip.style("display", null); }) // tooltip functions
.on("mouseout", function() {
window.setTimeout(() => tooltip.style("display", "none"), 3500);
})
.on("mousemove", function(d) {
let xPosition = d3.mouse(this)[0] - 15;
let yPosition = d3.mouse(this)[1] - 25; //+ stackedY(d[1] - d[0])
tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
tooltip.select("text").text(d.entry.testValue);
//window.setTimeout(() => tooltip.style("display", "none"), 2500);
});


// append x axis after making bars so axis line is above bars
svg.append('g')
.attr('transform', `translate(0, ${height})`)
.style("color", "white")
.call(d3.axisBottom(xStuff));

// tooltip element
let tooltip = svg.append("g")
.attr("class", "tooltip")
.style("display", "none");

tooltip.append("rect")
.attr("width", 30)
.attr("height", 20)
.attr("fill", "white")
.style("opacity", 0.5);

tooltip.append("text")
.attr("x", 15)
.attr("dy", "1.2em")
.style("text-anchor", "middle")
.attr("font-size", "12px")
.attr("font-weight", "bold");
}
}

render() {
const { dataPreview, valByRowObj, tempKey } = this.props;
const { tempKey } = this.props;
return (
<div>
<Header>
Bar_Chart
</Header>
<div id={"test_bar_chart_" + tempKey}>
</div>
</div>
<div id={"test_bar_chart_" + tempKey} />
);
}
}
Expand Down
66 changes: 37 additions & 29 deletions lab/webapp/src/components/Dataset/components/BarCharts/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { connect } from 'react-redux';
import { Header } from 'semantic-ui-react';
import * as d3 from "d3";

class BarChart extends Component {
class BarCharts extends Component {
constructor(props) {
super(props);
this.state = {
Expand Down Expand Up @@ -42,13 +42,27 @@ class BarChart extends Component {
data_sorted.forEach(val => {
classTotalCountObj[val] = classTotalCountObj[val] ? ++classTotalCountObj[val] : 1;
});
let colorList = ['#e41a1c','#377eb8'];

let columnValueObj = {}; // key: unique value in dataset given colKey, val: list of all depCol values for given colKey
let proportionObj = {}; // key: unique value in dataset given colKey, val: # of values per unique value in depCol
let proportionObjList = [];
// find unique values for the given column key as well as dependent column
let givenColSet = [... new Set(valByRowObj[colKey])];
let depColSet = [... new Set(valByRowObj[depCol])]
let depColSet = [... new Set(valByRowObj[depCol])].sort();

/**---- *************** ----**** ---- Color stuff here ----****---- *************** ----**/
let colorList = ['#55d6be','#7c5ba5'];
// for every entry in depColSet, map keys to color
//let colorObj = [{0:'#e41a1c'}, {1:'#377eb8'}];
let colorObjList = [];
depColSet.forEach((depVal, i) => {
i % 2 === 0
? colorObjList.push({[depVal]: colorList[0]})
: colorObjList.push({[depVal]: colorList[1]});
})
//window.console.log('colorobjlist', colorObjList);
/**---- *************** ----****---- *************** ----****---- *************** ----**/

// count proportion of given column name/key with dataset dependent_col

// for every unique value of given colKey in dataset, collect all matches
Expand Down Expand Up @@ -95,8 +109,8 @@ class BarChart extends Component {
.order(d3.stackOrderNone)
.offset(d3.stackOffsetNone);
let stackThing = stack(proportionObjList);

window.console.log('real data stack', stackThing);
let stackColorThing = stack(colorObjList);
//window.console.log('real data stack', stackThing);

// x - axis
let xStuff = d3.scaleBand()
Expand All @@ -108,32 +122,32 @@ class BarChart extends Component {
.domain(depColSet)
.range(colorList);

/* -------------------------------------this one works-------------------*/
// stacked stuff
// stacked stuff - svg elem using stacked data
let stackedSvg = d3.select("#stacked_bar_charts_" + colKey)
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("background-color", "pink")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

stackedSvg.append('g')
.attr('transform', `translate(0, ${height})`)
.style("color", "white")
.call(d3.axisBottom(xStuff));

// y-axis
let stackedY = d3.scaleLinear()
.domain([0, d3.max(stackThing, (d) => {
//window.console.log('y stacked thing 1', d);
return d3.max(d, (d) => {
//window.console.log('y stacked thing 2', d);
//return d[0] + d[1];
return d[1];
});
})])
.range([height, 0]);

stackedSvg.append('g')
.style("color", "white")
.call(d3.axisLeft(stackedY));

let groups = stackedSvg.selectAll("g.stack")
Expand All @@ -156,20 +170,16 @@ class BarChart extends Component {
return xStuff(d.data[colKey]);
})
.attr("y", (d, t, s) => {
//window.console.log('y stuff', d);
// window.console.log('y stuff 1', yStuff(d.entry.proportion[1][1]));
return stackedY(d[1]);
})
.attr('height', (d) => {
//window.console.log('height stuff', stackedY(d[0]) - stackedY(d[0] + d[1]));
let y0 = stackedY(d[0]);
let y1 = stackedY(d[1]);

//window.console.log('height stuff', y0 - y1);
return y0 - y1;
})
.attr('width', xStuff.bandwidth())
.on("mouseover", function() { tooltip.style("display", null); })
.on("mouseover", () => { tooltip.style("display", null); }) // tooltip - hover over bars and display value
.on("mouseout", function() {
window.setTimeout(() => tooltip.style("display", "none"), 3500);
})
Expand All @@ -178,15 +188,13 @@ class BarChart extends Component {
let yPosition = d3.mouse(this)[1] - 25; //+ stackedY(d[1] - d[0])
tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
tooltip.select("text").text(d[1] - d[0]);
//window.setTimeout(() => tooltip.style("display", "none"), 2500);
});

// legend
let legend = stackedSvg.selectAll(".legend")
.data(colorList)
.data(stackColorThing)
.enter().append("g")
.attr("transform", function(d, i) {
window.console.log('legend transform');
return "translate(20,"+ (i * 19) + ")";
});

Expand All @@ -195,19 +203,24 @@ class BarChart extends Component {
.attr("y", height)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d, i) {return colorList.slice().reverse()[i];});
.style("fill", function(d, i) {
//window.console.log('legend color stuff', d);
let color = d[d.index];
return color.data[d.key];
});

legend.append("text")
.attr("x", -margin.left + 5)
.attr("y", height + 9)
.attr("dy", ".35em")
.style("text-anchor", "start")
.style("fill", "white")
.text(function(d, i) {
window.console.log('legend stuff');
return depColSet[i];
//window.console.log('legend text stuff');
return d.key;
});

// tooltip
// tooltip elem to display on mouseover
let tooltip = stackedSvg.append("g")
.attr("class", "tooltip")
.style("display", "none");
Expand All @@ -230,12 +243,7 @@ class BarChart extends Component {
render() {
const { dataPreview, valByRowObj, colKey } = this.props;
return (
<div>
<div id={"test_bar_charts_" + colKey}>
</div>
<div id={"stacked_bar_charts_" + colKey}>
</div>
</div>
<div id={"stacked_bar_charts_" + colKey} />
);
}
}
Expand All @@ -244,5 +252,5 @@ const mapStateToProps = (state) => ({

});

export { BarChart };
export default connect(mapStateToProps, {})(BarChart);
export { BarCharts };
export default connect(mapStateToProps, {})(BarCharts);
Loading

0 comments on commit c9589d3

Please sign in to comment.