aboutsummaryrefslogtreecommitdiffstats
path: root/web/nms.gathering.org/speedometer/c3-master/spec/api.focus-spec.js
diff options
context:
space:
mode:
Diffstat (limited to 'web/nms.gathering.org/speedometer/c3-master/spec/api.focus-spec.js')
-rw-r--r--web/nms.gathering.org/speedometer/c3-master/spec/api.focus-spec.js441
1 files changed, 441 insertions, 0 deletions
diff --git a/web/nms.gathering.org/speedometer/c3-master/spec/api.focus-spec.js b/web/nms.gathering.org/speedometer/c3-master/spec/api.focus-spec.js
new file mode 100644
index 0000000..df64e80
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/spec/api.focus-spec.js
@@ -0,0 +1,441 @@
+describe('c3 api focus', function () {
+ 'use strict';
+
+ var chart;
+
+ 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);
+ });
+
+ 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 () {
+
+ it('should update args to hide legend', function () {
+ args.legend = {
+ show: false
+ };
+ expect(true).toBeTruthy();
+ });
+
+ 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);
+ });
+
+ });
+
+});
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-27 17:21:41 +0000