From 8100a8fa97cb753ed8348c9b09a841c66d4c8101 Mon Sep 17 00:00:00 2001
From: michellethomas <michelle.q.thomas@gmail.com>
Date: Fri, 25 Jan 2019 10:30:31 -0800
Subject: [PATCH] Fixing sort issue with area chart and adding tests (#6358)

---
 .../explore/visualizations/area.js            | 17 ++++++++++-
 .../explore/visualizations/line.js            | 30 +++++++++++++++++++
 superset/viz.py                               |  4 ++-
 3 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/superset/assets/cypress/integration/explore/visualizations/area.js b/superset/assets/cypress/integration/explore/visualizations/area.js
index db93f2d1b12cd..0e1906c525976 100644
--- a/superset/assets/cypress/integration/explore/visualizations/area.js
+++ b/superset/assets/cypress/integration/explore/visualizations/area.js
@@ -16,6 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import readResponseBlob from '../../../utils/readResponseBlob';
+
 export default () => describe('Area', () => {
   const AREA_FORM_DATA = {
     datasource: '2__table',
@@ -71,11 +73,12 @@ export default () => describe('Area', () => {
       ...AREA_FORM_DATA,
       groupby: ['region'],
     });
+
     cy.get('.nv-area').should('have.length', 7);
   });
 
   it('should work with groupby and filter', () => {
-    verify({
+    cy.visitChartByParams(JSON.stringify({
       ...AREA_FORM_DATA,
       groupby: ['region'],
       adhoc_filters: [{
@@ -88,6 +91,18 @@ export default () => describe('Area', () => {
         fromFormData: true,
         filterOptionName: 'filter_txje2ikiv6_wxmn0qwd1xo',
       }],
+    }));
+
+    cy.wait('@getJson').then(async (xhr) => {
+      cy.verifyResponseCodes(xhr);
+
+      const responseBody = await readResponseBlob(xhr.response.body);
+
+      // Make sure data is sorted correctly
+      const firstRow = responseBody.data[0].values;
+      const secondRow = responseBody.data[1].values;
+      expect(firstRow[firstRow.length - 1].y).to.be.greaterThan(secondRow[secondRow.length - 1].y);
+      cy.verifySliceContainer('svg');
     });
     cy.get('.nv-area').should('have.length', 2);
   });
diff --git a/superset/assets/cypress/integration/explore/visualizations/line.js b/superset/assets/cypress/integration/explore/visualizations/line.js
index 85274dc3136a3..94bc393c493fd 100644
--- a/superset/assets/cypress/integration/explore/visualizations/line.js
+++ b/superset/assets/cypress/integration/explore/visualizations/line.js
@@ -98,10 +98,40 @@ export default () => describe('Line', () => {
       metrics,
       time_compare: ['1+year'],
       comparison_type: 'values',
+      groupby: ['gender'],
     };
 
     cy.visitChartByParams(JSON.stringify(formData));
     cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
+
+    // Offset color should match original line color
+    cy.get('.nv-legend-text')
+      .contains('boy')
+      .siblings()
+      .first()
+      .should('have.attr', 'style')
+      .then((style) => {
+        cy.get('.nv-legend-text')
+          .contains('boy, 1 year offset')
+          .siblings()
+          .first()
+          .should('have.attr', 'style')
+          .and('eq', style);
+      });
+
+     cy.get('.nv-legend-text')
+      .contains('girl')
+      .siblings()
+      .first()
+      .should('have.attr', 'style')
+      .then((style) => {
+        cy.get('.nv-legend-text')
+          .contains('girl, 1 year offset')
+          .siblings()
+          .first()
+          .should('have.attr', 'style')
+          .and('eq', style);
+      });
   });
 
   it('Test line chart with time shift yoy', () => {
diff --git a/superset/viz.py b/superset/viz.py
index a548bc05621cb..dc84630e4f8a5 100644
--- a/superset/viz.py
+++ b/superset/viz.py
@@ -1254,7 +1254,9 @@ def get_data(self, df):
                     self.to_series(
                         diff, classed='time-shift-{}'.format(i), title_suffix=label))
 
-        return sorted(chart_data, key=lambda x: tuple(x['key']))
+        if not self.sort_series:
+            chart_data = sorted(chart_data, key=lambda x: tuple(x['key']))
+        return chart_data
 
 
 class MultiLineViz(NVD3Viz):