Docs Menu
Docs Home
/
Atlas Charts
/
埋め込み
/
ダッシュボードの埋め込み
/
オプション

埋め込みダッシュボードのオプション

項目一覧

  • 埋め込みダッシュボードのオプション
  • ダッシュボード構成
  • getChart('<chartID>')
  • setAutoRefresh()
  • setMaxDataAge()
  • setTheme(theme: 'dark' | 'light')
  • ダッシュボード構成例

埋め込み SDK は、ウェブページ内でダッシュボードをレンダリングするための JavaScript createDashboard()メソッドを提供します。 オプションを使用して、ダッシュボードの多くの要素（高さや幅など）を制御できます。

例

次の例では、ダッシュボードの高さと幅を指定するオプションとともにcreateDashboardメソッドを使用する方法を示しています。

const dashboard = sdk.createDashboard({
  dashboardId: "8d4dff93-e7ca-4ccd-a622-e20e8a100197",
  baseUrl: "https://charts.mongodb.com/dashboards-embedding-examples-hmewt",
  height: 300,
  width: 400
});

埋め込みダッシュボードのオプション

createDashboard()メソッドは次のオプションを取ります。

オプション
タイプ
説明
必須
autoRefresh
ブール値

ダッシュボードが自動的に更新されるかどうかを指定するフラグ。 省略すると、ダッシュボードは自動的に更新されません。

ダッシュボードの自動更新頻度を設定するには、このオプションをmaxDataAgeオプションとともに使用します。

no
background
string

themeの背景の代わりにダッシュボードに適用する背景色。 次の値を指定できます。

  • 色 16進数コード

  • CSSの色名

  • 値を使用する透過的なバックグラウンド transparent

省略した場合、背景色は現在のthemeにデフォルト設定されます。

  • #F1F5F4 lightテーマの場合、または

  • #12212C darkテーマの

no
baseUrl
string
ダッシュボードのベース URL。
はい
dashboardId
string
ダッシュボードを識別する一意のstring 。
はい
getUserToken
オブジェクト

base64 でエンコードされたJSON web tokenトークンを返す関数。 Charts はこのトークンを検証し、認証されたダッシュボードをレンダリングするかどうかを判断します。

認証アクセスを有効にした場合、Atlas Charts は、Charts がに構成された認証プロバイダを使用してトークンを検証できる場合にのみ、認証されたダッシュボード ビューをレンダリングします。 トークンが無効な場合、Charts はダッシュボードをレンダリングしません。

非認証アクセスを有効にした場合、Atlas Charts は常に非認証のダッシュボード ビューをレンダリングします。 詳細については、「カスタムJSON web tokenプロバイダーを使用して認証されたチャートを埋め込む 」を参照してください。

no
height
数値
ダッシュボードの高さ。 省略した場合、デフォルトはコンテナの高さになります。 単位なしで値を指定した場合、デフォルトはドット（expire）になります。
no
maxDataAge
数値

ダッシュボードのロードまたはリフレッシュ時に、キャッシュから読み込むデータの最大経過時間。 省略した場合、Atlas Charts は、データが 1 時間未満の場合にのみ、キャッシュからのデータを含むダッシュボードをレンダリングします。

キャッシュのデータが 1 時間以上古い場合、Charts はデータソースで最新データをクエリし、キャッシュを更新し、このデータを使用してダッシュボードをレンダリングします。

Atlas Chartsがキャッシュからデータをロードする方法については、「autoRefresh maxDataAge更新とデータ キャッシュの動作 」を参照してください。

no
showAttribution
ブール値
ダッシュボードの下に MongoDBロゴを表示するかどうかを指定します。 デフォルトはtrueです。
no
theme
string

ダッシュボードで使用するテーマ。 次のオプションが有効です。

  • light ダークテキストとダッシュボード要素を含む明るめのバックグラウンドの場合、または

  • dark 明るめのテキストとダッシュボード要素を含むダーク バックグラウンド用。

省略された場合、デフォルトはlightとなります。

no
width
数値
ダッシュボードの幅。 省略した場合、デフォルトはコンテナの幅になります。 単位なしで値を指定した場合、デフォルトはドット（expire）になります。
no

ダッシュボードの作成後、 DashboardsEmbedSDK.createDashboard({ ... })によって返されるDashboardインスタンスでメソッドを呼び出すことで、ダッシュボードの構成を制御できます。

ダッシュボード構成

ダッシュボードの作成後、 DashboardsEmbedSDK.createDashboard({ ... })によって返されるDashboardインスタンスでメソッドを呼び出すことで、ダッシュボードの構成を制御できます。

getChart('<chartID>')

チャートのchartId string を使用して、埋め込みダッシュボードから特定のチャートを検索します。 このメソッドを呼び出した後、チャート上の要素を強調表示したり、データをフィルタリングしたりできます。

setAutoRefresh()

ダッシュボードが自動的に更新されるかどうかを指定するフラグ。 省略した場合、ダッシュボードは自動的に更新されません。

このメソッドをsetMaxDataAgeメソッドとともに使用して、ダッシュボードの更新頻度を設定します。

setMaxDataAge()

ダッシュボードをロードまたは更新するときに、キャッシュから読み込むデータの最大経過時間。 省略した場合、Atlas Charts は、データが 1 時間未満の場合にのみ、キャッシュからのデータを含むダッシュボードをレンダリングします。

キャッシュのデータが 1 時間以上古い場合、Charts はデータソースで最新データをクエリし、キャッシュを更新し、このデータを使用してダッシュボードをレンダリングします。

Atlas Chartsがキャッシュからデータをロードする方法については、「setAutoRefresh setMaxDataAge更新とデータ キャッシュの動作 」を参照してください。

setTheme(theme: 'dark' | 'light')

埋め込みダッシュボードの現在のテーマ。 テーマをdarkに設定するときは、情報が表示されるように、ダッシュボードの背景色に適切なコントラストがあることを確認してください。

Tip

以下も参照してください。

  • 埋め込み SDK API ドキュメント

  • 埋め込み SDK の例

ダッシュボード構成例

サンプル コード スニペットでは、 dashboardという名前のダッシュボード インスタンスに対して次のオプションを構成します。

  • のテーマは dark

  • 自動更新レートは 60 秒ごとです

dashboard.setTheme("dark");
dashboard.setAutoRefresh(true);
dashboard.setMaxDataAge(60);

戻る

オプション

次へ

iFrame