Positioning bug fixes

This commit is contained in:
Dennis Eichhorn 2016-05-15 16:58:06 +02:00
parent 9480be94fc
commit 7767dde5c3
2 changed files with 16 additions and 7 deletions

20
Chart/Chart.js vendored
View File

@ -301,14 +301,14 @@
} }
if (this.dataSettings.info.visible && this.dataSettings.marker.visible) { if (this.dataSettings.info.visible && this.dataSettings.marker.visible) {
var div = this.chartSelect.append("div").attr("class", "charttooltip").style("opacity", 0); let div = this.chartSelect.append("div").attr("class", "charttooltip").style("opacity", 0);
div.html(self.axis.x.label.text + ': ' + 100 + "<br/>" + self.axis.y.label.text + ': ' + 100); div.html(self.axis.x.label.text + ': ' + 100 + "<br/>" + self.axis.y.label.text + ': ' + 100);
/* todo: allow also hover on charts without marker... not possible since hover only on marker and not on point? */ /* todo: allow also hover on charts without marker... not possible since hover only on marker and not on point? */
temp.on("mouseover", function (d) temp.on("mouseover", function (d)
{ {
var dim = div.node().getBoundingClientRect(); let dim = div.node().getBoundingClientRect();
var pos = this.getBoundingClientRect(); let pos = this.getBoundingClientRect();
div.transition() div.transition()
.duration(200) .duration(200)
@ -329,7 +329,7 @@
jsOMS.Chart.prototype.drawText = function (svg) jsOMS.Chart.prototype.drawText = function (svg)
{ {
var temp, pos = 0, topmargin = 0; let temp, pos = 0, topmargin = 0;
/* No subtitle without title */ /* No subtitle without title */
if (this.subtitle !== undefined && this.subtitle.visible && this.title !== undefined && this.title.visible) { if (this.subtitle !== undefined && this.subtitle.visible && this.title !== undefined && this.title.visible) {
@ -372,12 +372,21 @@
} }
if (this.footer !== undefined && this.footer.visible) { if (this.footer !== undefined && this.footer.visible) {
let spacer = 0;
// if no x axis available an element less will be drawn and the footer
// will be out of bounds.
// todo: fix this hacky solution!!!
if(typeof this.axis.x === 'undefined') {
spacer = -this.margin.top;
}
pos = this.calculateHorizontalPosition(this.footer.position); pos = this.calculateHorizontalPosition(this.footer.position);
temp = svg.append("text") temp = svg.append("text")
.attr("class", "footer") .attr("class", "footer")
.attr('y', this.dimension.height .attr('y', this.dimension.height
- this.margin.bottom + this.position.footer.top + 10) - this.margin.bottom + spacer + this.position.footer.top)
.attr('x', pos) .attr('x', pos)
.style("text-anchor", this.footer.anchor) .style("text-anchor", this.footer.anchor)
.text(this.footer.text); .text(this.footer.text);
@ -393,7 +402,6 @@
jsOMS.Chart.prototype.drawAxis = function (svg, xAxis1, yAxis1) jsOMS.Chart.prototype.drawAxis = function (svg, xAxis1, yAxis1)
{ {
// draw clipper // draw clipper
let defs = svg.append('svg').attr('width', 0).attr('height', 0).append('defs'), pos = 0, temp; let defs = svg.append('svg').attr('width', 0).attr('height', 0).append('defs'), pos = 0, temp;
defs.append('clipPath').attr('id', 'clipper1').append('rect').attr('x', 0).attr('y', 0) defs.append('clipPath').attr('id', 'clipper1').append('rect').attr('x', 0).attr('y', 0)

View File

@ -48,6 +48,7 @@
dataPointEnter = temp[0]; dataPointEnter = temp[0];
dataPoint = temp[1]; dataPoint = temp[1];
// todo: create own legend drawing
this.chart.drawLegend(svg, dataPointEnter, dataPoint); this.chart.drawLegend(svg, dataPointEnter, dataPoint);
this.chart.drawText(svg); this.chart.drawText(svg);
@ -87,7 +88,7 @@
}).enter().append('path') }).enter().append('path')
.attr("transform", "translate(" .attr("transform", "translate("
+ (this.chart.dimension.width / 2) + "," + (this.chart.dimension.width / 2) + ","
+ (this.chart.dimension.height / 2 - this.chart.margin.bottom) + ")") + (this.chart.dimension.height / 2 - this.chart.margin.bottom - this.chart.margin.top + 10) + ")")
.attr('fill', function (d) .attr('fill', function (d)
{ {
return self.chart.color(d.data.name); return self.chart.color(d.data.name);