Fix issues with pie-of-pie and bar-of-pie in node.js

Line drawing code relies on getClientBoundingRect() method to compute coords and sizes of chart objects. Node uses jsdom for browser emulation, which implements this method as a placeholder which returns object with zero fields. To achieve proper coords calculation, values are saved during object generation and then they are reused for line drawing.
parent 11a088f7
...@@ -304,7 +304,7 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf ...@@ -304,7 +304,7 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
main.select('.' + CLASS.chartArcsTitle) main.select('.' + CLASS.chartArcsTitle)
.style("opacity", $$.hasType('donut') || $$.hasType('gauge') ? 1 : 0); .style("opacity", $$.hasType('donut') || $$.hasType('gauge') ? 1 : 0);
if(!isNode() && ($$.config.hasSubs || $$.config.isSub)){ if(($$.config.hasSubs || $$.config.isSub)){
$$.buffer.onlastfinish("draw-lines"+$$.config.isSub, function(){ $$.buffer.onlastfinish("draw-lines"+$$.config.isSub, function(){
$$.buffer.onlastfinish("draw-lines"+$$.config.isSub, function(){ $$.buffer.onlastfinish("draw-lines"+$$.config.isSub, function(){
$$.ed3Internal.redrawLinesOnBoth(); $$.ed3Internal.redrawLinesOnBoth();
......
...@@ -814,7 +814,18 @@ c3_chart_internal_fn.transformMain = function (withTransition, transitions) { ...@@ -814,7 +814,18 @@ c3_chart_internal_fn.transformMain = function (withTransition, transitions) {
xAxis.attr("transform", $$.getTranslate('x')); xAxis.attr("transform", $$.getTranslate('x'));
yAxis.attr("transform", $$.getTranslate('y')); yAxis.attr("transform", $$.getTranslate('y'));
y2Axis.attr("transform", $$.getTranslate('y2')); y2Axis.attr("transform", $$.getTranslate('y2'));
$$.main.select('.' + CLASS.chartArcs).attr("transform", $$.getTranslate('arc'));
var translation = $$.getTranslate('arc');
$$.main.select('.' + CLASS.chartArcs).attr("transform", translation);
// Save translation for future use in node.js
if(isNode()){
if($$.config.subType === "sub-pie"){
$$.config.sub_pie_position = translation.replace('translate(', '').replace(')', '').split(',').map(parseFloat);
} else if($$.config.subType === "sub-bar"){
$$.config.sub_bar_position = translation.replace('translate(', '').replace(')', '').split(',').map(parseFloat);
}
}
}; };
c3_chart_internal_fn.transformAll = function (withTransition, transitions) { c3_chart_internal_fn.transformAll = function (withTransition, transitions) {
var $$ = this; var $$ = this;
......
...@@ -34,6 +34,16 @@ c3.chart.internal.fn.getLineCoordsForBar = function(center, order){ ...@@ -34,6 +34,16 @@ c3.chart.internal.fn.getLineCoordsForBar = function(center, order){
if($$.config.isSub){ if($$.config.isSub){
$$.ed3Config.subBox = $$.getBox($$.main.selectAll(".sub-chart .c3-chart-bars")); $$.ed3Config.subBox = $$.getBox($$.main.selectAll(".sub-chart .c3-chart-bars"));
// Node can't compute bounding box and subBox will have all params set to 0
// Here we use previously saved coords in $$.config.bar_coords to fill subBox
if(isNode()){
if(!$$.config.bar_coords.bottom) return;
var position = $$.config.bar_coords.top;
$$.ed3Config.subBox.x = position[0];
$$.ed3Config.subBox.y = position[1];
$$.ed3Config.subBox.height = $$.config.bar_coords.bottom[1] - position[1];
}
if(isUndefined($$.ed3Config.coords[order])) return; if(isUndefined($$.ed3Config.coords[order])) return;
...@@ -85,15 +95,17 @@ c3.chart.internal.fn.getLineCoordsForBar = function(center, order){ ...@@ -85,15 +95,17 @@ c3.chart.internal.fn.getLineCoordsForBar = function(center, order){
y2: y2 y2: y2
}; };
} }
var sub = ($$.config.isSub ? $$ : $$.ed3Internal.subChart.internal).main;
var offset = parseFloat(sub.attr("transform").replace('translate(', '').replace(')').split(',')[0]);
return { return {
x1: x1, x1: x1 - ($$.config.isSub ? offset : 0),
x2: x2, x2: x2 + ($$.config.isSub ? 0 : offset),
y1: y1, y1: y1,
y2: y2 y2: y2
}; };
}; };
c3.chart.internal.fn.getLineCoordsForPie = function(center, order){ c3.chart.internal.fn.getLineCoordsForPie = function(center, order){
...@@ -198,7 +210,19 @@ c3.chart.internal.fn.redrawLines = function(){ ...@@ -198,7 +210,19 @@ c3.chart.internal.fn.redrawLines = function(){
line = main.selectAll(".lineForSubChart").filter(function(d, i){ return i === 0; }); line = main.selectAll(".lineForSubChart").filter(function(d, i){ return i === 0; });
} }
var center = $$.getCenter(main.selectAll('.c3-chart')); var center;
var pieSize = $$.radius;
var position = ($$.config.subType === 'sub-pie') ? $$.config.sub_pie_position : $$.config.sub_bar_position;
// Use previously saved coords in node instead of browser api for bounding box
if(isNode() && $$.config.subType.indexOf('sub') !== -1){
center = {
x: position[0],
y: position[1]
}
} else {
center = $$.getCenter(main.selectAll('.c3-chart'));
}
var coords; var coords;
...@@ -219,7 +243,15 @@ c3.chart.internal.fn.redrawLines = function(){ ...@@ -219,7 +243,15 @@ c3.chart.internal.fn.redrawLines = function(){
line = main.selectAll(".lineForSubChart").filter(function(d, i){ return i === 1; }); line = main.selectAll(".lineForSubChart").filter(function(d, i){ return i === 1; });
} }
center = $$.getCenter(main.selectAll('.c3-chart')); // The same as 30 lines above
if(isNode() && $$.config.subType.indexOf('sub') !== -1){
center = {
x: position[0],
y: position[1]
}
} else {
center = $$.getCenter(main.selectAll('.c3-chart'));
}
if($$.config.subType === "sub-pie"){ if($$.config.subType === "sub-pie"){
coords = $$.getLineCoordsForPie(center, 1); coords = $$.getLineCoordsForPie(center, 1);
......
...@@ -72,6 +72,16 @@ c3_chart_internal_fn.generateDrawBar = function (barIndices, isSub) { ...@@ -72,6 +72,16 @@ c3_chart_internal_fn.generateDrawBar = function (barIndices, isSub) {
return function (d, i) { return function (d, i) {
// 4 points that make a bar // 4 points that make a bar
var points = getPoints(d, i); var points = getPoints(d, i);
// save computed values because node can't get size of DOM object
if(isNode()){
if(i === 0 && !$$.config.bar_coords) {
$$.config.bar_coords = {};
$$.config.bar_coords.bottom = points[0];
} else {
$$.config.bar_coords.top = points[1];
}
}
// switch points if axis is rotated, not applicable for sub chart // switch points if axis is rotated, not applicable for sub chart
var indexX = config.axis_rotated ? 1 : 0; var indexX = config.axis_rotated ? 1 : 0;
......
...@@ -52,12 +52,20 @@ c3_chart_internal_fn.getTextRect = function (text, cls) { ...@@ -52,12 +52,20 @@ c3_chart_internal_fn.getTextRect = function (text, cls) {
svg = body.append("svg").style('visibility', 'hidden'), rect; svg = body.append("svg").style('visibility', 'hidden'), rect;
svg.selectAll('.dummy') svg.selectAll('.dummy')
.data([text]) .data([text])
.enter().append('text') .enter().append('text')
.classed(cls ? cls : "", true) .classed(cls ? cls : "", true)
.text(text) .text(text)
.each(function () { rect = this.getBoundingClientRect(); }); .each(function () { rect = this.getBoundingClientRect(); });
svg.remove(); svg.remove();
body.classed('c3', false); body.classed('c3', false);
// jsdom can't compute real size of text element
// getBoundingClientRect() returns zero-sized rect in jsdom
// This is a hack to estimate size depending on text length and average glyph size
if(isNode()){
// 4 is average glyph size. Warning! This may break on font change.
// 8 is size of square near the text.
rect.width = text.length * 4 - 8;
}
return rect; return rect;
}; };
c3_chart_internal_fn.generateXYForText = function (areaIndices, barIndices, lineIndices, forX) { c3_chart_internal_fn.generateXYForText = function (areaIndices, barIndices, lineIndices, forX) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment