Looker 24.0부터는 확장 프로그램이 대시보드의 타일에서 실행되도록 개발할 수 있습니다. 타일 또는 시각화로 실행되도록 지원하는 확장 프로그램을 대시보드가 수정 모드에 있는 동안 추가하거나 Explore에서 시각화로 대시보드에 저장할 수 있습니다. LookML 대시보드에서 확장 프로그램을 타일로 구성할 수도 있습니다.
대시보드 타일로 사용할 수 있는 확장 프로그램의 예는 다음과 같습니다.
- 타일 시각화 확장 프로그램은 확장 프로그램 프레임워크를 사용하여 맞춤 시각화를 빌드하는 방법을 보여줍니다.
- 타일 SDK 확장 프로그램은 타일 확장 프로그램과 관련된 사용 가능한 API 메서드를 보여줍니다.
타일 확장 프로그램과 함께 Looker 확장 프로그램 SDK 사용
확장 프로그램을 대시보드에 타일로 로드하려면 타일 확장 프로그램에서 LookML 프로젝트 매니페스트 파일에 mount_points 매개변수를 정의해야 합니다. 타일 확장 프로그램과 관련된 mount_points에는 다음과 같은 두 가지 유형이 있습니다.
mount_points: {
dashboard_vis: yes
dashboard_tile: yes
standalone: yes
}
dashboard_vis— 확장 프로그램이 사용 설정되면 Explore의 시각화 옵션에 표시되며, 여기서 확장 프로그램을 시각화로 선택하여 대시보드 타일로 저장할 수 있습니다. 대시보드 실행 시 해당 대시보드는 타일과 연결된 쿼리를 실행하고 데이터를 확장 프로그램에서 사용할 수 있게 합니다. 이는 커스텀 시각화의 작동 방식과 비슷합니다. 커스텀 시각화와dashboard_vis가 사용 설정된 대시보드 타일에서 실행되는 확장 프로그램의 주요 차이점은 확장 프로그램에서 Looker API를 호출할 수 있다는 점입니다.dashboard_tile— 사용 설정 시 확장 프로그램은 사용자가 대시보드를 수정하고 추가 버튼을 클릭한 후 확장 프로그램 옵션을 선택할 때 표시되는 확장 프로그램 패널에 나타납니다. 이러한 유형의 확장 프로그램은 타일 쿼리에서 자동으로 확장 프로그램에 데이터를 제공하는 대신 자체 데이터를 검색합니다.
추가 마운트 지점 standalone으로 인해 확장 프로그램이 Looker 기본 메뉴의 애플리케이션 섹션 아래에 표시됩니다. 확장 프로그램에 여러 개의 마운트 지점이 정의할 수 있습니다. 런타임 시 확장 프로그램은 마운트 방식에 대한 알림을 받고 그에 따라 동작을 조정할 수 있습니다. 예를 들어 standalone 확장 프로그램은 자체 높이를 설정해야 하지만 타일 확장 프로그램은 그렇지 않습니다.
타일 확장 프로그램 추가 API
타일 확장 프로그램에는 런타임 시 추가 API 및 데이터가 제공됩니다. 이는 확장 프로그램 컨텍스트에서 가져올 수 있습니다.
const {
tileSDK,
tileHostData,
visualizationData,
visualizationSDK,
} = useContext(ExtensionContext40)
tileSDK- 확장 프로그램이 Looker 대시보드 호스트와 상호작용할 수 있도록 타일별로 함수를 제공합니다. 예를 들어 확장 프로그램이 오류 메시지를 표시하고 삭제하도록 허용합니다.tileHostData— 확장 프로그램에 타일 데이터를 제공합니다. 데이터는 호스팅 대시보드와의 상호작용에 따라 자동으로 업데이트됩니다.isDashboardEditing표시기를 예로 들 수 있습니다.visualizationSDK— 확장 프로그램이 Looker 대시보드 호스트와 상호작용할 수 있도록 시각화별로 함수를 제공합니다.updateRowLimit함수를 예로 들 수 있습니다.visualizationData- 확장 프로그램에 시각화 데이터를 제공합니다. 데이터는 호스팅 대시보드와의 상호작용에 따라 자동으로 업데이트됩니다. 이 데이터는 커스텀 시각화에 제공되는 데이터와 유사합니다.
대응형 확장 프로그램 빌드
확장 프로그램이 실행되는 iframe은 상위 Looker 호스트 창의 크기를 조정할 때 자동으로 크기를 조정합니다. 이는 iframe 콘텐츠 창에 자동으로 반영됩니다. iframe 구성요소에는 패딩이나 여백이 없으므로 Looker 애플리케이션과 일관되게 표시되도록 자체 패딩과 여백을 제공하는 것은 확장 프로그램의 몫입니다. 독립형 확장 프로그램의 경우 해당 확장 프로그램에서 확장 프로그램의 높이를 제어합니다. 대시보드 타일 또는 탐색 시각화에서 실행되는 확장 프로그램의 경우 iframe 콘텐츠 창이 iframe에서 사용할 수 있는 높이로 자동 설정됩니다.
렌더링 고려사항
타일 확장 프로그램은 대시보드가 PDF 또는 이미지로 다운로드할 때 렌더링된다는 점에 유의해야 합니다. 렌더러는 렌더링이 완료되면 타일이 이를 알릴 것으로 예상합니다. 이렇게 하지 않으면 렌더러가 응답을 중지합니다. 다음은 타일이 렌더링되었음을 렌더러에 알리는 방법의 예입니다.
const { extensionSDK } = useContext(ExtensionContext40)
useEffect(() => {
extensionSDK.rendered()
}, [])
렌더링할 때 애니메이션도 사용 중지해야 합니다. 다음은 렌더링 시 애니메이션 구성이 해제되는 예시입니다.
const { lookerHostData} = useContext(ExtensionContext40)
const isRendering = lookerHostData?.isRendering
const config = isRendering
? {
...visConfig,
valueCountUp: false,
waveAnimateTime: 0,
waveRiseTime: 0,
waveAnimate: false,
waveRise: false,
}
: visConfig
if (mountPoint === MountPoint.dashboardVisualization) {
return <VisualizationTile config={config} />
}
타일 SDK 함수 및 속성
타일 SDK는 타일 확장 프로그램이 호스팅 대시보드와 상호작용할 수 있는 함수를 제공합니다.
사용 가능한 함수와 속성은 다음 표에 나와 있습니다.
| 함수 또는 속성 | 설명 |
|---|---|
tileHostData(속성) |
타일 확장 프로그램 관련 데이터를 호스팅합니다. 자세한 내용은 타일 SDK 데이터 섹션을 참조하세요. |
addError |
호출 시 대시보드 또는 Explore에서 시각화 아래에 오류 메시지를 표시합니다. |
clearError |
호출 시 대시보드 또는 Explore에서 시각화 아래에 표시된 오류 메시지를 숨깁니다. |
openDrillMenu |
시각화 확장 프로그램에서 이 호출로 드릴다운 메뉴를 엽니다. 확장 프로그램이 타일 확장 프로그램 시각화가 아닌 경우 이 호출은 무시됩니다. |
runDashboard |
현재 대시보드를 실행합니다. 이 호출은 Explore에서 실행 중인 타일 시각화 확장 프로그램에서 무시됩니다. |
stopDashboard |
실행 중인 대시보드를 중지합니다. 이 호출은 Explore에서 실행 중인 타일 시각화 확장 프로그램에서 무시됩니다. |
updateFilters |
현재 대시보드 또는 Explore의 필터를 업데이트합니다. |
openScheduleDialog |
일정 대화상자를 엽니다. 이 호출은 Explore에서 실행될 때 무시됩니다. |
toggleCrossFilter |
교차 필터를 전환합니다. 이 호출은 Explore에서 실행될 때 무시됩니다. |
타일 SDK 데이터
사용 가능한 타일 SDK 데이터 속성은 다음 표에 나와 있습니다.
| 속성 | 설명 |
|---|---|
isExploring |
True인 경우 타일이 Explore 내에서 시각화로 구성되어 있음을 나타냅니다. |
dashboardId |
렌더링할 타일의 대시보드 ID입니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다. |
elementId |
렌더링할 타일의 요소 ID입니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다. |
queryId |
시각화와 연결된 경우 렌더링되는 타일의 쿼리 ID입니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다.queryId는 시각화가 Looker Explore에 기본 제공되는 경우 생성되는 쿼리의 ID입니다. 대시보드에 적용할 필터 또는 교차 필터링은 포함되지 않습니다. QueryResponse에 표시된 데이터를 반영하려면 필터와 교차 필터를 적용하고 새 쿼리를 생성해야 합니다. 따라서 queryId보다 더 유용한 속성이 있을 수 있습니다. 필터가 적용된 쿼리 객체는 filteredQuery를 참조하세요. |
querySlug |
시각화와 연결된 경우 렌더링되는 타일의 쿼리 슬러그입니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다.querySlug는 시각화가 Looker Explore에 기본 제공되는 경우 생성되는 쿼리의 슬러그입니다. 대시보드에 적용되는 필터 또는 교차 필터링은 포함되지 않습니다. QueryResponse에 표시된 데이터를 반영하려면 필터와 교차 필터를 적용하고 새 쿼리를 생성해야 합니다. 따라서 querySlug보다 더 유용한 속성이 있을 수 있습니다. 필터가 적용된 쿼리 객체는 filteredQuery를 참조하세요. |
dashboardFilters |
대시보드에 적용되는 필터입니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다. |
dashboardRunState |
대시보드가 실행 중인지 여부를 나타냅니다. 타일이 Explore로 구성되는 경우 상태가 UNKNOWN이 됩니다.대시보드 성능상의 이유로 실행 상태가 실행 중으로 표시되지 않을 수 있습니다. 이는 일반적으로 확장 프로그램과 연결된 타일 등 쿼리와 연결된 다른 타일이 없는 경우에 발생합니다. 확장 프로그램에서 대시보드가 실행되었는지 확인해야 할 경우 lastRunStartTime의 차이를 감지하는 것이 안정적인 방법입니다. |
isDashboardEditing |
True인 경우 대시보드를 수정하는 중입니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다. |
isDashboardCrossFilteringEnabled |
True인 경우 대시보드에서 교차 필터링이 사용 설정됩니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다. |
filteredQuery |
대시보드 수준에서 수행한 모든 대시보드 필터 및 시간대 변경사항을 적용하는 기본 대시보드 요소와 연결된 쿼리 ID와 일치하는 쿼리 객체입니다. |
lastRunSourceElementId |
마지막 대시보드 실행을 트리거한 타일 확장 프로그램 요소의 ID입니다. 대시보드 실행이 대시보드 실행 버튼 또는 자동 새로고침에 의해 트리거되었거나 삽입 SDK를 사용하여 실행이 트리거된 경우에는 ID가 정의되지 않습니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다.lastRunSourceElementId는 현재 확장 프로그램 인스턴스의 요소 ID와 동일할 수 있습니다. 예를 들어 확장 프로그램이 대시보드 실행을 트리거하는 경우 대시보드 실행이 시작되고 완료되면 알림이 표시됩니다. |
lastRunStartTime |
마지막 대시보드 실행 시작 시간을 나타냅니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다.보고되는 시작 및 종료 시간은 성능 측정항목을 캡처하는 데 사용해서는 안 됩니다. |
lastRunEndTime |
마지막 대시보드 실행 종료 시간을 나타냅니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다. 타일이 실행 중인 경우 이 속성은 채워지지 않습니다.보고된 시작 및 종료 시간은 성능 측정항목을 캡처하는 데 사용해서는 안 됩니다. |
lastRunSuccess |
마지막 대시보드 실행의 성공 여부를 나타냅니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다. 타일이 실행 중인 경우 이 속성은 채워지지 않습니다. |
시각화 SDK 함수 및 속성
사용 가능한 시각화 SDK 함수와 속성은 다음 표에 나와 있습니다.
| 함수 또는 속성 | 설명 |
|---|---|
visualizationData(속성) |
시각화(visConfig 및 queryResponse 데이터의 조합) |
visConfig(속성) |
시각화 구성 데이터:
|
queryResponse(속성) |
쿼리의 응답 데이터 |
configureVisualization |
확장 프로그램 시각화의 기본 구성을 설정합니다. 이 구성이 Explore 시각화 편집기 내에서 렌더링됩니다. 한 번만 호출해야 합니다. |
setVisConfig |
시각화 구성을 업데이트합니다. |
updateRowLimit |
쿼리 행 한도를 업데이트합니다. |
시각화 SDK 데이터
시각화 SDK는 다음과 같이 구성됩니다.
- 시각화 구성 데이터
- 응답 데이터 쿼리
시각화 구성 데이터
| 속성 | 설명 |
|---|---|
queryFieldMeasures |
측정 정보 |
queryFieldDimensions |
측정기준 정보 |
queryFieldTableCalculations |
테이블 계산 정보 |
queryFieldPivots |
피벗 정보 |
visConfig |
시각적 구성 데이터. 기본 구성과 병합되고 확장 프로그램에서 렌더링되는 시각화에 적용되어야 합니다. |
export interface VisualizationConfig {
queryFieldMeasures: Measure[]
queryFieldDimensions: Dimension[]
queryFieldTableCalculations: TableCalculation[]
queryFieldPivots: PivotConfig[]
visConfig: RawVisConfig
}
응답 데이터 쿼리
| 속성 | 설명 |
|---|---|
data |
행 데이터 배열 |
fieldMeasures |
필드 측정 정보. |
fieldDimensions |
필드 측정기준 정보. |
fieldTableCalculations |
필드 테이블 계산 정보. |
fieldPivots |
필드 피벗 정보. |
fieldMeasureLike |
측정처럼 작동하는 필드 측정 정보 및 테이블 계산의 연결된 배열입니다. |
fieldDimensionLike |
측정기준처럼 작동하는 필드 측정기준 정보 및 테이블 계산의 연결된 배열입니다. |