ihernandez
/
bitacora
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
3 Commits
2 Branches
0 Tags
38 MiB
 
 
 
 
 
 
Tree: ea8415bc2c
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'ea8415bc2c'
${ noResults }
bitacora/public/c3/spec/api.focus-spec.ts

463 lines
18 KiB
Raw Blame History

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)
})
})
})