타일 확장 빌드

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는 타일 확장 프로그램이 호스팅 대시보드와 상호작용할 수 있는 함수를 제공합니다.

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

타일 SDK 데이터

다음 표에서는 사용 가능한 타일 SDK 데이터 속성을 보여줍니다.

시각화 SDK 함수 및 속성

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

시각화 SDK 데이터

시각화 SDK는 다음으로 구성됩니다.

• 시각화 구성 데이터
• 쿼리 응답 데이터

시각화 구성 데이터

export interface VisualizationConfig {
  queryFieldMeasures: Measure[]
  queryFieldDimensions: Dimension[]
  queryFieldTableCalculations: TableCalculation[]
  queryFieldPivots: PivotConfig[]
  visConfig: RawVisConfig
}

쿼리 응답 데이터