This is an automated email from the ASF dual-hosted git repository.
kristw pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 3ae7d32 Add iframe and markup legacy plugin (#6741)
3ae7d32 is described below
commit 3ae7d32caa7a907b6888ee7b141e6ce386bc5b01
Author: Krist Wongsuphasawat <[email protected]>
AuthorDate: Wed Jan 23 10:21:57 2019 -0800
Add iframe and markup legacy plugin (#6741)
* Add iframe plugin
* Use lazy load and add description
* remove unintended files
* Add markup
* minor adjustment
---
superset/assets/package-lock.json | 2 +-
.../{iframe.js => Iframe/Iframe.jsx} | 50 ++++++++++----
.../{markup.css => Iframe/IframeChartPlugin.js} | 32 +++++----
.../src/visualizations/Iframe/images/thumbnail.png | Bin 0 -> 50998 bytes
.../{iframe.js => Iframe/transformProps.js} | 20 ++----
.../{markup.css => Markup/Markup.css} | 12 ++--
.../assets/src/visualizations/Markup/Markup.jsx | 76 +++++++++++++++++++++
.../{markup.css => Markup/MarkupChartPlugin.js} | 32 +++++----
.../src/visualizations/Markup/images/thumbnail.png | Bin 0 -> 23186 bytes
.../{markup.css => Markup/transformProps.js} | 27 ++++----
superset/assets/src/visualizations/markup.js | 58 ----------------
.../visualizations/presets/LegacyChartPreset.js | 5 ++
12 files changed, 180 insertions(+), 134 deletions(-)
diff --git a/superset/assets/package-lock.json
b/superset/assets/package-lock.json
index 5a1ce42..7bc8fbc 100644
--- a/superset/assets/package-lock.json
+++ b/superset/assets/package-lock.json
@@ -2228,7 +2228,7 @@
"dependencies": {
"whatwg-fetch": {
"version": "2.0.4",
- "resolved":
"https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz";,
+ "resolved":
"http://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz";,
"integrity":
"sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
}
}
diff --git a/superset/assets/src/visualizations/iframe.js
b/superset/assets/src/visualizations/Iframe/Iframe.jsx
similarity index 52%
copy from superset/assets/src/visualizations/iframe.js
copy to superset/assets/src/visualizations/Iframe/Iframe.jsx
index 947fb7a..eca92d6 100644
--- a/superset/assets/src/visualizations/iframe.js
+++ b/superset/assets/src/visualizations/Iframe/Iframe.jsx
@@ -17,22 +17,42 @@
* under the License.
*/
import Mustache from 'mustache';
+import React from 'react';
+import PropTypes from 'prop-types';
-export default function iframeWidget(slice) {
- const { selector, formData } = slice;
- const { url } = formData;
- const width = slice.width();
- const height = slice.height();
- const container = document.querySelector(selector);
+const propTypes = {
+ className: PropTypes.string,
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+ url: PropTypes.string,
+};
+const defaultProps = {
+ className: '',
+};
- const completedUrl = Mustache.render(url, {
- width,
- height,
- });
+class Iframe extends React.PureComponent {
+ render() {
+ const { className, url, width, height } = this.props;
+ const completeUrl = Mustache.render(url, {
+ width,
+ height,
+ });
- const iframe = document.createElement('iframe');
- iframe.style.width = '100%';
- iframe.style.height = height;
- iframe.setAttribute('src', completedUrl);
- container.appendChild(iframe);
+ return (
+ <iframe
+ className={className}
+ title="superset-iframe"
+ src={completeUrl}
+ style={{
+ width: '100%',
+ height,
+ }}
+ />
+ );
+ }
}
+
+Iframe.propTypes = propTypes;
+Iframe.defaultProps = defaultProps;
+
+export default Iframe;
diff --git a/superset/assets/src/visualizations/markup.css
b/superset/assets/src/visualizations/Iframe/IframeChartPlugin.js
similarity index 61%
copy from superset/assets/src/visualizations/markup.css
copy to superset/assets/src/visualizations/Iframe/IframeChartPlugin.js
index d4ea165..8d3f37e 100644
--- a/superset/assets/src/visualizations/markup.css
+++ b/superset/assets/src/visualizations/Iframe/IframeChartPlugin.js
@@ -16,17 +16,23 @@
* specific language governing permissions and limitations
* under the License.
*/
-.markup.slice_container {
- margin: 10px;
-}
-.separator {
- background-color: transparent !important;
-}
-.separator hr {
- border: 0;
- height: 1px;
- background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0,
0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
-}
-.separator .chart-header {
- border: none !important;
+import { t } from '@superset-ui/translation';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
+import thumbnail from './images/thumbnail.png';
+import transformProps from './transformProps';
+
+const metadata = new ChartMetadata({
+ name: t('IFrame'),
+ description: 'HTML Inline Frame',
+ thumbnail,
+});
+
+export default class IframeChartPlugin extends ChartPlugin {
+ constructor() {
+ super({
+ metadata,
+ loadChart: () => import('./Iframe.jsx'),
+ transformProps,
+ });
+ }
}
diff --git a/superset/assets/src/visualizations/Iframe/images/thumbnail.png
b/superset/assets/src/visualizations/Iframe/images/thumbnail.png
new file mode 100644
index 0000000..5c6524a
Binary files /dev/null and
b/superset/assets/src/visualizations/Iframe/images/thumbnail.png differ
diff --git a/superset/assets/src/visualizations/iframe.js
b/superset/assets/src/visualizations/Iframe/transformProps.js
similarity index 64%
rename from superset/assets/src/visualizations/iframe.js
rename to superset/assets/src/visualizations/Iframe/transformProps.js
index 947fb7a..e092c7d 100644
--- a/superset/assets/src/visualizations/iframe.js
+++ b/superset/assets/src/visualizations/Iframe/transformProps.js
@@ -16,23 +16,13 @@
* specific language governing permissions and limitations
* under the License.
*/
-import Mustache from 'mustache';
-
-export default function iframeWidget(slice) {
- const { selector, formData } = slice;
+export default function transformProps(chartProps) {
+ const { width, height, formData } = chartProps;
const { url } = formData;
- const width = slice.width();
- const height = slice.height();
- const container = document.querySelector(selector);
- const completedUrl = Mustache.render(url, {
+ return {
width,
height,
- });
-
- const iframe = document.createElement('iframe');
- iframe.style.width = '100%';
- iframe.style.height = height;
- iframe.setAttribute('src', completedUrl);
- container.appendChild(iframe);
+ url,
+ };
}
diff --git a/superset/assets/src/visualizations/markup.css
b/superset/assets/src/visualizations/Markup/Markup.css
similarity index 78%
copy from superset/assets/src/visualizations/markup.css
copy to superset/assets/src/visualizations/Markup/Markup.css
index d4ea165..0f08788 100644
--- a/superset/assets/src/visualizations/markup.css
+++ b/superset/assets/src/visualizations/Markup/Markup.css
@@ -17,16 +17,16 @@
* under the License.
*/
.markup.slice_container {
- margin: 10px;
+ margin: 10px;
}
.separator {
- background-color: transparent !important;
+ background-color: transparent !important;
}
.separator hr {
- border: 0;
- height: 1px;
- background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0,
0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+ border: 0;
+ height: 1px;
+ background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0,
1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
.separator .chart-header {
- border: none !important;
+ border: none !important;
}
diff --git a/superset/assets/src/visualizations/Markup/Markup.jsx
b/superset/assets/src/visualizations/Markup/Markup.jsx
new file mode 100644
index 0000000..a078ba3
--- /dev/null
+++ b/superset/assets/src/visualizations/Markup/Markup.jsx
@@ -0,0 +1,76 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import './Markup.css';
+
+const propTypes = {
+ className: PropTypes.string,
+ height: PropTypes.number.isRequired,
+ isSeparator: PropTypes.bool,
+ html: PropTypes.string,
+ cssFiles: PropTypes.arrayOf(PropTypes.string),
+};
+const defaultProps = {
+ className: '',
+ isSeparator: false,
+ html: '',
+};
+
+const CONTAINER_STYLE = {
+ position: 'relative',
+ overflow: 'auto',
+};
+
+class Markup extends React.PureComponent {
+ render() {
+ const { className, height, isSeparator, html, cssFiles } = this.props;
+
+ return (
+ <div
+ className={className}
+ style={CONTAINER_STYLE}
+ >
+ <iframe
+ title="superset-markup"
+ frameBorder={0}
+ height={isSeparator ? height - 20 : height}
+ sandbox="allow-forms allow-popups allow-same-origin allow-scripts
allow-top-navigation"
+ srcDoc={`
+ <html>
+ <head>
+ ${cssFiles.map(
+ href => `<link rel="stylesheet" type="text/css"
href="${href}" />`,
+ )}
+ </head>
+ <body style="background-color: transparent;">
+ ${html}
+ </body>
+ </html>`
+ }
+ />
+ </div>
+ );
+ }
+}
+
+Markup.propTypes = propTypes;
+Markup.defaultProps = defaultProps;
+
+export default Markup;
diff --git a/superset/assets/src/visualizations/markup.css
b/superset/assets/src/visualizations/Markup/MarkupChartPlugin.js
similarity index 61%
copy from superset/assets/src/visualizations/markup.css
copy to superset/assets/src/visualizations/Markup/MarkupChartPlugin.js
index d4ea165..992ebd7 100644
--- a/superset/assets/src/visualizations/markup.css
+++ b/superset/assets/src/visualizations/Markup/MarkupChartPlugin.js
@@ -16,17 +16,23 @@
* specific language governing permissions and limitations
* under the License.
*/
-.markup.slice_container {
- margin: 10px;
-}
-.separator {
- background-color: transparent !important;
-}
-.separator hr {
- border: 0;
- height: 1px;
- background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0,
0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
-}
-.separator .chart-header {
- border: none !important;
+import { t } from '@superset-ui/translation';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
+import thumbnail from './images/thumbnail.png';
+import transformProps from './transformProps';
+
+const metadata = new ChartMetadata({
+ name: t('Markup'),
+ description: 'HTML Markup',
+ thumbnail,
+});
+
+export default class IframeChartPlugin extends ChartPlugin {
+ constructor() {
+ super({
+ metadata,
+ loadChart: () => import('./Markup.jsx'),
+ transformProps,
+ });
+ }
}
diff --git a/superset/assets/src/visualizations/Markup/images/thumbnail.png
b/superset/assets/src/visualizations/Markup/images/thumbnail.png
new file mode 100644
index 0000000..5878e15
Binary files /dev/null and
b/superset/assets/src/visualizations/Markup/images/thumbnail.png differ
diff --git a/superset/assets/src/visualizations/markup.css
b/superset/assets/src/visualizations/Markup/transformProps.js
similarity index 70%
rename from superset/assets/src/visualizations/markup.css
rename to superset/assets/src/visualizations/Markup/transformProps.js
index d4ea165..1774c7b 100644
--- a/superset/assets/src/visualizations/markup.css
+++ b/superset/assets/src/visualizations/Markup/transformProps.js
@@ -16,17 +16,18 @@
* specific language governing permissions and limitations
* under the License.
*/
-.markup.slice_container {
- margin: 10px;
-}
-.separator {
- background-color: transparent !important;
-}
-.separator hr {
- border: 0;
- height: 1px;
- background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0,
0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
-}
-.separator .chart-header {
- border: none !important;
+export default function transformProps(chartProps) {
+ const { height, payload, formData } = chartProps;
+ const { vizType } = formData;
+ const {
+ theme_css: cssFiles,
+ html,
+ } = payload.data;
+
+ return {
+ height,
+ cssFiles,
+ html,
+ isSeparator: vizType === 'separator',
+ };
}
diff --git a/superset/assets/src/visualizations/markup.js
b/superset/assets/src/visualizations/markup.js
deleted file mode 100644
index b348d5b..0000000
--- a/superset/assets/src/visualizations/markup.js
+++ /dev/null
@@ -1,58 +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 srcdoc from 'srcdoc-polyfill';
-import './markup.css';
-
-function markupWidget(slice, payload) {
- const { selector } = slice;
- const height = slice.height();
- const headerHeight = slice.headerHeight();
- const vizType = slice.props.vizType;
- const { data } = payload;
-
- const container = document.querySelector(selector);
- container.style.overflow = 'auto';
-
- // markup height is slice height - (marginTop + marginBottom)
- const iframeHeight = vizType === 'separator'
- ? height - 20
- : height + headerHeight;
-
- const html = `
- <html>
- <head>
- ${data.theme_css.map(
- href => `<link rel="stylesheet" type="text/css" href="${href}" />`,
- )}
- </head>
- <body style="background-color: transparent;">
- ${data.html}
- </body>
- </html>`;
-
- const iframe = document.createElement('iframe');
- iframe.setAttribute('frameborder', 0);
- iframe.setAttribute('height', iframeHeight);
- iframe.setAttribute('sandbox', 'allow-forms allow-popups allow-same-origin
allow-scripts allow-top-navigation');
- container.appendChild(iframe);
-
- srcdoc.set(iframe, html);
-}
-
-export default markupWidget;
diff --git a/superset/assets/src/visualizations/presets/LegacyChartPreset.js
b/superset/assets/src/visualizations/presets/LegacyChartPreset.js
index dcd22bc..b391f63 100644
--- a/superset/assets/src/visualizations/presets/LegacyChartPreset.js
+++ b/superset/assets/src/visualizations/presets/LegacyChartPreset.js
@@ -30,7 +30,9 @@ import EventFlowChartPlugin from
'../EventFlow/EventFlowChartPlugin';
import ForceDirectedChartPlugin from
'../ForceDirected/ForceDirectedChartPlugin';
import HeatmapChartPlugin from '../Heatmap/HeatmapChartPlugin';
import HorizonChartPlugin from '../Horizon/HorizonChartPlugin';
+import IframeChartPlugin from '../Iframe/IframeChartPlugin';
import LineMultiChartPlugin from '../nvd3/LineMulti/LineMultiChartPlugin';
+import MarkupChartPlugin from '../Markup/MarkupChartPlugin';
import PairedTTestChartPlugin from '../PairedTTest/PairedTTestChartPlugin';
import ParallelCoordinatesChartPlugin from
'../ParallelCoordinates/ParallelCoordinatesChartPlugin';
import RoseChartPlugin from '../Rose/RoseChartPlugin';
@@ -57,7 +59,10 @@ export default class LegacyChartPreset extends Preset {
new ForceDirectedChartPlugin().configure({ key: 'directed_force' }),
new HeatmapChartPlugin().configure({ key: 'heatmap' }),
new HorizonChartPlugin().configure({ key: 'horizon' }),
+ new IframeChartPlugin().configure({ key: 'iframe' }),
new LineMultiChartPlugin().configure({ key: 'line_multi' }),
+ new MarkupChartPlugin().configure({ key: 'markup' }),
+ new MarkupChartPlugin().configure({ key: 'separator' }),
new PairedTTestChartPlugin().configure({ key: 'paired_ttest' }),
new ParallelCoordinatesChartPlugin().configure({ key: 'para' }),
new RoseChartPlugin().configure({ key: 'rose' }),
