From ac6b2f2d93a684c0d482ce3638d936568974041c Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com> Date: Thu, 31 Mar 2022 13:32:20 -0300 Subject: [PATCH] refactor: Removes the CSS files from the Heatmap plugin (#19417) * refactor: Removes the CSS files from the Heatmap plugin * Adds peer dependencies --- .../legacy-plugin-chart-heatmap/package.json | 37 +++-- .../src/Heatmap.css | 72 --------- .../src/Heatmap.js | 3 - .../src/ReactHeatmap.js | 22 --- .../src/ReactHeatmap.jsx | 148 ++++++++++++++++++ .../src/vendor/d3tip.css | 74 --------- 6 files changed, 166 insertions(+), 190 deletions(-) delete mode 100644 superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.css delete mode 100644 superset-frontend/plugins/legacy-plugin-chart-heatmap/src/ReactHeatmap.js create mode 100644 superset-frontend/plugins/legacy-plugin-chart-heatmap/src/ReactHeatmap.jsx delete mode 100644 superset-frontend/plugins/legacy-plugin-chart-heatmap/src/vendor/d3tip.css diff --git a/superset-frontend/plugins/legacy-plugin-chart-heatmap/package.json b/superset-frontend/plugins/legacy-plugin-chart-heatmap/package.json index bb34fb817b0d0..692a9dc107704 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-heatmap/package.json +++ b/superset-frontend/plugins/legacy-plugin-chart-heatmap/package.json @@ -2,31 +2,25 @@ "name": "@superset-ui/legacy-plugin-chart-heatmap", "version": "0.18.25", "description": "Superset Legacy Chart - Heatmap", - "sideEffects": [ - "*.css" - ], - "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", + "homepage": "https://github.com/apache-superset/superset-ui#readme", "bugs": { "url": "https://github.com/apache-superset/superset-ui/issues" }, - "homepage": "https://github.com/apache-superset/superset-ui#readme", - "publishConfig": { - "access": "public" + "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" + ], "dependencies": { "d3": "^3.5.17", "d3-svg-legend": "^1.x", @@ -34,7 +28,12 @@ "prop-types": "^15.6.2" }, "peerDependencies": { + "@emotion/react": "^11.4.1", "@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-heatmap/src/Heatmap.css b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.css deleted file mode 100644 index cf26d7b43ea6d..0000000000000 --- a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.css +++ /dev/null @@ -1,72 +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-heatmap { - position: relative; - top: 0; - left: 0; - height: 100%; -} - -.superset-legacy-chart-heatmap .axis text { - font: 10px sans-serif; - text-rendering: optimizeLegibility; - fill: #555; -} - -.superset-legacy-chart-heatmap .background-rect { - stroke: #ddd; - fill-opacity: 0; - pointer-events: all; -} - -.superset-legacy-chart-heatmap .axis path, -.superset-legacy-chart-heatmap .axis line { - fill: none; - stroke: #ddd; - shape-rendering: crispEdges; -} - -.superset-legacy-chart-heatmap canvas, -.superset-legacy-chart-heatmap img { - image-rendering: optimizeSpeed; /* Older versions of FF */ - image-rendering: -moz-crisp-edges; /* FF 6.0+ */ - image-rendering: -webkit-optimize-contrast; /* Safari */ - image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ - image-rendering: pixelated; /* Awesome future-browsers */ - -ms-interpolation-mode: nearest-neighbor; /* IE */ -} - -.superset-legacy-chart-heatmap .legendCells text { - font-size: 10px; - font-weight: normal; - opacity: 0; -} - -.superset-legacy-chart-heatmap .legendCells .cell:first-child text { - opacity: 1; -} -.superset-legacy-chart-heatmap .legendCells .cell:last-child text { - opacity: 1; -} - -.dashboard .superset-legacy-chart-heatmap .axis text { - font-size: 10px; - opacity: 0.75; -} diff --git a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js index 4626116aa8cd5..dc442039112e7 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js +++ b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js @@ -27,9 +27,6 @@ import { getSequentialSchemeRegistry, } from '@superset-ui/core'; -import './vendor/d3tip.css'; -import './Heatmap.css'; - const propTypes = { data: PropTypes.shape({ records: PropTypes.arrayOf( diff --git a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/ReactHeatmap.js b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/ReactHeatmap.js deleted file mode 100644 index 6b98c23dca492..0000000000000 --- a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/ReactHeatmap.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 './Heatmap'; - -export default reactify(Component); diff --git a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/ReactHeatmap.jsx b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/ReactHeatmap.jsx new file mode 100644 index 0000000000000..22dde813b6b1e --- /dev/null +++ b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/ReactHeatmap.jsx @@ -0,0 +1,148 @@ +/** + * 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, css, styled } from '@superset-ui/core'; +import { Global } from '@emotion/react'; +import Component from './Heatmap'; + +const ReactComponent = reactify(Component); + +const Heatmap = ({ className, ...otherProps }) => ( +
+ css` + .d3-tip { + 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; + } + + /* Creates a small triangle extender for the tooltip */ + .d3-tip:after { + box-sizing: border-box; + display: inline; + font-size: ${theme.typography.sizes.xs}; + width: 100%; + line-height: 1; + color: ${theme.colors.grayscale.dark2}; + position: absolute; + pointer-events: none; + } + + /* Northward tooltips */ + .d3-tip.n:after { + content: '\\25BC'; + margin: -${theme.gridUnit}px 0 0 0; + top: 100%; + left: 0; + text-align: center; + } + + /* Eastward tooltips */ + .d3-tip.e:after { + content: '\\25C0'; + margin: -${theme.gridUnit}px 0 0 0; + top: 50%; + left: -${theme.gridUnit * 2}px; + } + + /* Southward tooltips */ + .d3-tip.s:after { + content: '\\25B2'; + margin: 0; + top: -${theme.gridUnit * 2}px; + left: 0; + text-align: center; + } + + /* Westward tooltips */ + .d3-tip.w:after { + content: '\\25B6'; + margin: -${theme.gridUnit}px 0 0 0px; + top: 50%; + left: 100%; + } + `} + /> + +
+); + +export default styled(Heatmap)` + ${({ theme }) => ` + .superset-legacy-chart-heatmap { + position: relative; + top: 0; + left: 0; + height: 100%; + } + + .superset-legacy-chart-heatmap .axis text { + font-size: ${theme.typography.sizes.xs}px; + text-rendering: optimizeLegibility; + } + + .superset-legacy-chart-heatmap .background-rect { + stroke: ${theme.colors.grayscale.light2}; + fill-opacity: 0; + pointer-events: all; + } + + .superset-legacy-chart-heatmap .axis path, + .superset-legacy-chart-heatmap .axis line { + fill: none; + stroke: ${theme.colors.grayscale.light2}; + shape-rendering: crispEdges; + } + + .superset-legacy-chart-heatmap canvas, + .superset-legacy-chart-heatmap img { + image-rendering: optimizeSpeed; /* Older versions of FF */ + image-rendering: -moz-crisp-edges; /* FF 6.0+ */ + image-rendering: -webkit-optimize-contrast; /* Safari */ + image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ + image-rendering: pixelated; /* Awesome future-browsers */ + -ms-interpolation-mode: nearest-neighbor; /* IE */ + } + + .superset-legacy-chart-heatmap .legendCells text { + font-size: ${theme.typography.sizes.xs}px; + font-weight: ${theme.typography.weights.normal}; + opacity: 0; + } + + .superset-legacy-chart-heatmap .legendCells .cell:first-child text { + opacity: 1; + } + + .superset-legacy-chart-heatmap .legendCells .cell:last-child text { + opacity: 1; + } + + .dashboard .superset-legacy-chart-heatmap .axis text { + font-size: ${theme.typography.sizes.xs}px; + opacity: ${theme.opacity.heavy}; + } + `} +`; diff --git a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/vendor/d3tip.css b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/vendor/d3tip.css deleted file mode 100644 index 980a5be4396ef..0000000000000 --- a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/vendor/d3tip.css +++ /dev/null @@ -1,74 +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. - */ -/* from d3-tip */ -.d3-tip { - line-height: 1; - padding: 12px; - background: rgba(0, 0, 0, 0.8); - color: #fff; - border-radius: 2px; - pointer-events: none; - z-index: 1000; -} - -/* Creates a small triangle extender for the tooltip */ -.d3-tip:after { - box-sizing: border-box; - display: inline; - font-size: 10px; - width: 100%; - line-height: 1; - color: rgba(0, 0, 0, 0.8); - position: absolute; - pointer-events: none; -} - -/* Northward tooltips */ -.d3-tip.n:after { - content: '\25BC'; - margin: -1px 0 0 0; - top: 100%; - left: 0; - text-align: center; -} - -/* Eastward tooltips */ -.d3-tip.e:after { - content: '\25C0'; - margin: -4px 0 0 0; - top: 50%; - left: -8px; -} - -/* Southward tooltips */ -.d3-tip.s:after { - content: '\25B2'; - margin: 0 0 1px 0; - top: -8px; - left: 0; - text-align: center; -} - -/* Westward tooltips */ -.d3-tip.w:after { - content: '\25B6'; - margin: -4px 0 0 -1px; - top: 50%; - left: 100%; -}