playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Fix legend state when revert called - #782

pull/789/merge
Masayuki Tanaka 10 years ago
parent
1333c1e969
commit
74bd536969
6 changed files with 387 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      c3.js
  2. 4
      c3.min.js
  3. 371
      spec/api.focus-spec.js
  4. 2
      src/api.focus.js
  5. 2
      src/class.js
  6. 11
      src/legend.js

15
c3.js
Unescape View File

@ -3732,12 +3732,11 @@
var $$ = this;
targetIds = $$.mapToTargetIds(targetIds);
$$.legend.selectAll('.' + CLASS.legendItem)
.classed(CLASS.legendItemFocused, function (id) {
return targetIds.indexOf(id) >= 0 && focus;
})
.transition().duration(100)
.style('opacity', function (id) {
var opacity = targetIds.indexOf(id) >= 0 && focus ? $$.opacityForLegend : $$.opacityForUnfocusedLegend;
.filter(function (id) { return targetIds.indexOf(id) >= 0; })
.classed(CLASS.legendItemFocused, focus)
.transition().duration(100)
.style('opacity', function () {
var opacity = focus ? $$.opacityForLegend : $$.opacityForUnfocusedLegend;
return opacity.call($$, $$.d3.select(this));
});
};
@ -5592,7 +5591,7 @@
};
c3_chart_internal_fn.selectorLegends = function (ids) {
var $$ = this;
return ids.length ? ids.map(function (id) { return $$.selectorLegend(id); }) : null;
return ids && ids.length ? ids.map(function (id) { return $$.selectorLegend(id); }) : null;
};
var isValue = c3_chart_internal_fn.isValue = function (v) {
@ -5691,7 +5690,7 @@
if ($$.hasArcType()) {
$$.unexpandArc(targetIds);
}
$$.revertLegend();
$$.showLegend(targetIds);
$$.focusedTargetIds = [];
$$.defocusedTargetIds = [];

4
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

371
spec/api.focus-spec.js
Unescape View File

@ -0,0 +1,371 @@
var describe = window.describe,
expect = window.expect,
it = window.it,
beforeEach = window.beforeEach;
describe('c3 api load', function () {
'use strict';
var chart, d3;
var args = {
data: {
columns: [
['data1', 30, 200, 100, 400],
['data2', 1000, 800, 500, 2000],
['data3', 5000, 2000, 1000, 4000]
]
}
};
beforeEach(function (done) {
chart = window.initChart(chart, args, done);
d3 = chart.internal.d3;
});
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();
}, 500);
});
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();
}, 500);
});
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();
}, 500);
});
});
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();
}, 500);
});
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();
}, 500);
});
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();
}, 500);
});
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();
}, 500);
});
}, 500);
});
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.style('opacity')).toBeCloseTo(1);
});
done();
}, 500);
}, 500);
});
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.style('opacity')).toBeCloseTo(1);
});
done();
}, 500);
}, 500);
});
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);
done();
}, 500);
}, 500);
});
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);
done();
}, 500);
}, 500);
});
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);
done();
}, 500);
}, 500);
});
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);
done();
}, 500);
}, 500);
});
});
});

2
src/api.focus.js
Unescape View File

@ -47,7 +47,7 @@ c3_chart_fn.revert = function (targetIds) {
if ($$.hasArcType()) {
$$.unexpandArc(targetIds);
}
$$.revertLegend();
$$.showLegend(targetIds);
$$.focusedTargetIds = [];
$$.defocusedTargetIds = [];

2
src/class.js
Unescape View File

@ -170,5 +170,5 @@ c3_chart_internal_fn.selectorLegend = function (id) {
};
c3_chart_internal_fn.selectorLegends = function (ids) {
var $$ = this;
return ids.length ? ids.map(function (id) { return $$.selectorLegend(id); }) : null;
return ids && ids.length ? ids.map(function (id) { return $$.selectorLegend(id); }) : null;
};

11
src/legend.js
Unescape View File

@ -66,12 +66,11 @@ c3_chart_internal_fn.toggleFocusLegend = function (targetIds, focus) {
var $$ = this;
targetIds = $$.mapToTargetIds(targetIds);
$$.legend.selectAll('.' + CLASS.legendItem)
.classed(CLASS.legendItemFocused, function (id) {
return targetIds.indexOf(id) >= 0 && focus;
})
.transition().duration(100)
.style('opacity', function (id) {
var opacity = targetIds.indexOf(id) >= 0 && focus ? $$.opacityForLegend : $$.opacityForUnfocusedLegend;
.filter(function (id) { return targetIds.indexOf(id) >= 0; })
.classed(CLASS.legendItemFocused, focus)
.transition().duration(100)
.style('opacity', function () {
var opacity = focus ? $$.opacityForLegend : $$.opacityForUnfocusedLegend;
return opacity.call($$, $$.d3.select(this));
});
};

Write Preview
Loading…
Cancel
Save