diff --git a/plugins/legacy-preset-chart-nvd3/package.json b/plugins/legacy-preset-chart-nvd3/package.json index a9c22d8cb3..42226df491 100644 --- a/plugins/legacy-preset-chart-nvd3/package.json +++ b/plugins/legacy-preset-chart-nvd3/package.json @@ -41,15 +41,16 @@ "urijs": "^1.18.10" }, "peerDependencies": { - "@superset-ui/chart": "^0.14.0", - "@superset-ui/chart-controls": "^0.14.0", - "@superset-ui/color": "^0.14.0", - "@superset-ui/core": "^0.14.0", - "@superset-ui/dimension": "^0.14.0", - "@superset-ui/number-format": "^0.14.0", - "@superset-ui/time-format": "^0.14.0", - "@superset-ui/translation": "^0.14.0", - "@superset-ui/validator": "^0.14.0", + "@superset-ui/chart": "^0.14.9", + "@superset-ui/chart-controls": "^0.14.9", + "@superset-ui/color": "^0.14.9", + "@superset-ui/core": "^0.14.9", + "@superset-ui/dimension": "^0.14.9", + "@superset-ui/number-format": "^0.14.9", + "@superset-ui/style": "^0.14.9", + "@superset-ui/time-format": "^0.14.9", + "@superset-ui/translation": "^0.14.9", + "@superset-ui/validator": "^0.14.9", "react": "^15 || ^16" } } diff --git a/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.css b/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.css deleted file mode 100644 index bc0928e0c9..0000000000 --- a/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.css +++ /dev/null @@ -1,176 +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. - */ -.superset-legacy-chart-nvd3-dist-bar { - overflow-x: auto !important; -} - -.superset-legacy-chart-nvd3-dist-bar svg.nvd3-svg { - width: auto; - font-size: 14px; -} - -.superset-legacy-chart-nvd3-bar { - overflow-x: auto !important; -} - -.superset-legacy-chart-nvd3-bar svg.nvd3-svg { - width: auto; -} - -.superset-legacy-chart-nvd3 .nv-x text { - font-size: 12px; -} - -.superset-legacy-chart-nvd3 g.superset path { - stroke-dasharray: 5, 5; -} - -.superset-legacy-chart-nvd3 .nvtooltip tr.highlight td { - font-weight: bold; - font-size: 15px !important; -} - -.superset-legacy-chart-nvd3 text.nv-axislabel { - font-size: 14px; -} - -.superset-legacy-chart-nvd3 text.nv-axislabel { - font-size: 14px !important; -} - -.superset-legacy-chart-nvd3 g.solid path, -.superset-legacy-chart-nvd3 line.solid { - stroke-dasharray: unset; -} - -.superset-legacy-chart-nvd3 g.dashed path, -.superset-legacy-chart-nvd3 line.dashed { - stroke-dasharray: 5, 5; -} - -.superset-legacy-chart-nvd3 g.longDashed path, -.superset-legacy-chart-nvd3 line.longDashed { - stroke-dasharray: 10, 2; -} - -.superset-legacy-chart-nvd3 g.dotted path, -.superset-legacy-chart-nvd3 line.dotted { - stroke-dasharray: 1, 1; -} - -.superset-legacy-chart-nvd3 g.opacityLow path, -.superset-legacy-chart-nvd3 line.opacityLow { - stroke-opacity: 0.2; -} - -.superset-legacy-chart-nvd3 g.opacityMedium path, -.superset-legacy-chart-nvd3 line.opacityMedium { - stroke-opacity: 0.5; -} - -.superset-legacy-chart-nvd3 g.opacityHigh path, -.superset-legacy-chart-nvd3 line.opacityHigh { - stroke-opacity: 0.8; -} - -.superset-legacy-chart-nvd3 g.time-shift-0 path, -.superset-legacy-chart-nvd3 line.time-shift-0 { - stroke-dasharray: 5, 5; -} -.superset-legacy-chart-nvd3 g.time-shift-1 path, -.superset-legacy-chart-nvd3 line.time-shift-1 { - stroke-dasharray: 1, 5; -} -.superset-legacy-chart-nvd3 g.time-shift-2 path, -.superset-legacy-chart-nvd3 line.time-shift-2 { - stroke-dasharray: 10, 5; -} -.superset-legacy-chart-nvd3 g.time-shift-3 path, -.superset-legacy-chart-nvd3 line.time-shift-3 { - stroke-dasharray: 5, 1; -} -.superset-legacy-chart-nvd3 g.time-shift-4 path, -.superset-legacy-chart-nvd3 line.time-shift-4 { - stroke-dasharray: 5, 10; -} -.superset-legacy-chart-nvd3 g.time-shift-5 path, -.superset-legacy-chart-nvd3 line.time-shift-5 { - stroke-dasharray: 0.9; -} -.superset-legacy-chart-nvd3 g.time-shift-6 path, -.superset-legacy-chart-nvd3 line.time-shift-6 { - stroke-dasharray: 15, 10, 5; -} -.superset-legacy-chart-nvd3 g.time-shift-7 path, -.superset-legacy-chart-nvd3 line.time-shift-7 { - stroke-dasharray: 15, 10, 5, 10; -} -.superset-legacy-chart-nvd3 g.time-shift-8 path, -.superset-legacy-chart-nvd3 line.time-shift-8 { - stroke-dasharray: 15, 10, 5, 10, 15; -} -.superset-legacy-chart-nvd3 g.time-shift-9 path, -.superset-legacy-chart-nvd3 line.time-shift-9 { - stroke-dasharray: 5, 5, 1, 5; -} -.superset-legacy-chart-nvd3-tr-highlight { - border-top: 1px solid; - border-bottom: 1px solid; - font-weight: bold; -} - -.superset-legacy-chart-nvd3-tr-total { - font-weight: bold; -} - -/* START tooltip styles - these prevent long column names from overflowing the tooltip */ -.nvtooltip .tooltip-header { - white-space: nowrap; - font-weight: bold; -} -.nvtooltip tbody tr:not(.tooltip-header) td:nth-child(2) { - word-break: break-word; -} -/* END tooltip styles */ - -.superset-legacy-chart-nvd3 .nv-noData.body { - font-size: 14px; - font-weight: normal; -} - -.d3-tip.nv-event-annotation-layer-table, -.d3-tip.nv-event-annotation-layer-NATIVE { - width: 200px; - border-radius: 2px; - background-color: #484848; - fill-opacity: 0.6; - margin: 8px; - padding: 8px; - color: #fff; -} - -.d3-tip.nv-event-annotation-layer-table::after, -.d3-tip.nv-event-annotation-layer-NATIVE::after { - content: '\25BC'; - font-size: 14px; - color: #484848; - position: absolute; - bottom: -14px; - left: 94px; -} diff --git a/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js b/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js index e891ffda33..3c7ea43633 100644 --- a/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js +++ b/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js @@ -64,7 +64,6 @@ import { numberOrAutoType, stringOrObjectWithLabelType, } from './PropTypes'; -import './NVD3Vis.css'; const NO_DATA_RENDER_DATA = [ { text: 'No data', dy: '-.75em', class: 'header' }, diff --git a/plugins/legacy-preset-chart-nvd3/src/ReactNVD3.js b/plugins/legacy-preset-chart-nvd3/src/ReactNVD3.js deleted file mode 100644 index 204fc72d92..0000000000 --- a/plugins/legacy-preset-chart-nvd3/src/ReactNVD3.js +++ /dev/null @@ -1,32 +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. - */ -import { reactify } from '@superset-ui/chart'; -import Component from './NVD3Vis'; -import { hideTooltips, removeTooltip } from './utils'; - -function componentWillUnmount() { - const { id } = this.props; - if (id !== null && id !== undefined) { - removeTooltip(id); - } else { - hideTooltips(true); - } -} - -export default reactify(Component, { componentWillUnmount }); diff --git a/plugins/legacy-preset-chart-nvd3/src/ReactNVD3.jsx b/plugins/legacy-preset-chart-nvd3/src/ReactNVD3.jsx new file mode 100644 index 0000000000..dd31b4ec6a --- /dev/null +++ b/plugins/legacy-preset-chart-nvd3/src/ReactNVD3.jsx @@ -0,0 +1,179 @@ +/** + * 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. + */ +import React from 'react'; +import { reactify } from '@superset-ui/chart'; +import styled from '@superset-ui/style'; +import PropTypes from 'prop-types'; +import Component from './NVD3Vis'; +import { hideTooltips, removeTooltip } from './utils'; + +function componentWillUnmount() { + const { id } = this.props; + if (id !== null && id !== undefined) { + removeTooltip(id); + } else { + hideTooltips(true); + } +} + +const ReactNVD3 = reactify(Component, { componentWillUnmount }); + +const NVD3 = ({ className, ...otherProps }) => { + return ( +
+ +
+ ); +}; + +NVD3.propTypes = { + className: PropTypes.string.isRequired, +}; + +export default styled(NVD3)` + .superset-legacy-chart-nvd3-dist-bar { + overflow-x: auto !important; + svg { + &.nvd3-svg { + width: auto; + font-size: ${({ theme }) => theme.typography.sizes.m}; + } + } + } + .superset-legacy-chart-nvd3 { + nv-x text { + font-size: ${({ theme }) => theme.typography.sizes.m}; + } + g.superset path { + stroke-dasharray: 5, 5; + } + .nvtooltip tr.highlight td { + font-weight: ${({ theme }) => theme.typography.weights.bold}; + font-size: 15px !important; + } + text.nv-axislabel { + font-size: ${({ theme }) => theme.typography.sizes.m} !important; + } + g.solid path, + line.solid { + stroke-dasharray: unset; + } + g.dashed path, + line.dashed { + stroke-dasharray: 5, 5; + } + g.longDashed path, + line.dotted { + stroke-dasharray: 1, 1; + } + + g.opacityLow path, + line.opacityLow { + stroke-opacity: 0.2; + } + + g.opacityMedium path, + line.opacityMedium { + stroke-opacity: 0.5; + } + g.opacityHigh path, + line.opacityHigh { + stroke-opacity: 0.8; + } + g.time-shift-0 path, + line.time-shift-0 { + stroke-dasharray: 5, 5; + } + g.time-shift-1 path, + line.time-shift-1 { + stroke-dasharray: 1, 5; + } + g.time-shift-2 path, + line.time-shift-3 { + stroke-dasharray: 5, 1; + } + g.time-shift-3 path, + line.time-shift-3 { + stroke-dasharray: 5, 1; + } + g.time-shift-4 path, + line.time-shift-4 { + stroke-dasharray: 5, 10; + } + g.time-shift-5 path, + line.time-shift-5 { + stroke-dasharray: 0.9; + } + g.time-shift-6 path, + line.time-shift-6 { + stroke-dasharray: 15, 10, 5; + } + g.time-shift-7 path, + line.time-shift-7 { + stroke-dasharray: 15, 10, 5, 10; + } + g.time-shift-8 path, + line.time-shift-8 { + stroke-dasharray: 15, 10, 5, 10, 15; + } + g.time-shift-9 path, + line.time-shift-9 { + stroke-dasharray: 5, 5, 1, 5; + } + .nv-noData.body { + font-size: ${({ theme }) => theme.typography.sizes.m}; + font-weight: ${({ theme }) => theme.typography.weights.normal}; + } + } + .superset-legacy-chart-nvd3-tr-highlight { + border-top: 1px solid; + border-bottom: 1px solid; + font-weight: ${({ theme }) => theme.typography.weights.bold}; + } + .superset-legacy-chart-nvd3-tr-total { + font-weight: ${({ theme }) => theme.typography.weights.bold}; + } + .nvtooltip { + .tooltip-header { + white-space: nowrap; + font-weight: ${({ theme }) => theme.typography.weights.bold}; + } + tbody tr:not(.tooltip-header) td:nth-child(2) { + word-break: break-word; + } + } + .d3-tip.nv-event-annotation-layer-table, + .d3-tip.nv-event-annotation-layer-NATIVE { + width: 200px; + border-radius: 2px; + background-color: #484848; + fill-opacity: 0.6; + margin: 8px; + padding: 8px; + color: #fff; + &:after { + content: '\25BC'; + font-size: ${({ theme }) => theme.typography.sizes.m}; + color: #484848; + position: absolute; + bottom: -14px; + left: 94px; + } + } +`;