feat: Add comprehensive dark mode support for chart thumbnails and examples (#35111)

Co-authored-by: Claude <noreply@anthropic.com>

superset-frontend/packages/superset-ui-core/src/chart/models/ChartMetadata.ts

@@ -26,6 +26,7 @@ interface LookupTable {
 
 export interface ExampleImage {
   url: string;
+  urlDark?: string;
   caption?: string;
 }
 
@@ -38,6 +39,7 @@ export interface ChartMetadataConfig {
   enableNoResults?: boolean;
   supportedAnnotationTypes?: string[];
   thumbnail: string;
+  thumbnailDark?: string;
   useLegacyApi?: boolean;
   behaviors?: Behavior[];
   exampleGallery?: ExampleImage[];
@@ -71,6 +73,8 @@ export default class ChartMetadata {
 
   thumbnail: string;
 
+  thumbnailDark?: string;
+
   useLegacyApi: boolean;
 
   behaviors: Behavior[];
@@ -107,6 +111,7 @@ export default class ChartMetadata {
       description = '',
       supportedAnnotationTypes = [],
       thumbnail,
+      thumbnailDark,
       useLegacyApi = false,
       behaviors = [],
       datasourceCount = 1,
@@ -138,6 +143,7 @@ export default class ChartMetadata {
     );
     this.supportedAnnotationTypes = supportedAnnotationTypes;
     this.thumbnail = thumbnail;
+    this.thumbnailDark = thumbnailDark;
     this.useLegacyApi = useLegacyApi;
     this.behaviors = behaviors;
     this.datasourceCount = datasourceCount;

superset-frontend/packages/superset-ui-core/src/theme/index.tsx

@@ -60,10 +60,7 @@ export function useTheme() {
 
 const styled: CreateStyled = emotionStyled;
 
-// launching in in dark mode for now while iterating
-const themeObject: Theme = Theme.fromConfig({
-  algorithm: ThemeAlgorithm.DEFAULT,
-});
+const themeObject: Theme = Theme.fromConfig();
 
 const { theme } = themeObject;
 const supersetTheme = theme;

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

@@ -19,8 +19,10 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from './transformProps';
 import example from './images/example.jpg';
+import exampleDark from './images/example-dark.jpg';
 import controlPanel from './controlPanel';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 
 const metadata = new ChartMetadata({
   category: t('Correlation'),
@@ -28,7 +30,7 @@ const metadata = new ChartMetadata({
   description: t(
     "Visualizes how a metric has changed over a time using a color scale and a calendar view. Gray values are used to indicate missing values and the linear color scheme is used to encode the magnitude of each day's value.",
   ),
-  exampleGallery: [{ url: example }],
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   name: t('Calendar Heatmap'),
   tags: [
     t('Business'),
@@ -39,6 +41,7 @@ const metadata = new ChartMetadata({
     t('Trend'),
   ],
   thumbnail,
+  thumbnailDark,
   useLegacyApi: true,
 });
 

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

@@ -19,7 +19,9 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from './transformProps';
 import example from './images/chord.jpg';
+import exampleDark from './images/chord-dark.jpg';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -29,11 +31,16 @@ const metadata = new ChartMetadata({
     'Showcases the flow or link between categories using thickness of chords. The value and corresponding thickness can be different for each side.',
   ),
   exampleGallery: [
-    { url: example, caption: t('Relationships between community channels') },
+    {
+      url: example,
+      urlDark: exampleDark,
+      caption: t('Relationships between community channels'),
+    },
   ],
   name: t('Chord Diagram'),
   tags: [t('Circular'), t('Legacy'), t('Proportional'), t('Relational')],
   thumbnail,
+  thumbnailDark,
   useLegacyApi: true,
 });
 

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

@@ -19,8 +19,11 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from './transformProps';
 import exampleUsa from './images/exampleUsa.jpg';
+import exampleUsaDark from './images/exampleUsa-dark.jpg';
 import exampleGermany from './images/exampleGermany.jpg';
+import exampleGermanyDark from './images/exampleGermany-dark.jpg';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -29,7 +32,10 @@ const metadata = new ChartMetadata({
   description: t(
     "Visualizes how a single metric varies across a country's principal subdivisions (states, provinces, etc) on a choropleth map. Each subdivision's value is elevated when you hover over the corresponding geographic boundary.",
   ),
-  exampleGallery: [{ url: exampleUsa }, { url: exampleGermany }],
+  exampleGallery: [
+    { url: exampleUsa, urlDark: exampleUsaDark },
+    { url: exampleGermany, urlDark: exampleGermanyDark },
+  ],
   name: t('Country Map'),
   tags: [
     t('2D'),
@@ -40,6 +46,7 @@ const metadata = new ChartMetadata({
     t('Stacked'),
   ],
   thumbnail,
+  thumbnailDark,
   useLegacyApi: true,
 });
 

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

@@ -19,7 +19,9 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from './transformProps';
 import example from './images/Horizon_Chart.jpg';
+import exampleDark from './images/Horizon_Chart-dark.jpg';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -28,10 +30,11 @@ const metadata = new ChartMetadata({
   description: t(
     'Compares how a metric changes over time between different groups. Each group is mapped to a row and change over time is visualized bar lengths and color.',
   ),
-  exampleGallery: [{ url: example }],
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   name: t('Horizon Chart'),
   tags: [t('Legacy')],
   thumbnail,
+  thumbnailDark,
   useLegacyApi: true,
 });
 

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

@@ -18,8 +18,11 @@
  */
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example1 from './images/MapBox.jpg';
+import example1Dark from './images/MapBox-dark.jpg';
 import example2 from './images/MapBox2.jpg';
+import example2Dark from './images/MapBox2-dark.jpg';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -27,8 +30,8 @@ const metadata = new ChartMetadata({
   credits: ['https://www.mapbox.com/mapbox-gl-js/api/'],
   description: '',
   exampleGallery: [
-    { url: example1, description: t('Light mode') },
-    { url: example2, description: t('Dark mode') },
+    { url: example1, urlDark: example1Dark, description: t('Light mode') },
+    { url: example2, urlDark: example2Dark, description: t('Dark mode') },
   ],
   name: t('MapBox'),
   tags: [
@@ -40,6 +43,7 @@ const metadata = new ChartMetadata({
     t('Transformable'),
   ],
   thumbnail,
+  thumbnailDark,
   useLegacyApi: true,
 });
 

superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/index.js

@@ -18,7 +18,10 @@
  */
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from './transformProps';
+import example from './images/example.jpg';
+import exampleDark from './images/example-dark.jpg';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -26,9 +29,11 @@ const metadata = new ChartMetadata({
   description: t(
     'Table that visualizes paired t-tests, which are used to understand statistical differences between groups.',
   ),
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   name: t('Paired t-test Table'),
   tags: [t('Legacy'), t('Statistical'), t('Tabular')],
   thumbnail,
+  thumbnailDark,
   useLegacyApi: true,
 });
 

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

@@ -19,8 +19,11 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example1 from './images/example1.jpg';
+import example1Dark from './images/example1-dark.jpg';
 import example2 from './images/example2.jpg';
+import example2Dark from './images/example2-dark.jpg';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -29,10 +32,14 @@ const metadata = new ChartMetadata({
   description: t(
     'Plots the individual metrics for each row in the data vertically and links them together as a line. This chart is useful for comparing multiple metrics across all of the samples or rows in the data.',
   ),
-  exampleGallery: [{ url: example1 }, { url: example2 }],
+  exampleGallery: [
+    { url: example1, urlDark: example1Dark },
+    { url: example2, urlDark: example2Dark },
+  ],
   name: t('Parallel Coordinates'),
   tags: [t('Directional'), t('Legacy'), t('Relational')],
   thumbnail,
+  thumbnailDark,
   useLegacyApi: true,
 });
 

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

@@ -19,16 +19,19 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example from './images/example.jpg';
+import exampleDark from './images/example-dark.jpg';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
   category: t('Part of a Whole'),
   description: t('Compare the same summarized metric across multiple groups.'),
-  exampleGallery: [{ url: example }],
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   name: t('Partition Chart'),
   tags: [t('Categorical'), t('Comparison'), t('Legacy'), t('Proportional')],
   thumbnail,
+  thumbnailDark,
   useLegacyApi: true,
 });
 

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

@@ -19,8 +19,11 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example1 from './images/example1.jpg';
+import example1Dark from './images/example1-dark.jpg';
 import example2 from './images/example2.jpg';
+import example2Dark from './images/example2-dark.jpg';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -28,7 +31,10 @@ const metadata = new ChartMetadata({
   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 }],
+  exampleGallery: [
+    { url: example1, urlDark: example1Dark },
+    { url: example2, urlDark: example2Dark },
+  ],
   name: t('Nightingale Rose Chart'),
   tags: [
     t('Legacy'),
@@ -40,6 +46,7 @@ const metadata = new ChartMetadata({
     t('Trend'),
   ],
   thumbnail,
+  thumbnailDark,
   useLegacyApi: true,
 });
 

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

@@ -19,8 +19,11 @@
 import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example1 from './images/WorldMap1.jpg';
+import example1Dark from './images/WorldMap1-dark.jpg';
 import example2 from './images/WorldMap2.jpg';
+import example2Dark from './images/WorldMap2-dark.jpg';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -29,7 +32,10 @@ const metadata = new ChartMetadata({
   description: t(
     'A map of the world, that can indicate values in different countries.',
   ),
-  exampleGallery: [{ url: example1 }, { url: example2 }],
+  exampleGallery: [
+    { url: example1, urlDark: example1Dark },
+    { url: example2, urlDark: example2Dark },
+  ],
   name: t('World Map'),
   tags: [
     t('2D'),
@@ -43,6 +49,7 @@ const metadata = new ChartMetadata({
     t('Featured'),
   ],
   thumbnail,
+  thumbnailDark,
   useLegacyApi: true,
   behaviors: [
     Behavior.InteractiveChart,

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

@@ -18,7 +18,9 @@
  */
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example from './images/example.png';
+import exampleDark from './images/example-dark.png';
 import transformProps from '../transformProps';
 import controlPanel from './controlPanel';
 
@@ -26,9 +28,10 @@ const metadata = new ChartMetadata({
   category: t('Map'),
   credits: ['https://uber.github.io/deck.gl'],
   description: t('Compose multiple layers together to form complex visuals.'),
-  exampleGallery: [{ url: example }],
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   name: t('deck.gl Multiple Layers'),
   thumbnail,
+  thumbnailDark,
   useLegacyApi: true,
   tags: [t('deckGL'), t('Multi-Layers')],
 });

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

@@ -18,7 +18,9 @@
  */
 import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example from './images/example.png';
+import exampleDark from './images/example-dark.png';
 import transformProps from '../../transformProps';
 import controlPanel from './controlPanel';
 
@@ -35,7 +37,8 @@ const metadata = new ChartMetadata({
   ),
   name: t('deck.gl Arc'),
   thumbnail,
-  exampleGallery: [{ url: example }],
+  thumbnailDark,
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   useLegacyApi: true,
   tags: [t('deckGL'), t('Geo'), t('3D'), t('Relational'), t('Web')],
 });

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

@@ -20,7 +20,9 @@ import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import transformProps from '../../transformProps';
 import controlPanel from './controlPanel';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example from './images/example.png';
+import exampleDark from './images/example-dark.png';
 
 const metadata = new ChartMetadata({
   category: t('Map'),
@@ -28,9 +30,10 @@ const metadata = new ChartMetadata({
   description: t(
     'Uses Gaussian Kernel Density Estimation to visualize spatial distribution of data',
   ),
-  exampleGallery: [{ url: example }],
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   name: t('deck.gl Contour'),
   thumbnail,
+  thumbnailDark,
   useLegacyApi: true,
   tags: [t('deckGL'), t('Spatial'), t('Comparison')],
   behaviors: [Behavior.InteractiveChart],

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

@@ -18,7 +18,9 @@
  */
 import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example from './images/example.png';
+import exampleDark from './images/example-dark.png';
 import transformProps from '../../transformProps';
 import controlPanel from './controlPanel';
 
@@ -28,9 +30,10 @@ 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: example }],
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   name: t('deck.gl Geojson'),
   thumbnail,
+  thumbnailDark,
   useLegacyApi: true,
   tags: [t('deckGL'), t('2D')],
   behaviors: [Behavior.InteractiveChart],

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

@@ -18,7 +18,9 @@
  */
 import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example from './images/example.png';
+import exampleDark from './images/example-dark.png';
 import transformProps from '../../transformProps';
 import controlPanel from './controlPanel';
 
@@ -30,7 +32,8 @@ const metadata = new ChartMetadata({
   ),
   name: t('deck.gl Grid'),
   thumbnail,
-  exampleGallery: [{ url: example }],
+  thumbnailDark,
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   useLegacyApi: true,
   tags: [t('deckGL'), t('3D'), t('Comparison')],
   behaviors: [Behavior.InteractiveChart],

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

@@ -20,7 +20,9 @@ import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import transformProps from '../../transformProps';
 import controlPanel from './controlPanel';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example from './images/example.png';
+import exampleDark from './images/example-dark.png';
 
 const metadata = new ChartMetadata({
   category: t('Map'),
@@ -28,9 +30,10 @@ const metadata = new ChartMetadata({
   description: t(
     'Uses Gaussian Kernel Density Estimation to visualize spatial distribution of data',
   ),
-  exampleGallery: [{ url: example }],
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   name: t('deck.gl Heatmap'),
   thumbnail,
+  thumbnailDark,
   useLegacyApi: true,
   tags: [t('deckGL'), t('Spatial'), t('Comparison')],
   behaviors: [Behavior.InteractiveChart],

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

@@ -18,7 +18,9 @@
  */
 import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example from './images/example.png';
+import exampleDark from './images/example-dark.png';
 import transformProps from '../../transformProps';
 import controlPanel from './controlPanel';
 
@@ -28,9 +30,10 @@ const metadata = new ChartMetadata({
   description: t(
     'Overlays a hexagonal grid on a map, and aggregates data within the boundary of each cell.',
   ),
-  exampleGallery: [{ url: example }],
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   name: t('deck.gl 3D Hexagon'),
   thumbnail,
+  thumbnailDark,
   useLegacyApi: true,
   tags: [t('deckGL'), t('3D'), t('Geo'), t('Comparison')],
   behaviors: [Behavior.InteractiveChart],

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

@@ -18,7 +18,9 @@
  */
 import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example from './images/example.png';
+import exampleDark from './images/example-dark.png';
 import transformProps from '../../transformProps';
 import controlPanel from './controlPanel';
 
@@ -28,7 +30,8 @@ const metadata = new ChartMetadata({
   description: t('Visualizes connected points, which form a path, on a map.'),
   name: t('deck.gl Path'),
   thumbnail,
-  exampleGallery: [{ url: example }],
+  thumbnailDark,
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   useLegacyApi: true,
   tags: [t('deckGL'), t('Web')],
   behaviors: [Behavior.InteractiveChart],

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

@@ -18,7 +18,9 @@
  */
 import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example from './images/example.png';
+import exampleDark from './images/example-dark.png';
 import transformProps from '../../transformProps';
 import controlPanel from './controlPanel';
 
@@ -30,7 +32,8 @@ const metadata = new ChartMetadata({
   ),
   name: t('deck.gl Polygon'),
   thumbnail,
-  exampleGallery: [{ url: example }],
+  thumbnailDark,
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   useLegacyApi: true,
   tags: [t('deckGL'), t('3D'), t('Multi-Dimensions'), t('Geo')],
   behaviors: [Behavior.InteractiveChart],

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

@@ -18,7 +18,9 @@
  */
 import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example from './images/example.png';
+import exampleDark from './images/example-dark.png';
 import transformProps from '../../transformProps';
 import controlPanel from './controlPanel';
 
@@ -30,7 +32,8 @@ const metadata = new ChartMetadata({
   ),
   name: t('deck.gl Scatterplot'),
   thumbnail,
-  exampleGallery: [{ url: example }],
+  thumbnailDark,
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   useLegacyApi: true,
   tags: [
     t('deckGL'),

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

@@ -18,7 +18,9 @@
  */
 import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example from './images/example.png';
+import exampleDark from './images/example-dark.png';
 import transformProps from '../../transformProps';
 import controlPanel from './controlPanel';
 
@@ -30,7 +32,8 @@ const metadata = new ChartMetadata({
   ),
   name: t('deck.gl Screen Grid'),
   thumbnail,
-  exampleGallery: [{ url: example }],
+  thumbnailDark,
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   useLegacyApi: true,
   tags: [t('deckGL'), t('Comparison'), t('Intensity'), t('Density')],
   behaviors: [Behavior.InteractiveChart],

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

@@ -19,7 +19,9 @@
 import { t, ChartMetadata, ChartPlugin, ChartLabel } from '@superset-ui/core';
 import transformProps from '../transformProps';
 import example from './images/example.jpg';
+import exampleDark from './images/example-dark.jpg';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -28,7 +30,7 @@ const metadata = new ChartMetadata({
   description: t(
     'Visualizes a metric across three dimensions of data in a single chart (X axis, Y axis, and bubble size). Bubbles from the same group can be showcased using bubble color.',
   ),
-  exampleGallery: [{ url: example }],
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   label: ChartLabel.Deprecated,
   name: t('Bubble Chart (legacy)'),
   tags: [
@@ -41,6 +43,7 @@ const metadata = new ChartMetadata({
     t('nvd3'),
   ],
   thumbnail,
+  thumbnailDark,
   useLegacyApi: true,
 });
 

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

@@ -19,7 +19,9 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from '../transformProps';
 import example from './images/example.jpg';
+import exampleDark from './images/example-dark.jpg';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -28,10 +30,11 @@ const metadata = new ChartMetadata({
   description: t(
     'Showcases the progress of a single metric against a given target. The higher the fill, the closer the metric is to the target.',
   ),
-  exampleGallery: [{ url: example }],
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   name: t('Bullet Chart'),
   tags: [t('Business'), t('Legacy'), t('Report'), t('nvd3')],
   thumbnail,
+  thumbnailDark,
   useLegacyApi: true,
 });
 

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

@@ -19,7 +19,9 @@
 import { t, ChartMetadata, ChartPlugin, ChartLabel } from '@superset-ui/core';
 import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example from './images/example.jpg';
+import exampleDark from './images/example-dark.jpg';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -28,7 +30,7 @@ const metadata = new ChartMetadata({
   description: t(
     'Visualizes many different time-series objects in a single chart. This chart is being deprecated and we recommend using the Time-series Chart instead.',
   ),
-  exampleGallery: [{ url: example }],
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   label: ChartLabel.Deprecated,
   name: t('Time-series Percent Change'),
   tags: [
@@ -43,6 +45,7 @@ const metadata = new ChartMetadata({
     t('Trend'),
   ],
   thumbnail,
+  thumbnailDark,
   useLegacyApi: true,
 });
 

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

@@ -19,15 +19,22 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
+import example from './images/example.jpg';
+import exampleDark from './images/example-dark.jpg';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
   category: t('Evolution'),
   credits: ['http://nvd3.org'],
-  description: '',
+  description: t(
+    'Compares metrics between different time periods. Displays time series data across multiple periods (like weeks or months) to show period-over-period trends and patterns.',
+  ),
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   name: t('Time-series Period Pivot'),
   tags: [t('Legacy'), t('Time'), t('nvd3')],
   thumbnail,
+  thumbnailDark,
   useLegacyApi: true,
 });
 

superset-frontend/plugins/plugin-chart-ag-grid-table/src/index.ts

@@ -19,9 +19,13 @@
 import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example1 from './images/Table.jpg';
+import example1Dark from './images/Table-dark.jpg';
 import example2 from './images/Table2.jpg';
+import example2Dark from './images/Table2-dark.jpg';
 import example3 from './images/Table3.jpg';
+import example3Dark from './images/Table3-dark.jpg';
 import controlPanel from './controlPanel';
 import buildQuery from './buildQuery';
 import { TableChartFormData, TableChartProps } from './types';
@@ -41,7 +45,11 @@ const metadata = new ChartMetadata({
   description: t(
     'Classic row-by-column spreadsheet like view of a dataset. Use tables to showcase a view into the underlying data or to show aggregated metrics.',
   ),
-  exampleGallery: [{ url: example1 }, { url: example2 }, { url: example3 }],
+  exampleGallery: [
+    { url: example1, urlDark: example1Dark },
+    { url: example2, urlDark: example2Dark },
+    { url: example3, urlDark: example3Dark },
+  ],
   name: t('Table V2'),
   tags: [
     t('Additive'),
@@ -53,6 +61,7 @@ const metadata = new ChartMetadata({
     t('Tabular'),
   ],
   thumbnail,
+  thumbnailDark,
 });
 
 export default class AgGridTableChartPlugin extends ChartPlugin<

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

@@ -21,8 +21,11 @@ import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from '../images/thumbnail.png';
+import thumbnailDark from '../images/thumbnail-dark.png';
 import example1 from '../images/example1.png';
+import example1Dark from '../images/example1-dark.png';
 import example2 from '../images/example2.png';
+import example2Dark from '../images/example2-dark.png';
 import { CartodiagramPluginConstructorOpts } from '../types';
 import { getLayerConfig } from '../util/controlPanelUtil';
 
@@ -33,11 +36,20 @@ export default class CartodiagramPlugin extends ChartPlugin {
         'Display charts on a map. For using this plugin, users first have to create any other chart that can then be placed on the map.',
       name: t('Cartodiagram'),
       thumbnail,
+      thumbnailDark,
       tags: [t('Geo'), t('2D'), t('Spatial'), t('Experimental')],
       category: t('Map'),
       exampleGallery: [
-        { url: example1, caption: t('Pie charts on a map') },
-        { url: example2, caption: t('Line charts on a map') },
+        {
+          url: example1,
+          urlDark: example1Dark,
+          caption: t('Pie charts on a map'),
+        },
+        {
+          url: example2,
+          urlDark: example2Dark,
+          caption: t('Line charts on a map'),
+        },
       ],
     });