Skip to content

C
c3-closed
Commit 76fbe57a authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Support multiline tick text on normal x axis and introduce axis.x.tick.multiline option - #139 #670

parent 3b4e916a
Show whitespace changes
Inline Side-by-side
Showing with 113 additions and 50 deletions
c3.js
View file @ 76fbe57a
......@@ -989,7 +989,8 @@
axis_x_tick_values: null,
axis_x_tick_rotate: 0,
axis_x_tick_outer: true,
axis_x_tick_width: 80,
axis_x_tick_multiline: true,
axis_x_tick_width: null,
axis_x_max: undefined,
axis_x_min: undefined,
axis_x_padding: {},
......@@ -3947,7 +3948,8 @@
axisParams = {
isCategory: $$.isCategorized(),
withOuterTick: withOuterTick,
tickWidth: $$.isCategorized() ? config.axis_x_tick_width : undefined
tickMultiline: config.axis_x_tick_multiline,
tickWidth: config.axis_x_tick_width
},
axis = c3_axis($$.d3, axisParams).scale(scale).orient(orient);
......@@ -6465,11 +6467,14 @@
isVertical = orient === 'left' || orient === 'right';
// this should be called only when category axis
function splitTickText(d) {
function splitTickText(d, maxWidth) {
var tickText = textFormatted(d) + "",
maxWidth = isVertical ? params.tickWidth : tickOffset * 2 - 10,
subtext, spaceIndex, textWidth, splitted = [];
if (!maxWidth || maxWidth <= 0) {
maxWidth = isVertical ? 95 : params.isCategory ? (tickOffset * 2 - 10) : 110;
}
function split(splitted, text) {
spaceIndex = undefined;
for (var i = 0; i < text.length; i++) {
......@@ -6512,7 +6517,7 @@
text = tick.select("text");
tspan = text.selectAll('tspan')
.data(function (d, i) {
var splitted = params.tickWidth ? splitTickText(d) : [textFormatted(d)];
var splitted = params.tickMultiline ? splitTickText(d, params.tickWidth) : [textFormatted(d)];
counts[i] = splitted.length;
return splitted.map(function (s) {
return { index: i, splitted: s };
......
c3.min.js
View file @ 76fbe57a
This source diff could not be displayed because it is too large. You can view the blob instead.
spec/axis-spec.js
View file @ 76fbe57a
......@@ -33,20 +33,10 @@ describe('c3 chart axis', function () {
};
beforeEach(function (done) {
if (typeof chart === 'undefined') {
window.initDom();
}
chart = window.c3.generate(args);
chart = window.initChart(chart, args, done);
d3 = chart.internal.d3;
chart.internal.d3.select('.jasmine_html-reporter')
.style('position', 'absolute')
.style('right', 0);
window.setTimeout(function () {
done();
}, 10);
});
/*
describe('axis.y.tick.count', function () {
var i = 1;
......@@ -150,19 +140,23 @@ describe('c3 chart axis', function () {
expect(true).toBeTruthy();
});
it('should not split x axis tick text to multiple lines', function () {
it('should split x axis tick text to multiple lines', function () {
var ticks = chart.internal.main.select('.c3-axis-x').selectAll('g.tick'),
expectedX = '0',
expectedDy = '.71em';
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(1);
tspans.each(function () {
expect(tspans.size()).toBe(2);
tspans.each(function (d, i) {
var tspan = d3.select(this);
expect(tspan.text()).toBe('very long tick text on x axis');
expect(tspan.text()).toBe(expectedTexts[i]);
expect(tspan.attr('x')).toBe(expectedX);
expect(tspan.attr('dy')).toBe(expectedDy);
if (i === 0) {
expect(tspan.attr('dy')).toBe('.71em');
} else {
expect(tspan.attr('dy')).toBeGreaterThan(8);
}
});
});
});
......@@ -216,6 +210,7 @@ describe('c3 chart axis', function () {
expect(tspans.size()).toBe(1);
});
});
});
describe('rotated', function () {
......@@ -225,19 +220,23 @@ describe('c3 chart axis', function () {
expect(true).toBeTruthy();
});
it('should not split x axis tick text to multiple lines', function () {
it('should split x axis tick text to multiple lines', function () {
var ticks = chart.internal.main.select('.c3-axis-x').selectAll('g.tick'),
expectedX = '-9',
expectedDy = '3';
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(1);
tspans.each(function () {
expect(tspans.size()).toBe(2);
tspans.each(function (d, i) {
var tspan = d3.select(this);
expect(tspan.text()).toBe('very long tick text on x axis');
expect(tspan.text()).toBe(expectedTexts[i]);
expect(tspan.attr('x')).toBe(expectedX);
expect(tspan.attr('dy')).toBe(expectedDy);
if (i === 0) {
expect(tspan.attr('dy')).toBeLessThan(0);
} else {
expect(tspan.attr('dy')).toBeGreaterThan(9);
}
});
});
});
......@@ -267,6 +266,7 @@ describe('c3 chart axis', function () {
});
});
});
});
});
......@@ -362,9 +362,9 @@ describe('c3 chart axis', 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'
'this is a very long',
'tick text on',
'category axis'
],
expectedX = '-9';
expect(tspans.size()).toBe(3);
......@@ -389,12 +389,12 @@ describe('c3 chart axis', function () {
it('should update args not to split ticks', function () {
args.axis.x.tick = {
width: null
multiline: false
};
expect(true).toBeTruthy();
});
it('should not split x tick', function () {
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);
......@@ -432,13 +432,9 @@ describe('c3 chart axis', function () {
}
});
});
});
});
});
});
describe('axis.x.tick.rotate', function () {
......@@ -484,10 +480,8 @@ describe('c3 chart axis', function () {
});
});
});
*/
describe('axis.x.tick.fit', function () {
describe('axis.x.tick.fit = true', function () {
......@@ -592,7 +586,5 @@ describe('c3 chart axis', function () {
});
});
});
});
spec/class-spec.js 0 → 100644
View file @ 76fbe57a
var describe = window.describe,
expect = window.expect,
it = window.it,
beforeEach = window.beforeEach;
describe('c3 chart class', function () {
'use strict';
var chart, d3;
var args = {
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2 prefix', 50, 20, 10, 40, 15, 25],
['data3 мужчины', 150, 120, 110, 140, 115, 125]
]
}
};
beforeEach(function (done) {
chart = window.initChart(chart, args, done);
d3 = chart.internal.d3;
});
describe('internal.getTargetSelectorSuffix', function () {
it('should not replace any characters', function () {
var input = 'data1',
expected = '-' + input,
suffix = chart.internal.getTargetSelectorSuffix(input);
expect(suffix).toBe(expected);
});
it('should replace space to "-"', function () {
var input = 'data1 suffix',
expected = '-data1-suffix',
suffix = chart.internal.getTargetSelectorSuffix(input);
expect(suffix).toBe(expected);
});
it('should replace space to "-" with multibyte characters', function () {
var input = 'data1 suffix 日本語',
expected = '-data1-suffix-日本語',
suffix = chart.internal.getTargetSelectorSuffix(input);
expect(suffix).toBe(expected);
});
});
describe('multibyte characters on chart', function () {
it('should replace space to "-" with multibyte characters', function () {
var selector = '.c3-target-data3-мужчины';
expect(chart.internal.main.select(selector).size()).toBe(1);
});
});
});
spec/data-spec.js
View file @ 76fbe57a
......@@ -114,7 +114,8 @@ describe('c3 chart data', function () {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d %H:%M:%S.%L'
format: '%Y-%m-%d %H:%M:%S.%L',
multiline: false
}
}
}
......
src/axis.js
View file @ 76fbe57a
......@@ -35,7 +35,8 @@ c3_chart_internal_fn.getXAxis = function (scale, orient, tickFormat, tickValues,
axisParams = {
isCategory: $$.isCategorized(),
withOuterTick: withOuterTick,
tickWidth: $$.isCategorized() ? config.axis_x_tick_width : undefined
tickMultiline: config.axis_x_tick_multiline,
tickWidth: config.axis_x_tick_width
},
axis = c3_axis($$.d3, axisParams).scale(scale).orient(orient);
......
src/c3.axis.js
View file @ 76fbe57a
......@@ -102,11 +102,14 @@ function c3_axis(d3, params) {
isVertical = orient === 'left' || orient === 'right';
// this should be called only when category axis
function splitTickText(d) {
function splitTickText(d, maxWidth) {
var tickText = textFormatted(d) + "",
maxWidth = isVertical ? params.tickWidth : tickOffset * 2 - 10,
subtext, spaceIndex, textWidth, splitted = [];
if (!maxWidth || maxWidth <= 0) {
maxWidth = isVertical ? 95 : params.isCategory ? (tickOffset * 2 - 10) : 110;
}
function split(splitted, text) {
spaceIndex = undefined;
for (var i = 0; i < text.length; i++) {
......@@ -149,7 +152,7 @@ function c3_axis(d3, params) {
text = tick.select("text");
tspan = text.selectAll('tspan')
.data(function (d, i) {
var splitted = params.tickWidth ? splitTickText(d) : [textFormatted(d)];
var splitted = params.tickMultiline ? splitTickText(d, params.tickWidth) : [textFormatted(d)];
counts[i] = splitted.length;
return splitted.map(function (s) {
return { index: i, splitted: s };
......
src/config.js
View file @ 76fbe57a
......@@ -92,7 +92,8 @@ c3_chart_internal_fn.getDefaultConfig = function () {
axis_x_tick_values: null,
axis_x_tick_rotate: 0,
axis_x_tick_outer: true,
axis_x_tick_width: 80,
axis_x_tick_multiline: true,
axis_x_tick_width: null,
axis_x_max: undefined,
axis_x_min: undefined,
axis_x_padding: {},
......
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