chore: Adds theme object to chart properties (#19951)

superset-frontend/packages/superset-ui-core/src/chart/components/SuperChart.tsx

@@ -24,6 +24,7 @@ import ErrorBoundary, {
 } from 'react-error-boundary';
 import { ParentSize } from '@vx/responsive';
 import { createSelector } from 'reselect';
+import { withTheme } from '@emotion/react';
 import { parseLength, Dimension } from '../../dimension';
 import SuperChartCore, { Props as SuperChartCoreProps } from './SuperChartCore';
 import DefaultFallbackComponent from './FallbackComponent';
@@ -88,7 +89,7 @@ export type Props = Omit<SuperChartCoreProps, 'chartProps'> &
 
 type PropsWithDefault = Props & Readonly<typeof defaultProps>;
 
-export default class SuperChart extends React.PureComponent<Props, {}> {
+class SuperChart extends React.PureComponent<Props, {}> {
   /**
    * SuperChart's core
    */
@@ -156,6 +157,7 @@ export default class SuperChart extends React.PureComponent<Props, {}> {
       queriesData,
       enableNoResults,
       noResults,
+      theme,
       ...rest
     } = this.props as PropsWithDefault;
 
@@ -164,6 +166,7 @@ export default class SuperChart extends React.PureComponent<Props, {}> {
       queriesData,
       height,
       width,
+      theme,
     });
 
     let chart;
@@ -247,3 +250,5 @@ export default class SuperChart extends React.PureComponent<Props, {}> {
     return this.renderChart(widthInfo.value, heightInfo.value);
   }
 }
+
+export default withTheme(SuperChart);

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

@@ -32,6 +32,7 @@ import {
 } from '../..';
 import { HandlerFunction, PlainObject, SetDataMaskHook } from '../types/Base';
 import { QueryData, DataRecordFilters } from '..';
+import { SupersetTheme } from '../../style';
 
 // TODO: more specific typing for these fields of ChartProps
 type AnnotationData = PlainObject;
@@ -93,6 +94,8 @@ export interface ChartPropsConfig {
   isRefreshing?: boolean;
   /** chart ref */
   inputRef?: RefObject<any>;
+  /** Theme object */
+  theme: SupersetTheme;
 }
 
 const DEFAULT_WIDTH = 800;
@@ -133,6 +136,8 @@ export default class ChartProps<FormData extends RawFormData = RawFormData> {
 
   inputRef?: RefObject<any>;
 
+  theme: SupersetTheme;
+
   constructor(config: ChartPropsConfig & { formData?: FormData } = {}) {
     const {
       annotationData = {},
@@ -149,6 +154,7 @@ export default class ChartProps<FormData extends RawFormData = RawFormData> {
       appSection,
       isRefreshing,
       inputRef,
+      theme,
     } = config;
     this.width = width;
     this.height = height;
@@ -166,6 +172,7 @@ export default class ChartProps<FormData extends RawFormData = RawFormData> {
     this.appSection = appSection;
     this.isRefreshing = isRefreshing;
     this.inputRef = inputRef;
+    this.theme = theme;
   }
 }
 
@@ -186,6 +193,7 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
     input => input.appSection,
     input => input.isRefreshing,
     input => input.inputRef,
+    input => input.theme,
     (
       annotationData,
       datasource,
@@ -201,6 +209,7 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
       appSection,
       isRefreshing,
       inputRef,
+      theme,
     ) =>
       new ChartProps({
         annotationData,
@@ -217,6 +226,7 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
         appSection,
         isRefreshing,
         inputRef,
+        theme,
       }),
   );
 };

superset-frontend/packages/superset-ui-core/test/chart/components/SuperChart.test.tsx

@@ -29,9 +29,7 @@ import {
   ThemeProvider,
 } from '@superset-ui/core';
 import { mount as enzymeMount } from 'enzyme';
-import RealSuperChart, {
+import { WrapperProps } from '../../../src/chart/components/SuperChart';
-  WrapperProps,
-} from '../../../src/chart/components/SuperChart';
 import NoResultsComponent from '../../../src/chart/components/NoResultsComponent';
 
 import {
@@ -111,9 +109,8 @@ describe('SuperChart', () => {
       expectedErrors = 0;
     });
 
-    it('renders default FallbackComponent', () => {
+    it('renders default FallbackComponent', async () => {
       expectedErrors = 1;
-      jest.spyOn(RealSuperChart.defaultProps, 'FallbackComponent');
       const wrapper = mount(
         <SuperChart
           chartType={ChartKeys.BUGGY}
@@ -122,14 +119,9 @@ describe('SuperChart', () => {
           height="200"
         />,
       );
-      const renderedWrapper = wrapper.render();
+      await new Promise(resolve => setImmediate(resolve));
-
+      wrapper.update();
-      return promiseTimeout(() => {
+      expect(wrapper.text()).toContain('Oops! An error occured!');
-        expect(renderedWrapper.find('div.test-component')).toHaveLength(0);
-        expect(
-          RealSuperChart.defaultProps.FallbackComponent,
-        ).toHaveBeenCalledTimes(1);
-      }, 100);
     });
     it('renders custom FallbackComponent', () => {
       expectedErrors = 1;

superset-frontend/packages/superset-ui-core/test/chart/components/SuperChartCore.test.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 import { mount, shallow } from 'enzyme';
 import mockConsole, { RestoreConsole } from 'jest-mock-console';
 
-import { ChartProps, promiseTimeout } from '@superset-ui/core';
+import { ChartProps, promiseTimeout, supersetTheme } from '@superset-ui/core';
 import SuperChartCore from '../../../src/chart/components/SuperChartCore';
 import {
   ChartKeys,
@@ -123,6 +123,7 @@ describe('SuperChartCore', () => {
     it('uses preTransformProps when specified', () => {
       const chartPropsWithPayload = new ChartProps({
         queriesData: [{ message: 'hulk' }],
+        theme: supersetTheme,
       });
       const wrapper = shallow(
         <SuperChartCore

superset-frontend/packages/superset-ui-core/test/chart/models/ChartPlugin.test.tsx

@@ -31,6 +31,7 @@ import {
   getChartControlPanelRegistry,
   QueryFormData,
   DatasourceType,
+  supersetTheme,
 } from '@superset-ui/core';
 
 describe('ChartPlugin', () => {
@@ -130,6 +131,7 @@ describe('ChartPlugin', () => {
         width: 400,
         height: 400,
         queriesData: [{}],
+        theme: supersetTheme,
       });
       it('defaults to identity function', () => {
         const plugin = new ChartPlugin({

superset-frontend/packages/superset-ui-core/test/chart/models/ChartProps.test.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { Behavior, ChartProps } from '@superset-ui/core';
+import { Behavior, ChartProps, supersetTheme } from '@superset-ui/core';
 
 const RAW_FORM_DATA = {
   some_field: 1,
@@ -42,6 +42,7 @@ describe('ChartProps', () => {
         height: 600,
         formData: RAW_FORM_DATA,
         queriesData: QUERIES_DATA,
+        theme: supersetTheme,
       });
       expect(props).toBeInstanceOf(ChartProps);
     });
@@ -52,6 +53,7 @@ describe('ChartProps', () => {
         datasource: RAW_DATASOURCE,
         formData: RAW_FORM_DATA,
         queriesData: QUERIES_DATA,
+        theme: supersetTheme,
       });
       expect(props.formData.someField as number).toEqual(1);
       expect(props.datasource.columnFormats).toEqual(
@@ -75,6 +77,7 @@ describe('ChartProps', () => {
         queriesData: QUERIES_DATA,
         behaviors: BEHAVIORS,
         isRefreshing: false,
+        theme: supersetTheme,
       });
       const props2 = selector({
         width: 800,
@@ -84,6 +87,7 @@ describe('ChartProps', () => {
         queriesData: QUERIES_DATA,
         behaviors: BEHAVIORS,
         isRefreshing: false,
+        theme: supersetTheme,
       });
       expect(props1).toBe(props2);
     });
@@ -101,6 +105,7 @@ describe('ChartProps', () => {
         queriesData: QUERIES_DATA,
         behaviors: BEHAVIORS,
         isRefreshing: false,
+        theme: supersetTheme,
       });
       const props2 = selector({
         width: 800,
@@ -110,6 +115,7 @@ describe('ChartProps', () => {
         queriesData: QUERIES_DATA,
         behaviors: BEHAVIORS,
         isRefreshing: true,
+        theme: supersetTheme,
       });
       expect(props1).not.toBe(props2);
     });
@@ -120,6 +126,7 @@ describe('ChartProps', () => {
         datasource: RAW_DATASOURCE,
         formData: RAW_FORM_DATA,
         queriesData: QUERIES_DATA,
+        theme: supersetTheme,
       });
       const props2 = selector({
         width: 800,
@@ -127,6 +134,7 @@ describe('ChartProps', () => {
         datasource: RAW_DATASOURCE,
         formData: { new_field: 3 },
         queriesData: QUERIES_DATA,
+        theme: supersetTheme,
       });
       const props3 = selector({
         width: 800,
@@ -134,6 +142,7 @@ describe('ChartProps', () => {
         datasource: RAW_DATASOURCE,
         formData: RAW_FORM_DATA,
         queriesData: QUERIES_DATA,
+        theme: supersetTheme,
       });
       expect(props1).not.toBe(props2);
       expect(props1).not.toBe(props3);

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

@@ -16,7 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { DatasourceType, TimeGranularity } from '@superset-ui/core';
+import {
+  DatasourceType,
+  supersetTheme,
+  TimeGranularity,
+} from '@superset-ui/core';
 import transformProps from '../../src/BigNumber/BigNumberWithTrendline/transformProps';
 import {
   BigNumberDatum,
@@ -89,6 +93,7 @@ function generateProps(
     ownState: {},
     filterState: {},
     behaviors: [],
+    theme: supersetTheme,
   };
 }
 

superset-frontend/plugins/plugin-chart-echarts/test/BoxPlot/transformProps.test.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ChartProps, SqlaFormData } from '@superset-ui/core';
+import { ChartProps, SqlaFormData, supersetTheme } from '@superset-ui/core';
 import { EchartsBoxPlotChartProps } from '../../src/BoxPlot/types';
 import transformProps from '../../src/BoxPlot/transformProps';
 
@@ -66,6 +66,7 @@ describe('BoxPlot transformProps', () => {
         ],
       },
     ],
+    theme: supersetTheme,
   });
 
   it('should transform chart props for viz', () => {

superset-frontend/plugins/plugin-chart-echarts/test/Funnel/transformProps.test.ts

@@ -16,7 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ChartProps, getNumberFormatter } from '@superset-ui/core';
+import {
+  ChartProps,
+  getNumberFormatter,
+  supersetTheme,
+} from '@superset-ui/core';
 import transformProps, {
   formatFunnelLabel,
 } from '../../src/Funnel/transformProps';
@@ -45,6 +49,7 @@ describe('Funnel transformProps', () => {
         ],
       },
     ],
+    theme: supersetTheme,
   });
 
   it('should transform chart props for viz', () => {

superset-frontend/plugins/plugin-chart-echarts/test/Gauge/transformProps.test.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ChartProps, SqlaFormData } from '@superset-ui/core';
+import { ChartProps, SqlaFormData, supersetTheme } from '@superset-ui/core';
 import transformProps from '../../src/Gauge/transformProps';
 import { EchartsGaugeChartProps } from '../../src/Gauge/types';
 
@@ -63,6 +63,7 @@ describe('Echarts Gauge transformProps', () => {
       width: 800,
       height: 600,
       queriesData,
+      theme: supersetTheme,
     };
 
     const chartProps = new ChartProps(chartPropsConfig);
@@ -123,6 +124,7 @@ describe('Echarts Gauge transformProps', () => {
       width: 800,
       height: 600,
       queriesData,
+      theme: supersetTheme,
     };
 
     const chartProps = new ChartProps(chartPropsConfig);
@@ -200,6 +202,7 @@ describe('Echarts Gauge transformProps', () => {
       width: 800,
       height: 600,
       queriesData,
+      theme: supersetTheme,
     };
 
     const chartProps = new ChartProps(chartPropsConfig);
@@ -279,6 +282,7 @@ describe('Echarts Gauge transformProps', () => {
       width: 800,
       height: 600,
       queriesData,
+      theme: supersetTheme,
     };
 
     const chartProps = new ChartProps(chartPropsConfig);

superset-frontend/plugins/plugin-chart-echarts/test/Graph/transformProps.test.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ChartProps } from '@superset-ui/core';
+import { ChartProps, supersetTheme } from '@superset-ui/core';
 import transformProps from '../../src/Graph/transformProps';
 import { DEFAULT_GRAPH_SERIES_OPTION } from '../../src/Graph/constants';
 
@@ -53,6 +53,7 @@ describe('EchartsGraph transformProps', () => {
       width: 800,
       height: 600,
       queriesData,
+      theme: supersetTheme,
     };
 
     const chartProps = new ChartProps(chartPropsConfig);
@@ -192,6 +193,7 @@ describe('EchartsGraph transformProps', () => {
       width: 800,
       height: 600,
       queriesData,
+      theme: supersetTheme,
     };
 
     const chartProps = new ChartProps(chartPropsConfig);

superset-frontend/plugins/plugin-chart-echarts/test/Pie/transformProps.test.ts

@@ -20,6 +20,7 @@ import {
   ChartProps,
   getNumberFormatter,
   SqlaFormData,
+  supersetTheme,
 } from '@superset-ui/core';
 import transformProps, { formatPieLabel } from '../../src/Pie/transformProps';
 import { EchartsPieChartProps, EchartsPieLabelType } from '../../src/Pie/types';
@@ -45,6 +46,7 @@ describe('Pie transformProps', () => {
         ],
       },
     ],
+    theme: supersetTheme,
   });
 
   it('should transform chart props for viz', () => {

superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/transformProps.test.ts

@@ -25,6 +25,7 @@ import {
   FormulaAnnotationLayer,
   IntervalAnnotationLayer,
   SqlaFormData,
+  supersetTheme,
   TimeseriesAnnotationLayer,
 } from '@superset-ui/core';
 import { EchartsTimeseriesChartProps } from '../../src/types';
@@ -52,6 +53,7 @@ describe('EchartsTimeseries transformProps', () => {
     width: 800,
     height: 600,
     queriesData,
+    theme: supersetTheme,
   };
 
   it('should transform chart props for viz', () => {
@@ -315,6 +317,7 @@ describe('Does transformProps transform series correctly', () => {
     width: 800,
     height: 600,
     queriesData,
+    theme: supersetTheme,
   };
 
   const totalStackedValues = queriesData[0].data.reduce(

superset-frontend/plugins/plugin-chart-echarts/test/Tree/transformProps.test.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ChartProps } from '@superset-ui/core';
+import { ChartProps, supersetTheme } from '@superset-ui/core';
 import transformProps from '../../src/Tree/transformProps';
 
 describe('EchartsTree transformProps', () => {
@@ -34,6 +34,7 @@ describe('EchartsTree transformProps', () => {
     formData,
     width: 800,
     height: 600,
+    theme: supersetTheme,
   };
   it('should transform when parent present before child', () => {
     const queriesData = [
@@ -187,6 +188,7 @@ describe('EchartsTree transformProps', () => {
       formData,
       width: 800,
       height: 600,
+      theme: supersetTheme,
     };
     const queriesData = [
       {
@@ -266,6 +268,7 @@ describe('EchartsTree transformProps', () => {
       formData,
       width: 800,
       height: 600,
+      theme: supersetTheme,
     };
     const queriesData = [
       {
@@ -347,6 +350,7 @@ describe('EchartsTree transformProps', () => {
       formData,
       width: 800,
       height: 600,
+      theme: supersetTheme,
     };
     const queriesData = [
       {

superset-frontend/plugins/plugin-chart-echarts/test/Treemap/transformProps.test.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ChartProps } from '@superset-ui/core';
+import { ChartProps, supersetTheme } from '@superset-ui/core';
 import { EchartsTreemapChartProps } from '../../src/Treemap/types';
 import transformProps from '../../src/Treemap/transformProps';
 
@@ -40,6 +40,7 @@ describe('Treemap transformProps', () => {
         ],
       },
     ],
+    theme: supersetTheme,
   });
 
   it('should transform chart props for viz', () => {

superset-frontend/plugins/plugin-chart-handlebars/test/plugin/transformProps.test.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ChartProps, QueryFormData } from '@superset-ui/core';
+import { ChartProps, QueryFormData, supersetTheme } from '@superset-ui/core';
 import { HandlebarsQueryFormData } from '../../src/types';
 import transformProps from '../../src/plugin/transformProps';
 
@@ -37,6 +37,7 @@ describe('Handlebars tranformProps', () => {
     width: 800,
     height: 600,
     queriesData: [{ data }],
+    theme: supersetTheme,
   });
 
   it('should tranform chart props for viz', () => {

superset-frontend/plugins/plugin-chart-pivot-table/test/plugin/transformProps.test.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { ChartProps, QueryFormData } from '@superset-ui/core';
+import { ChartProps, QueryFormData, supersetTheme } from '@superset-ui/core';
 import transformProps from '../../src/plugin/transformProps';
 import { MetricsLayoutEnum } from '../../src/types';
 
@@ -61,6 +61,7 @@ describe('PivotTableChart transformProps', () => {
     hooks: { setDataMask },
     filterState: { selectedFilters: {} },
     datasource: { verboseMap: {}, columnFormats: {} },
+    theme: supersetTheme,
   });
 
   it('should transform chart props for viz', () => {

superset-frontend/plugins/plugin-chart-table/test/testData.ts

@@ -21,6 +21,7 @@ import {
   ChartProps,
   DatasourceType,
   GenericDataType,
+  supersetTheme,
 } from '@superset-ui/core';
 import { TableChartProps, TableChartFormData } from '../src/types';
 
@@ -63,6 +64,7 @@ const basicChartProps = {
     },
   ],
   formData: basicFormData,
+  theme: supersetTheme,
 };
 
 const basicQueryResult: ChartDataResponseResult = {

superset-frontend/plugins/plugin-chart-word-cloud/test/legacyPlugin/transformProps.test.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { ChartProps } from '@superset-ui/core';
+import { ChartProps, supersetTheme } from '@superset-ui/core';
 import transformProps from '../../src/legacyPlugin/transformProps';
 
 describe('WordCloud transformProps', () => {
@@ -40,6 +40,7 @@ describe('WordCloud transformProps', () => {
         data: [{ name: 'Hulk', sum__num: 1 }],
       },
     ],
+    theme: supersetTheme,
   });
 
   it('should transform chart props for word cloud viz', () => {