Skip to content

sort categorical Cartesian axes by value #3864

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

Merged
merged 13 commits into from
May 17, 2019
Merged

sort categorical Cartesian axes by value #3864

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
9c09d8c
sort categorical Cartesian axes by value
antoinerg Apr 25, 2019
2d379f7
sort categories by values: improve code style
antoinerg May 15, 2019
e4e5eaa
sort categories by values: fix mock syntax
antoinerg May 15, 2019
76683ba
sort categories by values: add support for histogram2dcontour
antoinerg May 16, 2019
fac239b
sort categories by values: improve splom logic
antoinerg May 16, 2019
67cc14d
sort categories by values: implement mean and median
antoinerg May 16, 2019
c6e049b
implement Lib.median()
antoinerg May 16, 2019
7c8d52b
sort categories by values: use Lib.median()
antoinerg May 16, 2019
54b3ff9
Lib.median(): reuse existing Lib.interp()
antoinerg May 17, 2019
9aaa10b
categoryorder: rename 'value' to 'total'
antoinerg May 17, 2019
553e193
sort categories by values: update mocks
antoinerg May 17, 2019
bf6bdf3
sort categories by values: handle asymmetric splom
antoinerg May 17, 2019
d13542e
sort categories by values: deal with 2dMap in its own conditional block
antoinerg May 17, 2019
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
6 changes: 4 additions & 2 deletions src/plots/cartesian/layout_attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -821,7 +821,9 @@ module.exports = {
'value ascending', 'value descending',
'min ascending', 'min descending',
'max ascending', 'max descending',
'sum ascending', 'sum descending'
'sum ascending', 'sum descending',
'mean ascending', 'mean descending',
'median ascending', 'median descending'
],
dflt: 'trace',
role: 'info',
Expand All @@ -836,7 +838,7 @@ module.exports = {
'the *trace* mode. The unspecified categories will follow the categories in `categoryarray`.',
'Set `categoryorder` to *value ascending* or *value descending* if order should be determined by the',
'numerical order of the values.',
'Similarly, the order can be determined by the min, max or the sums of the values.'
'Similarly, the order can be determined by the min, max, sum, mean or media of all the values.'
].join(' ')
},
categoryarray: {
Expand Down
34 changes: 16 additions & 18 deletions src/plots/plots.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2856,7 +2856,7 @@ plots.doCalcdata = function(gd, traces) {
Registry.getComponentMethod('errorbars', 'calc')(gd);
};

var sortAxisCategoriesByValueRegex = /(value|sum|min|max) (ascending|descending)/;
var sortAxisCategoriesByValueRegex = /(value|sum|min|max|mean|median) (ascending|descending)/;

function sortAxisCategoriesByValue(axList, gd) {
var affectedTraces = [];
Expand All @@ -2876,8 +2876,7 @@ function sortAxisCategoriesByValue(axList, gd) {
if(xCategorical && o === value[l].length - 1) return -1;
if(yCategorical && l === value.length - 1) return -1;

var catIndex = axLetter === 'y' ? l : o;
return catIndex - 1;
return (axLetter === 'y' ? l : o) - 1;
};
} else {
return function(o, l) {
Expand All @@ -2886,13 +2885,25 @@ function sortAxisCategoriesByValue(axList, gd) {
}
}

var aggFn = {
'min': function(values) {return Lib.aggNums(Math.min, null, values);},
'max': function(values) {return Lib.aggNums(Math.max, null, values);},
'sum': function(values) {return Lib.aggNums(function(a, b) { return a + b;}, null, values);},
'value': function(values) {return Lib.aggNums(function(a, b) { return a + b;}, null, values);},
'mean': function(values) {return Lib.mean(values);},
'median': function(values) {values.sort(); var mid = Math.round((values.length - 1) / 2); return values[mid];}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm surprised our linter didn't complain here. Would you mind rewriting this as

'median': function(values) {
    values.sort(); 
    var mid = Math.round((values.length - 1) / 2); 
    return values[mid];
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's probably an eslint rule for this 🔬

};

for(i = 0; i < axList.length; i++) {
var ax = axList[i];
if(ax.type !== 'category') continue;

// Order by value
var match = ax.categoryorder.match(sortAxisCategoriesByValueRegex);
if(match) {
var aggregator = match[1];
var order = match[2];

// Store values associated with each category
var categoriesValue = [];
for(j = 0; j < ax._categories.length; j++) {
Expand Down Expand Up @@ -2991,26 +3002,13 @@ function sortAxisCategoriesByValue(axList, gd) {
}
}

// Aggregate values
var aggFn;
switch(match[1]) {
case 'min':
aggFn = Math.min;
break;
case 'max':
aggFn = Math.max;
break;
default:
aggFn = function(a, b) { return a + b;};
}

ax._categoriesValue = categoriesValue;

var categoriesAggregatedValue = [];
for(j = 0; j < categoriesValue.length; j++) {
categoriesAggregatedValue.push([
categoriesValue[j][0],
Lib.aggNums(aggFn, null, categoriesValue[j][1])
aggFn[aggregator](categoriesValue[j][1])
]);
}

Expand All @@ -3027,7 +3025,7 @@ function sortAxisCategoriesByValue(axList, gd) {
});

// Reverse if descending
if(match[2] === 'descending') {
if(order === 'descending') {
ax._initialCategories.reverse();
}

Expand Down
48 changes: 41 additions & 7 deletions test/jasmine/tests/calcdata_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -896,7 +896,7 @@ describe('calculated data and points', function() {
// oneOrientationTraces are traces for which swapping x/y is not supported
var oneOrientationTraces = ['ohlc', 'candlestick'];

function makeData(type, a, b, axName) {
function makeData(type, axName, a, b) {
var input = [a, b];
var cat = input[axName === 'yaxis' ? 1 : 0];
var data = input[axName === 'yaxis' ? 0 : 1];
Expand Down Expand Up @@ -939,6 +939,10 @@ describe('calculated data and points', function() {
high: data,
low: data,

// For histogram
nbinsx: cat.length,
nbinsy: data.length,

// For waterfall
measure: measure,

Expand Down Expand Up @@ -988,7 +992,7 @@ describe('calculated data and points', function() {
['value ascending', 'value descending'].forEach(function(categoryorder) {
it('sorts ' + axName + ' by ' + categoryorder + ' for trace type ' + trace.type, function(done) {
var data = [7, 2, 3];
var baseMock = {data: [makeData(trace.type, cat, data, axName)], layout: {}};
var baseMock = {data: [makeData(trace.type, axName, cat, data)], layout: {}};
baseMock.layout[axName] = { type: 'category', categoryorder: categoryorder};

// Set expectations
Expand All @@ -1007,7 +1011,7 @@ describe('calculated data and points', function() {
var type = trace.type;
var data = [7, 2, 3];
var data2 = [5, 4, 2];
var baseMock = { data: [makeData(type, cat, data, axName), makeData(type, cat, data2, axName)], layout: {}};
var baseMock = { data: [makeData(type, axName, cat, data), makeData(type, axName, cat, data2)], layout: {}};
baseMock.layout[axName] = { type: 'category', categoryorder: 'value ascending'};

var expectedAgg = [['a', data[0] + data2[0]], ['b', data[1] + data2[1]], ['c', data[2] + data2[2]]];
Expand All @@ -1021,7 +1025,7 @@ describe('calculated data and points', function() {
var type = trace.type;
var data = [7, 2, 3];
var data2 = [5, 4, 2];
var baseMock = { data: [makeData(type, cat, data, axName), makeData(type, cat, data2, axName)], layout: {}};
var baseMock = { data: [makeData(type, axName, cat, data), makeData(type, axName, cat, data2)], layout: {}};
baseMock.layout[axName] = { type: 'category', categoryorder: 'value ascending'};

// Hide second trace
Expand All @@ -1037,7 +1041,7 @@ describe('calculated data and points', function() {
var type = trace.type;
var data = [7, 2, 3];
var data2 = [5, 4, 2];
var baseMock = { data: [makeData(type, cat, data, axName), makeData(type, cat, data2, axName)], layout: {}};
var baseMock = { data: [makeData(type, axName, cat, data), makeData(type, axName, cat, data2)], layout: {}};
baseMock.layout[axName] = { type: 'category', categoryorder: 'min ascending'};

var expectedAgg = [['a', Math.min(data[0], data2[0])], ['b', Math.min(data[1], data2[1])], ['c', Math.min(data[2], data2[2])]];
Expand All @@ -1051,15 +1055,45 @@ describe('calculated data and points', function() {
var type = trace.type;
var data = [7, 2, 3];
var data2 = [5, 4, 2];
var baseMock = { data: [makeData(type, cat, data, axName), makeData(type, cat, data2, axName)], layout: {}};
var baseMock = { data: [makeData(type, axName, cat, data), makeData(type, axName, cat, data2)], layout: {}};
baseMock.layout[axName] = { type: 'category', categoryorder: 'max ascending'};

var expectedAgg = [['a', Math.max(data[0], data2[0])], ['b', Math.max(data[1], data2[1])], ['c', Math.max(data[2], data2[2])]];
if(type === 'ohlc' || type === 'candlestick') expectedAgg = [['a', expectedAgg[0][1]], ['b', expectedAgg[1][1]], ['c', expectedAgg[2][1]]];
if(type.match(/histogram/)) expectedAgg = [['a', 2], ['b', 1], ['c', 1]];

checkAggregatedValue(baseMock, expectedAgg, false, done);
});

it('take the mean of all values per category across traces of type ' + trace.type, function(done) {
var type = trace.type;
var data = [7, 2, 3];
var data2 = [5, 4, 2];
var baseMock = { data: [makeData(type, axName, cat, data), makeData(type, axName, cat, data2)], layout: {}};
baseMock.layout[axName] = { type: 'category', categoryorder: 'mean ascending'};

var expectedAgg = [['a', (data[0] + data2[0]) / 2 ], ['b', (data[1] + data2[1]) / 2], ['c', (data[2] + data2[2]) / 2]];
if(type === 'histogram') expectedAgg = [['a', 2], ['b', 1], ['c', 1]];
if(type === 'histogram2d') expectedAgg = [['a', 2 / 3], ['b', 1 / 3], ['c', 1 / 3]];
if(type === 'contour' || type === 'heatmap') expectedAgg = [['a', expectedAgg[0][1] / 3], ['b', expectedAgg[1][1] / 3], ['c', expectedAgg[2][1] / 3]];
if(type === 'histogram2dcontour') expectedAgg = [['a', 2 / 4], ['b', 1 / 4], ['c', 1 / 4]]; // TODO: this result is inintuitive

checkAggregatedValue(baseMock, expectedAgg, false, done);
});

it('take the median of all values per category across traces of type ' + trace.type, function(done) {
var type = trace.type;
var data = [7, 2, 3];
var data2 = [5, 4, 2];
var data3 = [6, 5, 7];
var baseMock = { data: [makeData(type, axName, cat, data), makeData(type, axName, cat, data2), makeData(type, axName, cat, data3)], layout: {}};
baseMock.layout[axName] = { type: 'category', categoryorder: 'median ascending'};

var expectedAgg = [['a', 6], ['b', 4], ['c', 3]];
if(type === 'histogram') expectedAgg = [['a', 2], ['b', 1], ['c', 1]];
if(type === 'histogram2d') expectedAgg = [['a', 1], ['b', 0], ['c', 0]];
if(type === 'histogram2dcontour' || type === 'contour' || type === 'heatmap') expectedAgg = [['a', 0], ['b', 0], ['c', 0]];
checkAggregatedValue(baseMock, expectedAgg, false, done);
});
});
});
});
Expand Down