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
This commit is contained in:
Krist Wongsuphasawat
2018-08-23 15:45:45 -07:00
committed by Chris Williams
parent 5c49514e2f
commit 9fb28b5f4e
3 changed files with 42 additions and 48 deletions

View File

@@ -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 (

View File

@@ -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,
});
const iframe = document.createElement('iframe');
iframe.style.width = '100%';
iframe.style.height = height;
iframe.setAttribute('src', completedUrl);
container.appendChild(iframe);
}
module.exports = iframeWidget;

View File

@@ -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;