mirror of https://github.com/masayuki0812/c3.git
Eduardo Cartre
10 years ago
26 changed files with 877 additions and 237 deletions
File diff suppressed because one or more lines are too long
@ -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,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,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); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
}); |
||||
@ -1,26 +1,22 @@
|
||||
c3_chart_fn.data = function (targetId) { |
||||
var targets = this.internal.data.targets.filter(function (t) { return t.id === targetId; }); |
||||
return targets.length > 0 ? targets[0] : null; |
||||
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.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); |
||||
}; |
||||
|
||||
Loading…
Reference in new issue