chore(chart-sankey): use emotion styling typography (apache#651)

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

@@ -29,13 +29,15 @@
   },
   "dependencies": {
     "d3": "^3.5.17",
-    "d3-sankey": "^0.4.2",
-    "prop-types": "^15.6.2"
+    "d3-sankey": "^0.4.2"
   },
   "peerDependencies": {
+    "@superset-ui/style": "^0.14.3",
     "@superset-ui/chart": "^0.14.0",
     "@superset-ui/color": "^0.14.0",
     "@superset-ui/number-format": "^0.14.0",
-    "@superset-ui/translation": "^0.14.0"
+    "@superset-ui/translation": "^0.14.0",
+    "prop-types": "^15.6.2",
+    "react": "^16.13.1"
   }
 }

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-sankey/src/ReactSankey.jsx

@@ -0,0 +1,73 @@
+/**
+ * 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.
+ */
+import React from 'react';
+import { reactify } from '@superset-ui/chart';
+import styled from '@superset-ui/style';
+import PropTypes from 'prop-types';
+import SanKey from './Sankey';
+
+const ReactSanKey = reactify(SanKey);
+
+const SankeyComponent = ({ className, ...otherProps }) => {
+  return (
+    <div className={className}>
+      <ReactSanKey {...otherProps} />
+    </div>
+  );
+};
+
+SankeyComponent.propTypes = {
+  className: PropTypes.string.isRequired,
+};
+
+export default styled(SankeyComponent)`
+  .superset-legacy-chart-sankey {
+    .node {
+      rect {
+        cursor: move;
+        fill-opacity: 0.9;
+        shape-rendering: crispEdges;
+      }
+      text {
+        pointer-events: none;
+        text-shadow: 0 1px 0 #fff;
+      }
+    }
+    .link {
+      fill: none;
+      stroke: #000;
+      stroke-opacity: 0.2;
+      &:hover {
+        stroke-opacity: 0.5;
+      }
+    }
+  }
+  .superset-legacy-chart-sankey-tooltip {
+    position: absolute;
+    width: auto;
+    background: #ddd;
+    padding: 10px;
+    font-size: ${({ theme }) => theme.typography.sizes.s};
+    font-weight: ${({ theme }) => theme.typography.weights.light};
+    color: #333;
+    border: 1px solid #fff;
+    text-align: center;
+    pointer-events: none;
+  }
+`;

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-sankey/src/Sankey.js

@@ -23,7 +23,6 @@ import PropTypes from 'prop-types';
 import { sankey as d3Sankey } from 'd3-sankey';
 import { CategoricalColorNamespace } from '@superset-ui/color';
 import { getNumberFormatter, NumberFormats } from '@superset-ui/number-format';
-import './Sankey.css';
 
 const propTypes = {
   data: PropTypes.arrayOf(

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

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