refactor: Removes the CSS files from the Treemap plugin (apache#19486)

ValtechMobility · Jun 9, 2022 · 07f12c3 · 07f12c3
1 parent 36f928e
commit 07f12c3
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 43 deletions.
diff --git 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/...-plugin-chart-treemap/src/ReactTreemap.js → ...plugin-chart-treemap/src/ReactTreemap.jsx b/...-plugin-chart-treemap/src/ReactTreemap.js → ...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 }) => (
+  <div className={className}>
+    <ReactComponent {...otherProps} />
+  </div>
+);
+
+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
diff --git 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