refactor: Removes the CSS files from the Horizon plugin (#19562)

* refactor: Removes the CSS files from the Horizon plugin * Removes the CSS file * Uses font-size from the theme
apache · Apr 7, 2022 · d511e4f · d511e4f
1 parent f91f83d
commit d511e4f
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 78 deletions.
diff --git a/superset-frontend/plugins/legacy-plugin-chart-horizon/package.json b/superset-frontend/plugins/legacy-plugin-chart-horizon/package.json
@@ -2,31 +2,25 @@
   "name": "@superset-ui/legacy-plugin-chart-horizon",
   "version": "0.18.25",
   "description": "Superset Legacy Chart - Horizon",
-  "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-array": "^2.0.3",
     "d3-scale": "^3.0.1",
@@ -36,5 +30,8 @@
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
     "react": "^15 || ^16"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }
diff --git a/superset-frontend/plugins/legacy-plugin-chart-horizon/src/HorizonChart.css b/superset-frontend/plugins/legacy-plugin-chart-horizon/src/HorizonChart.css
diff --git a/superset-frontend/plugins/legacy-plugin-chart-horizon/src/HorizonChart.jsx b/superset-frontend/plugins/legacy-plugin-chart-horizon/src/HorizonChart.jsx
@@ -20,9 +20,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { extent as d3Extent } from 'd3-array';
-import { ensureIsArray } from '@superset-ui/core';
+import { ensureIsArray, styled } from '@superset-ui/core';
 import HorizonRow, { DEFAULT_COLORS } from './HorizonRow';
-import './HorizonChart.css';
 
 const propTypes = {
   className: PropTypes.string,
@@ -58,6 +57,29 @@ const defaultProps = {
   offsetX: 0,
 };
 
+const StyledDiv = styled.div`
+  ${({ theme }) => `
+    .superset-legacy-chart-horizon {
+      overflow: auto;
+      position: relative;
+    }
+
+    .superset-legacy-chart-horizon .horizon-row {
+      border-bottom: solid 1px ${theme.colors.grayscale.light2};
+      border-top: 0;
+      padding: 0;
+      margin: 0;
+    }
+
+    .superset-legacy-chart-horizon .horizon-row span.title {
+      position: absolute;
+      color: ${theme.colors.grayscale.dark1};
+      font-size: ${theme.typography.sizes.s}px;
+      margin: 0;
+    }
+  `}
+`;
+
 class HorizonChart extends React.PureComponent {
   render() {
     const {
@@ -83,26 +105,28 @@ class HorizonChart extends React.PureComponent {
     }
 
     return (
-      <div
-        className={`superset-legacy-chart-horizon ${className}`}
-        style={{ height }}
-      >
-        {data.map(row => (
-          <HorizonRow
-            key={row.key}
-            width={width}
-            height={seriesHeight}
-            title={ensureIsArray(row.key).join(', ')}
-            data={row.values}
-            bands={bands}
-            colors={colors}
-            colorScale={colorScale}
-            mode={mode}
-            offsetX={offsetX}
-            yDomain={yDomain}
-          />
-        ))}
-      </div>
+      <StyledDiv>
+        <div
+          className={`superset-legacy-chart-horizon ${className}`}
+          style={{ height }}
+        >
+          {data.map(row => (
+            <HorizonRow
+              key={row.key}
+              width={width}
+              height={seriesHeight}
+              title={ensureIsArray(row.key).join(', ')}
+              data={row.values}
+              bands={bands}
+              colors={colors}
+              colorScale={colorScale}
+              mode={mode}
+              offsetX={offsetX}
+              yDomain={yDomain}
+            />
+          ))}
+        </div>
+      </StyledDiv>
     );
   }
 }