Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SIP-5] Revise markup.js and iframe.js #5672

Merged
merged 5 commits into from
Aug 23, 2018
Merged

[SIP-5] Revise markup.js and iframe.js #5672

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bbb846f
Do not call slice.xxx
kristw Aug 18, 2018
397d0e0
remove iframe id
kristw Aug 18, 2018
0e0213d
remove old code
kristw Aug 18, 2018
15d5a8c
use import instead of require
kristw Aug 18, 2018
24661da
update iframe.js
kristw Aug 18, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 0 additions & 10 deletions superset/assets/src/chart/Chart.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 (
Expand Down
28 changes: 18 additions & 10 deletions superset/assets/src/visualizations/iframe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
52 changes: 24 additions & 28 deletions superset/assets/src/visualizations/markup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;