diff --git a/superset-frontend/plugins/legacy-plugin-chart-treemap/package.json b/superset-frontend/plugins/legacy-plugin-chart-treemap/package.json index 3bcfa150909b4..96d582d7859cb 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-treemap/package.json +++ b/superset-frontend/plugins/legacy-plugin-chart-treemap/package.json @@ -15,9 +15,6 @@ }, "license": "Apache-2.0", "author": "Superset", - "sideEffects": [ - "*.css" - ], "main": "lib/index.js", "module": "esm/index.js", "files": [ @@ -31,7 +28,8 @@ }, "peerDependencies": { "@superset-ui/chart-controls": "*", - "@superset-ui/core": "*" + "@superset-ui/core": "*", + "react": "^16.13.1" }, "publishConfig": { "access": "public" diff --git a/superset-frontend/plugins/legacy-plugin-chart-treemap/src/ReactTreemap.js b/superset-frontend/plugins/legacy-plugin-chart-treemap/src/ReactTreemap.jsx similarity index 52% rename from superset-frontend/plugins/legacy-plugin-chart-treemap/src/ReactTreemap.js rename to superset-frontend/plugins/legacy-plugin-chart-treemap/src/ReactTreemap.jsx index 743115c018798..c00d8b5d17492 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-treemap/src/ReactTreemap.js +++ b/superset-frontend/plugins/legacy-plugin-chart-treemap/src/ReactTreemap.jsx @@ -16,7 +16,36 @@ * specific language governing permissions and limitations * under the License. */ -import { reactify } from '@superset-ui/core'; +import React from 'react'; +import { reactify, styled } from '@superset-ui/core'; import Component from './Treemap'; -export default reactify(Component); +const ReactComponent = reactify(Component); + +const Treemap = ({ className, ...otherProps }) => ( +
+ +
+); + +export default styled(Treemap)` + ${({ theme }) => ` + .superset-legacy-chart-treemap text { + font-size: ${theme.typography.sizes.s}px; + pointer-events: none; + } + + .superset-legacy-chart-treemap tspan:last-child { + font-size: ${theme.typography.sizes.xs}px; + fill-opacity: 0.8; + } + + .superset-legacy-chart-treemap .node rect { + shape-rendering: crispEdges; + } + + .superset-legacy-chart-treemap .node--hover rect { + stroke: ${theme.colors.grayscale.dark2}; + } + `} +`; diff --git a/superset-frontend/plugins/legacy-plugin-chart-treemap/src/Treemap.css b/superset-frontend/plugins/legacy-plugin-chart-treemap/src/Treemap.css deleted file mode 100644 index f49b425f200ba..0000000000000 --- a/superset-frontend/plugins/legacy-plugin-chart-treemap/src/Treemap.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-treemap text { - font-size: 11px; - pointer-events: none; -} - -.superset-legacy-chart-treemap tspan:last-child { - font-size: 9px; - fill-opacity: 0.8; -} - -.superset-legacy-chart-treemap .node rect { - shape-rendering: crispEdges; -} - -.superset-legacy-chart-treemap .node--hover rect { - stroke: #000; -} diff --git a/superset-frontend/plugins/legacy-plugin-chart-treemap/src/Treemap.js b/superset-frontend/plugins/legacy-plugin-chart-treemap/src/Treemap.js index f218218ec8bbd..e0f4e691220c2 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-treemap/src/Treemap.js +++ b/superset-frontend/plugins/legacy-plugin-chart-treemap/src/Treemap.js @@ -29,7 +29,6 @@ import { getNumberFormatter, CategoricalColorNamespace, } from '@superset-ui/core'; -import './Treemap.css'; // Declare PropTypes for recursive data structures // https://github.com/facebook/react/issues/5676