Componente: PreviewCard🔗

El componente PreviewCard permite embeber tarjetas con metadatos de la serie, y un gráfico incluido dentro de la misma, pudiendo ajustar su ancho al insertarlas en un documento HTML.

Ejemplo base🔗

Ver online: https://jsfiddle.net/vt3mwrzo/

<!-- importa librería JS -->
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.9.0/dist/js/components.js'></script>

<!-- importa hoja de estilos CSS -->
<link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.9.0/dist/css/components.css'/>

<!-- código HTML donde ubicar un div con una tarjeta -->
<div id="emae"></div>

<!-- JS que genera la tarjeta en el div -->
<script>
    window.onload = function() {
        TSComponents.PreviewCard.render('emae', {
            // ID de la serie solicitada
            serieId: '11.1_CMMR_2004_A_10'
        })
    }
</script>

Tabla de parámetros🔗

Nombre Requerido Descripción Tipo Default Ejemplos
serieId Si ID de la serie a buscar. string Ninguno bcra_5
explorerUrl No URL de la instancia del componente Explorer donde mostrar todos los detalles de la serie representada al clickear la tarjeta. string https://datos.gob.ar/series/api/series https://miexplorer.org/series
apiBaseUrl No URL de la API de Series de Tiempo a la cual pedir los datos de la serie a representar. Debe poseer un endpoint '/series/'. string https://apis.datos.gob.ar/series/api https://miapi.org/api
maxDecimals No Cantidad máxima de cifras decimales a mostrar para los valores de las series representadas. int 2 5
numbersAbbreviate No Flag que indica si se deben abreviar los números grandes y formatearlos con el sufijo pertinente; si está apagado, no se realizará abreviatura alguna. Ver la sección de "Abreviatura" para más detalle. boolean true false
decimalsBillion No Cantidad de dígitos decimales a mostrar en aquellos números que son abreviados y divididos por un billón. Puede ser mayor al parámetro maxDecimals. int 2 4
decimalsMillion No Cantidad de dígitos decimales a mostrar en aquellos números que son abreviados y divididos por un millón. Puede ser mayor al parámetro maxDecimals. boolean 2 0
width No Ancho del componente. Puede ser un porcentaje (el porcentaje del ancho del div que lo contendrá), o bien una cantidad de pixeles (con el sufijo 'px'; representa un ancho absoluto, independiente del div contenedor). string '100%' '50%', '560px'

Clickeabilidad🔗

El componente es 100% clickeable, en toda su superficie, y hacerlo abrirá otra pestaña en el navegador donde se esté visualizando la tarjeta. El sitio de la nueva pestaña permitirá visualizar más detalles de la serie involucrada, en distintos hosts según los valores de los parámetros del componente:

  • Si el parámetro explorerUrl está presente, la nueva pestaña irá a la sección de Detalle de la serie involucrada en la instancia del Explorer ubicada en su URL-
  • Si el parámetro explorerUrl no está presente, pero apiBaseUrl si lo está, la nueva pestaña irá a la versión JSON de la respuesta brindada por la API especificada en el parámetro, en su endpoint de /series/, pidiendo los últimos 5000 valores (si los hubiese) y con todos los metadatos posibles de la serie.
  • Si ninguno de los dos parámetros está presente, la nueva pestaña irá a la sección de Detalle involucrada en el Explorador de Series de Tiempo de datos.gob.ar.

Abreviatura🔗

Si se habilita la abreviatura y formateo de números grandes, encendiendo el flag numbersAbbreviate (la única manera de apagarlo es seteándole explícitamente un valor false por medio del parámetro del componente), se procederá a formatearlos de la siguiente manera:

  • Los valores porcentuales (distinguidos así por los metadatos de la serie que representan) no son abreviados.
  • Todo número mayor o igual a un billón (1.000.000.000.000) o menor a un billón negativo (-1.000.000.000.000) será dividido por un billón, y se le agregará como sufijo la letra B.
  • Todo número mayor o igual a diez millones (10.000.000) y menor a un billón, o bien menor o igual a diez millones negativos (-10.000.000) y mayor a un billón negativo (-1.000.000.000.000), será dividido por un millón (1.000.000), y se le agregará como sufijo la letra M.
  • Todo número mayor a un diez millones negativos y menor a diez millones será conservado como tal, sin aplicársele sufijo alguno.
  • En caso de abreviar, la cantidad de decimales que son tenidos en cuenta del cociente obtenido al dividir el valor original de la serie por el divisor apropiado depende de los valores (por defecto o especificados) de las cantidades de los parámetros decimalsBillion y decimalsMillion (según corresponda).

Ejemplo completo🔗

<html>
<body>
  <script type='text/javascript' src='components.js'></script>
  <div id="preview"></div>
  <script>
    window.onload = function () {
      TSComponents.PreviewCard.render('preview', {
        serieId: '143.3_NO_PR_2004_A_21',
        explorerUrl: 'https://datos.gob.ar/series/api/series',
        apiBaseUrl: 'https://apis.datos.gob.ar/series/api',
        maxDecimals: 4,
        numbersAbbreviate: true,
        decimalsMillion: 3,
        decimalsBillion: 4,
        width: '500px'
    })
    }
  </script>
</body>
</html>