mirror of
https://github.com/apache/superset.git
synced 2024-09-18 11:39:49 -04:00
refactor: Removes the CSS files from the Calendar Heatmap plugin (#19436)
This commit is contained in:
parent
31095a523d
commit
13467beb53
@ -2,31 +2,25 @@
|
|||||||
"name": "@superset-ui/legacy-plugin-chart-calendar",
|
"name": "@superset-ui/legacy-plugin-chart-calendar",
|
||||||
"version": "0.18.25",
|
"version": "0.18.25",
|
||||||
"description": "Superset Legacy Chart - Calendar Heatmap",
|
"description": "Superset Legacy Chart - Calendar Heatmap",
|
||||||
"sideEffects": [
|
"keywords": [
|
||||||
"*.css"
|
"superset"
|
||||||
],
|
],
|
||||||
|
"homepage": "https://github.com/apache-superset/superset-ui#readme",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/apache-superset/superset-ui/issues"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/apache-superset/superset-ui.git"
|
||||||
|
},
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"author": "Superset",
|
||||||
"main": "lib/index.js",
|
"main": "lib/index.js",
|
||||||
"module": "esm/index.js",
|
"module": "esm/index.js",
|
||||||
"files": [
|
"files": [
|
||||||
"esm",
|
"esm",
|
||||||
"lib"
|
"lib"
|
||||||
],
|
],
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "git+https://github.com/apache-superset/superset-ui.git"
|
|
||||||
},
|
|
||||||
"keywords": [
|
|
||||||
"superset"
|
|
||||||
],
|
|
||||||
"author": "Superset",
|
|
||||||
"license": "Apache-2.0",
|
|
||||||
"bugs": {
|
|
||||||
"url": "https://github.com/apache-superset/superset-ui/issues"
|
|
||||||
},
|
|
||||||
"homepage": "https://github.com/apache-superset/superset-ui#readme",
|
|
||||||
"publishConfig": {
|
|
||||||
"access": "public"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"d3-array": "^2.0.3",
|
"d3-array": "^2.0.3",
|
||||||
"d3-selection": "^1.4.0",
|
"d3-selection": "^1.4.0",
|
||||||
@ -34,8 +28,12 @@
|
|||||||
"prop-types": "^15.6.2"
|
"prop-types": "^15.6.2"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
|
"@emotion/react": "^11.4.1",
|
||||||
"@superset-ui/chart-controls": "*",
|
"@superset-ui/chart-controls": "*",
|
||||||
"@superset-ui/core": "*",
|
"@superset-ui/core": "*",
|
||||||
"react": "^16.13.1"
|
"react": "^16.13.1"
|
||||||
|
},
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -21,7 +21,6 @@ import { extent as d3Extent, range as d3Range } from 'd3-array';
|
|||||||
import { select as d3Select } from 'd3-selection';
|
import { select as d3Select } from 'd3-selection';
|
||||||
import { getSequentialSchemeRegistry } from '@superset-ui/core';
|
import { getSequentialSchemeRegistry } from '@superset-ui/core';
|
||||||
import CalHeatMap from './vendor/cal-heatmap';
|
import CalHeatMap from './vendor/cal-heatmap';
|
||||||
import './vendor/cal-heatmap.css';
|
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
data: PropTypes.shape({
|
data: PropTypes.shape({
|
||||||
|
@ -18,13 +18,69 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
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';
|
import Component from './Calendar';
|
||||||
|
|
||||||
const ReactComponent = reactify(Component);
|
const ReactComponent = reactify(Component);
|
||||||
|
|
||||||
const Calender = ({ className, ...otherProps }) => (
|
const Calender = ({ className, ...otherProps }) => (
|
||||||
<div className={className}>
|
<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} />
|
<ReactComponent {...otherProps} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -39,14 +95,143 @@ Calender.propTypes = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default styled(Calender)`
|
export default styled(Calender)`
|
||||||
|
${({ theme }) => `
|
||||||
.superset-legacy-chart-calendar {
|
.superset-legacy-chart-calendar {
|
||||||
padding: 10px;
|
padding: ${theme.gridUnit * 3}px;
|
||||||
position: static !important;
|
position: static !important;
|
||||||
overflow: auto !important;
|
overflow: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.superset-legacy-chart-calendar .ch-tooltip {
|
.superset-legacy-chart-calendar .ch-tooltip {
|
||||||
margin-left: 20px;
|
margin-left: ${theme.gridUnit * 5}px;
|
||||||
margin-top: 5px;
|
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};
|
||||||
|
}
|
||||||
|
`}
|
||||||
`;
|
`;
|
||||||
|
@ -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;
|
|
||||||
}
|
|
@ -10,7 +10,6 @@
|
|||||||
|
|
||||||
import d3tip from 'd3-tip';
|
import d3tip from 'd3-tip';
|
||||||
import { getContrastingColor } from '@superset-ui/core';
|
import { getContrastingColor } from '@superset-ui/core';
|
||||||
import './d3tip.css';
|
|
||||||
|
|
||||||
var d3 = typeof require === 'function' ? require('d3') : window.d3;
|
var d3 = typeof require === 'function' ? require('d3') : window.d3;
|
||||||
|
|
||||||
|
@ -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%;
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user