feat: Adds the Featured Charts dashboard (apache#28789)

jzhao62 · Jun 4, 2024 · 95706d9 · 95706d9
1 parent 896fe85
commit 95706d9
Show file tree

Hide file tree

Showing 53 changed files with 6,544 additions and 87 deletions.
diff --git a/superset-frontend/cypress-base/cypress/e2e/explore/control.test.ts b/superset-frontend/cypress-base/cypress/e2e/explore/control.test.ts
@@ -116,7 +116,7 @@ describe('Color scheme control', () => {
 describe('VizType control', () => {
   beforeEach(() => {
     interceptChart({ legacy: false }).as('tableChartData');
-    interceptChart({ legacy: true }).as('lineChartData');
+    interceptChart({ legacy: false }).as('bigNumberChartData');
   });
 
   it('Can change vizType', () => {
@@ -126,15 +126,14 @@ describe('VizType control', () => {
     cy.contains('View all charts').click();
 
     cy.get('.ant-modal-content').within(() => {
-      cy.get('button').contains('Evolution').click(); // change categories
-      cy.get('[role="button"]').contains('Line Chart').click();
+      cy.get('button').contains('KPI').click(); // change categories
+      cy.get('[role="button"]').contains('Big Number').click();
       cy.get('button').contains('Select').click();
     });
 
     cy.get('button[data-test="run-query-button"]').click();
     cy.verifySliceSuccess({
-      waitAlias: '@lineChartData',
-      chartSelector: 'svg',
+      waitAlias: '@bigNumberChartData',
     });
   });
 });

diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/index.js b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/index.js
@@ -40,7 +40,7 @@ const metadata = new ChartMetadata({
     t('Multi-Layers'),
     t('Multi-Variables'),
     t('Scatter'),
-    t('Popular'),
+    t('Featured'),
   ],
   thumbnail,
   useLegacyApi: true,

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts
@@ -41,7 +41,7 @@ const metadata = {
     t('Business'),
     t('Legacy'),
     t('Percentages'),
-    t('Popular'),
+    t('Featured'),
     t('Report'),
   ],
   thumbnail,

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts
@@ -39,7 +39,7 @@ const metadata = {
     t('Advanced-Analytics'),
     t('Line'),
     t('Percentages'),
-    t('Popular'),
+    t('Featured'),
     t('Report'),
     t('Trend'),
   ],

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/index.ts
@@ -57,7 +57,7 @@ export default class EchartsBoxPlotChartPlugin extends EchartsChartPlugin<
         ),
         exampleGallery: [{ url: example }],
         name: t('Box Plot'),
-        tags: [t('ECharts'), t('Range'), t('Statistical')],
+        tags: [t('ECharts'), t('Range'), t('Statistical'), t('Featured')],
         thumbnail,
       },
       transformProps,

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/index.ts
@@ -50,6 +50,7 @@ export default class EchartsBubbleChartPlugin extends ChartPlugin<
           t('Time'),
           t('Trend'),
           t('ECharts'),
+          t('Featured'),
         ],
         thumbnail,
       }),

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts
@@ -64,6 +64,7 @@ export default class EchartsFunnelChartPlugin extends EchartsChartPlugin<
           t('Report'),
           t('Sequential'),
           t('Trend'),
+          t('Featured'),
         ],
         thumbnail,
       },

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts
@@ -54,6 +54,7 @@ export default class EchartsGaugeChartPlugin extends EchartsChartPlugin<
           t('Comparison'),
           t('ECharts'),
           t('Report'),
+          t('Featured'),
         ],
         thumbnail,
       },

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts
@@ -46,6 +46,7 @@ export default class EchartsGraphChartPlugin extends EchartsChartPlugin {
           t('Relational'),
           t('Structural'),
           t('Transformable'),
+          t('Featured'),
         ],
         thumbnail,
         behaviors: [

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/index.ts
@@ -38,6 +38,7 @@ const metadata = new ChartMetadata({
     t('Density'),
     t('Single Metric'),
     t('ECharts'),
+    t('Featured'),
   ],
   thumbnail,
 });

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts
@@ -74,6 +74,7 @@ export default class EchartsTimeseriesChartPlugin extends EchartsChartPlugin<
           t('Multi-Variables'),
           t('Time'),
           t('Transformable'),
+          t('Featured'),
         ],
         queryObjectCount: 2,
       },

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts
@@ -71,7 +71,7 @@ export default class EchartsPieChartPlugin extends EchartsChartPlugin<
           t('Circular'),
           t('Comparison'),
           t('Percentages'),
