You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by mi...@apache.org on 2022/04/07 14:51:18 UTC
[superset] branch master updated: refactor: Removes the CSS files from the Parallel Coordinates plugin (#19539)
This is an automated email from the ASF dual-hosted git repository.
michaelsmolina pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 38fbca10e3 refactor: Removes the CSS files from the Parallel Coordinates plugin (#19539)
38fbca10e3 is described below
commit 38fbca10e31f444f50961a79ce095233457dbe03
Author: Michael S. Molina <70...@users.noreply.github.com>
AuthorDate: Thu Apr 7 11:51:08 2022 -0300
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
---
.../packages/superset-ui-core/src/color/utils.ts | 6 ++
.../superset-ui-core/test/color/utils.test.ts | 10 ++-
.../src/ParallelCoordinates.js | 1 -
.../src/ReactParallelCoordinates.jsx | 95 ++++++++++++++++++++--
.../src/vendor/parcoords/d3.parcoords.css | 79 ------------------
5 files changed, 102 insertions(+), 89 deletions(-)
diff --git a/superset-frontend/packages/superset-ui-core/src/color/utils.ts b/superset-frontend/packages/superset-ui-core/src/color/utils.ts
index 0ce64d0490..f81a554690 100644
--- a/superset-frontend/packages/superset-ui-core/src/color/utils.ts
+++ b/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();
+}
diff --git a/superset-frontend/packages/superset-ui-core/test/color/utils.test.ts b/superset-frontend/packages/superset-ui-core/test/color/utils.test.ts
index f04b88dafc..e203b94d8f 100644
--- a/superset-frontend/packages/superset-ui-core/test/color/utils.test.ts
+++ b/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');
+ });
+ });
});
diff --git a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ParallelCoordinates.js b/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ParallelCoordinates.js
index 61d151d1f3..0529c86aff 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ParallelCoordinates.js
+++ b/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 }]
diff --git a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ReactParallelCoordinates.jsx b/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ReactParallelCoordinates.jsx
index 9e0ec30e54..712509e4eb 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ReactParallelCoordinates.jsx
+++ b/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;
+ }
+ `}
`;
diff --git a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/vendor/parcoords/d3.parcoords.css b/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/vendor/parcoords/d3.parcoords.css
deleted file mode 100644
index cc82bf9408..0000000000
--- a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/vendor/parcoords/d3.parcoords.css
+++ /dev/null
@@ -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;
-}