playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
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.
1863 Commits
10 Branches
97 Tags
10 MiB
 
 
 
 
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
c3/spec/shape.bar-spec.js

359 lines
14 KiB
Raw Permalink Blame History

describe('c3 chart shape bar', function () {
'use strict';
var chart, args;
beforeEach(function (done) {
chart = window.initChart(chart, args, done);
});
describe('Path boxes', function () {
beforeAll(function () {
args = {
data: {
columns: [
['data1', 30]
],
type: 'bar',
},
bar: {
width: {
max: 40
}
}
};
});
it('bars should have expected Path Box', function () {
var expected = {
x: 279,
y: 40,
width: 40,
height: 387
};
var shapes = chart.internal.main
.selectAll('.' + chart.internal.CLASS.shapes)
.selectAll('.' + chart.internal.CLASS.shape);
shapes.each(function () {
var pathBox = chart.internal.getPathBox(this);
expect(pathBox.x).toBeCloseTo(expected.x, -1);
expect(pathBox.y).toBeCloseTo(expected.y, -1);
expect(pathBox.width).toBeCloseTo(expected.width, -1);
expect(pathBox.height).toBeCloseTo(expected.height, -1);
});
});
});
describe('with groups', function () {
describe('with indexed data', function () {
beforeAll(function () {
args = {
data: {
columns: [
['data1', 30, 200, -100, 400, -150, 250],
['data2', 50, 20, 10, 40, 15, 25],
],
groups: [
['data1', 'data2'],
],
type: 'bar'
},
};
});
it('should be stacked', function () {
var expectedBottom = [275, 293, 365, 281, 395, 290];
chart.internal.main.selectAll('.c3-bars-data1 .c3-bar').each(function (d, i) {
var rect = d3.select(this).node().getBoundingClientRect();
expect(rect.bottom).toBeCloseTo(expectedBottom[i], -1);
});
});
});
describe('with timeseries data', function () {
beforeAll(function () {
args = {
data: {
x: 'date',
columns: [
['date', '2012-12-24', '2012-12-25', '2012-12-26', '2012-12-27', '2012-12-28', '2012-12-29'],
['data1', 30, 200, -100, 400, -150, 250],
['data2', 50, 20, 10, 40, 15, 25],
],
groups: [
['data1', 'data2'],
],
type: 'bar'
},
axis: {
x: {
type: 'timeseries',
}
}
};
});
it('should be stacked', function () {
var expectedBottom = [275, 293, 365, 281, 395, 290];
chart.internal.main.selectAll('.c3-bars-data1 .c3-bar').each(function (d, i) {
var rect = d3.select(this).node().getBoundingClientRect();
expect(rect.bottom).toBeCloseTo(expectedBottom[i], -1);
});
});
});
describe('with category data', function () {
beforeAll(function () {
args = {
data: {
x: 'date',
columns: [
['date', '2012-12-24', '2012-12-25', '2012-12-26', '2012-12-27', '2012-12-28', '2012-12-29'],
['data1', 30, 200, -100, 400, -150, 250],
['data2', 50, 20, 10, 40, 15, 25],
],
groups: [
['data1', 'data2'],
],
type: 'bar'
},
axis: {
x: {
type: 'category',
}
}
};
});
it('should be stacked', function () {
var expectedBottom = [275, 293, 365, 281, 395, 290];
chart.internal.main.selectAll('.c3-bars-data1 .c3-bar').each(function (d, i) {
var rect = d3.select(this).node().getBoundingClientRect();
expect(rect.bottom).toBeCloseTo(expectedBottom[i], -1);
});
});
});
});
describe('internal.isWithinBar', function () {
describe('with normal axis', function () {
beforeAll(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
}
};
});
it('should not be within bar', function () {
var bar = d3.select('.c3-target-data1 .c3-bar-0').node();
expect(chart.internal.isWithinBar([0, 0], bar)).toBeFalsy();
});
it('should be within bar', function () {
var bar = d3.select('.c3-target-data1 .c3-bar-0').node();
expect(chart.internal.isWithinBar([31, 280], bar)).toBeTruthy();
});
it('should not be within bar of negative value', function () {
var bar = d3.select('.c3-target-data3 .c3-bar-0').node();
expect(chart.internal.isWithinBar([68, 280], bar)).toBeFalsy();
});
it('should be within bar of negative value', function () {
var bar = d3.select('.c3-target-data3 .c3-bar-0').node();
expect(chart.internal.isWithinBar([68, 350], bar)).toBeTruthy();
});
});
describe('with rotated axis', function () {
beforeAll(function () {
args.axis.rotated = true;
});
it('should not be within bar', function () {
var bar = d3.select('.c3-target-data1 .c3-bar-0').node();
expect(chart.internal.isWithinBar([0, 0], bar)).toBeFalsy();
});
it('should be within bar', function () {
var bar = d3.select('.c3-target-data1 .c3-bar-0').node();
expect(chart.internal.isWithinBar([190, 20], bar)).toBeTruthy();
});
it('should be within bar of negative value', function () {
var bar = d3.select('.c3-target-data3 .c3-bar-0').node();
expect(chart.internal.isWithinBar([68, 50], bar)).toBeTruthy();
});
});
});
describe('bar spacing', function () {
var createArgs = function (spacing) {
return {
size: {
width: 500
},
data: {
columns: [
['data1', 30, 200, 100],
['data2', 50, 20, 10],
['data3', 150, 120, 110],
['data4', 12, 24, 20]
],
type: 'bar',
groups: [
['data1', 'data4']
]
},
bar: {
space: spacing
}
};
};
var getBBox = function (selector) {
return d3.select(selector).node().getBBox();
};
var getBarContainerWidth = function () {
return parseInt(getBBox('.c3-chart-bars').width);
};
var getBarContainerOffset = function () {
return parseInt(getBBox('.c3-chart-bars').x);
};
var getBarBBox = function (name, idx) {
return getBBox('.c3-target-' + name + ' .c3-bar-' + (idx || 0));
};
var getBarWidth = function (name, idx) {
return parseInt(getBarBBox(name, idx).width);
};
var getBarOffset = function (name1, name2, idx) {
var bbox1 = getBarBBox(name1, idx);
var bbox2 = getBarBBox(name2, idx);
return parseInt(bbox2.x - (bbox1.x + bbox1.width));
};
it('should set bar spacing to 0', function () {
args = createArgs(0);
expect(true).toBeTruthy();
});
it('should display the bars without any spacing', function () {
// all bars should have the same width
expect(getBarWidth('data1', 0)).toEqual(30);
expect(getBarWidth('data2', 0)).toEqual(30);
expect(getBarWidth('data3', 0)).toEqual(30);
expect(getBarWidth('data1', 1)).toEqual(30);
expect(getBarWidth('data2', 1)).toEqual(30);
expect(getBarWidth('data3', 1)).toEqual(30);
expect(getBarWidth('data1', 2)).toEqual(30);
expect(getBarWidth('data2', 2)).toEqual(30);
expect(getBarWidth('data3', 2)).toEqual(30);
// all offsets should be the same
expect(getBarOffset('data1', 'data2', 0)).toEqual(0);
expect(getBarOffset('data2', 'data3', 0)).toEqual(0);
expect(getBarOffset('data1', 'data2', 1)).toEqual(0);
expect(getBarOffset('data2', 'data3', 1)).toEqual(0);
expect(getBarOffset('data1', 'data2', 2)).toEqual(0);
expect(getBarOffset('data2', 'data3', 2)).toEqual(0);
// default width/offset of the container for this chart
expect(getBarContainerWidth()).toEqual(396);
expect(getBarContainerOffset()).toEqual(31);
});
it('should set bar spacing to 0.25', function () {
args = createArgs(0.25);
expect(true).toBeTruthy();
});
it('should display the bars with a spacing ratio of 0.25', function () {
// with bar_space of 0.25, the space between bars is
// expected to be 25% of the original bar's width
// which is ~7
// expect all bars to be the same width
expect(getBarWidth('data1', 0)).toEqual(22);
expect(getBarWidth('data2', 0)).toEqual(22);
expect(getBarWidth('data3', 0)).toEqual(22);
expect(getBarWidth('data1', 1)).toEqual(22);
expect(getBarWidth('data2', 1)).toEqual(22);
expect(getBarWidth('data3', 1)).toEqual(22);
expect(getBarWidth('data1', 2)).toEqual(22);
expect(getBarWidth('data2', 2)).toEqual(22);
expect(getBarWidth('data3', 2)).toEqual(22);
// all offsets should be the same
expect(getBarOffset('data1', 'data2', 0)).toEqual(7);
expect(getBarOffset('data2', 'data3', 0)).toEqual(7);
expect(getBarOffset('data1', 'data2', 1)).toEqual(7);
expect(getBarOffset('data2', 'data3', 1)).toEqual(7);
expect(getBarOffset('data1', 'data2', 2)).toEqual(7);
expect(getBarOffset('data2', 'data3', 2)).toEqual(7);
// expect the container to shrink a little because of
// the offsets from the first/last chart
// we add/subtract 1 because of approximation due to rounded values
expect(getBarContainerWidth()).toEqual(396 - 7 - 1);
expect(getBarContainerOffset()).toEqual(31 + (parseInt(7 / 2) + 1));
});
it('should set bar spacing to 0.5', function () {
args = createArgs(0.5);
expect(true).toBeTruthy();
});
it('should display the bars with a spacing ratio of 0.5', function () {
// with bar_space of 0.5, the space between bars is
// expected to be 50% of the original bar's width
// which is ~15
// expect all bars to be the same width
expect(getBarWidth('data1', 0)).toEqual(15);
expect(getBarWidth('data2', 0)).toEqual(15);
expect(getBarWidth('data3', 0)).toEqual(15);
expect(getBarWidth('data1', 1)).toEqual(15);
expect(getBarWidth('data2', 1)).toEqual(15);
expect(getBarWidth('data3', 1)).toEqual(15);
expect(getBarWidth('data1', 2)).toEqual(15);
expect(getBarWidth('data2', 2)).toEqual(15);
expect(getBarWidth('data3', 2)).toEqual(15);
// all offsets should be the same
expect(getBarOffset('data1', 'data2', 0)).toEqual(15);
expect(getBarOffset('data2', 'data3', 0)).toEqual(15);
expect(getBarOffset('data1', 'data2', 1)).toEqual(15);
expect(getBarOffset('data2', 'data3', 1)).toEqual(15);
expect(getBarOffset('data1', 'data2', 2)).toEqual(15);
expect(getBarOffset('data2', 'data3', 2)).toEqual(15);
// expect the container to shrink a little because of
// the offsets from the first/last chart
expect(getBarContainerWidth()).toEqual(396 - 15);
expect(getBarContainerOffset()).toEqual(31 + parseInt(15 / 2));
});
});
});