refactor: Removes the CSS files from the Parallel Coordinates plugin (#…

…19539)

* refactor: Removes the CSS files from the Parallel Coordinates plugin

* Adds test

* Fixes indentation

superset-frontend/packages/superset-ui-core/src/color/utils.ts

@@ -73,3 +73,9 @@ export function getAnalogousColors(colors: string[], results: number) {
 
   return generatedColors;
 }
+
+export function addAlpha(color: string, opacity: number): string {
+  // coerce values so ti is between 0 and 1.
+  const rounded = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);
+  return color + rounded.toString(16).toUpperCase();
+}

superset-frontend/packages/superset-ui-core/test/color/utils.test.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { getContrastingColor } from '@superset-ui/core';
+import { getContrastingColor, addAlpha } from '@superset-ui/core';
 
 describe('color utils', () => {
   describe('getContrastingColor', () => {
@@ -60,4 +60,12 @@ describe('color utils', () => {
       }).toThrow();
     });
   });
+  describe('addAlpha', () => {
+    it('adds 20% opacity to black', () => {
+      expect(addAlpha('#000000', 0.2)).toBe('#00000033');
+    });
+    it('adds 50% opacity to white', () => {
+      expect(addAlpha('#FFFFFF', 0.5)).toBe('#FFFFFF80');
+    });
+  });
 });

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ParallelCoordinates.js

@@ -23,7 +23,6 @@ import { getSequentialSchemeRegistry } from '@superset-ui/core';
 
 import parcoords from './vendor/parcoords/d3.parcoords';
 import divgrid from './vendor/parcoords/divgrid';
-import './vendor/parcoords/d3.parcoords.css';
 
 const propTypes = {
   // Standard tabular data [{ fieldName1: value1, fieldName2: value2 }]

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ReactParallelCoordinates.jsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { styled, reactify } from '@superset-ui/core';
+import { styled, reactify, addAlpha } from '@superset-ui/core';
 import PropTypes from 'prop-types';
 import Component from './ParallelCoordinates';
 
@@ -34,14 +34,93 @@ ParallelCoordianes.propTypes = {
 };
 
 export default styled(ParallelCoordianes)`
-  .superset-legacy-chart-parallel-coordinates {
-    div.grid {
-      overflow: auto;
-      div.row {
-        &:hover {
-          background-color: ${({ theme }) => theme.colors.grayscale.light2};
+  ${({ theme }) => `
+    .superset-legacy-chart-parallel-coordinates {
+      div.grid {
+        overflow: auto;
+        div.row {
+          &:hover {
+            background-color: ${theme.colors.grayscale.light2};
+          }
         }
       }
     }
-  }
+    .parcoords svg,
+    .parcoords canvas {
+      font-size: ${theme.typography.sizes.s}px;
+      position: absolute;
+    }
+    .parcoords > canvas {
+      pointer-events: none;
+    }
+
+    .parcoords text.label {
+      font: 100%;
+      font-size: ${theme.typography.sizes.s}px;
+      cursor: drag;
+    }
+    .parcoords rect.background {
+      fill: transparent;
+    }
+    .parcoords rect.background:hover {
+      fill: ${addAlpha(theme.colors.grayscale.base, 0.2)};
+    }
+    .parcoords .resize rect {
+      fill: ${addAlpha(theme.colors.grayscale.dark2, 0.1)};
+    }
+    .parcoords rect.extent {
+      fill: ${addAlpha(theme.colors.grayscale.light5, 0.25)};
+      stroke: ${addAlpha(theme.colors.grayscale.dark2, 0.6)};
+    }
+    .parcoords .axis line,
+    .parcoords .axis path {
+      fill: none;
+      stroke: ${theme.colors.grayscale.dark1};
+      shape-rendering: crispEdges;
+    }
+    .parcoords canvas {
+      opacity: 1;
+      -moz-transition: opacity 0.3s;
+      -webkit-transition: opacity 0.3s;
+      -o-transition: opacity 0.3s;
+    }
+    .parcoords canvas.faded {
+      opacity: ${theme.opacity.mediumLight};
+    }
+    .parcoords {
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      -khtml-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      background-color: ${theme.colors.grayscale.light5};
+    }
+
+    /* data table styles */
+    .parcoords .row,
+    .parcoords .header {
+      clear: left;
+      font-size: ${theme.typography.sizes.s}px;
+      line-height: 18px;
+      height: 18px;
+      margin: 0px;
+    }
+    .parcoords .row:nth-child(odd) {
+      background: ${addAlpha(theme.colors.grayscale.dark2, 0.05)};
+    }
+    .parcoords .header {
+      font-weight: ${theme.typography.weights.bold};
+    }
+    .parcoords .cell {
+      float: left;
+      overflow: hidden;
+      white-space: nowrap;
+      width: 100px;
+      height: 18px;
+    }
+    .parcoords .col-0 {
+      width: 180px;
+    }
+  `}
 `;