임베디드 대시보드 옵션

이 페이지의 내용

임베디드 대시보드 옵션

대시보드 구성
getChart('<chartID>')
setAutoRefresh()
setMaxDataAge()
setTheme(theme: 'dark' | 'light')
대시보드 구성 예제

Embedding 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`	문자열	`theme` 배경 대신 대시보드에 적용할 배경색입니다. 다음을 지정할 수 있습니다. 색상 16진수 코드 CSS 색상 이름 값을 사용한 투명한 배경 `transparent` 생략하면 배경색은 기본적으로 현재 `theme` 로 설정됩니다. `#F1F5F4` `light` 테마의 경우 또는 `#12212C` `dark` 테마의 경우.	no
`baseUrl`	문자열	대시보드의 기본 URL입니다.	네
`dashboardId`	문자열	대시보드를 식별하는 고유 문자열입니다.	네
`getUserToken`	객체	`base64`로 인코딩된 JSON web token 토큰을 반환하는 함수입니다. Atlas Charts는 이 토큰의 유효성을 검사하여 인증된 대시보드를 렌더링할지 여부를 결정합니다. 인증된 액세스 를 활성화한 경우, Atlas Charts 는 Charts 가 구성된 인증 제공자 를 사용하여 토큰의 유효성을 검사할 수 있는 경우에만 인증된 대시보드 보기를 렌더링합니다. 토큰이 유효하지 않은 경우 Charts 는 대시보드 를 렌더링하지 않습니다. 인증되지 않은 액세스 를 허용한 경우, Atlas Charts 는 항상 인증되지 않은 대시보드 보기를 렌더링합니다. 학습 내용 은 사용자 지정 JSON web token 제공자를 사용하여 인증된 차트 임베드하기를 참조하세요.	no
`height`	숫자	대시보드의 높이입니다. 생략하면 기본값은 container 높이입니다. 단위 없이 값을 제공하면 기본값은 픽셀(PX)입니다.	no
`maxDataAge`	숫자	대시보드를 로드하거나 새로 고침할 때 캐시에서 로드할 데이터의 최대 사용 기간입니다. 이를 생략할 경우 Atlas Charts는 데이터가 생성된 지 1시간 미만인 경우에만 캐시의 데이터로 대시보드를 렌더링합니다. 캐시의 데이터가 1시간 이상 지난 경우 Atlas Charts는 데이터 소스에서 최신 데이터를 쿼리하고 캐시를 새로 고치고 이 데이터를 사용하여 대시보드를 렌더링합니다. `autoRefresh` 및 `maxDataAge` 값을 기준으로 대시보드를 로드하거나 새로 고칠 때 Atlas Charts가 캐시에서 데이터를 로드하는 방법을 알아보려면 새로 고침 및 데이터 캐싱 동작을 참조하세요.	no
`showAttribution`	부울	대시보드 아래에 MongoDB 로고를 표시할지 여부를 지정합니다. 기본값은 `true` 입니다.	no
`theme`	문자열	대시보드에서 사용할 테마 입니다. 다음 옵션을 사용할 수 있습니다. `light` 어두운 텍스트 및 대시보드 요소가 있는 밝은 배경 또는 `dark` 밝은 텍스트와 대시보드 요소가 있는 어두운 배경입니다. 생략하면 기본값은 `light` 입니다.	no
`width`	숫자	대시보드의 너비입니다. 생략하면 기본값은 container 너비입니다. 단위 없이 값을 지정하면 기본값은 픽셀(PX)입니다.	no

대시보드가 생성된 후에는 DashboardsEmbedSDK.createDashboard({ ... }) 에서 반환된 Dashboard 인스턴스에서 메서드를 호출하여 대시보드 구성을 제어할 수 있습니다.

대시보드 구성

대시보드를 만든 Dashboard 후에는 DashboardsEmbedSDK.createDashboard({ ... }) 에서 반환된 인스턴스에서 메서드를 호출하여 대시보드 구성을 제어할 수 있습니다.

`getChart('<chartID>')`

차트의 chartId 문자열을 사용하여 내장된 대시보드에서 특정 차트를 검색합니다. 이 메서드를 호출한 후 차트의 요소를 강조 표시 하거나 데이터를 필터링 할 수 있습니다.

`setAutoRefresh()`

대시보드를 자동으로 새로 고침할지 여부를 지정하는 플래그입니다. 생략하면 대시보드가 자동으로 새로 고침되지 않습니다.

대시보드를 새로 고치는 빈도를 구성하려면 이 메서드를 setMaxDataAge 메서드와 함께 사용합니다.

`setMaxDataAge()`

대시보드를 로드하거나 새로 고칠 때 캐시에서 로드할 데이터의 최대 보관 기간입니다. 이를 생략할 경우 Atlas Charts는 데이터가 생성된 지 1시간 미만인 경우에만 캐시의 데이터로 대시보드를 렌더링합니다.

캐시의 데이터가 1시간 이상 지난 경우 Atlas Charts는 데이터 소스에서 최신 데이터를 쿼리하고 캐시를 새로 고치고 이 데이터를 사용하여 대시보드를 렌더링합니다.

setAutoRefresh 및 setMaxDataAge 값을 기준으로 대시보드를 로드하거나 새로 고칠 때 Atlas Charts가 캐시에서 데이터를 로드하는 방법을 알아보려면 새로 고침 및 데이터 캐싱 동작을 참조하세요.

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

내장된 대시보드의 현재 테마입니다. 테마를 dark 로 설정할 때 정보가 표시될 수 있도록 대시보드의 배경색이 적절한 대비를 가지고 있는지 확인하세요.

팁

다음도 참조하세요.

대시보드 구성 예제

예시 코드 스니펫은 dashboard 대시보드 인스턴스에 대해 다음 옵션을 구성합니다.

테마 dark
60초마다 자동 새로 고침 빈도

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

돌아가기

옵션

iframe