Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix tooltip ordering with data_order and add tooltip_order #1813

Merged
merged 1 commit into from
Feb 9, 2017
Merged

Fix tooltip ordering with data_order and add tooltip_order #1813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
340 changes: 321 additions & 19 deletions spec/tooltip-spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,29 @@ describe('c3 chart tooltip', function () {
'use strict';

var chart;
var tooltipConfiguration;
var tooltipConfiguration = {};
var dataOrder = 'desc';
var dataGroups;

var args = function () {
return {
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25],
['data3', 150, 120, 110, 140, 115, 125]
['data1', 30, 200, 100, 400, 150, 250], // 1130
['data2', 50, 20, 10, 40, 15, 25], // 160
['data3', 150, 120, 110, 140, 115, 125] // 760
],
order: dataOrder,
groups: dataGroups
},
tooltip: tooltipConfiguration
};
};

beforeEach(function (done) {
chart = window.initChart(chart, args(), done);
dataOrder = 'desc';
dataGroups = undefined;
});

describe('tooltip position', function () {
Expand Down Expand Up @@ -99,24 +105,320 @@ describe('c3 chart tooltip', function () {
});
});

describe('tooltip getTooltipContent', function () {
beforeAll(function () {
describe('tooltip with data_order as desc with grouped data', function() {
beforeAll(function() {
dataOrder = 'desc';
dataGroups = [ [ 'data1', 'data2', 'data3' ]];
});

it('should display each data in descending order', function() {
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());

var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
return node.className;
});

expect(classes[0]).toBe(''); // header
expect(classes[1]).toBe('c3-tooltip-name--data1'); // 1130
expect(classes[2]).toBe('c3-tooltip-name--data3'); // 760
expect(classes[3]).toBe('c3-tooltip-name--data2'); // 160
});
});

describe('tooltip with data_order as asc with grouped data', function() {
beforeAll(function() {
dataOrder = 'asc';
dataGroups = [ [ 'data1', 'data2', 'data3' ]];
});

it('should display each data in ascending order', function() {
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());

var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
return node.className;
});

expect(classes[0]).toBe(''); // header
expect(classes[1]).toBe('c3-tooltip-name--data2'); // 160
expect(classes[2]).toBe('c3-tooltip-name--data3'); // 760
expect(classes[3]).toBe('c3-tooltip-name--data1'); // 1130
});
});

describe('tooltip with data_order as NULL with grouped data', function() {
beforeAll(function() {
dataOrder = null;
dataGroups = [ [ 'data1', 'data2', 'data3' ]];
});

it('should display each data in given order', function() {
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());

var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
return node.className;
});

expect(classes[0]).toBe(''); // header
expect(classes[1]).toBe('c3-tooltip-name--data1');
expect(classes[2]).toBe('c3-tooltip-name--data2');
expect(classes[3]).toBe('c3-tooltip-name--data3');
});
});

describe('tooltip with data_order as Function with grouped data', function() {
beforeAll(function() {
var order = [ 'data2', 'data1', 'data3' ];
dataOrder = function(data1, data2) {
return order.indexOf(data1.id) - order.indexOf(data2.id);
};
dataGroups = [ [ 'data1', 'data2', 'data3' ]];
});

it('should display each data in order given by function', function() {
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());

var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
return node.className;
});

expect(classes[0]).toBe(''); // header
expect(classes[1]).toBe('c3-tooltip-name--data2');
expect(classes[2]).toBe('c3-tooltip-name--data1');
expect(classes[3]).toBe('c3-tooltip-name--data3');
});
});

describe('tooltip with data_order as Array with grouped data', function() {
beforeAll(function() {
dataOrder = [ 'data2', 'data1', 'data3' ];
dataGroups = [ [ 'data1', 'data2', 'data3' ]];
});

it('should display each data in order given by array', function() {
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());

var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
return node.className;
});

expect(classes[0]).toBe(''); // header
expect(classes[1]).toBe('c3-tooltip-name--data2');
expect(classes[2]).toBe('c3-tooltip-name--data1');
expect(classes[3]).toBe('c3-tooltip-name--data3');
});
});

describe('tooltip with data_order as desc with un-grouped data', function() {
beforeAll(function() {
dataOrder = 'desc';
});

it('should display each tooltip value descending order', function() {
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());

var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
return node.className;
});

expect(classes[0]).toBe(''); // header
expect(classes[1]).toBe('c3-tooltip-name--data3'); // 110
expect(classes[2]).toBe('c3-tooltip-name--data1'); // 100
expect(classes[3]).toBe('c3-tooltip-name--data2'); // 10
});
});

describe('tooltip with data_order as asc with un-grouped data', function() {
beforeAll(function() {
dataOrder = 'asc';
});

it('should display each tooltip value in ascending order', function() {
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());

var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
return node.className;
});

expect(classes[0]).toBe(''); // header
expect(classes[1]).toBe('c3-tooltip-name--data2'); // 10
expect(classes[2]).toBe('c3-tooltip-name--data1'); // 100
expect(classes[3]).toBe('c3-tooltip-name--data3'); // 110
});
});

describe('tooltip with data_order as NULL with un-grouped data', function() {
beforeAll(function() {
dataOrder = null;
});

it('should display each tooltip value in given data order', function() {
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());

var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
return node.className;
});

expect(classes[0]).toBe(''); // header
expect(classes[1]).toBe('c3-tooltip-name--data1');
expect(classes[2]).toBe('c3-tooltip-name--data2');
expect(classes[3]).toBe('c3-tooltip-name--data3');
});
});

