diff --git a/superset-frontend/plugins/legacy-plugin-chart-partition/package.json b/superset-frontend/plugins/legacy-plugin-chart-partition/package.json index 647a730fed..2384214fd9 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-partition/package.json +++ b/superset-frontend/plugins/legacy-plugin-chart-partition/package.json @@ -2,31 +2,25 @@ "name": "@superset-ui/legacy-plugin-chart-partition", "version": "0.18.25", "description": "Superset Legacy Chart - Partition", - "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", "d3-hierarchy": "^1.1.8", @@ -35,7 +29,10 @@ "peerDependencies": { "@superset-ui/chart-controls": "*", "@superset-ui/core": "*", - "react": "^16.13.1", - "enzyme": "*" + "enzyme": "*", + "react": "^16.13.1" + }, + "publishConfig": { + "access": "public" } } diff --git a/superset-frontend/plugins/legacy-plugin-chart-partition/src/Partition.css b/superset-frontend/plugins/legacy-plugin-chart-partition/src/Partition.css deleted file mode 100644 index 4fce2089b9..0000000000 --- a/superset-frontend/plugins/legacy-plugin-chart-partition/src/Partition.css +++ /dev/null @@ -1,64 +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-partition { - position: relative; -} - -.superset-legacy-chart-partition .chart { - display: block; - margin: auto; - font-size: 11px; -} - -.superset-legacy-chart-partition rect { - stroke: #eee; - fill: #aaa; - fill-opacity: 0.8; - transition: fill-opacity 180ms linear; - cursor: pointer; -} - -.superset-legacy-chart-partition rect:hover { - fill-opacity: 1; -} - -.superset-legacy-chart-partition g text { - font-weight: bold; - fill: rgba(0, 0, 0, 0.8); -} - -.superset-legacy-chart-partition g:hover text { - fill: rgba(0, 0, 0, 1); -} - -.superset-legacy-chart-partition .partition-tooltip { - position: absolute; - top: 0; - left: 0; - opacity: 0; - padding: 5px; - pointer-events: none; - background-color: rgba(255, 255, 255, 0.75); - border-radius: 5px; -} - -.partition-tooltip td { - padding-left: 5px; - font-size: 11px; -} diff --git a/superset-frontend/plugins/legacy-plugin-chart-partition/src/Partition.js b/superset-frontend/plugins/legacy-plugin-chart-partition/src/Partition.js index 5355530cd5..2247061668 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-partition/src/Partition.js +++ b/superset-frontend/plugins/legacy-plugin-chart-partition/src/Partition.js @@ -26,7 +26,6 @@ import { getTimeFormatter, CategoricalColorNamespace, } from '@superset-ui/core'; -import './Partition.css'; // Compute dx, dy, x, y for each node and // return an array of nodes in breadth-first order @@ -268,13 +267,12 @@ function Icicle(element, props) { if (useRichTooltip) { const nodes = getAncestors(d); nodes.reverse().forEach(n => { - const atNode = n.depth === d.depth; t += ''; t += '' + '' + '
' + '' + diff --git a/superset-frontend/plugins/legacy-plugin-chart-partition/src/ReactPartition.js b/superset-frontend/plugins/legacy-plugin-chart-partition/src/ReactPartition.js deleted file mode 100644 index 22d61a6c88..0000000000 --- a/superset-frontend/plugins/legacy-plugin-chart-partition/src/ReactPartition.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 './Partition'; - -export default reactify(Component); diff --git a/superset-frontend/plugins/legacy-plugin-chart-partition/src/ReactPartition.jsx b/superset-frontend/plugins/legacy-plugin-chart-partition/src/ReactPartition.jsx new file mode 100644 index 0000000000..d73476ac58 --- /dev/null +++ b/superset-frontend/plugins/legacy-plugin-chart-partition/src/ReactPartition.jsx @@ -0,0 +1,81 @@ +/** + * 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 } from '@superset-ui/core'; +import Component from './Partition'; + +const ReactComponent = reactify(Component); + +const Partition = ({ className, ...otherProps }) => ( +
+ +
+); + +export default styled(Partition)` + ${({ theme }) => ` + .superset-legacy-chart-partition { + position: relative; + } + + .superset-legacy-chart-partition .chart { + display: block; + margin: auto; + font-size: ${theme.typography.sizes.s}px; + } + + .superset-legacy-chart-partition rect { + stroke: ${theme.colors.grayscale.light2}; + fill: ${theme.colors.grayscale.light1}; + fill-opacity: ${theme.opacity.heavy}; + transition: fill-opacity 180ms linear; + cursor: pointer; + } + + .superset-legacy-chart-partition rect:hover { + fill-opacity: 1; + } + + .superset-legacy-chart-partition g text { + font-weight: ${theme.typography.weights.bold}; + fill: ${theme.colors.grayscale.dark1}; + } + + .superset-legacy-chart-partition g:hover text { + fill: ${theme.colors.grayscale.dark2}; + } + + .superset-legacy-chart-partition .partition-tooltip { + position: absolute; + top: 0; + left: 0; + opacity: 0; + padding: ${theme.gridUnit}px; + pointer-events: none; + background-color: ${theme.colors.grayscale.dark2}; + border-radius: ${theme.gridUnit}px; + } + + .partition-tooltip td { + padding-left: ${theme.gridUnit}px; + font-size: ${theme.typography.sizes.s}px; + color: ${theme.colors.grayscale.light5}; + } + `} +`;