-          t('Popular'),
+          t('Featured'),
           t('Proportional'),
           t('ECharts'),
           t('Nightingale'),

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts
@@ -66,6 +66,7 @@ export default class EchartsRadarChartPlugin extends EchartsChartPlugin<
           t('Report'),
           t('Web'),
           t('ECharts'),
+          t('Featured'),
         ],
         thumbnail,
       },

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/index.ts
@@ -44,7 +44,12 @@ export default class EchartsSunburstChartPlugin extends EchartsChartPlugin {
         ),
         exampleGallery: [{ url: example1 }, { url: example2 }],
         name: t('Sunburst Chart'),
-        tags: [t('ECharts'), t('Multi-Levels'), t('Proportional')],
+        tags: [
+          t('ECharts'),
+          t('Multi-Levels'),
+          t('Proportional'),
+          t('Featured'),
+        ],
         thumbnail,
       },
       transformProps,

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts
@@ -70,7 +70,7 @@ export default class EchartsAreaChartPlugin extends EchartsChartPlugin<
           t('Line'),
           t('Transformable'),
           t('Stacked'),
-          t('Popular'),
+          t('Featured'),
         ],
         thumbnail,
       },

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts
@@ -80,7 +80,7 @@ export default class EchartsTimeseriesBarChartPlugin extends EchartsChartPlugin<
           t('Transformable'),
           t('Stacked'),
           t('Bar'),
-          t('Popular'),
+          t('Featured'),
         ],
         thumbnail,
       },

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts
@@ -72,7 +72,7 @@ export default class EchartsTimeseriesLineChartPlugin extends EchartsChartPlugin
           t('Predictive'),
           t('Advanced-Analytics'),
           t('Line'),
-          t('Popular'),
+          t('Featured'),
         ],
         thumbnail,
       },

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts
@@ -73,7 +73,7 @@ export default class EchartsTimeseriesScatterChartPlugin extends EchartsChartPlu
           t('Time'),
           t('Transformable'),
           t('Scatter'),
-          t('Popular'),
+          t('Featured'),
         ],
         thumbnail,
       },

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/index.ts
@@ -44,6 +44,7 @@ export default class EchartsTreeChartPlugin extends EchartsChartPlugin {
           t('Multi-Levels'),
           t('Relational'),
           t('Structural'),
+          t('Featured'),
         ],
         thumbnail,
       },

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/index.ts
@@ -66,6 +66,7 @@ export default class EchartsTreemapChartPlugin extends EchartsChartPlugin<
           t('Multi-Levels'),
           t('Percentages'),
           t('Proportional'),
+          t('Featured'),
         ],
         thumbnail,
       },

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts
@@ -61,7 +61,7 @@ export default class EchartsWaterfallChartPlugin extends ChartPlugin<
           { url: example3 },
         ],
         name: t('Waterfall Chart'),
-        tags: [t('Categorical'), t('Comparison'), t('ECharts'), t('Popular')],
+        tags: [t('Categorical'), t('Comparison'), t('ECharts'), t('Featured')],
         thumbnail,
       }),
       transformProps,

diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/index.ts b/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/index.ts
@@ -58,7 +58,7 @@ export default class PivotTableChartPlugin extends ChartPlugin<
       ),
       exampleGallery: [{ url: example }],
       name: t('Pivot Table'),
-      tags: [t('Additive'), t('Report'), t('Tabular'), t('Popular')],
+      tags: [t('Additive'), t('Report'), t('Tabular'), t('Featured')],
       thumbnail,
     });
 

diff --git a/superset-frontend/plugins/plugin-chart-table/src/index.ts b/superset-frontend/plugins/plugin-chart-table/src/index.ts
@@ -47,7 +47,7 @@ const metadata = new ChartMetadata({
     t('Additive'),
     t('Business'),
     t('Pattern'),
-    t('Popular'),
+    t('Featured'),
     t('Report'),
     t('Sequential'),
     t('Tabular'),

diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.jsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.jsx
@@ -50,7 +50,7 @@ describe('VizTypeControl', () => {
       new ChartMetadata({
         name: 'vis1',
         thumbnail: '',
-        tags: ['Popular'],
+        tags: ['Featured'],
       }),
     )
     .registerValue(

diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
@@ -66,58 +66,6 @@ enum Sections {
   Tags = 'TAGS',
 }
 
-const DEFAULT_ORDER = [
-  'line',
-  'big_number',
-  'big_number_total',
-  'table',
-  'pivot_table_v2',
-  'echarts_timeseries_line',
-  'echarts_area',
-  'echarts_timeseries_bar',
-  'echarts_timeseries_scatter',
-  'pie',
-  'mixed_timeseries',
-  'dist_bar',
-  'area',
-  'bar',
-  'deck_polygon',
-  'time_table',
-  'histogram',
-  'deck_scatter',
-  'deck_hex',
-  'time_pivot',
-  'deck_arc',
-  'heatmap',
-  'heatmap_v2',
-  'deck_grid',
-  'deck_screengrid',
-  'treemap_v2',
-  'box_plot',
-  'sankey',
-  'word_cloud',
-  'mapbox',
-  'kepler',
-  'cal_heatmap',
-  'rose',
-  'bubble',
-  'bubble_v2',
-  'deck_geojson',
-  'horizon',
-  'deck_multi',
-  'compare',
-  'partition',
-  'event_flow',
-  'deck_path',
-  'graph_chart',
-  'world_map',
-  'paired_ttest',
-  'para',
-  'country_map',
-];
-
-const typesWithDefaultOrder = new Set(DEFAULT_ORDER);
-
 const THUMBNAIL_GRID_UNITS = 24;
 
 export const MAX_ADVISABLE_VIZ_GALLERY_WIDTH = 1090;
@@ -128,7 +76,7 @@ const ALL_CHARTS = t('All charts');
 
 const FEATURED = t('Featured');
 
-const RECOMMENDED_TAGS = [t('Popular'), t('ECharts'), t('Advanced-Analytics')];
+const RECOMMENDED_TAGS = [FEATURED, t('ECharts'), t('Advanced-Analytics')];
 
 export const VIZ_TYPE_CONTROL_TEST_ID = 'viz-type-control';
 
@@ -372,13 +320,6 @@ const TitleLabelWrapper = styled.div`
   margin-left: ${({ theme }) => theme.gridUnit * 2}px;
 `;
 
-function vizSortFactor(entry: VizEntry) {
-  if (typesWithDefaultOrder.has(entry.key)) {
-    return DEFAULT_ORDER.indexOf(entry.key);
-  }
-  return DEFAULT_ORDER.length;
-}
-
 interface ThumbnailProps {
   entry: VizEntry;
   selectedViz: string | null;
@@ -494,7 +435,7 @@ const doesVizMatchSelector = (viz: ChartMetadata, selector: string) =>
   (viz.tags || []).indexOf(selector) > -1;
 
 export default function VizTypeGallery(props: VizTypeGalleryProps) {
-  const { selectedViz, onChange, onDoubleClick, className } = props;
+  const { selectedViz, onChange, onDoubleClick, className, denyList } = props;
   const { mountedPluginMetadata } = usePluginContext();
   const searchInputRef = useRef<HTMLInputElement>();
   const [searchInputValue, setSearchInputValue] = useState('');
@@ -508,14 +449,14 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
   const chartMetadata: VizEntry[] = useMemo(() => {
     const result = Object.entries(mountedPluginMetadata)
       .map(([key, value]) => ({ key, value }))
-      .filter(({ key }) => !props.denyList.includes(key))
+      .filter(({ key }) => !denyList.includes(key))
       .filter(
         ({ value }) =>
           nativeFilterGate(value.behaviors || []) && !value.deprecated,
-      );
-    result.sort((a, b) => vizSortFactor(a) - vizSortFactor(b));
+      )
+      .sort((a, b) => a.value.name.localeCompare(b.value.name));
     return result;
-  }, [mountedPluginMetadata]);
+  }, [mountedPluginMetadata, denyList]);
 
   const chartsByCategory = useMemo(() => {
     const result: Record<string, VizEntry[]> = {};
@@ -567,7 +508,8 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
   );
 
   const sortedMetadata = useMemo(
-    () => chartMetadata.sort((a, b) => a.key.localeCompare(b.key)),
+    () =>
+      chartMetadata.sort((a, b) => a.value.name.localeCompare(b.value.name)),
     [chartMetadata],
   );
 
@@ -692,9 +634,9 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
     if (
       activeSelector === FEATURED &&
       activeSection === Sections.Featured &&
-      chartsByTags[t('Popular')]
+      chartsByTags[FEATURED]
     ) {
-      return chartsByTags[t('Popular')];
+      return chartsByTags[FEATURED];
     }
     if (
       activeSection === Sections.Category &&

diff --git a/superset-frontend/src/pages/ChartCreation/index.tsx b/superset-frontend/src/pages/ChartCreation/index.tsx
@@ -89,6 +89,7 @@ const StyledContainer = styled.div`
       display: flex;
       flex-direction: row;
       align-items: center;
+      margin-bottom: ${theme.gridUnit * 5}px;
 
       & > div {
         min-width: 200px;
@@ -144,6 +145,7 @@ const StyledContainer = styled.div`
 
       .ant-steps-item-description {
         margin-top: ${theme.gridUnit}px;
+        padding-bottom: ${theme.gridUnit}px;
       }
     }