Dimension pull out

This commit is contained in:
Dennis Eichhorn 2017-01-08 13:10:58 +01:00
parent 6fe8c278df
commit 66e876b9b8
8 changed files with 33 additions and 100 deletions

View File

@ -29,14 +29,9 @@
{
let percent = d3.format(".1%"),
format = d3.time.format("%Y-%m-%d"),
box = this.chart.chartSelect.node().getBoundingClientRect(),
svg, self = this;
this.chart.dimension = {
width: box.width,
height: box.height
};
this.chart.calculateDimension();
this.chart.cellSize = Math.min(this.chart.dimension.width / (12*5), this.chart.dimension.height / (8));
document.getElementById(this.chart.chartId).style.height = (this.chart.dimension.height * this.chart.dataset.length) + 'px';

View File

@ -74,54 +74,15 @@
height: box.height
};
x = d3.scale.linear().range([
0,
this.chart.dimension.width
- this.chart.margin.right
- this.chart.margin.left
]);
x = this.chart.createXScale('linear');
y = this.chart.createYScale('linear');
xAxis1 = this.chart.createXAxis(x);
yAxis1 = this.chart.createYAxis(y);
xGrid = this.chart.createXGrid(x);
yGrid = this.chart.createYGrid(y);
y = d3.scale.linear().range([
this.chart.dimension.height
- this.chart.margin.top
- this.chart.margin.bottom,
10
]);
xAxis1 = d3.svg.axis().scale(x).tickFormat(function (d)
{
return self.chart.axis.x.tick.prefix + d;
}).orient("bottom").outerTickSize(this.chart.axis.x.tick.size)
.innerTickSize(this.chart.axis.x.tick.size).tickPadding(7);
yAxis1 = d3.svg.axis().scale(y).tickFormat(function (d)
{
return self.chart.axis.y.tick.prefix + d;
}).orient("left").outerTickSize(this.chart.axis.y.tick.size)
.innerTickSize(this.chart.axis.y.tick.size).tickPadding(7);
xGrid = d3.svg.axis()
.scale(x)
.orient("bottom")
//.ticks(0)
.tickSize(
-(this.chart.dimension.height
- this.chart.margin.top - 10
- this.chart.margin.bottom), 0, 0)
.tickFormat("");
yGrid = d3.svg.axis()
.scale(y)
.orient("left")
//.ticks(0)
.tickSize(
-this.chart.dimension.width
+ this.chart.margin.right
+ this.chart.margin.left, 0, 0)
.tickFormat("");
x.domain(this.chart.dataset[0].points.map(function(d) { return d.name; }));
y.domain([0, d3.max(this.chart.dataset[0].points, function(d) { return d.y*1.05; })]);
x.domain([this.chart.axis.x.min, this.chart.axis.x.max + 1]);
y.domain([this.chart.axis.y.min - 1, this.chart.axis.y.max + 1]);
svg = this.chart.chartSelect.append("svg")
.attr("width", this.chart.dimension.width)
@ -165,24 +126,6 @@
.attr("class", function(d) { return "dataPoint " + (d.y < d.y0 ? 'negative' : 'positive'); })
.attr("transform", function(d) { return "translate(" + x(d.name) + ",0)"; });
dataPointEnter.append("rect")
.attr("y", function(d) { return y( Math.max(d.y0, d.y) ); })
.attr("height", function(d) { return Math.abs( y(d.y0) - y(d.y) ); })
.attr("width", x.rangeBand());
dataPointEnter.append("text")
.attr("x", x.rangeBand() / 2)
.attr("y", function(d) { return y(d.y) + 5; })
.attr("dy", function(d) { return ((d.y < d.y0) ? '-' : '') + ".75em" })
.text(function(d) { return d.y - d.y0; });
dataPointEnter.filter(function(d) { return d.class != "total" }).append("line")
.attr("class", "connector")
.attr("x1", x.rangeBand() + 5 )
.attr("y1", function(d) { return y(d.y) } )
.attr("x2", x.rangeBand() / ( 1 - 5) - 5 )
.attr("y2", function(d) { return y(d.y) } );
return [dataPointEnter, dataPoint];
};
}(window.jsOMS = window.jsOMS || {}));

