diff --git a/superset-frontend/plugins/legacy-plugin-chart-rose/package.json b/superset-frontend/plugins/legacy-plugin-chart-rose/package.json index 1541f323fe..20deaa3bdb 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-rose/package.json +++ b/superset-frontend/plugins/legacy-plugin-chart-rose/package.json @@ -2,39 +2,37 @@ "name": "@superset-ui/legacy-plugin-chart-rose", "version": "0.18.25", "description": "Superset Legacy Chart - Nightingale Rose Diagram", - "sideEffects": [ - "*.css" + "keywords": [ + "superset" ], + "homepage": "https://github.com/apache-superset/superset-ui#readme", + "bugs": { + "url": "https://github.com/apache-superset/superset-ui/issues" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/apache-superset/superset-ui.git" + }, + "license": "Apache-2.0", + "author": "Superset", "main": "lib/index.js", "module": "esm/index.js", "files": [ "esm", "lib" ], - "repository": { - "type": "git", - "url": "git+https://github.com/apache-superset/superset-ui.git" - }, - "keywords": [ - "superset" - ], - "author": "Superset", - "license": "Apache-2.0", - "bugs": { - "url": "https://github.com/apache-superset/superset-ui/issues" - }, - "homepage": "https://github.com/apache-superset/superset-ui#readme", - "publishConfig": { - "access": "public" - }, "dependencies": { "d3": "^3.5.17", "nvd3-fork": "^2.0.5", "prop-types": "^15.6.2" }, "peerDependencies": { + "@emotion/react": "^11.4.1", "@superset-ui/chart-controls": "*", "@superset-ui/core": "*", "react": "^16.13.1" + }, + "publishConfig": { + "access": "public" } } diff --git a/superset-frontend/plugins/legacy-plugin-chart-rose/src/ReactRose.js b/superset-frontend/plugins/legacy-plugin-chart-rose/src/ReactRose.js deleted file mode 100644 index bfdd152460..0000000000 --- a/superset-frontend/plugins/legacy-plugin-chart-rose/src/ReactRose.js +++ /dev/null @@ -1,22 +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. - */ -import { reactify } from '@superset-ui/core'; -import Component from './Rose'; - -export default reactify(Component); diff --git a/superset-frontend/plugins/legacy-plugin-chart-rose/src/ReactRose.jsx b/superset-frontend/plugins/legacy-plugin-chart-rose/src/ReactRose.jsx new file mode 100644 index 0000000000..33d9cd4f9c --- /dev/null +++ b/superset-frontend/plugins/legacy-plugin-chart-rose/src/ReactRose.jsx @@ -0,0 +1,75 @@ +/** + * 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, styled, css } from '@superset-ui/core'; +import { Global } from '@emotion/react'; +import Component from './Rose'; + +const ReactComponent = reactify(Component); + +const Rose = ({ className, ...otherProps }) => ( +
+ css` + .tooltip { + line-height: 1; + padding: ${theme.gridUnit * 3}px; + background: ${theme.colors.grayscale.dark2}; + color: ${theme.colors.grayscale.light5}; + border-radius: 4px; + pointer-events: none; + z-index: 1000; + font-size: ${theme.typography.sizes.s}px; + } + `} + /> + +
+); + +export default styled(Rose)` + ${({ theme }) => ` + .superset-legacy-chart-rose path { + transition: fill-opacity 180ms linear; + stroke: ${theme.colors.grayscale.light5}; + stroke-width: 1px; + stroke-opacity: 1; + fill-opacity: 0.75; + } + + .superset-legacy-chart-rose text { + font-weight: ${theme.typography.weights.normal}; + font-size: ${theme.typography.sizes.s}px; + font-family: ${theme.typography.families.sansSerif}; + pointer-events: none; + } + + .superset-legacy-chart-rose .clickable path { + cursor: pointer; + } + + .superset-legacy-chart-rose .hover path { + fill-opacity: 1; + } + + .nv-legend .nv-series { + cursor: pointer; + } + `} +`; diff --git a/superset-frontend/plugins/legacy-plugin-chart-rose/src/Rose.css b/superset-frontend/plugins/legacy-plugin-chart-rose/src/Rose.css deleted file mode 100644 index 441e95c5d4..0000000000 --- a/superset-frontend/plugins/legacy-plugin-chart-rose/src/Rose.css +++ /dev/null @@ -1,43 +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-rose path { - transition: fill-opacity 180ms linear; - stroke: #fff; - stroke-width: 1px; - stroke-opacity: 1; - fill-opacity: 0.75; -} - -.superset-legacy-chart-rose text { - font: 400 12px Arial, sans-serif; - pointer-events: none; -} - -.superset-legacy-chart-rose .clickable path { - cursor: pointer; -} - -.superset-legacy-chart-rose .hover path { - fill-opacity: 1; -} - -.nv-legend .nv-series { - cursor: pointer; -} diff --git a/superset-frontend/plugins/legacy-plugin-chart-rose/src/Rose.js b/superset-frontend/plugins/legacy-plugin-chart-rose/src/Rose.js index 4d7ef2b8ed..2dfa2ffdd7 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-rose/src/Rose.js +++ b/superset-frontend/plugins/legacy-plugin-chart-rose/src/Rose.js @@ -27,7 +27,6 @@ import { getNumberFormatter, CategoricalColorNamespace, } from '@superset-ui/core'; -import './Rose.css'; const propTypes = { // Data is an object hashed by numeric value, perhaps timestamp @@ -137,6 +136,7 @@ function Rose(element, props) { legendWrap.datum(legendData(datum)).call(legend); tooltip.headerFormatter(timeFormat).valueFormatter(format); + tooltip.classes('tooltip'); // Compute max radius, which the largest value will occupy const roseHeight = height - legend.height();