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.
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>
| 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' |
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:
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-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 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:
decimalsBillion y decimalsMillion (según corresponda).<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>