View File

@ -546,7 +546,7 @@
return self.axis.x.tick.prefix + d;
}).orient("bottom").outerTickSize(self.axis.x.tick.size)
.innerTickSize(self.axis.x.tick.size).tickPadding(7);
}
};
jsOMS.Chart.ChartAbstract.prototype.createYAxis = function (y) {
let self = this;
@ -556,7 +556,7 @@
return self.axis.y.tick.prefix + d;
}).orient("left").outerTickSize(this.axis.y.tick.size)
.innerTickSize(this.axis.y.tick.size).tickPadding(7);
}
};
jsOMS.Chart.ChartAbstract.prototype.createXGrid = function (x) {
return d3.svg.axis()
@ -568,7 +568,7 @@
- this.margin.top - 10
- this.margin.bottom), 0, 0)
.tickFormat("");
}
};
jsOMS.Chart.ChartAbstract.prototype.createYGrid = function (y) {
return d3.svg.axis()
@ -580,7 +580,17 @@
+ this.margin.right
+ this.margin.left, 0, 0)
.tickFormat("");
}
};
jsOMS.Chart.ChartAbstract.prototype.calculateDimension = function ()
{
let box = this.chartSelect.node().getBoundingClientRect()
this.dimension = {
width: box.width,
height: box.height
};
};
jsOMS.Chart.ChartAbstract.prototype.clean = function ()
{

View File

@ -69,7 +69,7 @@
jsOMS.Chart.ColumnChart.prototype.draw = function ()
{
let rect, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this, box = this.chart.chartSelect.node().getBoundingClientRect();
let rect, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this;
if (this.chart.subtype === 'grouped') {
this.chart.axis.y.max = d3.max(this.chart.dataset, function (layer)
@ -89,10 +89,7 @@
});
}
this.chart.dimension = {
width: box.width,
height: box.height
};
this.chart.calculateDimension();
x = this.chart.createXScale('ordinal');
y = this.chart.createYScale('linear');

View File

@ -68,12 +68,9 @@
jsOMS.Chart.LineChart.prototype.draw = function ()
{
let line, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this, box = this.chart.chartSelect.node().getBoundingClientRect();
let line, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this;
this.chart.dimension = {
width: box.width,
height: box.height
};
this.chart.calculateDimension('linear');
x = this.chart.createXScale('linear');
y = this.chart.createYScale('linear');

View File

@ -21,12 +21,9 @@
jsOMS.Chart.PieChart.prototype.draw = function ()
{
let svg, arc, box = this.chart.chartSelect.node().getBoundingClientRect();
let svg, arc;
this.chart.dimension = {
width: box.width,
height: box.height
};
this.chart.calculateDimension();
let radius = (
Math.min(this.chart.dimension.width, this.chart.dimension.height) / 2

View File

@ -67,12 +67,9 @@
jsOMS.Chart.ScatterplotChart.prototype.draw = function ()
{
let bar, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this, box = this.chart.chartSelect.node().getBoundingClientRect();
let bar, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this;
this.chart.dimension = {
width: box.width,
height: box.height
};
this.chart.calculateDimension('linear');
x = this.chart.createXScale('linear');
y = this.chart.createYScale('linear');

View File

@ -79,12 +79,9 @@
jsOMS.Chart.WaterfallChart.prototype.draw = function ()
{
let bar, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this, box = this.chart.chartSelect.node().getBoundingClientRect();
let bar, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this;
this.chart.dimension = {
width: box.width,
height: box.height
};
this.chart.calculateDimension();
x = this.chart.createXScale('ordinal');
y = this.chart.createYScale('linear');