mirror of https://github.com/masayuki0812/c3.git
Yuval Bar-On
10 years ago
61 changed files with 3592 additions and 772 deletions
@ -0,0 +1 @@
|
||||
.c3 svg{font:10px sans-serif}.c3 line,.c3 path{fill:none;stroke:#000}.c3 text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid{shape-rendering:crispEdges}.c3-chart-arc path{stroke:#fff}.c3-chart-arc text{fill:#fff;font-size:13px}.c3-grid line{stroke:#aaa}.c3-grid text{fill:#aaa}.c3-xgrid,.c3-ygrid{stroke-dasharray:3 3}.c3-text.c3-empty{fill:gray;font-size:2em}.c3-line{stroke-width:1px}.c3-circle._expanded_{stroke-width:1px;stroke:#fff}.c3-selected-circle{fill:#fff;stroke-width:2px}.c3-bar{stroke-width:0}.c3-bar._expanded_{fill-opacity:.75}.c3-chart-arcs-title{font-size:1.3em}.c3-target.c3-focused{opacity:1}.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step{stroke-width:2px}.c3-target.c3-defocused{opacity:.3!important}.c3-region{fill:#4682b4;fill-opacity:.1}.c3-brush .extent{fill-opacity:.1}.c3-legend-item{font-size:12px}.c3-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.c3-tooltip-container{z-index:10}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:.9}.c3-tooltip tr{border:1px solid #CCC}.c3-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#FFF}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px}.c3-tooltip td.value{text-align:right}.c3-area{stroke-width:0;opacity:.2}.c3-chart-arcs .c3-chart-arcs-background{fill:#e0e0e0;stroke:none}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max,.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000;font-size:28px} |
||||
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,49 @@
|
||||
<html> |
||||
<head> |
||||
<link rel="stylesheet" type="text/css" href="/css/c3.css"> |
||||
</head> |
||||
<body> |
||||
<div id="chart"></div> |
||||
|
||||
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> |
||||
<script src="/js/c3.js"></script> |
||||
<script> |
||||
|
||||
var chart = c3.generate({ |
||||
data: { |
||||
x: 'date', |
||||
columns: [ |
||||
['date', '2014-01-01', '2014-01-10', '2014-01-20', '2014-01-30', '2014-02-01'], |
||||
['sample', 30, 200, 100, 400, 150, 250] |
||||
] |
||||
}, |
||||
axis: { |
||||
x: { |
||||
type: 'timeseries', |
||||
tick: { |
||||
format: '%Y%m%d %H:%M:%S' |
||||
} |
||||
}, |
||||
}, |
||||
regions: [ |
||||
{start: '2014-01-05', end: '2014-01-10'}, |
||||
// {start: new Date('2014-01-10'), end: new Date('2014-01-15')}, |
||||
{start: 1390608000000, end: 1391040000000} |
||||
] |
||||
}); |
||||
|
||||
setTimeout(function () { |
||||
chart.load({ |
||||
columns: [ |
||||
['date', +new Date('2014-01-01'), +new Date('2014-01-10'), +new Date('2014-03-01')], |
||||
['sample', 100, 200, 300] |
||||
] |
||||
}); |
||||
chart.regions([ |
||||
{start: +new Date('2014-01-10'), end: +new Date('2014-01-15')} |
||||
]); |
||||
}, 1000); |
||||
|
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,162 @@
|
||||
var describe = window.describe, |
||||
expect = window.expect, |
||||
it = window.it, |
||||
beforeEach = window.beforeEach; |
||||
|
||||
describe('c3 api data', function () { |
||||
'use strict'; |
||||
|
||||
var chart, d3; |
||||
|
||||
var args = { |
||||
data: { |
||||
columns: [ |
||||
['data1', 30, 200, 100, 400, 150, 250], |
||||
['data2', 5000, 2000, 1000, 4000, 1500, 2500] |
||||
], |
||||
names: { |
||||
data1: 'Data Name 1', |
||||
data2: 'Data Name 2' |
||||
}, |
||||
colors: { |
||||
data1: '#FF0000', |
||||
data2: '#00FF00' |
||||
}, |
||||
axes: { |
||||
data1: 'y', |
||||
data2: 'y2' |
||||
} |
||||
}, |
||||
axis: { |
||||
y2: { |
||||
show: 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('position', 'absolute') |
||||
.style('right', 0); |
||||
|
||||
window.setTimeout(function () { |
||||
done(); |
||||
}, 10); |
||||
}); |
||||
|
||||
describe('data()', function () { |
||||
|
||||
it('should return all of data if no argument given', function () { |
||||
var results = chart.data(), |
||||
expected = ['data1', 'data2']; |
||||
results.forEach(function (result, i) { |
||||
expect(result.id).toBe(expected[i]); |
||||
}); |
||||
}); |
||||
|
||||
it('should return specifid data if string argument given', function () { |
||||
var results = chart.data('data1'); |
||||
expect(results.length).toBe(1); |
||||
expect(results[0].id).toBe('data1'); |
||||
}); |
||||
|
||||
it('should return specifid data if array argument given', function () { |
||||
var results = chart.data(['data1', 'data2']); |
||||
expect(results.length).toBe(2); |
||||
expect(results[0].id).toBe('data1'); |
||||
expect(results[1].id).toBe('data2'); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
describe('data.shown()', function () { |
||||
|
||||
it('should return only shown targets', function () { |
||||
var results; |
||||
chart.hide('data1'); |
||||
results = chart.data.shown(); |
||||
expect(results.length).toBe(1); |
||||
expect(results[0].id).toBe('data2'); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
describe('data.names()', function () { |
||||
|
||||
it('should return data.names specified as argument', function () { |
||||
var results = chart.data.names(); |
||||
expect(results.data1).toBe('Data Name 1'); |
||||
expect(results.data2).toBe('Data Name 2'); |
||||
}); |
||||
|
||||
it('should return data.names specified as api', function () { |
||||
var results = chart.data.names({ |
||||
data1: 'New Data Name 1', |
||||
data2: 'New Data Name 2' |
||||
}); |
||||
expect(results.data1).toBe('New Data Name 1'); |
||||
expect(results.data2).toBe('New Data Name 2'); |
||||
}); |
||||
|
||||
it('should set data.names specified as api', function () { |
||||
expect(d3.select('.c3-legend-item-data1 text').text()).toBe("New Data Name 1"); |
||||
expect(d3.select('.c3-legend-item-data2 text').text()).toBe("New Data Name 2"); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
describe('data.colors()', function () { |
||||
|
||||
it('should return data.colors specified as argument', function () { |
||||
var results = chart.data.colors(); |
||||
expect(results.data1).toBe('#FF0000'); |
||||
expect(results.data2).toBe('#00FF00'); |
||||
}); |
||||
|
||||
it('should return data.colors specified as api', function () { |
||||
var results = chart.data.colors({ |
||||
data1: '#00FF00', |
||||
data2: '#FF0000' |
||||
}); |
||||
expect(results.data1).toBe('#00FF00'); |
||||
expect(results.data2).toBe('#FF0000'); |
||||
}); |
||||
|
||||
it('should set data.colors specified as api', function () { |
||||
expect(d3.select('.c3-line-data1').style('stroke')).toBe("#00ff00"); |
||||
expect(d3.select('.c3-line-data2').style('stroke')).toBe("#ff0000"); |
||||
expect(d3.select('.c3-legend-item-data1 .c3-legend-item-tile').style('fill')).toBe("#00ff00"); |
||||
expect(d3.select('.c3-legend-item-data2 .c3-legend-item-tile').style('fill')).toBe("#ff0000"); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
describe('data.axes()', function () { |
||||
|
||||
it('should return data.axes specified as argument', function () { |
||||
var results = chart.data.axes(); |
||||
expect(results.data1).toBe('y'); |
||||
expect(results.data2).toBe('y2'); |
||||
expect(d3.select('.c3-axis-y g.tick text').text()).toBe('0'); |
||||
expect(d3.select('.c3-axis-y2 g.tick text').text()).toBe('1000'); |
||||
}); |
||||
|
||||
it('should return data.axes specified as api', function () { |
||||
var results = chart.data.axes({ |
||||
data1: 'y2', |
||||
data2: 'y' |
||||
}); |
||||
expect(results.data1).toBe('y2'); |
||||
expect(results.data2).toBe('y'); |
||||
expect(d3.select('.c3-axis-y g.tick text').text()).toBe('1000'); |
||||
expect(d3.select('.c3-axis-y2 g.tick text').text()).toBe('0'); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
}); |
||||
@ -0,0 +1,126 @@
|
||||
var describe = window.describe, |
||||
expect = window.expect, |
||||
it = window.it, |
||||
beforeEach = window.beforeEach; |
||||
|
||||
describe('c3 api zoom', function () { |
||||
'use strict'; |
||||
|
||||
var chart, d3; |
||||
|
||||
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); |
||||
}); |
||||
|
||||
describe('zoom', function () { |
||||
|
||||
it('should be zoomed properly', function () { |
||||
var target = [3, 5], domain; |
||||
chart.zoom(target); |
||||
domain = chart.internal.x.domain(); |
||||
expect(domain[0]).toBe(target[0]); |
||||
expect(domain[1]).toBe(target[1]); |
||||
}); |
||||
|
||||
it('should be zoomed properly again', function () { |
||||
var target = [1, 4], domain; |
||||
chart.zoom(target); |
||||
domain = chart.internal.x.domain(); |
||||
expect(domain[0]).toBe(target[0]); |
||||
expect(domain[1]).toBe(target[1]); |
||||
}); |
||||
|
||||
it('should load timeseries data', function () { |
||||
args = { |
||||
data: { |
||||
x: 'date', |
||||
columns: [ |
||||
['date', '2014-01-01', '2014-01-02', '2014-08-01', '2014-10-19'], |
||||
['data1', 30, 200, 100, 400] |
||||
] |
||||
}, |
||||
axis: { |
||||
x: { |
||||
type: 'timeseries' |
||||
} |
||||
}, |
||||
zoom: { |
||||
enabled: true |
||||
} |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should be zoomed properly', function () { |
||||
var target = [new Date(2014, 7, 1), new Date(2014, 8, 1)], domain; |
||||
chart.zoom(target); |
||||
domain = chart.internal.x.domain(); |
||||
expect(+domain[0]).toBe(+target[0]); |
||||
expect(+domain[1]).toBe(+target[1]); |
||||
}); |
||||
|
||||
it('should be zoomed properly', function () { |
||||
var target = ['2014-08-01', '2014-09-01'], domain; |
||||
chart.zoom(target); |
||||
domain = chart.internal.x.domain(); |
||||
expect(+domain[0]).toBe(+chart.internal.parseDate(target[0])); |
||||
expect(+domain[1]).toBe(+chart.internal.parseDate(target[1])); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
describe('unzoom', function () { |
||||
|
||||
it('should load indexed data', function () { |
||||
args = { |
||||
data: { |
||||
columns: [ |
||||
['data1', 30, 200, 100, 400, 150, 250] |
||||
] |
||||
}, |
||||
zoom: { |
||||
enabled: true |
||||
} |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should be unzoomed properly', function () { |
||||
var target = [1, 4], orginal = chart.internal.x.domain(), domain; |
||||
|
||||
chart.zoom(target); |
||||
domain = chart.internal.x.domain(); |
||||
expect(domain[0]).toBe(target[0]); |
||||
expect(domain[1]).toBe(target[1]); |
||||
|
||||
chart.unzoom(); |
||||
domain = chart.internal.x.domain(); |
||||
expect(domain[0]).toBe(orginal[0]); |
||||
expect(domain[1]).toBe(orginal[1]); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
}); |
||||
@ -0,0 +1,78 @@
|
||||
var describe = window.describe, |
||||
expect = window.expect, |
||||
it = window.it, |
||||
beforeEach = window.beforeEach; |
||||
|
||||
describe('c3 chart axis', function () { |
||||
'use strict'; |
||||
|
||||
var chart, d3, 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); |
||||
}); |
||||
|
||||
describe('show pie chart', function () { |
||||
|
||||
args = { |
||||
data: { |
||||
columns: [ |
||||
['data1', 30], |
||||
['data2', 150], |
||||
['data3', 120] |
||||
], |
||||
type: 'pie' |
||||
} |
||||
}; |
||||
|
||||
it('should have correct classes', 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.size()).toBe(1); |
||||
expect(arcs.data2.size()).toBe(1); |
||||
expect(arcs.data3.size()).toBe(1); |
||||
}); |
||||
|
||||
it('should have correct d', function () { |
||||
expect(d3.select('.c3-arc-data1').attr('d')).toMatch(/M-124\..+,-171\..+A211\..+,211\..+ 0 0,1 -3\..+,-211\..+L0,0Z/); |
||||
expect(d3.select('.c3-arc-data2').attr('d')).toMatch(/M1\..+,-211\..+A211\..+,211\..+ 0 0,1 1\..+,211\..+L0,0Z/); |
||||
expect(d3.select('.c3-arc-data3').attr('d')).toMatch(/M1\..+,211\..+A211\..+,211\..+ 0 0,1 -124\..+,-171\..+L0,0Z/); |
||||
}); |
||||
|
||||
it('should set args with data id that can be converted to a color', function () { |
||||
args.data.columns = [ |
||||
['black', 30], |
||||
['data2', 150], |
||||
['data3', 120] |
||||
]; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
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/); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
}); |
||||
@ -0,0 +1,612 @@
|
||||
var describe = window.describe, |
||||
expect = window.expect, |
||||
it = window.it, |
||||
beforeEach = window.beforeEach; |
||||
|
||||
describe('c3 chart axis', function () { |
||||
'use strict'; |
||||
|
||||
var chart, d3; |
||||
|
||||
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] |
||||
] |
||||
}, |
||||
axis: { |
||||
y: { |
||||
tick: { |
||||
values: null, |
||||
count: undefined |
||||
} |
||||
}, |
||||
y2: { |
||||
tick: { |
||||
values: null, |
||||
count: undefined |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
|
||||
beforeEach(function (done) { |
||||
chart = window.initChart(chart, args, done); |
||||
d3 = chart.internal.d3; |
||||
}); |
||||
|
||||
describe('axis.y.tick.count', function () { |
||||
|
||||
var i = 1; |
||||
|
||||
beforeEach(function () { |
||||
args.axis.y.tick.count = i++; |
||||
chart = window.c3.generate(args); |
||||
}); |
||||
|
||||
it('should have only 1 tick on y axis', function () { |
||||
var ticksSize = d3.select('.c3-axis-y').selectAll('g.tick').size(); |
||||
expect(ticksSize).toBe(1); |
||||
}); |
||||
|
||||
it('should have 2 ticks on y axis', function () { |
||||
var ticksSize = d3.select('.c3-axis-y').selectAll('g.tick').size(); |
||||
expect(ticksSize).toBe(2); |
||||
}); |
||||
|
||||
it('should have 3 ticks on y axis', function () { |
||||
var ticksSize = d3.select('.c3-axis-y').selectAll('g.tick').size(); |
||||
expect(ticksSize).toBe(3); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
describe('axis.y.tick.values', function () { |
||||
|
||||
var values = [100, 500]; |
||||
|
||||
beforeEach(function () { |
||||
args.axis.y.tick.values = values; |
||||
chart = window.c3.generate(args); |
||||
}); |
||||
|
||||
it('should have only 2 tick on y axis', function () { |
||||
var ticksSize = d3.select('.c3-axis-y').selectAll('g.tick').size(); |
||||
expect(ticksSize).toBe(2); |
||||
}); |
||||
|
||||
it('should have specified tick texts', function () { |
||||
d3.select('.c3-axis-y').selectAll('g.tick').each(function (d, i) { |
||||
var text = d3.select(this).select('text').text(); |
||||
expect(+text).toBe(values[i]); |
||||
}); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
describe('axis.x.tick.width', function () { |
||||
|
||||
describe('indexed x axis and y/y2 axis', function () { |
||||
|
||||
describe('not rotated', function () { |
||||
|
||||
it('should update args successfully', function () { |
||||
args = { |
||||
data: { |
||||
columns: [ |
||||
['data1', 30, 200, 100, 400, 150, 250], |
||||
['data2', 50, 20, 10, 40, 15, 25] |
||||
], |
||||
axes: { |
||||
data2: 'y2' |
||||
} |
||||
}, |
||||
axis: { |
||||
y2: { |
||||
show: true |
||||
} |
||||
} |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should construct indexed x axis properly', function () { |
||||
var ticks = chart.internal.main.select('.c3-axis-x').selectAll('g.tick'), |
||||
expectedX = '0', |
||||
expectedDy = '.71em'; |
||||
expect(ticks.size()).toBe(6); |
||||
ticks.each(function (d, i) { |
||||
var tspans = d3.select(this).selectAll('tspan'); |
||||
expect(tspans.size()).toBe(1); |
||||
tspans.each(function () { |
||||
var tspan = d3.select(this); |
||||
expect(tspan.text()).toBe(i + ''); |
||||
expect(tspan.attr('x')).toBe(expectedX); |
||||
expect(tspan.attr('dy')).toBe(expectedDy); |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
it('should set axis.x.tick.format', function () { |
||||
args.axis.x = { |
||||
tick: { |
||||
format: function () { |
||||
return 'very long tick text on x axis'; |
||||
} |
||||
} |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should split x axis tick text to multiple lines', function () { |
||||
var ticks = chart.internal.main.select('.c3-axis-x').selectAll('g.tick'), |
||||
expectedTexts = ['very long tick text on x', 'axis'], |
||||
expectedX = '0'; |
||||
expect(ticks.size()).toBe(6); |
||||
ticks.each(function () { |
||||
var tspans = d3.select(this).selectAll('tspan'); |
||||
expect(tspans.size()).toBe(2); |
||||
tspans.each(function (d, i) { |
||||
var tspan = d3.select(this); |
||||
expect(tspan.text()).toBe(expectedTexts[i]); |
||||
expect(tspan.attr('x')).toBe(expectedX); |
||||
if (i === 0) { |
||||
expect(tspan.attr('dy')).toBe('.71em'); |
||||
} else { |
||||
expect(tspan.attr('dy')).toBeGreaterThan(8); |
||||
} |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
it('should construct y axis properly', function () { |
||||
var ticks = chart.internal.main.select('.c3-axis-y').selectAll('g.tick'), |
||||
expectedX = '-9', |
||||
expectedDy = '3'; |
||||
expect(ticks.size()).toBe(9); |
||||
ticks.each(function (d) { |
||||
var tspans = d3.select(this).selectAll('tspan'); |
||||
expect(tspans.size()).toBe(1); |
||||
tspans.each(function () { |
||||
var tspan = d3.select(this); |
||||
expect(tspan.text()).toBe(d + ''); |
||||
expect(tspan.attr('x')).toBe(expectedX); |
||||
expect(tspan.attr('dy')).toBe(expectedDy); |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
it('should construct y2 axis properly', function () { |
||||
var ticks = chart.internal.main.select('.c3-axis-y2').selectAll('g.tick'), |
||||
expectedX = '9', |
||||
expectedDy = '3'; |
||||
expect(ticks.size()).toBe(9); |
||||
ticks.each(function (d) { |
||||
var tspans = d3.select(this).selectAll('tspan'); |
||||
expect(tspans.size()).toBe(1); |
||||
tspans.each(function () { |
||||
var tspan = d3.select(this); |
||||
expect(tspan.text()).toBe(d + ''); |
||||
expect(tspan.attr('x')).toBe(expectedX); |
||||
expect(tspan.attr('dy')).toBe(expectedDy); |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
it('should set big values in y', function () { |
||||
args.data.columns = [ |
||||
['data1', 3000000000000000, 200, 100, 400, 150, 250], |
||||
['data2', 50, 20, 10, 40, 15, 25] |
||||
]; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should not split y axis tick text to multiple lines', function () { |
||||
var ticks = chart.internal.main.select('.c3-axis-y2').selectAll('g.tick'); |
||||
ticks.each(function () { |
||||
var tspans = d3.select(this).selectAll('tspan'); |
||||
expect(tspans.size()).toBe(1); |
||||
}); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
describe('rotated', function () { |
||||
|
||||
it('should update args to rotate axis', function () { |
||||
args.axis.rotated = true; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should split x axis tick text to multiple lines', function () { |
||||
var ticks = chart.internal.main.select('.c3-axis-x').selectAll('g.tick'), |
||||
expectedTexts = ['very long tick text on', 'x axis'], |
||||
expectedX = '-9'; |
||||
expect(ticks.size()).toBe(6); |
||||
ticks.each(function () { |
||||
var tspans = d3.select(this).selectAll('tspan'); |
||||
expect(tspans.size()).toBe(2); |
||||
tspans.each(function (d, i) { |
||||
var tspan = d3.select(this); |
||||
expect(tspan.text()).toBe(expectedTexts[i]); |
||||
expect(tspan.attr('x')).toBe(expectedX); |
||||
if (i === 0) { |
||||
expect(tspan.attr('dy')).toBeLessThan(0); |
||||
} else { |
||||
expect(tspan.attr('dy')).toBeGreaterThan(9); |
||||
} |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
it('should not split y axis tick text to multiple lines', function () { |
||||
var ticks = chart.internal.main.select('.c3-axis-y').selectAll('g.tick'), |
||||
expectedTexts = [ |
||||
'0', |
||||
'500000000000000', |
||||
'1000000000000000', |
||||
'1500000000000000', |
||||
'2000000000000000', |
||||
'2500000000000000', |
||||
'3000000000000000' |
||||
], |
||||
expectedX = '0', |
||||
expectedDy = '.71em'; |
||||
expect(ticks.size()).toBe(7); |
||||
ticks.each(function (d, i) { |
||||
var tspans = d3.select(this).selectAll('tspan'); |
||||
expect(tspans.size()).toBe(1); |
||||
tspans.each(function () { |
||||
var tspan = d3.select(this); |
||||
expect(tspan.text()).toBe(expectedTexts[i]); |
||||
expect(tspan.attr('x')).toBe(expectedX); |
||||
expect(tspan.attr('dy')).toBe(expectedDy); |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
}); |
||||
}); |
||||
|
||||
describe('category axis', function () { |
||||
|
||||
describe('not rotated', function () { |
||||
|
||||
it('should update args successfully', function () { |
||||
args = { |
||||
data: { |
||||
x: 'x', |
||||
columns: [ |
||||
['x', 'this is a very long tick text on category axis', 'cat1', 'cat2', 'cat3', 'cat4', 'cat5'], |
||||
['data1', 30, 200, 100, 400, 150, 250], |
||||
['data2', 50, 20, 10, 40, 15, 25] |
||||
] |
||||
}, |
||||
axis: { |
||||
x: { |
||||
type: 'category' |
||||
} |
||||
} |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should locate ticks properly', function () { |
||||
var ticks = chart.internal.main.select('.c3-axis-x').selectAll('g.tick'); |
||||
ticks.each(function (d, i) { |
||||
var tspans = d3.select(this).selectAll('tspan'), |
||||
expectedX = '0', |
||||
expectedDy = '.40em'; |
||||
if (i > 0) { // i === 0 should be checked in next test
|
||||
expect(tspans.size()).toBe(1); |
||||
tspans.each(function () { |
||||
var tspan = d3.select(this); |
||||
expect(tspan.attr('x')).toBe(expectedX); |
||||
expect(tspan.attr('dy')).toBe(expectedDy); |
||||
}); |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
it('should split tick text properly', function () { |
||||
var tick = chart.internal.main.select('.c3-axis-x').select('g.tick'), |
||||
tspans = tick.selectAll('tspan'), |
||||
expectedTickTexts = [ |
||||
'this is a very', |
||||
'long tick text on', |
||||
'category axis' |
||||
], |
||||
expectedX = '0'; |
||||
expect(tspans.size()).toBe(3); |
||||
tspans.each(function (d, i) { |
||||
var tspan = d3.select(this); |
||||
expect(tspan.text()).toBe(expectedTickTexts[i]); |
||||
expect(tspan.attr('x')).toBe(expectedX); |
||||
// unable to define pricise number because it differs depends on environment..
|
||||
if (i === 0) { |
||||
expect(tspan.attr('dy')).toBe('.40em'); |
||||
} else { |
||||
expect(tspan.attr('dy')).toBeGreaterThan(8); |
||||
} |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
describe('rotated', function () { |
||||
|
||||
it('should update args to rotate axis', function () { |
||||
args.axis.rotated = true; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should locate ticks on rotated axis properly', function () { |
||||
var ticks = chart.internal.main.select('.c3-axis-x').selectAll('g.tick'); |
||||
ticks.each(function (d, i) { |
||||
var tspans = d3.select(this).selectAll('tspan'), |
||||
expectedX = '-9', |
||||
expectedDy = '2'; |
||||
if (i > 0) { // i === 0 should be checked in next test
|
||||
expect(tspans.size()).toBe(1); |
||||
tspans.each(function () { |
||||
var tspan = d3.select(this); |
||||
expect(tspan.attr('x')).toBe(expectedX); |
||||
expect(tspan.attr('dy')).toBe(expectedDy); |
||||
}); |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
it('should split tick text on rotated axis properly', function () { |
||||
var tick = chart.internal.main.select('.c3-axis-x').select('g.tick'), |
||||
tspans = tick.selectAll('tspan'), |
||||
expectedTickTexts = [ |
||||
'this is a very long', |
||||
'tick text on', |
||||
'category axis' |
||||
], |
||||
expectedX = '-9'; |
||||
expect(tspans.size()).toBe(3); |
||||
tspans.each(function (d, i) { |
||||
var tspan = d3.select(this); |
||||
expect(tspan.text()).toBe(expectedTickTexts[i]); |
||||
expect(tspan.attr('x')).toBe(expectedX); |
||||
// unable to define pricise number because it differs depends on environment..
|
||||
if (i === 0) { |
||||
expect(tspan.attr('dy')).toBeLessThan(0); |
||||
} else { |
||||
expect(tspan.attr('dy')).toBeGreaterThan(8); |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
describe('option used', function () { |
||||
|
||||
describe('as null', function () { |
||||
|
||||
it('should update args not to split ticks', function () { |
||||
args.axis.x.tick = { |
||||
multiline: false |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should split x tick', function () { |
||||
var tick = chart.internal.main.select('.c3-axis-x').select('g.tick'), |
||||
tspans = tick.selectAll('tspan'); |
||||
expect(tspans.size()).toBe(1); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
describe('as value', function () { |
||||
|
||||
it('should update args not to split ticks', function () { |
||||
args.axis.x.tick = { |
||||
width: 150 |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should split x tick to 2 lines properly', function () { |
||||
var tick = chart.internal.main.select('.c3-axis-x').select('g.tick'), |
||||
tspans = tick.selectAll('tspan'), |
||||
expectedTickTexts = [ |
||||
'this is a very long tick text', |
||||
'on category axis' |
||||
], |
||||
expectedX = '-9'; |
||||
expect(tspans.size()).toBe(2); |
||||
tspans.each(function (d, i) { |
||||
var tspan = d3.select(this); |
||||
expect(tspan.text()).toBe(expectedTickTexts[i]); |
||||
expect(tspan.attr('x')).toBe(expectedX); |
||||
// unable to define pricise number because it differs depends on environment..
|
||||
if (i === 0) { |
||||
expect(tspan.attr('dy')).toBeLessThan(0); |
||||
} else { |
||||
expect(tspan.attr('dy')).toBeGreaterThan(8); |
||||
} |
||||
}); |
||||
}); |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
describe('with axis.x.tick.format', function () { |
||||
|
||||
it('should update args to use axis.x.tick.format', function () { |
||||
args.axis.x.tick.format = function () { |
||||
return ['this is a very long tick text', 'on category axis']; |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should have multiline tick text', function () { |
||||
var tick = chart.internal.main.select('.c3-axis-x').select('g.tick'), |
||||
tspans = tick.selectAll('tspan'), |
||||
expectedTickTexts = ['this is a very long tick text', 'on category axis']; |
||||
expect(tspans.size()).toBe(2); |
||||
tspans.each(function (d, i) { |
||||
var tspan = d3.select(this); |
||||
expect(tspan.text()).toBe(expectedTickTexts[i]); |
||||
}); |
||||
}); |
||||
|
||||
}); |
||||
}); |
||||
|
||||
describe('axis.x.tick.rotate', function () { |
||||
|
||||
describe('not rotated', function () { |
||||
|
||||
it('should update args successfully', function () { |
||||
args = { |
||||
data: { |
||||
x: 'x', |
||||
columns: [ |
||||
['x', 'category 1', 'category 2', 'category 3', 'category 4', 'category 5', 'category 6'], |
||||
['data1', 30, 200, 100, 400, 150, 250], |
||||
['data2', 50, 20, 10, 40, 15, 25] |
||||
] |
||||
}, |
||||
axis: { |
||||
x: { |
||||
type: 'category', |
||||
tick: { |
||||
rotate: 60 |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should rotate tick texts', function () { |
||||
chart.internal.main.selectAll('.c3-axis-x g.tick').each(function () { |
||||
var tick = d3.select(this), |
||||
text = tick.select('text'), |
||||
tspan = text.select('tspan'); |
||||
expect(text.attr('transform')).toBe('rotate(60)'); |
||||
expect(text.attr('y')).toBe('1.5'); |
||||
expect(tspan.attr('dx')).toBe('6.928203230275509'); |
||||
}); |
||||
}); |
||||
|
||||
it('should have automatically calculated x axis height', function () { |
||||
var box = chart.internal.main.select('.c3-axis-x').node().getBoundingClientRect(); |
||||
expect(box.height).toBeGreaterThan(50); |
||||
}); |
||||
|
||||
}); |
||||
}); |
||||
|
||||
describe('axis.x.tick.fit', function () { |
||||
|
||||
describe('axis.x.tick.fit = true', function () { |
||||
|
||||
it('should set args for indexed data', 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(); |
||||
}); |
||||
|
||||
it('should show fitted ticks on indexed data', function () { |
||||
var ticks = chart.internal.main.selectAll('.c3-axis-x g.tick'); |
||||
expect(ticks.size()).toBe(6); |
||||
}); |
||||
|
||||
it('should set args for x-based data', function () { |
||||
args = { |
||||
data: { |
||||
x: 'x', |
||||
columns: [ |
||||
['x', 10, 20, 100, 110, 200, 1000], |
||||
['data1', 30, 200, 100, 400, 150, 250], |
||||
['data2', 50, 20, 10, 40, 15, 25], |
||||
['data3', 150, 120, 110, 140, 115, 125] |
||||
] |
||||
} |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should show fitted ticks on indexed data', function () { |
||||
var ticks = chart.internal.main.selectAll('.c3-axis-x g.tick'); |
||||
expect(ticks.size()).toBe(6); |
||||
}); |
||||
|
||||
it('should show fitted ticks after hide and show', function () { |
||||
chart.hide(); |
||||
chart.show(); |
||||
var ticks = chart.internal.main.selectAll('.c3-axis-x g.tick'); |
||||
expect(ticks.size()).toBe(6); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
describe('axis.x.tick.fit = false', function () { |
||||
|
||||
it('should set args for indexed data', 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] |
||||
] |
||||
}, |
||||
axis: { |
||||
x: { |
||||
tick: { |
||||
fit: false |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should show fitted ticks on indexed data', function () { |
||||
var ticks = chart.internal.main.selectAll('.c3-axis-x g.tick'); |
||||
expect(ticks.size()).toBe(11); |
||||
}); |
||||
|
||||
it('should set args for x-based data', function () { |
||||
args.data = { |
||||
x: 'x', |
||||
columns: [ |
||||
['x', 10, 20, 100, 110, 200, 1000], |
||||
['data1', 30, 200, 100, 400, 150, 250], |
||||
['data2', 50, 20, 10, 40, 15, 25], |
||||
['data3', 150, 120, 110, 140, 115, 125] |
||||
] |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should show fitted ticks on indexed data', function () { |
||||
var ticks = chart.internal.main.selectAll('.c3-axis-x g.tick'); |
||||
expect(ticks.size()).toBe(10); |
||||
}); |
||||
|
||||
it('should show fitted ticks after hide and show', function () { |
||||
chart.hide(); |
||||
chart.show(); |
||||
var ticks = chart.internal.main.selectAll('.c3-axis-x g.tick'); |
||||
expect(ticks.size()).toBe(10); |
||||
}); |
||||
|
||||
}); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,42 @@
|
||||
function initDom() { |
||||
'use strict'; |
||||
|
||||
var div = document.createElement('div'); |
||||
div.id = 'chart'; |
||||
div.style.width = '640px'; |
||||
div.style.height = '480px'; |
||||
document.body.appendChild(div); |
||||
document.body.style.margin = '0px'; |
||||
} |
||||
typeof initDom !== 'undefined'; |
||||
|
||||
function setEvent(chart, x, y) { |
||||
'use strict'; |
||||
|
||||
var paddingLeft = chart.internal.main.node().transform.baseVal.getItem(0).matrix.e, |
||||
evt = document.createEvent("MouseEvents"); |
||||
evt.initMouseEvent("click", true, true, window, |
||||
0, 0, 0, x + paddingLeft, y + 5, |
||||
false, false, false, false, 0, null); |
||||
chart.internal.d3.event = evt; |
||||
} |
||||
typeof setEvent !== 'undefined'; |
||||
|
||||
function initChart(chart, args, done) { |
||||
'use strict'; |
||||
|
||||
if (typeof chart === 'undefined') { |
||||
window.initDom(); |
||||
} |
||||
chart = window.c3.generate(args); |
||||
chart.internal.d3.select('.jasmine_html-reporter') |
||||
.style('position', 'absolute') |
||||
.style('right', 0); |
||||
|
||||
window.setTimeout(function () { |
||||
done(); |
||||
}, 10); |
||||
|
||||
return chart; |
||||
} |
||||
typeof initChart !== 'undefined'; |
||||
@ -1,20 +1,15 @@
|
||||
|
||||
var describe = window.describe; |
||||
var expect = window.expect; |
||||
var it = window.it; |
||||
|
||||
var c3 = window.c3; |
||||
var describe = window.describe, |
||||
expect = window.expect, |
||||
it = window.it; |
||||
|
||||
describe('c3', function () { |
||||
'use strict'; |
||||
|
||||
it('exists', function () { |
||||
var c3 = window.c3; |
||||
|
||||
expect(c3).not.toBe(null); |
||||
it('exists', function () { |
||||
expect(c3).not.toBeNull(); |
||||
expect(typeof c3).toBe('object'); |
||||
|
||||
}); |
||||
|
||||
// ...write other tests here
|
||||
|
||||
}); |
||||
|
||||
|
||||
@ -0,0 +1,60 @@
|
||||
var describe = window.describe, |
||||
expect = window.expect, |
||||
it = window.it, |
||||
beforeEach = window.beforeEach; |
||||
|
||||
describe('c3 chart class', function () { |
||||
'use strict'; |
||||
|
||||
var chart, d3; |
||||
|
||||
var args = { |
||||
data: { |
||||
columns: [ |
||||
['data1', 30, 200, 100, 400, 150, 250], |
||||
['data2 prefix', 50, 20, 10, 40, 15, 25], |
||||
['data3 мужчины', 150, 120, 110, 140, 115, 125] |
||||
] |
||||
} |
||||
}; |
||||
|
||||
beforeEach(function (done) { |
||||
chart = window.initChart(chart, args, done); |
||||
d3 = chart.internal.d3; |
||||
}); |
||||
|
||||
describe('internal.getTargetSelectorSuffix', function () { |
||||
|
||||
it('should not replace any characters', function () { |
||||
var input = 'data1', |
||||
expected = '-' + input, |
||||
suffix = chart.internal.getTargetSelectorSuffix(input); |
||||
expect(suffix).toBe(expected); |
||||
}); |
||||
|
||||
it('should replace space to "-"', function () { |
||||
var input = 'data1 suffix', |
||||
expected = '-data1-suffix', |
||||
suffix = chart.internal.getTargetSelectorSuffix(input); |
||||
expect(suffix).toBe(expected); |
||||
}); |
||||
|
||||
it('should replace space to "-" with multibyte characters', function () { |
||||
var input = 'data1 suffix 日本語', |
||||
expected = '-data1-suffix-日本語', |
||||
suffix = chart.internal.getTargetSelectorSuffix(input); |
||||
expect(suffix).toBe(expected); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
describe('multibyte characters on chart', function () { |
||||
|
||||
it('should replace space to "-" with multibyte characters', function () { |
||||
var selector = '.c3-target-data3-мужчины'; |
||||
expect(chart.internal.main.select(selector).size()).toBe(1); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
}); |
||||
@ -0,0 +1,59 @@
|
||||
var describe = window.describe, |
||||
expect = window.expect, |
||||
it = window.it, |
||||
beforeEach = window.beforeEach; |
||||
|
||||
describe('c3 chart', function () { |
||||
'use strict'; |
||||
|
||||
var chart, d3; |
||||
|
||||
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; |
||||
}); |
||||
|
||||
describe('init', function () { |
||||
|
||||
it('should be created', function () { |
||||
var svg = d3.select('#chart svg'); |
||||
expect(svg).not.toBeNull(); |
||||
}); |
||||
|
||||
it('should set 3rd party property to Function', function () { |
||||
Function.prototype.$extIsFunction = true; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should be created even if 3rd party property has been set', function () { |
||||
var svg = d3.select('#chart svg'); |
||||
expect(svg).not.toBeNull(); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
describe('size', function () { |
||||
|
||||
it('should have same width', function () { |
||||
var svg = d3.select('#chart svg'); |
||||
expect(+svg.attr('width')).toBe(640); |
||||
}); |
||||
|
||||
it('should have same height', function () { |
||||
var svg = d3.select('#chart svg'); |
||||
expect(+svg.attr('height')).toBe(480); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
}); |
||||
@ -0,0 +1,150 @@
|
||||
var describe = window.describe, |
||||
expect = window.expect, |
||||
it = window.it, |
||||
beforeEach = window.beforeEach; |
||||
|
||||
describe('c3 chart data', function () { |
||||
'use strict'; |
||||
|
||||
var chart, d3; |
||||
|
||||
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) { |
||||
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); |
||||
}); |
||||
|
||||
describe('function in data.order', function () { |
||||
it('should return false in isOrderAsc and isOrderDesc functions', function () { |
||||
expect(chart.internal.isOrderAsc() || chart.internal.isOrderDesc()).toBe(false); |
||||
}); |
||||
}); |
||||
|
||||
describe('data.xs', function () { |
||||
|
||||
describe('normal x', function () { |
||||
|
||||
it('should have correct number of xs for each', function () { |
||||
expect(Object.keys(chart.internal.data.xs).length).toBe(3); |
||||
expect(chart.internal.data.xs.data1.length).toBe(6); |
||||
expect(chart.internal.data.xs.data2.length).toBe(6); |
||||
expect(chart.internal.data.xs.data3.length).toBe(6); |
||||
}); |
||||
|
||||
it('should have integer index as x', function () { |
||||
for (var i = 0; i < chart.internal.data.xs.data3.length; i++) { |
||||
expect(chart.internal.data.xs.data1[i]).toBe(i); |
||||
expect(chart.internal.data.xs.data2[i]).toBe(i); |
||||
expect(chart.internal.data.xs.data3[i]).toBe(i); |
||||
} |
||||
}); |
||||
|
||||
}); |
||||
|
||||
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' |
||||
} |
||||
} |
||||
}; |
||||
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)); |
||||
}); |
||||
}); |
||||
|
||||
describe('milliseconds timeseries x', function () { |
||||
it('should load timeseries data successfully', function () { |
||||
args = { |
||||
data: { |
||||
x : 'date', |
||||
xFormat: '%Y-%m-%d %H:%M:%S.%L', |
||||
columns: [ |
||||
['date', "2014-05-20 17:25:00.123", "2014-05-20 17:30:00.345"], |
||||
['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(+new Date(2014, 4, 20, 17, 25, 0, 123)); |
||||
expect(+xs.data1[1]).toBe(+new Date(2014, 4, 20, 17, 30, 0, 345)); |
||||
expect(+xs.data2[0]).toBe(+new Date(2014, 4, 20, 17, 25, 0, 123)); |
||||
expect(+xs.data2[1]).toBe(+new Date(2014, 4, 20, 17, 30, 0, 345)); |
||||
}); |
||||
|
||||
it('should have milliseconds tick format', function () { |
||||
var expected = ["2014-05-20 17:25:00.123", "2014-05-20 17:30:00.345"]; |
||||
chart.internal.main.selectAll('.c3-axis-x g.tick text').each(function (d, i) { |
||||
expect(d3.select(this).text()).toBe(expected[i]); |
||||
}); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
}); |
||||
}); |
||||
@ -0,0 +1,96 @@
|
||||
var describe = window.describe, |
||||
expect = window.expect, |
||||
it = window.it, |
||||
beforeEach = window.beforeEach; |
||||
|
||||
var initDom = window.initDom; |
||||
|
||||
describe('c3 chart axis', function () { |
||||
'use strict'; |
||||
|
||||
var chart, d3; |
||||
|
||||
var args = { |
||||
data: { |
||||
columns: [ |
||||
['data1', 30, 200, 100, 400, 150, 250], |
||||
['data2', 50, 20, 10, 40, 15, 25] |
||||
] |
||||
}, |
||||
axis: { |
||||
y: {}, |
||||
y2: {} |
||||
} |
||||
}; |
||||
|
||||
beforeEach(function (done) { |
||||
if (typeof chart === 'undefined') { |
||||
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); |
||||
}); |
||||
|
||||
describe('axis.y.min', function () { |
||||
|
||||
it('should change axis.y.min to -100', function () { |
||||
args.axis.y.min = -100; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should be set properly when smaller than max of data', function () { |
||||
var domain = chart.internal.y.domain(); |
||||
expect(domain[0]).toBe(-150); |
||||
expect(domain[1]).toBe(450); |
||||
}); |
||||
|
||||
it('should change axis.y.min to 500', function () { |
||||
args.axis.y.min = 500; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should be set properly when bigger than max of data', function () { |
||||
var domain = chart.internal.y.domain(); |
||||
expect(domain[0]).toBe(499); |
||||
expect(domain[1]).toBe(511); |
||||
}); |
||||
|
||||
it('should change axis.y.min to undefined', function () { |
||||
args.axis.y.min = undefined; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
describe('axis.y.max', function () { |
||||
|
||||
it('should change axis.y.max to 1000', function () { |
||||
args.axis.y.max = 1000; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should be set properly when bigger than min of data', function () { |
||||
var domain = chart.internal.y.domain(); |
||||
expect(domain[0]).toBe(-89); |
||||
expect(domain[1]).toBe(1099); |
||||
}); |
||||
|
||||
it('should change axis.y.max to 0', function () { |
||||
args.axis.y.max = 0; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should be set properly when smaller than min of data', function () { |
||||
var domain = chart.internal.y.domain(); |
||||
expect(domain[0]).toBe(-11); |
||||
expect(domain[1]).toBe(1); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
}); |
||||
@ -0,0 +1,83 @@
|
||||
var describe = window.describe, |
||||
expect = window.expect, |
||||
it = window.it, |
||||
beforeEach = window.beforeEach; |
||||
|
||||
describe('c3 chart grid', function () { |
||||
'use strict'; |
||||
|
||||
var chart, d3; |
||||
|
||||
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 () { |
||||
|
||||
it('should not show y grids', function () { |
||||
expect(chart.internal.main.select('.c3-ygrids').size()).toBe(0); |
||||
}); |
||||
|
||||
it('should update args to show y grids', function () { |
||||
args.grid.y.show = true; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should show y grids', function () { |
||||
var ygrids = chart.internal.main.select('.c3-ygrids'); |
||||
expect(ygrids.size()).toBe(1); |
||||
expect(ygrids.selectAll('.c3-ygrid').size()).toBe(9); |
||||
}); |
||||
|
||||
it('should update args to show only 3 y grids', function () { |
||||
args.grid.y.ticks = 3; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should show only 3 y grids', function () { |
||||
var ygrids = chart.internal.main.select('.c3-ygrids'); |
||||
expect(ygrids.size()).toBe(1); |
||||
expect(ygrids.selectAll('.c3-ygrid').size()).toBe(3); |
||||
}); |
||||
|
||||
it('should update args to show y grids depending on y axis ticks', function () { |
||||
args.axis.y.tick.count = 5; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should show grids depending on y axis ticks', function () { |
||||
var ygrids = chart.internal.main.select('.c3-ygrids'), |
||||
expectedYs = []; |
||||
ygrids.selectAll('.c3-ygrid').each(function (d, i) { |
||||
expectedYs[i] = +d3.select(this).attr('y1'); |
||||
}); |
||||
expect(ygrids.size()).toBe(1); |
||||
expect(ygrids.selectAll('.c3-ygrid').size()).toBe(5); |
||||
chart.internal.main.select('.c3-axis-y').selectAll('.tick').each(function (d, i) { |
||||
var t = d3.transform(d3.select(this).attr('transform')); |
||||
expect(t.translate[1]).toBe(expectedYs[i]); |
||||
}); |
||||
}); |
||||
|
||||
}); |
||||
}); |
||||
@ -0,0 +1,140 @@
|
||||
var describe = window.describe, |
||||
expect = window.expect, |
||||
it = window.it, |
||||
beforeEach = window.beforeEach; |
||||
|
||||
describe('c3 chart interaction', function () { |
||||
'use strict'; |
||||
|
||||
var chart, d3; |
||||
|
||||
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) { |
||||
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); |
||||
}); |
||||
|
||||
describe('generate event rects', function () { |
||||
|
||||
describe('custom x', function () { |
||||
|
||||
it('should generate bar chart', function () { |
||||
args = { |
||||
data: { |
||||
x: 'x', |
||||
columns: [ |
||||
['x', 0, 1000, 3000, 10000], |
||||
['data', 10, 10, 10, 10] |
||||
], |
||||
type: 'bar' |
||||
} |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should have 4 event rects properly', function () { |
||||
var lefts = [77.5, 137, 203.5, 402.5], |
||||
widths = [59.5, 66.5, 199, 191.5]; |
||||
d3.selectAll('.c3-event-rect').each(function (d, i) { |
||||
var box = d3.select(this).node().getBoundingClientRect(); |
||||
expect(box.left).toBe(lefts[i]); |
||||
expect(box.width).toBe(widths[i]); |
||||
}); |
||||
}); |
||||
|
||||
it('should generate bar chart with only one data', function () { |
||||
args = { |
||||
data: { |
||||
x: 'x', |
||||
columns: [ |
||||
['x', 0], |
||||
['data', 10] |
||||
], |
||||
type: 'bar' |
||||
} |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should have 1 event rects properly', function () { |
||||
var eventRects = d3.selectAll('.c3-event-rect'); |
||||
expect(eventRects.size()).toBe(1); |
||||
eventRects.each(function () { |
||||
var box = d3.select(this).node().getBoundingClientRect(); |
||||
expect(box.left).toBe(40.5); |
||||
expect(box.width).toBe(590); |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
describe('timeseries', function () { |
||||
|
||||
it('should generate line chart with timeseries', function () { |
||||
args = { |
||||
data: { |
||||
x: 'x', |
||||
columns: [ |
||||
['x', '20140101', '20140201', '20140210', '20140301'], |
||||
['data', 10, 10, 10, 10] |
||||
] |
||||
} |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should have 4 event rects properly', function () { |
||||
var lefts = [43.5, 191, 349, 494], |
||||
widths = [147.5, 158, 145, 134]; |
||||
d3.selectAll('.c3-event-rect').each(function (d, i) { |
||||
var box = d3.select(this).node().getBoundingClientRect(); |
||||
expect(box.left).toBe(lefts[i]); |
||||
expect(box.width).toBe(widths[i]); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
it('should generate line chart with only 1 data timeseries', function () { |
||||
args = { |
||||
data: { |
||||
x: 'x', |
||||
columns: [ |
||||
['x', '20140101'], |
||||
['data', 10] |
||||
] |
||||
} |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should have 1 event rects properly', function () { |
||||
var eventRects = d3.selectAll('.c3-event-rect'); |
||||
expect(eventRects.size()).toBe(1); |
||||
eventRects.each(function () { |
||||
var box = d3.select(this).node().getBoundingClientRect(); |
||||
expect(box.left).toBe(40.5); |
||||
expect(box.width).toBe(590); |
||||
}); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
}); |
||||
|
||||
}); |
||||
@ -0,0 +1,89 @@
|
||||
var describe = window.describe, |
||||
expect = window.expect, |
||||
it = window.it, |
||||
beforeEach = window.beforeEach; |
||||
|
||||
describe('c3 chart legend', function () { |
||||
'use strict'; |
||||
|
||||
var chart, d3; |
||||
|
||||
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); |
||||
}); |
||||
|
||||
describe('legend position', function () { |
||||
|
||||
it('should be located on the center of chart', function () { |
||||
var box = chart.internal.legend.node().getBoundingClientRect(); |
||||
expect(box.left + box.right).toBe(640); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
describe('legend as inset', function () { |
||||
|
||||
it('should change the legend to "inset" successfully', function () { |
||||
args.legend = { |
||||
position: 'inset', |
||||
inset: { |
||||
step: null |
||||
} |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should be positioned properly', function () { |
||||
var box = d3.select('.c3-legend-background').node().getBoundingClientRect(); |
||||
expect(box.top).toBe(5.5); |
||||
expect(box.left).toBe(60.5); |
||||
}); |
||||
|
||||
it('should have automatically calculated height', function () { |
||||
var box = d3.select('.c3-legend-background').node().getBoundingClientRect(); |
||||
expect(box.height).toBe(48); |
||||
}); |
||||
|
||||
it('should change the legend step to 1 successfully', function () { |
||||
args.legend.inset.step = 1; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should have automatically calculated height', function () { |
||||
var box = d3.select('.c3-legend-background').node().getBoundingClientRect(); |
||||
expect(box.height).toBe(28); |
||||
}); |
||||
|
||||
it('should change the legend step to 2 successfully', function () { |
||||
args.legend.inset.step = 2; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should have automatically calculated height', function () { |
||||
var box = d3.select('.c3-legend-background').node().getBoundingClientRect(); |
||||
expect(box.height).toBe(48); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
}); |
||||
@ -0,0 +1,100 @@
|
||||
var describe = window.describe, |
||||
expect = window.expect, |
||||
it = window.it, |
||||
beforeEach = window.beforeEach; |
||||
|
||||
var initDom = window.initDom, |
||||
setEvent = window.setEvent; |
||||
|
||||
describe('c3 chart shape bar', function () { |
||||
'use strict'; |
||||
|
||||
var chart, d3; |
||||
|
||||
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) { |
||||
if (typeof chart === 'undefined') { |
||||
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); |
||||
}); |
||||
|
||||
describe('internal.isWithinBar', function () { |
||||
|
||||
describe('with normal axis', function () { |
||||
|
||||
it('should not be within bar', function () { |
||||
var bar = d3.select('.c3-target-data1 .c3-bar-0').node(); |
||||
setEvent(chart, 0, 0); |
||||
expect(chart.internal.isWithinBar(bar)).toBeFalsy(); |
||||
}); |
||||
|
||||
it('should be within bar', function () { |
||||
var bar = d3.select('.c3-target-data1 .c3-bar-0').node(); |
||||
setEvent(chart, 31, 280); |
||||
expect(chart.internal.isWithinBar(bar)).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should not be within bar of negative value', function () { |
||||
var bar = d3.select('.c3-target-data3 .c3-bar-0').node(); |
||||
setEvent(chart, 68, 280); |
||||
expect(chart.internal.isWithinBar(bar)).toBeFalsy(); |
||||
}); |
||||
|
||||
it('should be within bar of negative value', function () { |
||||
var bar = d3.select('.c3-target-data3 .c3-bar-0').node(); |
||||
setEvent(chart, 68, 350); |
||||
expect(chart.internal.isWithinBar(bar)).toBeTruthy(); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
describe('with rotated axis', function () { |
||||
|
||||
it('should change the chart as axis rotated', function () { |
||||
args.axis.rotated = true; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should not be within bar', function () { |
||||
var bar = d3.select('.c3-target-data1 .c3-bar-0').node(); |
||||
setEvent(chart, 0, 0); |
||||
expect(chart.internal.isWithinBar(bar)).toBeFalsy(); |
||||
}); |
||||
|
||||
it('should be within bar', function () { |
||||
var bar = d3.select('.c3-target-data1 .c3-bar-0').node(); |
||||
setEvent(chart, 190, 20); |
||||
expect(chart.internal.isWithinBar(bar)).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should be within bar of negative value', function () { |
||||
var bar = d3.select('.c3-target-data3 .c3-bar-0').node(); |
||||
setEvent(chart, 68, 50); |
||||
expect(chart.internal.isWithinBar(bar)).toBeTruthy(); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
}); |
||||
|
||||
}); |
||||
@ -0,0 +1,60 @@
|
||||
var describe = window.describe, |
||||
expect = window.expect, |
||||
it = window.it, |
||||
beforeEach = window.beforeEach; |
||||
|
||||
var initDom = window.initDom; |
||||
|
||||
describe('c3 chart shape line', function () { |
||||
'use strict'; |
||||
|
||||
var chart, d3; |
||||
|
||||
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) { |
||||
if (typeof chart === 'undefined') { |
||||
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); |
||||
}); |
||||
|
||||
describe('shape-rendering for line chart', function () { |
||||
|
||||
it("should not have shape-rendering when it's line chart", function () { |
||||
d3.selectAll('.c3-line').each(function () { |
||||
var style = d3.select(this).style('shape-rendering'); |
||||
expect(style).toBe('auto'); |
||||
}); |
||||
}); |
||||
|
||||
it('should chnage to step chart', function () { |
||||
args.data.type = 'step'; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it("should have shape-rendering = crispedges when it's step chart", function () { |
||||
d3.selectAll('.c3-line').each(function () { |
||||
var style = d3.select(this).style('shape-rendering'); |
||||
expect(style).toBe('crispedges'); |
||||
}); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
}); |
||||
@ -0,0 +1,108 @@
|
||||
var describe = window.describe, |
||||
expect = window.expect, |
||||
it = window.it, |
||||
beforeEach = window.beforeEach; |
||||
|
||||
describe('c3 chart types', function () { |
||||
'use strict'; |
||||
|
||||
var chart, d3; |
||||
|
||||
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) { |
||||
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); |
||||
}); |
||||
|
||||
describe('internal.hasArcType', function () { |
||||
|
||||
it('should return true', function () { |
||||
expect(chart.internal.hasArcType()).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should change chart type to "bar" successfully', function () { |
||||
args.data.type = 'bar'; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should return false', function () { |
||||
expect(chart.internal.hasArcType()).toBeFalsy(); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
describe('internal.hasType', function () { |
||||
|
||||
it('should change chart type to "pie" successfully', function () { |
||||
args.data.type = 'pie'; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should return true for "pie" type', function () { |
||||
expect(chart.internal.hasType('pie')).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should return false for "line" type', function () { |
||||
expect(chart.internal.hasType('line')).toBeFalsy(); |
||||
}); |
||||
|
||||
it('should return false for "bar" type', function () { |
||||
expect(chart.internal.hasType('bar')).toBeFalsy(); |
||||
}); |
||||
|
||||
it('should unload successfully', function () { |
||||
chart.unload([]); |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should return true for "pie" type even if no data', function () { |
||||
expect(chart.internal.hasType('pie')).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should return false for "line" type even if no data', function () { |
||||
expect(chart.internal.hasType('line')).toBeFalsy(); |
||||
}); |
||||
|
||||
it('should return false for "bar" type even if no data', function () { |
||||
expect(chart.internal.hasType('bar')).toBeFalsy(); |
||||
}); |
||||
|
||||
it('should change chart type to "bar" successfully', function () { |
||||
args.data.type = 'bar'; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should return false for "pie" type even if no data', function () { |
||||
expect(chart.internal.hasType('pie')).toBeFalsy(); |
||||
}); |
||||
|
||||
it('should return false for "line" type even if no data', function () { |
||||
expect(chart.internal.hasType('line')).toBeFalsy(); |
||||
}); |
||||
|
||||
it('should return true for "bar" type even if no data', function () { |
||||
expect(chart.internal.hasType('bar')).toBeTruthy(); |
||||
}); |
||||
|
||||
|
||||
}); |
||||
|
||||
}); |
||||
@ -1,27 +1,22 @@
|
||||
c3_chart_fn.data = function () {}; |
||||
c3_chart_fn.data.get = function (targetId) { |
||||
var target = this.data.getAsTarget(targetId); |
||||
return isDefined(target) ? target.values.map(function (d) { return d.value; }) : undefined; |
||||
c3_chart_fn.data = function (targetIds) { |
||||
var targets = this.internal.data.targets; |
||||
return typeof targetIds === 'undefined' ? targets : targets.filter(function (t) { |
||||
return [].concat(targetIds).indexOf(t.id) >= 0; |
||||
}); |
||||
}; |
||||
c3_chart_fn.data.shown = function (targetId) { |
||||
return this.internal.filterTargetsToShow(this.data(targetId)); |
||||
}; |
||||
c3_chart_fn.data.getAsTarget = function (targetId) { |
||||
var targets = this.data.targets.filter(function (t) { return t.id === targetId; }); |
||||
return targets.length > 0 ? targets[0] : undefined; |
||||
c3_chart_fn.data.values = function (targetId) { |
||||
var target = this.data(targetId); |
||||
return target ? target.values.map(function (d) { return d.value; }) : null; |
||||
}; |
||||
c3_chart_fn.data.names = function (names) { |
||||
var $$ = this.internal, config = $$.config; |
||||
if (!arguments.length) { return config.data_names; } |
||||
Object.keys(names).forEach(function (id) { |
||||
config.data_names[id] = names[id]; |
||||
}); |
||||
$$.redraw({withLegend: true}); |
||||
return config.data_names; |
||||
return this.internal.updateDataAttributes('names', names); |
||||
}; |
||||
c3_chart_fn.data.colors = function (colors) { |
||||
var $$ = this.internal, config = $$.config; |
||||
if (!arguments.length) { return config.data_colors; } |
||||
Object.keys(colors).forEach(function (id) { |
||||
config.data_colors[id] = colors[id]; |
||||
}); |
||||
$$.redraw({withLegend: true}); |
||||
return config.data_colors; |
||||
return this.internal.updateDataAttributes('colors', colors); |
||||
}; |
||||
c3_chart_fn.data.axes = function (axes) { |
||||
return this.internal.updateDataAttributes('axes', axes); |
||||
}; |
||||
|
||||
@ -1,50 +1,54 @@
|
||||
c3_chart_fn.focus = function (targetId) { |
||||
var $$ = this.internal, |
||||
candidates = $$.svg.selectAll($$.selectorTarget(targetId)), |
||||
candidatesForNoneArc = candidates.filter($$.isNoneArc.bind($$)), |
||||
candidatesForArc = candidates.filter($$.isArc.bind($$)); |
||||
function focus(targets) { |
||||
$$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 1); |
||||
} |
||||
c3_chart_fn.focus = function (targetIds) { |
||||
var $$ = this.internal, candidates; |
||||
|
||||
targetIds = $$.mapToTargetIds(targetIds); |
||||
candidates = $$.svg.selectAll($$.selectorTargets(targetIds.filter($$.isTargetToShow, $$))), |
||||
|
||||
this.revert(); |
||||
this.defocus(); |
||||
focus(candidatesForNoneArc.classed(CLASS.focused, true)); |
||||
focus(candidatesForArc); |
||||
candidates.classed(CLASS.focused, true).classed(CLASS.defocused, false); |
||||
if ($$.hasArcType()) { |
||||
$$.expandArc(targetId, true); |
||||
$$.expandArc(targetIds); |
||||
} |
||||
$$.toggleFocusLegend(targetId, true); |
||||
$$.toggleFocusLegend(targetIds, true); |
||||
|
||||
$$.focusedTargetIds = targetIds; |
||||
$$.defocusedTargetIds = $$.defocusedTargetIds.filter(function (id) { |
||||
return targetIds.indexOf(id) < 0; |
||||
}); |
||||
}; |
||||
|
||||
c3_chart_fn.defocus = function (targetId) { |
||||
var $$ = this.internal, |
||||
candidates = $$.svg.selectAll($$.selectorTarget(targetId)), |
||||
candidatesForNoneArc = candidates.filter($$.isNoneArc.bind($$)), |
||||
candidatesForArc = candidates.filter($$.isArc.bind($$)); |
||||
function defocus(targets) { |
||||
$$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 0.3); |
||||
} |
||||
c3_chart_fn.defocus = function (targetIds) { |
||||
var $$ = this.internal, candidates; |
||||
|
||||
targetIds = $$.mapToTargetIds(targetIds); |
||||
candidates = $$.svg.selectAll($$.selectorTargets(targetIds.filter($$.isTargetToShow, $$))), |
||||
|
||||
this.revert(); |
||||
defocus(candidatesForNoneArc.classed(CLASS.focused, false)); |
||||
defocus(candidatesForArc); |
||||
candidates.classed(CLASS.focused, false).classed(CLASS.defocused, true); |
||||
if ($$.hasArcType()) { |
||||
$$.unexpandArc(targetId); |
||||
$$.unexpandArc(targetIds); |
||||
} |
||||
$$.toggleFocusLegend(targetId, false); |
||||
$$.toggleFocusLegend(targetIds, false); |
||||
|
||||
$$.focusedTargetIds = $$.focusedTargetIds.filter(function (id) { |
||||
return targetIds.indexOf(id) < 0; |
||||
}); |
||||
$$.defocusedTargetIds = targetIds; |
||||
}; |
||||
|
||||
c3_chart_fn.revert = function (targetId) { |
||||
var $$ = this.internal, |
||||
candidates = $$.svg.selectAll($$.selectorTarget(targetId)), |
||||
candidatesForNoneArc = candidates.filter($$.isNoneArc.bind($$)), |
||||
candidatesForArc = candidates.filter($$.isArc.bind($$)); |
||||
function revert(targets) { |
||||
$$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 1); |
||||
} |
||||
revert(candidatesForNoneArc.classed(CLASS.focused, false)); |
||||
revert(candidatesForArc); |
||||
c3_chart_fn.revert = function (targetIds) { |
||||
var $$ = this.internal, candidates; |
||||
|
||||
targetIds = $$.mapToTargetIds(targetIds); |
||||
candidates = $$.svg.selectAll($$.selectorTargets(targetIds)); // should be for all targets
|
||||
|
||||
candidates.classed(CLASS.focused, false).classed(CLASS.defocused, false); |
||||
if ($$.hasArcType()) { |
||||
$$.unexpandArc(targetId); |
||||
$$.unexpandArc(targetIds); |
||||
} |
||||
$$.revertLegend(); |
||||
|
||||
$$.focusedTargetIds = []; |
||||
$$.defocusedTargetIds = []; |
||||
}; |
||||
|
||||
Loading…
Reference in new issue