Fixing sort issue with area chart and adding tests (#6358)

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);
   });

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', () => {

superset/viz.py

@@ -1254,7 +1254,9 @@ class NVD3TimeSeriesViz(NVD3Viz):
                     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):