c3 - npm Package Compare versions

Comparing version 0.4.9 to 0.4.10-rc4

bower.json

@@ -7,3 +7,3 @@ {
   ],
-  "version": "0.4.9",
+  "version": "0.4.10-rc4",
   "homepage": "https://github.com/masayuki0812/c3",
@@ -10,0 +10,0 @@ "authors": [

component.json

@@ -5,3 +5,3 @@ {
   "description": "A D3-based reusable chart library",
-  "version": "0.4.9",
+  "version": "0.4.10-rc4",
   "keywords": [],
@@ -8,0 +8,0 @@ "dependencies": {

package.json

 {
   "name": "c3",
-  "version": "0.4.9",
+  "version": "0.4.10-rc4",
   "description": "D3-based reusable chart library",
@@ -26,3 +26,3 @@ "main": "c3.js",
   "devDependencies": {
-    "grunt": "~0.4.1",
+    "grunt": "^0.4.5",
     "grunt-contrib-concat": "~0.5.0",
@@ -34,4 +34,5 @@ "grunt-contrib-cssmin": "^0.10.0",
     "grunt-contrib-watch": "^0.6.1",
+    "grunt-sass": "^0.17.0",
     "load-grunt-tasks": "~0.2.0"
   }
 }

spec/api.data-spec.js

@@ -1,6 +0,5 @@
-
 describe('c3 api data', function () {
     'use strict';
 
-    var chart, d3;
+    var chart;
 
@@ -35,3 +34,2 @@ var args = {
         chart = window.initChart(chart, args, done);
-        d3 = chart.internal.d3;
     });
@@ -38,0 +36,0 @@

spec/api.focus-spec.js

@@ -1,6 +0,5 @@
-
-describe('c3 api load', function () {
+describe('c3 api focus', function () {
     'use strict';
 
-    var chart, d3;
+    var chart;
 
@@ -19,3 +18,2 @@ var args = {
         chart = window.initChart(chart, args, done);
-        d3 = chart.internal.d3;
     });
@@ -41,3 +39,3 @@
                 done();
-            }, 500);
+            }, 1000);
         });
@@ -67,3 +65,3 @@
                 done();
-            }, 500);
+            }, 1000);
         });
@@ -93,3 +91,3 @@
                 done();
-            }, 500);
+            }, 1000);
         });
@@ -119,3 +117,3 @@
                 done();
-            }, 500);
+            }, 1000);
         });
@@ -148,3 +146,3 @@
                 done();
-            }, 500);
+            }, 1000);
         });
@@ -177,3 +175,3 @@
                 done();
-            }, 500);
+            }, 1000);
         });
@@ -208,5 +206,5 @@
                     done();
-                }, 500);
-            });
-        }, 500);
+                }, 1000);
+            }, 1000);
+        });
 
@@ -232,7 +230,8 @@ });
                         var item = d3.select(this);
+                        expect(item.classed('c3-legend-item-focused')).toBeFalsy();
                         expect(+item.style('opacity')).toBeCloseTo(1);
                     });
                     done();
-                }, 500);
-            }, 500);
+                }, 1000);
+            }, 1000);
         });
@@ -255,7 +254,8 @@
                         var item = d3.select(this);
+                        expect(item.classed('c3-legend-item-focused')).toBeFalsy();
                         expect(+item.style('opacity')).toBeCloseTo(1);
                     });
                     done();
-                }, 500);
-            }, 500);
+                }, 1000);
+            }, 1000);
         });
@@ -286,5 +286,8 @@
                     expect(+legendItems.data3.style('opacity')).toBeCloseTo(1);
+                    expect(legendItems.data1.classed('c3-legend-item-focused')).toBeTruthy();
+                    expect(legendItems.data2.classed('c3-legend-item-focused')).toBeFalsy();
+                    expect(legendItems.data3.classed('c3-legend-item-focused')).toBeTruthy();
                     done();
-                }, 500);
-            }, 500);
+                }, 1000);
+            }, 1000);
         });
@@ -315,5 +318,8 @@
                     expect(+legendItems.data3.style('opacity')).toBeCloseTo(0.3);
+                    expect(legendItems.data1.classed('c3-legend-item-focused')).toBeFalsy();
+                    expect(legendItems.data2.classed('c3-legend-item-focused')).toBeFalsy();
+                    expect(legendItems.data3.classed('c3-legend-item-focused')).toBeFalsy();
                     done();
-                }, 500);
-            }, 500);
+                }, 1000);
+            }, 1000);
         });
@@ -344,5 +350,8 @@
                     expect(+legendItems.data3.style('opacity')).toBeCloseTo(1);
+                    expect(legendItems.data1.classed('c3-legend-item-focused')).toBeFalsy();
+                    expect(legendItems.data2.classed('c3-legend-item-focused')).toBeFalsy();
+                    expect(legendItems.data3.classed('c3-legend-item-focused')).toBeTruthy();
                     done();
-                }, 500);
-            }, 500);
+                }, 1000);
+            }, 1000);
         });
@@ -373,5 +382,8 @@
                     expect(+legendItems.data3.style('opacity')).toBeCloseTo(0.3);
+                    expect(legendItems.data1.classed('c3-legend-item-focused')).toBeFalsy();
+                    expect(legendItems.data2.classed('c3-legend-item-focused')).toBeFalsy();
+                    expect(legendItems.data3.classed('c3-legend-item-focused')).toBeFalsy();
                     done();
-                }, 500);
-            }, 500);
+                }, 1000);
+            }, 1000);
         });
@@ -403,3 +415,3 @@
                 done();
-            }, 500);
+            }, 1000);
         });
@@ -420,3 +432,3 @@
                 done();
-            }, 500);
+            }, 1000);
         });
@@ -439,4 +451,4 @@
                     done();
-                }, 500);
-            }, 500);
+                }, 1000);
+            }, 1000);
         });
@@ -443,0 +455,0 @@

spec/api.grid-spec.js

