Optimización del redimensionamiento del objeto visual personalizado en Power BI

En este artículo, aprenderá a optimizar la gestión del cambio de tamaño en los objetos visuales personalizados de Power BI que se crean con powerbi-visuals-api. Cuando un usuario del informe cambia el tamaño de un objeto visual personalizado, Power BI llama al método update() del objeto visual con VisualUpdateOptions, incluidas las dimensiones actuales del área de visualización. Esta guía solo se aplica a Power BI objetos visuales personalizados; no cambia el comportamiento de cambio de tamaño para objetos visuales de Power BI integrados.

Si un objeto visual personalizado trata cada VisualUpdateType.Resize evento como un cambio de datos completo, los eventos de cambio de tamaño repetidos pueden volver a procesar options.dataViews, recompilar elementos del Modelo de objetos de documento (DOM) y bloquear el subproceso principal del explorador. Para mantener la capacidad de respuesta de las interacciones de cambio de tamaño, use VisualUpdateType marcas de bits para separar los cambios de datos de los cambios de ventanilla, almacenar en caché el estado visual procesado y aplazar la representación dependiente del diseño hasta VisualUpdateType.ResizeEnd.

¿Cómo funcionan los eventos de cambio de tamaño de VisualUpdateType Power BI?

El Visual.update(options) método recibe un options.type campo que indica por qué Power BI desencadenó la actualización. La ventana gráfica es el tamaño actual personalizado del contenedor visual de options.viewport, incluidos el ancho y la altura.

Marca VisualUpdateType Cuando Power BI lo envía Gestión del cambio de tamaño
VisualUpdateType.Data Se han cambiado los datos o la vista de datos. Realice una representación completa.
VisualUpdateType.Resize Se cambia el tamaño de un objeto visual personalizado Power BI y Power BI envía eventos repetidos mientras el cambio de tamaño está en curso. Realice solo el trabajo mínimo en el viewport.
VisualUpdateType.ResizeEnd Operación de cambio de tamaño completada. Recalcular los elementos dependientes del diseño final solo cuando sea necesario.
VisualUpdateType.ViewMode El modo de visualización ha cambiado, por ejemplo, del modo de edición al modo de visualización. Realice una representación completa.
VisualUpdateType.Style Tema o estilo cambiado. Realice una representación completa.

Idea clave:VisualUpdateType es una enumeración de indicadores de bits. Un solo options.type valor puede incluir VisualUpdateType.Resize y otros motivos de actualización, como VisualUpdateType.Data o VisualUpdateType.Style. Use comprobaciones bit a bit, como (options.type & VisualUpdateType.Resize) !== 0, en lugar de comprobaciones de igualdad. Durante VisualUpdateType.Resize, haz solo el mínimo trabajo posible en la ventana gráfica. Durante VisualUpdateType.ResizeEnd, realice las actualizaciones finales del diseño que requieren el tamaño final del contenedor.

¿Cómo se implementa un patrón de actualización de solo cambio de tamaño?

El patrón resize-update separa el trabajo de solo cambio de tamaño de las actualizaciones que requieren representación de datos, estilo o modo de vista. Si options.type incluye algún indicador distinto de cambio de tamaño, realiza un renderizado completo en lugar de tratar la actualización como un cambio únicamente del viewport.

Condición de VisualUpdateType Comportamiento del renderizado Trabajo que se va a realizar
Las marcas que no cambian de tamaño están presentes Representación completa Reprocesar datos, aplicar cambios en el modo de vista o estilo y recompilar elementos que dependen de esos cambios.
Solo VisualUpdateType.Resize está presente Representación de solo cambio de tamaño Ajuste las dimensiones de la ventanilla o escale el contenido existente sin volver a procesar los datos.
VisualUpdateType.ResizeEnd aparece solo con indicadores de cambio de tamaño Representación al finalizar el cambio de tamaño Vuelva a calcular los elementos dependientes del diseño final después de que el contenedor alcance su tamaño final. 
public update(options: VisualUpdateOptions): void {
    const resizeFlags = VisualUpdateType.Resize | VisualUpdateType.ResizeEnd;
    const isResize = (options.type & VisualUpdateType.Resize) !== 0;
    const isResizeEnd = (options.type & VisualUpdateType.ResizeEnd) !== 0;
    const hasOnlyResizeFlags = (options.type & ~resizeFlags) === 0;

    if (!hasOnlyResizeFlags) {
        this.fullRender(options);
        return;
    }

    if (isResizeEnd) {
        // Resize finished; recalculate layout-dependent elements only when needed.
        this.recalculateLayout(options.viewport);
        return;
    }

    if (isResize) {
        // Adjust only layout and viewport; do not reprocess data or rebuild the DOM.
        this.adjustViewport(options.viewport);
        return;
    }

    // Full render for data changes, style changes, and other updates.
    this.fullRender(options);
}

