chore(chart-worldmap): use emotion style (apache#652)

zhaoyongjie · Nov 17, 2021 · 2c8d22d · 2c8d22d
1 parent 7d047a0
commit 2c8d22d
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 30 deletions.
diff --git a/...tend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-world-map/package.json b/...tend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-world-map/package.json
@@ -36,6 +36,8 @@
     "@superset-ui/chart": "^0.14.0",
     "@superset-ui/chart-controls": "^0.14.0",
     "@superset-ui/number-format": "^0.14.0",
-    "@superset-ui/translation": "^0.14.0"
+    "@superset-ui/translation": "^0.14.0",
+    "@superset-ui/style": "^0.14.3",
+    "react": "^16.13.1"
   }
 }
diff --git a/...ugin-chart-world-map/src/ReactWorldMap.js → ...gin-chart-world-map/src/ReactWorldMap.jsx b/...ugin-chart-world-map/src/ReactWorldMap.js → ...gin-chart-world-map/src/ReactWorldMap.jsx
@@ -16,7 +16,31 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from '@superset-ui/style';
 import { reactify } from '@superset-ui/chart';
 import WorldMap from './WorldMap';
 
-export default reactify(WorldMap);
+const ReactWorldMap = reactify(WorldMap);
+
+const WorldMapComponent = ({ className, ...otherProps }) => {
+  return (
+    <div className={className}>
+      <ReactWorldMap {...otherProps} />
+    </div>
+  );
+};
+
+WorldMapComponent.propTypes = {
+  className: PropTypes.string.isRequired,
+};
+
+export default styled(WorldMapComponent)`
+  .superset-legacy-chart-world-map {
+    position: relative;
+    svg {
+      background-color: #feffff;
+    }
+  }
+`;
diff --git a/.../temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-world-map/src/WorldMap.css b/.../temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-world-map/src/WorldMap.css
diff --git a/...d/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-world-map/src/WorldMap.js b/...d/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-world-map/src/WorldMap.js
@@ -21,7 +21,6 @@ import d3 from 'd3';
 import PropTypes from 'prop-types';
 import Datamap from 'datamaps/dist/datamaps.world.min';
 import { getNumberFormatter } from '@superset-ui/number-format';
-import './WorldMap.css';
 
 const propTypes = {
   data: PropTypes.arrayOf(

diff --git a/...tend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-world-map/src/index.js b/...tend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-world-map/src/index.js
@@ -33,7 +33,7 @@ const metadata = new ChartMetadata({
 export default class WorldMapChartPlugin extends ChartPlugin {
   constructor() {
     super({
-      loadChart: () => import('./ReactWorldMap.js'),
+      loadChart: () => import('./ReactWorldMap'),
       metadata,
       transformProps,
       controlPanel,