Componente: CardRow🔗

El componente CardRow permite desplegar rápidamente numerosas Cards, disponiéndolas en filas de hasta 4 tarjetas y optimizando recursos al realizar una sola llamada a la API para obtener los datos de sus series.

Nota: todos los valores obtenidos en la llamada a la API serán automáticamente agregados, en caso de ser necesario, según la menor frecuencia entre las series involucradas. Si se quiere conservar la frecuencia de cada una ante una posible diferencia de frecuencias, se recomienda usar varios componentes Card individuales.

Ejemplo base🔗

Ver online: https://jsfiddle.net/76mk3eqd/

Nota: Para visualizarlo bien, expandir el recuadro inferior derecho (donde se dibujará el resultado) a mas de tres cuartos de la pantalla.

<!-- 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 todo el despliegue de tarjetas -->
<div id="tiposCambio"></div>

<!-- JS que genera las filas de tarjetas en el div -->
<script>
    window.onload = function() {
        TSComponents.CardRow.render('tiposCambio', {
            // IDs de series solicitadas
            ids: [
                '116.2_TCRZE_0_T_26',
                '116.2_TCRB_0_T_23',
                '116.2_TCRU_0_T_24',
                '116.4_TCRZE_2015_D_31_73',
                '116.4_TCRZE_2015_D_23_99',
                '116.1_TCRCA_0_A_23',
                '116.1_TCRJ_0_A_22'
            ]
        })
    }
</script>

Parámetros🔗

Parámetros obligatorios🔗

El único parámetro obligatorio es ids, el cual debe ser un array de strings, refiriendo los IDs (puros o compuestos) de las series cuyas Card quieran representarse.

Parámetros opcionales de valor singular🔗

Algunos parámetros opcionales deben ser un valor singular, de cierto tipo, y afectan a todas las tarjetas rendereadas:

Nombre Descripción Tipo Default Ejemplos
apiBaseUrl 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
collapse 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 menor frecuencia entre las series involucradas, si no lo es entonces el componente no se mostrará (Ej: si menor frecuencia semestral, 'collapse' puede ser solo o 'semester' o 'year'). string Ninguno 'day', 'month', 'quarter', 'semester', 'year'
hasColorBar Permite forzar la presencia de la barra de color (el mismo que posee el número) en el borde superior de las tarjetas. De no estar definido, la barrá estará presente sólo si las tarjetas poseen marco. booleano Ninguno false
hasFrame Permite forzar la presencia de un marco alrededor de las tarjetas y un fondo blanco para las mismas. De no estar definido, las tarjetas tendrán marco si tienen al menos gráfico o enlaces. booleano Ninguno true
isPercentage Flag que indica si los valores de las Cards deben ser tratados como porcentuales o no porcentuales. Si no se especifica valor, se respetará lo indicado por la API. boolean Ninguno true
links Indica qué enlaces a mostrar bajo las tarjetas para descargar o compartir las mismas. string full small
locale 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

Parámetros opcionales de valor singular o de array🔗

Algunos parámetros opcionales pueden ser un valor singular, de cierto tipo, como un array de valores de ese tipo (para lo cual deben tener tantos elementos como el parámetro ids). En caso de ser un array, en lugar de configurar todas las tarjetas con un mismo valor, puede determinarse la configuración de dicho parámetro para la tarjeta de cada serie, apareando el índice de ids con el de dicho array de parámetro:

Nombre Descripción Tipo Default Ejemplos
color Indica el color a usar para el número y el borde de una 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. Si se omite, se alternarán los valores de la paleta por defecto para cada tarjeta. string Ninguno, sigue la paleta por defecto '#83DB2C' ó ['#0072BB', '#FF826A', 5]
decimals Permite elegir cuántos dígitos decimales mostrar en el valor de una 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 3 ó [1, 4, 0]
decimalsBillion 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 decimals. int 2 5 ó [3, 3, 2]
decimalsMillion 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 decimals. boolean 2 4 ó [6, 1, 6]
explicitSign 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 ('+'). booleano false true ó [true, false, true]
numbersAbbreviate 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 ó [false, false, true]
source Especifica el texto al pie de una 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 'Mi Fuente' ó ['Fuente 1', '', 'Fuente3']
title Especifica el título de una tarjeta. De no definirse, se considera el título por defecto de la serie; de definirse como '', se lo omite. string Ninguno 'Tarjetas de la fila' ó ['Tarjeta 1', 'Tarjeta 2', '']
units Especifica el texto al pie de una 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 'Hectolitros' ó ['', 'Unidad 2', 'Unidad 3']

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="row"></div>
  <script>
    window.onload = function () {
      TSComponents.CardRow.render('row', {
        ids: [
            'tn_86',
            'tn_02',
            'tn_94'
        ],
        apiBaseUrl: 'https://apis.datos.gob.ar/series/api',
        collapse: 'year',
        hasColorBar: true,
        hasFrame: false,
        isPercentage: true,
        links: 'none',
        locale: 'AR',
        color: [
            '#FF2200',
            '#44BB22',
            '#393900'
        ],
        decimals: 4,
        decimalsBillion: 5,
        decimalsMillion: 7,
        explicitSign: [
            true,
            true,
            false
        ],
        numbersAbbreviate: [
            false,
            true,
            false
        ],
        source: 'Mi propia fuente',
        title: 'Tarjetas de la fila',
        units: [
            'Unidad 1',
            'Unidad 2',
            'Unidad 3'
        ]
    })
    }
  </script>
</body>
</html>