luxolus/open-nomad
2
0
Fork 0
Code Issues 1 Pull requests Packages Releases Wiki Activity

Fix distribution-bar bugs found with live data

Browse source 
- Key data using datum label
  (when something goes from number, to zero, to number again)
- Retain active and inactive classes across data updates
This commit is contained in:
Michael Lange 2018-02-12 15:20:32 -08:00
parent 8566a8cd25
commit d51da0fa62
1 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
ui/app/components/distribution-bar.js
View file

@ -77,15 +77,18 @@ export default Component.extend(WindowResizable, {
const width = this.$('svg').width();
const filteredData = _data.filter(d => d.value > 0);
let slices = chart.select('.bars').selectAll('g').data(filteredData);
let slices = chart.select('.bars').selectAll('g').data(filteredData, d => d.label);
let sliceCount = filteredData.length;
this.set('slices', slices);
slices.exit().remove();
let slicesEnter = slices.enter()
.append('g')
.on('mouseenter', d => {
run(() => {
const slices = this.get('slices');
const slice = slices.filter(datum => datum === d);
slices.classed('active', false).classed('inactive', true);
slice.classed('active', true).classed('inactive', false);
@ -103,7 +106,13 @@ export default Component.extend(WindowResizable, {
});
slices = slices.merge(slicesEnter);
slices.attr('class', d => d.className || `slice-${_data.indexOf(d)}`);
slices.attr('class', d => {
const className = d.className || `slice-${_data.indexOf(d)}`
const activeDatum = this.get('activeDatum');
const isActive = activeDatum && activeDatum.label === d.label;
const isInactive = activeDatum && activeDatum.label !== d.label;
return [ className, isActive && 'active', isInactive && 'inactive' ].compact().join(' ');
});
const setWidth = d => `${width * d.percent - (d.index === sliceCount - 1 || d.index === 0 ? 1 : 2)}px`
const setOffset = d => `${width * d.offset + (d.index === 0 ? 0 : 1)}px`
@ -121,7 +130,6 @@ export default Component.extend(WindowResizable, {
.attr('width', setWidth)
.attr('x', setOffset)
let layers = slices.selectAll('.bar').data((d, i) => {
return new Array(d.layers || 1).fill(assign({ index: i }, d));
});