mirror of https://github.com/masayuki0812/c3.git
Quite good looking graph derived from d3.js
http://c3js.org
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
3.8 KiB
101 lines
3.8 KiB
8 years ago
|
var expect = require('chai').expect;
|
||
|
|
|
||
|
|
describe('c3 chart title', function () {
|
||
|
|
|
||
|
|
|
||
|
|
var chart, config;
|
||
|
|
|
||
|
|
describe('when given a title config option', function () {
|
||
|
|
describe('with no padding and no position', function () {
|
||
|
|
beforeEach(function(done) {
|
||
|
|
config = {
|
||
|
|
data: {
|
||
|
|
columns: [
|
||
|
|
['data1', 30, 200, 100, 400, 150, 250]
|
||
|
|
]
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
text: 'new title'
|
||
|
|
}
|
||
|
|
};
|
||
|
|
chart = window.initChart(chart, config, done);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders the title at the default config position', function () {
|
||
|
|
var titleEl = d3.select(".c3-title");
|
||
|
|
expect(+titleEl.attr("x")).to.be.closeTo(294, -2);
|
||
|
|
expect(+titleEl.attr("y")).toEqual(titleEl.node().getBBox().height);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders the title text', function () {
|
||
|
|
var titleEl = d3.select(".c3-title");
|
||
|
|
expect(titleEl.node().textContent).toEqual('new title');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('with padding', function () {
|
||
|
|
var config, getConfig = function (titlePosition) {
|
||
|
|
return {
|
||
|
|
data: {
|
||
|
|
columns: [
|
||
|
|
['data1', 30, 200, 100, 400, 150, 250]
|
||
|
|
]
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
text: 'positioned title',
|
||
|
|
padding: {
|
||
|
|
top: 20,
|
||
|
|
right: 30,
|
||
|
|
bottom: 40,
|
||
|
|
left: 50
|
||
|
|
},
|
||
|
|
position: titlePosition
|
||
|
|
}
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
describe('and position center', function () {
|
||
|
|
beforeEach(function(done) {
|
||
|
|
config = getConfig('top-center');
|
||
|
|
chart = window.initChart(chart, config, done);
|
||
|
|
});
|
||
|
|
it('renders the title at the default config position', function () {
|
||
|
|
var titleEl = d3.select(".c3-title");
|
||
|
|
expect(+titleEl.attr("x")).to.be.closeTo(275, -2);
|
||
|
|
expect(+titleEl.attr("y")).to.be.closeTo(34, -1);
|
||
|
|
});
|
||
|
|
it('adds the correct amount of padding to fit the title', function() {
|
||
|
|
expect(chart.internal.getCurrentPaddingTop()).toEqual(
|
||
|
|
config.title.padding.top + d3.select('.c3-title').node().getBBox().height + config.title.padding.bottom
|
||
|
|
);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('and position left', function () {
|
||
|
|
beforeEach(function(done) {
|
||
|
|
config = getConfig('top-left');
|
||
|
|
chart = window.initChart(chart, config, done);
|
||
|
|
});
|
||
|
|
it('renders the title at the default config position', function () {
|
||
|
|
var titleEl = d3.select(".c3-title");
|
||
|
|
expect(+titleEl.attr("x")).to.be.closeTo(50, -1);
|
||
|
|
expect(+titleEl.attr("y")).to.be.closeTo(34, -1);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('and position right', function () {
|
||
|
|
beforeEach(function(done) {
|
||
|
|
config = getConfig('top-right');
|
||
|
|
chart = window.initChart(chart, config, done);
|
||
|
|
});
|
||
|
|
it('renders the title at the default config position', function () {
|
||
|
|
var titleEl = d3.select(".c3-title");
|
||
|
|
expect(+titleEl.attr("x")).to.be.closeTo(520, -2);
|
||
|
|
expect(+titleEl.attr("y")).to.be.closeTo(34, -1);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|