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
This commit is contained in:
Michael S. Molina
2022-04-07 11:51:08 -03:00
committed by GitHub
parent 97850a80c8
commit 38fbca10e3
5 changed files with 102 additions and 89 deletions

View File

@@ -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 }]

View File

@@ -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;
}
`}
`;

View File

@@ -1,79 +0,0 @@
/* [LICENSE TBD] */
.parcoords svg,
.parcoords canvas {
font-size: 12px;
position: absolute;
}
.parcoords > canvas {
pointer-events: none;
}
.parcoords text.label {
font: 100%;
font-size: 12px;
cursor: drag;
}
.parcoords rect.background {
fill: transparent;
}
.parcoords rect.background:hover {
fill: rgba(120, 120, 120, 0.2);
}
.parcoords .resize rect {
fill: rgba(0, 0, 0, 0.1);
}
.parcoords rect.extent {
fill: rgba(255, 255, 255, 0.25);
stroke: rgba(0, 0, 0, 0.6);
}
.parcoords .axis line,
.parcoords .axis path {
fill: none;
stroke: #222;
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: 0.25;
}
.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: white;
}
/* data table styles */
.parcoords .row,
.parcoords .header {
clear: left;
font-size: 12px;
line-height: 18px;
height: 18px;
margin: 0px;
}
.parcoords .row:nth-child(odd) {
background: rgba(0, 0, 0, 0.05);
}
.parcoords .header {
font-weight: bold;
}
.parcoords .cell {
float: left;
overflow: hidden;
white-space: nowrap;
width: 100px;
height: 18px;
}
.parcoords .col-0 {
width: 180px;
}