feat: Migrates Area chart

UPDATING.md

@@ -49,6 +49,7 @@ assists people when migrating to a new version.
 
 ### Breaking Changes
 
+- [23870](https://github.com/apache/superset/pull/23870) Migrates the NVD3 Area chart to the ECharts version and removes the legacy code.
 - [24128](https://github.com/apache/superset/pull/24128) The `RLS_BASE_RELATED_FIELD_FILTERS` config parameter has been removed. Now the Tables dropdown will feature the same tables that the user is able to see elsewhere in the application using the standard `DatasourceFilter`, and the Roles dropdown will be filtered using the filter defined in `EXTRA_RELATED_QUERY_FILTERS["role"]`.
 - [23785](https://github.com/apache/superset/pull/23785) Deprecated the following feature flags: `CLIENT_CACHE`, `DASHBOARD_CACHE`, `DASHBOARD_FILTERS_EXPERIMENTAL`, `DASHBOARD_NATIVE_FILTERS`, `DASHBOARD_NATIVE_FILTERS_SET`, `DISABLE_DATASET_SOURCE_EDIT`, `ENABLE_EXPLORE_JSON_CSRF_PROTECTION`, `REMOVE_SLICE_LEVEL_LABEL_COLORS`. It also removed `DASHBOARD_EDIT_CHART_IN_NEW_TAB` as the feature is supported without the need for a feature flag.
 - [22801](https://github.com/apache/superset/pull/22801): The Thumbnails feature has been changed to execute as the currently logged in user by default, falling back to the selenium user for anonymous users. To continue always using the selenium user, please add the following to your `superset_config.py`: `THUMBNAILS_EXECUTE_AS = ["selenium"]`

superset-frontend/cypress-base/cypress/e2e/chart_list/filter.test.ts

@@ -41,7 +41,7 @@ describe('Charts filters', () => {
   });
 
   it('should allow filtering by "Chart type" correctly', () => {
-    setFilter('Chart type', 'Area Chart (legacy)');
+    setFilter('Chart type', 'Area Chart');
     setFilter('Chart type', 'Bubble Chart');
   });
 

superset-frontend/cypress-base/cypress/e2e/dashboard/utils.ts

@@ -27,7 +27,7 @@ export const WORLD_HEALTH_CHARTS = [
   { name: "World's Population", viz: 'big_number' },
   { name: 'Growth Rate', viz: 'line' },
   { name: 'Rural Breakdown', viz: 'sunburst' },
-  { name: "World's Pop Growth", viz: 'area' },
+  { name: "World's Pop Growth", viz: 'echarts_area' },
   { name: 'Life Expectancy VS Rural %', viz: 'bubble' },
   { name: 'Treemap', viz: 'treemap' },
   { name: 'Box plot', viz: 'box_plot' },

superset-frontend/cypress-base/cypress/e2e/explore/visualizations/area.test.js

@@ -18,12 +18,12 @@
  */
 describe('Visualization > Area', () => {
   beforeEach(() => {
-    cy.intercept('POST', '/superset/explore_json/**').as('getJson');
+    cy.intercept('POST', '/api/v1/chart/data**').as('getChartData');
   });
 
   const AREA_FORM_DATA = {
     datasource: '2__table',
-    viz_type: 'area',
+    viz_type: 'echarts_area',
     slice_id: 48,
     granularity_sqla: 'year',
     time_grain_sqla: 'P1D',
@@ -56,25 +56,22 @@ describe('Visualization > Area', () => {
 
   function verify(formData) {
     cy.visitChartByParams(formData);
-    cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
+    cy.verifySliceSuccess({ waitAlias: '@getChartData' });
   }
 
   it('should work without groupby', () => {
     verify(AREA_FORM_DATA);
-    cy.get('.nv-area').should('have.length', 1);
   });
 
   it('should work with group by', () => {
     verify({
       ...AREA_FORM_DATA,
       groupby: ['region'],
     });
-
-    cy.get('.nv-area').should('have.length', 7);
   });
 
   it('should work with groupby and filter', () => {
-    cy.visitChartByParams({
+    verify({
       ...AREA_FORM_DATA,
       groupby: ['region'],
       adhoc_filters: [
@@ -89,18 +86,6 @@ describe('Visualization > Area', () => {
         },
       ],
     });
-
-    cy.wait('@getJson').then(async ({ response }) => {
-      const responseBody = 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);
   });
 
   it('should allow type to search color schemes and apply the scheme', () => {
@@ -114,8 +99,5 @@ describe('Visualization > Area', () => {
     cy.get(
       '.Control[data-test="color_scheme"] .ant-select-selection-item [data-test="supersetColors"]',
     ).should('exist');
-    cy.get('.area .nv-legend .nv-legend-symbol')
-      .first()
-      .should('have.css', 'fill', 'rgb(31, 168, 201)');
   });
 });