Skip to content

C
c3-closed
Commit 14b11c11 authored by Evgeny's avatar Evgeny
Browse files
Options

Fix padding for axis when turning

parent ad38e566
Hide whitespace changes
Inline Side-by-side
Showing with 55 additions and 25 deletions
c3.js
View file @ 14b11c11
...@@ -2818,7 +2818,7 @@ ...@@ -2818,7 +2818,7 @@
if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) { if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) {
h = $$.getMaxTickWidth(axisId) * Math.sin(Math.PI * Math.abs(config.axis_x_tick_rotate) / 180); h = $$.getMaxTickWidth(axisId) * Math.sin(Math.PI * Math.abs(config.axis_x_tick_rotate) / 180);
} }
return h + ($$.getAxisLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0); return h + ($$.getAxisLabelPositionById(axisId).isInner ? 5 : 10) + (axisId === 'y2' ? -10 : 0);
}; };
c3_chart_internal_fn.getEventRectWidth = function () { c3_chart_internal_fn.getEventRectWidth = function () {
...@@ -8244,6 +8244,23 @@ ...@@ -8244,6 +8244,23 @@
var start = domain[0], stop = domain[domain.length - 1]; var start = domain[0], stop = domain[domain.length - 1];
return start < stop ? [ start, stop ] : [ stop, start ]; return start < stop ? [ start, stop ] : [ stop, start ];
} }
function shorten(text){
// Excel shortens ticks the way so they don't take more than half of all chart
var padding = 20;
var maxWidth = $$.getCurrentWidth()/2 - padding;
var maxTicks = maxWidth / 11.5;
if(text.length <= maxTicks){
return text;
} else {
return text.slice(0, maxTicks-3) + '...';
}
}
function shouldDrawTickText(id){ function shouldDrawTickText(id){
var heightLimits = [ var heightLimits = [
// Left is width, right is n // Left is width, right is n
...@@ -8393,6 +8410,10 @@ ...@@ -8393,6 +8410,10 @@
return tickText; return tickText;
} }
tickText = tickText.toString();
tickText = shorten(tickText);
return [tickText]; return [tickText];
} }
...@@ -8431,21 +8452,15 @@ ...@@ -8431,21 +8452,15 @@
var fontSize = parseFloat(getStyleValue($$, '.c3-axis-y .tick', 'font-size')); var fontSize = parseFloat(getStyleValue($$, '.c3-axis-y .tick', 'font-size'));
var _first = true;
tspan.text(function (d) { tspan.text(function (d) {
if (d.splitted.length) { if (d.splitted.length) {
if(_first) { var axisId = $$.isXAxis(orient) ? 'x' : 'y';
var axisId = $$.isXAxis(orient) ? 'x' : 'y';
$$.config.maxTickTextWidth[axisId] = Math.max(
$$.config.maxTickTextWidth[axisId] || 0,
d.splitted.length * fontSize / $$.config.text_h_to_w * Math.cos($$.config.axis_x_tick_rotate)
);
_first = false; $$.config.maxTickTextWidth[axisId] = Math.max(
} $$.config.maxTickTextWidth[axisId] || 0,
d.splitted.length * fontSize / $$.config.text_h_to_w * Math.cos($$.config.axis_x_tick_rotate)
);
} }
return d.splitted; return d.splitted;
}); });
......
c3.min.js
View file @ 14b11c11
This source diff could not be displayed because it is too large. You can view the blob instead.
spec/api.grid-spec.js
View file @ 14b11c11
...@@ -41,7 +41,7 @@ describe('c3 api grid', function () { ...@@ -41,7 +41,7 @@ describe('c3 api grid', function () {
grids.each(function (d, i) { grids.each(function (d, i) {
var y = +d3.select(this).select('line').attr('y1'), var y = +d3.select(this).select('line').attr('y1'),
text = d3.select(this).select('text').text(), text = d3.select(this).select('text').text(),
expectedY = Math.round(chart.internal.y(expectedGrids[i].value)), expectedY = Math.ceil(chart.internal.y(expectedGrids[i].value)),
expectedText = expectedGrids[i].text; expectedText = expectedGrids[i].text;
expect(y).toBe(expectedY); expect(y).toBe(expectedY);
expect(text).toBe(expectedText); expect(text).toBe(expectedText);
......
src/c3.axis.js
View file @ 14b11c11
...@@ -34,6 +34,23 @@ function c3_axis(d3, params, $$) { ...@@ -34,6 +34,23 @@ function c3_axis(d3, params, $$) {
var start = domain[0], stop = domain[domain.length - 1]; var start = domain[0], stop = domain[domain.length - 1];
return start < stop ? [ start, stop ] : [ stop, start ]; return start < stop ? [ start, stop ] : [ stop, start ];
} }
function shorten(text){
// Excel shortens ticks the way so they don't take more than half of all chart
var padding = 20;
var maxWidth = $$.getCurrentWidth()/2 - padding;
var maxTicks = maxWidth / 11.5;
if(text.length <= maxTicks){
return text;
} else {
return text.slice(0, maxTicks-3) + '...';
}
}
function shouldDrawTickText(id){ function shouldDrawTickText(id){
var heightLimits = [ var heightLimits = [
// Left is width, right is n // Left is width, right is n
...@@ -183,6 +200,10 @@ function c3_axis(d3, params, $$) { ...@@ -183,6 +200,10 @@ function c3_axis(d3, params, $$) {
return tickText; return tickText;
} }
tickText = tickText.toString();
tickText = shorten(tickText);
return [tickText]; return [tickText];
} }
...@@ -221,21 +242,15 @@ function c3_axis(d3, params, $$) { ...@@ -221,21 +242,15 @@ function c3_axis(d3, params, $$) {
var fontSize = parseFloat(getStyleValue($$, '.c3-axis-y .tick', 'font-size')); var fontSize = parseFloat(getStyleValue($$, '.c3-axis-y .tick', 'font-size'));
var _first = true;
tspan.text(function (d) { tspan.text(function (d) {
if (d.splitted.length) { if (d.splitted.length) {
if(_first) { var axisId = $$.isXAxis(orient) ? 'x' : 'y';
var axisId = $$.isXAxis(orient) ? 'x' : 'y';
$$.config.maxTickTextWidth[axisId] = Math.max(
$$.config.maxTickTextWidth[axisId] || 0,
d.splitted.length * fontSize / $$.config.text_h_to_w * Math.cos($$.config.axis_x_tick_rotate)
);
_first = false; $$.config.maxTickTextWidth[axisId] = Math.max(
} $$.config.maxTickTextWidth[axisId] || 0,
d.splitted.length * fontSize / $$.config.text_h_to_w * Math.cos($$.config.axis_x_tick_rotate)
);
} }
return d.splitted; return d.splitted;
}); });
......
src/size.js
View file @ 14b11c11
...@@ -88,7 +88,7 @@ c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) { ...@@ -88,7 +88,7 @@ c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) { if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) {
h = $$.getMaxTickWidth(axisId) * Math.sin(Math.PI * Math.abs(config.axis_x_tick_rotate) / 180); h = $$.getMaxTickWidth(axisId) * Math.sin(Math.PI * Math.abs(config.axis_x_tick_rotate) / 180);
} }
return h + ($$.getAxisLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0); return h + ($$.getAxisLabelPositionById(axisId).isInner ? 5 : 10) + (axisId === 'y2' ? -10 : 0);
}; };
c3_chart_internal_fn.getEventRectWidth = function () { c3_chart_internal_fn.getEventRectWidth = function () {
......
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