playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

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

pull/647/merge
Masayuki Tanaka 10 years ago
parent
3b4e916a25
commit
76fbe57adb
8 changed files with 117 additions and 54 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      c3.js
  2. 8
      c3.min.js
  3. 70
      spec/axis-spec.js
  4. 60
      spec/class-spec.js
  5. 3
      spec/data-spec.js
  6. 3
      src/axis.js
  7. 9
      src/c3.axis.js
  8. 3
      src/config.js

15
c3.js
Unescape View File

@ -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 };

8
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

70
spec/axis-spec.js
Unescape View File

@ -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 () {
});
});
});
});

60
spec/class-spec.js
Unescape View File

@ -0,0 +1,60 @@
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);
});
});
});

3
spec/data-spec.js
Unescape View File

@ -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
}
}
}

3
src/axis.js
Unescape View File

@ -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);

9
src/c3.axis.js
Unescape View File

@ -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 };

3
src/config.js
Unescape View File

@ -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: {},

Write Preview
Loading…
Cancel
Save