Skip to content

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

Remove splitting text

parent 212e3c12
Hide whitespace changes
Inline Side-by-side
Showing with 4 additions and 212 deletions
c3.js
View file @ 693ce60e
......@@ -8337,7 +8337,6 @@
isVertical = orient === 'left' || orient === 'right';
var indexOfZero = ticks.indexOf(0);
var shouldSplitText = true;
// If we have 'broken' axis
if(indexOfZero === -1){
......@@ -8346,8 +8345,7 @@
// this should be called only when category axis
function splitTickText(d, maxWidth) {
var tickText,
subtext, spaceIndex, textWidth, thinOutCoef, splitted = [];
var tickText, thinOutCoef;
if(params.isCaregory){
tickText = $$.categoryName(d);
......@@ -8356,14 +8354,6 @@
tickText = textFormatted(d);
}
if(!shouldSplitText){
var postfix = '';
if(tickText.length > 12){
//postfix = '...';
}
return [tickText.substr(0, 10) + postfix];
}
if($$.isXAxis(orient)){
thinOutCoef = $$.getXThinOutCoef();
} else {
......@@ -8378,30 +8368,7 @@
return tickText;
}
if (!maxWidth || maxWidth <= 0) {
maxWidth = isVertical ? 95 : params.isCategory ? (Math.ceil(scale1(ticks[1]) - scale1(ticks[0])) - 12) : 110;
}
function split(splitted, text) {
spaceIndex = undefined;
for (var i = 1; i < text.length; i++) {
if (text.charAt(i) === ' ') {
spaceIndex = i;
}
subtext = text.substr(0, i + 1);
textWidth = sizeFor1Char.w * subtext.length;
// if text width gets over tick width, split by space index or current index
if (maxWidth < textWidth) {
return split(
splitted.concat(text.substr(0, spaceIndex ? spaceIndex : i)),
text.slice(spaceIndex ? spaceIndex + 1 : i)
);
}
}
return splitted.concat(text);
}
return split(splitted, tickText + "");
return [tickText];
}
function tspanDy(d, i) {
......@@ -8424,8 +8391,6 @@
if(typeof turn_axis_ticks !== 'undefined' || typeof turn_axis_ticks_90 !== 'undefined'){
if($$.isXAxis(orient) && params.isCategory){
shouldSplitText = false;
if(typeof turn_axis_ticks !== 'undefined'){
text.attr('transform', function(d, i){
var tickText = splitTickText(d)[0];
......
c3.min.js
View file @ 693ce60e
This source diff could not be displayed because it is too large. You can view the blob instead.
spec/axis-spec.js
View file @ 693ce60e
......@@ -200,27 +200,6 @@ describe('c3 chart axis', function () {
expect(true).toBeTruthy();
});
it('should split x axis tick text to multiple lines', function () {
var ticks = chart.internal.main.select('.c3-axis-x').selectAll('g.tick'),
expectedTexts = ['very long tick text', 'on x axis'],
expectedX = '0';
expect(ticks.size()).toBe(6);
ticks.each(function () {
var tspans = d3.select(this).selectAll('tspan');
expect(tspans.size()).toBe(2);
tspans.each(function (d, i) {
var tspan = d3.select(this);
expect(tspan.text()).toBe(expectedTexts[i]);
expect(tspan.attr('x')).toBe(expectedX);
if (i === 0) {
expect(tspan.attr('dy')).toBe('.71em');
} else {
expect(tspan.attr('dy')).toBeGreaterThan(8);
}
});
});
});
it('should construct y axis properly', function () {
var ticks = chart.internal.main.select('.c3-axis-y').selectAll('g.tick'),
expectedX = '-9',
......@@ -280,27 +259,6 @@ describe('c3 chart axis', function () {
expect(true).toBeTruthy();
});
it('should split x axis tick text to multiple lines', function () {
var ticks = chart.internal.main.select('.c3-axis-x').selectAll('g.tick'),
expectedTexts = ['very long tick', 'text on x axis'],
expectedX = '-9';
expect(ticks.size()).toBe(6);
ticks.each(function () {
var tspans = d3.select(this).selectAll('tspan');
expect(tspans.size()).toBe(2);
tspans.each(function (d, i) {
var tspan = d3.select(this);
expect(tspan.text()).toBe(expectedTexts[i]);
expect(tspan.attr('x')).toBe(expectedX);
if (i === 0) {
expect(tspan.attr('dy')).toBeLessThan(0);
} else {
expect(tspan.attr('dy')).toBeGreaterThan(9);
}
});
});
});
it('should not split y axis tick text to multiple lines', function () {
var ticks = chart.internal.main.select('.c3-axis-y').selectAll('g.tick'),
expectedTexts = [
......@@ -395,105 +353,9 @@ describe('c3 chart axis', function () {
});
});
it('should split tick text on rotated axis properly', function () {
var tick = chart.internal.main.select('.c3-axis-x').select('g.tick'),
tspans = tick.selectAll('tspan'),
expectedTickTexts = [
'this is a very',
'long tick text on',
'category axis'
],
expectedX = '-9';
expect(tspans.size()).toBe(3);
tspans.each(function (d, i) {
var tspan = d3.select(this);
expect(tspan.text()).toBe(expectedTickTexts[i]);
expect(tspan.attr('x')).toBe(expectedX);
// unable to define pricise number because it differs depends on environment..
if (i === 0) {
expect(tspan.attr('dy')).toBeLessThan(0);
} else {
expect(tspan.attr('dy')).toBeGreaterThan(8);
}
});
});
});
describe('option used', function () {
describe('as null', function () {
it('should update args not to split ticks', function () {
args.axis.x.tick = {
multiline: false
};
expect(true).toBeTruthy();
});
it('should split x tick', function () {
var tick = chart.internal.main.select('.c3-axis-x').select('g.tick'),
tspans = tick.selectAll('tspan');
expect(tspans.size()).toBe(1);
});
});
describe('as value', function () {
it('should update args not to split ticks', function () {
args.axis.x.tick = {
width: 150
};
expect(true).toBeTruthy();
});
it('should split x tick to 2 lines properly', function () {
var tick = chart.internal.main.select('.c3-axis-x').select('g.tick'),
tspans = tick.selectAll('tspan'),
expectedTickTexts = [
'this is a very long tick',
'text on category axis'
],
expectedX = '-9';
expect(tspans.size()).toBe(2);
tspans.each(function (d, i) {
var tspan = d3.select(this);
expect(tspan.text()).toBe(expectedTickTexts[i]);
expect(tspan.attr('x')).toBe(expectedX);
// unable to define pricise number because it differs depends on environment..
if (i === 0) {
expect(tspan.attr('dy')).toBeLessThan(0);
} else {
expect(tspan.attr('dy')).toBeGreaterThan(8);
}
});
});
});
});
});
describe('with axis.x.tick.format', function () {
it('should update args to use axis.x.tick.format', function () {
args.axis.x.tick.format = function () {
return ['this is a very long tick text', 'on category axis'];
};
expect(true).toBeTruthy();
});
it('should have multiline tick text', function () {
var tick = chart.internal.main.select('.c3-axis-x').select('g.tick'),
tspans = tick.selectAll('tspan'),
expectedTickTexts = ['this is a very long tick text', 'on category axis'];
expect(tspans.size()).toBe(2);
tspans.each(function (d, i) {
var tspan = d3.select(this);
expect(tspan.text()).toBe(expectedTickTexts[i]);
});
});
});
});
describe('axis.x.tick.rotate', function () {
......
src/c3.axis.js
View file @ 693ce60e
......@@ -152,7 +152,6 @@ function c3_axis(d3, params, $$) {
isVertical = orient === 'left' || orient === 'right';
var indexOfZero = ticks.indexOf(0);
var shouldSplitText = true;
// If we have 'broken' axis
if(indexOfZero === -1){
......@@ -161,8 +160,7 @@ function c3_axis(d3, params, $$) {
// this should be called only when category axis
function splitTickText(d, maxWidth) {
var tickText,
subtext, spaceIndex, textWidth, thinOutCoef, splitted = [];
var tickText, thinOutCoef;
if(params.isCaregory){
tickText = $$.categoryName(d);
......@@ -171,14 +169,6 @@ function c3_axis(d3, params, $$) {
tickText = textFormatted(d);
}
if(!shouldSplitText){
var postfix = '';
if(tickText.length > 12){
//postfix = '...';
}
return [tickText.substr(0, 10) + postfix];
}
if($$.isXAxis(orient)){
thinOutCoef = $$.getXThinOutCoef();
} else {
......@@ -193,30 +183,7 @@ function c3_axis(d3, params, $$) {
return tickText;
}
if (!maxWidth || maxWidth <= 0) {
maxWidth = isVertical ? 95 : params.isCategory ? (Math.ceil(scale1(ticks[1]) - scale1(ticks[0])) - 12) : 110;
}
function split(splitted, text) {
spaceIndex = undefined;
for (var i = 1; i < text.length; i++) {
if (text.charAt(i) === ' ') {
spaceIndex = i;
}
subtext = text.substr(0, i + 1);
textWidth = sizeFor1Char.w * subtext.length;
// if text width gets over tick width, split by space index or current index
if (maxWidth < textWidth) {
return split(
splitted.concat(text.substr(0, spaceIndex ? spaceIndex : i)),
text.slice(spaceIndex ? spaceIndex + 1 : i)
);
}
}
return splitted.concat(text);
}
return split(splitted, tickText + "");
return [tickText];
}
function tspanDy(d, i) {
......@@ -239,8 +206,6 @@ function c3_axis(d3, params, $$) {
if(typeof turn_axis_ticks !== 'undefined' || typeof turn_axis_ticks_90 !== 'undefined'){
if($$.isXAxis(orient) && params.isCategory){
shouldSplitText = false;
if(typeof turn_axis_ticks !== 'undefined'){
text.attr('transform', function(d, i){
var tickText = splitTickText(d)[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