mirror of https://github.com/dirtbags/moth.git
Merge pull request #28 from cgtboy1988/master
Scoreboard Vertical Scaling and Colors Fix
This commit is contained in:
commit
93c0939f3a
|
@ -63,8 +63,7 @@ window.addEventListener("load", init);
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Scoreboard</h1>
|
<h1 id="title">Scoreboard</h1>
|
||||||
<div id="scoreboard"></div>
|
<div id="scoreboard"></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
@ -148,12 +148,16 @@ function scoreboard(element, continuous, mode, interval) {
|
||||||
var graph = document.createElement("svg");
|
var graph = document.createElement("svg");
|
||||||
graph.id = "graph";
|
graph.id = "graph";
|
||||||
graph.style.width="100%";
|
graph.style.width="100%";
|
||||||
graph.style.height="40em";
|
graph.style.height = "100vh";
|
||||||
|
var titleHeight = document.getElementById("title").clientHeight;
|
||||||
|
titleHeight += document.getElementById("title").offsetTop * 2;
|
||||||
graph.style.backgroundColor = "white";
|
graph.style.backgroundColor = "white";
|
||||||
graph.style.display = "table";
|
graph.style.display = "table";
|
||||||
var holdingDiv = document.createElement("div");
|
var holdingDiv = document.createElement("div");
|
||||||
holdingDiv.align="center";
|
holdingDiv.align="center";
|
||||||
holdingDiv.id="holding";
|
holdingDiv.id="holding";
|
||||||
|
holdingDiv.style.height = "100%";
|
||||||
|
element.style.height = "100%";
|
||||||
element.appendChild(holdingDiv);
|
element.appendChild(holdingDiv);
|
||||||
holdingDiv.appendChild(graph);
|
holdingDiv.appendChild(graph);
|
||||||
|
|
||||||
|
@ -162,6 +166,7 @@ function scoreboard(element, continuous, mode, interval) {
|
||||||
|
|
||||||
var width = graph.offsetWidth;
|
var width = graph.offsetWidth;
|
||||||
var height = graph.offsetHeight;
|
var height = graph.offsetHeight;
|
||||||
|
height = height - titleHeight - margins;
|
||||||
|
|
||||||
//var xScale = d3.scaleLinear().range([minTime, maxTime]);
|
//var xScale = d3.scaleLinear().range([minTime, maxTime]);
|
||||||
//var yScale = d3.scaleLinear().range([0, topActualScore]);
|
//var yScale = d3.scaleLinear().range([0, topActualScore]);
|
||||||
|
@ -283,13 +288,13 @@ function scoreboard(element, continuous, mode, interval) {
|
||||||
.text("Time (minutes)");
|
.text("Time (minutes)");
|
||||||
|
|
||||||
var legend = graph.append("g");
|
var legend = graph.append("g");
|
||||||
var legendRowHeight = (height) / 10;
|
var legendRowHeight = (height - margins) / 10;
|
||||||
legend.selectAll("rect")
|
legend.selectAll("rect")
|
||||||
.data(winningTeams)
|
.data(winningTeams)
|
||||||
.enter()
|
.enter()
|
||||||
.append("rect")
|
.append("rect")
|
||||||
.attr("class", function(d){ return "team_" + d; })
|
.attr("class", function(d){ return "team_" + d; })
|
||||||
.attr("fill", function(d, i){ return colorScale[i * 2 + 1]; })
|
.attr("fill", function(d, i){ return colorScale[i * 2]; })
|
||||||
.style("z-index", function(d, i){ return i; })
|
.style("z-index", function(d, i){ return i; })
|
||||||
.attr("x", 0)
|
.attr("x", 0)
|
||||||
.attr("y", function(d, i){ return legendRowHeight * i; })
|
.attr("y", function(d, i){ return legendRowHeight * i; })
|
||||||
|
@ -343,8 +348,8 @@ function scoreboard(element, continuous, mode, interval) {
|
||||||
.style("stroke", colorScale[(maxNumEntry - zIndex) * 2])
|
.style("stroke", colorScale[(maxNumEntry - zIndex) * 2])
|
||||||
.style("fill", colorScale[(maxNumEntry - zIndex) * 2]);
|
.style("fill", colorScale[(maxNumEntry - zIndex) * 2]);
|
||||||
legend.selectAll("." + curClass)
|
legend.selectAll("." + curClass)
|
||||||
.style("stroke", colorScale[(maxNumEntry - zIndex) * 2 + 1])
|
.style("stroke", colorScale[(maxNumEntry - zIndex) * 2])
|
||||||
.style("fill", colorScale[(maxNumEntry - zIndex) * 2 + 1]);
|
.style("fill", colorScale[(maxNumEntry - zIndex) * 2]);
|
||||||
d3.select("body").selectAll("text")
|
d3.select("body").selectAll("text")
|
||||||
.style("stroke-width", 0);
|
.style("stroke-width", 0);
|
||||||
}
|
}
|
||||||
|
@ -388,8 +393,8 @@ function scoreboard(element, continuous, mode, interval) {
|
||||||
.style("stroke", colorScale[(maxNumEntry - zIndex) * 2])
|
.style("stroke", colorScale[(maxNumEntry - zIndex) * 2])
|
||||||
.style("fill", colorScale[(maxNumEntry - zIndex) * 2]);
|
.style("fill", colorScale[(maxNumEntry - zIndex) * 2]);
|
||||||
legend.selectAll("." + curClass)
|
legend.selectAll("." + curClass)
|
||||||
.style("stroke", colorScale[(maxNumEntry - zIndex) * 2 + 1])
|
.style("stroke", colorScale[(maxNumEntry - zIndex) * 2])
|
||||||
.style("fill", colorScale[(maxNumEntry - zIndex) * 2 + 1]);
|
.style("fill", colorScale[(maxNumEntry - zIndex) * 2]);
|
||||||
d3.select("body").selectAll("text")
|
d3.select("body").selectAll("text")
|
||||||
.style("stroke-width", 0);
|
.style("stroke-width", 0);
|
||||||
}
|
}
|
||||||
|
@ -412,8 +417,8 @@ function scoreboard(element, continuous, mode, interval) {
|
||||||
.style("stroke", colorScale[zIndex * 2])
|
.style("stroke", colorScale[zIndex * 2])
|
||||||
.style("fill", colorScale[zIndex * 2]);
|
.style("fill", colorScale[zIndex * 2]);
|
||||||
legend.selectAll("." + curClass)
|
legend.selectAll("." + curClass)
|
||||||
.style("stroke", colorScale[(zIndex) * 2 + 1])
|
.style("stroke", colorScale[(zIndex) * 2])
|
||||||
.style("fill", colorScale[(zIndex) * 2 + 1]);
|
.style("fill", colorScale[(zIndex) * 2]);
|
||||||
d3.select("body").selectAll("text")
|
d3.select("body").selectAll("text")
|
||||||
.style("stroke-width", 0);
|
.style("stroke-width", 0);
|
||||||
}
|
}
|
||||||
|
@ -521,4 +526,3 @@ function scoreboard(element, continuous, mode, interval) {
|
||||||
}
|
}
|
||||||
once();
|
once();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue