chore: adding missing examples in the gallery for several chart types (…

…#22597)

superset-frontend/plugins/legacy-plugin-chart-event-flow/src/index.ts

@@ -18,6 +18,7 @@
  */
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
+import example from './images/example.jpg';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -26,6 +27,7 @@ const metadata = new ChartMetadata({
   description: t(
     'Compares the lengths of time different activities take in a shared timeline view.',
   ),
+  exampleGallery: [{ url: example }],
   name: t('Event Flow'),
   tags: [t('Legacy'), t('Progressive')],
   thumbnail,

superset-frontend/plugins/legacy-plugin-chart-event-flow/src/types/external.d.ts

@@ -18,4 +18,5 @@
  */
 
 declare module '*.png';
+declare module '*.jpg';
 declare module '@data-ui/event-flow';

superset-frontend/plugins/legacy-plugin-chart-rose/src/index.js

@@ -19,13 +19,16 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import example1 from './images/example1.jpg';
+import example2 from './images/example2.jpg';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
   category: t('Ranking'),
   description: t(
     'A polar coordinate chart where the circle is broken into wedges of equal angle, and the value represented by any wedge is illustrated by its area, rather than its radius or sweep angle.',
   ),
+  exampleGallery: [{ url: example1 }, { url: example2 }],
   name: t('Nightingale Rose Chart'),
   tags: [
     t('Legacy'),

superset-frontend/plugins/legacy-preset-chart-nvd3/src/DualLine/index.js

@@ -19,6 +19,7 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
+import example from './images/example.jpg';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -27,6 +28,7 @@ const metadata = new ChartMetadata({
   description: t(
     'Visualizes 2 metrics as line plots using the same x-axis. This chart is useful for comparing metrics across the same time range.',
   ),
+  exampleGallery: [{ url: example }],
   name: t('Dual Line Chart'),
   tags: [t('Legacy'), t('nvd3')],
   thumbnail,

superset-frontend/plugins/legacy-preset-chart-nvd3/src/LineMulti/index.js

@@ -19,6 +19,7 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
+import example from './images/example.jpg';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -27,6 +28,7 @@ const metadata = new ChartMetadata({
   description: t(
     'Visualize two different time series using the same x-axis time range. This chart is being deprecated and we recommend using the Mixed Timeseries Chart instead!',
   ),
+  exampleGallery: [{ url: example }],
   name: t('Multiple Line Charts'),
   tags: [
     t('Multi-Variables'),

superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts

@@ -21,6 +21,7 @@ import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import example from './images/example.jpg';
 import { EchartsFunnelChartProps, EchartsFunnelFormData } from './types';
 
 export default class EchartsFunnelChartPlugin extends ChartPlugin<
@@ -49,6 +50,7 @@ export default class EchartsFunnelChartPlugin extends ChartPlugin<
         description: t(
           'Showcases how a metric changes as the funnel progresses. This classic chart is useful for visualizing drop-off between stages in a pipeline or lifecycle.',
         ),
+        exampleGallery: [{ url: example }],
         name: t('Funnel Chart'),
         tags: [
           t('Business'),

superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts

@@ -20,6 +20,8 @@ import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import example1 from './images/example1.jpg';
+import example2 from './images/example2.jpg';
 import buildQuery from './buildQuery';
 import { EchartsGaugeChartProps, EchartsGaugeFormData } from './types';
 
@@ -39,6 +41,7 @@ export default class EchartsGaugeChartPlugin extends ChartPlugin<
         description: t(
           'Uses a gauge to showcase progress of a metric towards a target. The position of the dial represents the progress and the terminal value in the gauge represents the target value.',
         ),
+        exampleGallery: [{ url: example1 }, { url: example2 }],
         name: t('Gauge Chart'),
         tags: [
           t('Multi-Variables'),

superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts

@@ -20,6 +20,7 @@ import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import example from './images/example.jpg';
 import buildQuery from './buildQuery';
 
 export default class EchartsGraphChartPlugin extends ChartPlugin {
@@ -34,6 +35,7 @@ export default class EchartsGraphChartPlugin extends ChartPlugin {
         description: t(
           'Displays connections between entities in a graph structure. Useful for mapping relationships and showing which nodes are important in a network. Graph charts can be configured to be force-directed or circulate. If your data has a geospatial component, try the deck.gl Arc chart.',
         ),
+        exampleGallery: [{ url: example }],
         name: t('Graph Chart'),
         tags: [
           t('Aesthetic'),

superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts

@@ -22,6 +22,8 @@ import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import example1 from './images/example1.jpg';
+import example2 from './images/example2.jpg';
 import { EchartsRadarChartProps, EchartsRadarFormData } from './types';
 
 export default class EchartsRadarChartPlugin extends ChartPlugin<
@@ -50,6 +52,7 @@ export default class EchartsRadarChartPlugin extends ChartPlugin<
         description: t(
           'Visualize a parallel set of metrics across multiple groups. Each group is visualized using its own line of points and each metric is represented as an edge in the chart.',
         ),
+        exampleGallery: [{ url: example1 }, { url: example2 }],
         name: t('Radar Chart'),
         tags: [
           t('Business'),

superset-frontend/plugins/plugin-chart-handlebars/src/plugin/index.ts

@@ -18,6 +18,8 @@
  */
 import { ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
 import thumbnail from '../images/thumbnail.png';
+import example1 from '../images/example1.jpg';
+import example2 from '../images/example2.jpg';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
@@ -38,6 +40,7 @@ export default class HandlebarsChartPlugin extends ChartPlugin {
       description: t('Write a handlebars template to render the data'),
       name: t('Handlebars'),
       thumbnail,
+      exampleGallery: [{ url: example1 }, { url: example2 }],
     });
 
     super({

superset-frontend/plugins/plugin-chart-handlebars/types/external.d.ts

@@ -20,5 +20,5 @@ declare module '*.png' {
   const value: any;
   export default value;
 }
-
+declare module '*.jpg';
 declare module 'just-handlebars-helpers';

superset-frontend/src/visualizations/FilterBox/FilterBoxChartPlugin.js

@@ -19,6 +19,8 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import example1 from './images/example1.jpg';
+import example2 from './images/example2.jpg';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -28,6 +30,7 @@ const metadata = new ChartMetadata({
     t(`Chart component that lets you add a custom filter UI in your dashboard. When added to dashboard, a filter box lets users specify specific values or ranges to filter charts by. The charts that each filter box is applied to can be fine tuned as well in the dashboard view.
 
     Note that this plugin is being replaced with the new Filters feature that lives in the dashboard view itself. It's easier to use and has more capabilities!`),
+  exampleGallery: [{ url: example1 }, { url: example2 }],
   thumbnail,
   useLegacyApi: true,
 });