타일 확장 빌드

Looker 24.0부터는 확장 프로그램이 대시보드의 타일에서 실행되도록 개발할 수 있습니다. 타일 또는 시각화로 실행되도록 지원하는 확장 프로그램을 대시보드가 수정 모드에 있는 동안 추가하거나 Explore에서 시각화로 대시보드에 저장할 수 있습니다. LookML 대시보드에서 확장 프로그램을 타일로 구성할 수도 있습니다.

대시보드 타일로 사용할 수 있는 확장 프로그램의 예시도 제공됩니다.

타일 확장 프로그램과 함께 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입니다. 대시보드 실행이 대시보드 실행 버튼 또는 autorefresh에 의해 트리거되었거나 삽입 SDK를 사용하여 실행이 트리거된 경우에는 ID가 정의되지 않습니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다.

lastRunSourceElementId는 현재 확장 프로그램 인스턴스의 요소 ID와 동일할 수 있습니다. 예를 들어 확장 프로그램이 대시보드 실행을 트리거하는 경우 대시보드 실행이 시작되고 완료되면 알림이 표시됩니다.
lastRunStartTime 마지막 대시보드 실행 시작 시간을 나타냅니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다.

보고된 시작 및 종료 시간은 성능 측정항목을 캡처하는 데 사용하지 않아야 합니다.
lastRunEndTime 마지막 대시보드 실행 종료 시간을 나타냅니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다. 타일이 실행 중이면 이 속성이 채워지지 않습니다.

보고된 시작 및 종료 시간은 성능 측정항목을 캡처하는 데 사용하지 않아야 합니다.
lastRunSuccess 마지막 대시보드 실행이 성공했는지 여부를 나타냅니다. 타일이 Explore로 구성되는 경우 이 속성은 채워지지 않습니다. 타일이 실행 중이면 이 속성이 채워지지 않습니다.

시각화 SDK 함수 및 속성

다음 표에서는 사용 가능한 시각화 SDK 함수 및 속성을 보여줍니다.

함수 또는 속성 설명
visualizationData(속성) 시각화(visConfig 및 queryResponse 데이터의 조합)
visConfig(속성) 시각화 구성 데이터:

  • 측정 구성
  • 측정기준 구성
  • 테이블 계산
  • 피벗 구성
  • 시각화 구성

Explore에서 시각화의 모양과 느낌을 맞춤설정하는 데 사용됩니다.
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 측정기준처럼 작동하는 필드 측정기준 정보 및 테이블 계산의 연결된 배열입니다.