Skip to content

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

First version of fitting ticks on x axis

parent 14b11c11
Show whitespace changes
Inline Side-by-side
Showing with 194 additions and 26 deletions
c3.js
View file @ aab38839
......@@ -2816,9 +2816,9 @@
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.sin(Math.PI * Math.abs(config.axis_x_tick_rotate) / 180);
h = $$.getMaxTickWidthAllowed(axisId) * Math.cos(Math.PI * Math.abs(config.axis_x_tick_rotate) / 180);
}
return h + ($$.getAxisLabelPositionById(axisId).isInner ? 5 : 10) + (axisId === 'y2' ? -10 : 0);
return h + ($$.getAxisLabelPositionById(axisId).isInner ? 10 : 15) + (axisId === 'y2' ? -10 : 0);
};
c3_chart_internal_fn.getEventRectWidth = function () {
......@@ -4875,7 +4875,20 @@
if (config.axis_rotated) {
return position.isInner ? "1.2em" : -25 - $$.getMaxTickWidth('x');
} else {
return position.isInner ? "-0.5em" : config.axis_x_height ? config.axis_x_height - 10 : "3em";
if(position.isInner){
return "-0.5em";
}
if(config.axis_x_height){
return config.axis_x_height - 10;
}
if(config.axis_x_tick_rotate !== 0){
return $$.getMaxTickWidth('x');
}
return 35;
}
};
c3_chart_internal_fn.dyForYAxisLabel = function () {
......@@ -4934,8 +4947,35 @@
};
c3_chart_internal_fn.getMaxTickWidth = function (id) {
return (this.config.maxTickTextWidth[id] || this.config.maxTickTextWidth.default) +
(this.config.tick_text_padding || 0);
var $$ = this;
if($$.config.maxTickTextWidth[id]){
return $$.config.maxTickTextWidth[id] + ($$.config.tick_text_padding || 0);
}
var ticks = $$.getXAxisTickValues();
if(ticks){
var m = 0;
if($$.config.axis_x_tick_format){
ticks = ticks.map($$.config.axis_x_tick_format);
}
ticks.forEach(function(tick){
m = Math.max(m, tick.toString().length);
});
return m * 11.5;
}
if(!$$.config.axis_rotated){
if($$.config.axis_x_tick_rotate !== 0){
return $$.getMaxTickWidthAllowed();
}
}
return $$.config.maxTickTextWidth.default;
};
c3_chart_internal_fn.updateAxisLabels = function (withTransition) {
......@@ -5022,6 +5062,9 @@
transitions.axisY.call($$.yAxis);
transitions.axisY2.call($$.y2Axis);
transitions.axisSubX.call($$.subXAxis);
$$.tuneAxisTicks();
// rotate tick text if needed
if (!config.axis_rotated) {
$$.rotateTickText($$.axes.x, transitions.axisX, config.axis_x_tick_rotate);
......@@ -5029,6 +5072,46 @@
}
};
c3_chart_internal_fn.tuneAxisTicks = function(){
var $$ = this;
if(!$$.isCategorized()){
return;
}
var ticks = $$.getXAxisTickValues();
var widthForTick = $$.getCurrentWidth() / ticks.length;
var maxTickWidth = $$.getMaxTickWidth('x');
// No overlapping
if(maxTickWidth <= widthForTick){
$$.api.axis.rotateTicks('x', 0, true);
return;
}
// No overlapping for rotation 45
if(45 < widthForTick){
$$.api.axis.rotateTicks('x', -45, true);
return;
}
// No overlapping for rotation 90
if(true){
$$.api.axis.rotateTicks('x', -90, true);
return;
}
};
c3_chart_internal_fn.getMaxTickWidthAllowed = function(){
var $$ = this;
// Excel shortens ticks the way so they don't take more than half of all chart
var padding = -10;
var maxWidth = $$.getCurrentHeight()/2 + padding;
return maxWidth;
};
c3_chart_internal_fn.tuneAxis = function(sync, callback){
var $$ = this;
......@@ -8038,7 +8121,7 @@
$$.redraw();
};
c3_chart_fn.axis.rotateTicks = function(axisId, degrees){
c3_chart_fn.axis.rotateTicks = function(axisId, degrees, withoutRedraw){
var $$ = this.internal, config = $$.config;
if(axisId === 'x'){
......@@ -8049,7 +8132,9 @@
throw new Error("Can't rotate ticks for axis " + axisId);
}
if(!withoutRedraw){
this.flush();
}
};
c3_chart_fn.legend = function () {};
......@@ -8246,12 +8331,7 @@
}
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;
var maxTicks = $$.getMaxTickWidthAllowed() / 11.5;
if(text.length <= maxTicks){
return text;
......@@ -8457,14 +8537,18 @@
if (d.splitted.length) {
var axisId = $$.isXAxis(orient) ? 'x' : 'y';
var rotate = $$.config.axis_x_tick_rotate;
$$.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)
d.splitted.length * fontSize / $$.config.text_h_to_w * Math.cos(rotate) + fontSize * Math.sin(rotate)
);
}
return d.splitted;
});
var line = tick.select("line");
if($$.isXAxis(orient)){
......
c3.min.js
View file @ aab38839
This source diff could not be displayed because it is too large. You can view the blob instead.
src/api.axis.js
View file @ aab38839
......@@ -120,7 +120,7 @@ c3_chart_fn.axisY2 = function(value){
$$.redraw();
};
c3_chart_fn.axis.rotateTicks = function(axisId, degrees){
c3_chart_fn.axis.rotateTicks = function(axisId, degrees, withoutRedraw){
var $$ = this.internal, config = $$.config;
if(axisId === 'x'){
......@@ -131,5 +131,7 @@ c3_chart_fn.axis.rotateTicks = function(axisId, degrees){
throw new Error("Can't rotate ticks for axis " + axisId);
}
if(!withoutRedraw){
this.flush();
}
};
src/axis.js
View file @ aab38839
......@@ -253,7 +253,20 @@ c3_chart_internal_fn.dyForXAxisLabel = function () {
if (config.axis_rotated) {
return position.isInner ? "1.2em" : -25 - $$.getMaxTickWidth('x');
} else {
return position.isInner ? "-0.5em" : config.axis_x_height ? config.axis_x_height - 10 : "3em";
if(position.isInner){
return "-0.5em";
}
if(config.axis_x_height){
return config.axis_x_height - 10;
}
if(config.axis_x_tick_rotate !== 0){
return $$.getMaxTickWidth('x');
}
return 35;
}
};
c3_chart_internal_fn.dyForYAxisLabel = function () {
......@@ -312,8 +325,35 @@ c3_chart_internal_fn.rotateTickText = function (axis, transition, rotate) {
};
c3_chart_internal_fn.getMaxTickWidth = function (id) {
return (this.config.maxTickTextWidth[id] || this.config.maxTickTextWidth.default) +
(this.config.tick_text_padding || 0);
var $$ = this;
if($$.config.maxTickTextWidth[id]){
return $$.config.maxTickTextWidth[id] + ($$.config.tick_text_padding || 0);
}
var ticks = $$.getXAxisTickValues();
if(ticks){
var m = 0;
if($$.config.axis_x_tick_format){
ticks = ticks.map($$.config.axis_x_tick_format);
}
ticks.forEach(function(tick){
m = Math.max(m, tick.toString().length);
});
return m * 11.5;
}
if(!$$.config.axis_rotated){
if($$.config.axis_x_tick_rotate !== 0){
return $$.getMaxTickWidthAllowed();
}
}
return $$.config.maxTickTextWidth.default;
};
c3_chart_internal_fn.updateAxisLabels = function (withTransition) {
......@@ -400,6 +440,9 @@ c3_chart_internal_fn.redrawAxis = function (transitions, isHidden) {
transitions.axisY.call($$.yAxis);
transitions.axisY2.call($$.y2Axis);
transitions.axisSubX.call($$.subXAxis);
$$.tuneAxisTicks();
// rotate tick text if needed
if (!config.axis_rotated) {
$$.rotateTickText($$.axes.x, transitions.axisX, config.axis_x_tick_rotate);
......@@ -407,6 +450,46 @@ c3_chart_internal_fn.redrawAxis = function (transitions, isHidden) {
}
};
c3_chart_internal_fn.tuneAxisTicks = function(){
var $$ = this;
if(!$$.isCategorized()){
return;
}
var ticks = $$.getXAxisTickValues();
var widthForTick = $$.getCurrentWidth() / ticks.length;
var maxTickWidth = $$.getMaxTickWidth('x');
// No overlapping
if(maxTickWidth <= widthForTick){
$$.api.axis.rotateTicks('x', 0, true);
return;
}
// No overlapping for rotation 45
if(45 < widthForTick){
$$.api.axis.rotateTicks('x', -45, true);
return;
}
// No overlapping for rotation 90
if(true){
$$.api.axis.rotateTicks('x', -90, true);
return;
}
};
c3_chart_internal_fn.getMaxTickWidthAllowed = function(){
var $$ = this;
// Excel shortens ticks the way so they don't take more than half of all chart
var padding = -10;
var maxWidth = $$.getCurrentHeight()/2 + padding;
return maxWidth;
};
c3_chart_internal_fn.tuneAxis = function(sync, callback){
var $$ = this;
......
src/c3.axis.js
View file @ aab38839
......@@ -36,12 +36,7 @@ function c3_axis(d3, params, $$) {
}
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;
var maxTicks = $$.getMaxTickWidthAllowed() / 11.5;
if(text.length <= maxTicks){
return text;
......@@ -247,14 +242,18 @@ function c3_axis(d3, params, $$) {
if (d.splitted.length) {
var axisId = $$.isXAxis(orient) ? 'x' : 'y';
var rotate = $$.config.axis_x_tick_rotate;
$$.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)
d.splitted.length * fontSize / $$.config.text_h_to_w * Math.cos(rotate) + fontSize * Math.sin(rotate)
);
}
return d.splitted;
});
var line = tick.select("line");
if($$.isXAxis(orient)){
......
src/size.js
View file @ aab38839
......@@ -86,9 +86,9 @@ 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.sin(Math.PI * Math.abs(config.axis_x_tick_rotate) / 180);
h = $$.getMaxTickWidthAllowed(axisId) * Math.cos(Math.PI * Math.abs(config.axis_x_tick_rotate) / 180);
}
return h + ($$.getAxisLabelPositionById(axisId).isInner ? 5 : 10) + (axisId === 'y2' ? -10 : 0);
return h + ($$.getAxisLabelPositionById(axisId).isInner ? 10 : 15) + (axisId === 'y2' ? -10 : 0);
};
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