You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by vi...@apache.org on 2022/04/04 08:22:21 UTC
[superset] 12/24: refactor: Removes the CSS files from the Calendar Heatmap plugin (#19436)
This is an automated email from the ASF dual-hosted git repository.
villebro pushed a commit to tag 1.5.0rc1
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 70d800dc274f75803ba719882489a09a80769e88
Author: Michael S. Molina <70...@users.noreply.github.com>
AuthorDate: Thu Mar 31 13:31:20 2022 -0300
refactor: Removes the CSS files from the Calendar Heatmap plugin (#19436)
(cherry picked from commit 13467beb537f08714c49c6336bc812bb7c1e5ba3)
---
.../legacy-plugin-chart-calendar/package.json | 34 ++--
.../legacy-plugin-chart-calendar/src/Calendar.js | 1 -
.../src/ReactCalendar.jsx | 207 +++++++++++++++++++--
.../src/vendor/cal-heatmap.css | 129 -------------
.../src/vendor/cal-heatmap.js | 1 -
.../src/vendor/d3tip.css | 74 --------
6 files changed, 212 insertions(+), 234 deletions(-)
diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/package.json b/superset-frontend/plugins/legacy-plugin-chart-calendar/package.json
index 4736432709..cb11164183 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-calendar/package.json
+++ b/superset-frontend/plugins/legacy-plugin-chart-calendar/package.json
@@ -2,31 +2,25 @@
"name": "@superset-ui/legacy-plugin-chart-calendar",
"version": "0.18.25",
"description": "Superset Legacy Chart - Calendar Heatmap",
- "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-selection": "^1.4.0",
@@ -34,8 +28,12 @@
"prop-types": "^15.6.2"
},
"peerDependencies": {
+ "@emotion/react": "^11.4.1",
"@superset-ui/chart-controls": "*",
"@superset-ui/core": "*",
"react": "^16.13.1"
+ },
+ "publishConfig": {
+ "access": "public"
}
}
diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js
index a1adc28189..74a9aecb49 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js
+++ b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js
@@ -21,7 +21,6 @@ import { extent as d3Extent, range as d3Range } from 'd3-array';
import { select as d3Select } from 'd3-selection';
import { getSequentialSchemeRegistry } from '@superset-ui/core';
import CalHeatMap from './vendor/cal-heatmap';
-import './vendor/cal-heatmap.css';
const propTypes = {
data: PropTypes.shape({
diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx
index cf2097ed95..e7d39d6310 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx
@@ -18,13 +18,69 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
-import { reactify, styled } from '@superset-ui/core';
+import { reactify, styled, css } from '@superset-ui/core';
+import { Global } from '@emotion/react';
import Component from './Calendar';
const ReactComponent = reactify(Component);
const Calender = ({ className, ...otherProps }) => (
<div className={className}>
+ <Global
+ styles={theme => css`
+ .d3-tip {
+ line-height: 1;
+ padding: ${theme.gridUnit * 3}px;
+ background: ${theme.colors.grayscale.dark2};
+ color: ${theme.colors.grayscale.light5};
+ border-radius: 4px;
+ pointer-events: none;
+ z-index: 1000;
+ font-size: ${theme.typography.sizes.s}px;
+ }
+ /* Creates a small triangle extender for the tooltip */
+ .d3-tip:after {
+ box-sizing: border-box;
+ display: inline;
+ font-size: ${theme.typography.sizes.xs};
+ width: 100%;
+ line-height: 1;
+ color: ${theme.colors.grayscale.dark2};
+ position: absolute;
+ pointer-events: none;
+ }
+ /* Northward tooltips */
+ .d3-tip.n:after {
+ content: '\\25BC';
+ margin: -${theme.gridUnit}px 0 0 0;
+ top: 100%;
+ left: 0;
+ text-align: center;
+ }
+ /* Eastward tooltips */
+ .d3-tip.e:after {
+ content: '\\25C0';
+ margin: -${theme.gridUnit}px 0 0 0;
+ top: 50%;
+ left: -${theme.gridUnit * 2}px;
+ }
+ /* Southward tooltips */
+ .d3-tip.s:after {
+ content: '\\25B2';
+ margin: 0;
+ top: -${theme.gridUnit * 2}px;
+ left: 0;
+ text-align: center;
+ }
+ /* Westward tooltips */
+ .d3-tip.w:after {
+ content: '\\25B6';
+ margin: -${theme.gridUnit}px 0 0 0px;
+ top: 50%;
+ left: 100%;
+ }
+ `}
+ />
<ReactComponent {...otherProps} />
</div>
);
@@ -39,14 +95,143 @@ Calender.propTypes = {
};
export default styled(Calender)`
- .superset-legacy-chart-calendar {
- padding: 10px;
- position: static !important;
- overflow: auto !important;
- }
-
- .superset-legacy-chart-calendar .ch-tooltip {
- margin-left: 20px;
- margin-top: 5px;
- }
+ ${({ theme }) => `
+ .superset-legacy-chart-calendar {
+ padding: ${theme.gridUnit * 3}px;
+ position: static !important;
+ overflow: auto !important;
+ }
+
+ .superset-legacy-chart-calendar .ch-tooltip {
+ margin-left: ${theme.gridUnit * 5}px;
+ margin-top: ${theme.gridUnit}px;
+ }
+
+ .superset-legacy-chart-calendar .d3-tip {
+ line-height: 1;
+ padding: ${theme.gridUnit * 3}px;
+ background: ${theme.colors.grayscale.dark2};
+ color: ${theme.colors.grayscale.light5};
+ border-radius: ${theme.borderRadius}px;
+ pointer-events: none;
+ z-index: 1000;
+ }
+
+ .cal-heatmap-container {
+ display: block;
+ }
+
+ .cal-heatmap-container .graph-label {
+ fill: ${theme.colors.grayscale.base};
+ font-size: ${theme.typography.sizes.xs}px;
+ }
+
+ .cal-heatmap-container .graph,
+ .cal-heatmap-container .graph-legend rect {
+ shape-rendering: crispedges;
+ }
+
+ .cal-heatmap-container .graph-rect {
+ fill: ${theme.colors.grayscale.light2};
+ }
+
+ .cal-heatmap-container .graph-subdomain-group rect:hover {
+ stroke: ${theme.colors.grayscale.dark2};
+ stroke-width: 1px;
+ }
+
+ .cal-heatmap-container .subdomain-text {
+ font-size: ${theme.typography.sizes.xs}px;
+ pointer-events: none;
+ }
+
+ .cal-heatmap-container .hover_cursor:hover {
+ cursor: pointer;
+ }
+
+ .cal-heatmap-container .qi {
+ background-color: ${theme.colors.grayscale.base};
+ fill: ${theme.colors.grayscale.base};
+ }
+
+ .cal-heatmap-container .q1 {
+ background-color: ${theme.colors.alert.light2};
+ fill: ${theme.colors.alert.light2};
+ }
+
+ .cal-heatmap-container .q2 {
+ background-color: ${theme.colors.alert.light1};
+ fill: ${theme.colors.alert.light1};
+ }
+
+ .cal-heatmap-container .q3 {
+ background-color: ${theme.colors.success.light1};
+ fill: ${theme.colors.success.light1};
+ }
+
+ .cal-heatmap-container .q4 {
+ background-color: ${theme.colors.success.base};
+ fill: ${theme.colors.success.base};
+ }
+
+ .cal-heatmap-container .q5 {
+ background-color: ${theme.colors.success.dark1};
+ fill: ${theme.colors.success.dark1};
+ }
+
+ .cal-heatmap-container rect.highlight {
+ stroke: ${theme.colors.grayscale.dark1};
+ stroke-width: 1;
+ }
+
+ .cal-heatmap-container text.highlight {
+ fill: ${theme.colors.grayscale.dark1};
+ }
+
+ .cal-heatmap-container rect.highlight-now {
+ stroke: ${theme.colors.error.base};
+ }
+
+ .cal-heatmap-container text.highlight-now {
+ fill: ${theme.colors.error.base};
+ font-weight: ${theme.typography.weights.bold};
+ }
+
+ .cal-heatmap-container .domain-background {
+ fill: none;
+ shape-rendering: crispedges;
+ }
+
+ .ch-tooltip {
+ padding: ${theme.gridUnit * 2}px;
+ background: ${theme.colors.grayscale.dark1};
+ color: ${theme.colors.grayscale.light1};
+ font-size: ${theme.typography.sizes.s}px;
+ line-height: 1.4;
+ width: 140px;
+ position: absolute;
+ z-index: 99999;
+ text-align: center;
+ border-radius: ${theme.borderRadius}px;
+ box-shadow: 2px 2px 2px ${theme.colors.grayscale.dark2};
+ display: none;
+ box-sizing: border-box;
+ }
+
+ .ch-tooltip::after {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+ content: '';
+ padding: 0;
+ display: block;
+ bottom: -${theme.gridUnit}px;
+ left: 50%;
+ margin-left: -${theme.gridUnit}px;
+ border-width: ${theme.gridUnit}px ${theme.gridUnit}px 0;
+ border-top-color: ${theme.colors.grayscale.dark1};
+ }
+ `}
`;
diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/cal-heatmap.css b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/cal-heatmap.css
deleted file mode 100644
index de282154a5..0000000000
--- a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/cal-heatmap.css
+++ /dev/null
@@ -1,129 +0,0 @@
-/* [LICENSE TBD] */
-/* Cal-HeatMap CSS */
-
-.cal-heatmap-container {
- display: block;
-}
-
-.cal-heatmap-container .graph-label {
- fill: #999;
- font-size: 10px;
-}
-
-.cal-heatmap-container .graph,
-.cal-heatmap-container .graph-legend rect {
- shape-rendering: crispedges;
-}
-
-.cal-heatmap-container .graph-rect {
- fill: #ededed;
-}
-
-.cal-heatmap-container .graph-subdomain-group rect:hover {
- stroke: #000;
- stroke-width: 1px;
-}
-
-.cal-heatmap-container .subdomain-text {
- font-size: 8px;
- pointer-events: none;
-}
-
-.cal-heatmap-container .hover_cursor:hover {
- cursor: pointer;
-}
-
-.cal-heatmap-container .qi {
- background-color: #999;
- fill: #999;
-}
-
-/*
-Remove comment to apply this style to date with value equal to 0
-.q0
-{
- background-color: #fff;
- fill: #fff;
- stroke: #ededed
-}
-*/
-
-.cal-heatmap-container .q1 {
- background-color: #dae289;
- fill: #dae289;
-}
-
-.cal-heatmap-container .q2 {
- background-color: #cedb9c;
- fill: #9cc069;
-}
-
-.cal-heatmap-container .q3 {
- background-color: #b5cf6b;
- fill: #669d45;
-}
-
-.cal-heatmap-container .q4 {
- background-color: #637939;
- fill: #637939;
-}
-
-.cal-heatmap-container .q5 {
- background-color: #3b6427;
- fill: #3b6427;
-}
-
-.cal-heatmap-container rect.highlight {
- stroke: #444;
- stroke-width: 1;
-}
-
-.cal-heatmap-container text.highlight {
- fill: #444;
-}
-
-.cal-heatmap-container rect.highlight-now {
- stroke: red;
-}
-
-.cal-heatmap-container text.highlight-now {
- fill: red;
- font-weight: 800;
-}
-
-.cal-heatmap-container .domain-background {
- fill: none;
- shape-rendering: crispedges;
-}
-
-.ch-tooltip {
- padding: 10px;
- background: #222;
- color: #bbb;
- font-size: 12px;
- line-height: 1.4;
- width: 140px;
- position: absolute;
- z-index: 99999;
- text-align: center;
- border-radius: 2px;
- box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
- display: none;
- box-sizing: border-box;
-}
-
-.ch-tooltip::after {
- position: absolute;
- width: 0;
- height: 0;
- border-color: transparent;
- border-style: solid;
- content: '';
- padding: 0;
- display: block;
- bottom: -6px;
- left: 50%;
- margin-left: -6px;
- border-width: 6px 6px 0;
- border-top-color: #222;
-}
diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/cal-heatmap.js b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/cal-heatmap.js
index 572070f614..3320693f5c 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/cal-heatmap.js
+++ b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/cal-heatmap.js
@@ -10,7 +10,6 @@
import d3tip from 'd3-tip';
import { getContrastingColor } from '@superset-ui/core';
-import './d3tip.css';
var d3 = typeof require === 'function' ? require('d3') : window.d3;
diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/d3tip.css b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/d3tip.css
deleted file mode 100644
index 980a5be439..0000000000
--- a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/d3tip.css
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-/* from d3-tip */
-.d3-tip {
- line-height: 1;
- padding: 12px;
- background: rgba(0, 0, 0, 0.8);
- color: #fff;
- border-radius: 2px;
- pointer-events: none;
- z-index: 1000;
-}
-
-/* Creates a small triangle extender for the tooltip */
-.d3-tip:after {
- box-sizing: border-box;
- display: inline;
- font-size: 10px;
- width: 100%;
- line-height: 1;
- color: rgba(0, 0, 0, 0.8);
- position: absolute;
- pointer-events: none;
-}
-
-/* Northward tooltips */
-.d3-tip.n:after {
- content: '\25BC';
- margin: -1px 0 0 0;
- top: 100%;
- left: 0;
- text-align: center;
-}
-
-/* Eastward tooltips */
-.d3-tip.e:after {
- content: '\25C0';
- margin: -4px 0 0 0;
- top: 50%;
- left: -8px;
-}
-
-/* Southward tooltips */
-.d3-tip.s:after {
- content: '\25B2';
- margin: 0 0 1px 0;
- top: -8px;
- left: 0;
- text-align: center;
-}
-
-/* Westward tooltips */
-.d3-tip.w:after {
- content: '\25B6';
- margin: -4px 0 0 -1px;
- top: 50%;
- left: 100%;
-}