diff --git a/superset-frontend/packages/superset-ui-core/src/chart/models/ChartMetadata.ts b/superset-frontend/packages/superset-ui-core/src/chart/models/ChartMetadata.ts index c132c9ea4c8..3b5073f02b3 100644 --- a/superset-frontend/packages/superset-ui-core/src/chart/models/ChartMetadata.ts +++ b/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; diff --git a/superset-frontend/packages/superset-ui-core/src/theme/index.tsx b/superset-frontend/packages/superset-ui-core/src/theme/index.tsx index 8b788f2e9c4..a2bcf24976c 100644 --- a/superset-frontend/packages/superset-ui-core/src/theme/index.tsx +++ b/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; diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/images/example-dark.jpg b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/images/example-dark.jpg new file mode 100644 index 00000000000..728c7f60e26 Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/images/example-dark.jpg differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/images/thumbnail-dark.png new file mode 100644 index 00000000000..27ca6f1f90f Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/index.js b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/index.js index 926d98421d3..1a8bdb5c8a0 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/index.js +++ b/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, }); diff --git a/superset-frontend/plugins/legacy-plugin-chart-chord/src/images/chord-dark.jpg b/superset-frontend/plugins/legacy-plugin-chart-chord/src/images/chord-dark.jpg new file mode 100644 index 00000000000..c54bb1786a9 Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-chord/src/images/chord-dark.jpg differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-chord/src/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-plugin-chart-chord/src/images/thumbnail-dark.png new file mode 100644 index 00000000000..553f3b310b4 Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-chord/src/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-chord/src/index.js b/superset-frontend/plugins/legacy-plugin-chart-chord/src/index.js index d159ab92e34..5f28a879815 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-chord/src/index.js +++ b/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, }); diff --git a/superset-frontend/plugins/legacy-plugin-chart-country-map/src/images/exampleGermany-dark.jpg b/superset-frontend/plugins/legacy-plugin-chart-country-map/src/images/exampleGermany-dark.jpg new file mode 100644 index 00000000000..442c3331cb4 Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-country-map/src/images/exampleGermany-dark.jpg differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-country-map/src/images/exampleUsa-dark.jpg b/superset-frontend/plugins/legacy-plugin-chart-country-map/src/images/exampleUsa-dark.jpg new file mode 100644 index 00000000000..ad5d3513aad Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-country-map/src/images/exampleUsa-dark.jpg differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-country-map/src/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-plugin-chart-country-map/src/images/thumbnail-dark.png new file mode 100644 index 00000000000..4fd2998c48f Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-country-map/src/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-country-map/src/index.js b/superset-frontend/plugins/legacy-plugin-chart-country-map/src/index.js index 79dd291f09a..ad4ed7c7972 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-country-map/src/index.js +++ b/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, }); diff --git a/superset-frontend/plugins/legacy-plugin-chart-horizon/src/images/Horizon_Chart-dark.jpg b/superset-frontend/plugins/legacy-plugin-chart-horizon/src/images/Horizon_Chart-dark.jpg new file mode 100644 index 00000000000..8f408c69fa9 Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-horizon/src/images/Horizon_Chart-dark.jpg differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-horizon/src/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-plugin-chart-horizon/src/images/thumbnail-dark.png new file mode 100644 index 00000000000..771740d2cb2 Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-horizon/src/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-horizon/src/index.js b/superset-frontend/plugins/legacy-plugin-chart-horizon/src/index.js index ef784307cf0..24ef052a9b7 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-horizon/src/index.js +++ b/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, }); diff --git a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/images/MapBox-dark.jpg b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/images/MapBox-dark.jpg new file mode 100644 index 00000000000..b818e8884a5 Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/images/MapBox-dark.jpg differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/images/MapBox2-dark.jpg b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/images/MapBox2-dark.jpg new file mode 100644 index 00000000000..17fe3269c9e Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/images/MapBox2-dark.jpg differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/images/MapBox2.jpg b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/images/MapBox2.jpg index 17fe3269c9e..46ff755ee2b 100644 Binary files a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/images/MapBox2.jpg and b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/images/MapBox2.jpg differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/images/thumbnail-dark.png new file mode 100644 index 00000000000..c05e3bcf52f Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/images/thumbnail.png b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/images/thumbnail.png index c05e3bcf52f..b63ddb86dd7 100644 Binary files a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/images/thumbnail.png and b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/images/thumbnail.png differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/index.js b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/index.js index f422efafc88..6da02227012 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/index.js +++ b/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, }); diff --git a/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/images/example-dark.jpg b/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/images/example-dark.jpg new file mode 100644 index 00000000000..09d672b7e2d Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/images/example-dark.jpg differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/images/thumbnailLarge.png b/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/images/example.jpg similarity index 100% rename from superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/images/thumbnailLarge.png rename to superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/images/example.jpg diff --git a/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/images/thumbnail-dark.png new file mode 100644 index 00000000000..09d672b7e2d Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/index.js b/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/index.js index c220d2515e9..2bed314393c 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/index.js +++ b/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, }); diff --git a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/images/example1-dark.jpg b/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/images/example1-dark.jpg new file mode 100644 index 00000000000..b515dcce5b6 Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/images/example1-dark.jpg differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/images/example2-dark.jpg b/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/images/example2-dark.jpg new file mode 100644 index 00000000000..e2b3d23ac94 Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/images/example2-dark.jpg differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/images/thumbnail-dark.png new file mode 100644 index 00000000000..6561138e0be Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/index.js b/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/index.js index 74b985e7cff..fa276bcc741 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/index.js +++ b/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, }); diff --git a/superset-frontend/plugins/legacy-plugin-chart-partition/src/images/example-dark.jpg b/superset-frontend/plugins/legacy-plugin-chart-partition/src/images/example-dark.jpg new file mode 100644 index 00000000000..7204991da44 Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-partition/src/images/example-dark.jpg differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-partition/src/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-plugin-chart-partition/src/images/thumbnail-dark.png new file mode 100644 index 00000000000..ae85cfe064d Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-partition/src/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-partition/src/index.js b/superset-frontend/plugins/legacy-plugin-chart-partition/src/index.js index 866a18d0f00..11b891b2586 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-partition/src/index.js +++ b/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, }); diff --git a/superset-frontend/plugins/legacy-plugin-chart-rose/src/images/example1-dark.jpg b/superset-frontend/plugins/legacy-plugin-chart-rose/src/images/example1-dark.jpg new file mode 100644 index 00000000000..8870aed33c9 Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-rose/src/images/example1-dark.jpg differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-rose/src/images/example2-dark.jpg b/superset-frontend/plugins/legacy-plugin-chart-rose/src/images/example2-dark.jpg new file mode 100644 index 00000000000..ae6965cd6b0 Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-rose/src/images/example2-dark.jpg differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-rose/src/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-plugin-chart-rose/src/images/thumbnail-dark.png new file mode 100644 index 00000000000..7e2f237ad3d Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-rose/src/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-rose/src/index.js b/superset-frontend/plugins/legacy-plugin-chart-rose/src/index.js index a46e0b75357..01f70c098cc 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-rose/src/index.js +++ b/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, }); diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/images/WorldMap1-dark.jpg b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/images/WorldMap1-dark.jpg new file mode 100644 index 00000000000..c0b4759821e Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/images/WorldMap1-dark.jpg differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/images/WorldMap2-dark.jpg b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/images/WorldMap2-dark.jpg new file mode 100644 index 00000000000..33f0b75b8ff Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/images/WorldMap2-dark.jpg differ diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/images/thumbnail-dark.png new file mode 100644 index 00000000000..d902b6071c5 Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/images/thumbnail-dark.png differ 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 index cb83883cab7..5e2c78cc5ae 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/index.js +++ b/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, diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/Multi/images/example-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/Multi/images/example-dark.png new file mode 100644 index 00000000000..75851be4931 Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/Multi/images/example-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/Multi/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/Multi/images/thumbnail-dark.png new file mode 100644 index 00000000000..544600929d4 Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/Multi/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/Multi/index.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/Multi/index.ts index 42ce06b1c75..290d338e211 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/Multi/index.ts +++ b/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')], }); diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/images/example-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/images/example-dark.png new file mode 100644 index 00000000000..1eb6eaede9c Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/images/example-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/images/thumbnail-dark.png new file mode 100644 index 00000000000..33436a5bf75 Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/index.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/index.ts index 3a22503f48f..60a2c1db07d 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/index.ts +++ b/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')], }); diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/images/example-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/images/example-dark.png new file mode 100644 index 00000000000..f9bbd466ae5 Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/images/example-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/images/thumbnail-dark.png new file mode 100644 index 00000000000..adc4d1e694a Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/images/thumbnail.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/images/thumbnail.png index eb9b541307c..448b5da555f 100644 Binary files a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/images/thumbnail.png and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/images/thumbnail.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/index.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/index.ts index 041221a3f8e..60b0f122fb0 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/index.ts +++ b/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], diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/images/example-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/images/example-dark.png new file mode 100644 index 00000000000..fa1a5d43e79 Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/images/example-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/images/thumbnail-dark.png new file mode 100644 index 00000000000..82bf4e672ec Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/index.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/index.ts index 3e2a7869b3d..5b56c576bf0 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/index.ts +++ b/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], diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/images/example-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/images/example-dark.png new file mode 100644 index 00000000000..4129f52b41f Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/images/example-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/images/thumbnail-dark.png new file mode 100644 index 00000000000..b7fda99d130 Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/index.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/index.ts index 31fd40b6c2e..7570121deba 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/index.ts +++ b/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], diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/images/example-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/images/example-dark.png new file mode 100644 index 00000000000..6476d6f140b Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/images/example-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/images/thumbnail-dark.png new file mode 100644 index 00000000000..f94f7fc37e5 Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/images/thumbnail.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/images/thumbnail.png index e120e6cb03a..f94f7fc37e5 100644 Binary files a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/images/thumbnail.png and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/images/thumbnail.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/index.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/index.ts index 2b84f0ea9d8..418e08daa41 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/index.ts +++ b/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], diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/images/example-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/images/example-dark.png new file mode 100644 index 00000000000..f13eabd78f2 Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/images/example-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/images/thumbnail-dark.png new file mode 100644 index 00000000000..30c49b4f1fa Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/index.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/index.ts index 75629105594..2712e847db5 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/index.ts +++ b/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], diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/images/example-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/images/example-dark.png new file mode 100644 index 00000000000..509d0c8769e Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/images/example-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/images/thumbnail-dark.png new file mode 100644 index 00000000000..64b43a4e830 Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/images/thumbnail.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/images/thumbnail.png index 64b43a4e830..95316d0738e 100644 Binary files a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/images/thumbnail.png and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/images/thumbnail.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/index.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/index.ts index 3f671c57579..fd930a27808 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/index.ts +++ b/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], diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/images/example-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/images/example-dark.png new file mode 100644 index 00000000000..8ee7fd5945f Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/images/example-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/images/thumbnail-dark.png new file mode 100644 index 00000000000..6cb9cdb4d77 Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/index.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/index.ts index 95a397f7749..2f793a45398 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/index.ts +++ b/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], diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Scatter/images/example-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Scatter/images/example-dark.png new file mode 100644 index 00000000000..72e1c337deb Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Scatter/images/example-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Scatter/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Scatter/images/thumbnail-dark.png new file mode 100644 index 00000000000..67bbd4bb6f9 Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Scatter/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Scatter/index.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Scatter/index.ts index d37a3b24718..4f32f4a1c77 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Scatter/index.ts +++ b/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'), diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/images/example-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/images/example-dark.png new file mode 100644 index 00000000000..92679725e32 Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/images/example-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/images/thumbnail-dark.png new file mode 100644 index 00000000000..7f47b7e52cb Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/images/thumbnail.png b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/images/thumbnail.png index 7f47b7e52cb..f7c77adc477 100644 Binary files a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/images/thumbnail.png and b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/images/thumbnail.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/index.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/index.ts index ea2f8c4ef62..574d50dffff 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/index.ts +++ b/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], diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/images/example-dark.jpg b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/images/example-dark.jpg new file mode 100644 index 00000000000..1e35fc3455d Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/images/example-dark.jpg differ diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/images/thumbnail-dark.png new file mode 100644 index 00000000000..da9aa70bc12 Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/index.js b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/index.js index 6c259a35e66..18af4e41a20 100644 --- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/index.js +++ b/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, }); diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/images/example-dark.jpg b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/images/example-dark.jpg new file mode 100644 index 00000000000..3b6cf2a7626 Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/images/example-dark.jpg differ diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/images/thumbnail-dark.png new file mode 100644 index 00000000000..d67e71c281d Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/index.js b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/index.js index 4160d927709..ed175c35799 100644 --- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/index.js +++ b/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, }); diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/images/example-dark.jpg b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/images/example-dark.jpg new file mode 100644 index 00000000000..658db25a815 Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/images/example-dark.jpg differ diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/images/thumbnail-dark.png new file mode 100644 index 00000000000..1707dc5503c Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/index.js b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/index.js index 2044ac07b71..47914b5a31b 100644 --- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/index.js +++ b/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, }); diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/TimePivot/images/example-dark.jpg b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/TimePivot/images/example-dark.jpg new file mode 100644 index 00000000000..6d92e0682b4 Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/TimePivot/images/example-dark.jpg differ diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/TimePivot/images/example.jpg b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/TimePivot/images/example.jpg new file mode 100644 index 00000000000..6b7868313c0 Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/TimePivot/images/example.jpg differ diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/TimePivot/images/thumbnail-dark.png b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/TimePivot/images/thumbnail-dark.png new file mode 100644 index 00000000000..0ab807f6049 Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/TimePivot/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/TimePivot/index.js b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/TimePivot/index.js index f835ebecd15..57c33db3bb1 100644 --- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/TimePivot/index.js +++ b/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, }); diff --git a/superset-frontend/plugins/plugin-chart-ag-grid-table/src/images/Table-dark.jpg b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/images/Table-dark.jpg new file mode 100644 index 00000000000..e1b631aa721 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/images/Table-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-ag-grid-table/src/images/Table2-dark.jpg b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/images/Table2-dark.jpg new file mode 100644 index 00000000000..4339ebac69b Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/images/Table2-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-ag-grid-table/src/images/Table3-dark.jpg b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/images/Table3-dark.jpg new file mode 100644 index 00000000000..c4d7b9a2df5 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/images/Table3-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-ag-grid-table/src/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/images/thumbnail-dark.png new file mode 100644 index 00000000000..296702c954a Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-ag-grid-table/src/images/thumbnail.png b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/images/thumbnail.png index 296702c954a..919eaa2118e 100644 Binary files a/superset-frontend/plugins/plugin-chart-ag-grid-table/src/images/thumbnail.png and b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/images/thumbnail.png differ diff --git a/superset-frontend/plugins/plugin-chart-ag-grid-table/src/index.ts b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/index.ts index a5650637d5b..c146d85df39 100644 --- a/superset-frontend/plugins/plugin-chart-ag-grid-table/src/index.ts +++ b/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< diff --git a/superset-frontend/plugins/plugin-chart-cartodiagram/src/images/example1-dark.png b/superset-frontend/plugins/plugin-chart-cartodiagram/src/images/example1-dark.png new file mode 100644 index 00000000000..b72ba1ab151 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-cartodiagram/src/images/example1-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-cartodiagram/src/images/example2-dark.png b/superset-frontend/plugins/plugin-chart-cartodiagram/src/images/example2-dark.png new file mode 100644 index 00000000000..04a16eec260 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-cartodiagram/src/images/example2-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-cartodiagram/src/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-cartodiagram/src/images/thumbnail-dark.png new file mode 100644 index 00000000000..7de47c1c975 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-cartodiagram/src/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-cartodiagram/src/plugin/index.ts b/superset-frontend/plugins/plugin-chart-cartodiagram/src/plugin/index.ts index f26361d68a8..2b916739ef7 100644 --- a/superset-frontend/plugins/plugin-chart-cartodiagram/src/plugin/index.ts +++ b/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'), + }, ], }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/images/thumbnail-dark.png new file mode 100644 index 00000000000..e71b9e08ac9 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/index.ts index 53ab44c2aa4..35962b845f2 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/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 thumbnailDark from './images/thumbnail-dark.png'; export default class PopKPIPlugin extends ChartPlugin { constructor() { @@ -38,6 +39,7 @@ export default class PopKPIPlugin extends ChartPlugin { t('Advanced-Analytics'), ], thumbnail, + thumbnailDark, }); super({ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/images/BigNumber-dark.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/images/BigNumber-dark.jpg new file mode 100644 index 00000000000..221e0cbb124 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/images/BigNumber-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/images/BigNumber2-dark.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/images/BigNumber2-dark.jpg new file mode 100644 index 00000000000..5e06191bd03 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/images/BigNumber2-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/images/thumbnail-dark.png new file mode 100644 index 00000000000..ecce3c42f36 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/images/thumbnail-dark.png differ 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 index d77ea1e4cdb..3af09913f02 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts @@ -21,8 +21,11 @@ import controlPanel from './controlPanel'; import transformProps from './transformProps'; import buildQuery from './buildQuery'; import example1 from './images/BigNumber.jpg'; +import example1Dark from './images/BigNumber-dark.jpg'; import example2 from './images/BigNumber2.jpg'; +import example2Dark from './images/BigNumber2-dark.jpg'; import thumbnail from './images/thumbnail.png'; +import thumbnailDark from './images/thumbnail-dark.png'; import { BigNumberTotalChartProps, BigNumberTotalFormData } from '../types'; import { EchartsChartPlugin } from '../../types'; @@ -32,8 +35,8 @@ const metadata = { 'Showcases a single metric front-and-center. Big number is best used to call attention to a KPI or the one thing you want your audience to focus on.', ), exampleGallery: [ - { url: example1, caption: t('A Big Number') }, - { url: example2, caption: t('With a subheader') }, + { url: example1, urlDark: example1Dark, caption: t('A Big Number') }, + { url: example2, urlDark: example2Dark, caption: t('With a subheader') }, ], name: t('Big Number'), tags: [ @@ -46,6 +49,7 @@ const metadata = { t('Report'), ], thumbnail, + thumbnailDark, behaviors: [Behavior.DrillToDetail], }; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/images/Big_Number_Trendline-dark.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/images/Big_Number_Trendline-dark.jpg new file mode 100644 index 00000000000..5a8271f4912 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/images/Big_Number_Trendline-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/images/thumbnail-dark.png new file mode 100644 index 00000000000..34c5281cceb Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/images/thumbnail-dark.png differ 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 index 4379c88e632..1dba8ac4dd2 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts @@ -21,7 +21,9 @@ import controlPanel from './controlPanel'; import transformProps from './transformProps'; import buildQuery from './buildQuery'; import example from './images/Big_Number_Trendline.jpg'; +import exampleDark from './images/Big_Number_Trendline-dark.jpg'; import thumbnail from './images/thumbnail.png'; +import thumbnailDark from './images/thumbnail-dark.png'; import { BigNumberWithTrendlineChartProps, BigNumberWithTrendlineFormData, @@ -33,7 +35,7 @@ const metadata = { description: t( 'Showcases a single number accompanied by a simple line chart, to call attention to an important metric along with its change over time or other dimension.', ), - exampleGallery: [{ url: example }], + exampleGallery: [{ url: example, urlDark: exampleDark }], name: t('Big Number with Trendline'), tags: [ t('Advanced-Analytics'), @@ -45,6 +47,7 @@ const metadata = { t('Trend'), ], thumbnail, + thumbnailDark, behaviors: [Behavior.DrillToDetail], }; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/images/BoxPlot-dark.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/images/BoxPlot-dark.jpg new file mode 100644 index 00000000000..afb8e9c21dd Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/images/BoxPlot-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/images/thumbnail-dark.png new file mode 100644 index 00000000000..dca7ffbe0d1 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/index.ts index a379832f9e1..b1c0588a38a 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/index.ts @@ -21,7 +21,9 @@ import buildQuery from './buildQuery'; import controlPanel from './controlPanel'; import transformProps from './transformProps'; import example from './images/BoxPlot.jpg'; +import exampleDark from './images/BoxPlot-dark.jpg'; import thumbnail from './images/thumbnail.png'; +import thumbnailDark from './images/thumbnail-dark.png'; import { BoxPlotQueryFormData, EchartsBoxPlotChartProps } from './types'; import { EchartsChartPlugin } from '../types'; @@ -55,10 +57,11 @@ export default class EchartsBoxPlotChartPlugin extends EchartsChartPlugin< description: t( 'Also known as a box and whisker plot, this visualization compares the distributions of a related metric across multiple groups. The box in the middle emphasizes the mean, median, and inner 2 quartiles. The whiskers around each box visualize the min, max, range, and outer 2 quartiles.', ), - exampleGallery: [{ url: example }], + exampleGallery: [{ url: example, urlDark: exampleDark }], name: t('Box Plot'), tags: [t('ECharts'), t('Range'), t('Statistical'), t('Featured')], thumbnail, + thumbnailDark, }, transformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/images/example1-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/images/example1-dark.png new file mode 100644 index 00000000000..55769fab505 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/images/example1-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/images/example2-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/images/example2-dark.png new file mode 100644 index 00000000000..73ddeea9c99 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/images/example2-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/images/thumbnail-dark.png new file mode 100644 index 00000000000..1ce2fed414e Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/index.ts index e8880dac1a4..37f834df8d5 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/index.ts @@ -18,11 +18,14 @@ */ import { ChartMetadata, ChartPlugin, t } from '@superset-ui/core'; import thumbnail from './images/thumbnail.png'; +import thumbnailDark from './images/thumbnail-dark.png'; import transformProps from './transformProps'; import buildQuery from './buildQuery'; import controlPanel from './controlPanel'; 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 { EchartsBubbleChartProps, EchartsBubbleFormData } from './types'; // TODO: Implement cross filtering @@ -41,7 +44,10 @@ export default class EchartsBubbleChartPlugin extends ChartPlugin< 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: example1 }, { url: example2 }], + exampleGallery: [ + { url: example1, urlDark: example1Dark }, + { url: example2, urlDark: example2Dark }, + ], name: t('Bubble Chart'), tags: [ t('Multi-Dimensions'), @@ -53,6 +59,7 @@ export default class EchartsBubbleChartPlugin extends ChartPlugin< t('Featured'), ], thumbnail, + thumbnailDark, }), transformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/images/example-dark.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/images/example-dark.jpg new file mode 100644 index 00000000000..04977b3816e Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/images/example-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/images/thumbnail-dark.png new file mode 100644 index 00000000000..7dc1e1ad265 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts index 0d3948e2072..a9534978fa9 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts @@ -21,7 +21,9 @@ 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 example from './images/example.jpg'; +import exampleDark from './images/example-dark.jpg'; import { EchartsFunnelChartProps, EchartsFunnelFormData } from './types'; import { EchartsChartPlugin } from '../types'; @@ -55,7 +57,7 @@ export default class EchartsFunnelChartPlugin extends EchartsChartPlugin< 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 }], + exampleGallery: [{ url: example, urlDark: exampleDark }], name: t('Funnel Chart'), tags: [ t('Business'), @@ -67,6 +69,7 @@ export default class EchartsFunnelChartPlugin extends EchartsChartPlugin< t('Featured'), ], thumbnail, + thumbnailDark, }, transformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gantt/images/example1-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Gantt/images/example1-dark.png new file mode 100644 index 00000000000..4415890670f Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Gantt/images/example1-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gantt/images/example2-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Gantt/images/example2-dark.png new file mode 100644 index 00000000000..eac3723afe0 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Gantt/images/example2-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gantt/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Gantt/images/thumbnail-dark.png new file mode 100644 index 00000000000..a7c08256248 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Gantt/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gantt/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Gantt/index.ts index a474ceb35cb..736f9ffe2cd 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Gantt/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Gantt/index.ts @@ -22,8 +22,11 @@ import controlPanel from './controlPanel'; import buildQuery from './buildQuery'; import { EchartsChartPlugin } from '../types'; 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'; export default class EchartsGanttChartPlugin extends EchartsChartPlugin { constructor() { @@ -46,7 +49,11 @@ export default class EchartsGanttChartPlugin extends EchartsChartPlugin { ), tags: [t('ECharts'), t('Featured'), t('Timeline'), t('Time')], thumbnail, - exampleGallery: [{ url: example1 }, { url: example2 }], + thumbnailDark, + exampleGallery: [ + { url: example1, urlDark: example1Dark }, + { url: example2, urlDark: example2Dark }, + ], }, transformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/images/example1-dark.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/images/example1-dark.jpg new file mode 100644 index 00000000000..602e0f1ca46 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/images/example1-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/images/example2-dark.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/images/example2-dark.jpg new file mode 100644 index 00000000000..72e670d1cb3 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/images/example2-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/images/thumbnail-dark.png new file mode 100644 index 00000000000..c12dd132c2d Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts index a3359826b37..0e39f3be292 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts @@ -20,8 +20,11 @@ import { t, Behavior } from '@superset-ui/core'; 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.jpg'; +import example1Dark from './images/example1-dark.jpg'; import example2 from './images/example2.jpg'; +import example2Dark from './images/example2-dark.jpg'; import buildQuery from './buildQuery'; import { EchartsGaugeChartProps, EchartsGaugeFormData } from './types'; import { EchartsChartPlugin } from '../types'; @@ -46,7 +49,10 @@ export default class EchartsGaugeChartPlugin extends EchartsChartPlugin< 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 }], + exampleGallery: [ + { url: example1, urlDark: example1Dark }, + { url: example2, urlDark: example2Dark }, + ], name: t('Gauge Chart'), tags: [ t('Multi-Variables'), @@ -57,6 +63,7 @@ export default class EchartsGaugeChartPlugin extends EchartsChartPlugin< t('Featured'), ], thumbnail, + thumbnailDark, }, transformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/images/example-dark.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/images/example-dark.jpg new file mode 100644 index 00000000000..b3b826a45f0 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/images/example-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/images/thumbnail-dark.png new file mode 100644 index 00000000000..874a6663261 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts index 347e61d1ef9..f50170246a5 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts @@ -20,7 +20,9 @@ import { Behavior, t } from '@superset-ui/core'; import controlPanel from './controlPanel'; 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 buildQuery from './buildQuery'; import { EchartsChartPlugin } from '../types'; @@ -36,7 +38,7 @@ export default class EchartsGraphChartPlugin extends EchartsChartPlugin { 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 }], + exampleGallery: [{ url: example, urlDark: exampleDark }], name: t('Graph Chart'), tags: [ t('Circular'), @@ -49,6 +51,7 @@ export default class EchartsGraphChartPlugin extends EchartsChartPlugin { t('Featured'), ], thumbnail, + thumbnailDark, behaviors: [ Behavior.InteractiveChart, Behavior.DrillToDetail, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/images/example1-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/images/example1-dark.png new file mode 100644 index 00000000000..0e8138066ac Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/images/example1-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/images/example2-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/images/example2-dark.png new file mode 100644 index 00000000000..0bc6e74be46 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/images/example2-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/images/example3-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/images/example3-dark.png new file mode 100644 index 00000000000..3f412ca09ee Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/images/example3-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/images/thumbnail-dark.png new file mode 100644 index 00000000000..dd06630bc08 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/index.ts index 23ae090f3ea..0fa02a3f37a 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/index.ts @@ -20,9 +20,13 @@ import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core'; import transformProps from './transformProps'; import buildQuery from './buildQuery'; 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 example3 from './images/example3.png'; +import example3Dark from './images/example3-dark.png'; import thumbnail from './images/thumbnail.png'; +import thumbnailDark from './images/thumbnail-dark.png'; import controlPanel from './controlPanel'; const metadata = new ChartMetadata({ @@ -30,7 +34,11 @@ const metadata = new ChartMetadata({ description: t( 'Visualize a related metric across pairs of groups. Heatmaps excel at showcasing the correlation or strength between two groups. Color is used to emphasize the strength of the link between each pair of groups.', ), - exampleGallery: [{ url: example1 }, { url: example2 }, { url: example3 }], + exampleGallery: [ + { url: example1, urlDark: example1Dark }, + { url: example2, urlDark: example2Dark }, + { url: example3, urlDark: example3Dark }, + ], name: t('Heatmap'), tags: [ t('Business'), @@ -41,6 +49,7 @@ const metadata = new ChartMetadata({ t('Featured'), ], thumbnail, + thumbnailDark, }); export default class EchartsHeatmapChartPlugin extends ChartPlugin { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/images/example1-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/images/example1-dark.png new file mode 100644 index 00000000000..34d7194ccd8 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/images/example1-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/images/example2-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/images/example2-dark.png new file mode 100644 index 00000000000..25db0aeafaa Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/images/example2-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/images/thumbnail-dark.png new file mode 100644 index 00000000000..31ce4d6ac30 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/index.ts index 15e6e84dddd..aef87b4db16 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/index.ts @@ -22,8 +22,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 example2 from './images/example2.png'; +import example1Dark from './images/example1-dark.png'; +import example2Dark from './images/example2-dark.png'; import { HistogramChartProps, HistogramFormData } from './types'; // TODO: Implement cross filtering @@ -55,10 +58,14 @@ export default class EchartsHistogramChartPlugin extends ChartPlugin< It helps visualize patterns, clusters, and outliers in the data and provides insights into its shape, central tendency, and spread.`, ), - exampleGallery: [{ url: example1 }, { url: example2 }], + exampleGallery: [ + { url: example1, urlDark: example1Dark }, + { url: example2, urlDark: example2Dark }, + ], name: t('Histogram'), tags: [t('Comparison'), t('ECharts'), t('Pattern'), t('Range')], thumbnail, + thumbnailDark, }), transformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/images/example-dark.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/images/example-dark.jpg new file mode 100644 index 00000000000..a1af15f345d Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/images/example-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/images/thumbnail-dark.png new file mode 100644 index 00000000000..2f41add3900 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts index 5d8eee2e572..86d4b834cdc 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts @@ -21,7 +21,9 @@ 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 example from './images/example.jpg'; +import exampleDark from './images/example-dark.jpg'; import { EchartsMixedTimeseriesFormData, EchartsMixedTimeseriesProps, @@ -64,9 +66,10 @@ export default class EchartsTimeseriesChartPlugin extends EchartsChartPlugin< AnnotationType.Interval, AnnotationType.Timeseries, ], - exampleGallery: [{ url: example }], + exampleGallery: [{ url: example, urlDark: exampleDark }], name: t('Mixed Chart'), thumbnail, + thumbnailDark, tags: [ t('Advanced-Analytics'), t('ECharts'), diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/images/Pie1-dark.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/images/Pie1-dark.jpg new file mode 100644 index 00000000000..c133e8e6e04 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/images/Pie1-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/images/Pie2-dark.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/images/Pie2-dark.jpg new file mode 100644 index 00000000000..5a252d113a3 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/images/Pie2-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/images/Pie3-dark.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/images/Pie3-dark.jpg new file mode 100644 index 00000000000..ad7a7419798 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/images/Pie3-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/images/Pie4-dark.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/images/Pie4-dark.jpg new file mode 100644 index 00000000000..44daf10a569 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/images/Pie4-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/images/thumbnail-dark.png new file mode 100644 index 00000000000..5f7375d5bc4 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts index 88d6e598b37..a2ef43352d0 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts @@ -21,10 +21,15 @@ 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/Pie1.jpg'; +import example1Dark from './images/Pie1-dark.jpg'; import example2 from './images/Pie2.jpg'; +import example2Dark from './images/Pie2-dark.jpg'; import example3 from './images/Pie3.jpg'; +import example3Dark from './images/Pie3-dark.jpg'; import example4 from './images/Pie4.jpg'; +import example4Dark from './images/Pie4-dark.jpg'; import { EchartsPieChartProps, EchartsPieFormData } from './types'; import { EchartsChartPlugin } from '../types'; @@ -60,10 +65,10 @@ export default class EchartsPieChartPlugin extends EchartsChartPlugin< Pie charts can be difficult to interpret precisely. If clarity of relative proportion is important, consider using a bar or other chart type instead.`), exampleGallery: [ - { url: example1 }, - { url: example2 }, - { url: example3 }, - { url: example4 }, + { url: example1, urlDark: example1Dark }, + { url: example2, urlDark: example2Dark }, + { url: example3, urlDark: example3Dark }, + { url: example4, urlDark: example4Dark }, ], name: t('Pie Chart'), tags: [ @@ -77,6 +82,7 @@ export default class EchartsPieChartPlugin extends EchartsChartPlugin< t('Nightingale'), ], thumbnail, + thumbnailDark, }, transformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/images/example1-dark.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/images/example1-dark.jpg new file mode 100644 index 00000000000..d30efd815fe Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/images/example1-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/images/example2-dark.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/images/example2-dark.jpg new file mode 100644 index 00000000000..dfb43272dc5 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/images/example2-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/images/thumbnail-dark.png new file mode 100644 index 00000000000..7dfed3e2640 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts index cac1b9f2e8e..7b9d1293b78 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts @@ -22,8 +22,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.jpg'; +import example1Dark from './images/example1-dark.jpg'; import example2 from './images/example2.jpg'; +import example2Dark from './images/example2-dark.jpg'; import { EchartsRadarChartProps, EchartsRadarFormData } from './types'; import { EchartsChartPlugin } from '../types'; @@ -57,7 +60,10 @@ export default class EchartsRadarChartPlugin extends EchartsChartPlugin< 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 }], + exampleGallery: [ + { url: example1, urlDark: example1Dark }, + { url: example2, urlDark: example2Dark }, + ], name: t('Radar Chart'), tags: [ t('Business'), @@ -69,6 +75,7 @@ export default class EchartsRadarChartPlugin extends EchartsChartPlugin< t('Featured'), ], thumbnail, + thumbnailDark, }, transformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sankey/images/example1-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Sankey/images/example1-dark.png new file mode 100644 index 00000000000..1cb91aeac49 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Sankey/images/example1-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sankey/images/example2-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Sankey/images/example2-dark.png new file mode 100644 index 00000000000..2256f243bd7 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Sankey/images/example2-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sankey/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Sankey/images/thumbnail-dark.png new file mode 100644 index 00000000000..0de42f375a4 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Sankey/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sankey/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Sankey/index.ts index 26fad0e2947..9e78fe14879 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Sankey/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Sankey/index.ts @@ -22,8 +22,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 { SankeyChartProps, SankeyFormData } from './types'; // TODO: Implement cross filtering @@ -55,10 +58,14 @@ export default class EchartsSankeyChartPlugin extends ChartPlugin< height corresponds to the visualized metric, providing a clear representation of value distribution and transformation.`, ), - exampleGallery: [{ url: example1 }, { url: example2 }], + exampleGallery: [ + { url: example1, urlDark: example1Dark }, + { url: example2, urlDark: example2Dark }, + ], name: t('Sankey Chart'), tags: [t('Directional'), t('ECharts'), t('Distribution'), t('Flow')], thumbnail, + thumbnailDark, }), transformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/images/Sunburst1-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/images/Sunburst1-dark.png new file mode 100644 index 00000000000..35153d9aab1 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/images/Sunburst1-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/images/Sunburst2-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/images/Sunburst2-dark.png new file mode 100644 index 00000000000..5b42eae648b Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/images/Sunburst2-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/images/thumbnail-dark.png new file mode 100644 index 00000000000..986f66d8a2d Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/index.ts index d1715c7d818..ee18c027933 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/index.ts @@ -19,10 +19,13 @@ import { Behavior, t } from '@superset-ui/core'; import transformProps from './transformProps'; import thumbnail from './images/thumbnail.png'; +import thumbnailDark from './images/thumbnail-dark.png'; import controlPanel from './controlPanel'; import buildQuery from './buildQuery'; import example1 from './images/Sunburst1.png'; +import example1Dark from './images/Sunburst1-dark.png'; import example2 from './images/Sunburst2.png'; +import example2Dark from './images/Sunburst2-dark.png'; import { EchartsChartPlugin } from '../types'; export default class EchartsSunburstChartPlugin extends EchartsChartPlugin { @@ -42,7 +45,10 @@ export default class EchartsSunburstChartPlugin extends EchartsChartPlugin { description: t( 'Uses circles to visualize the flow of data through different stages of a system. Hover over individual paths in the visualization to understand the stages a value took. Useful for multi-stage, multi-group visualizing funnels and pipelines.', ), - exampleGallery: [{ url: example1 }, { url: example2 }], + exampleGallery: [ + { url: example1, urlDark: example1Dark }, + { url: example2, urlDark: example2Dark }, + ], name: t('Sunburst Chart'), tags: [ t('ECharts'), @@ -51,6 +57,7 @@ export default class EchartsSunburstChartPlugin extends EchartsChartPlugin { t('Featured'), ], thumbnail, + thumbnailDark, }, transformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/images/Area1-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/images/Area1-dark.png new file mode 100644 index 00000000000..a32b1300904 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/images/Area1-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/images/thumbnail-dark.png new file mode 100644 index 00000000000..afb8c42313e Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/images/thumbnail-dark.png differ 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 index cac72379760..d49897c30bc 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts @@ -21,11 +21,13 @@ 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 { EchartsTimeseriesChartProps, EchartsTimeseriesFormData, } from '../types'; import example1 from './images/Area1.png'; +import example1Dark from './images/Area1-dark.png'; import { EchartsChartPlugin } from '../../types'; const areaTransformProps = (chartProps: EchartsTimeseriesChartProps) => @@ -54,7 +56,7 @@ export default class EchartsAreaChartPlugin extends EchartsChartPlugin< description: t( 'Area charts are similar to line charts in that they represent variables with the same scale, but area charts stack the metrics on top of each other.', ), - exampleGallery: [{ url: example1 }], + exampleGallery: [{ url: example1, urlDark: example1Dark }], supportedAnnotationTypes: [ AnnotationType.Event, AnnotationType.Formula, @@ -73,6 +75,7 @@ export default class EchartsAreaChartPlugin extends EchartsChartPlugin< t('Featured'), ], thumbnail, + thumbnailDark, }, transformProps: areaTransformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/Bar1-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/Bar1-dark.png new file mode 100644 index 00000000000..e029ab6a9d4 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/Bar1-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/Bar2-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/Bar2-dark.png new file mode 100644 index 00000000000..64b7cd02435 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/Bar2-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/Bar3-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/Bar3-dark.png new file mode 100644 index 00000000000..b284026af37 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/Bar3-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/thumbnail-dark.png new file mode 100644 index 00000000000..d533a049400 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/thumbnail-dark.png differ 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 index f2a91555502..8e846784c2c 100644 --- 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 @@ -27,9 +27,13 @@ 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/Bar1.png'; +import example1Dark from './images/Bar1-dark.png'; import example2 from './images/Bar2.png'; +import example2Dark from './images/Bar2-dark.png'; import example3 from './images/Bar3.png'; +import example3Dark from './images/Bar3-dark.png'; const barTransformProps = (chartProps: EchartsTimeseriesChartProps) => transformProps({ @@ -61,9 +65,9 @@ export default class EchartsTimeseriesBarChartPlugin extends EchartsChartPlugin< 'Bar Charts are used to show metrics as a series of bars.', ), exampleGallery: [ - { url: example1 }, - { url: example2 }, - { url: example3 }, + { url: example1, urlDark: example1Dark }, + { url: example2, urlDark: example2Dark }, + { url: example3, urlDark: example3Dark }, ], supportedAnnotationTypes: [ AnnotationType.Event, @@ -83,6 +87,7 @@ export default class EchartsTimeseriesBarChartPlugin extends EchartsChartPlugin< t('Featured'), ], thumbnail, + thumbnailDark, }, transformProps: barTransformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/images/Line1-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/images/Line1-dark.png new file mode 100644 index 00000000000..c7835b3e182 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/images/Line1-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/images/Line2-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/images/Line2-dark.png new file mode 100644 index 00000000000..bfbb188bd36 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/images/Line2-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/images/thumbnail-dark.png new file mode 100644 index 00000000000..6ed00c42846 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/images/thumbnail-dark.png differ 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 index d087b41b857..b74a879ed84 100644 --- 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 @@ -26,8 +26,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/Line1.png'; +import example1Dark from './images/Line1-dark.png'; import example2 from './images/Line2.png'; +import example2Dark from './images/Line2-dark.png'; import { EchartsChartPlugin } from '../../../types'; const lineTransformProps = (chartProps: EchartsTimeseriesChartProps) => @@ -59,7 +62,10 @@ export default class EchartsTimeseriesLineChartPlugin extends EchartsChartPlugin description: t( 'Line chart is used to visualize measurements taken over a given category. Line chart is a type of chart which displays information as a series of data points connected by straight line segments. It is a basic type of chart common in many fields.', ), - exampleGallery: [{ url: example1 }, { url: example2 }], + exampleGallery: [ + { url: example1, urlDark: example1Dark }, + { url: example2, urlDark: example2Dark }, + ], canBeAnnotationTypes: [AnnotationType.Timeseries], supportedAnnotationTypes: [ AnnotationType.Event, @@ -76,6 +82,7 @@ export default class EchartsTimeseriesLineChartPlugin extends EchartsChartPlugin t('Featured'), ], thumbnail, + thumbnailDark, }, transformProps: lineTransformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/images/Scatter1-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/images/Scatter1-dark.png new file mode 100644 index 00000000000..38824252bc5 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/images/Scatter1-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/images/thumbnail-dark.png new file mode 100644 index 00000000000..5c23de422a1 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/images/thumbnail-dark.png differ 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 index 0d29be05482..55cdf7362cb 100644 --- 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 @@ -26,7 +26,9 @@ 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/Scatter1.png'; +import example1Dark from './images/Scatter1-dark.png'; import { EchartsChartPlugin } from '../../../types'; const scatterTransformProps = (chartProps: EchartsTimeseriesChartProps) => @@ -58,7 +60,7 @@ export default class EchartsTimeseriesScatterChartPlugin extends EchartsChartPlu description: t( 'Scatter Plot has the horizontal axis in linear units, and the points are connected in order. It shows a statistical relationship between two variables.', ), - exampleGallery: [{ url: example1 }], + exampleGallery: [{ url: example1, urlDark: example1Dark }], supportedAnnotationTypes: [ AnnotationType.Event, AnnotationType.Formula, @@ -76,6 +78,7 @@ export default class EchartsTimeseriesScatterChartPlugin extends EchartsChartPlu t('Featured'), ], thumbnail, + thumbnailDark, }, transformProps: scatterTransformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/images/SmoothLine1-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/images/SmoothLine1-dark.png new file mode 100644 index 00000000000..456ab5849c1 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/images/SmoothLine1-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/images/thumbnail-dark.png new file mode 100644 index 00000000000..4502993d8fd Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts index b3fd174772c..8681530d66a 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts @@ -26,7 +26,9 @@ 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/SmoothLine1.png'; +import example1Dark from './images/SmoothLine1-dark.png'; import { EchartsChartPlugin } from '../../../types'; const smoothTransformProps = (chartProps: EchartsTimeseriesChartProps) => @@ -58,7 +60,7 @@ export default class EchartsTimeseriesSmoothLineChartPlugin extends EchartsChart description: t( 'Smooth-line is a variation of the line chart. Without angles and hard edges, Smooth-line sometimes looks smarter and more professional.', ), - exampleGallery: [{ url: example1 }], + exampleGallery: [{ url: example1, urlDark: example1Dark }], supportedAnnotationTypes: [ AnnotationType.Event, AnnotationType.Formula, @@ -75,6 +77,7 @@ export default class EchartsTimeseriesSmoothLineChartPlugin extends EchartsChart t('Transformable'), ], thumbnail, + thumbnailDark, }, transformProps: smoothTransformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/images/Step1-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/images/Step1-dark.png new file mode 100644 index 00000000000..44696596b9a Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/images/Step1-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/images/Step2-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/images/Step2-dark.png new file mode 100644 index 00000000000..49499f2c46d Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/images/Step2-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/images/thumbnail-dark.png new file mode 100644 index 00000000000..8515e959938 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts index 99d2c57101a..19bb8019e1d 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts @@ -22,8 +22,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/Step1.png'; +import example1Dark from './images/Step1-dark.png'; import example2 from './images/Step2.png'; +import example2Dark from './images/Step2-dark.png'; import { EchartsChartPlugin } from '../../types'; export default class EchartsTimeseriesStepChartPlugin extends EchartsChartPlugin< @@ -46,7 +49,10 @@ export default class EchartsTimeseriesStepChartPlugin extends EchartsChartPlugin description: t( 'Stepped-line graph (also called step chart) is a variation of line chart but with the line forming a series of steps between data points. A step chart can be useful when you want to show the changes that occur at irregular intervals.', ), - exampleGallery: [{ url: example1 }, { url: example2 }], + exampleGallery: [ + { url: example1, urlDark: example1Dark }, + { url: example2, urlDark: example2Dark }, + ], supportedAnnotationTypes: [ AnnotationType.Event, AnnotationType.Formula, @@ -63,6 +69,7 @@ export default class EchartsTimeseriesStepChartPlugin extends EchartsChartPlugin t('Stacked'), ], thumbnail, + thumbnailDark, }, transformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/images/Time-series_Chart-dark.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/images/Time-series_Chart-dark.jpg new file mode 100644 index 00000000000..1a969c48015 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/images/Time-series_Chart-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/images/thumbnail-dark.png new file mode 100644 index 00000000000..d2dc466cfd1 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts index 37b16796cb3..3e9b1781770 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts @@ -21,11 +21,13 @@ import buildQuery from './buildQuery'; import controlPanel from './Regular/Line/controlPanel'; import transformProps from './transformProps'; import thumbnail from './images/thumbnail.png'; +import thumbnailDark from './images/thumbnail-dark.png'; import { EchartsTimeseriesChartProps, EchartsTimeseriesFormData, } from './types'; import example from './images/Time-series_Chart.jpg'; +import exampleDark from './images/Time-series_Chart-dark.jpg'; import { EchartsChartPlugin } from '../types'; export default class EchartsTimeseriesChartPlugin extends EchartsChartPlugin< @@ -48,7 +50,7 @@ export default class EchartsTimeseriesChartPlugin extends EchartsChartPlugin< description: t( 'Swiss army knife for visualizing data. Choose between step, line, scatter, and bar charts. This viz type has many customization options as well.', ), - exampleGallery: [{ url: example }], + exampleGallery: [{ url: example, urlDark: exampleDark }], supportedAnnotationTypes: [ AnnotationType.Event, AnnotationType.Formula, @@ -65,6 +67,7 @@ export default class EchartsTimeseriesChartPlugin extends EchartsChartPlugin< t('Transformable'), ], thumbnail, + thumbnailDark, }, transformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/images/thumbnail-dark.png new file mode 100644 index 00000000000..cb0512c01c6 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/images/tree-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/images/tree-dark.png new file mode 100644 index 00000000000..4dc1c3d5a53 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/images/tree-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/index.ts index 49067c01737..c72655ec658 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/index.ts @@ -20,7 +20,9 @@ import { t } from '@superset-ui/core'; import controlPanel from './controlPanel'; import transformProps from './transformProps'; import thumbnail from './images/thumbnail.png'; +import thumbnailDark from './images/thumbnail-dark.png'; import example from './images/tree.png'; +import exampleDark from './images/tree-dark.png'; import buildQuery from './buildQuery'; import { EchartsChartPlugin } from '../types'; @@ -36,7 +38,7 @@ export default class EchartsTreeChartPlugin extends EchartsChartPlugin { description: t( 'Visualize multiple levels of hierarchy using a familiar tree-like structure.', ), - exampleGallery: [{ url: example }], + exampleGallery: [{ url: example, urlDark: exampleDark }], name: t('Tree Chart'), tags: [ t('Categorical'), @@ -47,6 +49,7 @@ export default class EchartsTreeChartPlugin extends EchartsChartPlugin { t('Featured'), ], thumbnail, + thumbnailDark, }, transformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/images/thumbnail-dark.png new file mode 100644 index 00000000000..5d49ea7f42d Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/images/treemap_v2_1-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/images/treemap_v2_1-dark.png new file mode 100644 index 00000000000..76e2a0e2250 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/images/treemap_v2_1-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/images/treemap_v2_2-dark.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/images/treemap_v2_2-dark.jpg new file mode 100644 index 00000000000..d6bcef4b0dd Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/images/treemap_v2_2-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/index.ts index b2347e987ca..cd9fc63447f 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/index.ts @@ -22,8 +22,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/treemap_v2_1.png'; +import example1Dark from './images/treemap_v2_1-dark.png'; import example2 from './images/treemap_v2_2.jpg'; +import example2Dark from './images/treemap_v2_2-dark.jpg'; import { EchartsTreemapChartProps, EchartsTreemapFormData } from './types'; import { EchartsChartPlugin } from '../types'; @@ -57,7 +60,10 @@ export default class EchartsTreemapChartPlugin extends EchartsChartPlugin< description: t( 'Show hierarchical relationships of data, with the value represented by area, showing proportion and contribution to the whole.', ), - exampleGallery: [{ url: example1 }, { url: example2 }], + exampleGallery: [ + { url: example1, urlDark: example1Dark }, + { url: example2, urlDark: example2Dark }, + ], name: t('Treemap'), tags: [ t('Categorical'), @@ -69,6 +75,7 @@ export default class EchartsTreemapChartPlugin extends EchartsChartPlugin< t('Featured'), ], thumbnail, + thumbnailDark, }, transformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/images/example1-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/images/example1-dark.png new file mode 100644 index 00000000000..072f1d759da Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/images/example1-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/images/example2-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/images/example2-dark.png new file mode 100644 index 00000000000..3726c125a38 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/images/example2-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/images/example3-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/images/example3-dark.png new file mode 100644 index 00000000000..b2dd53144f8 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/images/example3-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/images/thumbnail-dark.png new file mode 100644 index 00000000000..cce48375f9c Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts index acaccada18b..e66a86e70ab 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts @@ -22,9 +22,13 @@ 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 example2 from './images/example2.png'; import example3 from './images/example3.png'; +import example1Dark from './images/example1-dark.png'; +import example2Dark from './images/example2-dark.png'; +import example3Dark from './images/example3-dark.png'; import { EchartsWaterfallChartProps, EchartsWaterfallFormData } from './types'; // TODO: Implement cross filtering @@ -56,13 +60,14 @@ export default class EchartsWaterfallChartPlugin extends ChartPlugin< These intermediate values can either be time based or category based.`, ), exampleGallery: [ - { url: example1 }, - { url: example2 }, - { url: example3 }, + { url: example1, urlDark: example1Dark }, + { url: example2, urlDark: example2Dark }, + { url: example3, urlDark: example3Dark }, ], name: t('Waterfall Chart'), tags: [t('Categorical'), t('Comparison'), t('ECharts'), t('Featured')], thumbnail, + thumbnailDark, }), transformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-handlebars/src/images/example1-dark.jpg b/superset-frontend/plugins/plugin-chart-handlebars/src/images/example1-dark.jpg new file mode 100644 index 00000000000..e1d748eba42 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-handlebars/src/images/example1-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-handlebars/src/images/example2-dark.jpg b/superset-frontend/plugins/plugin-chart-handlebars/src/images/example2-dark.jpg new file mode 100644 index 00000000000..bba397d33f0 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-handlebars/src/images/example2-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-handlebars/src/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-handlebars/src/images/thumbnail-dark.png new file mode 100644 index 00000000000..342bc232064 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-handlebars/src/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/index.ts b/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/index.ts index 41249f2d716..556a51ca210 100644 --- a/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/index.ts +++ b/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/index.ts @@ -18,8 +18,11 @@ */ import { ChartMetadata, ChartPlugin, t } from '@superset-ui/core'; 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 buildQuery from './buildQuery'; import controlPanel from './controlPanel'; import transformProps from './transformProps'; @@ -40,7 +43,11 @@ 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 }], + thumbnailDark, + exampleGallery: [ + { url: example1, urlDark: example1Dark }, + { url: example2, urlDark: example2Dark }, + ], }); super({ diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/images/example-dark.jpg b/superset-frontend/plugins/plugin-chart-pivot-table/src/images/example-dark.jpg new file mode 100644 index 00000000000..d5664218b47 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-pivot-table/src/images/example-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-pivot-table/src/images/thumbnail-dark.png new file mode 100644 index 00000000000..318adfcd85e Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-pivot-table/src/images/thumbnail-dark.png differ 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 index 112145a9546..e1b5a497e06 100644 --- a/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/index.ts +++ b/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/index.ts @@ -28,7 +28,9 @@ 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 example from '../images/example.jpg'; +import exampleDark from '../images/example-dark.jpg'; import { PivotTableQueryFormData } from '../types'; export default class PivotTableChartPlugin extends ChartPlugin< @@ -56,10 +58,11 @@ export default class PivotTableChartPlugin extends ChartPlugin< description: t( 'Used to summarize a set of data by grouping together multiple statistics along two axes. Examples: Sales numbers by region and month, tasks by status and assignee, active users by age and location. Not the most visually stunning visualization, but highly informative and versatile.', ), - exampleGallery: [{ url: example }], + exampleGallery: [{ url: example, urlDark: exampleDark }], name: t('Pivot Table'), tags: [t('Additive'), t('Report'), t('Tabular'), t('Featured')], thumbnail, + thumbnailDark, }); super({ diff --git a/superset-frontend/plugins/plugin-chart-table/src/images/Table-dark.jpg b/superset-frontend/plugins/plugin-chart-table/src/images/Table-dark.jpg new file mode 100644 index 00000000000..e1b631aa721 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-table/src/images/Table-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-table/src/images/Table2-dark.jpg b/superset-frontend/plugins/plugin-chart-table/src/images/Table2-dark.jpg new file mode 100644 index 00000000000..4339ebac69b Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-table/src/images/Table2-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-table/src/images/Table3-dark.jpg b/superset-frontend/plugins/plugin-chart-table/src/images/Table3-dark.jpg new file mode 100644 index 00000000000..c4d7b9a2df5 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-table/src/images/Table3-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-table/src/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-table/src/images/thumbnail-dark.png new file mode 100644 index 00000000000..919eaa2118e Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-table/src/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-table/src/index.ts b/superset-frontend/plugins/plugin-chart-table/src/index.ts index 7f917258a8a..45cf7d8084f 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/index.ts +++ b/superset-frontend/plugins/plugin-chart-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'), tags: [ t('Additive'), @@ -53,6 +61,7 @@ const metadata = new ChartMetadata({ t('Tabular'), ], thumbnail, + thumbnailDark, }); export default class TableChartPlugin extends ChartPlugin< diff --git a/superset-frontend/plugins/plugin-chart-word-cloud/src/images/Word_Cloud-dark.jpg b/superset-frontend/plugins/plugin-chart-word-cloud/src/images/Word_Cloud-dark.jpg new file mode 100644 index 00000000000..ebf95ff8eba Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-word-cloud/src/images/Word_Cloud-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-word-cloud/src/images/Word_Cloud_2-dark.jpg b/superset-frontend/plugins/plugin-chart-word-cloud/src/images/Word_Cloud_2-dark.jpg new file mode 100644 index 00000000000..74ce97fd17c Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-word-cloud/src/images/Word_Cloud_2-dark.jpg differ diff --git a/superset-frontend/plugins/plugin-chart-word-cloud/src/images/thumbnail-dark.png b/superset-frontend/plugins/plugin-chart-word-cloud/src/images/thumbnail-dark.png new file mode 100644 index 00000000000..875f2b34043 Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-word-cloud/src/images/thumbnail-dark.png differ diff --git a/superset-frontend/plugins/plugin-chart-word-cloud/src/plugin/index.ts b/superset-frontend/plugins/plugin-chart-word-cloud/src/plugin/index.ts index 371727bc9a4..d7cb0ebdfa6 100644 --- a/superset-frontend/plugins/plugin-chart-word-cloud/src/plugin/index.ts +++ b/superset-frontend/plugins/plugin-chart-word-cloud/src/plugin/index.ts @@ -22,8 +22,11 @@ import transformProps from './transformProps'; import buildQuery from './buildQuery'; import { WordCloudFormData } from '../types'; import thumbnail from '../images/thumbnail.png'; +import thumbnailDark from '../images/thumbnail-dark.png'; import example1 from '../images/Word_Cloud.jpg'; +import example1Dark from '../images/Word_Cloud-dark.jpg'; import example2 from '../images/Word_Cloud_2.jpg'; +import example2Dark from '../images/Word_Cloud_2-dark.jpg'; import controlPanel from './controlPanel'; import configureEncodable from '../configureEncodable'; @@ -35,10 +38,14 @@ const metadata = new ChartMetadata({ description: t( 'Visualizes the words in a column that appear the most often. Bigger font corresponds to higher frequency.', ), - exampleGallery: [{ url: example1 }, { url: example2 }], + exampleGallery: [ + { url: example1, urlDark: example1Dark }, + { url: example2, urlDark: example2Dark }, + ], name: t('Word Cloud'), tags: [t('Categorical'), t('Comparison'), t('Density'), t('Single Metric')], thumbnail, + thumbnailDark, }); export default class WordCloudChartPlugin extends ChartPlugin { diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx index e9a189539ba..a9feb694432 100644 --- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx +++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx @@ -38,6 +38,7 @@ import { useTheme, chartLabelWeight, chartLabelExplanations, + isThemeDark, } from '@superset-ui/core'; import { Input, Collapse, Tooltip, Label } from '@superset-ui/core/components'; import { Icons } from '@superset-ui/core/components/Icons'; @@ -259,6 +260,7 @@ const Examples = styled.div` height: 100%; border-radius: ${({ theme }) => theme.borderRadius}px; border: 1px solid ${({ theme }) => theme.colorBorder}; + background-color: ${({ theme }) => theme.colorBgContainer}; } `; @@ -266,6 +268,7 @@ const thumbnailContainerCss = (theme: SupersetTheme) => css` cursor: pointer; width: ${theme.sizeUnit * THUMBNAIL_GRID_UNITS}px; position: relative; + outline: none; /* Remove focus outline to show only selected state */ img { min-width: ${theme.sizeUnit * THUMBNAIL_GRID_UNITS}px; @@ -273,6 +276,7 @@ const thumbnailContainerCss = (theme: SupersetTheme) => css` border: 1px solid ${theme.colorBorder}; border-radius: ${theme.borderRadius}px; transition: border-color ${theme.motionDurationMid}; + background-color: ${theme.colorBgContainer}; } &.selected img { @@ -334,9 +338,22 @@ const Thumbnail: FC = ({ onDoubleClick, }) => { const theme = useTheme(); + const isDarkMode = isThemeDark(theme); const { key, value: type } = entry; const isSelected = selectedViz === entry.key; + const handleKeyDown = (event: React.KeyboardEvent) => { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + setSelectedViz(key); + } + }; + + const handleFocus = () => { + // Auto-select chart when tabbed to + setSelectedViz(key); + }; + return (
= ({ className={isSelected ? 'selected' : ''} onClick={() => setSelectedViz(key)} onDoubleClick={onDoubleClick} + onKeyDown={handleKeyDown} + onFocus={handleFocus} data-test="viztype-selector-container" > {type.name}
(viz.tags || []).indexOf(selector) > -1; export default function VizTypeGallery(props: VizTypeGalleryProps) { + const theme = useTheme(); + const isDarkMode = isThemeDark(theme); const { selectedViz, onChange, onDoubleClick, className, denyList } = props; const { mountedPluginMetadata } = usePluginContext(); const searchInputRef = useRef(); @@ -837,7 +860,11 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) { ).map(example => ( {example.caption} diff --git a/superset-frontend/src/theme/tests/ThemeController.test.ts b/superset-frontend/src/theme/tests/ThemeController.test.ts index ae5d66e7b09..e0ed88aa522 100644 --- a/superset-frontend/src/theme/tests/ThemeController.test.ts +++ b/superset-frontend/src/theme/tests/ThemeController.test.ts @@ -320,8 +320,18 @@ describe('ThemeController', () => { }), ); + // Provide an explicit light theme fallback for this test + const lightThemeFallback = { + token: { + colorBgBase: '#fff', + colorTextBase: '#000', + colorPrimary: '#1890ff', + }, + }; + controller = new ThemeController({ themeObject: mockThemeObject, + defaultTheme: lightThemeFallback, }); // When only dark theme is available, controller uses the default fallback theme initially @@ -330,8 +340,8 @@ describe('ThemeController', () => { const calledWith = mockSetConfig.mock.calls[0][0]; // Should use the default theme fallback (not dark) for initial load - expect(calledWith.colorBgBase).toBe('#fff'); - expect(calledWith.colorTextBase).toBe('#000'); + expect(calledWith.token.colorBgBase).toBe('#fff'); + expect(calledWith.token.colorTextBase).toBe('#000'); // Should allow mode changes since dark theme exists expect(controller.canSetMode()).toBe(true); @@ -548,6 +558,41 @@ describe('ThemeController', () => { expect(mockSetConfig).toHaveBeenCalledTimes(initialCallCount); }); + + it('should switch to dark theme when system is dark and mode is SYSTEM', () => { + // Setup with both light and dark themes available + mockGetBootstrapData.mockReturnValue( + createMockBootstrapData({ + default: DEFAULT_THEME, + dark: DARK_THEME, + }), + ); + + // Setup mock media query to return dark mode preference + const mockMediaQueryDark = { + matches: true, // System is in dark mode + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + }; + mockMatchMedia.mockReturnValue(mockMediaQueryDark); + + // Create fresh controller instance with dark system preference + controller = new ThemeController({ + themeObject: mockThemeObject, + }); + + // Verify system mode is set by default + expect(controller.getCurrentMode()).toBe(ThemeMode.SYSTEM); + + // Verify that dark theme was applied during initialization + expect(mockSetConfig).toHaveBeenCalled(); + const lastCall = + mockSetConfig.mock.calls[mockSetConfig.mock.calls.length - 1][0]; + expect(lastCall.token.colorBgBase).toBe(DARK_THEME.token!.colorBgBase); + expect(lastCall.token.colorTextBase).toBe( + DARK_THEME.token!.colorTextBase, + ); + }); }); describe('Persistence', () => { diff --git a/superset-frontend/src/visualizations/TimeTable/images/example-dark.jpg b/superset-frontend/src/visualizations/TimeTable/images/example-dark.jpg new file mode 100644 index 00000000000..a2a3a37d1f5 Binary files /dev/null and b/superset-frontend/src/visualizations/TimeTable/images/example-dark.jpg differ diff --git a/superset-frontend/src/visualizations/TimeTable/images/thumbnail-dark.png b/superset-frontend/src/visualizations/TimeTable/images/thumbnail-dark.png new file mode 100644 index 00000000000..3fbb00adc29 Binary files /dev/null and b/superset-frontend/src/visualizations/TimeTable/images/thumbnail-dark.png differ diff --git a/superset-frontend/src/visualizations/TimeTable/index.ts b/superset-frontend/src/visualizations/TimeTable/index.ts index c3a4899e607..a407fa58da4 100644 --- a/superset-frontend/src/visualizations/TimeTable/index.ts +++ b/superset-frontend/src/visualizations/TimeTable/index.ts @@ -19,7 +19,9 @@ import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core'; import { transformProps, controlPanel } from './config'; 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'; const metadata = new ChartMetadata({ category: t('Table'), @@ -27,7 +29,7 @@ const metadata = new ChartMetadata({ description: t( 'Compare multiple time series charts (as sparklines) and related metrics quickly.', ), - exampleGallery: [{ url: example }], + exampleGallery: [{ url: example, urlDark: exampleDark }], tags: [ t('Multi-Variables'), t('Comparison'), @@ -38,6 +40,7 @@ const metadata = new ChartMetadata({ t('Trend'), ], thumbnail, + thumbnailDark, useLegacyApi: true, });