@@ -1,18 +0,8 @@
-
 describe('c3 api grid', function () {
     'use strict';
 
-    var chart, d3;
+    var chart, args;
 
-    var args = {
-        data: {
-            columns: [
-                ['data1', 30, 200, 100, 400, 150, 250]
-            ]
-        }
-    };
-
     beforeEach(function (done) {
         chart = window.initChart(chart, args, done);
-        d3 = chart.internal.d3;
     });
@@ -22,2 +12,13 @@
 
+        it('should update args', function () {
+            args = {
+                data: {
+                    columns: [
+                        ['data1', 30, 200, 100, 400, 150, 250]
+                    ]
+                }
+            };
+            expect(true).toBeTruthy();
+        });
+
         it('should update y grids', function (done) {
@@ -24,0 +25,0 @@ var main = chart.internal.main,

spec/api.load-spec.js

@@ -1,19 +0,8 @@
-
 describe('c3 api load', function () {
     'use strict';
 
-    var chart, d3;
+    var chart, args;
 
-    var args = {
-        data: {
-            columns: [
-                ['data1', 30, 200, 100, 400, 150, 250],
-                ['data2', 5000, 2000, 1000, 4000, 1500, 2500]
-            ]
-        }
-    };
-
     beforeEach(function (done) {
         chart = window.initChart(chart, args, done);
-        d3 = chart.internal.d3;
     });
@@ -25,2 +14,14 @@
 
+            it('should update args', function () {
+                args = {
+                    data: {
+                        columns: [
+                            ['data1', 30, 200, 100, 400, 150, 250],
+                            ['data2', 5000, 2000, 1000, 4000, 1500, 2500]
+                        ]
+                    }
+                };
+                expect(true).toBeTruthy();
+            });
+
             it('should load additional data', function (done) {
@@ -27,0 +28,0 @@ var main = chart.internal.main,

spec/api.zoom-spec.js

@@ -1,31 +0,8 @@
-
 describe('c3 api zoom', function () {
     'use strict';
 
-    var chart, d3;
+    var chart, args;
 
-    var args = {
-        data: {
-            columns: [
-                ['data1', 30, 200, 100, 400, 150, 250],
-                ['data2', 50, 20, 10, 40, 15, 25],
-                ['data3', 150, 120, 110, 140, 115, 125]
-            ]
-        },
-        zoom: {
-            enabled: true
-        }
-    };
-
     beforeEach(function (done) {
-        if (typeof chart === 'undefined') {
-            window.initDom();
-        }
-        chart = window.c3.generate(args);
-        d3 = chart.internal.d3;
-//        chart.internal.d3.select('.jasmine_html-reporter').style('display', 'none');
-
-        window.setTimeout(function () {
-            done();
-        }, 10);
+        chart = window.initChart(chart, args, done);
     });
@@ -35,2 +12,18 @@
 
+        it('should update args', function () {
+            args = {
+                data: {
+                    columns: [
+                        ['data1', 30, 200, 100, 400, 150, 250],
+                        ['data2', 50, 20, 10, 40, 15, 25],
+                        ['data3', 150, 120, 110, 140, 115, 125]
+                    ]
+                },
+                zoom: {
+                    enabled: true
+                }
+            };
+            expect(true).toBeTruthy();
+        });
+
         it('should be zoomed properly', function () {
@@ -37,0 +30,0 @@ var target = [3, 5], domain;

spec/arc-spec.js

@@ -1,20 +0,8 @@
-
-describe('c3 chart axis', function () {
+describe('c3 chart arc', function () {
     'use strict';
 
-    var chart, d3, args;
+    var chart, args;
 
     beforeEach(function (done) {
-        if (typeof chart === 'undefined') {
-            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();
-        }, 50);
+        chart = window.initChart(chart, args, done);
     });
@@ -24,12 +12,15 @@
 
-        args = {
-            data: {
-                columns: [
-                    ['data1', 30],
-                    ['data2', 150],
-                    ['data3', 120]
-                ],
-                type: 'pie'
-            }
-        };
+        it('should update args to have pie chart', function () {
+            args = {
+                data: {
+                    columns: [
+                        ['data1', 30],
+                        ['data2', 150],
+                        ['data3', 120]
+                    ],
+                    type: 'pie'
+                }
+            };
+            expect(true).toBeTruthy();
+        });
 
@@ -69,8 +60,43 @@ it('should have correct classes', function () {
 
-        it('should have correct d even if data id can be converted to a color', function () {
-            expect(d3.select('.c3-arc-black').attr('d')).toMatch(/M-124\..+,-171\..+A211\..+,211\..+ 0 0,1 -3\..+,-211\..+L0,0Z/);
+        it('should have correct d even if data id can be converted to a color', function (done) {
+            setTimeout(function () {
+                expect(d3.select('.c3-arc-black').attr('d')).toMatch(/M-124\..+,-171\..+A211\..+,211\..+ 0 0,1 -3\..+,-211\..+L0,0Z/);
+                done();
+            }, 500);
         });
 
+        it('should update args to have empty pie chart', function () {
+            args = {
+                data: {
+                    columns: [
+                        ['data1', null],
+                        ['data2', null],
+                        ['data3', null]
+                    ],
+                    type: 'pie'
+                }
+            };
+            expect(true).toBeTruthy();
+        });
+
+        it('should have correct d attribute', function () {
+            var chartArc = d3.select('.c3-chart-arcs'),
+            arcs = {
+                data1: chartArc.select('.c3-chart-arc.c3-target.c3-target-data1')
+                    .select('g.c3-shapes.c3-shapes-data1.c3-arcs.c3-arcs-data1')
+                    .select('path.c3-shape.c3-shape.c3-arc.c3-arc-data1'),
+                data2: chartArc.select('.c3-chart-arc.c3-target.c3-target-data2')
+                    .select('g.c3-shapes.c3-shapes-data2.c3-arcs.c3-arcs-data2')
+                    .select('path.c3-shape.c3-shape.c3-arc.c3-arc-data2'),
+                data3: chartArc.select('.c3-chart-arc.c3-target.c3-target-data3')
+                    .select('g.c3-shapes.c3-shapes-data3.c3-arcs.c3-arcs-data3')
+                    .select('path.c3-shape.c3-shape.c3-arc.c3-arc-data3')
+            };
+            expect(arcs.data1.attr('d').indexOf('NaN')).toBe(-1);
+            expect(arcs.data2.attr('d').indexOf('NaN')).toBe(-1);
+            expect(arcs.data3.attr('d').indexOf('NaN')).toBe(-1);
+        });
+
     });
 
 });

spec/axis-spec.js

@@ -1,6 +0,5 @@
-
 describe('c3 chart axis', function () {
     'use strict';
 
-    var chart, d3;
+    var chart;
 
@@ -33,3 +32,2 @@ var args = {
         chart = window.initChart(chart, args, done);
-        d3 = chart.internal.d3;
     });
@@ -39,7 +37,5 @@
 
-        var i = 1;
-
-        beforeEach(function () {
-            args.axis.y.tick.count = i++;
-            chart = window.c3.generate(args);
+        it('should update args to have only 1 tick on y axis', function () {
+            args.axis.y.tick.count = 1;
+            expect(true).toBeTruthy();
         });
@@ -52,2 +48,7 @@
 
+        it('should update args to have 2 ticks on y axis', function () {
+            args.axis.y.tick.count = 2;
+            expect(true).toBeTruthy();
+        });
+
         it('should have 2 ticks on y axis', function () {
@@ -58,2 +59,7 @@ var ticksSize = d3.select('.c3-axis-y').selectAll('g.tick').size();
 
+        it('should update args to have 3 ticks on y axis', function () {
+            args.axis.y.tick.count = 3;
+            expect(true).toBeTruthy();
+        });
+
         it('should have 3 ticks on y axis', function () {
@@ -70,5 +76,5 @@ var ticksSize = d3.select('.c3-axis-y').selectAll('g.tick').size();
 
-        beforeEach(function () {
+        it('should update args to have only 2 ticks on y axis', function () {
             args.axis.y.tick.values = values;
-            chart = window.c3.generate(args);
+            expect(true).toBeTruthy();
         });
@@ -92,21 +98,20 @@
 
-        var args = {
-            data: {
-                columns: [
-                    ["times", 60000, 120000, 180000, 240000]
-                ]
-            },
-            axis: {
-                y: {
-                    type : 'timeseries',
-                    tick: {
-                        time: {
+        it('should update args', function () {
+            args = {
+                data: {
+                    columns: [
+                        ["times", 60000, 120000, 180000, 240000]
+                    ]
+                },
+                axis: {
+                    y: {
+                        type : 'timeseries',
+                        tick: {
+                            time: {
+                            }
                         }
                     }
                 }
-            }
-        };
-
-        beforeEach(function () {
-            chart = window.c3.generate(args);
+            };
+            expect(true).toBeTruthy();
         });
@@ -113,0 +118,0 @@

spec/c3-helper.js

@@ -32,6 +32,10 @@ function initDom() {
     }
-    chart = window.c3.generate(args);
-    chart.internal.d3.select('.jasmine_html-reporter')
-        .style('position', 'absolute')
-        .style('right', 0);
+    if (args) {
+        chart = window.c3.generate(args);
+        window.d3 = chart.internal.d3;
+        window.d3.select('.jasmine_html-reporter')
+            .style('position', 'absolute')
+            .style('width', '640px')
+            .style('right', 0);
+    }
 
@@ -38,0 +42,0 @@ window.setTimeout(function () {

spec/c3-spec.js

@@ -1,2 +0,1 @@
-
 describe('c3', function () {
@@ -12,2 +11,1 @@ 'use strict';
 });
-

spec/class-spec.js

@@ -1,6 +0,5 @@
-
 describe('c3 chart class', function () {
     'use strict';
 
-    var chart, d3;
+    var chart;
 
@@ -19,3 +18,2 @@ var args = {
         chart = window.initChart(chart, args, done);
-        d3 = chart.internal.d3;
     });
@@ -22,0 +20,0 @@

spec/core-spec.js

@@ -1,6 +0,5 @@
-
 describe('c3 chart', function () {
     'use strict';
 
-    var chart, d3;
+    var chart;
 
@@ -19,3 +18,2 @@ var args = {
         chart = window.initChart(chart, args, done);
-        d3 = chart.internal.d3;
     });
@@ -58,12 +56,50 @@
 
-        it('should accept d3.selection object', function () {
-            args.bindto = d3.select('#chart');
-            expect(true).toBeTruthy();
+        describe('selector', function () {
+            it('update args', function () {
+                d3.select('#chart').html('');
+                args.bindto = '#chart';
+                expect(true).toBeTruthy();
+            });
+            it('should be created', function () {
+                var svg = d3.select('#chart svg');
+                expect(svg.size()).toBe(1);
+            });
         });
 
-        it('should be created', function () {
-            var svg = d3.select('#chart svg');
-            expect(svg).not.toBeNull();
+        describe('d3.selection object', function () {
+            it('update args', function () {
+                d3.select('#chart').html('');
+                args.bindto = d3.select('#chart');
+                expect(true).toBeTruthy();
+            });
+            it('should be created', function () {
+                var svg = d3.select('#chart svg');
+                expect(svg.size()).toBe(1);
+            });
         });
 
+        describe('null', function () {
+            it('update args', function () {
+                d3.select('#chart').html('');
+                args.bindto = null;
+                expect(true).toBeTruthy();
+            });
+            it('should not be created', function () {
+                var svg = d3.select('#chart svg');
+                expect(svg.size()).toBe(0);
+            });
+        });
+
+        describe('empty string', function () {
+            it('update args', function () {
+                d3.select('#chart').html('');
+                args.bindto = '';
+                expect(true).toBeTruthy();
+            });
+            it('should not be created', function () {
+                var svg = d3.select('#chart svg');
+                expect(svg.size()).toBe(0);
+            });
+        });
+
     });
@@ -70,0 +106,0 @@

spec/data-spec.js

@@ -1,26 +0,238 @@
-
 describe('c3 chart data', function () {
     'use strict';
 
-    var chart, d3;
+    var chart, args;
 
-    var args = {
-        data: {
-            columns: [
-                ['data1', 30, 200, 100, 400, 150, 250],
-                ['data2', 50, 20, 10, 40, 15, 25],
-                ['data3', 150, 120, 110, 140, 115, 125]
-            ],
-            order: function () {
-                return 0;
-            }
-        }
-    };
-
     beforeEach(function (done) {
         chart = window.initChart(chart, args, done);
-        d3 = chart.internal.d3;
     });
 
+    describe('data.lables', function () {
+
+        describe('on line chart', function () {
+
+            it('should update args', function () {
+                args = {
+                    data: {
+                        columns: [
+                            ['data1', 1030, 2200, 2100],
+                            ['data2', 1150, 2010, 1200],
+                            ['data3', -1150, -2010, -1200],
+                            ['data4', -1030, -2200, -2100],
+                        ],
+                        type: 'line',
+                        labels: true,
+                    }
+                };
+                expect(true).toBeTruthy();
+            });
+
+            it('should locate data labels in correct position', function () {
+                var expectedTextY = {
+                    data1: [128, 38, 46],
+                    data2: [119, 53, 115],
+                    data3: [311, 377, 315],
+                    data4: [302, 392, 384],
+                };
+                var expectedTextX = {
+                    data1: [6, 294, 583],
+                    data2: [6, 294, 583],
+                    data3: [6, 294, 583],
+                    data4: [6, 294, 583],
+                };
+                Object.keys(expectedTextY).forEach(function (key) {
+                    d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2);
+                        expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2);
+                    });
+                });
+            });
+
+            it('should update args to be stacked', function () {
+                args.data.groups = [['data1', 'data2'], ['data3', 'data4']];
+                expect(true).toBeTruthy();
+            });
+
+            it('should locate data labels in correct position', function () {
+                var expectedTextY = {
+                    data1: [120, 38, 75],
+                    data2: [161, 127, 159],
+                    data3: [269, 303, 271],
+                    data4: [310, 392, 355],
+                };
+                var expectedTextX = {
+                    data1: [6, 294, 583],
+                    data2: [6, 294, 583],
+                    data3: [6, 294, 583],
+                    data4: [6, 294, 583],
+                };
+                Object.keys(expectedTextY).forEach(function (key) {
+                    d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2);
+                        expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2);
+                    });
+                });
+            });
+
+        });
+
+        describe('on area chart', function () {
+
+            it('should update args', function () {
+                args = {
+                    data: {
+                        columns: [
+                            ['data1', 1030, 2200, 2100],
+                            ['data2', 1150, 2010, 1200],
+                            ['data3', -1150, -2010, -1200],
+                            ['data4', -1030, -2200, -2100],
+                        ],
+                        type: 'area',
+                        labels: true,
+                    }
+                };
+                expect(true).toBeTruthy();
+            });
+
+            it('should locate data labels in correct position', function () {
+                var expectedTextY = {
+                    data1: [128, 38, 46],
+                    data2: [119, 53, 115],
+                    data3: [311, 377, 315],
+                    data4: [302, 392, 384],
+                };
+                var expectedTextX = {
+                    data1: [6, 294, 583],
+                    data2: [6, 294, 583],
+                    data3: [6, 294, 583],
+                    data4: [6, 294, 583],
+                };
+                Object.keys(expectedTextY).forEach(function (key) {
+                    d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2);
+                        expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2);
+                    });
+                });
+            });
+
+            it('should update args to be stacked', function () {
+                args.data.groups = [['data1', 'data2'], ['data3', 'data4']];
+                expect(true).toBeTruthy();
+            });
+
+            it('should locate data labels in correct position', function () {
+                var expectedTextY = {
+                    data1: [120, 38, 75],
+                    data2: [161, 127, 159],
+                    data3: [269, 303, 271],
+                    data4: [310, 392, 355],
+                };
+                var expectedTextX = {
+                    data1: [6, 294, 583],
+                    data2: [6, 294, 583],
+                    data3: [6, 294, 583],
+                    data4: [6, 294, 583],
+                };
+                Object.keys(expectedTextY).forEach(function (key) {
+                    d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2);
+                        expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2);
+                    });
+                });
+            });
+
+        });
+
+        describe('on bar chart', function () {
+
+            it('should update args', function () {
+                args = {
+                    data: {
+                        columns: [
+                            ['data1', 1030, 2200, 2100],
+                            ['data2', 1150, 2010, 1200],
+                            ['data3', -1150, -2010, -1200],
+                            ['data4', -1030, -2200, -2100],
+                        ],
+                        type: 'bar',
+                        labels: true,
+                    }
+                };
+                expect(true).toBeTruthy();
+            });
+
+            it('should locate data labels in correct position', function () {
+                var expectedTextY = {
+                    data1: [128, 38, 46],
+                    data2: [119, 53, 115],
+                    data3: [311, 377, 315],
+                    data4: [302, 392, 384],
+                };
+                var expectedTextX = {
+                    data1: [53, 249, 445],
+                    data2: [83, 279, 475],
+                    data3: [112, 308, 504],
+                    data4: [142, 338, 534],
+                };
+                Object.keys(expectedTextY).forEach(function (key) {
+                    d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2);
+                        expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2);
+                    });
+                });
+            });
+
+            it('should update args to be stacked', function () {
+                args.data.groups = [['data1', 'data2'], ['data3', 'data4']];
+                expect(true).toBeTruthy();
+            });
+
+            it('should locate data labels in correct position', function () {
+                var expectedTextY = {
+                    data1: [120, 38, 75],
+                    data2: [161, 127, 159],
+                    data3: [269, 303, 271],
+                    data4: [310, 392, 355],
+                };
+                var expectedTextX = {
+                    data1: [68.6, 264, 460],
+                    data2: [68.6, 264, 460],
+                    data3: [127, 323, 519],
+                    data4: [127, 323, 519],
+                };
+                Object.keys(expectedTextY).forEach(function (key) {
+                    d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2);
+                        expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2);
+                    });
+                });
+            });
+
+        });
+
+    });
+
     describe('function in data.order', function () {
+        it('should update args', function () {
+            args = {
+                data: {
+                    columns: [
+                        ['data1', 30, 200, 100, 400, 150, 250],
+                        ['data2', 50, 20, 10, 40, 15, 25],
+                        ['data3', 150, 120, 110, 140, 115, 125]
+                    ],
+                    order: function () {
+                        return 0;
+                    }
+                }
+            };
+            expect(true).toBeTruthy();
+        });
+
         it('should return false in isOrderAsc and isOrderDesc functions', function () {
@@ -33,2 +245,15 @@ expect(chart.internal.isOrderAsc() || chart.internal.isOrderDesc()).toBe(false);
 
+        it('should update args', function () {
+            args = {
+                data: {
+                    columns: [
+                        ['data1', 30, 200, 100, 400, 150, 250],
+                        ['data2', 50, 20, 10, 40, 15, 25],
+                        ['data3', 150, 120, 110, 140, 115, 125]
+                    ],
+                }
+            };
+            expect(true).toBeTruthy();
+        });
+
         describe('normal x', function () {
@@ -54,35 +279,78 @@
         describe('timeseries x', function () {
-            it('should load timeseries data successfully', function () {
-                args = {
-                    data: {
-                        x : 'date',
-                        columns: [
-                            ['date', '2013-01-01', '2013-01-02', '2013-01-03'],
-                            ['data1', 30, 200, 100],
-                            ['data2', 130, 300, 200]
-                        ]
-                    },
-                    axis : {
-                        x : {
-                            type : 'timeseries'
+            describe('without xFormat', function () {
+
+                it('should load timeseries data successfully', function () {
+                    args = {
+                        data: {
+                            x : 'date',
+                            columns: [
+                                ['date', '2013-01-01', '2013-01-02', '2013-01-03'],
+                                ['data1', 30, 200, 100],
+                                ['data2', 130, 300, 200]
+                            ]
+                        },
+                        axis : {
+                            x : {
+                                type : 'timeseries'
+                            }
                         }
-                    }
-                };
-                expect(true).toBeTruthy();
-            });
+                    };
+                    expect(true).toBeTruthy();
+                });
 
-            it('should have correct number of xs', function () {
-                expect(Object.keys(chart.internal.data.xs).length).toBe(2);
-                expect(chart.internal.data.xs.data1.length).toBe(3);
-                expect(chart.internal.data.xs.data2.length).toBe(3);
+                it('should have correct number of xs', function () {
+                    expect(Object.keys(chart.internal.data.xs).length).toBe(2);
+                    expect(chart.internal.data.xs.data1.length).toBe(3);
+                    expect(chart.internal.data.xs.data2.length).toBe(3);
+                });
+
+                it('should have Date object as x', function () {
+                    var xs = chart.internal.data.xs;
+                    expect(+xs.data1[0]).toBe(+new Date(2013, 0, 1, 0, 0, 0));
+                    expect(+xs.data1[1]).toBe(+new Date(2013, 0, 2, 0, 0, 0));
+                    expect(+xs.data1[2]).toBe(+new Date(2013, 0, 3, 0, 0, 0));
+                    expect(+xs.data2[0]).toBe(+new Date(2013, 0, 1, 0, 0, 0));
+                    expect(+xs.data2[1]).toBe(+new Date(2013, 0, 2, 0, 0, 0));
+                    expect(+xs.data2[2]).toBe(+new Date(2013, 0, 3, 0, 0, 0));
+                });
             });
 
-            it('should have Date object as x', function () {
-                var xs = chart.internal.data.xs;
-                expect(+xs.data1[0]).toBe(+new Date(2013, 0, 1, 0, 0, 0));
-                expect(+xs.data1[1]).toBe(+new Date(2013, 0, 2, 0, 0, 0));
-                expect(+xs.data1[2]).toBe(+new Date(2013, 0, 3, 0, 0, 0));
-                expect(+xs.data2[0]).toBe(+new Date(2013, 0, 1, 0, 0, 0));
-                expect(+xs.data2[1]).toBe(+new Date(2013, 0, 2, 0, 0, 0));
-                expect(+xs.data2[2]).toBe(+new Date(2013, 0, 3, 0, 0, 0));
+            describe('with xFormat', function () {
+                describe('timeseries x with xFormat', function () {
+                    it('should load timeseries data successfully', function () {
+                        args = {
+                            data: {
+                                x : 'date',
+                                xFormat: '%Y%m%d',
+                                columns: [
+                                    ['date', '20130101', '20130102', '20130103'],
+                                    ['data1', 30, 200, 100],
+                                    ['data2', 130, 300, 200]
+                                ]
+                            },
+                            axis : {
+                                x : {
+                                    type : 'timeseries'
+                                }
+                            }
+                        };
+                        expect(true).toBeTruthy();
+                    });
+
+                    it('should have correct number of xs', function () {
+                        expect(Object.keys(chart.internal.data.xs).length).toBe(2);
+                        expect(chart.internal.data.xs.data1.length).toBe(3);
+                        expect(chart.internal.data.xs.data2.length).toBe(3);
+                    });
+
+                    it('should have Date object as x', function () {
+                        var xs = chart.internal.data.xs;
+                        expect(+xs.data1[0]).toBe(+new Date(2013, 0, 1, 0, 0, 0));
+                        expect(+xs.data1[1]).toBe(+new Date(2013, 0, 2, 0, 0, 0));
+                        expect(+xs.data1[2]).toBe(+new Date(2013, 0, 3, 0, 0, 0));
+                        expect(+xs.data2[0]).toBe(+new Date(2013, 0, 1, 0, 0, 0));
+                        expect(+xs.data2[1]).toBe(+new Date(2013, 0, 2, 0, 0, 0));
+                        expect(+xs.data2[2]).toBe(+new Date(2013, 0, 3, 0, 0, 0));
+                    });
+                });
             });
@@ -181,43 +449,2 @@ });
 
-            describe('as unixtime string', function () {
-
-                it('should upate args', function () {
-                    args = {
-                        data: {
-                            x : 'date',
-                            columns: [
-                                ['date', "1417622461123", "1417622522345"],
-                                ['data1', 30, 200],
-                                ['data2', 130, 300]
-                            ]
-                        },
-                        axis: {
-                            x: {
-                                type: 'timeseries',
-                                tick: {
-                                    format: '%Y-%m-%d %H:%M:%S.%L',
-                                    multiline: false
-                                }
-                            }
-                        }
-                    };
-                    expect(true).toBeTruthy();
-                });
-
-                it('should have correct number of xs', function () {
-                    expect(Object.keys(chart.internal.data.xs).length).toBe(2);
-                    expect(chart.internal.data.xs.data1.length).toBe(2);
-                    expect(chart.internal.data.xs.data2.length).toBe(2);
-                });
-
-                it('should have Date object as x', function () {
-                    var xs = chart.internal.data.xs;
-                    expect(+xs.data1[0]).toBe(1417622461123);
-                    expect(+xs.data1[1]).toBe(1417622522345);
-                    expect(+xs.data2[0]).toBe(1417622461123);
-                    expect(+xs.data2[1]).toBe(1417622522345);
-                });
-
-            });
-
         });
@@ -224,0 +451,0 @@

spec/domain-spec.js

@@ -1,6 +0,5 @@
-
 describe('c3 chart domain', function () {
     'use strict';
 
-    var chart, d3;
+    var chart;
 
@@ -22,3 +21,2 @@ var args = {
         chart = window.initChart(chart, args, done);
-        d3 = chart.internal.d3;
     });
@@ -25,0 +23,0 @@

spec/grid-spec.js

@@ -1,33 +0,34 @@
-
 describe('c3 chart grid', function () {
     'use strict';
 
-    var chart, d3;
+    var chart, args;
 
-    var args = {
-        data: {
-            columns: [
-                ['data1', 30, 200, 100, 400, 150, 250]
-            ]
-        },
-        axis: {
-            y: {
-                tick: {
-                }
-            }
-        },
-        grid: {
-            y: {
-                show: false
-            }
-        }
-    };
-
     beforeEach(function (done) {
         chart = window.initChart(chart, args, done);
-        d3 = chart.internal.d3;
     });
 
-    describe('y grid', function () {
+    describe('y grid show', function () {
 
+        it('should update args', function () {
+            args = {
+                data: {
+                    columns: [
+                        ['data1', 30, 200, 100, 400, 150, 250]
+                    ]
+                },
+                axis: {
+                    y: {
+                        tick: {
+                        }
+                    }
+                },
+                grid: {
+                    y: {
+                        show: false
+                    }
+                }
+            };
+            expect(true).toBeTruthy();
+        });
+
         it('should not show y grids', function () {
@@ -77,3 +78,104 @@ expect(chart.internal.main.select('.c3-ygrids').size()).toBe(0);
         });
+    });
 
+    describe('y grid lines', function () {
+
+        describe('position', function () {
+
+            it('should update args', function () {
+                args = {
+                    data: {
+                        columns: [
+                            ['data1', 10, 200, 100, 400, 150, 250]
+                        ]
+                    },
+                    grid: {
+                        y: {
+                            lines: [
+                                {value: 30, text: 'Lable 30', position: 'start'},
+                                {value: 145, text: 'Lable 145', position: 'middle'},
+                                {value: 225, text: 'Lable 225'}
+                            ]
+                        }
+                    }
+                };
+                expect(true).toBeTruthy();
+            });
+
+            it('should show 3 grid lines', function () {
+                expect(chart.internal.main.selectAll('.c3-ygrid-lines .c3-ygrid-line').size()).toBe(3);
+            });
+
+            it('should locate grid lines properly', function () {
+                var lines = chart.internal.main.selectAll('.c3-ygrid-lines .c3-ygrid-line'),
+                    expectedY1s = [373, 268, 196];
+                lines.each(function (d, i) {
+                    var y1 = d3.select(this).select('line').attr('y1');
+                    expect(y1).toBeCloseTo(expectedY1s[i], -2);
+                });
+            });
+
+            it('should locate grid texts properly', function () {
+                var lines = chart.internal.main.selectAll('.c3-ygrid-lines .c3-ygrid-line'),
+                    expectedPositions = ['start', 'middle', 'end'],
+                    expectedDxs = [4, 0, -4];
+                lines.each(function (d, i) {
+                    var text = d3.select(this).select('text'),
+                        textAnchor = text.attr('text-anchor'),
+                        dx = text.attr('dx');
+                    expect(textAnchor).toBe(expectedPositions[i]);
+                    expect(+dx).toBe(expectedDxs[i]);
+                });
+            });
+
+            it('should update args', function () {
+                args = {
+                    data: {
+                        columns: [
+                            ['data1', 10, 200, 100, 400, 150, 250]
+                        ]
+                    },
+                    axis: {
+                        rotated: true
+                    },
+                    grid: {
+                        y: {
+                            lines: [
+                                {value: 30, text: 'Lable 30', position: 'start'},
+                                {value: 145, text: 'Lable 145', position: 'middle'},
+                                {value: 225, text: 'Lable 225'}
+                            ]
+                        }
+                    }
+                };
+                expect(true).toBeTruthy();
+            });
+
+            it('should show 3 grid lines', function () {
+                expect(chart.internal.main.selectAll('.c3-ygrid-lines .c3-ygrid-line').size()).toBe(3);
+            });
+
+            it('should locate grid lines properly', function () {
+                var lines = chart.internal.main.selectAll('.c3-ygrid-lines .c3-ygrid-line'),
+                    expectedX1s = [75, 220, 321];
+                lines.each(function (d, i) {
+                    var x1 = d3.select(this).select('line').attr('x1');
+                    expect(x1).toBeCloseTo(expectedX1s[i], -2);
+                });
+            });
+
+            it('should locate grid texts properly', function () {
+                var lines = chart.internal.main.selectAll('.c3-ygrid-lines .c3-ygrid-line'),
+                    expectedPositions = ['start', 'middle', 'end'],
+                    expectedDxs = [4, 0, -4];
+                lines.each(function (d, i) {
+                    var text = d3.select(this).select('text'),
+                        textAnchor = text.attr('text-anchor'),
+                        dx = text.attr('dx');
+                    expect(textAnchor).toBe(expectedPositions[i]);
+                    expect(+dx).toBe(expectedDxs[i]);
+                });
+            });
+
+        });
     });
@@ -83,2 +185,101 @@
 
+        describe('position', function () {
+
+            it('should have correct height', function () {
+                args = {
+                    data: {
+                        columns: [
+                            ['data1', 30, 200, 100, 400],
+                        ]
+                    },
+                    grid: {
+                        x: {
+                            lines: [
+                                {value: 1, text: 'Label 1', position: 'start'},
+                                {value: 2, text: 'Label 2', position: 'middle'},
+                                {value: 3, text: 'Label 3'},
+                            ]
+                        }
+                    },
+                };
+                expect(true).toBeTruthy();
+            });
+
+            it('should show 3 grid lines', function () {
+                expect(chart.internal.main.selectAll('.c3-xgrid-lines .c3-xgrid-line').size()).toBe(3);
+            });
+
+            it('should locate grid lines properly', function () {
+                var lines = chart.internal.main.selectAll('.c3-xgrid-lines .c3-xgrid-line'),
+                    expectedX1s = [202, 397, 593];
+                lines.each(function (d, i) {
+                    var x1 = d3.select(this).select('line').attr('x1');
+                    expect(x1).toBeCloseTo(expectedX1s[i], -2);
+                });
+            });
+
+            it('should locate grid texts properly', function () {
+                var lines = chart.internal.main.selectAll('.c3-xgrid-lines .c3-xgrid-line'),
+                    expectedPositions = ['start', 'middle', 'end'],
+                    expectedDxs = [4, 0, -4];
+                lines.each(function (d, i) {
+                    var text = d3.select(this).select('text'),
+                        textAnchor = text.attr('text-anchor'),
+                        dx = text.attr('dx');
+                    expect(textAnchor).toBe(expectedPositions[i]);
+                    expect(+dx).toBe(expectedDxs[i]);
+                });
+            });
+
+            it('should update args', function () {
+                args = {
+                    data: {
+                        columns: [
+                            ['data1', 30, 200, 100, 400],
+                        ]
+                    },
+                    axis: {
+                        rotated: true
+                    },
+                    grid: {
+                        x: {
+                            lines: [
+                                {value: 1, text: 'Label 1', position: 'start'},
+                                {value: 2, text: 'Label 2', position: 'middle'},
+                                {value: 3, text: 'Label 3'},
+                            ]
+                        }
+                    },
+                };
+                expect(true).toBeTruthy();
+            });
+
+            it('should show 3 grid lines', function () {
+                expect(chart.internal.main.selectAll('.c3-xgrid-lines .c3-xgrid-line').size()).toBe(3);
+            });
+
+            it('should locate grid lines properly', function () {
+                var lines = chart.internal.main.selectAll('.c3-xgrid-lines .c3-xgrid-line'),
+                    expectedY1s = [144, 283, 421];
+                lines.each(function (d, i) {
+                    var y1 = d3.select(this).select('line').attr('y1');
+                    expect(y1).toBeCloseTo(expectedY1s[i], -2);
+                });
+            });
+
+            it('should locate grid texts properly', function () {
+                var lines = chart.internal.main.selectAll('.c3-xgrid-lines .c3-xgrid-line'),
+                    expectedPositions = ['start', 'middle', 'end'],
+                    expectedDxs = [4, 0, -4];
+                lines.each(function (d, i) {
+                    var text = d3.select(this).select('text'),
+                        textAnchor = text.attr('text-anchor'),
+                        dx = text.attr('dx');
+                    expect(textAnchor).toBe(expectedPositions[i]);
+                    expect(+dx).toBe(expectedDxs[i]);
+                });
+            });
+
+        });
+
         describe('with padding.top', function () {
@@ -164,5 +365,4 @@
         });
-
     });
 
 });

spec/interaction-spec.js

@@ -1,20 +0,8 @@
-
 describe('c3 chart interaction', function () {
     'use strict';
 
-    var chart, d3;
+    var chart, args;
 
-    var args = {
-        data: {
-            columns: [
-                ['data1', 30, 200, 100, 400, 150, 250],
-                ['data2', 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;
     });
@@ -21,0 +9,0 @@

spec/legend-spec.js

@@ -1,29 +0,8 @@
-
 describe('c3 chart legend', function () {
     'use strict';
 
-    var chart, d3;
+    var chart, args;
 
-    var args = {
-        data: {
-            columns: [
-                ['data1', 30, 200, 100, 400, 150, 250],
-                ['data2', 50, 20, 10, 40, 15, 25]
-            ]
-        }
-    };
-
     beforeEach(function (done) {
-        if (typeof chart === 'undefined') {
-            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);
+        chart = window.initChart(chart, args, done);
     });
@@ -33,2 +12,14 @@
 
+        it('should update args', function () {
+            args = {
+                data: {
+                    columns: [
+                        ['data1', 30, 200, 100, 400, 150, 250],
+                        ['data2', 50, 20, 10, 40, 15, 25]
+                    ]
+                }
+            };
+            expect(true).toBeTruthy();
+        });
+
         it('should be located on the center of chart', function () {
@@ -44,6 +35,14 @@ var box = chart.internal.legend.node().getBoundingClientRect();
         it('should change the legend to "inset" successfully', function () {
-            args.legend = {
-                position: 'inset',
-                inset: {
-                    step: null
+            args = {
+                data: {
+                    columns: [
+                        ['data1', 30, 200, 100, 400, 150, 250],
+                        ['data2', 50, 20, 10, 40, 15, 25]
+                    ]
+                },
+                legend: {
+                    position: 'inset',
+                    inset: {
+                        step: null
+                    }
                 }
@@ -50,0 +49,0 @@ };

spec/shape.bar-spec.js

@@ -1,2 +0,1 @@
-
 var setMouseEvent = window.setMouseEvent;
@@ -7,21 +6,6 @@
 
-    var chart, d3;
+    var chart, args;
 
-    var args = {
-        data: {
-            columns: [
-                ['data1', 30, 200, 100, 400, -150, 250],
-                ['data2', 50, 20, 10, 40, 15, 25],
-                ['data3', -150, 120, 110, 140, 115, 125]
-            ],
-            type: 'bar'
-        },
-        axis: {
-            rotated: false
-        }
-    };
-
     beforeEach(function (done) {
         chart = window.initChart(chart, args, done);
-        d3 = chart.internal.d3;
     });
@@ -33,2 +17,19 @@
 
+            it('should update args', function () {
+                args = {
+                    data: {
+                        columns: [
+                            ['data1', 30, 200, 100, 400, -150, 250],
+                            ['data2', 50, 20, 10, 40, 15, 25],
+                            ['data3', -150, 120, 110, 140, 115, 125]
+                        ],
+                        type: 'bar'
+                    },
+                    axis: {
+                        rotated: false
+                    }
+                };
+                expect(true).toBeTruthy();
+            });
+
             it('should not be within bar', function () {
@@ -35,0 +36,0 @@ var bar = d3.select('.c3-target-data1 .c3-bar-0').node();

spec/shape.line-spec.js

@@ -1,21 +0,8 @@
-
 describe('c3 chart shape line', function () {
     'use strict';
 
-    var chart, d3;
+    var chart, args;
 
-    var args = {
-        data: {
-            columns: [
-                ['data1', 30, 200, 100, 400, -150, 250],
-                ['data2', 50, 20, 10, 40, 15, 25],
-                ['data3', -150, 120, 110, 140, 115, 125]
-            ],
-            type: 'line'
-        }
-    };
-
     beforeEach(function (done) {
         chart = window.initChart(chart, args, done);
-        d3 = chart.internal.d3;
     });
@@ -25,2 +12,16 @@
 
+        it('should update args', function () {
+            args = {
+                data: {
+                    columns: [
+                        ['data1', 30, 200, 100, 400, -150, 250],
+                        ['data2', 50, 20, 10, 40, 15, 25],
+                        ['data3', -150, 120, 110, 140, 115, 125]
+                    ],
+                    type: 'line'
+                }
+            };
+            expect(true).toBeTruthy();
+        });
+
         it("should not have shape-rendering when it's line chart", function () {
@@ -27,0 +28,0 @@ d3.selectAll('.c3-line').each(function () {

spec/tooltip-spec.js

@@ -1,8 +0,5 @@
-var jasmine = window.jasmine,
-    beforeAll = window.beforeAll;
-
 describe('c3 chart tooltip', function () {
     'use strict';
 
-    var chart, d3;
+    var chart;
     var tooltipConfiguration;
@@ -25,3 +22,2 @@
         chart = window.initChart(chart, args(), done);
-        d3 = chart.internal.d3;
     });
@@ -28,0 +24,0 @@

spec/type-spec.js

@@ -1,21 +0,8 @@
-
 describe('c3 chart types', function () {
     'use strict';
 
-    var chart, d3;
+    var chart, args;
 
-    var args = {
-        data: {
-            columns: [
-                ['data1', 30, 200, 100, 400, 150, 250],
-                ['data2', 50, 20, 10, 40, 15, 25],
-                ['data3', 150, 120, 110, 140, 115, 125]
-            ],
-            type: 'pie'
-        }
-    };
-
     beforeEach(function (done) {
         chart = window.initChart(chart, args, done);
-        d3 = chart.internal.d3;
     });
@@ -27,2 +14,16 @@
 
+            it('should update args', function () {
+                args = {
+                    data: {
+                        columns: [
+                            ['data1', 30, 200, 100, 400, 150, 250],
+                            ['data2', 50, 20, 10, 40, 15, 25],
+                            ['data3', 150, 120, 110, 140, 115, 125]
+                        ],
+                        type: 'pie'
+                    }
+                };
+                expect(true).toBeTruthy();
+            });
+
             it('should return true', function () {
@@ -29,0 +30,0 @@ expect(chart.internal.hasArcType()).toBeTruthy();

spec/zoom-spec.js

@@ -1,6 +0,5 @@
-
 describe('c3 chart zoom', function () {
     'use strict';
 
-    var chart, d3;
+    var chart;
 
@@ -29,3 +28,2 @@ var args = {
         chart = window.initChart(chart, args, done);
-        d3 = chart.internal.d3;
     });
@@ -32,0 +30,0 @@

src/api.axis.js

@@ -6,5 +6,5 @@ c3_chart_fn.axis = function () {};
         Object.keys(labels).forEach(function (axisId) {
-            $$.setAxisLabelText(axisId, labels[axisId]);
+            $$.axis.setLabelText(axisId, labels[axisId]);
         });
-        $$.updateAxisLabels();
+        $$.axis.updateLabels();
     }
@@ -11,0 +11,0 @@ // TODO: return some values?

src/api.focus.js

@@ -27,3 +27,2 @@ c3_chart_fn.focus = function (targetIds) {
 
-    this.revert();
     candidates.classed(CLASS.focused, false).classed(CLASS.defocused, true);
@@ -53,2 +52,7 @@ if ($$.hasArcType()) {
         $$.showLegend(targetIds.filter($$.isLegendToShow.bind($$)));
+        $$.legend.selectAll($$.selectorLegends(targetIds))
+            .filter(function () {
+                return $$.d3.select(this).classed(CLASS.legendItemFocused);
+            })
+            .classed(CLASS.legendItemFocused, false);
     }
@@ -55,0 +59,0 @@

src/arc.js

@@ -39,2 +39,5 @@ c3_chart_internal_fn.initPie = function () {
     });
+    if (isNaN(d.startAngle)) {
+        d.startAngle = 0;
+    }
     if (isNaN(d.endAngle)) {
@@ -312,2 +315,5 @@ d.endAngle = d.startAngle;
             //                }
+            if (isNaN(this._current.startAngle)) {
+                this._current.startAngle = 0;
+            }
             if (isNaN(this._current.endAngle)) {
@@ -314,0 +320,0 @@ this._current.endAngle = this._current.startAngle;

src/axis.js

@@ -1,3 +0,10 @@
-c3_chart_internal_fn.initAxis = function () {
-    var $$ = this, config = $$.config, main = $$.main;
+function Axis(owner) {
+    API.call(this, owner);
+}
+
+inherit(API, Axis);
+
+Axis.prototype.init = function init() {
+
+    var $$ = this.owner, config = $$.config, main = $$.main;
     $$.axes.x = main.append("g")
@@ -11,4 +18,3 @@ .attr("class", CLASS.axis + ' ' + CLASS.axisX)
         .attr("transform", config.axis_rotated ? "rotate(-90)" : "")
-        .style("text-anchor", $$.textAnchorForXAxisLabel.bind($$));
-
+        .style("text-anchor", this.textAnchorForXAxisLabel.bind(this));
     $$.axes.y = main.append("g")
@@ -22,3 +28,3 @@ .attr("class", CLASS.axis + ' ' + CLASS.axisY)
         .attr("transform", config.axis_rotated ? "" : "rotate(-90)")
-        .style("text-anchor", $$.textAnchorForYAxisLabel.bind($$));
+        .style("text-anchor", this.textAnchorForYAxisLabel.bind(this));
 
@@ -33,6 +39,6 @@ $$.axes.y2 = main.append("g")
         .attr("transform", config.axis_rotated ? "" : "rotate(-90)")
-        .style("text-anchor", $$.textAnchorForY2AxisLabel.bind($$));
+        .style("text-anchor", this.textAnchorForY2AxisLabel.bind(this));
 };
-c3_chart_internal_fn.getXAxis = function (scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition) {
-    var $$ = this, config = $$.config,
+Axis.prototype.getXAxis = function getXAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition) {
+    var $$ = this.owner, config = $$.config,
         axisParams = {
@@ -58,10 +64,2 @@ isCategory: $$.isCategorized(),
         }
-    } else {
-        // TODO: move this to c3_axis
-        axis.tickOffset = function () {
-            var scale = this.scale(),
-                edgeX = $$.getEdgeX($$.data.targets), diff = scale(edgeX[1]) - scale(edgeX[0]),
-                base = diff ? diff : (config.axis_rotated ? $$.height : $$.width);
-            return (base / $$.getMaxDataCount()) / 2;
-        };
     }
@@ -71,6 +69,6 @@
 };
-c3_chart_internal_fn.updateXAxisTickValues = function (targets, axis) {
-    var $$ = this, config = $$.config, tickValues;
+Axis.prototype.updateXAxisTickValues = function updateXAxisTickValues(targets, axis) {
+    var $$ = this.owner, config = $$.config, tickValues;
     if (config.axis_x_tick_fit || config.axis_x_tick_count) {
-        tickValues = $$.generateTickValues($$.mapTargetsToUniqueXs(targets), config.axis_x_tick_count, $$.isTimeSeries());
+        tickValues = this.generateTickValues($$.mapTargetsToUniqueXs(targets), config.axis_x_tick_count, $$.isTimeSeries());
     }
@@ -85,7 +83,10 @@ if (axis) {
 };
-c3_chart_internal_fn.getYAxis = function (scale, orient, tickFormat, tickValues, withOuterTick) {
+Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, withOuterTick) {
     var axisParams = {withOuterTick: withOuterTick},
-        axis = c3_axis(this.d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat);
-    if (this.isTimeSeriesY()) {
-        axis.ticks(this.d3.time[this.config.axis_y_tick_time_value], this.config.axis_y_tick_time_interval);
+        $$ = this.owner,
+        d3 = $$.d3,
+        config = $$.config,
+        axis = c3_axis(d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat);
+    if ($$.isTimeSeriesY()) {
+        axis.ticks(d3.time[config.axis_y_tick_time_value], config.axis_y_tick_time_interval);
     } else {
@@ -96,8 +97,8 @@ axis.tickValues(tickValues);
 };
-c3_chart_internal_fn.getAxisId = function (id) {
-    var config = this.config;
+Axis.prototype.getId = function getId(id) {
+    var config = this.owner.config;
     return id in config.data_axes ? config.data_axes[id] : 'y';
 };
-c3_chart_internal_fn.getXAxisTickFormat = function () {
-    var $$ = this, config = $$.config,
+Axis.prototype.getXAxisTickFormat = function getXAxisTickFormat() {
+    var $$ = this.owner, config = $$.config,
         format = $$.isTimeSeries() ? $$.defaultAxisTimeFormat : $$.isCategorized() ? $$.categoryName : function (v) { return v < 0 ? v.toFixed(0) : v; };
@@ -115,16 +116,16 @@ if (config.axis_x_tick_format) {
 };
-c3_chart_internal_fn.getAxisTickValues = function (tickValues, axis) {
+Axis.prototype.getTickValues = function getTickValues(tickValues, axis) {
     return tickValues ? tickValues : axis ? axis.tickValues() : undefined;
 };
-c3_chart_internal_fn.getXAxisTickValues = function () {
-    return this.getAxisTickValues(this.config.axis_x_tick_values, this.xAxis);
+Axis.prototype.getXAxisTickValues = function getXAxisTickValues() {
+    return this.getTickValues(this.owner.config.axis_x_tick_values, this.owner.xAxis);
 };
-c3_chart_internal_fn.getYAxisTickValues = function () {
-    return this.getAxisTickValues(this.config.axis_y_tick_values, this.yAxis);
+Axis.prototype.getYAxisTickValues = function getYAxisTickValues() {
+    return this.getTickValues(this.owner.config.axis_y_tick_values, this.owner.yAxis);
 };
-c3_chart_internal_fn.getY2AxisTickValues = function () {
-    return this.getAxisTickValues(this.config.axis_y2_tick_values, this.y2Axis);
+Axis.prototype.getY2AxisTickValues = function getY2AxisTickValues() {
+    return this.getTickValues(this.owner.config.axis_y2_tick_values, this.owner.y2Axis);
 };
-c3_chart_internal_fn.getAxisLabelOptionByAxisId = function (axisId) {
-    var $$ = this, config = $$.config, option;
+Axis.prototype.getLabelOptionByAxisId = function getLabelOptionByAxisId(axisId) {
+    var $$ = this.owner, config = $$.config, option;
     if (axisId === 'y') {
@@ -139,9 +140,9 @@ option = config.axis_y_label;
 };
-c3_chart_internal_fn.getAxisLabelText = function (axisId) {
-    var option = this.getAxisLabelOptionByAxisId(axisId);
+Axis.prototype.getLabelText = function getLabelText(axisId) {
+    var option = this.getLabelOptionByAxisId(axisId);
     return isString(option) ? option : option ? option.text : null;
 };
-c3_chart_internal_fn.setAxisLabelText = function (axisId, text) {
-    var $$ = this, config = $$.config,
-        option = $$.getAxisLabelOptionByAxisId(axisId);
+Axis.prototype.setLabelText = function setLabelText(axisId, text) {
+    var $$ = this.owner, config = $$.config,
+        option = this.getLabelOptionByAxisId(axisId);
     if (isString(option)) {
@@ -159,4 +160,4 @@ if (axisId === 'y') {
 };
-c3_chart_internal_fn.getAxisLabelPosition = function (axisId, defaultPosition) {
-    var option = this.getAxisLabelOptionByAxisId(axisId),
+Axis.prototype.getLabelPosition = function getLabelPosition(axisId, defaultPosition) {
+    var option = this.getLabelOptionByAxisId(axisId),
         position = (option && typeof option === 'object' && option.position) ? option.position : defaultPosition;
@@ -174,25 +175,25 @@ return {
 };
-c3_chart_internal_fn.getXAxisLabelPosition = function () {
-    return this.getAxisLabelPosition('x', this.config.axis_rotated ? 'inner-top' : 'inner-right');
+Axis.prototype.getXAxisLabelPosition = function getXAxisLabelPosition() {
+    return this.getLabelPosition('x', this.owner.config.axis_rotated ? 'inner-top' : 'inner-right');
 };
-c3_chart_internal_fn.getYAxisLabelPosition = function () {
-    return this.getAxisLabelPosition('y', this.config.axis_rotated ? 'inner-right' : 'inner-top');
+Axis.prototype.getYAxisLabelPosition = function getYAxisLabelPosition() {
+    return this.getLabelPosition('y', this.owner.config.axis_rotated ? 'inner-right' : 'inner-top');
 };
-c3_chart_internal_fn.getY2AxisLabelPosition = function () {
-    return this.getAxisLabelPosition('y2', this.config.axis_rotated ? 'inner-right' : 'inner-top');
+Axis.prototype.getY2AxisLabelPosition = function getY2AxisLabelPosition() {
+    return this.getLabelPosition('y2', this.owner.config.axis_rotated ? 'inner-right' : 'inner-top');
 };
-c3_chart_internal_fn.getAxisLabelPositionById = function (id) {
+Axis.prototype.getLabelPositionById = function getLabelPositionById(id) {
     return id === 'y2' ? this.getY2AxisLabelPosition() : id === 'y' ? this.getYAxisLabelPosition() : this.getXAxisLabelPosition();
 };
-c3_chart_internal_fn.textForXAxisLabel = function () {
-    return this.getAxisLabelText('x');
+Axis.prototype.textForXAxisLabel = function textForXAxisLabel() {
+    return this.getLabelText('x');
 };
-c3_chart_internal_fn.textForYAxisLabel = function () {
-    return this.getAxisLabelText('y');
+Axis.prototype.textForYAxisLabel = function textForYAxisLabel() {
+    return this.getLabelText('y');
 };
-c3_chart_internal_fn.textForY2AxisLabel = function () {
-    return this.getAxisLabelText('y2');
+Axis.prototype.textForY2AxisLabel = function textForY2AxisLabel() {
+    return this.getLabelText('y2');
 };
-c3_chart_internal_fn.xForAxisLabel = function (forHorizontal, position) {
-    var $$ = this;
+Axis.prototype.xForAxisLabel = function xForAxisLabel(forHorizontal, position) {
+    var $$ = this.owner;
     if (forHorizontal) {
@@ -204,3 +205,3 @@ return position.isLeft ? 0 : position.isCenter ? $$.width / 2 : $$.width;
 };
-c3_chart_internal_fn.dxForAxisLabel = function (forHorizontal, position) {
+Axis.prototype.dxForAxisLabel = function dxForAxisLabel(forHorizontal, position) {
     if (forHorizontal) {
@@ -212,3 +213,3 @@ return position.isLeft ? "0.5em" : position.isRight ? "-0.5em" : "0";
 };
-c3_chart_internal_fn.textAnchorForAxisLabel = function (forHorizontal, position) {
+Axis.prototype.textAnchorForAxisLabel = function textAnchorForAxisLabel(forHorizontal, position) {
     if (forHorizontal) {
@@ -220,25 +221,25 @@ return position.isLeft ? 'start' : position.isCenter ? 'middle' : 'end';
 };
-c3_chart_internal_fn.xForXAxisLabel = function () {
-    return this.xForAxisLabel(!this.config.axis_rotated, this.getXAxisLabelPosition());
+Axis.prototype.xForXAxisLabel = function xForXAxisLabel() {
+    return this.xForAxisLabel(!this.owner.config.axis_rotated, this.getXAxisLabelPosition());
 };
-c3_chart_internal_fn.xForYAxisLabel = function () {
-    return this.xForAxisLabel(this.config.axis_rotated, this.getYAxisLabelPosition());
+Axis.prototype.xForYAxisLabel = function xForYAxisLabel() {
+    return this.xForAxisLabel(this.owner.config.axis_rotated, this.getYAxisLabelPosition());
 };
-c3_chart_internal_fn.xForY2AxisLabel = function () {
-    return this.xForAxisLabel(this.config.axis_rotated, this.getY2AxisLabelPosition());
+Axis.prototype.xForY2AxisLabel = function xForY2AxisLabel() {
+    return this.xForAxisLabel(this.owner.config.axis_rotated, this.getY2AxisLabelPosition());
 };
-c3_chart_internal_fn.dxForXAxisLabel = function () {
-    return this.dxForAxisLabel(!this.config.axis_rotated, this.getXAxisLabelPosition());
+Axis.prototype.dxForXAxisLabel = function dxForXAxisLabel() {
+    return this.dxForAxisLabel(!this.owner.config.axis_rotated, this.getXAxisLabelPosition());
 };
-c3_chart_internal_fn.dxForYAxisLabel = function () {
-    return this.dxForAxisLabel(this.config.axis_rotated, this.getYAxisLabelPosition());
+Axis.prototype.dxForYAxisLabel = function dxForYAxisLabel() {
+    return this.dxForAxisLabel(this.owner.config.axis_rotated, this.getYAxisLabelPosition());
 };
-c3_chart_internal_fn.dxForY2AxisLabel = function () {
-    return this.dxForAxisLabel(this.config.axis_rotated, this.getY2AxisLabelPosition());
+Axis.prototype.dxForY2AxisLabel = function dxForY2AxisLabel() {
+    return this.dxForAxisLabel(this.owner.config.axis_rotated, this.getY2AxisLabelPosition());
 };
-c3_chart_internal_fn.dyForXAxisLabel = function () {
-    var $$ = this, config = $$.config,
-        position = $$.getXAxisLabelPosition();
+Axis.prototype.dyForXAxisLabel = function dyForXAxisLabel() {
+    var $$ = this.owner, config = $$.config,
+        position = this.getXAxisLabelPosition();
     if (config.axis_rotated) {
-        return position.isInner ? "1.2em" : -25 - $$.getMaxTickWidth('x');
+        return position.isInner ? "1.2em" : -25 - this.getMaxTickWidth('x');
     } else {
@@ -248,14 +249,14 @@ return position.isInner ? "-0.5em" : config.axis_x_height ? config.axis_x_height - 10 : "3em";
 };
-c3_chart_internal_fn.dyForYAxisLabel = function () {
-    var $$ = this,
-        position = $$.getYAxisLabelPosition();
+Axis.prototype.dyForYAxisLabel = function dyForYAxisLabel() {
+    var $$ = this.owner,
+        position = this.getYAxisLabelPosition();
     if ($$.config.axis_rotated) {
         return position.isInner ? "-0.5em" : "3em";
     } else {
-        return position.isInner ? "1.2em" : -10 - ($$.config.axis_y_inner ? 0 : ($$.getMaxTickWidth('y') + 10));
+        return position.isInner ? "1.2em" : -10 - ($$.config.axis_y_inner ? 0 : (this.getMaxTickWidth('y') + 10));
     }
 };
-c3_chart_internal_fn.dyForY2AxisLabel = function () {
-    var $$ = this,
-        position = $$.getY2AxisLabelPosition();
+Axis.prototype.dyForY2AxisLabel = function dyForY2AxisLabel() {
+    var $$ = this.owner,
+        position = this.getY2AxisLabelPosition();
     if ($$.config.axis_rotated) {
@@ -267,22 +268,21 @@ return position.isInner ? "1.2em" : "-2.2em";
 };
-c3_chart_internal_fn.textAnchorForXAxisLabel = function () {
-    var $$ = this;
-    return $$.textAnchorForAxisLabel(!$$.config.axis_rotated, $$.getXAxisLabelPosition());
+Axis.prototype.textAnchorForXAxisLabel = function textAnchorForXAxisLabel() {
+    var $$ = this.owner;
+    return this.textAnchorForAxisLabel(!$$.config.axis_rotated, this.getXAxisLabelPosition());
 };
-c3_chart_internal_fn.textAnchorForYAxisLabel = function () {
-    var $$ = this;
-    return $$.textAnchorForAxisLabel($$.config.axis_rotated, $$.getYAxisLabelPosition());
+Axis.prototype.textAnchorForYAxisLabel = function textAnchorForYAxisLabel() {
+    var $$ = this.owner;
+    return this.textAnchorForAxisLabel($$.config.axis_rotated, this.getYAxisLabelPosition());
 };
-c3_chart_internal_fn.textAnchorForY2AxisLabel = function () {
-    var $$ = this;
-    return $$.textAnchorForAxisLabel($$.config.axis_rotated, $$.getY2AxisLabelPosition());
+Axis.prototype.textAnchorForY2AxisLabel = function textAnchorForY2AxisLabel() {
+    var $$ = this.owner;
+    return this.textAnchorForAxisLabel($$.config.axis_rotated, this.getY2AxisLabelPosition());
 };
-
-c3_chart_internal_fn.xForRotatedTickText = function (r) {
+Axis.prototype.xForRotatedTickText = function xForRotatedTickText(r) {
     return 8 * Math.sin(Math.PI * (r / 180));
 };
-c3_chart_internal_fn.yForRotatedTickText = function (r) {
+Axis.prototype.yForRotatedTickText = function yForRotatedTickText(r) {
     return 11.5 - 2.5 * (r / 15) * (r > 0 ? 1 : -1);
 };
-c3_chart_internal_fn.rotateTickText = function (axis, transition, rotate) {
+Axis.prototype.rotateTickText = function rotateTickText(axis, transition, rotate) {
     axis.selectAll('.tick text')
@@ -296,5 +296,4 @@ .style("text-anchor", rotate > 0 ? "start" : "end");
 };
-
-c3_chart_internal_fn.getMaxTickWidth = function (id, withoutRecompute) {
-    var $$ = this, config = $$.config,
+Axis.prototype.getMaxTickWidth = function getMaxTickWidth(id, withoutRecompute) {
+    var $$ = this.owner, config = $$.config,
         maxWidth = 0, targetsToShow, scale, axis, body, svg;
@@ -308,17 +307,17 @@ if (withoutRecompute && $$.currentMaxTickWidths[id]) {
             scale = $$.y.copy().domain($$.getYDomain(targetsToShow, 'y'));
-            axis = $$.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues);
+            axis = this.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues);
         } else if (id === 'y2') {
             scale = $$.y2.copy().domain($$.getYDomain(targetsToShow, 'y2'));
-            axis = $$.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues);
+            axis = this.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues);
         } else {
             scale = $$.x.copy().domain($$.getXDomain(targetsToShow));
-            axis = $$.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues);
-            $$.updateXAxisTickValues(targetsToShow, axis);
+            axis = this.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues);
+            this.updateXAxisTickValues(targetsToShow, axis);
         }
-        body = this.d3.select('body').classed('c3', true);
-        svg = body.append('svg').style('visibility', 'hidden');
+        body = $$.d3.select('body').classed('c3', true);
+        svg = body.append("svg").style('visibility', 'hidden').style('position', 'fixed').style('top', 0).style('left', 0),
         svg.append('g').call(axis).each(function () {
             $$.d3.select(this).selectAll('text tspan').each(function () {
                 var box = this.getBoundingClientRect();
-                if (box.left >= 0 && maxWidth < box.width) { maxWidth = box.width; }
+                if (maxWidth < box.width) { maxWidth = box.width; }
             });
@@ -336,4 +335,4 @@ });
 
-c3_chart_internal_fn.updateAxisLabels = function (withTransition) {
-    var $$ = this;
+Axis.prototype.updateLabels = function updateLabels(withTransition) {
+    var $$ = this.owner;
     var axisXLabel = $$.main.select('.' + CLASS.axisX + ' .' + CLASS.axisXLabel),
@@ -343,19 +342,18 @@ axisYLabel = $$.main.select('.' + CLASS.axisY + ' .' + CLASS.axisYLabel),
     (withTransition ? axisXLabel.transition() : axisXLabel)
-        .attr("x", $$.xForXAxisLabel.bind($$))
-        .attr("dx", $$.dxForXAxisLabel.bind($$))
-        .attr("dy", $$.dyForXAxisLabel.bind($$))
-        .text($$.textForXAxisLabel.bind($$));
+        .attr("x", this.xForXAxisLabel.bind(this))
+        .attr("dx", this.dxForXAxisLabel.bind(this))
+        .attr("dy", this.dyForXAxisLabel.bind(this))
+        .text(this.textForXAxisLabel.bind(this));
     (withTransition ? axisYLabel.transition() : axisYLabel)
-        .attr("x", $$.xForYAxisLabel.bind($$))
-        .attr("dx", $$.dxForYAxisLabel.bind($$))
-        .attr("dy", $$.dyForYAxisLabel.bind($$))
-        .text($$.textForYAxisLabel.bind($$));
+        .attr("x", this.xForYAxisLabel.bind(this))
+        .attr("dx", this.dxForYAxisLabel.bind(this))
+        .attr("dy", this.dyForYAxisLabel.bind(this))
+        .text(this.textForYAxisLabel.bind(this));
     (withTransition ? axisY2Label.transition() : axisY2Label)
-        .attr("x", $$.xForY2AxisLabel.bind($$))
-        .attr("dx", $$.dxForY2AxisLabel.bind($$))
-        .attr("dy", $$.dyForY2AxisLabel.bind($$))
-        .text($$.textForY2AxisLabel.bind($$));
+        .attr("x", this.xForY2AxisLabel.bind(this))
+        .attr("dx", this.dxForY2AxisLabel.bind(this))
+        .attr("dy", this.dyForY2AxisLabel.bind(this))
+        .text(this.textForY2AxisLabel.bind(this));
 };
-
-c3_chart_internal_fn.getAxisPadding = function (padding, key, defaultValue, domainLength) {
+Axis.prototype.getPadding = function getPadding(padding, key, defaultValue, domainLength) {
     if (!isValue(padding[key])) {
@@ -370,8 +368,8 @@ return defaultValue;
 };
-c3_chart_internal_fn.convertPixelsToAxisPadding = function (pixels, domainLength) {
-    var length = this.config.axis_rotated ? this.width : this.height;
+Axis.prototype.convertPixelsToAxisPadding = function convertPixelsToAxisPadding(pixels, domainLength) {
+    var $$ = this.owner,
+        length = $$.config.axis_rotated ? $$.width : $$.height;
     return domainLength * (pixels / length);
 };
-
-c3_chart_internal_fn.generateTickValues = function (values, tickCount, forTimeSeries) {
+Axis.prototype.generateTickValues = function generateTickValues(values, tickCount, forTimeSeries) {
     var tickValues = values, targetCount, start, end, count, interval, i, tickValue;
@@ -402,4 +400,4 @@ if (tickCount) {
 };
-c3_chart_internal_fn.generateAxisTransitions = function (duration) {
-    var $$ = this, axes = $$.axes;
+Axis.prototype.generateTransitions = function generateTransitions(duration) {
+    var $$ = this.owner, axes = $$.axes;
     return {
@@ -412,4 +410,4 @@ axisX: duration ? axes.x.transition().duration(duration) : axes.x,
 };
-c3_chart_internal_fn.redrawAxis = function (transitions, isHidden) {
-    var $$ = this, config = $$.config;
+Axis.prototype.redraw = function redraw(transitions, isHidden) {
+    var $$ = this.owner, config = $$.config;
     $$.axes.x.style("opacity", isHidden ? 0 : 1);
@@ -425,5 +423,5 @@ $$.axes.y.style("opacity", isHidden ? 0 : 1);
     if (!config.axis_rotated && config.axis_x_tick_rotate) {
-        $$.rotateTickText($$.axes.x, transitions.axisX, config.axis_x_tick_rotate);
-        $$.rotateTickText($$.axes.subx, transitions.axisSubX, config.axis_x_tick_rotate);
+        this.rotateTickText($$.axes.x, transitions.axisX, config.axis_x_tick_rotate);
+        this.rotateTickText($$.axes.subx, transitions.axisSubX, config.axis_x_tick_rotate);
     }
 };

src/c3.axis.js

@@ -51,3 +51,4 @@ // Features:
     function textFormatted(v) {
-        return tickFormat ? tickFormat(v) : v;
+        var formatted = tickFormat ? tickFormat(v) : v;
+        return typeof formatted !== 'undefined' ? formatted : '';
     }
@@ -77,3 +78,4 @@ function getSizeFor1Char(tick) {
         g.each(function () {
-            var g = d3.select(this);
+            var g = axis.g = d3.select(this);
+
             var scale0 = this.__chart__ || scale, scale1 = this.__chart__ = copyScale();
@@ -261,5 +263,16 @@
     };
-    axis.tickOffset = function () { // This will be overwritten when normal x axis
+    axis.tickOffset = function () {
         return tickOffset;
     };
+    axis.tickInterval = function () {
+        var interval, length;
+        if (params.isCategory) {
+            interval = tickOffset * 2;
+        }
+        else {
+            length = axis.g.select('path.domain').node().getTotalLength() - outerTickSize * 2;
+            interval = length / axis.g.selectAll('line').size();
+        }
+        return interval === Infinity ? 0 : interval;
+    };
     axis.ticks = function () {
@@ -266,0 +279,0 @@ if (!arguments.length) { return tickArguments; }

src/core.js

@@ -1,5 +0,26 @@
-var c3 = { version: "0.4.9" };
+var c3 = { version: "0.4.10-rc4" };
 
-var c3_chart_fn, c3_chart_internal_fn;
+var c3_chart_fn,
+    c3_chart_internal_fn,
+    c3_chart_internal_axis_fn;
 
+function API(owner) {
+    this.owner = owner;
+}
+
+function inherit(base, derived) {
+
+    if (Object.create) {
+        derived.prototype = Object.create(base.prototype);
+    } else {
+        var f = function f() {};
+        f.prototype = base.prototype;
+        derived.prototype = new f();
+    }
+
+    derived.prototype.constructor = derived;
+
+    return derived;
+}
+
 function Chart(config) {
@@ -38,3 +59,6 @@ var $$ = this.internal = new ChartInternal(this);
     internal: {
-        fn: ChartInternal.prototype
+        fn: ChartInternal.prototype,
+        axis: {
+            fn: Axis.prototype
+        }
     }
@@ -44,4 +68,4 @@ };
 c3_chart_internal_fn = c3.chart.internal.fn;
+c3_chart_internal_axis_fn = c3.chart.internal.axis.fn;
 
-
 c3_chart_internal_fn.init = function () {
@@ -154,2 +178,4 @@ var $$ = this, config = $$.config;
 
+    $$.axis = new Axis($$);
+
     if ($$.initPie) { $$.initPie(); }
@@ -159,3 +185,11 @@ if ($$.initBrush) { $$.initBrush(); }
 
-    $$.selectChart = typeof config.bindto.node === 'function' ? config.bindto : d3.select(config.bindto);
+    if (!config.bindto) {
+        $$.selectChart = d3.selectAll([]);
+    }
+    else if (typeof config.bindto.node === 'function') {
+        $$.selectChart = config.bindto;
+    }
+    else {
+        $$.selectChart = d3.select(config.bindto);
+    }
     if ($$.selectChart.empty()) {
@@ -273,3 +307,3 @@ $$.selectChart = d3.select(document.createElement('div')).style('opacity', 0);
     // Add Axis
-    $$.initAxis();
+    $$.axis.init();
 
@@ -284,2 +318,3 @@ // Set targets
         $$.redraw({
+            withTransition: false,
             withTransform: true,
@@ -465,3 +500,3 @@ withUpdateXDomain: true,
 
-    transitions = transitions || $$.generateAxisTransitions(durationForAxis);
+    transitions = transitions || $$.axis.generateTransitions(durationForAxis);
 
@@ -485,3 +520,3 @@ // update legend and transform each g
         if (!config.axis_x_tick_values) {
-            tickValues = $$.updateXAxisTickValues(targetsToShow);
+            tickValues = $$.axis.updateXAxisTickValues(targetsToShow);
         }
@@ -501,13 +536,13 @@ } else {
     if (!config.axis_y_tick_values && config.axis_y_tick_count) {
-        $$.yAxis.tickValues($$.generateTickValues($$.y.domain(), config.axis_y_tick_count));
+        $$.yAxis.tickValues($$.axis.generateTickValues($$.y.domain(), config.axis_y_tick_count));
     }
     if (!config.axis_y2_tick_values && config.axis_y2_tick_count) {
-        $$.y2Axis.tickValues($$.generateTickValues($$.y2.domain(), config.axis_y2_tick_count));
+        $$.y2Axis.tickValues($$.axis.generateTickValues($$.y2.domain(), config.axis_y2_tick_count));
     }
 
     // axes
-    $$.redrawAxis(transitions, hideAxis);
+    $$.axis.redraw(transitions, hideAxis);
 
     // Update axis label
-    $$.updateAxisLabels(withTransition);
+    $$.axis.updateLabels(withTransition);
 
@@ -611,3 +646,3 @@ // show/hide if manual culling needed
             flow: options.flow,
-            duration: duration,
+            duration: options.flow.duration,
             drawBar: drawBar,
@@ -624,3 +659,3 @@ drawLine: drawLine,
 
-    if (duration) {
+    if ((duration || flow) && $$.isTabVisible()) { // Only use transition if tab visible. See #938.
         // transition should be derived from one transition
@@ -665,2 +700,5 @@ d3.transition().duration(duration).each(function () {
         $$.redrawCircle(cx, cy);
+        $$.redrawText(xForText, yForText, options.flow);
+        $$.redrawRegion();
+        $$.redrawGrid();
         if (config.onrendered) {
@@ -693,3 +731,3 @@ config.onrendered.call($$);
     if (!(options.withLegend && config.legend_show)) {
-        transitions = $$.generateAxisTransitions(options.withTransitionForAxis ? config.transition_duration : 0);
+        transitions = $$.axis.generateTransitions(options.withTransitionForAxis ? config.transition_duration : 0);
         // Update scales
@@ -872,3 +910,8 @@ $$.updateScales();
 c3_chart_internal_fn.observeInserted = function (selection) {
-    var $$ = this, observer = new MutationObserver(function (mutations) {
+    var $$ = this, observer;
+    if (typeof MutationObserver === 'undefined') {
+        window.console.error("MutationObserver not defined.");
+        return;
+    }
+    observer= new MutationObserver(function (mutations) {
         mutations.forEach(function (mutation) {
@@ -955,6 +998,6 @@ if (mutation.type === 'childList' && mutation.previousSibling) {
         parsedDate = date;
+    } else if (typeof date === 'string') {
+        parsedDate = $$.dataTimeFormat($$.config.data_xFormat).parse(date);
     } else if (typeof date === 'number' || !isNaN(date)) {
         parsedDate = new Date(+date);
-    } else {
-        parsedDate = $$.dataTimeFormat($$.config.data_xFormat).parse(date);
     }
@@ -966,1 +1009,16 @@ if (!parsedDate || isNaN(+parsedDate)) {
 };
+
+c3_chart_internal_fn.isTabVisible = function () {
+    var hidden;
+    if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
+        hidden = "hidden";
+    } else if (typeof document.mozHidden !== "undefined") {
+        hidden = "mozHidden";
+    } else if (typeof document.msHidden !== "undefined") {
+        hidden = "msHidden";
+    } else if (typeof document.webkitHidden !== "undefined") {
+        hidden = "webkitHidden";
+    }
+
+    return document[hidden] ? false : true;
+};

src/data.convert.js

@@ -5,2 +5,5 @@ c3_chart_internal_fn.convertUrlToData = function (url, mimeType, keys, done) {
         var d;
+        if (!data) {
+            throw new Error(error.responseURL + ' ' + error.status + ' (' + error.statusText + ')');
+        }
         if (type === 'json') {
@@ -7,0 +10,0 @@ d = $$.convertJsonToData(JSON.parse(data.response), keys);

src/domain.js

@@ -23,3 +23,3 @@ c3_chart_internal_fn.getYDomainMin = function (targets) {
                 ys[id].forEach(function (v, i) {
-                    if ($$.getAxisId(id) === $$.getAxisId(baseId) && ys[baseId] && !(hasNegativeValue && +v > 0)) {
+                    if ($$.axis.getId(id) === $$.axis.getId(baseId) && ys[baseId] && !(hasNegativeValue && +v > 0)) {
                         ys[baseId][i] += +v;
@@ -55,3 +55,3 @@ }
                 ys[id].forEach(function (v, i) {
-                    if ($$.getAxisId(id) === $$.getAxisId(baseId) && ys[baseId] && !(hasPositiveValue && +v < 0)) {
+                    if ($$.axis.getId(id) === $$.axis.getId(baseId) && ys[baseId] && !(hasPositiveValue && +v < 0)) {
                         ys[baseId][i] += +v;
@@ -67,3 +67,3 @@ }
     var $$ = this, config = $$.config,
-        targetsByAxisId = targets.filter(function (t) { return $$.getAxisId(t.id) === axisId; }),
+        targetsByAxisId = targets.filter(function (t) { return $$.axis.getId(t.id) === axisId; }),
         yTargets = xDomain ? $$.filterByXDomain(targetsByAxisId, xDomain) : targetsByAxisId,
@@ -129,12 +129,12 @@ yMin = axisId === 'y2' ? config.axis_y2_min : config.axis_y_min,
         lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, 'height');
-        padding_top += this.convertPixelsToAxisPadding(lengths[1], domainLength);
-        padding_bottom += this.convertPixelsToAxisPadding(lengths[0], domainLength);
+        padding_top += $$.axis.convertPixelsToAxisPadding(lengths[1], domainLength);
+        padding_bottom += $$.axis.convertPixelsToAxisPadding(lengths[0], domainLength);
     }
     if (axisId === 'y' && notEmpty(config.axis_y_padding)) {
-        padding_top = $$.getAxisPadding(config.axis_y_padding, 'top', padding_top, domainLength);
-        padding_bottom = $$.getAxisPadding(config.axis_y_padding, 'bottom', padding_bottom, domainLength);
+        padding_top = $$.axis.getPadding(config.axis_y_padding, 'top', padding_top, domainLength);
+        padding_bottom = $$.axis.getPadding(config.axis_y_padding, 'bottom', padding_bottom, domainLength);
     }
     if (axisId === 'y2' && notEmpty(config.axis_y2_padding)) {
-        padding_top = $$.getAxisPadding(config.axis_y2_padding, 'top', padding_top, domainLength);
-        padding_bottom = $$.getAxisPadding(config.axis_y2_padding, 'bottom', padding_bottom, domainLength);
+        padding_top = $$.axis.getPadding(config.axis_y2_padding, 'top', padding_top, domainLength);
+        padding_bottom = $$.axis.getPadding(config.axis_y2_padding, 'bottom', padding_bottom, domainLength);
     }
@@ -141,0 +141,0 @@ // Bar/Area chart should be 0-based if all positive|negative

src/format.js

@@ -6,3 +6,3 @@ c3_chart_internal_fn.getYFormat = function (forArc) {
     return function (v, ratio, id) {
-        var format = $$.getAxisId(id) === 'y2' ? formatForY2 : formatForY;
+        var format = $$.axis.getId(id) === 'y2' ? formatForY2 : formatForY;
         return format.call($$, v, ratio);
@@ -9,0 +9,0 @@ };

src/grid.js

@@ -72,3 +72,14 @@ c3_chart_internal_fn.initGrid = function () {
 
-
+c3_chart_internal_fn.gridTextAnchor = function (d) {
+    return d.position ? d.position : "end";
+};
+c3_chart_internal_fn.gridTextDx = function (d) {
+    return d.position === 'start' ? 4 : d.position === 'middle' ? 0 : -4;
+};
+c3_chart_internal_fn.xGridTextX = function (d) {
+    return d.position === 'start' ? -this.height : d.position === 'middle' ? -this.height / 2 : 0;
+};
+c3_chart_internal_fn.yGridTextX = function (d) {
+    return d.position === 'start' ? 0 : d.position === 'middle' ? this.width / 2 : this.width;
+};
 c3_chart_internal_fn.updateGrid = function (duration) {
@@ -93,5 +104,5 @@ var $$ = this, main = $$.main, config = $$.config,
     xgridLine.append('text')
-        .attr("text-anchor", "end")
+        .attr("text-anchor", $$.gridTextAnchor)
         .attr("transform", config.axis_rotated ? "" : "rotate(-90)")
-        .attr('dx', -4)
+        .attr('dx', $$.gridTextDx)
         .attr('dy', -5)
@@ -118,5 +129,5 @@ .style("opacity", 0);
     ygridLine.append('text')
-        .attr("text-anchor", "end")
+        .attr("text-anchor", $$.gridTextAnchor)
         .attr("transform", config.axis_rotated ? "rotate(-90)" : "")
-        .attr('dx', config.axis_rotated ? 0 : -$$.margin.top)
+        .attr('dx', $$.gridTextDx)
         .attr('dy', -5)
@@ -135,3 +146,3 @@ .style("opacity", 0);
       .transition().duration(duration)
-        .attr("x", config.axis_rotated ? 0 : $$.width)
+        .attr("x", config.axis_rotated ? $$.xGridTextX.bind($$) : $$.yGridTextX.bind($$))
         .attr("y", yv)
@@ -157,3 +168,3 @@ .text(function (d) { return d.text; })
         (withTransition ? texts.transition() : texts)
-            .attr("x", config.axis_rotated ? $$.width : 0)
+            .attr("x", config.axis_rotated ? $$.yGridTextX.bind($$) : $$.xGridTextX.bind($$))
             .attr("y", xv)
@@ -160,0 +171,0 @@ .text(function (d) { return d.text; })

src/interaction.js

@@ -117,3 +117,3 @@ c3_chart_internal_fn.initEventRect = function () {
         .on('mouseover', function (d) {
-            var index = d.index, selectedData, newData;
+            var index = d.index;
 
@@ -123,19 +123,2 @@ if ($$.dragging || $$.flowing) { return; } // do nothing while dragging/flowing
 
-            selectedData = $$.data.targets.map(function (t) {
-                return $$.addName($$.getValueOnIndex(t.values, index));
-            });
-
-            // Sort selectedData as names order
-            newData = [];
-            Object.keys(config.data_names).forEach(function (id) {
-                for (var j = 0; j < selectedData.length; j++) {
-                    if (selectedData[j] && selectedData[j].id === id) {
-                        newData.push(selectedData[j]);
-                        selectedData.shift(j);
-                        break;
-                    }
-                }
-            });
-            selectedData = newData.concat(selectedData); // Add remained
-
             // Expand shapes for selection
@@ -329,3 +312,3 @@ if (config.point_focus_expand_enabled) { $$.expandCircles(index, null, true); }
             if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < 100) {
-                $$.main.selectAll('.' + CLASS.shapes + $$.getTargetSelectorSuffix(closest.id)).select('.' + CLASS.shape + '-' + closest.index).each(function () {
+                $$.main.selectAll('.' + CLASS.shapes + $$.getTargetSelectorSuffix(closest.id)).selectAll('.' + CLASS.shape + '-' + closest.index).each(function () {
                     if (config.data_selection_grouped || $$.isWithinShape(this, closest)) {
@@ -339,6 +322,8 @@ $$.toggleShape(this, closest, closest.index);
         .call(
-            d3.behavior.drag().origin(Object)
-                .on('drag', function () { $$.drag(d3.mouse(this)); })
-                .on('dragstart', function () { $$.dragstart(d3.mouse(this)); })
-                .on('dragend', function () { $$.dragend(); })
+            config.data_selection_draggable && $$.drag ? (
+                d3.behavior.drag().origin(Object)
+                    .on('drag', function () { $$.drag(d3.mouse(this)); })
+                    .on('dragstart', function () { $$.dragstart(d3.mouse(this)); })
+                    .on('dragend', function () { $$.dragend(); })
+            ) : function () {}
         );
@@ -345,0 +330,0 @@ };

src/legend.js

@@ -120,3 +120,2 @@ c3_chart_internal_fn.initLegend = function () {
     var withTransition, withTransitionForTransform;
-    var hasFocused = $$.legend.selectAll('.' + CLASS.legendItemFocused).size();
     var texts, rects, tiles, background;
@@ -311,12 +310,3 @@
     $$.legend.selectAll('.' + CLASS.legendItem)
-        .classed(CLASS.legendItemHidden, function (id) { return !$$.isTargetToShow(id); })
-        .transition()
-        .style('opacity', function (id) {
-            var This = $$.d3.select(this);
-            if ($$.isTargetToShow(id)) {
-                return !hasFocused || This.classed(CLASS.legendItemFocused) ? $$.opacityForLegend(This) : $$.opacityForUnfocusedLegend(This);
-            } else {
-                return null; // c3-legend-item-hidden will be applied
-            }
-        });
+        .classed(CLASS.legendItemHidden, function (id) { return !$$.isTargetToShow(id); });
 
@@ -323,0 +313,0 @@ // Update all to reflect change of legend

src/scale.js

@@ -47,6 +47,6 @@ c3_chart_internal_fn.getScale = function (min, max, forTimeseries) {
 c3_chart_internal_fn.getYScale = function (id) {
-    return this.getAxisId(id) === 'y2' ? this.y2 : this.y;
+    return this.axis.getId(id) === 'y2' ? this.y2 : this.y;
 };
 c3_chart_internal_fn.getSubYScale = function (id) {
-    return this.getAxisId(id) === 'y2' ? this.subY2 : this.subY;
+    return this.axis.getId(id) === 'y2' ? this.subY2 : this.subY;
 };
@@ -73,11 +73,11 @@ c3_chart_internal_fn.updateScales = function () {
     // update axes
-    $$.xAxisTickFormat = $$.getXAxisTickFormat();
-    $$.xAxisTickValues = $$.getXAxisTickValues();
-    $$.yAxisTickValues = $$.getYAxisTickValues();
-    $$.y2AxisTickValues = $$.getY2AxisTickValues();
+    $$.xAxisTickFormat = $$.axis.getXAxisTickFormat();
+    $$.xAxisTickValues = $$.axis.getXAxisTickValues();
+    $$.yAxisTickValues = $$.axis.getYAxisTickValues();
+    $$.y2AxisTickValues = $$.axis.getY2AxisTickValues();
 
-    $$.xAxis = $$.getXAxis($$.x, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues, config.axis_x_tick_outer);
-    $$.subXAxis = $$.getXAxis($$.subX, $$.subXOrient, $$.xAxisTickFormat, $$.xAxisTickValues, config.axis_x_tick_outer);
-    $$.yAxis = $$.getYAxis($$.y, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, config.axis_y_tick_outer);
-    $$.y2Axis = $$.getYAxis($$.y2, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, config.axis_y2_tick_outer);
+    $$.xAxis = $$.axis.getXAxis($$.x, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues, config.axis_x_tick_outer);
+    $$.subXAxis = $$.axis.getXAxis($$.subX, $$.subXOrient, $$.xAxisTickFormat, $$.xAxisTickValues, config.axis_x_tick_outer);
+    $$.yAxis = $$.axis.getYAxis($$.y, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, config.axis_y_tick_outer);
+    $$.y2Axis = $$.axis.getYAxis($$.y2, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, config.axis_y2_tick_outer);
 
@@ -84,0 +84,0 @@ // Set initialized scales to brush and zoom

src/shape.bar.js

@@ -53,3 +53,3 @@ c3_chart_internal_fn.initBar = function () {
     var $$ = this, config = $$.config,
-        w = typeof config.bar_width === 'number' ? config.bar_width : barTargetsNum ? (axis.tickOffset() * 2 * config.bar_width_ratio) / barTargetsNum : 0;
+        w = typeof config.bar_width === 'number' ? config.bar_width : barTargetsNum ? (axis.tickInterval() * config.bar_width_ratio) / barTargetsNum : 0;
     return config.bar_width_max && w > config.bar_width_max ? config.bar_width_max : w;
@@ -56,0 +56,0 @@ };

src/size.js

@@ -25,3 +25,3 @@ c3_chart_internal_fn.getCurrentWidth = function () {
     } else if (!config.axis_y_show || config.axis_y_inner) { // && !config.axis_rotated
-        return $$.getYAxisLabelPosition().isOuter ? 30 : 1;
+        return $$.axis.getYAxisLabelPosition().isOuter ? 30 : 1;
     } else {
@@ -39,3 +39,3 @@ return ceil10($$.getAxisWidthByAxisId('y', withoutRecompute));
     } else if (!config.axis_y2_show || config.axis_y2_inner) { // && !config.axis_rotated
-        return 2 + legendWidthOnRight + ($$.getY2AxisLabelPosition().isOuter ? 20 : 0);
+        return 2 + legendWidthOnRight + ($$.axis.getY2AxisLabelPosition().isOuter ? 20 : 0);
     } else {
@@ -80,4 +80,4 @@ return ceil10($$.getAxisWidthByAxisId('y2')) + legendWidthOnRight;
 c3_chart_internal_fn.getAxisWidthByAxisId = function (id, withoutRecompute) {
-    var $$ = this, position = $$.getAxisLabelPositionById(id);
-    return $$.getMaxTickWidth(id, withoutRecompute) + (position.isInner ? 20 : 40);
+    var $$ = this, position = $$.axis.getLabelPositionById(id);
+    return $$.axis.getMaxTickWidth(id, withoutRecompute) + (position.isInner ? 20 : 40);
 };
@@ -92,23 +92,9 @@ c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
     if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) {
-        h = $$.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180);
+        h = $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180);
     }
-    return h + ($$.getAxisLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0);
+    return h + ($$.axis.getLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0);
 };
 
 c3_chart_internal_fn.getEventRectWidth = function () {
-    var $$ = this;
-    var target = $$.getMaxDataCountTarget($$.data.targets),
-        firstData, lastData, base, maxDataCount, ratio, w;
-    if (!target) {
-        return 0;
-    }
-    firstData = target.values[0], lastData = target.values[target.values.length - 1];
-    base = $$.x(lastData.x) - $$.x(firstData.x);
-    if (base === 0) {
-        return $$.config.axis_rotated ? $$.height : $$.width;
-    }
-    maxDataCount = $$.getMaxDataCount();
-    ratio = ($$.hasType('bar') ? (maxDataCount - ($$.isCategorized() ? 0.25 : 1)) / maxDataCount : 1);
-    w = maxDataCount > 1 ? (base * ratio) / (maxDataCount - 1) : base;
-    return w < 1 ? 1 : w;
+    return this.xAxis.tickInterval();
 };

src/text.js

@@ -52,3 +52,4 @@ c3_chart_internal_fn.initText = function () {
     var body = this.d3.select('body').classed('c3', true),
-        svg = body.append("svg").style('visibility', 'hidden'), rect;
+        svg = body.append("svg").style('visibility', 'hidden').style('position', 'fixed').style('top', 0).style('left', 0),
+        rect;
     svg.selectAll('.dummy')
@@ -66,3 +67,3 @@ .data([text])
     var $$ = this,
-        getAreaPoints = $$.generateGetAreaPoints(barIndices, false),
+        getAreaPoints = $$.generateGetAreaPoints(areaIndices, false),
         getBarPoints = $$.generateGetBarPoints(barIndices, false),
@@ -101,3 +102,3 @@ getLinePoints = $$.generateGetLinePoints(lineIndices, false),
     } else {
-        yPos = points[2][1] + (d.value < 0 ? box.height : $$.isBarType(d) ? -3 : -6);
+        yPos = points[2][1] + (d.value < 0 ? box.height * 1.3 : $$.isBarType(d) ? -3 : -6);
     }
@@ -104,0 +105,0 @@ // show labels regardless of the domain if value is null

src/tooltip.js

@@ -21,3 +21,3 @@ c3_chart_internal_fn.initTooltip = function () {
             return $$.addName(d.values[config.tooltip_init_x]);
-        }), $$.getXAxisTickFormat(), $$.getYFormat($$.hasArcType()), $$.color));
+        }), $$.axis.getXAxisTickFormat(), $$.getYFormat($$.hasArcType()), $$.color));
         $$.tooltip.style("top", config.tooltip_init_position.top)
@@ -79,3 +79,4 @@ .style("left", config.tooltip_init_position.left)
         if (tooltipRight > chartRight) {
-            tooltipLeft -= tooltipRight - chartRight;
+            // 20 is needed for Firefox to keep tooletip width
+            tooltipLeft -= tooltipRight - chartRight + 20;
         }
@@ -100,3 +101,3 @@ if (tooltipTop + tHeight > $$.currentHeight) {
     }
-    $$.tooltip.html(config.tooltip_contents.call($$, selectedData, $$.getXAxisTickFormat(), $$.getYFormat(forArc), $$.color)).style("display", "block");
+    $$.tooltip.html(config.tooltip_contents.call($$, selectedData, $$.axis.getXAxisTickFormat(), $$.getYFormat(forArc), $$.color)).style("display", "block");
 
@@ -103,0 +104,0 @@ // Get tooltip dimensions

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3060542

increased by6.57%

Number of package files

280

increased by6.87%

Lines of code

39515

increased by4.9%

Worsened metrics

Dev dependency count

9

increased by12.5%

Number of low quality alerts

8

increased by14.29%

No dependency changes