add emotion styling to chord (apache#578)

zhaoyongjie · Nov 26, 2021 · 297343e · 297343e
1 parent 2d31777
commit 297343e
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 39 deletions.
diff --git a/...frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/package.json b/...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/...rontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/Chord.css b/...rontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/Chord.css
diff --git a/...frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/Chord.js b/...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/...gacy-plugin-chart-chord/src/ReactChord.js → ...acy-plugin-chart-chord/src/ReactChord.jsx b/...gacy-plugin-chart-chord/src/ReactChord.js → ...acy-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;
+  }
+`;