diff --git a/public/app/plugins/panel/graph/Legend/Legend.tsx b/public/app/plugins/panel/graph/Legend/Legend.tsx index c20623f8c0e..b60755311a0 100644 --- a/public/app/plugins/panel/graph/Legend/Legend.tsx +++ b/public/app/plugins/panel/graph/Legend/Legend.tsx @@ -89,7 +89,7 @@ export class GraphLegend extends PureComponent { sortLegend() { let seriesList: TimeSeries[] = [...this.props.seriesList] || []; - if (this.props.sort) { + if (this.props.sort && this.props[this.props.sort] && this.props.alignAsTable) { seriesList = _.sortBy(seriesList, series => { let sort = series.stats[this.props.sort]; if (sort === null) { diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index dad49788eb0..315f9b35cd5 100644 --- a/public/app/plugins/panel/graph/graph.ts +++ b/public/app/plugins/panel/graph/graph.ts @@ -461,9 +461,9 @@ class GraphElement { sortSeries(series, panel) { const sortBy = panel.legend.sort; const sortOrder = panel.legend.sortDesc; - const haveSortBy = sortBy !== null && sortBy !== undefined; + const haveSortBy = sortBy !== null && sortBy !== undefined && panel.legend[sortBy]; const haveSortOrder = sortOrder !== null && sortOrder !== undefined; - const shouldSortBy = panel.stack && haveSortBy && haveSortOrder; + const shouldSortBy = panel.stack && haveSortBy && haveSortOrder && panel.legend.alignAsTable; const sortDesc = panel.legend.sortDesc === true ? -1 : 1; if (shouldSortBy) { diff --git a/public/app/plugins/panel/graph/specs/graph.test.ts b/public/app/plugins/panel/graph/specs/graph.test.ts index aa022c68607..ea340f38fed 100644 --- a/public/app/plugins/panel/graph/specs/graph.test.ts +++ b/public/app/plugins/panel/graph/specs/graph.test.ts @@ -167,8 +167,11 @@ describe('grafanaGraph', () => { describe('sorting stacked series as legend. min descending order', () => { beforeEach(() => { setupCtx(() => { - ctrl.panel.legend.sort = 'min'; + const sortKey = 'min'; + ctrl.panel.legend.sort = sortKey; ctrl.panel.legend.sortDesc = true; + ctrl.panel.legend.alignAsTable = true; + ctrl.panel.legend[sortKey] = true; ctrl.panel.stack = true; }); }); @@ -210,8 +213,11 @@ describe('grafanaGraph', () => { describe('sorting stacked series as legend. current descending order', () => { beforeEach(() => { setupCtx(() => { - ctrl.panel.legend.sort = 'current'; + const sortKey = 'current'; + ctrl.panel.legend.sort = sortKey; ctrl.panel.legend.sortDesc = true; + ctrl.panel.legend.alignAsTable = true; + ctrl.panel.legend[sortKey] = true; ctrl.panel.stack = true; }); }); @@ -222,6 +228,23 @@ describe('grafanaGraph', () => { }); }); + describe('stacked series should not sort if legend is not as table or sort key column is not visible', () => { + beforeEach(() => { + setupCtx(() => { + const sortKey = 'min'; + ctrl.panel.legend.sort = sortKey; + ctrl.panel.legend.sortDesc = true; + ctrl.panel.legend.alignAsTable = false; + ctrl.panel.legend[sortKey] = false; + ctrl.panel.stack = true; + }); + }); + it('highest value should be first', () => { + expect(ctx.plotData[0].alias).toBe('series1'); + expect(ctx.plotData[1].alias).toBe('series2'); + }); + }); + describe('when logBase is log 10', () => { beforeEach(() => { setupCtx(() => {