Skip to main content

Metabase

Updated

The Metabase component is used to display Metabase reports inside an iframe using a generated URL. If the URL is not available, the component shows either a placeholder or a loading indicator.

Properties

interface MetabaseProps {
  id?: string;            // Component ID
  resourceKey: string;    // Resource key (also supports "question")
  resourceId: string;     // Resource ID
  frameWidth: string;     // Iframe width
  frameHeight: string;    // Iframe height
  chartParams?: string;   // Parameters used to build the report (default: { params: {} })
}

Usage

<ui-metabase
  id="metabase"
  resource-key="dashboard"
  resource-id="1"
  frame-width="100%"
  frame-height="1100px"
></ui-metabase>

<ui-aux :tree-id="0" :only-account="false">
  <template #default="{ p, r, loading, error }">
    <ui-metabase
      v-if="!loading"
      id="metabase"
      resource-key="question"
      resource-id="112"
      frame-width="100%"
      frame-height="1100px"
      :chart-params="{ params: { accountId: Number(r('s.id')) } }"
    ></ui-metabase>
  </template>
</ui-aux>

Component behavior

  1. Report URL loading
    • After the component is mounted, it calls getMetabaseUrl(...) to obtain the Metabase URL.
    • The request is performed via useMetabaseApi().getResourceUrl(...).
  2. State rendering
    • If the URL is successfully received: an <iframe> with the report is displayed.
    • While loading: a v-progress-circular indicator is displayed.

Related to

Related articles