Merge branch 'master' into msyavuz/chore/react-18

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx

@@ -18,14 +18,12 @@
  */
 import { useEffect, useMemo, useState } from 'react';
 import {
-  css,
   ensureIsArray,
   fetchTimeRange,
   getTimeOffset,
-  styled,
   t,
-  useTheme,
 } from '@superset-ui/core';
+import { css, styled, useTheme } from '@apache-superset/core/ui';
 import { Tooltip } from '@superset-ui/core/components';
 import { DEFAULT_DATE_PATTERN } from '@superset-ui/chart-controls';
 import { isEmpty } from 'lodash';

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/controlPanel.ts

@@ -16,7 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, GenericDataType } from '@superset-ui/core';
+import { t } from '@superset-ui/core';
+import { GenericDataType } from '@apache-superset/core/api/core';
 import {
   ControlPanelConfig,
   getStandardizedControls,

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({

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts

@@ -16,8 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
 import { Metric } from '@superset-ui/chart-controls';
 import {
   ChartProps,
@@ -27,6 +25,8 @@ import {
   SimpleAdhocFilter,
   ensureIsArray,
 } from '@superset-ui/core';
+import { extendedDayjs as dayjs } from '@superset-ui/core/utils/dates';
+import 'dayjs/plugin/utc';
 import {
   getComparisonFontSize,
   getHeaderFontSize,
@@ -35,8 +35,6 @@ import {
 
 import { getOriginalLabel } from '../utils';
 
-dayjs.extend(utc);
-
 export const parseMetricValue = (metricValue: number | string | null) => {
   if (typeof metricValue === 'string') {
     const dateObject = dayjs.utc(metricValue, undefined, true);

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts

@@ -16,7 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { GenericDataType, SMART_DATE_ID, t } from '@superset-ui/core';
+import { SMART_DATE_ID, t } from '@superset-ui/core';
+import { GenericDataType } from '@apache-superset/core/api/core';
 import {
   ControlPanelConfig,
   D3_FORMAT_DOCS,

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],
 };
 

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.test.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { GenericDataType } from '@superset-ui/core';
+import { GenericDataType } from '@apache-superset/core/api/core';
 import { getColorFormatters } from '@superset-ui/chart-controls';
 import { BigNumberTotalChartProps } from '../types';
 import transformProps from './transformProps';

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts

@@ -22,12 +22,12 @@ import {
   Metric,
 } from '@superset-ui/chart-controls';
 import {
-  GenericDataType,
   getMetricLabel,
   extractTimegrain,
   QueryFormData,
   getValueFormatter,
 } from '@superset-ui/core';
+import { GenericDataType } from '@apache-superset/core/api/core';
 import { BigNumberTotalChartProps, BigNumberVizProps } from '../types';
 import { getDateFormatter, getOriginalLabel, parseMetricValue } from '../utils';
 import { Refs } from '../../types';
@@ -43,6 +43,7 @@ export default function transformProps(
     rawFormData,
     hooks,
     datasource: { currencyFormats = {}, columnFormats = {} },
+    theme,
   } = chartProps;
   const {
     metricNameFontSize,
@@ -105,7 +106,7 @@ export default function transformProps(
   const defaultColorFormatters = [] as ColorFormatters;
 
   const colorThresholdFormatters =
-    getColorFormatters(conditionalFormatting, data, false) ??
+    getColorFormatters(conditionalFormatting, data, theme, false) ??
     defaultColorFormatters;
   return {
     width,

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx

@@ -24,10 +24,9 @@ import {
   SMART_DATE_VERBOSE_ID,
   computeMaxFontSize,
   BRAND_COLOR,
-  styled,
   BinaryQueryObjectFilterClause,
-  useTheme,
 } from '@superset-ui/core';
+import { styled, useTheme } from '@apache-superset/core/ui';
 import Echart from '../components/Echart';
 import { BigNumberVizProps } from './types';
 import { EventHandlers } from '../types';

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],
 };
 

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.test.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { GenericDataType } from '@superset-ui/core';
+import { GenericDataType } from '@apache-superset/core/api/core';
 import transformProps from './transformProps';
 import { BigNumberWithTrendlineChartProps, BigNumberDatum } from '../types';
 

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts

@@ -20,15 +20,14 @@ import {
   extractTimegrain,
   getNumberFormatter,
   NumberFormats,
-  GenericDataType,
   getMetricLabel,
   getXAxisLabel,
   Metric,
   getValueFormatter,
-  supersetTheme,
   t,
   tooltipHtml,
 } from '@superset-ui/core';
+import { GenericDataType } from '@apache-superset/core/api/core';
 import { EChartsCoreOption, graphic } from 'echarts/core';
 import { aggregationChoices } from '@superset-ui/chart-controls';
 import {
@@ -81,6 +80,7 @@ export default function transformProps(
     rawFormData,
     hooks,
     inContextMenu,
+    theme,
     datasource: { currencyFormats = {}, columnFormats = {} },
   } = chartProps;
   const {
@@ -281,7 +281,7 @@ export default function transformProps(
                 },
                 {
                   offset: 1,
-                  color: supersetTheme.colorBgContainer,
+                  color: theme.colorBgContainer,
                 },
               ]),
             },

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/utils.ts

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import {
   getTimeFormatter,
@@ -29,6 +28,7 @@ import {
   SMART_DATE_ID,
   TimeGranularity,
 } from '@superset-ui/core';
+import { extendedDayjs as dayjs } from '@superset-ui/core/utils/dates';
 
 dayjs.extend(utc);
 

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,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Bubble/EchartsBubble.tsx

@@ -20,13 +20,14 @@ import { BubbleChartTransformedProps } from './types';
 import Echart from '../components/Echart';
 
 export default function EchartsBubble(props: BubbleChartTransformedProps) {
-  const { height, width, echartOptions, refs } = props;
+  const { height, width, echartOptions, refs, formData } = props;
   return (
     <Echart
       height={height}
       width={width}
       echartOptions={echartOptions}
       refs={refs}
+      vizType={formData.vizType}
     />
   );
 }

superset-frontend/plugins/plugin-chart-echarts/src/Bubble/controlPanel.tsx

@@ -142,7 +142,7 @@ const config: ControlPanelConfig = {
               type: 'SelectControl',
               freeForm: true,
               clearable: true,
-              label: t('X AXIS TITLE MARGIN'),
+              label: t('X axis title margin'),
               renderTrigger: true,
               default: sections.TITLE_MARGIN_OPTIONS[1],
               choices: formatSelectOptions(sections.TITLE_MARGIN_OPTIONS),
@@ -214,7 +214,7 @@ const config: ControlPanelConfig = {
               type: 'SelectControl',
               freeForm: true,
               clearable: true,
-              label: t('Y AXIS TITLE MARGIN'),
+              label: t('Y axis title margin'),
               renderTrigger: true,
               default: sections.TITLE_MARGIN_OPTIONS[1],
               choices: formatSelectOptions(sections.TITLE_MARGIN_OPTIONS),

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,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Funnel/EchartsFunnel.tsx

@@ -21,7 +21,8 @@ import Echart from '../components/Echart';
 import { allEventHandlers } from '../utils/eventHandlers';
 
 export default function EchartsFunnel(props: FunnelChartTransformedProps) {
-  const { height, width, echartOptions, selectedValues, refs } = props;
+  const { height, width, echartOptions, selectedValues, refs, formData } =
+    props;
 
   const eventHandlers = allEventHandlers(props);
 
@@ -33,6 +34,7 @@ export default function EchartsFunnel(props: FunnelChartTransformedProps) {
       echartOptions={echartOptions}
       eventHandlers={eventHandlers}
       selectedValues={selectedValues}
+      vizType={formData.vizType}
     />
   );
 }

superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx

@@ -19,7 +19,6 @@
 import { t } from '@superset-ui/core';
 import {
   ControlPanelConfig,
-  ControlStateMapping,
   ControlSubSectionHeader,
   D3_FORMAT_DOCS,
   D3_FORMAT_OPTIONS,
@@ -197,15 +196,6 @@ const config: ControlPanelConfig = {
       ],
     },
   ],
-  onInit(state: ControlStateMapping) {
-    return {
-      ...state,
-      row_limit: {
-        ...state.row_limit,
-        value: state.row_limit.default,
-      },
-    };
-  },
   formDataOverrides: formData => ({
     ...formData,
     metric: getStandardizedControls().shiftMetric(),

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,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Gantt/controlPanel.tsx

@@ -22,7 +22,8 @@ import {
   sections,
   sharedControls,
 } from '@superset-ui/chart-controls';
-import { GenericDataType, t } from '@superset-ui/core';
+import { t } from '@superset-ui/core';
+import { GenericDataType } from '@apache-superset/core/api/core';
 import {
   legendSection,
   showExtraControls,
@@ -95,7 +96,7 @@ const config: ControlPanelConfig = {
     },
     {
       ...sections.titleControls,
-      controlSetRows: [...sections.titleControls.controlSetRows.slice(0, -1)],
+      controlSetRows: sections.titleControls.controlSetRows.slice(0, -1),
     },
     {
       label: t('Chart Options'),
@@ -106,7 +107,11 @@ const config: ControlPanelConfig = {
         ...legendSection,
         ['zoomable'],
         [showExtraControls],
-        [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
+        [
+          <ControlSubSectionHeader key="x-axis">
+            {t('X Axis')}
+          </ControlSubSectionHeader>,
+        ],
         [
           {
             name: 'x_axis_time_bounds',
@@ -125,7 +130,11 @@ const config: ControlPanelConfig = {
           },
         ],
         ['x_axis_time_format'],
-        [<ControlSubSectionHeader>{t('Tooltip')}</ControlSubSectionHeader>],
+        [
+          <ControlSubSectionHeader key="tooltip">
+            {t('Tooltip')}
+          </ControlSubSectionHeader>,
+        ],
         [tooltipTimeFormatControl],
         [tooltipValuesFormatControl],
       ],

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,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Gantt/transformProps.ts

@@ -27,14 +27,14 @@ import {
   CategoricalColorNamespace,
   DataRecord,
   DataRecordValue,
-  GenericDataType,
   getColumnLabel,
   getNumberFormatter,
   t,
   tooltipHtml,
 } from '@superset-ui/core';
+import { extendedDayjs as dayjs } from '@superset-ui/core/utils/dates';
+import { GenericDataType } from '@apache-superset/core/api/core';
 import { CallbackDataParams } from 'echarts/types/src/util/types';
-import dayjs from 'dayjs';
 import {
   Cartesian2dCoordSys,
   EchartsGanttChartProps,
@@ -325,6 +325,7 @@ export default function transformProps(chartProps: EchartsGanttChartProps) {
           show: true,
           position: 'start',
           formatter: '{b}',
+          color: theme.colorText,
         },
         data: categoryLines,
       },

superset-frontend/plugins/plugin-chart-echarts/src/Gauge/EchartsGauge.tsx

@@ -21,7 +21,8 @@ import Echart from '../components/Echart';
 import { allEventHandlers } from '../utils/eventHandlers';
 
 export default function EchartsGauge(props: GaugeChartTransformedProps) {
-  const { height, width, echartOptions, selectedValues, refs } = props;
+  const { height, width, echartOptions, selectedValues, refs, formData } =
+    props;
 
   const eventHandlers = allEventHandlers(props);
 
@@ -33,6 +34,7 @@ export default function EchartsGauge(props: GaugeChartTransformedProps) {
       echartOptions={echartOptions}
       eventHandlers={eventHandlers}
       selectedValues={selectedValues}
+      vizType={formData.vizType}
     />
   );
 }

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

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { SupersetTheme } from '@superset-ui/core';
+import { SupersetTheme } from '@apache-superset/core/ui';
 import type { GaugeSeriesOption } from 'echarts/charts';
 
 export const defaultGaugeSeriesOption = (

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,
     });

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,

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 {

superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts

@@ -17,7 +17,6 @@
  * under the License.
  */
 import {
-  GenericDataType,
   NumberFormats,
   QueryFormColumn,
   getColumnLabel,
@@ -27,9 +26,9 @@ import {
   getValueFormatter,
   rgbToHex,
   addAlpha,
-  supersetTheme,
   tooltipHtml,
 } from '@superset-ui/core';
+import { GenericDataType } from '@apache-superset/core/api/core';
 import memoizeOne from 'memoize-one';
 import { maxBy, minBy } from 'lodash';
 import type { ComposeOption } from 'echarts/core';
@@ -78,7 +77,8 @@ export default function transformProps(
   chartProps: HeatmapChartProps,
 ): HeatmapTransformedProps {
   const refs: Refs = {};
-  const { width, height, formData, queriesData, datasource } = chartProps;
+  const { width, height, formData, queriesData, datasource, theme } =
+    chartProps;
   const {
     bottomMargin,
     xAxis,
@@ -176,9 +176,9 @@ export default function transformProps(
       },
       emphasis: {
         itemStyle: {
-          borderColor: supersetTheme.colorBgContainer,
+          borderColor: 'transparent',
           shadowBlur: 10,
-          shadowColor: supersetTheme.colorTextBase,
+          shadowColor: addAlpha(theme.colorText, 0.3),
         },
       },
     },

superset-frontend/plugins/plugin-chart-echarts/src/Histogram/controlPanel.tsx

@@ -16,12 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  GenericDataType,
-  t,
-  validateInteger,
-  validateNonEmpty,
-} from '@superset-ui/core';
+import { t, validateInteger, validateNonEmpty } from '@superset-ui/core';
+import { GenericDataType } from '@apache-superset/core/api/core';
 import {
   ControlPanelConfig,
   formatSelectOptionsForRange,

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,
     });

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx

@@ -79,23 +79,21 @@ export default function EchartsMixedTimeseries({
             filters:
               values.length === 0
                 ? []
-                : [
-                    ...currentGroupBy.map((col, idx) => {
-                      const val: DataRecordValue[] = groupbyValues.map(
-                        v => v[idx],
-                      );
-                      if (val === null || val === undefined)
-                        return {
-                          col,
-                          op: 'IS NULL' as const,
-                        };
+                : currentGroupBy.map((col, idx) => {
+                    const val: DataRecordValue[] = groupbyValues.map(
+                      v => v[idx],
+                    );
+                    if (val === null || val === undefined)
                       return {
                         col,
-                        op: 'IN' as const,
-                        val: val as (string | number | boolean)[],
+                        op: 'IS NULL' as const,
                       };
-                    }),
-                  ],
+                    return {
+                      col,
+                      op: 'IN' as const,
+                      val: val as (string | number | boolean)[],
+                    };
+                  }),
           },
           filterState: {
             value: !groupbyValues.length ? null : groupbyValues,

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'),

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts

@@ -25,7 +25,6 @@ import {
   CategoricalColorNamespace,
   CurrencyFormatter,
   ensureIsArray,
-  GenericDataType,
   getCustomFormatter,
   getNumberFormatter,
   getXAxisLabel,
@@ -42,6 +41,7 @@ import {
   tooltipHtml,
   ValueFormatter,
 } from '@superset-ui/core';
+import { GenericDataType } from '@apache-superset/core/api/core';
 import { getOriginalSeries } from '@superset-ui/chart-controls';
 import type { EChartsCoreOption } from 'echarts/core';
 import type { SeriesOption } from 'echarts';
@@ -322,12 +322,6 @@ export default function transformProps(
       primarySeries.add(seriesOption.id as string);
     }
   };
-  rawSeriesA.forEach(seriesOption =>
-    mapSeriesIdToAxis(seriesOption, yAxisIndex),
-  );
-  rawSeriesB.forEach(seriesOption =>
-    mapSeriesIdToAxis(seriesOption, yAxisIndexB),
-  );
   const showValueIndexesA = extractShowValueIndexes(rawSeriesA, {
     stack,
     onlyTotal,
@@ -460,7 +454,11 @@ export default function transformProps(
         theme,
       },
     );
-    if (transformedSeries) series.push(transformedSeries);
+
+    if (transformedSeries) {
+      series.push(transformedSeries);
+      mapSeriesIdToAxis(transformedSeries, yAxisIndex);
+    }
   });
 
   rawSeriesB.forEach(entry => {
@@ -528,7 +526,11 @@ export default function transformProps(
         theme,
       },
     );
-    if (transformedSeries) series.push(transformedSeries);
+
+    if (transformedSeries) {
+      series.push(transformedSeries);
+      mapSeriesIdToAxis(transformedSeries, yAxisIndexB);
+    }
   });
 
   // default to 0-100% range when doing row-level contribution chart

superset-frontend/plugins/plugin-chart-echarts/src/Pie/EchartsPie.tsx

@@ -21,7 +21,8 @@ import Echart from '../components/Echart';
 import { allEventHandlers } from '../utils/eventHandlers';
 
 export default function EchartsPie(props: PieChartTransformedProps) {
-  const { height, width, echartOptions, selectedValues, refs } = props;
+  const { height, width, echartOptions, selectedValues, refs, formData } =
+    props;
 
   const eventHandlers = allEventHandlers(props);
 
@@ -33,6 +34,7 @@ export default function EchartsPie(props: PieChartTransformedProps) {
       echartOptions={echartOptions}
       eventHandlers={eventHandlers}
       selectedValues={selectedValues}
+      vizType={formData.vizType}
     />
   );
 }

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,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Radar/EchartsRadar.tsx

@@ -21,7 +21,8 @@ import Echart from '../components/Echart';
 import { allEventHandlers } from '../utils/eventHandlers';
 
 export default function EchartsRadar(props: RadarChartTransformedProps) {
-  const { height, width, echartOptions, selectedValues, refs } = props;
+  const { height, width, echartOptions, selectedValues, refs, formData } =
+    props;
   const eventHandlers = allEventHandlers(props);
 
   return (
@@ -32,6 +33,7 @@ export default function EchartsRadar(props: RadarChartTransformedProps) {
       echartOptions={echartOptions}
       eventHandlers={eventHandlers}
       selectedValues={selectedValues}
+      vizType={formData.vizType}
     />
   );
 }

superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx

@@ -18,11 +18,11 @@
  */
 import {
   ChartDataResponseResult,
-  GenericDataType,
   QueryFormMetric,
   t,
   validateNumber,
 } from '@superset-ui/core';
+import { GenericDataType } from '@apache-superset/core/api/core';
 import {
   ControlPanelConfig,
   ControlSubSectionHeader,

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,
     });

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,
     });

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,
     });

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,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx

@@ -282,6 +282,7 @@ export default function EchartsTimeseries({
         eventHandlers={eventHandlers}
         zrEventHandlers={zrEventHandlers}
         selectedValues={selectedValues}
+        vizType={formData.vizType}
       />
     </>
   );

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx

@@ -81,7 +81,7 @@ function createAxisTitleControl(axis: 'x' | 'y'): ControlSetRow[] {
           type: 'SelectControl',
           freeForm: true,
           clearable: true,
-          label: t('AXIS TITLE MARGIN'),
+          label: t('Axis title margin'),
           renderTrigger: true,
           default: sections.TITLE_MARGIN_OPTIONS[0],
           choices: formatSelectOptions(sections.TITLE_MARGIN_OPTIONS),
@@ -114,7 +114,7 @@ function createAxisTitleControl(axis: 'x' | 'y'): ControlSetRow[] {
           type: 'SelectControl',
           freeForm: true,
           clearable: true,
-          label: t('AXIS TITLE MARGIN'),
+          label: t('Axis title margin'),
           renderTrigger: true,
           default: sections.TITLE_MARGIN_OPTIONS[1],
           choices: formatSelectOptions(sections.TITLE_MARGIN_OPTIONS),
@@ -132,7 +132,7 @@ function createAxisTitleControl(axis: 'x' | 'y'): ControlSetRow[] {
           type: 'SelectControl',
           freeForm: true,
           clearable: false,
-          label: t('AXIS TITLE POSITION'),
+          label: t('Axis title position'),
           renderTrigger: true,
           default: sections.TITLE_POSITION_OPTIONS[0][0],
           choices: sections.TITLE_POSITION_OPTIONS,

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,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/controlPanel.tsx

@@ -27,7 +27,6 @@ import {
   sharedControls,
 } from '@superset-ui/chart-controls';
 
-import { EchartsTimeseriesSeriesType } from '../../types';
 import {
   DEFAULT_FORM_DATA,
   TIME_SERIES_DESCRIPTION_TEXT,
@@ -53,7 +52,6 @@ const {
   minorSplitLine,
   opacity,
   rowLimit,
-  seriesType,
   truncateYAxis,
   yAxisBounds,
 } = DEFAULT_FORM_DATA;
@@ -71,27 +69,6 @@ const config: ControlPanelConfig = {
         ...seriesOrderSection,
         ['color_scheme'],
         ['time_shift_color'],
-        [
-          {
-            name: 'seriesType',
-            config: {
-              type: 'SelectControl',
-              label: t('Series Style'),
-              renderTrigger: true,
-              default: seriesType,
-              choices: [
-                [EchartsTimeseriesSeriesType.Line, t('Line')],
-                [EchartsTimeseriesSeriesType.Scatter, t('Scatter')],
-                [EchartsTimeseriesSeriesType.Smooth, t('Smooth Line')],
-                [EchartsTimeseriesSeriesType.Bar, t('Bar')],
-                [EchartsTimeseriesSeriesType.Start, t('Step - start')],
-                [EchartsTimeseriesSeriesType.Middle, t('Step - middle')],
-                [EchartsTimeseriesSeriesType.End, t('Step - end')],
-              ],
-              description: t('Series chart type (line, bar etc)'),
-            },
-          },
-        ],
         ...showValueSection,
         [
           {

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,
     });