Встраивание вопроса метабазы ​​в iframe показывает заголовки, легенды и элементы управления, но не контент - PullRequest
Новая
       18

Встраивание вопроса метабазы ​​в iframe показывает заголовки, легенды и элементы управления, но не контент

1 голос
/ 10 марта 2020

У меня проблема с встраиванием вопросов с сервера Metabase 0.34.2 в iframe. Когда я встраиваю вопросы, тело элемента, который я встраиваю, скрыто и стилизовано в абсолютную позицию и слишком мала, чтобы его было видно.

Интересно, сталкивался ли кто-нибудь с этой проблемой и есть ли обходной путь?

Я создал небольшое приложение Sharepoint React, которое встраивает информационные панели Metabase и вопросы в iframe (с использованием response-iframe-resizer-super). Панели метабазы ​​встраивают и меняют размер с помощью этого приложения, но два вопроса метабазы, которые я хочу встроить, отображают все, кроме содержимого "тела".

Это основной код для создания встроенного iframe с помощью resizer: 

const iframeResizerOptions = 
  { 
    checkOrigin: false, 
    minHeight: 400,
    log: true
  };

function getMetabaseURL(props: IHelloDashProps) {
  var jwt = require("jsonwebtoken");
  var METABASE_SITE_URL = "https://metabase.blahblah.org";
  var METABASE_SECRET_KEY = props.secretkey;
  var payload = { 
    resource: { [props.dashboardorquestion]: Number(props.dashboardid) },
    params: {},
    exp: Math.round(Date.now() / 1000) + (10 * 60) // 10 minute expiration
  };
  console.log('Debug Payload: ' + JSON.stringify(payload));
  var token = sign(payload, METABASE_SECRET_KEY);
  var iframeUrl = METABASE_SITE_URL + "/embed/" + props.dashboardorquestion + "/" + token;
  return(iframeUrl);
}

export default function HelloDash(props: IHelloDashProps) {
  return (
    <ReactIframeResizer iframeResizerOptions={iframeResizerOptions} src={getMetabaseURL(props)}>
    </ReactIframeResizer>
  );
}

Мой первый вопрос для встраивания - это таблица, которая отображает 12 строк при просмотре в пользовательском интерфейсе Metabase или с URL-адресом для встраивания. на вкладке самостоятельно. Когда я встраиваю этот вопрос в вышеупомянутый изменяемый размер iframe, он отображает только 1 строку в таблице, и эта строка невидима, поскольку имеет абсолютное позиционирование и высоту 0. Элементы управления таблицы отображаются - «Строки 1-1 из 12» - но только одна невидимая строка, когда я надеюсь, что все 12 будут отображаться в HTML.

One row of table should appear here but it doesn't

Если я изменю визуализированный HTML, чтобы удалить абсолютный класс из Div вокруг стола (полагая, что я могу изменить источник), затем отображается одна строка. Однако у меня все еще есть проблема, что только одна из 12 строк отображается в DOM вместо всех 12.

<div class="absolute top bottom left right scroll-x scroll-show scroll-show--hover" style="overflow-y: hidden;">

У меня есть еще один встраиваемый вопрос с легендой и линией области сюжет. Опять же, он хорошо отрисовывается в метабазе и на собственной вкладке, но когда я встраиваю в iframe сact-iframe-resizer-super, заголовок и легенда видны, но тело графа установлено на высоту 0 и невидимо.

This should be a line plot

Я могу взломать визуализированный HTML (ниже), чтобы удалить position: absolute и указать фиксированную высоту для отображения линейного графика. 

<div style="position: absolute; top: 0px; left: 0px; width: 732.358px; height: 0px;">

The embedded line chart should look like this

Есть ли какие-либо советы и рекомендации для встраивания вопросов метабазы ​​в iframe, который мне не хватает?

1 Ответ

1 голос
/ 13 марта 2020

У меня такая же проблема с iframe-resizer-react. Я не решил проблему, но обходной путь - не использовать iframe-resizer-react и полагаться на способность реакции перерисовывать окно в сочетании с обычным стилем css. Высота фиксирована, но ширина автоматически изменяет размеры. 

<iframe
  src={iframeUrlChart}
  frameBorder={0}
  height={600}
  style={{ width: '1px', minWidth: '100%'}}
/>
...