chore(chart-forced-directed): use emotion style (#643)

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-force-directed/package.json

@@ -28,12 +28,14 @@
     "access": "public"
   },
   "dependencies": {
-    "d3": "^3.5.17",
-    "prop-types": "^15.6.2"
+    "d3": "^3.5.17"
   },
   "peerDependencies": {
     "@superset-ui/chart": "^0.14.0",
     "@superset-ui/chart-controls": "^0.14.0",
-    "@superset-ui/translation": "^0.14.0"
+    "@superset-ui/style": "^0.14.3",
+    "@superset-ui/translation": "^0.14.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.13.1"
   }
 }

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-force-directed/src/ForceDirected.css

@@ -1,38 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-.superset-legacy-chart-force-directed path.link {
-  fill: none;
-  stroke: #000;
-  stroke-width: 1.5px;
-}
-
-.superset-legacy-chart-force-directed circle {
-  fill: #ccc;
-  stroke: #000;
-  stroke-width: 1.5px;
-  stroke-opacity: 1;
-  opacity: 0.75;
-}
-
-.superset-legacy-chart-force-directed text {
-  fill: #000;
-  font: 10px sans-serif;
-  pointer-events: none;
-}

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-force-directed/src/ForceDirected.js

@@ -19,7 +19,6 @@
 /* eslint-disable react/sort-prop-types, func-names, no-param-reassign */
 import d3 from 'd3';
 import PropTypes from 'prop-types';
-import './ForceDirected.css';
 
 const propTypes = {
   data: PropTypes.arrayOf(

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-force-directed/src/ReactForceDirected.jsx

@@ -16,7 +16,44 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import React from 'react';
 import { reactify } from '@superset-ui/chart';
+import styled from '@superset-ui/style';
+import PropTypes from 'prop-types';
 import Component from './ForceDirected';
 
-export default reactify(Component);
+const ReactComponent = reactify(Component);
+
+const ForceDirected = ({ className, ...otherProps }) => {
+  return (
+    <div className={className}>
+      <ReactComponent {...otherProps} />
+    </div>
+  );
+};
+
+ForceDirected.propTypes = {
+  className: PropTypes.string.isRequired,
+};
+
+export default styled(ForceDirected)`
+  .superset-legacy-chart-force-directed {
+    path.link {
+      fill: none;
+      stroke: #000;
+      stroke-width: 1.5px;
+    }
+    circle {
+      fill: #ccc;
+      stroke: #000;
+      stroke-width: 1.5px;
+      stroke-opacity: 1;
+      opacity: 0.75;
+    }
+    text {
+      fill: #000;
+      font: 10px sans-serif;
+      pointer-events: none;
+    }
+  }
+`;

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-force-directed/src/index.js

@@ -33,7 +33,7 @@ const metadata = new ChartMetadata({
 export default class ForceDirectedChartPlugin extends ChartPlugin {
   constructor() {
     super({
-      loadChart: () => import('./ReactForceDirected.js'),
+      loadChart: () => import('./ReactForceDirected'),
       metadata,
       transformProps,
       controlPanel,

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/package.json

@@ -34,7 +34,7 @@
   },
   "peerDependencies": {
     "@superset-ui/chart": "^0.14.0",
-    "@superset-ui/chart-controls": "^0.14.0",
+    "@superset-ui/chart-controls": "^0.14.3",
     "@superset-ui/number-format": "^0.14.0",
     "@superset-ui/translation": "^0.14.0"
   }