Added chart examples for left out chart types in issue apache#16707

Author: sivasathyaseeelan

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/images/example1.png

@@ -19,6 +19,8 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
 import transformProps from '../../transformProps';
+import example1 from './images/example1.png';
+import example2 from './images/example2.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -27,6 +29,7 @@ const metadata = new ChartMetadata({
   description: t(
     'Plot the distance (like flight paths) between origin and destination.',
   ),
+  exampleGallery: [{ url: example1 }, { url: example2 }],
   name: t('deck.gl Arc'),
   thumbnail,
   useLegacyApi: true,

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/images/example2.png

@@ -20,13 +20,16 @@ import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from '../../transformProps';
 import controlPanel from './controlPanel';
 import thumbnail from './images/thumbnail.png';
+import example1 from './images/example1.png';
+import example2 from './images/example2.png';
 
 const metadata = new ChartMetadata({
   category: t('Map'),
   credits: ['https://uber.github.io/deck.gl'],
   description: t(
     'Uses Gaussian Kernel Density Estimation to visualize spatial distribution of data',
   ),
+  exampleGallery: [{ url: example1 }, { url: example2 }],
   name: t('deck.gl Countour'),
   thumbnail,
   useLegacyApi: true,

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/index.ts

@@ -19,6 +19,8 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
 import transformProps from '../../transformProps';
+import example1 from './images/example1.png';
+import example2 from './images/example2.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -27,6 +29,7 @@ const metadata = new ChartMetadata({
   description: t(
     'The GeoJsonLayer takes in GeoJSON formatted data and renders it as interactive polygons, lines and points (circles, icons and/or texts).',
   ),
+  exampleGallery: [{ url: example1 }, { url: example2 }],
   name: t('deck.gl Geojson'),
   thumbnail,
   useLegacyApi: true,

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/images/example1.png

@@ -19,6 +19,7 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
 import transformProps from '../../transformProps';
+import example1 from './images/example1.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -27,6 +28,7 @@ const metadata = new ChartMetadata({
   description: t(
     'Visualize geospatial data like 3D buildings, landscapes, or objects in grid view.',
   ),
+  exampleGallery: [{ url: example1 }],
   name: t('deck.gl Grid'),
   thumbnail,
   useLegacyApi: true,

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/images/example2.png

@@ -19,6 +19,8 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from '../../transformProps';
 import controlPanel from './controlPanel';
+import example1 from './images/example1.png';
+import example2 from './images/example2.png';
 import thumbnail from './images/thumbnail.png';
 
 const metadata = new ChartMetadata({
@@ -27,6 +29,7 @@ const metadata = new ChartMetadata({
   description: t(
     'Uses Gaussian Kernel Density Estimation to visualize spatial distribution of data',
   ),
+  exampleGallery: [{ url: example1 }, { url: example2 }],
   name: t('deck.gl Heatmap'),
   thumbnail,
   useLegacyApi: true,

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/index.ts

@@ -19,6 +19,8 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
 import transformProps from '../../transformProps';
+import example1 from './images/example1.png';
+import example2 from './images/example2.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -27,6 +29,7 @@ const metadata = new ChartMetadata({
   description: t(
     'Overlays a hexagonal grid on a map, and aggregates data within the boundary of each cell.',
   ),
+  exampleGallery: [{ url: example1 }, { url: example2 }],
   name: t('deck.gl 3D Hexagon'),
   thumbnail,
   useLegacyApi: true,

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/images/example1.png

@@ -19,12 +19,14 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
 import transformProps from '../../transformProps';
+import example1 from './images/example1.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
   category: t('Map'),
   credits: ['https://uber.github.io/deck.gl'],
   description: t('Visualizes connected points, which form a path, on a map.'),
+  exampleGallery: [{ url: example1 }],
   name: t('deck.gl Path'),
   thumbnail,
   useLegacyApi: true,

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/images/example2.png

@@ -19,6 +19,7 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
 import transformProps from '../../transformProps';
+import example1 from './images/example1.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -27,6 +28,7 @@ const metadata = new ChartMetadata({
   description: t(
     'Visualizes geographic areas from your data as polygons on a Mapbox rendered map. Polygons can be colored using a metric.',
   ),
+  exampleGallery: [{ url: example1 }],
   name: t('deck.gl Polygon'),
   thumbnail,
   useLegacyApi: true,

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/index.ts

@@ -19,6 +19,8 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
 import transformProps from '../../transformProps';
+import example1 from './images/example1.png';
+import example2 from './images/example2.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -27,6 +29,7 @@ const metadata = new ChartMetadata({
   description: t(
     'A map that takes rendering circles with a variable radius at latitude/longitude coordinates',
   ),
+  exampleGallery: [{ url: example1 }, { url: example2 }],
   name: t('deck.gl Scatterplot'),
   thumbnail,
   useLegacyApi: true,

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/images/example1.png

@@ -19,6 +19,8 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
 import transformProps from '../../transformProps';
+import example1 from './images/example1.png';
+import example2 from './images/example2.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -27,6 +29,7 @@ const metadata = new ChartMetadata({
   description: t(
     'Aggregates data within the boundary of grid cells and maps the aggregated values to a dynamic color scale',
   ),
+  exampleGallery: [{ url: example1 }, { url: example2 }],
   name: t('deck.gl Screen Grid'),
   thumbnail,
   useLegacyApi: true,

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/index.ts

@@ -849,17 +849,26 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
                 grid-area: examples-header;
               `}
             >
-              {!!selectedVizMetadata?.exampleGallery?.length && t('Examples')}
+              Examples
             </SectionTitle>
             <Examples>
-              {(selectedVizMetadata?.exampleGallery || []).map(example => (
+              {selectedVizMetadata?.exampleGallery.length ? (
+                (selectedVizMetadata?.exampleGallery || []).map(example => (
+                  <img
+                    key={example.url}
+                    src={example.url}
+                    alt={example.caption}
+                    title={example.caption}
+                  />
+                ))
+              ) : (
                 <img
-                  key={example.url}
-                  src={example.url}
-                  alt={example.caption}
-                  title={example.caption}
+                  key={selectedVizMetadata?.thumbnail}
+                  src={selectedVizMetadata?.thumbnail}
+                  alt={selectedVizMetadata?.name}
+                  title={selectedVizMetadata?.name}
                 />
-              ))}
+              )}
             </Examples>
           </>
         </div>