From 297343ec6e58559f62e2bbc07f545382a8492e1d Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 12 Jun 2020 06:56:34 -0700
Subject: [PATCH] add emotion styling to chord (#578)

---
 .../legacy-plugin-chart-chord/package.json    |  4 +-
 .../legacy-plugin-chart-chord/src/Chord.css   | 36 -----------------
 .../legacy-plugin-chart-chord/src/Chord.js    |  1 -
 .../src/{ReactChord.js => ReactChord.jsx}     | 39 ++++++++++++++++++-
 4 files changed, 41 insertions(+), 39 deletions(-)
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/Chord.css
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/{ReactChord.js => ReactChord.jsx} (51%)

diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/package.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/package.json
index b33149101a..f99a28c64d 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/package.json
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/package.json
@@ -28,8 +28,10 @@
     "access": "public"
   },
   "dependencies": {
+    "@superset-ui/style": "^0.13.26",
     "d3": "^3.5.17",
-    "prop-types": "^15.6.2"
+    "prop-types": "^15.6.2",
+    "react": "^16.13.1"
   },
   "peerDependencies": {
     "@superset-ui/chart": "^0.13.0",
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/Chord.css b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/Chord.css
deleted file mode 100644
index 581518f8c1..0000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/Chord.css
+++ /dev/null
@@ -1,36 +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-chord svg #circle circle {
-  fill: none;
-  pointer-events: all;
-}
-
-.superset-legacy-chart-chord svg .group path {
-  fill-opacity: 0.6;
-}
-
-.superset-legacy-chart-chord svg path.chord {
-  stroke: #000;
-  stroke-width: 0.25px;
-}
-
-.superset-legacy-chart-chord svg #circle:hover path.fade {
-  opacity: 0.2;
-}
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/Chord.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/Chord.js
index e1d1e49ad5..9889dc4db4 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/Chord.js
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/Chord.js
@@ -21,7 +21,6 @@ import d3 from 'd3';
 import PropTypes from 'prop-types';
 import { CategoricalColorNamespace } from '@superset-ui/color';
 import { getNumberFormatter } from '@superset-ui/number-format';
-import './Chord.css';
 
 const propTypes = {
   data: PropTypes.shape({
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/ReactChord.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/ReactChord.jsx
similarity index 51%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/ReactChord.js
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/ReactChord.jsx
index df070e7cc5..6b75fca9f4 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/ReactChord.js
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/ReactChord.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 './Chord';
 
-export default reactify(Component);
+const ReactComponent = reactify(Component);
+
+const Chord = ({ className, ...otherProps }) => {
+  return (
+    <div className={className}>
+      <ReactComponent {...otherProps} />
+    </div>
+  );
+};
+
+Chord.defaultProps = {
+  otherProps: {},
+};
+
+Chord.propTypes = {
+  className: PropTypes.string.isRequired,
+  otherProps: PropTypes.objectOf(PropTypes.any),
+};
+
+export default styled(Chord)`
+  .superset-legacy-chart-chord svg #circle circle {
+    fill: none;
+    pointer-events: all;
+  }
+  .superset-legacy-chart-chord svg .group path {
+    fill-opacity: 0.6;
+  }
+  .superset-legacy-chart-chord svg path.chord {
+    stroke: #000;
+    stroke-width: 0.25px;
+  }
+  .superset-legacy-chart-chord svg #circle:hover path.fade {
+    opacity: 0.2;
+  }
+`;