Escribir visualizaciones

Escribir el código de visualización

La biblioteca auxiliar de Data Studio proporciona una interfaz entre tú y Data Studio. Para usar la biblioteca, indica una función de retrollamada que renderice la visualización.

La función más destacada de la biblioteca es subscribeToData, la cual adopta dos argumentos: la función callback, que renderiza la visualización, y el objeto options, que especifica el tipo de transformación que quieres que se aplique a tus datos. Para obtener más información, consulta la referencia de la biblioteca.

A continuación, se incluye un resumen del aspecto que tendría el código JavaScript de tu visualización.

function drawViz(vizData){
  var height = dscc.getHeight();
  var width = dscc.getWidth();
  console.log(vizData);
  // this is where you write your viz code
}

dscc.subscribeToData(drawViz, {transform: dscc.objectTransform})

Hay algunos aspectos importantes que debes tener en cuenta al escribir una visualización comunitaria.

Las actualizaciones de la función subscribeToData se producen cuando cambian los datos, el estilo o el tamaño del iframe.

Por ejemplo:

// create and add the canvas
// do this one time
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);

function drawViz(data){
  // clear the canvas
  var ctx = canvasElement.getContext('2d');
  ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);

  // viz code goes here

}

Data Studio carga y ejecuta archivos JavaScript, no HTML. Las manipulaciones de DOM deben hacerse a través de JavaScript.

Por ejemplo: con el siguiente código se define y añade un parámetro div al DOM.

// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);

Agrupar el código

Las visualizaciones comunitarias de Data Studio solo te permiten cargar un archivo JavaScript. El código cargado debe ser un único archivo que incluya la biblioteca auxiliar dscc, cualquier biblioteca de visualizaciones JavaScript y el código de tu visualización.

Para hacerlo en Bash, puedes utilizar el comando cat, como se indica a continuación:

cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js

Definir el archivo de manifiesto

El archivo de manifiesto de la visualización proporciona metadatos sobre la visualización, así como información sobre la ubicación de sus recursos. La ubicación del archivo de manifiesto se denomina "ID de componente" y se utiliza para cargar la visualización comunitaria.

Consulta la referencia del archivo de manifiesto para ver un archivo de muestra.

El parámetro devMode del archivo de manifiesto determina el comportamiento de almacenamiento en caché de la visualización. Al desarrollar la visualización, el valor de devMode debe ser true; de esta manera, las actualizaciones forzadas cargarán la última versión de los recursos. Una vez que el código se ha estabilizado, el valor de devMode debe ser false; de esta forma, los informes con visualizaciones comunitarias se cargarán rápidamente. Para obtener más información sobre el almacenamiento en caché, consulta la guía avanzada de almacenamiento en caché.

Pasos siguientes

Ahora que has escrito el código de la visualización, descubre cómo alojarla.