describe('tooltip with data_order as Function with un-grouped data', function() {
beforeAll(function() {
var order = [ 'data2', 'data1', 'data3' ];
dataOrder = function(data1, data2) {
return order.indexOf(data1.id) - order.indexOf(data2.id);
};
});

it('should display each tooltip value in data order given by function', function() {
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());

var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
return node.className;
});

expect(classes[0]).toBe(''); // header
expect(classes[1]).toBe('c3-tooltip-name--data2');
expect(classes[2]).toBe('c3-tooltip-name--data1');
expect(classes[3]).toBe('c3-tooltip-name--data3');
});
});

describe('tooltip with data_order as Array with un-grouped data', function() {
beforeAll(function() {
dataOrder = [ 'data2', 'data1', 'data3' ];
});

it('should display each tooltip value in data order given by array', function() {
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());

var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
return node.className;
});

expect(classes[0]).toBe(''); // header
expect(classes[1]).toBe('c3-tooltip-name--data2');
expect(classes[2]).toBe('c3-tooltip-name--data1');
expect(classes[3]).toBe('c3-tooltip-name--data3');
});
});

describe('tooltip with tooltip_order as desc', function() {
beforeAll(function() {
tooltipConfiguration = {
data_order: 'desc'
};
order: 'desc'
};

// this should be ignored
dataOrder = 'asc';
dataGroups = [ [ 'data1', 'data2', 'data3' ]];
});

it('should display each tooltip value descending order', function() {
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());

var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
return node.className;
});

expect(classes[0]).toBe(''); // header
expect(classes[1]).toBe('c3-tooltip-name--data3'); // 110
expect(classes[2]).toBe('c3-tooltip-name--data1'); // 100
expect(classes[3]).toBe('c3-tooltip-name--data2'); // 10
});
});

describe('tooltip with tooltip_order as asc', function() {
beforeAll(function() {
tooltipConfiguration = {
order: 'asc'
};

it('should sort values desc', function () {
var eventRect = d3.select('.c3-event-rect-2').node();
window.setMouseEvent(chart, 'mousemove', 100, 100, eventRect);
// this should be ignored
dataOrder = 'desc';
dataGroups = [ [ 'data1', 'data2', 'data3' ]];
});

it('should display each tooltip value in ascending order', function() {
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());

var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
return node.className;
});

var tooltipTable = d3.select('.c3-tooltip')[0];
var expected = ["", "c3-tooltip-name--data3",
"c3-tooltip-name--data1", "c3-tooltip-name--data2"];
var i;
for (i = 0; i < tooltipTable[0].rows.length; i++) {
expect(tooltipTable[0].rows[i].className).toBe(expected[i]);
}
expect(classes[0]).toBe(''); // header
expect(classes[1]).toBe('c3-tooltip-name--data2'); // 10
expect(classes[2]).toBe('c3-tooltip-name--data1'); // 100
expect(classes[3]).toBe('c3-tooltip-name--data3'); // 110
});
});

describe('tooltip with tooltip_order as NULL', function() {
beforeAll(function() {
tooltipConfiguration = {
order: null
};
});

it('should display each tooltip value in given order', function() {
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());

var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
return node.className;
});

expect(classes[0]).toBe(''); // header
expect(classes[1]).toBe('c3-tooltip-name--data1');
expect(classes[2]).toBe('c3-tooltip-name--data2');
expect(classes[3]).toBe('c3-tooltip-name--data3');
});
});

describe('tooltip with tooltip_order as Function', function() {
beforeAll(function() {
var order = [ 'data2', 'data1', 'data3' ];
tooltipConfiguration = {
order: function(data1, data2) {
return order.indexOf(data1.id) - order.indexOf(data2.id);
}
};
});

it('should display each tooltip value in data order given by function', function() {
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());

var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
return node.className;
});

expect(classes[0]).toBe(''); // header
expect(classes[1]).toBe('c3-tooltip-name--data2');
expect(classes[2]).toBe('c3-tooltip-name--data1');
expect(classes[3]).toBe('c3-tooltip-name--data3');
});
});

describe('tooltip with tooltip_order as Array', function() {
beforeAll(function() {
tooltipConfiguration = {
order: [ 'data2', 'data1', 'data3' ]
};
});

it('should display each tooltip value in data order given by array', function() {
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node());

var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) {
return node.className;
});

expect(classes[0]).toBe(''); // header
expect(classes[1]).toBe('c3-tooltip-name--data2');
expect(classes[2]).toBe('c3-tooltip-name--data1');
expect(classes[3]).toBe('c3-tooltip-name--data3');
});
});
});
});
3 changes: 2 additions & 1 deletion src/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
axis_y_label: {},
axis_y_tick_format: undefined,
axis_y_tick_outer: true,
axis_y_tick_values: null,
axis_y_tick_values: null,
axis_y_tick_rotate: 0,
axis_y_tick_count: undefined,
axis_y_tick_time_value: undefined,
Expand Down Expand Up @@ -203,6 +203,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
regions: [],
// tooltip - show when mouseover on each data
tooltip_show: true,
tooltip_order: undefined,
tooltip_grouped: true,
tooltip_format_title: undefined,
tooltip_format_name: undefined,
Expand Down
6 changes: 5 additions & 1 deletion src/data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,11 @@ c3_chart_internal_fn.orderTargets = function (targets) {
});
} else if (isFunction(config.data_order)) {
targets.sort(config.data_order);
} // TODO: accept name array for order
} else if (isArray(config.data_order)) {
targets.sort(function (t1, t2) {
return config.data_order.indexOf(t1.id) - config.data_order.indexOf(t2.id);
});
}
return targets;
};
c3_chart_internal_fn.filterByX = function (targets, x) {
Expand Down
Loading