From daff5684f9a29f8642e002ed8ef710ab1689cf5c Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" Date: Tue, 5 Apr 2022 16:29:20 -0300 Subject: [PATCH 1/3] refactor: Removes the CSS files from the Parallel Coordinates plugin --- .../superset-ui-core/src/color/utils.ts | 6 ++ .../src/ParallelCoordinates.js | 1 - .../src/ReactParallelCoordinates.jsx | 95 +++++++++++++++++-- .../src/vendor/parcoords/d3.parcoords.css | 79 --------------- 4 files changed, 93 insertions(+), 88 deletions(-) delete mode 100644 superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/vendor/parcoords/d3.parcoords.css 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 0ce64d049012c..f81a55469041d 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/plugins/legacy-plugin-chart-parallel-coordinates/src/ParallelCoordinates.js b/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ParallelCoordinates.js index 61d151d1f3e8d..0529c86aff10d 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 9e0ec30e546e4..712509e4eb0df 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 cc82bf94080b3..0000000000000 --- 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; -} From 0168fad729e80686250f6ac58ef78359ab13930e Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" Date: Wed, 6 Apr 2022 09:01:44 -0300 Subject: [PATCH 2/3] Adds test --- .../packages/superset-ui-core/test/color/utils.test.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) 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 f04b88dafc70e..32c7019f38662 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', () => { @@ -59,5 +59,13 @@ describe('color utils', () => { getContrastingColor('#0000'); }).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'); + }); + }); }); }); From 8a3625d5530c9cd2f7135c7057d6f07bab940a81 Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" Date: Wed, 6 Apr 2022 09:02:44 -0300 Subject: [PATCH 3/3] Fixes indentation --- .../superset-ui-core/test/color/utils.test.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) 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 32c7019f38662..e203b94d8fcdd 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 @@ -59,13 +59,13 @@ describe('color utils', () => { getContrastingColor('#0000'); }).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'); - }); + }); + 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'); }); }); });