feat: Migrates TreeMap chart (#23741)

apache · Jun 8, 2023 · af24092 · af24092
1 parent 522eb97
commit af24092
Show file tree

Hide file tree

Showing 69 changed files with 1,436 additions and 2,637 deletions.
diff --git a/UPDATING.md b/UPDATING.md
@@ -33,6 +33,7 @@ assists people when migrating to a new version.
 
 ### Breaking Changes
 
+- [23741](https://github.com/apache/superset/pull/23741) Migrates the TreeMap chart and removes the legacy Treemap code.
 - [23712](https://github.com/apache/superset/pull/23712) Migrates the Pivot Table v1 chart to v2 and removes v1 code.
 - [24029](https://github.com/apache/superset/pull/24029) Removes the `user` and `username` arguments for the `QUERY_LOGGER` and `SQL_QUERY_MUTATOR` methods respectively. If the username for the current user is required, the `superset.utils.core.get_username` method should be used.
 - [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"]`.

diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard/editmode.test.ts b/superset-frontend/cypress-base/cypress/e2e/dashboard/editmode.test.ts
@@ -230,7 +230,7 @@ describe('Dashboard edit', () => {
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .first()
-        .should('have.css', 'fill', 'rgb(51, 217, 193)');
+        .should('have.css', 'fill', 'rgb(51, 61, 71)');
 
       // open 2nd main tab
       openTab(0, 1);
@@ -239,7 +239,7 @@ describe('Dashboard edit', () => {
       // label Anthony
       cy.get('[data-test-chart-name="Trends"] .line .nv-legend-symbol')
         .eq(2)
-        .should('have.css', 'fill', 'rgb(51, 217, 193)');
+        .should('have.css', 'fill', 'rgb(51, 61, 71)');
     });
 
     it('should apply same color to same labels with no color scheme set', () => {
@@ -393,7 +393,7 @@ describe('Dashboard edit', () => {
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .eq(2)
-        .should('have.css', 'fill', 'rgb(168, 104, 183)');
+        .should('have.css', 'fill', 'rgb(163, 143, 121)');
 
       openProperties();
       cy.get('[aria-label="Select color scheme"]').should('have.value', '');
@@ -422,17 +422,17 @@ describe('Dashboard edit', () => {
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .first()
-        .should('have.css', 'fill', 'rgb(69, 78, 124)');
+        .should('have.css', 'fill', 'rgb(252, 199, 0)');
       cy.get(
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .eq(1)
-        .should('have.css', 'fill', 'rgb(224, 67, 85)');
+        .should('have.css', 'fill', 'rgb(143, 211, 228)');
       cy.get(
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .eq(2)
-        .should('have.css', 'fill', 'rgb(168, 104, 183)');
+        .should('have.css', 'fill', 'rgb(172, 225, 196)');
     });
 
     it('should show the same colors in Explore', () => {
@@ -463,7 +463,7 @@ describe('Dashboard edit', () => {
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .eq(1)
-        .should('have.css', 'fill', 'rgb(157, 172, 185)');
+        .should('have.css', 'fill', 'rgb(51, 61, 71)');
 
       openExplore('Top 10 California Names Timeseries');
 
@@ -495,7 +495,7 @@ describe('Dashboard edit', () => {
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .first()
-        .should('have.css', 'fill', 'rgb(51, 217, 193)');
+        .should('have.css', 'fill', 'rgb(51, 61, 71)');
 
       // open 2nd main tab
       openTab(0, 1);
@@ -504,7 +504,7 @@ describe('Dashboard edit', () => {
       // label Anthony
       cy.get('[data-test-chart-name="Trends"] .line .nv-legend-symbol')
         .eq(2)
-        .should('have.css', 'fill', 'rgb(51, 217, 193)');
+        .should('have.css', 'fill', 'rgb(51, 61, 71)');
 
       editDashboard();
       openProperties();
@@ -535,44 +535,29 @@ describe('Dashboard edit', () => {
       applyChanges();
       saveChanges();
 
-      cy.get('.treemap #rect-sum__SP_POP_TOTL').should(
-        'have.css',
-        'fill',
-        'rgb(234, 11, 140)',
-      );
-
       // go to second tab
       openTab(0, 1);
       waitForChartLoad({ name: 'Trends', viz: 'line' });
 
       cy.get('[data-test-chart-name="Trends"] .line .nv-legend-symbol')
         .first()
-        .should('have.css', 'fill', 'rgb(234, 11, 140)');
+        .should('have.css', 'fill', 'rgb(51, 61, 71)');
     });
 
     it('should apply the color scheme across main tabs for rendered charts', () => {
-      waitForChartLoad({ name: 'Treemap', viz: 'treemap' });
+      waitForChartLoad({ name: 'Treemap', viz: 'treemap_v2' });
       openProperties();
       selectColorScheme('bnbColors');
       applyChanges();
       saveChanges();
 
-      cy.get('.treemap #rect-sum__SP_POP_TOTL').should(
-        'have.css',
-        'fill',
-        'rgb(255, 90, 95)',
-      );
-
       // go to second tab
       openTab(0, 1);
       waitForChartLoad({ name: 'Trends', viz: 'line' });
 
       cy.get('[data-test-chart-name="Trends"] .line .nv-legend-symbol')
         .first()
-        .should('have.css', 'fill', 'rgb(140, 224, 113)');
-
-      // go back to first tab
-      openTab(0, 0);
+        .should('have.css', 'fill', 'rgb(204, 0, 134)');
 
       // change scheme now that charts are rendered across the main tabs
       editDashboard();
@@ -581,15 +566,6 @@ describe('Dashboard edit', () => {
       applyChanges();
       saveChanges();
 
-      cy.get('.treemap #rect-sum__SP_POP_TOTL').should(
-        'have.css',
-        'fill',
-        'rgb(234, 11, 140)',
-      );
-
-      // go to second tab again
-      openTab(0, 1);
-
       cy.get('[data-test-chart-name="Trends"] .line .nv-legend-symbol')
         .first()
         .should('have.css', 'fill', 'rgb(234, 11, 140)');
@@ -600,11 +576,6 @@ describe('Dashboard edit', () => {
       selectColorScheme('lyftColors');
       applyChanges();
       saveChanges();
-      cy.get('.treemap #rect-sum__SP_POP_TOTL').should(
-        'have.css',
-        'fill',
-        'rgb(234, 11, 140)',
-      );
 
       // open nested tab
       openTab(1, 1);
@@ -616,7 +587,7 @@ describe('Dashboard edit', () => {
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .first()
-        .should('have.css', 'fill', 'rgb(51, 217, 193)');
+        .should('have.css', 'fill', 'rgb(51, 61, 71)');
 
       // open another nested tab
       openTab(2, 1);

diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard/tabs.test.ts b/superset-frontend/cypress-base/cypress/e2e/dashboard/tabs.test.ts
@@ -24,7 +24,7 @@ import {
 import { TABBED_DASHBOARD } from 'cypress/utils/urls';
 import { expandFilterOnLeftPanel } from './utils';
 
-const TREEMAP = { name: 'Treemap', viz: 'treemap' };
+const TREEMAP = { name: 'Treemap', viz: 'treemap_v2' };
 const FILTER_BOX = { name: 'Region Filter', viz: 'filter_box' };
 const LINE_CHART = { name: 'Growth Rate', viz: 'line' };
 const BOX_PLOT = { name: 'Box plot', viz: 'box_plot' };
@@ -185,7 +185,7 @@ describe('Dashboard tabs', () => {
 
     cy.wait(1000);
 
-    cy.get("[data-test-viz-type='treemap'] .chart-container").then(
+    cy.get("[data-test-viz-type='treemap_v2'] .chart-container").then(
       $chartContainer => {
         expect($chartContainer.get(0).scrollWidth).eq(
           $chartContainer.get(0).offsetWidth,

diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard/utils.ts b/superset-frontend/cypress-base/cypress/e2e/dashboard/utils.ts
@@ -29,7 +29,7 @@ export const WORLD_HEALTH_CHARTS = [
   { name: 'Rural Breakdown', viz: 'sunburst' },
   { name: "World's Pop Growth", viz: 'area' },
   { name: 'Life Expectancy VS Rural %', viz: 'bubble' },
-  { name: 'Treemap', viz: 'treemap' },
+  { name: 'Treemap', viz: 'treemap_v2' },
   { name: 'Box plot', viz: 'box_plot' },
 ] as ChartSpec[];
 

diff --git a/superset-frontend/cypress-base/cypress/e2e/explore/visualizations/treemap.test.js b/superset-frontend/cypress-base/cypress/e2e/explore/visualizations/treemap.test.js
diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
diff --git a/superset-frontend/package.json b/superset-frontend/package.json
@@ -103,7 +103,6 @@
     "@superset-ui/legacy-plugin-chart-sankey": "file:./plugins/legacy-plugin-chart-sankey",
     "@superset-ui/legacy-plugin-chart-sankey-loop": "file:./plugins/legacy-plugin-chart-sankey-loop",
     "@superset-ui/legacy-plugin-chart-sunburst": "file:./plugins/legacy-plugin-chart-sunburst",
-    "@superset-ui/legacy-plugin-chart-treemap": "file:./plugins/legacy-plugin-chart-treemap",
     "@superset-ui/legacy-plugin-chart-world-map": "file:./plugins/legacy-plugin-chart-world-map",
     "@superset-ui/legacy-preset-chart-deckgl": "file:./plugins/legacy-preset-chart-deckgl",
     "@superset-ui/legacy-preset-chart-nvd3": "file:./plugins/legacy-preset-chart-nvd3",

diff --git a/superset-frontend/packages/superset-ui-demo/package.json b/superset-frontend/packages/superset-ui-demo/package.json
@@ -82,7 +82,6 @@
     "@superset-ui/legacy-plugin-chart-sankey-loop": "*",
     "@superset-ui/legacy-plugin-chart-sunburst": "*",
     "@superset-ui/legacy-plugin-chart-time-table": "*",
-    "@superset-ui/legacy-plugin-chart-treemap": "*",
     "@superset-ui/legacy-plugin-chart-world-map": "*",
     "@superset-ui/legacy-preset-chart-deckgl": "*",
     "@superset-ui/legacy-preset-chart-nvd3": "*",