Después de agregar el patrón, compruebalo al cambiar el tamaño del objeto visual personalizado en un lienzo de informe. El objeto visual debe actualizar su tamaño durante el arrastre sin volver a procesar la vista de datos, y los elementos que dependen del diseño final, como las etiquetas de los ejes, deben aparecer en sus posiciones definitivas después de VisualUpdateType.ResizeEnd.

¿Qué trabajo pertenece a eventos de cambio de tamaño y de fin de cambio de tamaño?

Durante un evento activo VisualUpdateType.Resize , prefiere las operaciones que actualizan la ventanilla o escalan los elementos representados existentes. Reserve las tareas que consumen muchos recursos para VisualUpdateType.ResizeEnd o para las actualizaciones con cambios de datos, estilo o modo de vista.

Tareas que realizar durante VisualUpdateType.Resize

  • Actualice las dimensiones SVG viewBox o contenedor con CSS.
  • Escale el contenido representado existente, por ejemplo, con CSS transform.
  • Almacene el nuevo options.viewport ancho y alto para su uso posterior.

Tareas que deben evitarse durante VisualUpdateType.Resize

  • Volver a ejecutar la consulta o volver a procesar options.dataViews.
  • Recompile elementos DOM, como ejes, leyendas o puntos de datos.
  • Recalcular las dimensiones del texto para todas las etiquetas.
  • Active algoritmos de diseño que consumen muchos recursos, como grafos dirigidos por fuerzas o mapas de árbol.

Trabajo que hacer en VisualUpdateType.ResizeEnd

  • Recalcular el número de marcas del eje o las etiquetas de texto que dependen de las dimensiones finales de options.viewport.
  • Volver a renderizar los elementos que no se pueden escalar proporcionalmente.
  • Guardar el estado final dependiente de la ventana gráfica si el objeto visual almacena metadatos de diseño.

¿Qué técnicas de representación resistentes al cambio de tamaño debo usar?

Use estas técnicas para reducir la cantidad de trabajo de JavaScript que realiza cada evento de cambio de tamaño. Elija el enfoque que coincida con la forma en que el objeto visual representa ejes, etiquetas, leyendas y marcas de datos.

Técnica de cambio de tamaño Use esta técnica cuando Ventaja de cambio de tamaño
SVG viewBox El contenido visual se puede escalar proporcionalmente. Define un viewBox fijo con preserveAspectRatio y deja que el navegador escale automáticamente, para que update() no requiera trabajo específico de cambio de tamaño.
Diseño controlado por CSS Los contenedores, leyendas o marcas simples pueden responder al ajuste de tamaño css. Use anchos y alturas basados en porcentajes o flexbox para que el explorador controle el cambio de tamaño sin intervención de JavaScript.
Recálculos con retardo El objeto visual debe volver a calcular el diseño después de conocer el tamaño final del contenedor. Aplicar debounce al recálculo en VisualUpdateType.ResizeEnd para evitar trabajo redundante provocado por cambios de tamaño rápidos y sucesivos.
Datos procesados almacenados en caché El procesamiento de datos no depende de las dimensiones de la ventanilla. Almacenar los puntos de datos procesados para que VisualUpdateType.Resize y VisualUpdateType.ResizeEnd se rendericen con datos en caché y las nuevas dimensiones del viewport.

¿Qué impacto tiene la optimización del redimensionado en el rendimiento?

Los objetos visuales personalizados de Power BI que se renderizan por completo en cada llamada a VisualUpdateType.Resize pueden hacer que el redimensionamiento resulte lento, crear cambios innecesarios en el DOM y bloquear el hilo principal del navegador en toda la página del informe. Un objeto visual personalizado optimizado para cambiar el tamaño omite el procesamiento de datos durante el cambio de tamaño activo, actualiza solo la presentación dependiente de la ventanilla y realiza el cálculo final del diseño en VisualUpdateType.ResizeEnd.

¿Cómo verifico la optimización del redimensionamiento?

Use esta lista de comprobación para confirmar que el comportamiento de cambio de tamaño usa recursos mínimos al tiempo que conserva la representación completa para las actualizaciones que no cambian de tamaño.

  • Compruebe options.type en su método update().
  • Utilice comprobaciones a nivel de bits para los indicadores VisualUpdateType.
  • Devuelva temprano o realice un trabajo mínimo cuando options.type incluya VisualUpdateType.Resize.
  • Posponga los recálculos que consumen muchos recursos hasta VisualUpdateType.ResizeEnd.
  • Use técnicas con capacidad de respuesta css/SVG siempre que sea posible.
  • Almacenar en caché los datos procesados entre actualizaciones.
  • Compruebe que el procesamiento de datos no se ejecuta durante los eventos de cambio de tamaño activo.

¿Dónde puedo encontrar recursos para cambiar el tamaño de los visuales personalizados de Power BI?

Use estos recursos para los detalles de la API y las instrucciones de rendimiento relacionadas:

  • Se actualizó por última vez el