Skip to content

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

Add API for rotating axis ticks. Improve text width calculation for rotated ticks

parent 693ce60e
Hide whitespace changes
Inline Side-by-side
Showing with 70 additions and 74 deletions
c3.js
View file @ cf3fdf7e
......@@ -1329,10 +1329,12 @@
tick_text_padding: 0,
// change this when you change font-family!
text_h_to_w: 1.76,
// used when size is not available yet
default_tick_width: 30,
// caching
shouldCache: true
shouldCache: true,
maxTickTextWidth: {
default: 30
}
};
Object.keys(this.additionalConfig).forEach(function (key) {
......@@ -2814,7 +2816,7 @@
if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; }
// Calculate x axis height when tick rotated
if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) {
h = $$.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - 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);
};
......@@ -4923,8 +4925,8 @@
.attr('dx', this.xForRotatedTickText(rotate));
};
c3_chart_internal_fn.getMaxTickWidth = function () {
return (this.config.maxTickTextWidth || this.config.default_tick_width) +
c3_chart_internal_fn.getMaxTickWidth = function (id) {
return (this.config.maxTickTextWidth[id] || this.config.maxTickTextWidth.default) +
(this.config.tick_text_padding || 0);
};
......@@ -8027,6 +8029,20 @@
$$.redraw();
};
c3_chart_fn.axis.rotateTicks = function(axisId, degrees){
var $$ = this.internal, config = $$.config;
if(axisId === 'x'){
config.axis_x_tick_rotate = degrees;
} else if(axisId === 'y'){
config.axis_y_tick_rotate = degrees;
} else {
throw new Error("Can't rotate ticks for axis " + axisId);
}
this.flush();
};
c3_chart_fn.legend = function () {};
c3_chart_fn.legend.show = function (targetIds) {
var $$ = this.internal;
......@@ -8389,31 +8405,6 @@
text = tick.select("text");
if(typeof turn_axis_ticks !== 'undefined' || typeof turn_axis_ticks_90 !== 'undefined'){
if($$.isXAxis(orient) && params.isCategory){
if(typeof turn_axis_ticks !== 'undefined'){
text.attr('transform', function(d, i){
var tickText = splitTickText(d)[0];
var offset = 7;
var tickSize = getSizeFor1Char(tickText).w * tickText.length;
return 'rotate(-45) translate(' + (-tickSize / 2 - offset) + ', ' + (-tickOffset / Math.sqrt(2) / 2) + ')';
});
} else {
text.attr('transform', function(d){
var tickText = splitTickText(d)[0];
var offset = 10;
var tickSize = getSizeFor1Char(tickText).w * tickText.length;
var charHeight = getSizeFor1Char(tickText).h;
return 'rotate(-90) translate(' + (-tickSize/2 - offset) + ', ' + (-charHeight) + ')';
});
}
}
}
text.style('display', function(d, i){
return shouldDrawTickText(i - indexOfZero) ? 'block' : 'none';
});
......@@ -8431,14 +8422,21 @@
var fontSize = parseFloat(getStyleValue($$, '.c3-axis-y .tick', 'font-size'));
var _first = true;
tspan.text(function (d) {
if (d.splitted.length) {
// FIXME this should know when
// ticks are rotated
$$.config.maxTickTextWidth = Math.max(
$$.config.maxTickTextWidth || 0,
d.splitted.length * fontSize / $$.config.text_h_to_w
);
if(_first) {
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;
}
}
return d.splitted;
});
......
c3.min.js
View file @ cf3fdf7e
This source diff could not be displayed because it is too large. You can view the blob instead.
src/api.axis.js
View file @ cf3fdf7e
......@@ -119,3 +119,17 @@ c3_chart_fn.axisY2 = function(value){
$$.redraw();
};
c3_chart_fn.axis.rotateTicks = function(axisId, degrees){
var $$ = this.internal, config = $$.config;
if(axisId === 'x'){
config.axis_x_tick_rotate = degrees;
} else if(axisId === 'y'){
config.axis_y_tick_rotate = degrees;
} else {
throw new Error("Can't rotate ticks for axis " + axisId);
}
this.flush();
};
src/axis.js
View file @ cf3fdf7e
......@@ -303,8 +303,8 @@ c3_chart_internal_fn.rotateTickText = function (axis, transition, rotate) {
.attr('dx', this.xForRotatedTickText(rotate));
};
c3_chart_internal_fn.getMaxTickWidth = function () {
return (this.config.maxTickTextWidth || this.config.default_tick_width) +
c3_chart_internal_fn.getMaxTickWidth = function (id) {
return (this.config.maxTickTextWidth[id] || this.config.maxTickTextWidth.default) +
(this.config.tick_text_padding || 0);
};
......
src/c3.axis.js
View file @ cf3fdf7e
......@@ -204,31 +204,6 @@ function c3_axis(d3, params, $$) {
text = tick.select("text");
if(typeof turn_axis_ticks !== 'undefined' || typeof turn_axis_ticks_90 !== 'undefined'){
if($$.isXAxis(orient) && params.isCategory){
if(typeof turn_axis_ticks !== 'undefined'){
text.attr('transform', function(d, i){
var tickText = splitTickText(d)[0];
var offset = 7;
var tickSize = getSizeFor1Char(tickText).w * tickText.length;
return 'rotate(-45) translate(' + (-tickSize / 2 - offset) + ', ' + (-tickOffset / Math.sqrt(2) / 2) + ')';
});
} else {
text.attr('transform', function(d){
var tickText = splitTickText(d)[0];
var offset = 10;
var tickSize = getSizeFor1Char(tickText).w * tickText.length;
var charHeight = getSizeFor1Char(tickText).h;
return 'rotate(-90) translate(' + (-tickSize/2 - offset) + ', ' + (-charHeight) + ')';
});
}
}
}
text.style('display', function(d, i){
return shouldDrawTickText(i - indexOfZero) ? 'block' : 'none';
});
......@@ -246,14 +221,21 @@ function c3_axis(d3, params, $$) {
var fontSize = parseFloat(getStyleValue($$, '.c3-axis-y .tick', 'font-size'));
var _first = true;
tspan.text(function (d) {
if (d.splitted.length) {
// FIXME this should know when
// ticks are rotated
$$.config.maxTickTextWidth = Math.max(
$$.config.maxTickTextWidth || 0,
d.splitted.length * fontSize / $$.config.text_h_to_w
);
if(_first) {
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;
}
}
return d.splitted;
});
......
src/config.js
View file @ cf3fdf7e
......@@ -211,10 +211,12 @@ c3_chart_internal_fn.getDefaultConfig = function () {
tick_text_padding: 0,
// change this when you change font-family!
text_h_to_w: 1.76,
// used when size is not available yet
default_tick_width: 30,
// caching
shouldCache: true
shouldCache: true,
maxTickTextWidth: {
default: 30
}
};
Object.keys(this.additionalConfig).forEach(function (key) {
......
src/size.js
View file @ cf3fdf7e
......@@ -86,7 +86,7 @@ c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; }
// Calculate x axis height when tick rotated
if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) {
h = $$.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - 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);
};
......
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