From bbb846f3e65f85d3955cfecdaa58d9beb1c74603 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 17 Aug 2018 22:14:02 -0700 Subject: [PATCH 1/5] Do not call slice.xxx --- superset/assets/src/visualizations/markup.js | 81 +++++++++++++------- 1 file changed, 52 insertions(+), 29 deletions(-) diff --git a/superset/assets/src/visualizations/markup.js b/superset/assets/src/visualizations/markup.js index 3068d025876b1..64e90acb58297 100644 --- a/superset/assets/src/visualizations/markup.js +++ b/superset/assets/src/visualizations/markup.js @@ -1,44 +1,67 @@ -const srcdoc = require('srcdoc-polyfill'); +import './markup.css'; -require('./markup.css'); +const srcdoc = require('srcdoc-polyfill'); function markupWidget(slice, payload) { - $('#code').attr('rows', '15'); - const jqdiv = slice.container; - jqdiv.css({ - overflow: 'auto', - }); + const { selector, containerId } = slice; + const height = slice.height(); + const headerHeight = slice.headerHeight(); + const vizType = slice.props.vizType; + const { data } = payload; + + // Old code not working. There is no #code element. + // $('#code').attr('rows', '15'); + // document.getElementById('brace-editor') + // .setAttribute('rows', 15); + + // const jqdiv = slice.container; + // jqdiv.css({ + // overflow: 'auto', + // }); + const container = document.querySelector(selector); + container.style.overflow = 'auto'; // markup height is slice height - (marginTop + marginBottom) - let iframeHeight = slice.height() - 20; - if (slice.props.vizType === 'separator') { - // separator height is the entire chart container: slice height + header - iframeHeight = slice.height() + slice.headerHeight(); - } - - const iframeId = `if__${slice.containerId}`; - const stylesheets = payload.data.theme_css.map( - href => ``, - ); + const iframeHeight = vizType === 'separator' + ? height - 20 + : height + headerHeight; + + // let iframeHeight = height - 20; + // if (vizType === 'separator') { + // // separator height is the entire chart container: slice height + header + // iframeHeight = height + headerHeight; + // } + + const iframeId = `if__${containerId}`; const html = ` - ${stylesheets} + ${data.theme_css.map( + href => ``, + )} - ${payload.data.html} + ${data.html} `; - jqdiv.html(` - - `); - - const iframe = document.getElementById(iframeId); + + const iframe = document.createElement('iframe'); + iframe.setAttribute('id', iframeId); + 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); + + // jqdiv.html(` + // + // `); + // const iframe = document.getElementById(iframeId); + srcdoc.set(iframe, html); } -module.exports = markupWidget; +export default markupWidget; From 397d0e06ed891c515d563b2186b63cd8f2a886be Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 17 Aug 2018 22:16:18 -0700 Subject: [PATCH 2/5] remove iframe id --- superset/assets/src/visualizations/markup.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/superset/assets/src/visualizations/markup.js b/superset/assets/src/visualizations/markup.js index 64e90acb58297..0e60718aebbb1 100644 --- a/superset/assets/src/visualizations/markup.js +++ b/superset/assets/src/visualizations/markup.js @@ -3,7 +3,7 @@ import './markup.css'; const srcdoc = require('srcdoc-polyfill'); function markupWidget(slice, payload) { - const { selector, containerId } = slice; + const { selector } = slice; const height = slice.height(); const headerHeight = slice.headerHeight(); const vizType = slice.props.vizType; @@ -32,7 +32,6 @@ function markupWidget(slice, payload) { // iframeHeight = height + headerHeight; // } - const iframeId = `if__${containerId}`; const html = ` @@ -46,7 +45,6 @@ function markupWidget(slice, payload) { `; const iframe = document.createElement('iframe'); - iframe.setAttribute('id', iframeId); iframe.setAttribute('frameborder', 0); iframe.setAttribute('height', iframeHeight); iframe.setAttribute('sandbox', 'allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation'); @@ -59,8 +57,8 @@ function markupWidget(slice, payload) { // sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation"> // // `); - // const iframe = document.getElementById(iframeId); + // const iframe = document.getElementById(iframeId); srcdoc.set(iframe, html); } From 0e0213d9574845e39beea2d0c22108c39da12953 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 17 Aug 2018 22:17:11 -0700 Subject: [PATCH 3/5] remove old code --- superset/assets/src/visualizations/markup.js | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/superset/assets/src/visualizations/markup.js b/superset/assets/src/visualizations/markup.js index 0e60718aebbb1..7108a08c07a89 100644 --- a/superset/assets/src/visualizations/markup.js +++ b/superset/assets/src/visualizations/markup.js @@ -14,10 +14,6 @@ function markupWidget(slice, payload) { // document.getElementById('brace-editor') // .setAttribute('rows', 15); - // const jqdiv = slice.container; - // jqdiv.css({ - // overflow: 'auto', - // }); const container = document.querySelector(selector); container.style.overflow = 'auto'; @@ -26,12 +22,6 @@ function markupWidget(slice, payload) { ? height - 20 : height + headerHeight; - // let iframeHeight = height - 20; - // if (vizType === 'separator') { - // // separator height is the entire chart container: slice height + header - // iframeHeight = height + headerHeight; - // } - const html = ` @@ -50,15 +40,6 @@ function markupWidget(slice, payload) { iframe.setAttribute('sandbox', 'allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation'); container.appendChild(iframe); - // jqdiv.html(` - // - // `); - - // const iframe = document.getElementById(iframeId); srcdoc.set(iframe, html); } From 15d5a8cce8d4355f5a16840e96c2819925a9249b Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 17 Aug 2018 22:27:43 -0700 Subject: [PATCH 4/5] use import instead of require --- superset/assets/src/visualizations/markup.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/superset/assets/src/visualizations/markup.js b/superset/assets/src/visualizations/markup.js index 7108a08c07a89..1f632bf270a46 100644 --- a/superset/assets/src/visualizations/markup.js +++ b/superset/assets/src/visualizations/markup.js @@ -1,7 +1,6 @@ +import srcdoc from 'srcdoc-polyfill'; import './markup.css'; -const srcdoc = require('srcdoc-polyfill'); - function markupWidget(slice, payload) { const { selector } = slice; const height = slice.height(); @@ -9,11 +8,6 @@ function markupWidget(slice, payload) { const vizType = slice.props.vizType; const { data } = payload; - // Old code not working. There is no #code element. - // $('#code').attr('rows', '15'); - // document.getElementById('brace-editor') - // .setAttribute('rows', 15); - const container = document.querySelector(selector); container.style.overflow = 'auto'; From 24661da2bc6c871c7ad10db8f559cd6b9adac264 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 17 Aug 2018 23:06:06 -0700 Subject: [PATCH 5/5] update iframe.js --- superset/assets/src/chart/Chart.jsx | 10 ------- superset/assets/src/visualizations/iframe.js | 28 +++++++++++++------- 2 files changed, 18 insertions(+), 20 deletions(-) diff --git a/superset/assets/src/chart/Chart.jsx b/superset/assets/src/chart/Chart.jsx index 032f1d672ef49..ed49eea6849f2 100644 --- a/superset/assets/src/chart/Chart.jsx +++ b/superset/assets/src/chart/Chart.jsx @@ -1,7 +1,6 @@ /* eslint no-undef: 2 */ import React from 'react'; import PropTypes from 'prop-types'; -import Mustache from 'mustache'; import { Tooltip } from 'react-bootstrap'; import { d3format } from '../modules/utils'; @@ -183,15 +182,6 @@ class Chart extends React.PureComponent { return this.props.datasource.verbose_map[metric] || metric; } - // eslint-disable-next-line camelcase - render_template(s) { - const context = { - width: this.width(), - height: this.height(), - }; - return Mustache.render(s, context); - } - renderTooltip() { if (this.state.tooltip) { return ( diff --git a/superset/assets/src/visualizations/iframe.js b/superset/assets/src/visualizations/iframe.js index 89b1240c43d43..332f9bb0d03da 100644 --- a/superset/assets/src/visualizations/iframe.js +++ b/superset/assets/src/visualizations/iframe.js @@ -1,12 +1,20 @@ -const $ = require('jquery'); +import Mustache from 'mustache'; -function iframeWidget(slice) { - $('#code').attr('rows', '15'); - const url = slice.render_template(slice.formData.url); - slice.container.html(''); - const iframe = slice.container.find('iframe'); - iframe.css('height', slice.height()); - iframe.attr('src', url); -} +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 completedUrl = Mustache.render(url, { + width, + height, + }); -module.exports = iframeWidget; + const iframe = document.createElement('iframe'); + iframe.style.width = '100%'; + iframe.style.height = height; + iframe.setAttribute('src', completedUrl); + container.appendChild(iframe); +}