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.
532 lines
15 KiB
532 lines
15 KiB
import { d3, initChart } from './c3-helper' |
|
|
|
describe('c3 chart arc', function() { |
|
'use strict' |
|
|
|
var chart, args |
|
|
|
beforeEach(function(done) { |
|
chart = initChart(chart, args, done) |
|
}) |
|
|
|
describe('unloads correctly', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 30], |
|
['data2', 150], |
|
['data3', 120] |
|
], |
|
type: 'pie' |
|
}, |
|
transition: { |
|
duration: 500 |
|
} |
|
} |
|
}) |
|
|
|
it('unloads without error', function(done) { |
|
chart.load({ |
|
columns: [['data2', 30, 20, 50, 40, 60, 50]] |
|
}) |
|
|
|
setTimeout(function() { |
|
chart.destroy() |
|
}, 200) |
|
|
|
setTimeout(function() { |
|
expect(chart.internal.config).toBeNull() |
|
done() |
|
}, 501) |
|
}) |
|
}) |
|
|
|
describe('show pie chart', function() { |
|
beforeAll(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\..+211\..+,211\..+,0,0,1,1\..+,211\..+L0,0Z/ |
|
) |
|
expect(d3.select('.c3-arc-data3').attr('d')).toMatch( |
|
/M1\..+,211\..+211\..+,211\..+,0,0,1,-124\..+,-171\..+L0,0Z/ |
|
) |
|
}) |
|
|
|
describe('with data id that can be converted to a color', function() { |
|
beforeAll(function() { |
|
args.data.columns = [ |
|
['black', 30], |
|
['data2', 150], |
|
['data3', 120] |
|
] |
|
}) |
|
|
|
it('should have correct d even if data id can be converted to a color', function(done) { |
|
setTimeout(function() { |
|
expect(d3.select('.c3-arc-black').attr('d')).toMatch( |
|
/M-124\..+,-171\..+A211\..+,211\..+,0,0,1,-3\..+,-211\..+L0,0Z/ |
|
) |
|
done() |
|
}, 500) |
|
}) |
|
|
|
describe('with empty pie chart', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', null], |
|
['data2', null], |
|
['data3', null] |
|
], |
|
type: 'pie' |
|
} |
|
} |
|
}) |
|
|
|
it('should have correct d attribute', function() { |
|
var chartArc = d3.select('.c3-chart-arcs'), |
|
arcs = { |
|
data1: chartArc |
|
.select('.c3-chart-arc.c3-target.c3-target-data1') |
|
.select('g.c3-shapes.c3-shapes-data1.c3-arcs.c3-arcs-data1') |
|
.select('path.c3-shape.c3-shape.c3-arc.c3-arc-data1'), |
|
data2: chartArc |
|
.select('.c3-chart-arc.c3-target.c3-target-data2') |
|
.select('g.c3-shapes.c3-shapes-data2.c3-arcs.c3-arcs-data2') |
|
.select('path.c3-shape.c3-shape.c3-arc.c3-arc-data2'), |
|
data3: chartArc |
|
.select('.c3-chart-arc.c3-target.c3-target-data3') |
|
.select('g.c3-shapes.c3-shapes-data3.c3-arcs.c3-arcs-data3') |
|
.select('path.c3-shape.c3-shape.c3-arc.c3-arc-data3') |
|
} |
|
expect(arcs.data1.attr('d').indexOf('NaN')).toBe(-1) |
|
expect(arcs.data2.attr('d').indexOf('NaN')).toBe(-1) |
|
expect(arcs.data3.attr('d').indexOf('NaN')).toBe(-1) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('sort pie chart', function() { |
|
var createPie = function(order) { |
|
return { |
|
data: { |
|
order: order, |
|
columns: [ |
|
['data1', 30], |
|
['data2', 150], |
|
['data3', 120] |
|
], |
|
type: 'pie' |
|
} |
|
} |
|
} |
|
|
|
var collectArcs = function() { |
|
return d3 |
|
.selectAll('.c3-arc') |
|
.data() |
|
.sort(function(a: any, b: any) { |
|
return a.startAngle - b.startAngle |
|
}) |
|
.map(function(item: any) { |
|
return item.data.id |
|
}) |
|
} |
|
|
|
it('should update data_order to desc', function() { |
|
args = createPie('desc') |
|
expect(true).toBeTruthy() |
|
}) |
|
|
|
it('it should have descending ordering', function() { |
|
expect(collectArcs()).toEqual(['data2', 'data3', 'data1']) |
|
}) |
|
|
|
it('should update data_order to asc', function() { |
|
args = createPie('asc') |
|
expect(true).toBeTruthy() |
|
}) |
|
|
|
it('it should have ascending ordering', function() { |
|
expect(collectArcs()).toEqual(['data1', 'data3', 'data2']) |
|
}) |
|
|
|
it('should update data_order to NULL', function() { |
|
args = createPie(null) |
|
expect(true).toBeTruthy() |
|
}) |
|
|
|
it('it should have no ordering', function() { |
|
expect(collectArcs()).toEqual(['data1', 'data2', 'data3']) |
|
}) |
|
|
|
it('should update data_order to Array', function() { |
|
args = createPie(['data3', 'data2', 'data1']) |
|
expect(true).toBeTruthy() |
|
}) |
|
|
|
it('it should have array specified ordering', function() { |
|
expect(collectArcs()).toEqual(['data3', 'data2', 'data1']) |
|
}) |
|
|
|
it('should update data_order to Function', function() { |
|
var names = ['data2', 'data1', 'data3'] |
|
args = createPie(function(a, b) { |
|
return names.indexOf(a.id) - names.indexOf(b.id) |
|
}) |
|
expect(true).toBeTruthy() |
|
}) |
|
|
|
it('it should have array specified ordering', function() { |
|
expect(collectArcs()).toEqual(['data2', 'data1', 'data3']) |
|
}) |
|
}) |
|
|
|
describe('config donut chart', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 30], |
|
['data2', 150], |
|
['data3', 120] |
|
], |
|
type: 'donut' |
|
}, |
|
donut: { |
|
padAngle: 0.05 |
|
} |
|
} |
|
}) |
|
|
|
it('can configure padAngle', function() { |
|
expect(chart.internal.pie.padAngle()()).toBe(0.05) |
|
}) |
|
}) |
|
|
|
describe('config pie chart', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 30], |
|
['data2', 150], |
|
['data3', 120] |
|
], |
|
type: 'pie' |
|
}, |
|
pie: { |
|
padAngle: 0.05 |
|
} |
|
} |
|
}) |
|
|
|
it('can configure padAngle', function() { |
|
expect(chart.internal.pie.padAngle()()).toBe(0.05) |
|
}) |
|
}) |
|
|
|
describe('show gauge', function() { |
|
describe('with a 180 degree gauge', function() { |
|
beforeAll(function() { |
|
args = { |
|
gauge: { |
|
width: 10, |
|
max: 10, |
|
expand: true |
|
}, |
|
data: { |
|
columns: [['data', 8]], |
|
type: 'gauge' |
|
} |
|
} |
|
}) |
|
|
|
it('should have correct d for Pi radian gauge', function() { |
|
var chartArc = d3.select('.c3-chart-arcs'), |
|
data = chartArc |
|
.select('.c3-chart-arc.c3-target.c3-target-data') |
|
.select('g.c3-shapes.c3-shapes-data.c3-arcs.c3-arcs-data') |
|
.select('path.c3-shape.c3-shape.c3-arc.c3-arc-data') |
|
|
|
expect(data.attr('d')).toMatch( |
|
/-258.4,-3\..+A258.4,258.4,0,0,1,209\..+,-151\..+L200\..+,-146\..+A248.39999999999998,248.39999999999998,0,0,0,-248.39999999999998,-3\..+Z/ |
|
) |
|
}) |
|
}) |
|
|
|
describe('with a 2 Pi radian gauge that starts at Pi/2', function() { |
|
beforeAll(function() { |
|
args = { |
|
gauge: { |
|
width: 10, |
|
max: 10, |
|
expand: true, |
|
fullCircle: true, |
|
startingAngle: Math.PI / 2 |
|
}, |
|
data: { |
|
columns: [['data', 8]], |
|
type: 'gauge' |
|
} |
|
} |
|
}) |
|
|
|
it('should have correct d for 2 Pi radian gauge starting at Pi/2', function() { |
|
var chartArc = d3.select('.c3-chart-arcs'), |
|
data = chartArc |
|
.select('.c3-chart-arc.c3-target.c3-target-data') |
|
.select('g.c3-shapes.c3-shapes-data.c3-arcs.c3-arcs-data') |
|
.select('path.c3-shape.c3-shape.c3-arc.c3-arc-data') |
|
|
|
expect(data.attr('d')).toMatch(/^M180/) |
|
}) |
|
|
|
describe('with labels use custom text', function() { |
|
beforeAll(function() { |
|
args = { |
|
gauge: { |
|
width: 10, |
|
max: 100, |
|
expand: true, |
|
label: { |
|
extents: function(value, isMax) { |
|
if (isMax) { |
|
return 'Max: ' + value + '%' |
|
} |
|
|
|
return 'Min: ' + value + '%' |
|
} |
|
} |
|
}, |
|
data: { |
|
columns: [['data', 8]], |
|
type: 'gauge' |
|
} |
|
} |
|
}) |
|
it('should show custom min/max guage labels', function() { |
|
var chartArc = d3.select('.c3-chart-arcs'), |
|
min = chartArc.select('.c3-chart-arcs-gauge-min'), |
|
max = chartArc.select('.c3-chart-arcs-gauge-max') |
|
|
|
expect(min.text()).toMatch('Min: 0%') |
|
expect(max.text()).toMatch('Max: 100%') |
|
}) |
|
}) |
|
}) |
|
|
|
describe('with more than one data_column ', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['padded1', 100], |
|
['padded2', 90], |
|
['padded3', 50], |
|
['padded4', 20] |
|
], |
|
type: 'gauge' |
|
}, |
|
color: { |
|
pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], |
|
threshold: { |
|
values: [30, 80, 95] |
|
} |
|
} |
|
} |
|
}) |
|
var arcColor = [ |
|
'rgb(96, 176, 68)', |
|
'rgb(246, 198, 0)', |
|
'rgb(249, 118, 0)', |
|
'rgb(255, 0, 0)' |
|
] |
|
|
|
describe('should contain arcs ', function() { |
|
it('each data_column should have one arc', function() { |
|
chart.internal.main |
|
.selectAll('.c3-chart-arc .c3-arc') |
|
.each(function(d, i) { |
|
expect( |
|
d3.select(this).classed('c3-arc-' + args.data.columns[i][0]) |
|
).toBeTruthy() |
|
}) |
|
}) |
|
|
|
it('each arc should have the color from color_pattern if color_treshold is given ', function() { |
|
chart.internal.main |
|
.selectAll('.c3-chart-arc .c3-arc') |
|
.each(function(d, i) { |
|
expect(d3.select(this).style('fill')).toBe(arcColor[i]) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('should contain backgrounds ', function() { |
|
it('each data_column should have one background', function() { |
|
chart.internal.main |
|
.selectAll('.c3-chart-arcs path.c3-chart-arcs-background') |
|
.each(function(d, i) { |
|
expect( |
|
d3.select(this).classed('c3-chart-arcs-background-' + i) |
|
).toBeTruthy() |
|
}) |
|
}) |
|
|
|
it('each background should have tbe same color', function() { |
|
chart.internal.main |
|
.selectAll('.c3-chart-arcs path.c3-chart-arcs-background') |
|
.each(function() { |
|
expect(d3.select(this).style('fill')).toBe('rgb(224, 224, 224)') |
|
}) |
|
}) |
|
}) |
|
|
|
describe('should contain labels', function() { |
|
it('each data_column should have a label', function() { |
|
chart.internal.main |
|
.selectAll('.c3-chart-arc .c3-gauge-value') |
|
.each(function(d, i) { |
|
expect(d3.select(this).text()).toBe( |
|
chart.internal.defaultArcValueFormat( |
|
null, |
|
args.data.columns[i][1] / 100 |
|
) |
|
) |
|
}) |
|
}) |
|
|
|
it('each label should have the same color', function() { |
|
chart.internal.main |
|
.selectAll('.c3-chart-arc .c3-gauge-value') |
|
.each(function() { |
|
expect(d3.select(this).style('fill')).toBe('rgb(0, 0, 0)') |
|
}) |
|
}) |
|
|
|
it('if only one data_column is visible the label should have "" for transform', function(done) { |
|
var textBeforeHide = chart.internal.main.select( |
|
'.c3-chart-arc.c3-target.c3-target-padded4 text' |
|
) |
|
expect(textBeforeHide.attr('transform')).not.toBe('') |
|
chart.hide(['padded1', 'padded2', 'padded3']) |
|
setTimeout(function() { |
|
var textAfterHide = chart.internal.main.select( |
|
'.c3-chart-arc.c3-target.c3-target-padded4 text' |
|
) |
|
expect(textAfterHide.attr('transform')).toBe('') |
|
done() |
|
}, 1000) |
|
}) |
|
}) |
|
|
|
describe('should contain labellines', function() { |
|
it('each data_column should have a labelline', function() { |
|
chart.internal.main |
|
.selectAll('.c3-chart-arc .c3-arc-label-line') |
|
.each(function(d, i) { |
|
expect( |
|
d3.select(this).classed('c3-target-' + args.data.columns[i][0]) |
|
).toBeTruthy() |
|
}) |
|
}) |
|
|
|
it('each labelline should have the color from color_pattern if color_treshold is given', function() { |
|
chart.internal.main |
|
.selectAll('.c3-chart-arc .c3-arc-label-line') |
|
.each(function(d, i) { |
|
expect(d3.select(this).style('fill')).toBe(arcColor[i]) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('with more than one data value ', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['padded1', 40, 60], |
|
['padded2', 100, -10], |
|
['padded3', 0, 50], |
|
['padded4', 20, 0] |
|
], |
|
type: 'gauge' |
|
}, |
|
color: { |
|
pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], |
|
threshold: { |
|
values: [30, 80, 95] |
|
} |
|
} |
|
} |
|
}) |
|
var arcColor = [ |
|
'rgb(96, 176, 68)', |
|
'rgb(246, 198, 0)', |
|
'rgb(249, 118, 0)', |
|
'rgb(255, 0, 0)' |
|
] |
|
|
|
describe('should contain arcs ', function() { |
|
it('each data_column should have one arc', function() { |
|
chart.internal.main |
|
.selectAll('.c3-chart-arc .c3-arc') |
|
.each(function(d, i) { |
|
expect( |
|
d3.select(this).classed('c3-arc-' + args.data.columns[i][0]) |
|
).toBeTruthy() |
|
}) |
|
}) |
|
|
|
it('each arc should have the color from color_pattern if color_treshold is given ', function() { |
|
chart.internal.main |
|
.selectAll('.c3-chart-arc .c3-arc') |
|
.each(function(d, i) { |
|
expect(d3.select(this).style('fill')).toBe(arcColor[i]) |
|
}) |
|
}) |
|
}) |
|
}) |
|
}) |
|
})
|
|
|