series-tiempo-ar-explorer

Componente: card

El componente card permite embeber tarjetas con información de la serie, y un gráfico incluído dentro de la misma, en sitios web.

Ejemplo base

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

<!-- importa íconos de FontAwesome -->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" media="all" />

<!-- 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="tmi"></div>

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

Tabla de parámetros

Nombre	Requerido	Descripción	Tipo	Default	Ejemplos
serieId	Si	ID de la serie a buscar.	string	Ninguno	143.3_NO_PR_2004_A_21
locale	No	Valores posibles: "AR" o "US" (pendientes nuevos valores). Representan qué _locale_ usar para formatear números, es decir, separadores de miles o de decimales.	string	AR	AR o US
links	No	Indica qué enlaces a mostrar bajo la tarjeta para descargar o compartir la misma.	string	full	small
color	No	Indica el color a usar para el número y el borde de la tarjeta. Los códigos de colores pueden ser tanto hexadecimales (ej. "#00CC44") como numeros que son mapeados a la paleta por defecto (del 0 al 8) Ver paleta por defecto más abajo.	string	#0072BB	red
hasChart	No	Indica el tipo de gráfico a usar dentro de la tarjeta.	string	small	full
explicitSign	No	Permite forzar la presencia de un signo antepuesto al valor mostrado; es decir, si dicho valor resultara positivo, será precedido por un signo de adición ('+'). Por defecto, se encuentra desactivado.	booleano	false	true
title	No	Especifica el título de la tarjeta. De no definirse, se considera el título por defecto de la serie; de definirse como '', se lo omite.	string	Ninguno	Un título personalizado
source	No	Especifica el texto al pie de la tarjeta, que refiere a la fuente de la información. De no definirse, se considera la fuente por defecto de la serie; de definirse como '', se la omite.	string	Ninguno	Dirección de Estadística e Información en Salud (DEIS). Secretaría de Gobierno de Salud
units	No	Especifica el texto al pie de la tarjeta, que refiere a las unidades en que se mide el valor mostrado. De no definirse, se consideran las unidades por defecto de la serie; de definirse como '', se las omite.	string	Ninguno	Millones de pesos
hasFrame	No	Permite forzar la presencia de un marco alrededor de la tarjeta y un fondo blanco para la misma. De no estar definido, la tarjeta tendrá marco si tiene al menos gráfico o enlaces.	booleano	Ninguno	true
hasColorBar	No	Permite forzar la presencia de la barra de color (el mismo que posee el número) en el borde superior de la tarjeta. De no estar definido, la barrá estará presente sólo si la tarjeta posee marco.	booleano	Ninguno	false
collapse	No	Permite cambiar la frecuencia en la que se muestra la serie. Mediante este parámetro se puede hacer, por ejemplo, un agregado anual para una serie que tiene una frecuencia diaria. Las limitaciones del campo son que la frecuencia elegida tiene que ser menor o igual a la frecuencia por defecto de la serie, si no lo es entonces el gráfico no se mostrará (Ej: si la serie tiene frecuencia semestral, 'collapse' puede ser solo o 'semester' o 'year').	string	Ninguno	'day', 'month', 'quarter', 'semester', 'year'
apiBaseUrl	No	Permite cambiar la URL de la API a la cual se le pedirá la serie representada en la tarjeta. A dicha url se le adjuntará el texto '/series/?ids=serieId' al final.	string	'http://apis.datos.gob.ar/series/api'	'http://miurl.apis.com/datos'
decimals	No	Permite elegir cuántos dígitos decimales mostrar en el valor de la tarjeta. Debe ser mayor o igual a 0. Redondea los valores en caso de ser menor a la cantidad de dígitos original del valor; completa con 0s en caso contrario.	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. Supeditará al valor del parámetro decimals.	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. Supeditará al valor del parámetro decimals.	int	2	0
isPercentage	No	Flag que indica si el valor de la Card debe ser tratado como uno porcentual o no porcentual. Si no se especifica valor, se respetará lo indicado por la API.	boolean	Ninguno	true

Paleta de colores por defecto

Por defecto, la paleta de colores en los que se grafican las series del componente. Cada uno puede ser identificado con un hexadecimal o un entero decimal:

#0072BB o 0, para azul
#2E7D33 o 1, para verde oscuro
#C62828 o 2, para rojo
#F9A822 o 3, para naranja
#6A1B99 o 4, para violeta
#EC407A o 5, para rosa
#C2185B o 6, para fucsia
#039BE5 o 7, para celeste
#6EA100 o 8, para verde claro

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="card1"></div>
  <script>
    window.onload = function () {
      TSComponents.Card.render('card1', {
        serieId: '143.3_NO_PR_2004_A_21',
        hasChart: 'small',
        links: 'full',
        locale: 'AR',
        color: '#F9A822',
        explicitSign: true,
        title: 'Titulo personalizado',
        source: 'Fuente primaria: Mi Fuente',
        units: '',
        hasFrame: false,
        hasColorBar: true,
        collapse: 'year',
        apiBaseUrl: 'http://apis.datos.gob.ar/series/api'
    })
    }
  </script>
</body>
</html>

series-tiempo-ar-explorer

Componente: card

Ejemplo base

Tabla de parámetros

Paleta de colores por defecto

Abreviatura

Ejemplo completo

Demo online

Variantes de tarjetas

Card: default

Card: menos links

Card: sin links

Card: mínima

Card: mínima (eliminando elementos)