[incubator-superset] branch master updated: Revise markup.js and iframe.js (#5672)

[cc...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

ccwilliams 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 9fb28b5  Revise markup.js and iframe.js (#5672)
9fb28b5 is described below

commit 9fb28b5f4e86ee3fb8862447d8686cdf5dfb28ea
Author: Krist Wongsuphasawat <kr...@gmail.com>
AuthorDate: Thu Aug 23 15:45:45 2018 -0700

    Revise markup.js and iframe.js (#5672)
    
    * Do not call slice.xxx
    
    * remove iframe id
    
    * remove old code
    
    * use import instead of require
    
    * update iframe.js
---
 superset/assets/src/chart/Chart.jsx          | 10 ------
 superset/assets/src/visualizations/iframe.js | 28 +++++++++------
 superset/assets/src/visualizations/markup.js | 52 +++++++++++++---------------
 3 files changed, 42 insertions(+), 48 deletions(-)

diff --git a/superset/assets/src/chart/Chart.jsx b/superset/assets/src/chart/Chart.jsx
index 032f1d6..ed49eea 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 89b1240..332f9bb0 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('<iframe style="width:100%;"></iframe>');
-  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);
+}
diff --git a/superset/assets/src/visualizations/markup.js b/superset/assets/src/visualizations/markup.js
index 3068d02..1f632bf 100644
--- a/superset/assets/src/visualizations/markup.js
+++ b/superset/assets/src/visualizations/markup.js
@@ -1,44 +1,40 @@
-const srcdoc = require('srcdoc-polyfill');
-
-require('./markup.css');
+import srcdoc from 'srcdoc-polyfill';
+import './markup.css';
 
 function markupWidget(slice, payload) {
-  $('#code').attr('rows', '15');
-  const jqdiv = slice.container;
-  jqdiv.css({
-    overflow: 'auto',
-  });
+  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)
-  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 iframeHeight = vizType === 'separator'
+    ? height - 20
+    : height + headerHeight;
 
-  const iframeId = `if__${slice.containerId}`;
-  const stylesheets = payload.data.theme_css.map(
-    href => `<link rel="stylesheet" type="text/css" href="${href}" />`,
-  );
   const html = `
     <html>
       <head>
-        ${stylesheets}
+        ${data.theme_css.map(
+          href => `<link rel="stylesheet" type="text/css" href="${href}" />`,
+        )}
       </head>
       <body style="background-color: transparent;">
-        ${payload.data.html}
+        ${data.html}
       </body>
     </html>`;
-  jqdiv.html(`
-    <iframe id="${iframeId}"
-      frameborder="0"
-      height="${iframeHeight}"
-      sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation">
-    </iframe>
-  `);
 
-  const iframe = document.getElementById(iframeId);
+  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);
 }
 
-module.exports = markupWidget;
+export default markupWidget;