From b7cff8335b6c0ac5498f9c788c5619e5445b28ad Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com> Date: Mon, 9 May 2022 10:44:13 -0300 Subject: [PATCH] chore: Removes hard-coded colors from the plugins - iteration 1 (#19923) * chore: Removes hard-coded colors from the plugins - iteration 1 * Fixes lint errors * Fixes tests --- .../chart/components/FallbackComponent.tsx | 18 ++- .../chart/components/MockChartPlugins.tsx | 60 +++++--- .../chart/components/SuperChartCore.test.tsx | 61 +++++--- .../.storybook/themeDecorator.js | 4 +- .../shared/components/ResizableChartDemo.tsx | 2 +- .../legacy-plugin-chart-calendar/Stories.tsx | 2 + .../CountryMapStories.tsx | 10 +- .../legacy-plugin-chart-map-box/Stories.tsx | 55 +++---- .../legacy-plugin-chart-map-box/data.ts | 7 +- .../legacy-plugin-chart-world-map/Stories.tsx | 1 + .../Path/Stories.tsx | 103 +++++++------ .../Path/payload.js | 24 +-- .../plugin-chart-word-cloud/Stories.tsx | 4 +- .../Line/stories/timeShift.tsx | 143 +++++++++--------- .../src/Calendar.js | 4 +- .../src/ReactCalendar.jsx | 131 ++++++++-------- .../src/ReactWorldMap.jsx | 15 +- .../src/WorldMap.js | 9 +- .../src/components/Tooltip.tsx | 47 +++--- .../src/PivotTableChart.tsx | 15 +- .../src/chart/WordCloud.tsx | 2 +- .../src/components/BoxPlot/BoxPlot.tsx | 4 +- .../src/components/BoxPlot/Encoder.ts | 4 +- .../src/components/ScatterPlot/Encoder.ts | 4 +- .../components/ScatterPlot/ScatterPlot.tsx | 4 +- 25 files changed, 409 insertions(+), 324 deletions(-) diff --git a/superset-frontend/packages/superset-ui-core/src/chart/components/FallbackComponent.tsx b/superset-frontend/packages/superset-ui-core/src/chart/components/FallbackComponent.tsx index 8c344d514d..f7a360de25 100644 --- a/superset-frontend/packages/superset-ui-core/src/chart/components/FallbackComponent.tsx +++ b/superset-frontend/packages/superset-ui-core/src/chart/components/FallbackComponent.tsx @@ -18,17 +18,11 @@ */ import React from 'react'; +import { SupersetTheme } from '../../style'; import { FallbackPropsWithDimension } from './SuperChart'; export type Props = FallbackPropsWithDimension; -const CONTAINER_STYLE = { - backgroundColor: '#000', - color: '#fff', - overflow: 'auto', - padding: 32, -}; - export default function FallbackComponent({ componentStack, error, @@ -36,7 +30,15 @@ export default function FallbackComponent({ width, }: Props) { return ( -
+
({ + backgroundColor: theme.colors.grayscale.dark2, + color: theme.colors.grayscale.light5, + overflow: 'auto', + padding: 32, + })} + style={{ height, width }} + >
Oops! An error occured! diff --git a/superset-frontend/packages/superset-ui-core/test/chart/components/MockChartPlugins.tsx b/superset-frontend/packages/superset-ui-core/test/chart/components/MockChartPlugins.tsx index dc3611aebc..73ef76c572 100644 --- a/superset-frontend/packages/superset-ui-core/test/chart/components/MockChartPlugins.tsx +++ b/superset-frontend/packages/superset-ui-core/test/chart/components/MockChartPlugins.tsx @@ -19,7 +19,12 @@ /* eslint-disable max-classes-per-file */ import React from 'react'; -import { QueryFormData, ChartMetadata, ChartPlugin } from '@superset-ui/core'; +import { + QueryFormData, + ChartMetadata, + ChartPlugin, + useTheme, +} from '@superset-ui/core'; const DIMENSION_STYLE = { fontSize: 36, @@ -39,31 +44,36 @@ export const TestComponent = ({ message?: string; width?: number; height?: number; -}) => ( -
-
- {message ?? 'custom component'} +}) => { + const theme = useTheme(); + return ( +
+
+ {message ?? 'custom component'} +
+
+ {[width, height].join('x')} +
+
+ + {JSON.stringify(formData)} + +
-
- {[width, height].join('x')} -
-
- {JSON.stringify(formData)} -
-
-); + ); +}; export const ChartKeys = { DILIGENT: 'diligent-chart', diff --git a/superset-frontend/packages/superset-ui-core/test/chart/components/SuperChartCore.test.tsx b/superset-frontend/packages/superset-ui-core/test/chart/components/SuperChartCore.test.tsx index 43c793ab35..d3b808c050 100644 --- a/superset-frontend/packages/superset-ui-core/test/chart/components/SuperChartCore.test.tsx +++ b/superset-frontend/packages/superset-ui-core/test/chart/components/SuperChartCore.test.tsx @@ -17,11 +17,16 @@ * under the License. */ -import React from 'react'; -import { mount, shallow } from 'enzyme'; +import React, { ReactElement, ReactNode } from 'react'; +import { mount } from 'enzyme'; import mockConsole, { RestoreConsole } from 'jest-mock-console'; - -import { ChartProps, promiseTimeout, supersetTheme } from '@superset-ui/core'; +import { + ChartProps, + promiseTimeout, + supersetTheme, + SupersetTheme, + ThemeProvider, +} from '@superset-ui/core'; import SuperChartCore from '../../../src/chart/components/SuperChartCore'; import { ChartKeys, @@ -30,6 +35,22 @@ import { SlowChartPlugin, } from './MockChartPlugins'; +const Wrapper = ({ + theme, + children, +}: { + theme: SupersetTheme; + children: ReactNode; +}) => {children}; + +const styledMount = (component: ReactElement) => + mount(component, { + wrappingComponent: Wrapper, + wrappingComponentProps: { + theme: supersetTheme, + }, + }); + describe('SuperChartCore', () => { const chartProps = new ChartProps(); @@ -63,7 +84,7 @@ describe('SuperChartCore', () => { describe('registered charts', () => { it('renders registered chart', () => { - const wrapper = shallow( + const wrapper = styledMount( { }); }); it('renders registered chart with lazy loading', () => { - const wrapper = shallow(); + const wrapper = styledMount( + , + ); return promiseTimeout(() => { expect(wrapper.render().find('div.test-component')).toHaveLength(1); @@ -84,14 +107,14 @@ describe('SuperChartCore', () => { it('does not render if chartType is not set', () => { // Suppress warning // @ts-ignore chartType is required - const wrapper = shallow(); + const wrapper = styledMount(); return promiseTimeout(() => { expect(wrapper.render().children()).toHaveLength(0); }, 5); }); it('adds id to container if specified', () => { - const wrapper = shallow( + const wrapper = styledMount( , ); @@ -100,7 +123,7 @@ describe('SuperChartCore', () => { }); }); it('adds class to container if specified', () => { - const wrapper = shallow( + const wrapper = styledMount( , ); @@ -109,7 +132,7 @@ describe('SuperChartCore', () => { }, 0); }); it('uses overrideTransformProps when specified', () => { - const wrapper = shallow( + const wrapper = styledMount( ({ message: 'hulk' })} @@ -125,7 +148,7 @@ describe('SuperChartCore', () => { queriesData: [{ message: 'hulk' }], theme: supersetTheme, }); - const wrapper = shallow( + const wrapper = styledMount( chartPropsWithPayload} @@ -138,7 +161,7 @@ describe('SuperChartCore', () => { }); }); it('uses postTransformProps when specified', () => { - const wrapper = shallow( + const wrapper = styledMount( ({ message: 'hulk' })} @@ -150,7 +173,7 @@ describe('SuperChartCore', () => { }); }); it('renders if chartProps is not specified', () => { - const wrapper = shallow( + const wrapper = styledMount( , ); @@ -159,7 +182,9 @@ describe('SuperChartCore', () => { }); }); it('does not render anything while waiting for Chart code to load', () => { - const wrapper = shallow(); + const wrapper = styledMount( + , + ); return promiseTimeout(() => { expect(wrapper.render().children()).toHaveLength(0); @@ -167,14 +192,16 @@ describe('SuperChartCore', () => { }); it('eventually renders after Chart is loaded', () => { // Suppress warning - const wrapper = mount(); + const wrapper = styledMount( + , + ); return promiseTimeout(() => { expect(wrapper.render().find('div.test-component')).toHaveLength(1); }, 1500); }); it('does not render if chartProps is null', () => { - const wrapper = shallow( + const wrapper = styledMount( , ); @@ -186,7 +213,7 @@ describe('SuperChartCore', () => { describe('unregistered charts', () => { it('renders error message', () => { - const wrapper = mount( + const wrapper = styledMount( , ); diff --git a/superset-frontend/packages/superset-ui-demo/.storybook/themeDecorator.js b/superset-frontend/packages/superset-ui-demo/.storybook/themeDecorator.js index b4e110024b..7f99367885 100644 --- a/superset-frontend/packages/superset-ui-demo/.storybook/themeDecorator.js +++ b/superset-frontend/packages/superset-ui-demo/.storybook/themeDecorator.js @@ -2,8 +2,8 @@ import React from 'react'; import { supersetTheme, ThemeProvider } from '@superset-ui/core'; -const ThemeDecorator = storyFn => ( - {storyFn()} +const ThemeDecorator = Story => ( + {} ); export default ThemeDecorator; diff --git a/superset-frontend/packages/superset-ui-demo/storybook/shared/components/ResizableChartDemo.tsx b/superset-frontend/packages/superset-ui-demo/storybook/shared/components/ResizableChartDemo.tsx index f48399b6d6..fb10e0fa41 100644 --- a/superset-frontend/packages/superset-ui-demo/storybook/shared/components/ResizableChartDemo.tsx +++ b/superset-frontend/packages/superset-ui-demo/storybook/shared/components/ResizableChartDemo.tsx @@ -23,7 +23,7 @@ import { DecoratorFunction } from '@storybook/addons'; import ResizablePanel, { Size } from './ResizablePanel'; export const SupersetBody = styled.div` - background: #f5f5f5; + background: ${({ theme }) => theme.colors.grayscale.light4}; padding: 16px; min-height: 100%; diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-calendar/Stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-calendar/Stories.tsx index 93a63ba9e1..eb87657193 100644 --- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-calendar/Stories.tsx +++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-calendar/Stories.tsx @@ -40,6 +40,8 @@ export const basic = () => ( cellSize: 10, cellPadding: 2, cellRadius: 0, + domainGranularity: 'month', + subdomainGranularity: 'day', linearColorScheme: 'schemeRdYlBu', steps: 10, yAxisFormat: '.3s', diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-country-map/CountryMapStories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-country-map/CountryMapStories.tsx index 27e132ad43..0313343f46 100644 --- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-country-map/CountryMapStories.tsx +++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-country-map/CountryMapStories.tsx @@ -22,6 +22,7 @@ import { seedRandom, SuperChart, SequentialD3, + useTheme, } from '@superset-ui/core'; import CountryMapChartPlugin, { countries, @@ -44,6 +45,7 @@ function generateData(geojson: JsonObject) { } export const basic = function BasicCountryMapStory({ width, height }) { + const theme = useTheme(); const country = select('Country', Object.keys(countries!), 'france'); const colorSchema = select( 'Color schema', @@ -67,7 +69,13 @@ export const basic = function BasicCountryMapStory({ width, height }) { if (!data) { return ( -
+
Loading...
); diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-map-box/Stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-map-box/Stories.tsx index a1ab687926..6cdca623a1 100644 --- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-map-box/Stories.tsx +++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-map-box/Stories.tsx @@ -19,9 +19,9 @@ /* eslint-disable no-magic-numbers */ import React from 'react'; -import { SuperChart } from '@superset-ui/core'; +import { SuperChart, useTheme } from '@superset-ui/core'; import MapBoxChartPlugin from '@superset-ui/legacy-plugin-chart-map-box'; -import data from './data'; +import { generateData } from './data'; new MapBoxChartPlugin().configure({ key: 'map-box' }).register(); @@ -29,27 +29,30 @@ export default { title: 'Legacy Chart Plugins/legacy-plugin-chart-map-box', }; -export const basic = () => ( - -); +export const Basic = () => { + const theme = useTheme(); + return ( + + ); +}; diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-map-box/data.ts b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-map-box/data.ts index 2d688e5fc4..19a3c4c5a5 100644 --- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-map-box/data.ts +++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-map-box/data.ts @@ -16,9 +16,10 @@ * specific language governing permissions and limitations * under the License. */ +import { SupersetTheme } from '@superset-ui/core'; /* eslint-disable sort-keys, no-magic-numbers */ -export default { +export const generateData = (theme: SupersetTheme) => ({ geoJSON: { type: 'FeatureCollection', features: [ @@ -5538,5 +5539,5 @@ export default { ], renderWhileDragging: true, tooltip: null, - color: 'rgb(0, 122, 135)', -}; + color: theme.colors.primary.base, +}); diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-world-map/Stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-world-map/Stories.tsx index 0a56147319..c6bef9a7f1 100644 --- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-world-map/Stories.tsx +++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-world-map/Stories.tsx @@ -38,6 +38,7 @@ export const basic = () => ( formData={{ maxBubbleSize: '25', showBubbles: true, + colorPicker: {}, }} /> ); diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-deckgl/Path/Stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-deckgl/Path/Stories.tsx index d5b90dad97..486d6cca41 100644 --- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-deckgl/Path/Stories.tsx +++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-deckgl/Path/Stories.tsx @@ -20,9 +20,9 @@ /* eslint-disable sort-keys */ /* eslint-disable no-magic-numbers */ import React from 'react'; -import { SuperChart } from '@superset-ui/core'; +import { SuperChart, useTheme } from '@superset-ui/core'; import { PathChartPlugin } from '@superset-ui/legacy-preset-chart-deckgl'; -import payload from './payload'; +import { payload } from './payload'; import dummyDatasource from '../../../../shared/dummyDatasource'; new PathChartPlugin().configure({ key: 'deck_path' }).register(); @@ -31,51 +31,54 @@ export default { title: 'Legacy Chart Plugins/legacy-preset-chart-deckgl/PathChartPlugin', }; -export const PathChartViz = () => ( - -); +export const PathChartViz = () => { + const theme = useTheme(); + return ( + + ); +}; diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-deckgl/Path/payload.js b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-deckgl/Path/payload.js index a30aad8269..a303f8ac08 100644 --- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-deckgl/Path/payload.js +++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-deckgl/Path/payload.js @@ -19,7 +19,7 @@ /* eslint-disable sort-keys */ /* eslint-disable no-magic-numbers */ -export default { +export const payload = theme => ({ cache_key: null, cached_dttm: null, cache_timeout: 86400, @@ -82,7 +82,7 @@ export default { data: { features: [ { - color: '#ed1c24', + color: theme.colors.primary.base, path: [ [-122.3535851, 37.9360513], [-122.3179784, 37.9249513], @@ -109,10 +109,10 @@ export default { [-122.3876274, 37.5993171], ], __timestamp: null, - extraProps: { color: '#ed1c24' }, + extraProps: { color: theme.colors.primary.base }, }, { - color: '#faa61a', + color: theme.colors.warning.base, path: [ [-122.353165, 37.936887], [-122.317269, 37.925655], @@ -134,10 +134,10 @@ export default { [-121.9772135, 37.5567286], ], __timestamp: null, - extraProps: { color: '#faa61a' }, + extraProps: { color: theme.colors.warning.base }, }, { - color: '#ffe800', + color: theme.colors.error.base, path: [ [-121.945154, 38.018914], [-122.024597, 38.003275], @@ -167,10 +167,10 @@ export default { [-122.38666, 37.599787], ], __timestamp: null, - extraProps: { color: '#ffe800' }, + extraProps: { color: theme.colors.error.base }, }, { - color: '#00aeef', + color: theme.colors.success.base, path: [ [-121.900367, 37.701695], [-121.928099, 37.699759], @@ -192,10 +192,10 @@ export default { [-122.469081, 37.706121], ], __timestamp: null, - extraProps: { color: '#00aeef' }, + extraProps: { color: theme.colors.success.base }, }, { - color: '#4db848', + color: theme.colors.warning.base, path: [ [-121.9764, 37.557355], [-122.017867, 37.591208], @@ -218,11 +218,11 @@ export default { [-122.4683093, 37.705461], ], __timestamp: null, - extraProps: { color: '#4db848' }, + extraProps: { color: theme.colors.warning.base }, }, ], mapboxApiKey: 'pk.eyJ1Ijoia3Jpc3R3IiwiYSI6ImNqbGg1N242NTFlczczdnBhazViMjgzZ2sifQ.lUneM-o3NucXN189EYyXxQ', metricLabels: [], }, -}; +}); diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-word-cloud/Stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-word-cloud/Stories.tsx index 7267fd55c5..ba48ad66ac 100644 --- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-word-cloud/Stories.tsx +++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-word-cloud/Stories.tsx @@ -54,7 +54,7 @@ export const basic = ({ width, height }) => ( formData={{ encoding: { color: { - value: '#0097e6', + field: 'name', }, fontSize: { field: 'sum__num', @@ -120,7 +120,7 @@ export const encodesFontByFirstLetter = ({ width, height }) => ( formData={{ encoding: { color: { - value: '#8c7ae6', + field: 'name', }, fontFamily: { field: 'name[0]', diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/stories/timeShift.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/stories/timeShift.tsx index fe6201bf09..12a85fe280 100644 --- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/stories/timeShift.tsx +++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/stories/timeShift.tsx @@ -18,80 +18,83 @@ */ import React from 'react'; -import { SuperChart } from '@superset-ui/core'; +import { SuperChart, useTheme } from '@superset-ui/core'; import data from '../data/data2'; import { LINE_PLUGIN_TYPE } from '../constants'; import dummyDatasource from '../../../../../shared/dummyDatasource'; -export default () => ( - { + const theme = useTheme(); + return ( + -); + }} + /> + ); +}; diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js index 74a9aecb49..0417ea3e8b 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js +++ b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js @@ -50,6 +50,7 @@ const propTypes = { timeFormatter: PropTypes.func, valueFormatter: PropTypes.func, verboseMap: PropTypes.object, + theme: PropTypes.object, }; function Calendar(element, props) { @@ -69,6 +70,7 @@ function Calendar(element, props) { timeFormatter, valueFormatter, verboseMap, + theme, } = props; const container = d3Select(element) @@ -120,7 +122,7 @@ function Calendar(element, props) { colorScale, min: legendColors[0], max: legendColors[legendColors.length - 1], - empty: 'white', + empty: theme.colors.grayscale.light5, }, displayLegend: showLegend, itemName: '', diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx index e7d39d6310..8908fc5242 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx +++ b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx @@ -18,83 +18,86 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { reactify, styled, css } from '@superset-ui/core'; +import { reactify, styled, css, useTheme } from '@superset-ui/core'; import { Global } from '@emotion/react'; import Component from './Calendar'; const ReactComponent = reactify(Component); -const Calender = ({ className, ...otherProps }) => ( -
- css` - .d3-tip { - line-height: 1; - padding: ${theme.gridUnit * 3}px; - background: ${theme.colors.grayscale.dark2}; - color: ${theme.colors.grayscale.light5}; - border-radius: 4px; - pointer-events: none; - z-index: 1000; - font-size: ${theme.typography.sizes.s}px; - } - /* Creates a small triangle extender for the tooltip */ - .d3-tip:after { - box-sizing: border-box; - display: inline; - font-size: ${theme.typography.sizes.xs}; - width: 100%; - line-height: 1; - color: ${theme.colors.grayscale.dark2}; - position: absolute; - pointer-events: none; - } - /* Northward tooltips */ - .d3-tip.n:after { - content: '\\25BC'; - margin: -${theme.gridUnit}px 0 0 0; - top: 100%; - left: 0; - text-align: center; - } - /* Eastward tooltips */ - .d3-tip.e:after { - content: '\\25C0'; - margin: -${theme.gridUnit}px 0 0 0; - top: 50%; - left: -${theme.gridUnit * 2}px; - } - /* Southward tooltips */ - .d3-tip.s:after { - content: '\\25B2'; - margin: 0; - top: -${theme.gridUnit * 2}px; - left: 0; - text-align: center; - } - /* Westward tooltips */ - .d3-tip.w:after { - content: '\\25B6'; - margin: -${theme.gridUnit}px 0 0 0px; - top: 50%; - left: 100%; - } - `} - /> - -
-); +const Calendar = ({ className, ...otherProps }) => { + const theme = useTheme(); + return ( +
+ + +
+ ); +}; -Calender.defaultProps = { +Calendar.defaultProps = { otherProps: {}, }; -Calender.propTypes = { +Calendar.propTypes = { className: PropTypes.string.isRequired, otherProps: PropTypes.objectOf(PropTypes.any), }; -export default styled(Calender)` +export default styled(Calendar)` ${({ theme }) => ` .superset-legacy-chart-calendar { padding: ${theme.gridUnit * 3}px; diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/ReactWorldMap.jsx b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/ReactWorldMap.jsx index 52b20f1bda..91efe6b0cb 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/ReactWorldMap.jsx +++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/ReactWorldMap.jsx @@ -18,16 +18,19 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { styled, reactify } from '@superset-ui/core'; +import { styled, reactify, useTheme } from '@superset-ui/core'; import WorldMap from './WorldMap'; const ReactWorldMap = reactify(WorldMap); -const WorldMapComponent = ({ className, ...otherProps }) => ( -
- -
-); +const WorldMapComponent = ({ className, ...otherProps }) => { + const theme = useTheme(); + return ( +
+ +
+ ); +}; WorldMapComponent.propTypes = { className: PropTypes.string.isRequired, diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js index c7253e10d0..b22c2b6e62 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js +++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js @@ -55,6 +55,7 @@ function WorldMap(element, props) { showBubbles, linearColorScheme, color, + theme, } = props; const div = d3.select(element); div.classed('superset-legacy-chart-world-map', true); @@ -90,14 +91,14 @@ function WorldMap(element, props) { height, data: processedData, fills: { - defaultFill: '#eee', + defaultFill: theme.colors.grayscale.light2, }, geographyConfig: { popupOnHover: true, highlightOnHover: true, borderWidth: 1, - borderColor: '#feffff', - highlightBorderColor: '#feffff', + borderColor: theme.colors.grayscale.light5, + highlightBorderColor: theme.colors.grayscale.light5, highlightFillColor: color, highlightBorderWidth: 1, popupTemplate: (geo, d) => @@ -119,7 +120,7 @@ function WorldMap(element, props) { animate: true, highlightOnHover: true, highlightFillColor: color, - highlightBorderColor: 'black', + highlightBorderColor: theme.colors.grayscale.dark2, highlightBorderWidth: 2, highlightBorderOpacity: 1, highlightFillOpacity: 0.85, diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Tooltip.tsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Tooltip.tsx index 8a80e310f6..9b20113448 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Tooltip.tsx +++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Tooltip.tsx @@ -17,7 +17,8 @@ * under the License. */ -import React, { useMemo, CSSProperties } from 'react'; +import { styled } from '@superset-ui/core'; +import React, { useMemo } from 'react'; import { filterXSS } from 'xss'; export type TooltipProps = { @@ -31,6 +32,22 @@ export type TooltipProps = { | undefined; }; +const StyledDiv = styled.div<{ top: number; left: number }>` + ${({ theme, top, left }) => ` + position: absolute; + top: ${top}px; + left: ${left}px; + padding: ${theme.gridUnit * 2}px; + margin: ${theme.gridUnit * 2}px; + background: ${theme.colors.grayscale.dark2}; + color: ${theme.colors.grayscale.light5}; + maxWidth: 300px; + fontSize: ${theme.typography.sizes.s}px; + zIndex: 9; + pointerEvents: none; + `} +`; + export default function Tooltip(props: TooltipProps) { const { tooltip } = props; if (typeof tooltip === 'undefined' || tooltip === null) { @@ -39,24 +56,6 @@ export default function Tooltip(props: TooltipProps) { const { x, y, content } = tooltip; - // eslint-disable-next-line react-hooks/rules-of-hooks - const style: CSSProperties = useMemo( - () => ({ - position: 'absolute', - top: `${y}px`, - left: `${x}px`, - padding: '8px', - margin: '8px', - background: 'rgba(0, 0, 0, 0.8)', - color: '#fff', - maxWidth: '300px', - fontSize: '12px', - zIndex: 9, - pointerEvents: 'none', - }), - [x, y], - ); - if (typeof content === 'string') { // eslint-disable-next-line react-hooks/rules-of-hooks const contentHtml = useMemo( @@ -66,14 +65,18 @@ export default function Tooltip(props: TooltipProps) { [content], ); return ( -
+
-
+ ); } - return
{content}
; + return ( + + {content} + + ); } diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx b/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx index ab2d9b727e..1cd079044d 100644 --- a/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx +++ b/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx @@ -55,9 +55,18 @@ const PivotTableWrapper = styled.div` `; const METRIC_KEY = 'metric'; -const iconStyle = { stroke: 'black', strokeWidth: '16px' }; const vals = ['value']; +const StyledPlusSquareOutlined = styled(PlusSquareOutlined)` + stroke: ${({ theme }) => theme.colors.grayscale.light2}; + stroke-width: 16px; +`; + +const StyledMinusSquareOutlined = styled(MinusSquareOutlined)` + stroke: ${({ theme }) => theme.colors.grayscale.light2}; + stroke-width: 16px; +`; + const aggregatorsFactory = (formatter: NumberFormatter) => ({ Count: aggregatorTemplates.count(formatter), 'Count Unique Values': aggregatorTemplates.countUnique(formatter), @@ -345,8 +354,8 @@ export default function PivotTableChart(props: PivotTableProps) { () => ({ colSubtotalDisplay: { displayOnTop: colSubtotalPosition }, rowSubtotalDisplay: { displayOnTop: rowSubtotalPosition }, - arrowCollapsed: , - arrowExpanded: , + arrowCollapsed: , + arrowExpanded: , }), [colSubtotalPosition, rowSubtotalPosition], ); diff --git a/superset-frontend/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx b/superset-frontend/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx index 5d8ae0105e..a903c26fbc 100644 --- a/superset-frontend/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx +++ b/superset-frontend/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx @@ -105,7 +105,7 @@ class WordCloud extends React.PureComponent< text: 'Text', }, defaultEncoding: { - color: { value: 'black' }, + color: { value: this.props.theme.colors.grayscale.dark2 }, fontFamily: { value: this.props.theme.typography.families.sansSerif }, fontSize: { value: 20 }, fontWeight: { value: 'bold' }, diff --git a/superset-frontend/plugins/preset-chart-xy/src/components/BoxPlot/BoxPlot.tsx b/superset-frontend/plugins/preset-chart-xy/src/components/BoxPlot/BoxPlot.tsx index f4825c369b..a6b99ed180 100644 --- a/superset-frontend/plugins/preset-chart-xy/src/components/BoxPlot/BoxPlot.tsx +++ b/superset-frontend/plugins/preset-chart-xy/src/components/BoxPlot/BoxPlot.tsx @@ -68,7 +68,9 @@ type Props = { Readonly; export default class BoxPlot extends React.PureComponent { - private createEncoder = boxPlotEncoderFactory.createSelector(); + private createEncoder = boxPlotEncoderFactory( + this.props.theme?.colors.darkGray, + ).createSelector(); private createMargin = createMarginSelector(); diff --git a/superset-frontend/plugins/preset-chart-xy/src/components/BoxPlot/Encoder.ts b/superset-frontend/plugins/preset-chart-xy/src/components/BoxPlot/Encoder.ts index ff33c80904..27cd33809a 100644 --- a/superset-frontend/plugins/preset-chart-xy/src/components/BoxPlot/Encoder.ts +++ b/superset-frontend/plugins/preset-chart-xy/src/components/BoxPlot/Encoder.ts @@ -25,7 +25,7 @@ export type BoxPlotEncodingConfig = { color: ['Color', string]; }; -export const boxPlotEncoderFactory = +export const boxPlotEncoderFactory = (darkGray: string) => createEncoderFactory({ channelTypes: { x: 'XBand', @@ -35,7 +35,7 @@ export const boxPlotEncoderFactory = defaultEncoding: { x: { field: 'x', type: 'nominal' }, y: { field: 'y', type: 'quantitative' }, - color: { value: '#222' }, + color: { value: darkGray }, }, }); diff --git a/superset-frontend/plugins/preset-chart-xy/src/components/ScatterPlot/Encoder.ts b/superset-frontend/plugins/preset-chart-xy/src/components/ScatterPlot/Encoder.ts index bc860f4e82..49d7476038 100644 --- a/superset-frontend/plugins/preset-chart-xy/src/components/ScatterPlot/Encoder.ts +++ b/superset-frontend/plugins/preset-chart-xy/src/components/ScatterPlot/Encoder.ts @@ -34,7 +34,7 @@ export type ScatterPlotEncodingConfig = { tooltip: ['Text', string, 'multiple']; }; -export const scatterPlotEncoderFactory = +export const scatterPlotEncoderFactory = (darkGray: string) => createEncoderFactory({ channelTypes: { x: 'X', @@ -48,7 +48,7 @@ export const scatterPlotEncoderFactory = defaultEncoding: { x: { field: 'x', type: 'quantitative' }, y: { field: 'y', type: 'quantitative' }, - fill: { value: '#222' }, + fill: { value: darkGray }, group: [], size: { value: 5 }, stroke: { value: 'none' }, diff --git a/superset-frontend/plugins/preset-chart-xy/src/components/ScatterPlot/ScatterPlot.tsx b/superset-frontend/plugins/preset-chart-xy/src/components/ScatterPlot/ScatterPlot.tsx index 2df0d688d5..ddf259a839 100644 --- a/superset-frontend/plugins/preset-chart-xy/src/components/ScatterPlot/ScatterPlot.tsx +++ b/superset-frontend/plugins/preset-chart-xy/src/components/ScatterPlot/ScatterPlot.tsx @@ -67,7 +67,9 @@ type Props = { Readonly; export default class ScatterPlot extends PureComponent { - private createEncoder = scatterPlotEncoderFactory.createSelector(); + private createEncoder = scatterPlotEncoderFactory( + this.props.theme?.colors.darkGray, + ).createSelector(); private createMargin = createMarginSelector();