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

c3.js

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

spec/axis-spec.js

@@ -33,20 +33,10 @@ describe('c3 chart axis', function () {
     };
 
     beforeEach(function (done) {
-        if (typeof chart === 'undefined') {
+        chart = window.initChart(chart, args, done);
-            window.initDom();
-        }
-        chart = window.c3.generate(args);
         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',
+                        expectedTexts = ['very long tick text on x', 'axis'],
-                        expectedDy = '.71em';
+                        expectedX = '0';
                     expect(ticks.size()).toBe(6);
                     ticks.each(function () {
                         var tspans = d3.select(this).selectAll('tspan');
-                        expect(tspans.size()).toBe(1);
+                        expect(tspans.size()).toBe(2);
-                        tspans.each(function () {
+                        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',
+                        expectedTexts = ['very long tick text on', 'x axis'],
-                        expectedDy = '3';
+                        expectedX = '-9';
                     expect(ticks.size()).toBe(6);
                     ticks.each(function () {
                         var tspans = d3.select(this).selectAll('tspan');
-                        expect(tspans.size()).toBe(1);
+                        expect(tspans.size()).toBe(2);
-                        tspans.each(function () {
+                        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',
+                            'this is a very long',
-                            'long tick text',
+                            'tick text on',
-                            'on category axis'
+                            '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,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);
+        });
+
+    });
+
+});

spec/data-spec.js

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

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

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

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