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.
464 lines
18 KiB
464 lines
18 KiB
1 year ago
|
import { d3, initChart } from './c3-helper'
|
||
|
|
||
|
describe('c3 api focus', function() {
|
||
|
'use strict'
|
||
|
|
||
|
var chart
|
||
|
|
||
|
var args: any = {
|
||
|
data: {
|
||
|
columns: [
|
||
|
['data1', 30, 200, 100, 400],
|
||
|
['data2', 1000, 800, 500, 2000],
|
||
|
['data3', 5000, 2000, 1000, 4000]
|
||
|
]
|
||
|
}
|
||
|
}
|
||
|
|
||
|
beforeEach(function(done) {
|
||
|
chart = initChart(chart, args, done)
|
||
|
})
|
||
|
|
||
|
describe('focus', function() {
|
||
|
it('should focus all targets', function(done) {
|
||
|
var main = chart.internal.main,
|
||
|
legend = chart.internal.legend
|
||
|
chart.focus()
|
||
|
setTimeout(function() {
|
||
|
var targets = main.select('.c3-chart-line.c3-target'),
|
||
|
legendItems = legend.select('.c3-legend-item')
|
||
|
targets.each(function() {
|
||
|
var line = d3.select(this)
|
||
|
expect(line.classed('c3-focused')).toBeTruthy()
|
||
|
})
|
||
|
legendItems.each(function() {
|
||
|
var item = d3.select(this)
|
||
|
expect(item.classed('c3-legend-item-focused')).toBeTruthy()
|
||
|
})
|
||
|
done()
|
||
|
}, 1000)
|
||
|
})
|
||
|
|
||
|
it('should focus one target', function(done) {
|
||
|
var main = chart.internal.main,
|
||
|
legend = chart.internal.legend
|
||
|
chart.focus('data2')
|
||
|
setTimeout(function() {
|
||
|
var targets = {
|
||
|
data1: main.select('.c3-chart-line.c3-target.c3-target-data1'),
|
||
|
data2: main.select('.c3-chart-line.c3-target.c3-target-data2'),
|
||
|
data3: main.select('.c3-chart-line.c3-target.c3-target-data3')
|
||
|
},
|
||
|
legendItems = {
|
||
|
data1: legend.select('.c3-legend-item-data1'),
|
||
|
data2: legend.select('.c3-legend-item-data2'),
|
||
|
data3: legend.select('.c3-legend-item-data3')
|
||
|
}
|
||
|
expect(targets.data1.classed('c3-focused')).toBeFalsy()
|
||
|
expect(targets.data2.classed('c3-focused')).toBeTruthy()
|
||
|
expect(targets.data3.classed('c3-focused')).toBeFalsy()
|
||
|
expect(legendItems.data1.classed('c3-legend-item-focused')).toBeFalsy()
|
||
|
expect(legendItems.data2.classed('c3-legend-item-focused')).toBeTruthy()
|
||
|
expect(legendItems.data3.classed('c3-legend-item-focused')).toBeFalsy()
|
||
|
done()
|
||
|
}, 1000)
|
||
|
})
|
||
|
|
||
|
it('should focus multiple targets', function(done) {
|
||
|
var main = chart.internal.main,
|
||
|
legend = chart.internal.legend
|
||
|
chart.focus(['data1', 'data2'])
|
||
|
setTimeout(function() {
|
||
|
var targets = {
|
||
|
data1: main.select('.c3-chart-line.c3-target.c3-target-data1'),
|
||
|
data2: main.select('.c3-chart-line.c3-target.c3-target-data2'),
|
||
|
data3: main.select('.c3-chart-line.c3-target.c3-target-data3')
|
||
|
},
|
||
|
legendItems = {
|
||
|
data1: legend.select('.c3-legend-item-data1'),
|
||
|
data2: legend.select('.c3-legend-item-data2'),
|
||
|
data3: legend.select('.c3-legend-item-data3')
|
||
|
}
|
||
|
expect(targets.data1.classed('c3-focused')).toBeTruthy()
|
||
|
expect(targets.data2.classed('c3-focused')).toBeTruthy()
|
||
|
expect(targets.data3.classed('c3-focused')).toBeFalsy()
|
||
|
expect(legendItems.data1.classed('c3-legend-item-focused')).toBeTruthy()
|
||
|
expect(legendItems.data2.classed('c3-legend-item-focused')).toBeTruthy()
|
||
|
expect(legendItems.data3.classed('c3-legend-item-focused')).toBeFalsy()
|
||
|
done()
|
||
|
}, 1000)
|
||
|
})
|
||
|
})
|
||
|
|
||
|
describe('defocus', function() {
|
||
|
it('should defocus all targets', function(done) {
|
||
|
var main = chart.internal.main,
|
||
|
legend = chart.internal.legend
|
||
|
chart.defocus()
|
||
|
setTimeout(function() {
|
||
|
var targets = main.select('.c3-chart-line.c3-target'),
|
||
|
legendItems = legend.select('.c3-legend-item')
|
||
|
targets.each(function() {
|
||
|
var line = d3.select(this)
|
||
|
expect(line.classed('c3-focused')).toBeFalsy()
|
||
|
expect(line.classed('c3-defocused')).toBeTruthy()
|
||
|
})
|
||
|
legendItems.each(function() {
|
||
|
var item = d3.select(this)
|
||
|
expect(item.classed('c3-legend-item-focused')).toBeFalsy()
|
||
|
expect(+item.style('opacity')).toBeCloseTo(0.3)
|
||
|
})
|
||
|
done()
|
||
|
}, 1000)
|
||
|
})
|
||
|
|
||
|
it('should defocus one target', function(done) {
|
||
|
var main = chart.internal.main,
|
||
|
legend = chart.internal.legend
|
||
|
chart.defocus('data2')
|
||
|
setTimeout(function() {
|
||
|
var targets = {
|
||
|
data1: main.select('.c3-chart-line.c3-target.c3-target-data1'),
|
||
|
data2: main.select('.c3-chart-line.c3-target.c3-target-data2'),
|
||
|
data3: main.select('.c3-chart-line.c3-target.c3-target-data3')
|
||
|
},
|
||
|
legendItems = {
|
||
|
data1: legend.select('.c3-legend-item-data1'),
|
||
|
data2: legend.select('.c3-legend-item-data2'),
|
||
|
data3: legend.select('.c3-legend-item-data3')
|
||
|
}
|
||
|
expect(targets.data1.classed('c3-defocused')).toBeFalsy()
|
||
|
expect(targets.data2.classed('c3-defocused')).toBeTruthy()
|
||
|
expect(targets.data3.classed('c3-defocused')).toBeFalsy()
|
||
|
expect(legendItems.data1.classed('c3-legend-item-focused')).toBeFalsy()
|
||
|
expect(legendItems.data2.classed('c3-legend-item-focused')).toBeFalsy()
|
||
|
expect(legendItems.data3.classed('c3-legend-item-focused')).toBeFalsy()
|
||
|
expect(+legendItems.data1.style('opacity')).toBeCloseTo(1)
|
||
|
expect(+legendItems.data2.style('opacity')).toBeCloseTo(0.3)
|
||
|
expect(+legendItems.data3.style('opacity')).toBeCloseTo(1)
|
||
|
done()
|
||
|
}, 1000)
|
||
|
})
|
||
|
|
||
|
it('should defocus multiple targets', function(done) {
|
||
|
var main = chart.internal.main,
|
||
|
legend = chart.internal.legend
|
||
|
chart.defocus(['data1', 'data2'])
|
||
|
setTimeout(function() {
|
||
|
var targets = {
|
||
|
data1: main.select('.c3-chart-line.c3-target.c3-target-data1'),
|
||
|
data2: main.select('.c3-chart-line.c3-target.c3-target-data2'),
|
||
|
data3: main.select('.c3-chart-line.c3-target.c3-target-data3')
|
||
|
},
|
||
|
legendItems = {
|
||
|
data1: legend.select('.c3-legend-item-data1'),
|
||
|
data2: legend.select('.c3-legend-item-data2'),
|
||
|
data3: legend.select('.c3-legend-item-data3')
|
||
|
}
|
||
|
expect(targets.data1.classed('c3-defocused')).toBeTruthy()
|
||
|
expect(targets.data2.classed('c3-defocused')).toBeTruthy()
|
||
|
expect(targets.data3.classed('c3-defocused')).toBeFalsy()
|
||
|
expect(legendItems.data1.classed('c3-legend-item-focused')).toBeFalsy()
|
||
|
expect(legendItems.data2.classed('c3-legend-item-focused')).toBeFalsy()
|
||
|
expect(legendItems.data3.classed('c3-legend-item-focused')).toBeFalsy()
|
||
|
expect(+legendItems.data1.style('opacity')).toBeCloseTo(0.3)
|
||
|
expect(+legendItems.data2.style('opacity')).toBeCloseTo(0.3)
|
||
|
expect(+legendItems.data3.style('opacity')).toBeCloseTo(1)
|
||
|
done()
|
||
|
}, 1000)
|
||
|
})
|
||
|
|
||
|
it('should defocus multiple targets after focused', function(done) {
|
||
|
var main = chart.internal.main,
|
||
|
legend = chart.internal.legend
|
||
|
chart.focus()
|
||
|
setTimeout(function() {
|
||
|
chart.defocus(['data1', 'data2'])
|
||
|
setTimeout(function() {
|
||
|
var targets = {
|
||
|
data1: main.select('.c3-chart-line.c3-target.c3-target-data1'),
|
||
|
data2: main.select('.c3-chart-line.c3-target.c3-target-data2'),
|
||
|
data3: main.select('.c3-chart-line.c3-target.c3-target-data3')
|
||
|
},
|
||
|
legendItems = {
|
||
|
data1: legend.select('.c3-legend-item-data1'),
|
||
|
data2: legend.select('.c3-legend-item-data2'),
|
||
|
data3: legend.select('.c3-legend-item-data3')
|
||
|
}
|
||
|
expect(targets.data1.classed('c3-defocused')).toBeTruthy()
|
||
|
expect(targets.data2.classed('c3-defocused')).toBeTruthy()
|
||
|
expect(targets.data3.classed('c3-defocused')).toBeFalsy()
|
||
|
expect(
|
||
|
legendItems.data1.classed('c3-legend-item-focused')
|
||
|
).toBeFalsy()
|
||
|
expect(
|
||
|
legendItems.data2.classed('c3-legend-item-focused')
|
||
|
).toBeFalsy()
|
||
|
expect(
|
||
|
legendItems.data3.classed('c3-legend-item-focused')
|
||
|
).toBeTruthy()
|
||
|
expect(+legendItems.data1.style('opacity')).toBeCloseTo(0.3)
|
||
|
expect(+legendItems.data2.style('opacity')).toBeCloseTo(0.3)
|
||
|
expect(+legendItems.data3.style('opacity')).toBeCloseTo(1)
|
||
|
done()
|
||
|
}, 1000)
|
||
|
}, 1000)
|
||
|
})
|
||
|
})
|
||
|
|
||
|
describe('revert', function() {
|
||
|
it('should revert all targets after focus', function(done) {
|
||
|
var main = chart.internal.main,
|
||
|
legend = chart.internal.legend
|
||
|
chart.focus()
|
||
|
setTimeout(function() {
|
||
|
chart.revert()
|
||
|
setTimeout(function() {
|
||
|
var targets = main.select('.c3-chart-line.c3-target'),
|
||
|
legendItems = legend.select('.c3-legend-item')
|
||
|
targets.each(function() {
|
||
|
var line = d3.select(this)
|
||
|
expect(line.classed('c3-focused')).toBeFalsy()
|
||
|
})
|
||
|
legendItems.each(function() {
|
||
|
var item = d3.select(this)
|
||
|
expect(item.classed('c3-legend-item-focused')).toBeFalsy()
|
||
|
expect(+item.style('opacity')).toBeCloseTo(1)
|
||
|
})
|
||
|
done()
|
||
|
}, 1000)
|
||
|
}, 1000)
|
||
|
})
|
||
|
|
||
|
it('should revert all targets after defocus', function(done) {
|
||
|
var main = chart.internal.main,
|
||
|
legend = chart.internal.legend
|
||
|
chart.defocus()
|
||
|
setTimeout(function() {
|
||
|
chart.revert()
|
||
|
setTimeout(function() {
|
||
|
var targets = main.select('.c3-chart-line.c3-target'),
|
||
|
legendItems = legend.select('.c3-legend-item')
|
||
|
targets.each(function() {
|
||
|
var line = d3.select(this)
|
||
|
expect(line.classed('c3-defocused')).toBeFalsy()
|
||
|
})
|
||
|
legendItems.each(function() {
|
||
|
var item = d3.select(this)
|
||
|
expect(item.classed('c3-legend-item-focused')).toBeFalsy()
|
||
|
expect(+item.style('opacity')).toBeCloseTo(1)
|
||
|
})
|
||
|
done()
|
||
|
}, 1000)
|
||
|
}, 1000)
|
||
|
})
|
||
|
|
||
|
it('should revert one target after focus', function(done) {
|
||
|
var main = chart.internal.main,
|
||
|
legend = chart.internal.legend
|
||
|
chart.focus()
|
||
|
setTimeout(function() {
|
||
|
chart.revert('data2')
|
||
|
setTimeout(function() {
|
||
|
var targets = {
|
||
|
data1: main.select('.c3-chart-line.c3-target.c3-target-data1'),
|
||
|
data2: main.select('.c3-chart-line.c3-target.c3-target-data2'),
|
||
|
data3: main.select('.c3-chart-line.c3-target.c3-target-data3')
|
||
|
},
|
||
|
legendItems = {
|
||
|
data1: legend.select('.c3-legend-item-data1'),
|
||
|
data2: legend.select('.c3-legend-item-data2'),
|
||
|
data3: legend.select('.c3-legend-item-data3')
|
||
|
}
|
||
|
expect(targets.data1.classed('c3-focused')).toBeTruthy()
|
||
|
expect(targets.data2.classed('c3-focused')).toBeFalsy()
|
||
|
expect(targets.data3.classed('c3-focused')).toBeTruthy()
|
||
|
expect(+legendItems.data1.style('opacity')).toBeCloseTo(1)
|
||
|
expect(+legendItems.data2.style('opacity')).toBeCloseTo(1)
|
||
|
expect(+legendItems.data3.style('opacity')).toBeCloseTo(1)
|
||
|
expect(
|
||
|
legendItems.data1.classed('c3-legend-item-focused')
|
||
|
).toBeTruthy()
|
||
|
expect(
|
||
|
legendItems.data2.classed('c3-legend-item-focused')
|
||
|
).toBeFalsy()
|
||
|
expect(
|
||
|
legendItems.data3.classed('c3-legend-item-focused')
|
||
|
).toBeTruthy()
|
||
|
done()
|
||
|
}, 1000)
|
||
|
}, 1000)
|
||
|
})
|
||
|
|
||
|
it('should revert one target after defocus', function(done) {
|
||
|
var main = chart.internal.main,
|
||
|
legend = chart.internal.legend
|
||
|
chart.defocus()
|
||
|
setTimeout(function() {
|
||
|
chart.revert('data2')
|
||
|
setTimeout(function() {
|
||
|
var targets = {
|
||
|
data1: main.select('.c3-chart-line.c3-target.c3-target-data1'),
|
||
|
data2: main.select('.c3-chart-line.c3-target.c3-target-data2'),
|
||
|
data3: main.select('.c3-chart-line.c3-target.c3-target-data3')
|
||
|
},
|
||
|
legendItems = {
|
||
|
data1: legend.select('.c3-legend-item-data1'),
|
||
|
data2: legend.select('.c3-legend-item-data2'),
|
||
|
data3: legend.select('.c3-legend-item-data3')
|
||
|
}
|
||
|
expect(targets.data1.classed('c3-defocused')).toBeTruthy()
|
||
|
expect(targets.data2.classed('c3-defocused')).toBeFalsy()
|
||
|
expect(targets.data3.classed('c3-defocused')).toBeTruthy()
|
||
|
expect(+legendItems.data1.style('opacity')).toBeCloseTo(0.3)
|
||
|
expect(+legendItems.data2.style('opacity')).toBeCloseTo(1)
|
||
|
expect(+legendItems.data3.style('opacity')).toBeCloseTo(0.3)
|
||
|
expect(
|
||
|
legendItems.data1.classed('c3-legend-item-focused')
|
||
|
).toBeFalsy()
|
||
|
expect(
|
||
|
legendItems.data2.classed('c3-legend-item-focused')
|
||
|
).toBeFalsy()
|
||
|
expect(
|
||
|
legendItems.data3.classed('c3-legend-item-focused')
|
||
|
).toBeFalsy()
|
||
|
done()
|
||
|
}, 1000)
|
||
|
}, 1000)
|
||
|
})
|
||
|
|
||
|
it('should focus multiple targets after focus', function(done) {
|
||
|
var main = chart.internal.main,
|
||
|
legend = chart.internal.legend
|
||
|
chart.focus()
|
||
|
setTimeout(function() {
|
||
|
chart.revert(['data1', 'data2'])
|
||
|
setTimeout(function() {
|
||
|
var targets = {
|
||
|
data1: main.select('.c3-chart-line.c3-target.c3-target-data1'),
|
||
|
data2: main.select('.c3-chart-line.c3-target.c3-target-data2'),
|
||
|
data3: main.select('.c3-chart-line.c3-target.c3-target-data3')
|
||
|
},
|
||
|
legendItems = {
|
||
|
data1: legend.select('.c3-legend-item-data1'),
|
||
|
data2: legend.select('.c3-legend-item-data2'),
|
||
|
data3: legend.select('.c3-legend-item-data3')
|
||
|
}
|
||
|
expect(targets.data1.classed('c3-focused')).toBeFalsy()
|
||
|
expect(targets.data2.classed('c3-focused')).toBeFalsy()
|
||
|
expect(targets.data3.classed('c3-focused')).toBeTruthy()
|
||
|
expect(+legendItems.data1.style('opacity')).toBeCloseTo(1)
|
||
|
expect(+legendItems.data2.style('opacity')).toBeCloseTo(1)
|
||
|
expect(+legendItems.data3.style('opacity')).toBeCloseTo(1)
|
||
|
expect(
|
||
|
legendItems.data1.classed('c3-legend-item-focused')
|
||
|
).toBeFalsy()
|
||
|
expect(
|
||
|
legendItems.data2.classed('c3-legend-item-focused')
|
||
|
).toBeFalsy()
|
||
|
expect(
|
||
|
legendItems.data3.classed('c3-legend-item-focused')
|
||
|
).toBeTruthy()
|
||
|
done()
|
||
|
}, 1000)
|
||
|
}, 1000)
|
||
|
})
|
||
|
|
||
|
it('should focus multiple targets after defocus', function(done) {
|
||
|
var main = chart.internal.main,
|
||
|
legend = chart.internal.legend
|
||
|
chart.defocus()
|
||
|
setTimeout(function() {
|
||
|
chart.revert(['data1', 'data2'])
|
||
|
setTimeout(function() {
|
||
|
var targets = {
|
||
|
data1: main.select('.c3-chart-line.c3-target.c3-target-data1'),
|
||
|
data2: main.select('.c3-chart-line.c3-target.c3-target-data2'),
|
||
|
data3: main.select('.c3-chart-line.c3-target.c3-target-data3')
|
||
|
},
|
||
|
legendItems = {
|
||
|
data1: legend.select('.c3-legend-item-data1'),
|
||
|
data2: legend.select('.c3-legend-item-data2'),
|
||
|
data3: legend.select('.c3-legend-item-data3')
|
||
|
}
|
||
|
expect(targets.data1.classed('c3-defocused')).toBeFalsy()
|
||
|
expect(targets.data2.classed('c3-defocused')).toBeFalsy()
|
||
|
expect(targets.data3.classed('c3-defocused')).toBeTruthy()
|
||
|
expect(+legendItems.data1.style('opacity')).toBeCloseTo(1)
|
||
|
expect(+legendItems.data2.style('opacity')).toBeCloseTo(1)
|
||
|
expect(+legendItems.data3.style('opacity')).toBeCloseTo(0.3)
|
||
|
expect(
|
||
|
legendItems.data1.classed('c3-legend-item-focused')
|
||
|
).toBeFalsy()
|
||
|
expect(
|
||
|
legendItems.data2.classed('c3-legend-item-focused')
|
||
|
).toBeFalsy()
|
||
|
expect(
|
||
|
legendItems.data3.classed('c3-legend-item-focused')
|
||
|
).toBeFalsy()
|
||
|
done()
|
||
|
}, 1000)
|
||
|
}, 1000)
|
||
|
})
|
||
|
})
|
||
|
|
||
|
describe('when legend.show = false', function() {
|
||
|
beforeAll(function() {
|
||
|
args.legend = {
|
||
|
show: false
|
||
|
}
|
||
|
})
|
||
|
|
||
|
it('should focus all targets without showing legend', function(done) {
|
||
|
var main = chart.internal.main,
|
||
|
legend = chart.internal.legend
|
||
|
chart.focus()
|
||
|
setTimeout(function() {
|
||
|
var targets = main.select('.c3-chart-line.c3-target'),
|
||
|
legendItems = legend.select('.c3-legend-item')
|
||
|
targets.each(function() {
|
||
|
var line = d3.select(this)
|
||
|
expect(line.classed('c3-focused')).toBeTruthy()
|
||
|
})
|
||
|
expect(legendItems.size()).toBeCloseTo(0)
|
||
|
done()
|
||
|
}, 1000)
|
||
|
})
|
||
|
|
||
|
it('should defocus all targets without showing legend', function(done) {
|
||
|
var main = chart.internal.main,
|
||
|
legend = chart.internal.legend
|
||
|
chart.defocus()
|
||
|
setTimeout(function() {
|
||
|
var targets = main.select('.c3-chart-line.c3-target'),
|
||
|
legendItems = legend.select('.c3-legend-item')
|
||
|
targets.each(function() {
|
||
|
var line = d3.select(this)
|
||
|
expect(line.classed('c3-defocused')).toBeTruthy()
|
||
|
})
|
||
|
expect(legendItems.size()).toBeCloseTo(0)
|
||
|
done()
|
||
|
}, 1000)
|
||
|
})
|
||
|
|
||
|
it('should revert all targets after focus', function(done) {
|
||
|
var main = chart.internal.main,
|
||
|
legend = chart.internal.legend
|
||
|
chart.focus()
|
||
|
setTimeout(function() {
|
||
|
chart.revert()
|
||
|
setTimeout(function() {
|
||
|
var targets = main.select('.c3-chart-line.c3-target'),
|
||
|
legendItems = legend.select('.c3-legend-item')
|
||
|
targets.each(function() {
|
||
|
var line = d3.select(this)
|
||
|
expect(line.classed('c3-focused')).toBeFalsy()
|
||
|
})
|
||
|
expect(legendItems.size()).toBeCloseTo(0)
|
||
|
done()
|
||
|
}, 1000)
|
||
|
}, 1000)
|
||
|
})
|
||
|
})
|
||
|
})
|