diff --git a/docs/reference/ts-components/card.md b/docs/reference/ts-components/card.md index c8b3542c..4ae159e6 100644 --- a/docs/reference/ts-components/card.md +++ b/docs/reference/ts-components/card.md @@ -214,7 +214,7 @@ Ver online: [https://jsfiddle.net/oz9ch2br/](https://jsfiddle.net/oz9ch2br/) ``` ## Demo online -https://jsfiddle.net/oz9ch2br/ +[https://jsfiddle.net/oz9ch2br/](https://jsfiddle.net/oz9ch2br/) ## Variantes de tarjetas diff --git a/docs/reference/ts-components/card/index.html b/docs/reference/ts-components/card/index.html index 8f069f6c..f131c96c 100644 --- a/docs/reference/ts-components/card/index.html +++ b/docs/reference/ts-components/card/index.html @@ -899,7 +899,7 @@

Ejemplo co

Demo online🔗

-

https://jsfiddle.net/oz9ch2br/

+

https://jsfiddle.net/oz9ch2br/

Variantes de tarjetas🔗

Card: default🔗

diff --git a/docs/reference/ts-explorer.md b/docs/reference/ts-explorer.md index 4e89c93b..bd17b0a8 100644 --- a/docs/reference/ts-explorer.md +++ b/docs/reference/ts-explorer.md @@ -1,17 +1,17 @@ # TSExplorer -**Versión**: 2.4.12 +**Versión**: 2.5.0 El objeto `TSExplorer` contiene una _one page application_ con un explorador de series de tiempo, que permite buscar y visualizar series de un catálogo de datos abiertos. -Está en el archivo llamado `main.js` y se aloja versionado en el CDN: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.4.12/dist/js/main.js +Está en el archivo llamado `main.js` y se aloja versionado en el CDN: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.5.0/dist/js/main.js ## ¿Cómo lo uso? * Importar librería JS: ```html - + ``` * Definir dónde se va a dibujar: @@ -33,7 +33,7 @@ TSExplorer.render('explorer-container', { ```html - +
@@ -125,7 +125,23 @@ TSExplorer.render('explorer-container', { "AR" "AR" / "US" + + maxDecimals + No + Cantidad máxima de cifras decimales a mostar para los valores de las series, tanto en sus tarjetas destacadas, como resultados de búsqueda y notas (tooltips) de los gráficos. + int + 2 + 0/4/1 + + + heroImageUrl + No + URL de la imagen a mostrar de fondo en el banner del encabezado. + string + https://wallpaperplay.com/walls/full/c/5/f/375180.jpg + 0/4/1 + ## Demo online -https://jsfiddle.net/4L6tgb79/ +[https://jsfiddle.net/rh21gofc/](https://jsfiddle.net/rh21gofc/) diff --git a/docs/reference/ts-explorer/index.html b/docs/reference/ts-explorer/index.html index 610a78a3..67ceb5cc 100644 --- a/docs/reference/ts-explorer/index.html +++ b/docs/reference/ts-explorer/index.html @@ -595,14 +595,14 @@

TSExplorer🔗

-

Versión: 2.4.12

+

Versión: 2.5.0

El objeto TSExplorer contiene una one page application con un explorador de series de tiempo, que permite buscar y visualizar series de un catálogo de datos abiertos.

-

Está en el archivo llamado main.js y se aloja versionado en el CDN: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.4.12/dist/js/main.js

+

Está en el archivo llamado main.js y se aloja versionado en el CDN: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.5.0/dist/js/main.js

¿Cómo lo uso?🔗

-
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.4.12/dist/js/main.js'></script>
+
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.5.0/dist/js/main.js'></script>
 

 
 
@@ -625,7 +625,7 @@ 
¿Cómo lo uso?<
 
Ejemplo de uso🔗

 
<html>
 <body>
-  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.4.12/dist/js/main.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.5.0/dist/js/main.js"></script>
 
   <div id="explorer-container"></div>
 
@@ -717,10 +717,26 @@ 
Tabl
         "AR"
         "AR" / "US"
     
+    
+        maxDecimals
+        No
+        Cantidad máxima de cifras decimales a mostar para los valores de las series, tanto en sus tarjetas destacadas, como resultados de búsqueda y notas (tooltips) de los gráficos.
+        int
+        2
+        0/4/1
+    
+    
+        heroImageUrl
+        No
+        URL de la imagen a mostrar de fondo en el banner del encabezado.
+        string
+        https://wallpaperplay.com/walls/full/c/5/f/375180.jpg
+        0/4/1
+    
 
 
 
Demo online🔗

-
https://jsfiddle.net/4L6tgb79/

+
https://jsfiddle.net/rh21gofc/

                 
                   
                 
diff --git a/docs/search/search_index.json b/docs/search/search_index.json
index 01737f58..1fb5f066 100644
--- a/docs/search/search_index.json
+++ b/docs/search/search_index.json
@@ -1 +1 @@
-{"config":{"lang":["en"],"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"applications/","text":"","title":"Applications"},{"location":"docs/","text":"Explorador de Series de Tiempo \ud83d\udd17 El Explorador de Series de Tiempo es una familia de componentes front-end para desarrollar experiencias web a partir de los datos de la API de Series de Tiempo de la Rep\u00fablica Argentina , donde los organismos de la Administraci\u00f3n P\u00fablica Nacional publican indicadores en formatos abiertos. Si quer\u00e9s integrar un explorador completo en tu sitio web (como el de Datos Argentina ) le\u00e9 la referencia de TSExplorer . Si quer\u00e9s agregar gr\u00e1ficos en tu sitio web le\u00e9 la referencia de TSComponents . Versiones de browsers \ud83d\udd17 El Explorador de Series de Tiempo fue desarrolado utilizando versiones recientes de Firefox y Chrome (57+ y 60+), y soporta Internet Explorer desde la versi\u00f3n 11 en adelante. Si sos usuario de la API de Series de Tiempo y quer\u00e9s estar al tanto de los cambios y novedades, inscribite en la base de contactos de Datos Argentina y eleg\u00ed sobre qu\u00e9 temas quer\u00e9s que te escribamos. \u00bfTen\u00e9s algo que contarnos? Nos encantar\u00eda que nos cuentes por Twitter o por mail qu\u00e9 mejor\u00f3 usar la API en tu trabajo y qu\u00e9 le falta para mejorar a\u00fan m\u00e1s.","title":"Inicio"},{"location":"docs/#explorador-de-series-de-tiempo","text":"El Explorador de Series de Tiempo es una familia de componentes front-end para desarrollar experiencias web a partir de los datos de la API de Series de Tiempo de la Rep\u00fablica Argentina , donde los organismos de la Administraci\u00f3n P\u00fablica Nacional publican indicadores en formatos abiertos. Si quer\u00e9s integrar un explorador completo en tu sitio web (como el de Datos Argentina ) le\u00e9 la referencia de TSExplorer . Si quer\u00e9s agregar gr\u00e1ficos en tu sitio web le\u00e9 la referencia de TSComponents .","title":"Explorador de Series de Tiempo"},{"location":"docs/#versiones-de-browsers","text":"El Explorador de Series de Tiempo fue desarrolado utilizando versiones recientes de Firefox y Chrome (57+ y 60+), y soporta Internet Explorer desde la versi\u00f3n 11 en adelante. Si sos usuario de la API de Series de Tiempo y quer\u00e9s estar al tanto de los cambios y novedades, inscribite en la base de contactos de Datos Argentina y eleg\u00ed sobre qu\u00e9 temas quer\u00e9s que te escribamos. \u00bfTen\u00e9s algo que contarnos? Nos encantar\u00eda que nos cuentes por Twitter o por mail qu\u00e9 mejor\u00f3 usar la API en tu trabajo y qu\u00e9 le falta para mejorar a\u00fan m\u00e1s.","title":"Versiones de browsers"},{"location":"terms/","text":"","title":"Terms"},{"location":"developers/deploy/","text":"Documentaci\u00f3n de deploy \ud83d\udd17 Tenemos 2 formas de deploy: Generaci\u00f3n de github pages y generaci\u00f3n de release para subir al CDN . Github pages \ud83d\udd17 El deploy se puede realizar de dos maneras. Ambas son iguales npm run build-docs make build Y finalmente subir todo al branch default: - git add . - git commit -m \"Deploy a github pages\" - git push Release para CDN \ud83d\udd17 Crear un branch desde la versi\u00f3n que queremos salir: - git checkout -b  Generar los archivos para distribuir. Tenemos dos maneras, ambas son iguales: - npm run release - make release Agregar los archivos: - git add dist (basta con agregar s\u00f3lo la carpeta a distribuir) - git commit -m \"Actualizo carpeta dist\" - git push origin  Crear un tag: - git tag  - git push --tags Con el nombre del tag ya podemos acceder a los archivos que necesitemos: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@nombreDelTag/dist/js/main.js Actualizar series-tiempo-ar-explorer-demo para usar la versi\u00f3n deseada (en el ejemplo la versi\u00f3n es test_0.4 pero podemos usar cualquiera ya sea para el archivo css o para el js): - Modificar el index.html del directorio root del proyecto demo para cambiar la versi\u00f3n usada de JS y de CSS: - CSS: cambiar la l\u00ednea: ` < link rel = \"stylesheet\" href = \"https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@test_0.4/dist/css/main.css\" type = \"text/css\" > ` . JS: cambiar la l\u00ednea:  Las modificaciones de dichas l\u00edneas s\u00f3lo deber\u00edan ser para cambiar la versi\u00f3n, la ruta no deber\u00eda cambiar a menos que se busque usar un archivo distinto.","title":"Despliegue"},{"location":"developers/deploy/#documentacion-de-deploy","text":"Tenemos 2 formas de deploy: Generaci\u00f3n de github pages y generaci\u00f3n de release para subir al CDN .","title":"Documentaci\u00f3n de deploy"},{"location":"developers/deploy/#github-pages","text":"El deploy se puede realizar de dos maneras. Ambas son iguales npm run build-docs make build Y finalmente subir todo al branch default: - git add . - git commit -m \"Deploy a github pages\" - git push","title":"Github pages"},{"location":"developers/deploy/#release-para-cdn","text":"Crear un branch desde la versi\u00f3n que queremos salir: - git checkout -b  Generar los archivos para distribuir. Tenemos dos maneras, ambas son iguales: - npm run release - make release Agregar los archivos: - git add dist (basta con agregar s\u00f3lo la carpeta a distribuir) - git commit -m \"Actualizo carpeta dist\" - git push origin  Crear un tag: - git tag  - git push --tags Con el nombre del tag ya podemos acceder a los archivos que necesitemos: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@nombreDelTag/dist/js/main.js Actualizar series-tiempo-ar-explorer-demo para usar la versi\u00f3n deseada (en el ejemplo la versi\u00f3n es test_0.4 pero podemos usar cualquiera ya sea para el archivo css o para el js): - Modificar el index.html del directorio root del proyecto demo para cambiar la versi\u00f3n usada de JS y de CSS: - CSS: cambiar la l\u00ednea: ` < link rel = \"stylesheet\" href = \"https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@test_0.4/dist/css/main.css\" type = \"text/css\" > ` . JS: cambiar la l\u00ednea:  Las modificaciones de dichas l\u00edneas s\u00f3lo deber\u00edan ser para cambiar la versi\u00f3n, la ruta no deber\u00eda cambiar a menos que se busque usar un archivo distinto.","title":"Release para CDN"},{"location":"developers/install/","text":"Setup \ud83d\udd17 Requerimientos \ud83d\udd17 Este proyecto requiere Node v8.9.4 o superior (npm v6.0.0). Puede ser instalado con nvm Instalar node y npm. nvm install 8.9.4 O v\u00eda package manager: curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - sudo apt-get install -y nodejs Desarrollo \ud83d\udd17 Instalar hooks git hooks install Instalar dependencias: npm install Iniciar web server make watch para levantar el servidor en localhost:3000 Desarrollo de componentes exportables \ud83d\udd17 Se puede iniciar un servidor web para servir un dashboard que utiliza los componentes exportables usando make components-watch Para mas info: react documentation Problemas comunes \ud83d\udd17 npm start : Error al iniciar el server. Soluci\u00f3n: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p Para correr los tests de un archivo en particular: npm test -- --  why the \"--\" magick incantation Debugging en VS code \ud83d\udd17 Usar esta launch configuration { \"name\": \"Debug Jest Tests\", \"type\": \"node\", \"request\": \"launch\", \"runtimeArgs\": [\"--inspect-brk\", \" ${ workspaceRoot } /scripts/test.js\", \"--runInBand\", \"--env=jsdom\"], \"port\": 9229, \"console\": \"integratedTerminal\", \"internalConsoleOptions\": \"neverOpen\" }","title":"Instalaci\u00f3n"},{"location":"developers/install/#setup","text":"","title":"Setup"},{"location":"developers/install/#requerimientos","text":"Este proyecto requiere Node v8.9.4 o superior (npm v6.0.0). Puede ser instalado con nvm Instalar node y npm. nvm install 8.9.4 O v\u00eda package manager: curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - sudo apt-get install -y nodejs","title":"Requerimientos"},{"location":"developers/install/#desarrollo","text":"Instalar hooks git hooks install Instalar dependencias: npm install Iniciar web server make watch para levantar el servidor en localhost:3000","title":"Desarrollo"},{"location":"developers/install/#desarrollo-de-componentes-exportables","text":"Se puede iniciar un servidor web para servir un dashboard que utiliza los componentes exportables usando make components-watch Para mas info: react documentation","title":"Desarrollo de componentes exportables"},{"location":"developers/install/#problemas-comunes","text":"npm start : Error al iniciar el server. Soluci\u00f3n: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p Para correr los tests de un archivo en particular: npm test -- --  why the \"--\" magick incantation","title":"Problemas comunes"},{"location":"developers/install/#debugging-en-vs-code","text":"Usar esta launch configuration { \"name\": \"Debug Jest Tests\", \"type\": \"node\", \"request\": \"launch\", \"runtimeArgs\": [\"--inspect-brk\", \" ${ workspaceRoot } /scripts/test.js\", \"--runInBand\", \"--env=jsdom\"], \"port\": 9229, \"console\": \"integratedTerminal\", \"internalConsoleOptions\": \"neverOpen\" }","title":"Debugging en VS code"},{"location":"reference/ts-components/","text":"TSComponents \ud83d\udd17 Versi\u00f3n : 2.6.2 El objeto TSComponents contiene distintos componentes exportables que se pueden utilizar dentro de una experiencia web. Est\u00e1 en el archivo llamado components.js y se aloja versionado en el CDN: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js Componentes \ud83d\udd17 graphic : gr\u00e1fico de l\u00edneas, barras o \u00e1rea usado en el explorador de series de tiempo con todas sus funcionalidades. card : tarjeta con informaci\u00f3n de la serie y un gr\u00e1fico inclu\u00eddo con sus datos. \u00bfC\u00f3mo los uso? \ud83d\udd17 Todos los componentes se usan de la misma manera. Importar librer\u00eda JS: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js' > Importar hoja de estilos CSS: < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/css/components.css' /> Definir d\u00f3nde se va a dibujar: < div id = \"graphic_01\" > < div id = \"card_01\" > Instanciar el componente que buscamos: TSComponents . Graphic . render ( 'graphic_01' , { ... }) TSComponents . Card . render ( 'card_01' , { ... })","title":"TSComponents"},{"location":"reference/ts-components/#tscomponents","text":"Versi\u00f3n : 2.6.2 El objeto TSComponents contiene distintos componentes exportables que se pueden utilizar dentro de una experiencia web. Est\u00e1 en el archivo llamado components.js y se aloja versionado en el CDN: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js","title":"TSComponents"},{"location":"reference/ts-components/#componentes","text":"graphic : gr\u00e1fico de l\u00edneas, barras o \u00e1rea usado en el explorador de series de tiempo con todas sus funcionalidades. card : tarjeta con informaci\u00f3n de la serie y un gr\u00e1fico inclu\u00eddo con sus datos.","title":"Componentes"},{"location":"reference/ts-components/#como-los-uso","text":"Todos los componentes se usan de la misma manera. Importar librer\u00eda JS: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js' > Importar hoja de estilos CSS: < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/css/components.css' /> Definir d\u00f3nde se va a dibujar: < div id = \"graphic_01\" > < div id = \"card_01\" > Instanciar el componente que buscamos: TSComponents . Graphic . render ( 'graphic_01' , { ... }) TSComponents . Card . render ( 'card_01' , { ... })","title":"\u00bfC\u00f3mo los uso?"},{"location":"reference/ts-explorer/","text":"TSExplorer \ud83d\udd17 Versi\u00f3n : 2.4.12 El objeto TSExplorer contiene una one page application con un explorador de series de tiempo, que permite buscar y visualizar series de un cat\u00e1logo de datos abiertos. Est\u00e1 en el archivo llamado main.js y se aloja versionado en el CDN: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.4.12/dist/js/main.js \u00bfC\u00f3mo lo uso? \ud83d\udd17 Importar librer\u00eda JS: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.4.12/dist/js/main.js' > Definir d\u00f3nde se va a dibujar: < div id = \"explorer-container\" > Instanciar el explorador: TSExplorer . render ( 'explorer-container' , { ... }) Ejemplo de uso \ud83d\udd17 < html > < body > < script type = \"text/javascript\" src = \"https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.4.12/dist/js/main.js\" > < div id = \"explorer-container\" > < script > window . onload = function () { TSExplorer . render ( 'explorer-container' , { featured : [ \"103.1_I2N_2016_M_15\" , \"168.1_T_CAMBIOR_D_0_0_26\" , ], seriesApiUri : \"https://apis.datos.gob.ar/series/api\" , catalogId : 'datosgobar' , formatChartUnits : true , laps : { Diaria : 90 , Mensual : 24 , Trimestral : 20 , Semestral : 10 , Anual : 10 , }, locale : 'AR' }) }    Tabla de par\u00e1metros \ud83d\udd17 Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos seriesApiUri Si URI a la API donde buscamos los datos. string Ninguno https://apis.datos.gob.ar/series/api featured No Indica los IDs de las series destacadas string[] [] [\"103.1_I2N_2016_M_15\", \"168.1_T_CAMBIOR_D_0_0_26\"] catalogId No Representa el id del cat\u00e1logo de donde busca las series string Ninguno datosgobar formatChartUnits No Indica si debe formatear a porcentaje los valores entre -1 y 1. boolean true true / false laps No Informaci\u00f3n para traer los \u00faltimos _n_ valores de la serie, con _n_ igual al valor por frecuencia. {Diaria: number, Mensual: number, Trimestral: number, Semestral: number, Anual: number} object true true / false locale No Valores posibles: `\"AR\"` o `\"US\"` (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string \"AR\" \"AR\" / \"US\" Demo online \ud83d\udd17 https://jsfiddle.net/4L6tgb79/","title":"TSExplorer"},{"location":"reference/ts-explorer/#tsexplorer","text":"Versi\u00f3n : 2.4.12 El objeto TSExplorer contiene una one page application con un explorador de series de tiempo, que permite buscar y visualizar series de un cat\u00e1logo de datos abiertos. Est\u00e1 en el archivo llamado main.js y se aloja versionado en el CDN: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.4.12/dist/js/main.js","title":"TSExplorer"},{"location":"reference/ts-explorer/#como-lo-uso","text":"Importar librer\u00eda JS: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.4.12/dist/js/main.js' > Definir d\u00f3nde se va a dibujar: < div id = \"explorer-container\" > Instanciar el explorador: TSExplorer . render ( 'explorer-container' , { ... })","title":"\u00bfC\u00f3mo lo uso?"},{"location":"reference/ts-explorer/#ejemplo-de-uso","text":"< html > < body > < script type = \"text/javascript\" src = \"https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.4.12/dist/js/main.js\" > < div id = \"explorer-container\" > < script > window . onload = function () { TSExplorer . render ( 'explorer-container' , { featured : [ \"103.1_I2N_2016_M_15\" , \"168.1_T_CAMBIOR_D_0_0_26\" , ], seriesApiUri : \"https://apis.datos.gob.ar/series/api\" , catalogId : 'datosgobar' , formatChartUnits : true , laps : { Diaria : 90 , Mensual : 24 , Trimestral : 20 , Semestral : 10 , Anual : 10 , }, locale : 'AR' }) }   ","title":"Ejemplo de uso"},{"location":"reference/ts-explorer/#tabla-de-parametros","text":"Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos seriesApiUri Si URI a la API donde buscamos los datos. string Ninguno https://apis.datos.gob.ar/series/api featured No Indica los IDs de las series destacadas string[] [] [\"103.1_I2N_2016_M_15\", \"168.1_T_CAMBIOR_D_0_0_26\"] catalogId No Representa el id del cat\u00e1logo de donde busca las series string Ninguno datosgobar formatChartUnits No Indica si debe formatear a porcentaje los valores entre -1 y 1. boolean true true / false laps No Informaci\u00f3n para traer los \u00faltimos _n_ valores de la serie, con _n_ igual al valor por frecuencia. {Diaria: number, Mensual: number, Trimestral: number, Semestral: number, Anual: number} object true true / false locale No Valores posibles: `\"AR\"` o `\"US\"` (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string \"AR\" \"AR\" / \"US\"","title":"Tabla de par\u00e1metros"},{"location":"reference/ts-explorer/#demo-online","text":"https://jsfiddle.net/4L6tgb79/","title":"Demo online"},{"location":"reference/ts-components/card/","text":"Componente: card \ud83d\udd17 El componente card permite embeber tarjetas con informaci\u00f3n de la serie, y un gr\u00e1fico inclu\u00eddo dentro de la misma, en sitios web. .row { width: 90%; margin: auto; display: flex; justify-content: space-around; } Ejemplo base \ud83d\udd17 Ver online: https://jsfiddle.net/oz9ch2br/  < link type = \"text/css\" rel = \"stylesheet\" href = \"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css\" media = \"all\" />  < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js' >  < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/css/components.css' />  < div id = \"tmi\" >  < script > window . onload = function () { TSComponents . Card . render ( 'tmi' , { // ID de la serie solicitada serieId : '143.3_NO_PR_2004_A_21' }) }  Tabla de par\u00e1metros \ud83d\udd17 Nombre Requerido Descripci\u00f3n 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\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string AR AR o US links No Indica qu\u00e9 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\u00famero y el borde de la tarjeta. string #0072BB red hasChart No Indica el tipo de gr\u00e1fico 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\u00e1 precedido por un signo de adici\u00f3n ('+'). Por defecto, se encuentra desactivado. booleano false true title No Especifica el t\u00edtulo de la tarjeta. De no definirse, se considera el t\u00edtulo por defecto de la serie; de definirse como '', se lo omite. string Ninguno Un t\u00edtulo personalizado source No Especifica el texto al pie de la tarjeta, que refiere a la fuente de la informaci\u00f3n. De no definirse, se considera la fuente por defecto de la serie; de definirse como '', se la omite. string Ninguno Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda 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\u00e1 marco si tiene al menos gr\u00e1fico o enlaces. booleano Ninguno true hasColorBar No Permite forzar la presencia de la barra de color (el mismo que posee el n\u00famero) en el borde superior de la tarjeta. De no estar definido, la barr\u00e1 estar\u00e1 presente s\u00f3lo si la tarjeta posee marco. booleano Ninguno false collapse No Permite cambiar la frecuencia en la que se muestra la serie. Mediante este par\u00e1metro 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\u00e1fico no se mostrar\u00e1 (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\u00e1 la serie representada en la tarjeta. A dicha url se le adjuntar\u00e1 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\u00e1ntos d\u00edgitos 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\u00edgitos original del valor; completa con 0s en caso contrario. int 2 5 Ejemplo completo \ud83d\udd17 < html > < body > < script type = 'text/javascript' src = 'components.js' > < div id = \"card1\" > < 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' }) }    Demo online \ud83d\udd17 https://jsfiddle.net/oz9ch2br/ Variantes de tarjetas \ud83d\udd17 Card: default \ud83d\udd17 Card: menos links \ud83d\udd17 Card: sin links \ud83d\udd17 Card: m\u00ednima \ud83d\udd17 Card: m\u00ednima (eliminando elementos) \ud83d\udd17 window.onload = function() { TSComponents.Card.render('ipc', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', title: \"Indice de Precios al Consumidor Nacional\", links: \"none\" }) TSComponents.Card.render('exportaciones', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', title: \"Exportaciones\", links: \"none\" }) TSComponents.Card.render('ipc-card', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', title: \"Exportaciones\" }) TSComponents.Card.render('ipc-card-links2', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', links: \"small\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-links2', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', links: \"small\", title: \"Exportaciones\" }) TSComponents.Card.render('ipc-card-med', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', links: \"none\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-med', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', links: \"none\", title: \"Exportaciones\", hasFrame: false }) TSComponents.Card.render('ipc-card-min', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', links: 'none', hasChart: \"none\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-min', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, links: 'none', hasChart: \"none\", title: \"Exportaciones\", hasColorBar: true }) TSComponents.Card.render('ipc-card-min-xtreme', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', links: 'none', hasChart: \"none\", title: \"\", units: \"\", source: \"\" }) TSComponents.Card.render('exportaciones-card-min-xtreme', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, links: 'none', hasChart: \"none\", title: \"\", units: \"\", source: \"\" }) }","title":"TSComponents: card"},{"location":"reference/ts-components/card/#componente-card","text":"El componente card permite embeber tarjetas con informaci\u00f3n de la serie, y un gr\u00e1fico inclu\u00eddo dentro de la misma, en sitios web. .row { width: 90%; margin: auto; display: flex; justify-content: space-around; }","title":"Componente: card"},{"location":"reference/ts-components/card/#ejemplo-base","text":"Ver online: https://jsfiddle.net/oz9ch2br/  < link type = \"text/css\" rel = \"stylesheet\" href = \"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css\" media = \"all\" />  < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js' >  < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/css/components.css' />  < div id = \"tmi\" >  < script > window . onload = function () { TSComponents . Card . render ( 'tmi' , { // ID de la serie solicitada serieId : '143.3_NO_PR_2004_A_21' }) } ","title":"Ejemplo base"},{"location":"reference/ts-components/card/#tabla-de-parametros","text":"Nombre Requerido Descripci\u00f3n 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\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string AR AR o US links No Indica qu\u00e9 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\u00famero y el borde de la tarjeta. string #0072BB red hasChart No Indica el tipo de gr\u00e1fico 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\u00e1 precedido por un signo de adici\u00f3n ('+'). Por defecto, se encuentra desactivado. booleano false true title No Especifica el t\u00edtulo de la tarjeta. De no definirse, se considera el t\u00edtulo por defecto de la serie; de definirse como '', se lo omite. string Ninguno Un t\u00edtulo personalizado source No Especifica el texto al pie de la tarjeta, que refiere a la fuente de la informaci\u00f3n. De no definirse, se considera la fuente por defecto de la serie; de definirse como '', se la omite. string Ninguno Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda 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\u00e1 marco si tiene al menos gr\u00e1fico o enlaces. booleano Ninguno true hasColorBar No Permite forzar la presencia de la barra de color (el mismo que posee el n\u00famero) en el borde superior de la tarjeta. De no estar definido, la barr\u00e1 estar\u00e1 presente s\u00f3lo si la tarjeta posee marco. booleano Ninguno false collapse No Permite cambiar la frecuencia en la que se muestra la serie. Mediante este par\u00e1metro 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\u00e1fico no se mostrar\u00e1 (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\u00e1 la serie representada en la tarjeta. A dicha url se le adjuntar\u00e1 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\u00e1ntos d\u00edgitos 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\u00edgitos original del valor; completa con 0s en caso contrario. int 2 5","title":"Tabla de par\u00e1metros"},{"location":"reference/ts-components/card/#ejemplo-completo","text":"< html > < body > < script type = 'text/javascript' src = 'components.js' > < div id = \"card1\" > < 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' }) }   ","title":"Ejemplo completo"},{"location":"reference/ts-components/card/#demo-online","text":"https://jsfiddle.net/oz9ch2br/","title":"Demo online"},{"location":"reference/ts-components/card/#variantes-de-tarjetas","text":"","title":"Variantes de tarjetas"},{"location":"reference/ts-components/card/#card-default","text":"","title":"Card: default"},{"location":"reference/ts-components/card/#card-menos-links","text":"","title":"Card: menos links"},{"location":"reference/ts-components/card/#card-sin-links","text":"","title":"Card: sin links"},{"location":"reference/ts-components/card/#card-minima","text":"","title":"Card: m\u00ednima"},{"location":"reference/ts-components/card/#card-minima-eliminando-elementos","text":"window.onload = function() { TSComponents.Card.render('ipc', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', title: \"Indice de Precios al Consumidor Nacional\", links: \"none\" }) TSComponents.Card.render('exportaciones', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', title: \"Exportaciones\", links: \"none\" }) TSComponents.Card.render('ipc-card', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', title: \"Exportaciones\" }) TSComponents.Card.render('ipc-card-links2', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', links: \"small\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-links2', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', links: \"small\", title: \"Exportaciones\" }) TSComponents.Card.render('ipc-card-med', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', links: \"none\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-med', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', links: \"none\", title: \"Exportaciones\", hasFrame: false }) TSComponents.Card.render('ipc-card-min', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', links: 'none', hasChart: \"none\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-min', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, links: 'none', hasChart: \"none\", title: \"Exportaciones\", hasColorBar: true }) TSComponents.Card.render('ipc-card-min-xtreme', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', links: 'none', hasChart: \"none\", title: \"\", units: \"\", source: \"\" }) TSComponents.Card.render('exportaciones-card-min-xtreme', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, links: 'none', hasChart: \"none\", title: \"\", units: \"\", source: \"\" }) }","title":"Card: m\u00ednima (eliminando elementos)"},{"location":"reference/ts-components/examples/","text":".row { width: 90%; margin: auto; display: flex; justify-content: space-around; } .btn-primary { color: #ffffff; background-color: #0072bb; } Ejemplos: \ud83d\udd17 El prop\u00f3sito de este documento es mostrar ejemplos recomendados de implementar los componentes exportables (Card, Graphic). Para conocer la forma de implementar correctamente cada componente, referirse a la documentaci\u00f3n propia del mismo. Ejemplos Card: \ud83d\udd17 Indicadores destacado (m\u00ednimo): \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-min\" >   < script > window . onload = function () { TSComponents . Card . render ( 'indicador-min' , { serieId : 'tcrse_QpvjK1:percent_change_a_year_ago' , color : '#0072BB' , hasChart : 'none' , title : \"TCRSE. Otros Cultivos.\" , links : \"none\" , hasFrame : false , explicitSign : true , source : \"Fuente: Secretar\u00eda de la Transformaci\u00f3n Productiva\" }) }  Indicadores destacado (con mini-gr\u00e1fico): \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-graph\" >   < script > window . onload = function () { TSComponents . Card . render ( 'indicador-graph' , { serieId : 'tmi_arg' , color : '#2E7D33' , hasChart : 'small' , links : \"none\" , hasFrame : false }) }  Indicadores destacado (con tarjeta clickeable): \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-click\" >   < script > window . onload = function () { TSComponents . Card . render ( 'indicador-click' , { serieId : 'defensa_FAA_0006' , color : '#C62828' , hasChart : 'small' , title : \"Personal Femenino en la Fuerza A\u00e9rea\" , links : \"none\" , }) }  Indicadores destacado (con enlaces de descarga): \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-link\" >   < script > window . onload = function () { TSComponents . Card . render ( 'indicador-min' , { serieId : '77.3_IEB_0_A_24' , color : '#F9A822' , hasChart : 'small' , title : \"Exportaciones FOB a Brasil\" , units : \"Millones de USD\" , }) }  Ejemplos Graph: \ud83d\udd17 Graph destacado simple: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row\" > < div class = \"col-sm-12\" id = \"graph-simple\" >   < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-simple' , { \u2003\u2003\u2003\u2003 graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=143.3_NO_PR_2004_A_21:percent_change_a_year_ago,116.4_TCRZE_2015_D_36_4' , \u2003\u2003\u2003\u2003 zoom : false , \u2003\u2003\u2003\u2003 chartTypes : { '143.3_NO_PR_2004_A_21:percent_change_a_year_ago' : 'column' }, \u2003\u2003\u2003\u2003 title : 'Nivel de Actividad y Tipo de Cambio Real Multilateral' , \u2003\u2003\u2003\u2003 source : 'Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC), Banco Central de la Rep\u00fablica Argentina (BCRA)' , \u2003\u2003\u2003\u2003 navigator : false }) }  Graph destacado con zoom: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"graph-zoom\" >   < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-zoom' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=33.2_ISAC_SIN_EDAD_0_M_23_56:percent_change_a_year_ago&last=12' , title : 'Indicador sint\u00e9tico de la actividad de la construcci\u00f3n (ISAC)' , source : 'Var % interanual. Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC)' , chartTypes : { \"33.2_ISAC_SIN_EDAD_0_M_23_56\" : \"column\" }, zoom : false , navigator : true , }) }  Graph destacado con navegador y zoom: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"graph-nav-zoom\" >   < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-nav-zoom' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=151.1_TL_SIN_TAC_2012_M_15,151.1_TL_ESTADAD_2012_M_20&last=12' , title : 'Cantidad de trabajadores registrados' , source : 'Cantidades. Fuente: Ministerio de Trabajo, Empleo y Seguridad Social' , legendField : 'description' , zoom : true , navigator : true }) }  Ejemplos Card + Graph: \ud83d\udd17 Indicador con Graph inferior asociado: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row\" > < div class = \"text-center\" id = \"graph-indicador1\" >  < div class = \"row\" > < div id = \"indicator-graph1\" >   < script > window . onload = function () { TSComponents . Card . render ( 'graph-indicador1' , { serieId : 'defensa_FAA_0006' , color : '#C62828' , hasChart : 'none' , title : \"\" , links : \"none\" , hasFrame : false , source : \"\" }) TSComponents . Graphic . render ( 'indicator-graph1' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=defensa_FAA_0006' , title : \"Personal Femenino en la Fuerza A\u00e9rea\" , source : \"Fuente: Ministerio de Defensa\" , colors : [ '#C62828' ] }) }  Indicador con Graph lateral asociado: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container row panels-row\" > < div id = 'graph-indicator2' >  < div style = \"width: 500px; height: 350px;\" id = 'indicator-graph2' >  < script > window . onload = function () { TSComponents . Card . render ( 'graph-indicator2' , { serieId : '148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago' , hasChart : \"small\" , title : \"Indicador IPC interanual\" }) TSComponents . Graphic . render ( 'indicator-graph2' , { graphicUrl : \"https://apis.datos.gob.ar/series/api/series?ids=148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\" , datePickerEnabled : false , zoom : false , title : \"Gr\u00e1fico IPC interanual\" , navigator : false , legendLabel : { \"148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\" : \"IPC (% interanual)\" } }) }  window.onload = function() { TSComponents.Card.render('indicador-min', { serieId: 'tcrse_QpvjK1:percent_change_a_year_ago', color: '#0072BB', hasChart: 'none', title: \"TCRSE. Otros Cultivos.\", links: \"none\", hasFrame: false, explicitSign: true, source: \"Fuente: Secretar\u00eda de la Transformaci\u00f3n Productiva\" }) TSComponents.Card.render('indicador-graph', { serieId: 'tmi_arg', color: '#2E7D33', hasChart: 'small', links: \"none\", hasFrame: false }) TSComponents.Card.render('indicador-click', { serieId: 'defensa_FAA_0006', color: '#C62828', hasChart: 'small', title: \"Personal Femenino en la Fuerza A\u00e9rea\", links: \"none\", }) TSComponents.Card.render('indicador-link', { serieId: '77.3_IEB_0_A_24', color: '#F9A822', hasChart: 'small', title: \"Exportaciones FOB a Brasil\", units: \"Millones de USD\", }) TSComponents.Graphic.render('graph-simple', { \u2003\u2003\u2003\u2003graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=143.3_NO_PR_2004_A_21:percent_change_a_year_ago,116.4_TCRZE_2015_D_36_4', \u2003\u2003\u2003\u2003zoom: false, \u2003\u2003\u2003\u2003chartTypes: {'143.3_NO_PR_2004_A_21:percent_change_a_year_ago': 'column'}, \u2003\u2003\u2003\u2003title: 'Nivel de Actividad y Tipo de Cambio Real Multilateral', \u2003\u2003\u2003\u2003source: 'Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC), Banco Central de la Rep\u00fablica Argentina (BCRA)', \u2003\u2003\u2003\u2003navigator: false }) TSComponents.Graphic.render('graph-zoom', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=33.2_ISAC_SIN_EDAD_0_M_23_56:percent_change_a_year_ago&last=12', title: 'Indicador sint\u00e9tico de la actividad de la construcci\u00f3n (ISAC)', source: 'Var % interanual. Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC)', chartTypes: { \"33.2_ISAC_SIN_EDAD_0_M_23_56\": \"column\" }, zoom: false, navigator: true, }) TSComponents.Graphic.render('graph-nav-zoom', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=151.1_TL_SIN_TAC_2012_M_15,151.1_TL_ESTADAD_2012_M_20&last=12', title: 'Cantidad de trabajadores registrados', source: 'Cantidades. Fuente: Ministerio de Trabajo, Empleo y Seguridad Social', legendField: 'description', zoom: true, navigator: true }) TSComponents.Card.render('graph-indicador1', { serieId: 'defensa_FAA_0006', color: '#C62828', hasChart: 'none', title: \"\", links: \"none\", hasFrame: false, source: \"\" }) TSComponents.Graphic.render('indicator-graph1', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=defensa_FAA_0006', title: \"Personal Femenino en la Fuerza A\u00e9rea\", source: \"Fuente: Ministerio de Defensa\", colors: ['#C62828'] }) TSComponents.Card.render('graph-indicator2', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago', hasChart: \"small\", title: \"Indicador IPC interanual\" }) TSComponents.Graphic.render('indicator-graph2', { graphicUrl: \"https://apis.datos.gob.ar/series/api/series?ids=148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\", datePickerEnabled: false, zoom: false, title: \"Gr\u00e1fico IPC interanual\", navigator: false, legendLabel: { \"148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\": \"IPC (% interanual)\" } }) }","title":"TSComponents: Ejemplos"},{"location":"reference/ts-components/examples/#ejemplos","text":"El prop\u00f3sito de este documento es mostrar ejemplos recomendados de implementar los componentes exportables (Card, Graphic). Para conocer la forma de implementar correctamente cada componente, referirse a la documentaci\u00f3n propia del mismo.","title":"Ejemplos:"},{"location":"reference/ts-components/examples/#ejemplos-card","text":"","title":"Ejemplos Card:"},{"location":"reference/ts-components/examples/#indicadores-destacado-minimo","text":"","title":"Indicadores destacado (m\u00ednimo):"},{"location":"reference/ts-components/examples/#ejemplo","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-min\" >   < script > window . onload = function () { TSComponents . Card . render ( 'indicador-min' , { serieId : 'tcrse_QpvjK1:percent_change_a_year_ago' , color : '#0072BB' , hasChart : 'none' , title : \"TCRSE. Otros Cultivos.\" , links : \"none\" , hasFrame : false , explicitSign : true , source : \"Fuente: Secretar\u00eda de la Transformaci\u00f3n Productiva\" }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#indicadores-destacado-con-mini-grafico","text":"","title":"Indicadores destacado (con mini-gr\u00e1fico):"},{"location":"reference/ts-components/examples/#ejemplo_1","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_1","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-graph\" >   < script > window . onload = function () { TSComponents . Card . render ( 'indicador-graph' , { serieId : 'tmi_arg' , color : '#2E7D33' , hasChart : 'small' , links : \"none\" , hasFrame : false }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#indicadores-destacado-con-tarjeta-clickeable","text":"","title":"Indicadores destacado (con tarjeta clickeable):"},{"location":"reference/ts-components/examples/#ejemplo_2","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_2","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-click\" >   < script > window . onload = function () { TSComponents . Card . render ( 'indicador-click' , { serieId : 'defensa_FAA_0006' , color : '#C62828' , hasChart : 'small' , title : \"Personal Femenino en la Fuerza A\u00e9rea\" , links : \"none\" , }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#indicadores-destacado-con-enlaces-de-descarga","text":"","title":"Indicadores destacado (con enlaces de descarga):"},{"location":"reference/ts-components/examples/#ejemplo_3","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_3","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-link\" >   < script > window . onload = function () { TSComponents . Card . render ( 'indicador-min' , { serieId : '77.3_IEB_0_A_24' , color : '#F9A822' , hasChart : 'small' , title : \"Exportaciones FOB a Brasil\" , units : \"Millones de USD\" , }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#ejemplos-graph","text":"","title":"Ejemplos Graph:"},{"location":"reference/ts-components/examples/#graph-destacado-simple","text":"","title":"Graph destacado simple:"},{"location":"reference/ts-components/examples/#ejemplo_4","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_4","text":"< div class = \"container\" > < div class = \"row\" > < div class = \"col-sm-12\" id = \"graph-simple\" >   < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-simple' , { \u2003\u2003\u2003\u2003 graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=143.3_NO_PR_2004_A_21:percent_change_a_year_ago,116.4_TCRZE_2015_D_36_4' , \u2003\u2003\u2003\u2003 zoom : false , \u2003\u2003\u2003\u2003 chartTypes : { '143.3_NO_PR_2004_A_21:percent_change_a_year_ago' : 'column' }, \u2003\u2003\u2003\u2003 title : 'Nivel de Actividad y Tipo de Cambio Real Multilateral' , \u2003\u2003\u2003\u2003 source : 'Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC), Banco Central de la Rep\u00fablica Argentina (BCRA)' , \u2003\u2003\u2003\u2003 navigator : false }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#graph-destacado-con-zoom","text":"","title":"Graph destacado con zoom:"},{"location":"reference/ts-components/examples/#ejemplo_5","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_5","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"graph-zoom\" >   < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-zoom' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=33.2_ISAC_SIN_EDAD_0_M_23_56:percent_change_a_year_ago&last=12' , title : 'Indicador sint\u00e9tico de la actividad de la construcci\u00f3n (ISAC)' , source : 'Var % interanual. Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC)' , chartTypes : { \"33.2_ISAC_SIN_EDAD_0_M_23_56\" : \"column\" }, zoom : false , navigator : true , }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#graph-destacado-con-navegador-y-zoom","text":"","title":"Graph destacado con navegador y zoom:"},{"location":"reference/ts-components/examples/#ejemplo_6","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_6","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"graph-nav-zoom\" >   < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-nav-zoom' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=151.1_TL_SIN_TAC_2012_M_15,151.1_TL_ESTADAD_2012_M_20&last=12' , title : 'Cantidad de trabajadores registrados' , source : 'Cantidades. Fuente: Ministerio de Trabajo, Empleo y Seguridad Social' , legendField : 'description' , zoom : true , navigator : true }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#ejemplos-card-graph","text":"","title":"Ejemplos Card + Graph:"},{"location":"reference/ts-components/examples/#indicador-con-graph-inferior-asociado","text":"","title":"Indicador con Graph inferior asociado:"},{"location":"reference/ts-components/examples/#ejemplo_7","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_7","text":"< div class = \"container\" > < div class = \"row\" > < div class = \"text-center\" id = \"graph-indicador1\" >  < div class = \"row\" > < div id = \"indicator-graph1\" >   < script > window . onload = function () { TSComponents . Card . render ( 'graph-indicador1' , { serieId : 'defensa_FAA_0006' , color : '#C62828' , hasChart : 'none' , title : \"\" , links : \"none\" , hasFrame : false , source : \"\" }) TSComponents . Graphic . render ( 'indicator-graph1' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=defensa_FAA_0006' , title : \"Personal Femenino en la Fuerza A\u00e9rea\" , source : \"Fuente: Ministerio de Defensa\" , colors : [ '#C62828' ] }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#indicador-con-graph-lateral-asociado","text":"","title":"Indicador con Graph lateral asociado:"},{"location":"reference/ts-components/examples/#ejemplo_8","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_8","text":"< div class = \"container row panels-row\" > < div id = 'graph-indicator2' >  < div style = \"width: 500px; height: 350px;\" id = 'indicator-graph2' >  < script > window . onload = function () { TSComponents . Card . render ( 'graph-indicator2' , { serieId : '148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago' , hasChart : \"small\" , title : \"Indicador IPC interanual\" }) TSComponents . Graphic . render ( 'indicator-graph2' , { graphicUrl : \"https://apis.datos.gob.ar/series/api/series?ids=148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\" , datePickerEnabled : false , zoom : false , title : \"Gr\u00e1fico IPC interanual\" , navigator : false , legendLabel : { \"148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\" : \"IPC (% interanual)\" } }) }  window.onload = function() { TSComponents.Card.render('indicador-min', { serieId: 'tcrse_QpvjK1:percent_change_a_year_ago', color: '#0072BB', hasChart: 'none', title: \"TCRSE. Otros Cultivos.\", links: \"none\", hasFrame: false, explicitSign: true, source: \"Fuente: Secretar\u00eda de la Transformaci\u00f3n Productiva\" }) TSComponents.Card.render('indicador-graph', { serieId: 'tmi_arg', color: '#2E7D33', hasChart: 'small', links: \"none\", hasFrame: false }) TSComponents.Card.render('indicador-click', { serieId: 'defensa_FAA_0006', color: '#C62828', hasChart: 'small', title: \"Personal Femenino en la Fuerza A\u00e9rea\", links: \"none\", }) TSComponents.Card.render('indicador-link', { serieId: '77.3_IEB_0_A_24', color: '#F9A822', hasChart: 'small', title: \"Exportaciones FOB a Brasil\", units: \"Millones de USD\", }) TSComponents.Graphic.render('graph-simple', { \u2003\u2003\u2003\u2003graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=143.3_NO_PR_2004_A_21:percent_change_a_year_ago,116.4_TCRZE_2015_D_36_4', \u2003\u2003\u2003\u2003zoom: false, \u2003\u2003\u2003\u2003chartTypes: {'143.3_NO_PR_2004_A_21:percent_change_a_year_ago': 'column'}, \u2003\u2003\u2003\u2003title: 'Nivel de Actividad y Tipo de Cambio Real Multilateral', \u2003\u2003\u2003\u2003source: 'Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC), Banco Central de la Rep\u00fablica Argentina (BCRA)', \u2003\u2003\u2003\u2003navigator: false }) TSComponents.Graphic.render('graph-zoom', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=33.2_ISAC_SIN_EDAD_0_M_23_56:percent_change_a_year_ago&last=12', title: 'Indicador sint\u00e9tico de la actividad de la construcci\u00f3n (ISAC)', source: 'Var % interanual. Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC)', chartTypes: { \"33.2_ISAC_SIN_EDAD_0_M_23_56\": \"column\" }, zoom: false, navigator: true, }) TSComponents.Graphic.render('graph-nav-zoom', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=151.1_TL_SIN_TAC_2012_M_15,151.1_TL_ESTADAD_2012_M_20&last=12', title: 'Cantidad de trabajadores registrados', source: 'Cantidades. Fuente: Ministerio de Trabajo, Empleo y Seguridad Social', legendField: 'description', zoom: true, navigator: true }) TSComponents.Card.render('graph-indicador1', { serieId: 'defensa_FAA_0006', color: '#C62828', hasChart: 'none', title: \"\", links: \"none\", hasFrame: false, source: \"\" }) TSComponents.Graphic.render('indicator-graph1', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=defensa_FAA_0006', title: \"Personal Femenino en la Fuerza A\u00e9rea\", source: \"Fuente: Ministerio de Defensa\", colors: ['#C62828'] }) TSComponents.Card.render('graph-indicator2', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago', hasChart: \"small\", title: \"Indicador IPC interanual\" }) TSComponents.Graphic.render('indicator-graph2', { graphicUrl: \"https://apis.datos.gob.ar/series/api/series?ids=148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\", datePickerEnabled: false, zoom: false, title: \"Gr\u00e1fico IPC interanual\", navigator: false, legendLabel: { \"148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\": \"IPC (% interanual)\" } }) }","title":"C\u00f3digo:"},{"location":"reference/ts-components/graphic/","text":"Componente: graphic \ud83d\udd17 El componente graphic permite embeber gr\u00e1ficos de l\u00edneas, \u00e1reas o barras en experiencias web. Permite elegir distintos elementos de filtro de fechas, personalizar los textos, etc. Ejemplo base \ud83d\udd17 Ver online: https://jsfiddle.net/tqjonaf9/ window.onload = function() { TSComponents.Graphic.render('tmi', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg', title: 'Tasa de Mortalidad Infantil de Argentina', source: 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' }) } Este gr\u00e1fico se genera a partir del siguiente c\u00f3digo:  < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js' >  < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/css/components.css' />  < div id = \"tmi\" >  < script > window . onload = function () { TSComponents . Graphic . render ( 'tmi' , { // Llamada a la API de Series de Tiempo graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg' , title : 'Tasa de Mortalidad Infantil de Argentina' , source : 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' }) }  Tabla de par\u00e1metros \ud83d\udd17 Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos graphicUrl Si URL completa del llamado a la API. string Ninguno https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg chartOptions No Cualquier opci\u00f3n v\u00e1lida para [Highcharts](https://api.highcharts.com/highcharts/). object {} navigator No Indica si est\u00e1 habilitada la funcionalidad de navegaci\u00f3n de la serie. boolean Din\u00e1mico true / false locale No Valores posibles: \"AR\" o \"US\" (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string AR AR o US zoom No Indica si tiene habilitada la funcionalidad de zoom. boolean Din\u00e1mico true / false exportable No Indica si tiene habilitada la funcionalidad de exportar el gr\u00e1fico. boolean Din\u00e1mico true / false colors No Paleta de colores alternativa a la default. Los c\u00f3digos 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\u00e1s abajo. list [\"#0072BB\", \"#2E7D33\", \"#C62828\", \"#F9A822\", \"#6A1B99\", \"#EC407A\", \"#C2185B\", \"#039BE5\", \"#6EA100\"] [0, 1, 2, 3, 4, 5, 6, 7, 8] [\"#2E7D33\", 2, \"#F9A822\"] backgroundColor No Color de fondo del gr\u00e1fico en formato hexadecimal. string #cdcdcd #cdcdcd datePickerEnabled No Indica si el selector de fechas est\u00e1 habilitado. boolean Din\u00e1mica true / false legendField No Indica el campo de la serie a usar para mostrar la leyenda. string 'title' \"title\", \"description\" o \"id\" chartTypes No Especifica el tipo de gr\u00e1fico a usar para cada serie < ./td> object 'line' para todas las series {'tmi_arg': 'column', 'tmi_02': 'line', 'tmi_06': 'area'} title No Especifica el t\u00edtulo el gr\u00e1fico. string Ninguno Tasa de Mortalidad Infantil de Argentina source No Especifica el texto al pie del gr\u00e1fico. string Ninguno Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud displayUnits No Indica si se muestran las unidades del gr\u00e1fico. boolean Din\u00e1mico true / false legendLabel No Especifica el texto a mostrar como leyenda por cada serie. object {} {'serie01': 'leyenda custom'} seriesAxis No Especifica de qu\u00e9 lado del gr\u00e1fico mostrar las ordenadas y unidades de cada serie representada. Puede haber m\u00e1s de una serie en un mismo lado. Si hay una sola serie, debe ir obligatoriamente del lado izquierdo. object {} {'serie01': 'right', 'serie02': 'left'} chartType No Especifica un tipo de gr\u00e1fico para aplicar a todas las series como default. En caso de estar especificado un tipo para una serie en chartTypes, este \u00faltimo ser\u00e1 priorizado para la misma. string 'line' 'line', 'area' o 'column' decimalLeftAxis No Especifica cu\u00e1ntos d\u00edgitos decimales tendr\u00e1n los valores de las ordenadas del eje izquierdo (principal) del gr\u00e1fico. int Ninguno 6 decimalRightAxis No Especifica cu\u00e1ntos d\u00edgitos decimales tendr\u00e1n los valores de las ordenadas del eje derecho (auxiliar) del gr\u00e1fico. int Ninguno 0 decimalTooltips No Especifica cu\u00e1ntos d\u00edgitos decimales mostrar\u00e1 el texto en el tooltip para cada serie, mapeando ids de series con cantidades de decimales. object Ninguno {'serie01': 4, 'serie02': 1} decimalTooltip No Especifica la cantidad de d\u00edgitos decimales a mostrar en el texto del tooltip para toda serie que no lo haya definido en el par\u00e1metro decimalTooltips. int Ninguno 3 Paleta de colores por defecto \ud83d\udd17 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 Asignaci\u00f3n din\u00e1mica de atributos \ud83d\udd17 Varios componentes del gr\u00e1fico se muestran/ocultan din\u00e1micamente dependiendo de su tama\u00f1o. Los componentes son din\u00e1micos, en tanto no se especifique su valor de inicializaci\u00f3n: Si un par\u00e1metro se especifica con valor true se muestra siempre. Si el par\u00e1metro es false no se muestra nunca. Si no se especifica, corren las siguientes reglas: zoom : Se muestra si el ancho es mayor o igual a 620px navigator : Se muestra si el ancho es mayor o igual a 500px datePickerEnabled : Se muestra si el ancho es mayor o igual a 400px displayUnits : Se muestra si el ancho es mayor o igual a 450px leyenda : Este no es un campo que se pueda ocultar mediante la API de TSComponents.Graphic , pero los valores de la leyenda se muestran s\u00f3lo si hay m\u00e1s de una serie aplicada. Ejemplo completo \ud83d\udd17 < html > < body > < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js' > < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/css/components.css' /> < div id = \"root\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'root' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg' , title : 'Tasa de Mortalidad Infantil de Argentina' , source : 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' , legendField : 'title' , chartType : 'area' , chartTypes : { 'tmi_arg' : 'column' }, zoom : true , datePickerEnabled : true , displayUnits : true exportable : true , navigator : false , backgroundColor : '#cdcdcd' , colors : [ '#cecece' , '#8d6b22' , '#62848d' ], locale : 'AR' , chartOptions : {}, legendLabel : { 'tmi_arg' : 'Tasa de mortalidad nacional' }, seriesAxis : { 'tmi_arg' : 'left' } }) }   ","title":"TSComponents: graphic"},{"location":"reference/ts-components/graphic/#componente-graphic","text":"El componente graphic permite embeber gr\u00e1ficos de l\u00edneas, \u00e1reas o barras en experiencias web. Permite elegir distintos elementos de filtro de fechas, personalizar los textos, etc.","title":"Componente: graphic"},{"location":"reference/ts-components/graphic/#ejemplo-base","text":"Ver online: https://jsfiddle.net/tqjonaf9/ window.onload = function() { TSComponents.Graphic.render('tmi', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg', title: 'Tasa de Mortalidad Infantil de Argentina', source: 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' }) } Este gr\u00e1fico se genera a partir del siguiente c\u00f3digo:  < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js' >  < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/css/components.css' />  < div id = \"tmi\" >  < script > window . onload = function () { TSComponents . Graphic . render ( 'tmi' , { // Llamada a la API de Series de Tiempo graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg' , title : 'Tasa de Mortalidad Infantil de Argentina' , source : 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' }) } ","title":"Ejemplo base"},{"location":"reference/ts-components/graphic/#tabla-de-parametros","text":"Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos graphicUrl Si URL completa del llamado a la API. string Ninguno https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg chartOptions No Cualquier opci\u00f3n v\u00e1lida para [Highcharts](https://api.highcharts.com/highcharts/). object {} navigator No Indica si est\u00e1 habilitada la funcionalidad de navegaci\u00f3n de la serie. boolean Din\u00e1mico true / false locale No Valores posibles: \"AR\" o \"US\" (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string AR AR o US zoom No Indica si tiene habilitada la funcionalidad de zoom. boolean Din\u00e1mico true / false exportable No Indica si tiene habilitada la funcionalidad de exportar el gr\u00e1fico. boolean Din\u00e1mico true / false colors No Paleta de colores alternativa a la default. Los c\u00f3digos 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\u00e1s abajo. list [\"#0072BB\", \"#2E7D33\", \"#C62828\", \"#F9A822\", \"#6A1B99\", \"#EC407A\", \"#C2185B\", \"#039BE5\", \"#6EA100\"] [0, 1, 2, 3, 4, 5, 6, 7, 8] [\"#2E7D33\", 2, \"#F9A822\"] backgroundColor No Color de fondo del gr\u00e1fico en formato hexadecimal. string #cdcdcd #cdcdcd datePickerEnabled No Indica si el selector de fechas est\u00e1 habilitado. boolean Din\u00e1mica true / false legendField No Indica el campo de la serie a usar para mostrar la leyenda. string 'title' \"title\", \"description\" o \"id\" chartTypes No Especifica el tipo de gr\u00e1fico a usar para cada serie < ./td> object 'line' para todas las series {'tmi_arg': 'column', 'tmi_02': 'line', 'tmi_06': 'area'} title No Especifica el t\u00edtulo el gr\u00e1fico. string Ninguno Tasa de Mortalidad Infantil de Argentina source No Especifica el texto al pie del gr\u00e1fico. string Ninguno Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud displayUnits No Indica si se muestran las unidades del gr\u00e1fico. boolean Din\u00e1mico true / false legendLabel No Especifica el texto a mostrar como leyenda por cada serie. object {} {'serie01': 'leyenda custom'} seriesAxis No Especifica de qu\u00e9 lado del gr\u00e1fico mostrar las ordenadas y unidades de cada serie representada. Puede haber m\u00e1s de una serie en un mismo lado. Si hay una sola serie, debe ir obligatoriamente del lado izquierdo. object {} {'serie01': 'right', 'serie02': 'left'} chartType No Especifica un tipo de gr\u00e1fico para aplicar a todas las series como default. En caso de estar especificado un tipo para una serie en chartTypes, este \u00faltimo ser\u00e1 priorizado para la misma. string 'line' 'line', 'area' o 'column' decimalLeftAxis No Especifica cu\u00e1ntos d\u00edgitos decimales tendr\u00e1n los valores de las ordenadas del eje izquierdo (principal) del gr\u00e1fico. int Ninguno 6 decimalRightAxis No Especifica cu\u00e1ntos d\u00edgitos decimales tendr\u00e1n los valores de las ordenadas del eje derecho (auxiliar) del gr\u00e1fico. int Ninguno 0 decimalTooltips No Especifica cu\u00e1ntos d\u00edgitos decimales mostrar\u00e1 el texto en el tooltip para cada serie, mapeando ids de series con cantidades de decimales. object Ninguno {'serie01': 4, 'serie02': 1} decimalTooltip No Especifica la cantidad de d\u00edgitos decimales a mostrar en el texto del tooltip para toda serie que no lo haya definido en el par\u00e1metro decimalTooltips. int Ninguno 3","title":"Tabla de par\u00e1metros"},{"location":"reference/ts-components/graphic/#paleta-de-colores-por-defecto","text":"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","title":"Paleta de colores por defecto"},{"location":"reference/ts-components/graphic/#asignacion-dinamica-de-atributos","text":"Varios componentes del gr\u00e1fico se muestran/ocultan din\u00e1micamente dependiendo de su tama\u00f1o. Los componentes son din\u00e1micos, en tanto no se especifique su valor de inicializaci\u00f3n: Si un par\u00e1metro se especifica con valor true se muestra siempre. Si el par\u00e1metro es false no se muestra nunca. Si no se especifica, corren las siguientes reglas: zoom : Se muestra si el ancho es mayor o igual a 620px navigator : Se muestra si el ancho es mayor o igual a 500px datePickerEnabled : Se muestra si el ancho es mayor o igual a 400px displayUnits : Se muestra si el ancho es mayor o igual a 450px leyenda : Este no es un campo que se pueda ocultar mediante la API de TSComponents.Graphic , pero los valores de la leyenda se muestran s\u00f3lo si hay m\u00e1s de una serie aplicada.","title":"Asignaci\u00f3n din\u00e1mica de atributos"},{"location":"reference/ts-components/graphic/#ejemplo-completo","text":"< html > < body > < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js' > < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/css/components.css' /> < div id = \"root\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'root' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg' , title : 'Tasa de Mortalidad Infantil de Argentina' , source : 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' , legendField : 'title' , chartType : 'area' , chartTypes : { 'tmi_arg' : 'column' }, zoom : true , datePickerEnabled : true , displayUnits : true exportable : true , navigator : false , backgroundColor : '#cdcdcd' , colors : [ '#cecece' , '#8d6b22' , '#62848d' ], locale : 'AR' , chartOptions : {}, legendLabel : { 'tmi_arg' : 'Tasa de mortalidad nacional' }, seriesAxis : { 'tmi_arg' : 'left' } }) }   ","title":"Ejemplo completo"}]}
\ No newline at end of file
+{"config":{"lang":["en"],"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"applications/","text":"","title":"Applications"},{"location":"docs/","text":"Explorador de Series de Tiempo \ud83d\udd17 El Explorador de Series de Tiempo es una familia de componentes front-end para desarrollar experiencias web a partir de los datos de la API de Series de Tiempo de la Rep\u00fablica Argentina , donde los organismos de la Administraci\u00f3n P\u00fablica Nacional publican indicadores en formatos abiertos. Si quer\u00e9s integrar un explorador completo en tu sitio web (como el de Datos Argentina ) le\u00e9 la referencia de TSExplorer . Si quer\u00e9s agregar gr\u00e1ficos en tu sitio web le\u00e9 la referencia de TSComponents . Versiones de browsers \ud83d\udd17 El Explorador de Series de Tiempo fue desarrolado utilizando versiones recientes de Firefox y Chrome (57+ y 60+), y soporta Internet Explorer desde la versi\u00f3n 11 en adelante. Si sos usuario de la API de Series de Tiempo y quer\u00e9s estar al tanto de los cambios y novedades, inscribite en la base de contactos de Datos Argentina y eleg\u00ed sobre qu\u00e9 temas quer\u00e9s que te escribamos. \u00bfTen\u00e9s algo que contarnos? Nos encantar\u00eda que nos cuentes por Twitter o por mail qu\u00e9 mejor\u00f3 usar la API en tu trabajo y qu\u00e9 le falta para mejorar a\u00fan m\u00e1s.","title":"Inicio"},{"location":"docs/#explorador-de-series-de-tiempo","text":"El Explorador de Series de Tiempo es una familia de componentes front-end para desarrollar experiencias web a partir de los datos de la API de Series de Tiempo de la Rep\u00fablica Argentina , donde los organismos de la Administraci\u00f3n P\u00fablica Nacional publican indicadores en formatos abiertos. Si quer\u00e9s integrar un explorador completo en tu sitio web (como el de Datos Argentina ) le\u00e9 la referencia de TSExplorer . Si quer\u00e9s agregar gr\u00e1ficos en tu sitio web le\u00e9 la referencia de TSComponents .","title":"Explorador de Series de Tiempo"},{"location":"docs/#versiones-de-browsers","text":"El Explorador de Series de Tiempo fue desarrolado utilizando versiones recientes de Firefox y Chrome (57+ y 60+), y soporta Internet Explorer desde la versi\u00f3n 11 en adelante. Si sos usuario de la API de Series de Tiempo y quer\u00e9s estar al tanto de los cambios y novedades, inscribite en la base de contactos de Datos Argentina y eleg\u00ed sobre qu\u00e9 temas quer\u00e9s que te escribamos. \u00bfTen\u00e9s algo que contarnos? Nos encantar\u00eda que nos cuentes por Twitter o por mail qu\u00e9 mejor\u00f3 usar la API en tu trabajo y qu\u00e9 le falta para mejorar a\u00fan m\u00e1s.","title":"Versiones de browsers"},{"location":"terms/","text":"","title":"Terms"},{"location":"developers/deploy/","text":"Documentaci\u00f3n de deploy \ud83d\udd17 Tenemos 2 formas de deploy: Generaci\u00f3n de github pages y generaci\u00f3n de release para subir al CDN . Github pages \ud83d\udd17 El deploy se puede realizar de dos maneras. Ambas son iguales npm run build-docs make build Y finalmente subir todo al branch default: - git add . - git commit -m \"Deploy a github pages\" - git push Release para CDN \ud83d\udd17 Crear un branch desde la versi\u00f3n que queremos salir: - git checkout -b  Generar los archivos para distribuir. Tenemos dos maneras, ambas son iguales: - npm run release - make release Agregar los archivos: - git add dist (basta con agregar s\u00f3lo la carpeta a distribuir) - git commit -m \"Actualizo carpeta dist\" - git push origin  Crear un tag: - git tag  - git push --tags Con el nombre del tag ya podemos acceder a los archivos que necesitemos: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@nombreDelTag/dist/js/main.js Actualizar series-tiempo-ar-explorer-demo para usar la versi\u00f3n deseada (en el ejemplo la versi\u00f3n es test_0.4 pero podemos usar cualquiera ya sea para el archivo css o para el js): - Modificar el index.html del directorio root del proyecto demo para cambiar la versi\u00f3n usada de JS y de CSS: - CSS: cambiar la l\u00ednea: ` < link rel = \"stylesheet\" href = \"https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@test_0.4/dist/css/main.css\" type = \"text/css\" > ` . JS: cambiar la l\u00ednea:  Las modificaciones de dichas l\u00edneas s\u00f3lo deber\u00edan ser para cambiar la versi\u00f3n, la ruta no deber\u00eda cambiar a menos que se busque usar un archivo distinto.","title":"Despliegue"},{"location":"developers/deploy/#documentacion-de-deploy","text":"Tenemos 2 formas de deploy: Generaci\u00f3n de github pages y generaci\u00f3n de release para subir al CDN .","title":"Documentaci\u00f3n de deploy"},{"location":"developers/deploy/#github-pages","text":"El deploy se puede realizar de dos maneras. Ambas son iguales npm run build-docs make build Y finalmente subir todo al branch default: - git add . - git commit -m \"Deploy a github pages\" - git push","title":"Github pages"},{"location":"developers/deploy/#release-para-cdn","text":"Crear un branch desde la versi\u00f3n que queremos salir: - git checkout -b  Generar los archivos para distribuir. Tenemos dos maneras, ambas son iguales: - npm run release - make release Agregar los archivos: - git add dist (basta con agregar s\u00f3lo la carpeta a distribuir) - git commit -m \"Actualizo carpeta dist\" - git push origin  Crear un tag: - git tag  - git push --tags Con el nombre del tag ya podemos acceder a los archivos que necesitemos: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@nombreDelTag/dist/js/main.js Actualizar series-tiempo-ar-explorer-demo para usar la versi\u00f3n deseada (en el ejemplo la versi\u00f3n es test_0.4 pero podemos usar cualquiera ya sea para el archivo css o para el js): - Modificar el index.html del directorio root del proyecto demo para cambiar la versi\u00f3n usada de JS y de CSS: - CSS: cambiar la l\u00ednea: ` < link rel = \"stylesheet\" href = \"https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@test_0.4/dist/css/main.css\" type = \"text/css\" > ` . JS: cambiar la l\u00ednea:  Las modificaciones de dichas l\u00edneas s\u00f3lo deber\u00edan ser para cambiar la versi\u00f3n, la ruta no deber\u00eda cambiar a menos que se busque usar un archivo distinto.","title":"Release para CDN"},{"location":"developers/install/","text":"Setup \ud83d\udd17 Requerimientos \ud83d\udd17 Este proyecto requiere Node v8.9.4 o superior (npm v6.0.0). Puede ser instalado con nvm Instalar node y npm. nvm install 8.9.4 O v\u00eda package manager: curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - sudo apt-get install -y nodejs Desarrollo \ud83d\udd17 Instalar hooks git hooks install Instalar dependencias: npm install Iniciar web server make watch para levantar el servidor en localhost:3000 Desarrollo de componentes exportables \ud83d\udd17 Se puede iniciar un servidor web para servir un dashboard que utiliza los componentes exportables usando make components-watch Para mas info: react documentation Problemas comunes \ud83d\udd17 npm start : Error al iniciar el server. Soluci\u00f3n: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p Para correr los tests de un archivo en particular: npm test -- --  why the \"--\" magick incantation Debugging en VS code \ud83d\udd17 Usar esta launch configuration { \"name\": \"Debug Jest Tests\", \"type\": \"node\", \"request\": \"launch\", \"runtimeArgs\": [\"--inspect-brk\", \" ${ workspaceRoot } /scripts/test.js\", \"--runInBand\", \"--env=jsdom\"], \"port\": 9229, \"console\": \"integratedTerminal\", \"internalConsoleOptions\": \"neverOpen\" }","title":"Instalaci\u00f3n"},{"location":"developers/install/#setup","text":"","title":"Setup"},{"location":"developers/install/#requerimientos","text":"Este proyecto requiere Node v8.9.4 o superior (npm v6.0.0). Puede ser instalado con nvm Instalar node y npm. nvm install 8.9.4 O v\u00eda package manager: curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - sudo apt-get install -y nodejs","title":"Requerimientos"},{"location":"developers/install/#desarrollo","text":"Instalar hooks git hooks install Instalar dependencias: npm install Iniciar web server make watch para levantar el servidor en localhost:3000","title":"Desarrollo"},{"location":"developers/install/#desarrollo-de-componentes-exportables","text":"Se puede iniciar un servidor web para servir un dashboard que utiliza los componentes exportables usando make components-watch Para mas info: react documentation","title":"Desarrollo de componentes exportables"},{"location":"developers/install/#problemas-comunes","text":"npm start : Error al iniciar el server. Soluci\u00f3n: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p Para correr los tests de un archivo en particular: npm test -- --  why the \"--\" magick incantation","title":"Problemas comunes"},{"location":"developers/install/#debugging-en-vs-code","text":"Usar esta launch configuration { \"name\": \"Debug Jest Tests\", \"type\": \"node\", \"request\": \"launch\", \"runtimeArgs\": [\"--inspect-brk\", \" ${ workspaceRoot } /scripts/test.js\", \"--runInBand\", \"--env=jsdom\"], \"port\": 9229, \"console\": \"integratedTerminal\", \"internalConsoleOptions\": \"neverOpen\" }","title":"Debugging en VS code"},{"location":"reference/ts-components/","text":"TSComponents \ud83d\udd17 Versi\u00f3n : 2.6.2 El objeto TSComponents contiene distintos componentes exportables que se pueden utilizar dentro de una experiencia web. Est\u00e1 en el archivo llamado components.js y se aloja versionado en el CDN: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js Componentes \ud83d\udd17 graphic : gr\u00e1fico de l\u00edneas, barras o \u00e1rea usado en el explorador de series de tiempo con todas sus funcionalidades. card : tarjeta con informaci\u00f3n de la serie y un gr\u00e1fico inclu\u00eddo con sus datos. \u00bfC\u00f3mo los uso? \ud83d\udd17 Todos los componentes se usan de la misma manera. Importar librer\u00eda JS: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js' > Importar hoja de estilos CSS: < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/css/components.css' /> Definir d\u00f3nde se va a dibujar: < div id = \"graphic_01\" > < div id = \"card_01\" > Instanciar el componente que buscamos: TSComponents . Graphic . render ( 'graphic_01' , { ... }) TSComponents . Card . render ( 'card_01' , { ... })","title":"TSComponents"},{"location":"reference/ts-components/#tscomponents","text":"Versi\u00f3n : 2.6.2 El objeto TSComponents contiene distintos componentes exportables que se pueden utilizar dentro de una experiencia web. Est\u00e1 en el archivo llamado components.js y se aloja versionado en el CDN: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js","title":"TSComponents"},{"location":"reference/ts-components/#componentes","text":"graphic : gr\u00e1fico de l\u00edneas, barras o \u00e1rea usado en el explorador de series de tiempo con todas sus funcionalidades. card : tarjeta con informaci\u00f3n de la serie y un gr\u00e1fico inclu\u00eddo con sus datos.","title":"Componentes"},{"location":"reference/ts-components/#como-los-uso","text":"Todos los componentes se usan de la misma manera. Importar librer\u00eda JS: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js' > Importar hoja de estilos CSS: < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/css/components.css' /> Definir d\u00f3nde se va a dibujar: < div id = \"graphic_01\" > < div id = \"card_01\" > Instanciar el componente que buscamos: TSComponents . Graphic . render ( 'graphic_01' , { ... }) TSComponents . Card . render ( 'card_01' , { ... })","title":"\u00bfC\u00f3mo los uso?"},{"location":"reference/ts-explorer/","text":"TSExplorer \ud83d\udd17 Versi\u00f3n : 2.5.0 El objeto TSExplorer contiene una one page application con un explorador de series de tiempo, que permite buscar y visualizar series de un cat\u00e1logo de datos abiertos. Est\u00e1 en el archivo llamado main.js y se aloja versionado en el CDN: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.5.0/dist/js/main.js \u00bfC\u00f3mo lo uso? \ud83d\udd17 Importar librer\u00eda JS: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.5.0/dist/js/main.js' > Definir d\u00f3nde se va a dibujar: < div id = \"explorer-container\" > Instanciar el explorador: TSExplorer . render ( 'explorer-container' , { ... }) Ejemplo de uso \ud83d\udd17 < html > < body > < script type = \"text/javascript\" src = \"https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.5.0/dist/js/main.js\" > < div id = \"explorer-container\" > < script > window . onload = function () { TSExplorer . render ( 'explorer-container' , { featured : [ \"103.1_I2N_2016_M_15\" , \"168.1_T_CAMBIOR_D_0_0_26\" , ], seriesApiUri : \"https://apis.datos.gob.ar/series/api\" , catalogId : 'datosgobar' , formatChartUnits : true , laps : { Diaria : 90 , Mensual : 24 , Trimestral : 20 , Semestral : 10 , Anual : 10 , }, locale : 'AR' }) }    Tabla de par\u00e1metros \ud83d\udd17 Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos seriesApiUri Si URI a la API donde buscamos los datos. string Ninguno https://apis.datos.gob.ar/series/api featured No Indica los IDs de las series destacadas string[] [] [\"103.1_I2N_2016_M_15\", \"168.1_T_CAMBIOR_D_0_0_26\"] catalogId No Representa el id del cat\u00e1logo de donde busca las series string Ninguno datosgobar formatChartUnits No Indica si debe formatear a porcentaje los valores entre -1 y 1. boolean true true / false laps No Informaci\u00f3n para traer los \u00faltimos _n_ valores de la serie, con _n_ igual al valor por frecuencia. {Diaria: number, Mensual: number, Trimestral: number, Semestral: number, Anual: number} object true true / false locale No Valores posibles: `\"AR\"` o `\"US\"` (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string \"AR\" \"AR\" / \"US\" maxDecimals No Cantidad m\u00e1xima de cifras decimales a mostar para los valores de las series, tanto en sus tarjetas destacadas, como resultados de b\u00fasqueda y notas (tooltips) de los gr\u00e1ficos. int 2 0/4/1 heroImageUrl No URL de la imagen a mostrar de fondo en el banner del encabezado. string https://wallpaperplay.com/walls/full/c/5/f/375180.jpg 0/4/1 Demo online \ud83d\udd17 https://jsfiddle.net/rh21gofc/","title":"TSExplorer"},{"location":"reference/ts-explorer/#tsexplorer","text":"Versi\u00f3n : 2.5.0 El objeto TSExplorer contiene una one page application con un explorador de series de tiempo, que permite buscar y visualizar series de un cat\u00e1logo de datos abiertos. Est\u00e1 en el archivo llamado main.js y se aloja versionado en el CDN: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.5.0/dist/js/main.js","title":"TSExplorer"},{"location":"reference/ts-explorer/#como-lo-uso","text":"Importar librer\u00eda JS: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.5.0/dist/js/main.js' > Definir d\u00f3nde se va a dibujar: < div id = \"explorer-container\" > Instanciar el explorador: TSExplorer . render ( 'explorer-container' , { ... })","title":"\u00bfC\u00f3mo lo uso?"},{"location":"reference/ts-explorer/#ejemplo-de-uso","text":"< html > < body > < script type = \"text/javascript\" src = \"https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.5.0/dist/js/main.js\" > < div id = \"explorer-container\" > < script > window . onload = function () { TSExplorer . render ( 'explorer-container' , { featured : [ \"103.1_I2N_2016_M_15\" , \"168.1_T_CAMBIOR_D_0_0_26\" , ], seriesApiUri : \"https://apis.datos.gob.ar/series/api\" , catalogId : 'datosgobar' , formatChartUnits : true , laps : { Diaria : 90 , Mensual : 24 , Trimestral : 20 , Semestral : 10 , Anual : 10 , }, locale : 'AR' }) }   ","title":"Ejemplo de uso"},{"location":"reference/ts-explorer/#tabla-de-parametros","text":"Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos seriesApiUri Si URI a la API donde buscamos los datos. string Ninguno https://apis.datos.gob.ar/series/api featured No Indica los IDs de las series destacadas string[] [] [\"103.1_I2N_2016_M_15\", \"168.1_T_CAMBIOR_D_0_0_26\"] catalogId No Representa el id del cat\u00e1logo de donde busca las series string Ninguno datosgobar formatChartUnits No Indica si debe formatear a porcentaje los valores entre -1 y 1. boolean true true / false laps No Informaci\u00f3n para traer los \u00faltimos _n_ valores de la serie, con _n_ igual al valor por frecuencia. {Diaria: number, Mensual: number, Trimestral: number, Semestral: number, Anual: number} object true true / false locale No Valores posibles: `\"AR\"` o `\"US\"` (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string \"AR\" \"AR\" / \"US\" maxDecimals No Cantidad m\u00e1xima de cifras decimales a mostar para los valores de las series, tanto en sus tarjetas destacadas, como resultados de b\u00fasqueda y notas (tooltips) de los gr\u00e1ficos. int 2 0/4/1 heroImageUrl No URL de la imagen a mostrar de fondo en el banner del encabezado. string https://wallpaperplay.com/walls/full/c/5/f/375180.jpg 0/4/1","title":"Tabla de par\u00e1metros"},{"location":"reference/ts-explorer/#demo-online","text":"https://jsfiddle.net/rh21gofc/","title":"Demo online"},{"location":"reference/ts-components/card/","text":"Componente: card \ud83d\udd17 El componente card permite embeber tarjetas con informaci\u00f3n de la serie, y un gr\u00e1fico inclu\u00eddo dentro de la misma, en sitios web. .row { width: 90%; margin: auto; display: flex; justify-content: space-around; } Ejemplo base \ud83d\udd17 Ver online: https://jsfiddle.net/oz9ch2br/  < link type = \"text/css\" rel = \"stylesheet\" href = \"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css\" media = \"all\" />  < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js' >  < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/css/components.css' />  < div id = \"tmi\" >  < script > window . onload = function () { TSComponents . Card . render ( 'tmi' , { // ID de la serie solicitada serieId : '143.3_NO_PR_2004_A_21' }) }  Tabla de par\u00e1metros \ud83d\udd17 Nombre Requerido Descripci\u00f3n 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\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string AR AR o US links No Indica qu\u00e9 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\u00famero y el borde de la tarjeta. string #0072BB red hasChart No Indica el tipo de gr\u00e1fico 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\u00e1 precedido por un signo de adici\u00f3n ('+'). Por defecto, se encuentra desactivado. booleano false true title No Especifica el t\u00edtulo de la tarjeta. De no definirse, se considera el t\u00edtulo por defecto de la serie; de definirse como '', se lo omite. string Ninguno Un t\u00edtulo personalizado source No Especifica el texto al pie de la tarjeta, que refiere a la fuente de la informaci\u00f3n. De no definirse, se considera la fuente por defecto de la serie; de definirse como '', se la omite. string Ninguno Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda 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\u00e1 marco si tiene al menos gr\u00e1fico o enlaces. booleano Ninguno true hasColorBar No Permite forzar la presencia de la barra de color (el mismo que posee el n\u00famero) en el borde superior de la tarjeta. De no estar definido, la barr\u00e1 estar\u00e1 presente s\u00f3lo si la tarjeta posee marco. booleano Ninguno false collapse No Permite cambiar la frecuencia en la que se muestra la serie. Mediante este par\u00e1metro 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\u00e1fico no se mostrar\u00e1 (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\u00e1 la serie representada en la tarjeta. A dicha url se le adjuntar\u00e1 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\u00e1ntos d\u00edgitos 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\u00edgitos original del valor; completa con 0s en caso contrario. int 2 5 Ejemplo completo \ud83d\udd17 < html > < body > < script type = 'text/javascript' src = 'components.js' > < div id = \"card1\" > < 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' }) }    Demo online \ud83d\udd17 https://jsfiddle.net/oz9ch2br/ Variantes de tarjetas \ud83d\udd17 Card: default \ud83d\udd17 Card: menos links \ud83d\udd17 Card: sin links \ud83d\udd17 Card: m\u00ednima \ud83d\udd17 Card: m\u00ednima (eliminando elementos) \ud83d\udd17 window.onload = function() { TSComponents.Card.render('ipc', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', title: \"Indice de Precios al Consumidor Nacional\", links: \"none\" }) TSComponents.Card.render('exportaciones', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', title: \"Exportaciones\", links: \"none\" }) TSComponents.Card.render('ipc-card', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', title: \"Exportaciones\" }) TSComponents.Card.render('ipc-card-links2', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', links: \"small\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-links2', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', links: \"small\", title: \"Exportaciones\" }) TSComponents.Card.render('ipc-card-med', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', links: \"none\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-med', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', links: \"none\", title: \"Exportaciones\", hasFrame: false }) TSComponents.Card.render('ipc-card-min', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', links: 'none', hasChart: \"none\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-min', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, links: 'none', hasChart: \"none\", title: \"Exportaciones\", hasColorBar: true }) TSComponents.Card.render('ipc-card-min-xtreme', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', links: 'none', hasChart: \"none\", title: \"\", units: \"\", source: \"\" }) TSComponents.Card.render('exportaciones-card-min-xtreme', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, links: 'none', hasChart: \"none\", title: \"\", units: \"\", source: \"\" }) }","title":"TSComponents: card"},{"location":"reference/ts-components/card/#componente-card","text":"El componente card permite embeber tarjetas con informaci\u00f3n de la serie, y un gr\u00e1fico inclu\u00eddo dentro de la misma, en sitios web. .row { width: 90%; margin: auto; display: flex; justify-content: space-around; }","title":"Componente: card"},{"location":"reference/ts-components/card/#ejemplo-base","text":"Ver online: https://jsfiddle.net/oz9ch2br/  < link type = \"text/css\" rel = \"stylesheet\" href = \"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css\" media = \"all\" />  < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js' >  < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/css/components.css' />  < div id = \"tmi\" >  < script > window . onload = function () { TSComponents . Card . render ( 'tmi' , { // ID de la serie solicitada serieId : '143.3_NO_PR_2004_A_21' }) } ","title":"Ejemplo base"},{"location":"reference/ts-components/card/#tabla-de-parametros","text":"Nombre Requerido Descripci\u00f3n 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\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string AR AR o US links No Indica qu\u00e9 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\u00famero y el borde de la tarjeta. string #0072BB red hasChart No Indica el tipo de gr\u00e1fico 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\u00e1 precedido por un signo de adici\u00f3n ('+'). Por defecto, se encuentra desactivado. booleano false true title No Especifica el t\u00edtulo de la tarjeta. De no definirse, se considera el t\u00edtulo por defecto de la serie; de definirse como '', se lo omite. string Ninguno Un t\u00edtulo personalizado source No Especifica el texto al pie de la tarjeta, que refiere a la fuente de la informaci\u00f3n. De no definirse, se considera la fuente por defecto de la serie; de definirse como '', se la omite. string Ninguno Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda 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\u00e1 marco si tiene al menos gr\u00e1fico o enlaces. booleano Ninguno true hasColorBar No Permite forzar la presencia de la barra de color (el mismo que posee el n\u00famero) en el borde superior de la tarjeta. De no estar definido, la barr\u00e1 estar\u00e1 presente s\u00f3lo si la tarjeta posee marco. booleano Ninguno false collapse No Permite cambiar la frecuencia en la que se muestra la serie. Mediante este par\u00e1metro 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\u00e1fico no se mostrar\u00e1 (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\u00e1 la serie representada en la tarjeta. A dicha url se le adjuntar\u00e1 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\u00e1ntos d\u00edgitos 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\u00edgitos original del valor; completa con 0s en caso contrario. int 2 5","title":"Tabla de par\u00e1metros"},{"location":"reference/ts-components/card/#ejemplo-completo","text":"< html > < body > < script type = 'text/javascript' src = 'components.js' > < div id = \"card1\" > < 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' }) }   ","title":"Ejemplo completo"},{"location":"reference/ts-components/card/#demo-online","text":"https://jsfiddle.net/oz9ch2br/","title":"Demo online"},{"location":"reference/ts-components/card/#variantes-de-tarjetas","text":"","title":"Variantes de tarjetas"},{"location":"reference/ts-components/card/#card-default","text":"","title":"Card: default"},{"location":"reference/ts-components/card/#card-menos-links","text":"","title":"Card: menos links"},{"location":"reference/ts-components/card/#card-sin-links","text":"","title":"Card: sin links"},{"location":"reference/ts-components/card/#card-minima","text":"","title":"Card: m\u00ednima"},{"location":"reference/ts-components/card/#card-minima-eliminando-elementos","text":"window.onload = function() { TSComponents.Card.render('ipc', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', title: \"Indice de Precios al Consumidor Nacional\", links: \"none\" }) TSComponents.Card.render('exportaciones', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', title: \"Exportaciones\", links: \"none\" }) TSComponents.Card.render('ipc-card', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', title: \"Exportaciones\" }) TSComponents.Card.render('ipc-card-links2', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', links: \"small\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-links2', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', links: \"small\", title: \"Exportaciones\" }) TSComponents.Card.render('ipc-card-med', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', links: \"none\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-med', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', links: \"none\", title: \"Exportaciones\", hasFrame: false }) TSComponents.Card.render('ipc-card-min', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', links: 'none', hasChart: \"none\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-min', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, links: 'none', hasChart: \"none\", title: \"Exportaciones\", hasColorBar: true }) TSComponents.Card.render('ipc-card-min-xtreme', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', links: 'none', hasChart: \"none\", title: \"\", units: \"\", source: \"\" }) TSComponents.Card.render('exportaciones-card-min-xtreme', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, links: 'none', hasChart: \"none\", title: \"\", units: \"\", source: \"\" }) }","title":"Card: m\u00ednima (eliminando elementos)"},{"location":"reference/ts-components/examples/","text":".row { width: 90%; margin: auto; display: flex; justify-content: space-around; } .btn-primary { color: #ffffff; background-color: #0072bb; } Ejemplos: \ud83d\udd17 El prop\u00f3sito de este documento es mostrar ejemplos recomendados de implementar los componentes exportables (Card, Graphic). Para conocer la forma de implementar correctamente cada componente, referirse a la documentaci\u00f3n propia del mismo. Ejemplos Card: \ud83d\udd17 Indicadores destacado (m\u00ednimo): \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-min\" >   < script > window . onload = function () { TSComponents . Card . render ( 'indicador-min' , { serieId : 'tcrse_QpvjK1:percent_change_a_year_ago' , color : '#0072BB' , hasChart : 'none' , title : \"TCRSE. Otros Cultivos.\" , links : \"none\" , hasFrame : false , explicitSign : true , source : \"Fuente: Secretar\u00eda de la Transformaci\u00f3n Productiva\" }) }  Indicadores destacado (con mini-gr\u00e1fico): \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-graph\" >   < script > window . onload = function () { TSComponents . Card . render ( 'indicador-graph' , { serieId : 'tmi_arg' , color : '#2E7D33' , hasChart : 'small' , links : \"none\" , hasFrame : false }) }  Indicadores destacado (con tarjeta clickeable): \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-click\" >   < script > window . onload = function () { TSComponents . Card . render ( 'indicador-click' , { serieId : 'defensa_FAA_0006' , color : '#C62828' , hasChart : 'small' , title : \"Personal Femenino en la Fuerza A\u00e9rea\" , links : \"none\" , }) }  Indicadores destacado (con enlaces de descarga): \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-link\" >   < script > window . onload = function () { TSComponents . Card . render ( 'indicador-min' , { serieId : '77.3_IEB_0_A_24' , color : '#F9A822' , hasChart : 'small' , title : \"Exportaciones FOB a Brasil\" , units : \"Millones de USD\" , }) }  Ejemplos Graph: \ud83d\udd17 Graph destacado simple: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row\" > < div class = \"col-sm-12\" id = \"graph-simple\" >   < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-simple' , { \u2003\u2003\u2003\u2003 graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=143.3_NO_PR_2004_A_21:percent_change_a_year_ago,116.4_TCRZE_2015_D_36_4' , \u2003\u2003\u2003\u2003 zoom : false , \u2003\u2003\u2003\u2003 chartTypes : { '143.3_NO_PR_2004_A_21:percent_change_a_year_ago' : 'column' }, \u2003\u2003\u2003\u2003 title : 'Nivel de Actividad y Tipo de Cambio Real Multilateral' , \u2003\u2003\u2003\u2003 source : 'Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC), Banco Central de la Rep\u00fablica Argentina (BCRA)' , \u2003\u2003\u2003\u2003 navigator : false }) }  Graph destacado con zoom: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"graph-zoom\" >   < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-zoom' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=33.2_ISAC_SIN_EDAD_0_M_23_56:percent_change_a_year_ago&last=12' , title : 'Indicador sint\u00e9tico de la actividad de la construcci\u00f3n (ISAC)' , source : 'Var % interanual. Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC)' , chartTypes : { \"33.2_ISAC_SIN_EDAD_0_M_23_56\" : \"column\" }, zoom : false , navigator : true , }) }  Graph destacado con navegador y zoom: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"graph-nav-zoom\" >   < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-nav-zoom' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=151.1_TL_SIN_TAC_2012_M_15,151.1_TL_ESTADAD_2012_M_20&last=12' , title : 'Cantidad de trabajadores registrados' , source : 'Cantidades. Fuente: Ministerio de Trabajo, Empleo y Seguridad Social' , legendField : 'description' , zoom : true , navigator : true }) }  Ejemplos Card + Graph: \ud83d\udd17 Indicador con Graph inferior asociado: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row\" > < div class = \"text-center\" id = \"graph-indicador1\" >  < div class = \"row\" > < div id = \"indicator-graph1\" >   < script > window . onload = function () { TSComponents . Card . render ( 'graph-indicador1' , { serieId : 'defensa_FAA_0006' , color : '#C62828' , hasChart : 'none' , title : \"\" , links : \"none\" , hasFrame : false , source : \"\" }) TSComponents . Graphic . render ( 'indicator-graph1' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=defensa_FAA_0006' , title : \"Personal Femenino en la Fuerza A\u00e9rea\" , source : \"Fuente: Ministerio de Defensa\" , colors : [ '#C62828' ] }) }  Indicador con Graph lateral asociado: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container row panels-row\" > < div id = 'graph-indicator2' >  < div style = \"width: 500px; height: 350px;\" id = 'indicator-graph2' >  < script > window . onload = function () { TSComponents . Card . render ( 'graph-indicator2' , { serieId : '148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago' , hasChart : \"small\" , title : \"Indicador IPC interanual\" }) TSComponents . Graphic . render ( 'indicator-graph2' , { graphicUrl : \"https://apis.datos.gob.ar/series/api/series?ids=148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\" , datePickerEnabled : false , zoom : false , title : \"Gr\u00e1fico IPC interanual\" , navigator : false , legendLabel : { \"148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\" : \"IPC (% interanual)\" } }) }  window.onload = function() { TSComponents.Card.render('indicador-min', { serieId: 'tcrse_QpvjK1:percent_change_a_year_ago', color: '#0072BB', hasChart: 'none', title: \"TCRSE. Otros Cultivos.\", links: \"none\", hasFrame: false, explicitSign: true, source: \"Fuente: Secretar\u00eda de la Transformaci\u00f3n Productiva\" }) TSComponents.Card.render('indicador-graph', { serieId: 'tmi_arg', color: '#2E7D33', hasChart: 'small', links: \"none\", hasFrame: false }) TSComponents.Card.render('indicador-click', { serieId: 'defensa_FAA_0006', color: '#C62828', hasChart: 'small', title: \"Personal Femenino en la Fuerza A\u00e9rea\", links: \"none\", }) TSComponents.Card.render('indicador-link', { serieId: '77.3_IEB_0_A_24', color: '#F9A822', hasChart: 'small', title: \"Exportaciones FOB a Brasil\", units: \"Millones de USD\", }) TSComponents.Graphic.render('graph-simple', { \u2003\u2003\u2003\u2003graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=143.3_NO_PR_2004_A_21:percent_change_a_year_ago,116.4_TCRZE_2015_D_36_4', \u2003\u2003\u2003\u2003zoom: false, \u2003\u2003\u2003\u2003chartTypes: {'143.3_NO_PR_2004_A_21:percent_change_a_year_ago': 'column'}, \u2003\u2003\u2003\u2003title: 'Nivel de Actividad y Tipo de Cambio Real Multilateral', \u2003\u2003\u2003\u2003source: 'Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC), Banco Central de la Rep\u00fablica Argentina (BCRA)', \u2003\u2003\u2003\u2003navigator: false }) TSComponents.Graphic.render('graph-zoom', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=33.2_ISAC_SIN_EDAD_0_M_23_56:percent_change_a_year_ago&last=12', title: 'Indicador sint\u00e9tico de la actividad de la construcci\u00f3n (ISAC)', source: 'Var % interanual. Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC)', chartTypes: { \"33.2_ISAC_SIN_EDAD_0_M_23_56\": \"column\" }, zoom: false, navigator: true, }) TSComponents.Graphic.render('graph-nav-zoom', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=151.1_TL_SIN_TAC_2012_M_15,151.1_TL_ESTADAD_2012_M_20&last=12', title: 'Cantidad de trabajadores registrados', source: 'Cantidades. Fuente: Ministerio de Trabajo, Empleo y Seguridad Social', legendField: 'description', zoom: true, navigator: true }) TSComponents.Card.render('graph-indicador1', { serieId: 'defensa_FAA_0006', color: '#C62828', hasChart: 'none', title: \"\", links: \"none\", hasFrame: false, source: \"\" }) TSComponents.Graphic.render('indicator-graph1', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=defensa_FAA_0006', title: \"Personal Femenino en la Fuerza A\u00e9rea\", source: \"Fuente: Ministerio de Defensa\", colors: ['#C62828'] }) TSComponents.Card.render('graph-indicator2', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago', hasChart: \"small\", title: \"Indicador IPC interanual\" }) TSComponents.Graphic.render('indicator-graph2', { graphicUrl: \"https://apis.datos.gob.ar/series/api/series?ids=148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\", datePickerEnabled: false, zoom: false, title: \"Gr\u00e1fico IPC interanual\", navigator: false, legendLabel: { \"148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\": \"IPC (% interanual)\" } }) }","title":"TSComponents: Ejemplos"},{"location":"reference/ts-components/examples/#ejemplos","text":"El prop\u00f3sito de este documento es mostrar ejemplos recomendados de implementar los componentes exportables (Card, Graphic). Para conocer la forma de implementar correctamente cada componente, referirse a la documentaci\u00f3n propia del mismo.","title":"Ejemplos:"},{"location":"reference/ts-components/examples/#ejemplos-card","text":"","title":"Ejemplos Card:"},{"location":"reference/ts-components/examples/#indicadores-destacado-minimo","text":"","title":"Indicadores destacado (m\u00ednimo):"},{"location":"reference/ts-components/examples/#ejemplo","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-min\" >   < script > window . onload = function () { TSComponents . Card . render ( 'indicador-min' , { serieId : 'tcrse_QpvjK1:percent_change_a_year_ago' , color : '#0072BB' , hasChart : 'none' , title : \"TCRSE. Otros Cultivos.\" , links : \"none\" , hasFrame : false , explicitSign : true , source : \"Fuente: Secretar\u00eda de la Transformaci\u00f3n Productiva\" }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#indicadores-destacado-con-mini-grafico","text":"","title":"Indicadores destacado (con mini-gr\u00e1fico):"},{"location":"reference/ts-components/examples/#ejemplo_1","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_1","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-graph\" >   < script > window . onload = function () { TSComponents . Card . render ( 'indicador-graph' , { serieId : 'tmi_arg' , color : '#2E7D33' , hasChart : 'small' , links : \"none\" , hasFrame : false }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#indicadores-destacado-con-tarjeta-clickeable","text":"","title":"Indicadores destacado (con tarjeta clickeable):"},{"location":"reference/ts-components/examples/#ejemplo_2","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_2","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-click\" >   < script > window . onload = function () { TSComponents . Card . render ( 'indicador-click' , { serieId : 'defensa_FAA_0006' , color : '#C62828' , hasChart : 'small' , title : \"Personal Femenino en la Fuerza A\u00e9rea\" , links : \"none\" , }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#indicadores-destacado-con-enlaces-de-descarga","text":"","title":"Indicadores destacado (con enlaces de descarga):"},{"location":"reference/ts-components/examples/#ejemplo_3","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_3","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-link\" >   < script > window . onload = function () { TSComponents . Card . render ( 'indicador-min' , { serieId : '77.3_IEB_0_A_24' , color : '#F9A822' , hasChart : 'small' , title : \"Exportaciones FOB a Brasil\" , units : \"Millones de USD\" , }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#ejemplos-graph","text":"","title":"Ejemplos Graph:"},{"location":"reference/ts-components/examples/#graph-destacado-simple","text":"","title":"Graph destacado simple:"},{"location":"reference/ts-components/examples/#ejemplo_4","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_4","text":"< div class = \"container\" > < div class = \"row\" > < div class = \"col-sm-12\" id = \"graph-simple\" >   < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-simple' , { \u2003\u2003\u2003\u2003 graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=143.3_NO_PR_2004_A_21:percent_change_a_year_ago,116.4_TCRZE_2015_D_36_4' , \u2003\u2003\u2003\u2003 zoom : false , \u2003\u2003\u2003\u2003 chartTypes : { '143.3_NO_PR_2004_A_21:percent_change_a_year_ago' : 'column' }, \u2003\u2003\u2003\u2003 title : 'Nivel de Actividad y Tipo de Cambio Real Multilateral' , \u2003\u2003\u2003\u2003 source : 'Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC), Banco Central de la Rep\u00fablica Argentina (BCRA)' , \u2003\u2003\u2003\u2003 navigator : false }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#graph-destacado-con-zoom","text":"","title":"Graph destacado con zoom:"},{"location":"reference/ts-components/examples/#ejemplo_5","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_5","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"graph-zoom\" >   < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-zoom' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=33.2_ISAC_SIN_EDAD_0_M_23_56:percent_change_a_year_ago&last=12' , title : 'Indicador sint\u00e9tico de la actividad de la construcci\u00f3n (ISAC)' , source : 'Var % interanual. Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC)' , chartTypes : { \"33.2_ISAC_SIN_EDAD_0_M_23_56\" : \"column\" }, zoom : false , navigator : true , }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#graph-destacado-con-navegador-y-zoom","text":"","title":"Graph destacado con navegador y zoom:"},{"location":"reference/ts-components/examples/#ejemplo_6","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_6","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"graph-nav-zoom\" >   < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-nav-zoom' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=151.1_TL_SIN_TAC_2012_M_15,151.1_TL_ESTADAD_2012_M_20&last=12' , title : 'Cantidad de trabajadores registrados' , source : 'Cantidades. Fuente: Ministerio de Trabajo, Empleo y Seguridad Social' , legendField : 'description' , zoom : true , navigator : true }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#ejemplos-card-graph","text":"","title":"Ejemplos Card + Graph:"},{"location":"reference/ts-components/examples/#indicador-con-graph-inferior-asociado","text":"","title":"Indicador con Graph inferior asociado:"},{"location":"reference/ts-components/examples/#ejemplo_7","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_7","text":"< div class = \"container\" > < div class = \"row\" > < div class = \"text-center\" id = \"graph-indicador1\" >  < div class = \"row\" > < div id = \"indicator-graph1\" >   < script > window . onload = function () { TSComponents . Card . render ( 'graph-indicador1' , { serieId : 'defensa_FAA_0006' , color : '#C62828' , hasChart : 'none' , title : \"\" , links : \"none\" , hasFrame : false , source : \"\" }) TSComponents . Graphic . render ( 'indicator-graph1' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=defensa_FAA_0006' , title : \"Personal Femenino en la Fuerza A\u00e9rea\" , source : \"Fuente: Ministerio de Defensa\" , colors : [ '#C62828' ] }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#indicador-con-graph-lateral-asociado","text":"","title":"Indicador con Graph lateral asociado:"},{"location":"reference/ts-components/examples/#ejemplo_8","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_8","text":"< div class = \"container row panels-row\" > < div id = 'graph-indicator2' >  < div style = \"width: 500px; height: 350px;\" id = 'indicator-graph2' >  < script > window . onload = function () { TSComponents . Card . render ( 'graph-indicator2' , { serieId : '148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago' , hasChart : \"small\" , title : \"Indicador IPC interanual\" }) TSComponents . Graphic . render ( 'indicator-graph2' , { graphicUrl : \"https://apis.datos.gob.ar/series/api/series?ids=148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\" , datePickerEnabled : false , zoom : false , title : \"Gr\u00e1fico IPC interanual\" , navigator : false , legendLabel : { \"148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\" : \"IPC (% interanual)\" } }) }  window.onload = function() { TSComponents.Card.render('indicador-min', { serieId: 'tcrse_QpvjK1:percent_change_a_year_ago', color: '#0072BB', hasChart: 'none', title: \"TCRSE. Otros Cultivos.\", links: \"none\", hasFrame: false, explicitSign: true, source: \"Fuente: Secretar\u00eda de la Transformaci\u00f3n Productiva\" }) TSComponents.Card.render('indicador-graph', { serieId: 'tmi_arg', color: '#2E7D33', hasChart: 'small', links: \"none\", hasFrame: false }) TSComponents.Card.render('indicador-click', { serieId: 'defensa_FAA_0006', color: '#C62828', hasChart: 'small', title: \"Personal Femenino en la Fuerza A\u00e9rea\", links: \"none\", }) TSComponents.Card.render('indicador-link', { serieId: '77.3_IEB_0_A_24', color: '#F9A822', hasChart: 'small', title: \"Exportaciones FOB a Brasil\", units: \"Millones de USD\", }) TSComponents.Graphic.render('graph-simple', { \u2003\u2003\u2003\u2003graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=143.3_NO_PR_2004_A_21:percent_change_a_year_ago,116.4_TCRZE_2015_D_36_4', \u2003\u2003\u2003\u2003zoom: false, \u2003\u2003\u2003\u2003chartTypes: {'143.3_NO_PR_2004_A_21:percent_change_a_year_ago': 'column'}, \u2003\u2003\u2003\u2003title: 'Nivel de Actividad y Tipo de Cambio Real Multilateral', \u2003\u2003\u2003\u2003source: 'Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC), Banco Central de la Rep\u00fablica Argentina (BCRA)', \u2003\u2003\u2003\u2003navigator: false }) TSComponents.Graphic.render('graph-zoom', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=33.2_ISAC_SIN_EDAD_0_M_23_56:percent_change_a_year_ago&last=12', title: 'Indicador sint\u00e9tico de la actividad de la construcci\u00f3n (ISAC)', source: 'Var % interanual. Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC)', chartTypes: { \"33.2_ISAC_SIN_EDAD_0_M_23_56\": \"column\" }, zoom: false, navigator: true, }) TSComponents.Graphic.render('graph-nav-zoom', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=151.1_TL_SIN_TAC_2012_M_15,151.1_TL_ESTADAD_2012_M_20&last=12', title: 'Cantidad de trabajadores registrados', source: 'Cantidades. Fuente: Ministerio de Trabajo, Empleo y Seguridad Social', legendField: 'description', zoom: true, navigator: true }) TSComponents.Card.render('graph-indicador1', { serieId: 'defensa_FAA_0006', color: '#C62828', hasChart: 'none', title: \"\", links: \"none\", hasFrame: false, source: \"\" }) TSComponents.Graphic.render('indicator-graph1', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=defensa_FAA_0006', title: \"Personal Femenino en la Fuerza A\u00e9rea\", source: \"Fuente: Ministerio de Defensa\", colors: ['#C62828'] }) TSComponents.Card.render('graph-indicator2', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago', hasChart: \"small\", title: \"Indicador IPC interanual\" }) TSComponents.Graphic.render('indicator-graph2', { graphicUrl: \"https://apis.datos.gob.ar/series/api/series?ids=148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\", datePickerEnabled: false, zoom: false, title: \"Gr\u00e1fico IPC interanual\", navigator: false, legendLabel: { \"148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\": \"IPC (% interanual)\" } }) }","title":"C\u00f3digo:"},{"location":"reference/ts-components/graphic/","text":"Componente: graphic \ud83d\udd17 El componente graphic permite embeber gr\u00e1ficos de l\u00edneas, \u00e1reas o barras en experiencias web. Permite elegir distintos elementos de filtro de fechas, personalizar los textos, etc. Ejemplo base \ud83d\udd17 Ver online: https://jsfiddle.net/tqjonaf9/ window.onload = function() { TSComponents.Graphic.render('tmi', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg', title: 'Tasa de Mortalidad Infantil de Argentina', source: 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' }) } Este gr\u00e1fico se genera a partir del siguiente c\u00f3digo:  < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js' >  < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/css/components.css' />  < div id = \"tmi\" >  < script > window . onload = function () { TSComponents . Graphic . render ( 'tmi' , { // Llamada a la API de Series de Tiempo graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg' , title : 'Tasa de Mortalidad Infantil de Argentina' , source : 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' }) }  Tabla de par\u00e1metros \ud83d\udd17 Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos graphicUrl Si URL completa del llamado a la API. string Ninguno https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg chartOptions No Cualquier opci\u00f3n v\u00e1lida para [Highcharts](https://api.highcharts.com/highcharts/). object {} navigator No Indica si est\u00e1 habilitada la funcionalidad de navegaci\u00f3n de la serie. boolean Din\u00e1mico true / false locale No Valores posibles: \"AR\" o \"US\" (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string AR AR o US zoom No Indica si tiene habilitada la funcionalidad de zoom. boolean Din\u00e1mico true / false exportable No Indica si tiene habilitada la funcionalidad de exportar el gr\u00e1fico. boolean Din\u00e1mico true / false colors No Paleta de colores alternativa a la default. Los c\u00f3digos 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\u00e1s abajo. list [\"#0072BB\", \"#2E7D33\", \"#C62828\", \"#F9A822\", \"#6A1B99\", \"#EC407A\", \"#C2185B\", \"#039BE5\", \"#6EA100\"] [0, 1, 2, 3, 4, 5, 6, 7, 8] [\"#2E7D33\", 2, \"#F9A822\"] backgroundColor No Color de fondo del gr\u00e1fico en formato hexadecimal. string #cdcdcd #cdcdcd datePickerEnabled No Indica si el selector de fechas est\u00e1 habilitado. boolean Din\u00e1mica true / false legendField No Indica el campo de la serie a usar para mostrar la leyenda. string 'title' \"title\", \"description\" o \"id\" chartTypes No Especifica el tipo de gr\u00e1fico a usar para cada serie < ./td> object 'line' para todas las series {'tmi_arg': 'column', 'tmi_02': 'line', 'tmi_06': 'area'} title No Especifica el t\u00edtulo el gr\u00e1fico. string Ninguno Tasa de Mortalidad Infantil de Argentina source No Especifica el texto al pie del gr\u00e1fico. string Ninguno Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud displayUnits No Indica si se muestran las unidades del gr\u00e1fico. boolean Din\u00e1mico true / false legendLabel No Especifica el texto a mostrar como leyenda por cada serie. object {} {'serie01': 'leyenda custom'} seriesAxis No Especifica de qu\u00e9 lado del gr\u00e1fico mostrar las ordenadas y unidades de cada serie representada. Puede haber m\u00e1s de una serie en un mismo lado. Si hay una sola serie, debe ir obligatoriamente del lado izquierdo. object {} {'serie01': 'right', 'serie02': 'left'} chartType No Especifica un tipo de gr\u00e1fico para aplicar a todas las series como default. En caso de estar especificado un tipo para una serie en chartTypes, este \u00faltimo ser\u00e1 priorizado para la misma. string 'line' 'line', 'area' o 'column' decimalLeftAxis No Especifica cu\u00e1ntos d\u00edgitos decimales tendr\u00e1n los valores de las ordenadas del eje izquierdo (principal) del gr\u00e1fico. int Ninguno 6 decimalRightAxis No Especifica cu\u00e1ntos d\u00edgitos decimales tendr\u00e1n los valores de las ordenadas del eje derecho (auxiliar) del gr\u00e1fico. int Ninguno 0 decimalTooltips No Especifica cu\u00e1ntos d\u00edgitos decimales mostrar\u00e1 el texto en el tooltip para cada serie, mapeando ids de series con cantidades de decimales. object Ninguno {'serie01': 4, 'serie02': 1} decimalTooltip No Especifica la cantidad de d\u00edgitos decimales a mostrar en el texto del tooltip para toda serie que no lo haya definido en el par\u00e1metro decimalTooltips. int Ninguno 3 Paleta de colores por defecto \ud83d\udd17 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 Asignaci\u00f3n din\u00e1mica de atributos \ud83d\udd17 Varios componentes del gr\u00e1fico se muestran/ocultan din\u00e1micamente dependiendo de su tama\u00f1o. Los componentes son din\u00e1micos, en tanto no se especifique su valor de inicializaci\u00f3n: Si un par\u00e1metro se especifica con valor true se muestra siempre. Si el par\u00e1metro es false no se muestra nunca. Si no se especifica, corren las siguientes reglas: zoom : Se muestra si el ancho es mayor o igual a 620px navigator : Se muestra si el ancho es mayor o igual a 500px datePickerEnabled : Se muestra si el ancho es mayor o igual a 400px displayUnits : Se muestra si el ancho es mayor o igual a 450px leyenda : Este no es un campo que se pueda ocultar mediante la API de TSComponents.Graphic , pero los valores de la leyenda se muestran s\u00f3lo si hay m\u00e1s de una serie aplicada. Ejemplo completo \ud83d\udd17 < html > < body > < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js' > < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/css/components.css' /> < div id = \"root\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'root' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg' , title : 'Tasa de Mortalidad Infantil de Argentina' , source : 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' , legendField : 'title' , chartType : 'area' , chartTypes : { 'tmi_arg' : 'column' }, zoom : true , datePickerEnabled : true , displayUnits : true exportable : true , navigator : false , backgroundColor : '#cdcdcd' , colors : [ '#cecece' , '#8d6b22' , '#62848d' ], locale : 'AR' , chartOptions : {}, legendLabel : { 'tmi_arg' : 'Tasa de mortalidad nacional' }, seriesAxis : { 'tmi_arg' : 'left' } }) }   ","title":"TSComponents: graphic"},{"location":"reference/ts-components/graphic/#componente-graphic","text":"El componente graphic permite embeber gr\u00e1ficos de l\u00edneas, \u00e1reas o barras en experiencias web. Permite elegir distintos elementos de filtro de fechas, personalizar los textos, etc.","title":"Componente: graphic"},{"location":"reference/ts-components/graphic/#ejemplo-base","text":"Ver online: https://jsfiddle.net/tqjonaf9/ window.onload = function() { TSComponents.Graphic.render('tmi', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg', title: 'Tasa de Mortalidad Infantil de Argentina', source: 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' }) } Este gr\u00e1fico se genera a partir del siguiente c\u00f3digo:  < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js' >  < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/css/components.css' />  < div id = \"tmi\" >  < script > window . onload = function () { TSComponents . Graphic . render ( 'tmi' , { // Llamada a la API de Series de Tiempo graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg' , title : 'Tasa de Mortalidad Infantil de Argentina' , source : 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' }) } ","title":"Ejemplo base"},{"location":"reference/ts-components/graphic/#tabla-de-parametros","text":"Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos graphicUrl Si URL completa del llamado a la API. string Ninguno https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg chartOptions No Cualquier opci\u00f3n v\u00e1lida para [Highcharts](https://api.highcharts.com/highcharts/). object {} navigator No Indica si est\u00e1 habilitada la funcionalidad de navegaci\u00f3n de la serie. boolean Din\u00e1mico true / false locale No Valores posibles: \"AR\" o \"US\" (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string AR AR o US zoom No Indica si tiene habilitada la funcionalidad de zoom. boolean Din\u00e1mico true / false exportable No Indica si tiene habilitada la funcionalidad de exportar el gr\u00e1fico. boolean Din\u00e1mico true / false colors No Paleta de colores alternativa a la default. Los c\u00f3digos 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\u00e1s abajo. list [\"#0072BB\", \"#2E7D33\", \"#C62828\", \"#F9A822\", \"#6A1B99\", \"#EC407A\", \"#C2185B\", \"#039BE5\", \"#6EA100\"] [0, 1, 2, 3, 4, 5, 6, 7, 8] [\"#2E7D33\", 2, \"#F9A822\"] backgroundColor No Color de fondo del gr\u00e1fico en formato hexadecimal. string #cdcdcd #cdcdcd datePickerEnabled No Indica si el selector de fechas est\u00e1 habilitado. boolean Din\u00e1mica true / false legendField No Indica el campo de la serie a usar para mostrar la leyenda. string 'title' \"title\", \"description\" o \"id\" chartTypes No Especifica el tipo de gr\u00e1fico a usar para cada serie < ./td> object 'line' para todas las series {'tmi_arg': 'column', 'tmi_02': 'line', 'tmi_06': 'area'} title No Especifica el t\u00edtulo el gr\u00e1fico. string Ninguno Tasa de Mortalidad Infantil de Argentina source No Especifica el texto al pie del gr\u00e1fico. string Ninguno Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud displayUnits No Indica si se muestran las unidades del gr\u00e1fico. boolean Din\u00e1mico true / false legendLabel No Especifica el texto a mostrar como leyenda por cada serie. object {} {'serie01': 'leyenda custom'} seriesAxis No Especifica de qu\u00e9 lado del gr\u00e1fico mostrar las ordenadas y unidades de cada serie representada. Puede haber m\u00e1s de una serie en un mismo lado. Si hay una sola serie, debe ir obligatoriamente del lado izquierdo. object {} {'serie01': 'right', 'serie02': 'left'} chartType No Especifica un tipo de gr\u00e1fico para aplicar a todas las series como default. En caso de estar especificado un tipo para una serie en chartTypes, este \u00faltimo ser\u00e1 priorizado para la misma. string 'line' 'line', 'area' o 'column' decimalLeftAxis No Especifica cu\u00e1ntos d\u00edgitos decimales tendr\u00e1n los valores de las ordenadas del eje izquierdo (principal) del gr\u00e1fico. int Ninguno 6 decimalRightAxis No Especifica cu\u00e1ntos d\u00edgitos decimales tendr\u00e1n los valores de las ordenadas del eje derecho (auxiliar) del gr\u00e1fico. int Ninguno 0 decimalTooltips No Especifica cu\u00e1ntos d\u00edgitos decimales mostrar\u00e1 el texto en el tooltip para cada serie, mapeando ids de series con cantidades de decimales. object Ninguno {'serie01': 4, 'serie02': 1} decimalTooltip No Especifica la cantidad de d\u00edgitos decimales a mostrar en el texto del tooltip para toda serie que no lo haya definido en el par\u00e1metro decimalTooltips. int Ninguno 3","title":"Tabla de par\u00e1metros"},{"location":"reference/ts-components/graphic/#paleta-de-colores-por-defecto","text":"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","title":"Paleta de colores por defecto"},{"location":"reference/ts-components/graphic/#asignacion-dinamica-de-atributos","text":"Varios componentes del gr\u00e1fico se muestran/ocultan din\u00e1micamente dependiendo de su tama\u00f1o. Los componentes son din\u00e1micos, en tanto no se especifique su valor de inicializaci\u00f3n: Si un par\u00e1metro se especifica con valor true se muestra siempre. Si el par\u00e1metro es false no se muestra nunca. Si no se especifica, corren las siguientes reglas: zoom : Se muestra si el ancho es mayor o igual a 620px navigator : Se muestra si el ancho es mayor o igual a 500px datePickerEnabled : Se muestra si el ancho es mayor o igual a 400px displayUnits : Se muestra si el ancho es mayor o igual a 450px leyenda : Este no es un campo que se pueda ocultar mediante la API de TSComponents.Graphic , pero los valores de la leyenda se muestran s\u00f3lo si hay m\u00e1s de una serie aplicada.","title":"Asignaci\u00f3n din\u00e1mica de atributos"},{"location":"reference/ts-components/graphic/#ejemplo-completo","text":"< html > < body > < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js' > < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/css/components.css' /> < div id = \"root\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'root' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg' , title : 'Tasa de Mortalidad Infantil de Argentina' , source : 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' , legendField : 'title' , chartType : 'area' , chartTypes : { 'tmi_arg' : 'column' }, zoom : true , datePickerEnabled : true , displayUnits : true exportable : true , navigator : false , backgroundColor : '#cdcdcd' , colors : [ '#cecece' , '#8d6b22' , '#62848d' ], locale : 'AR' , chartOptions : {}, legendLabel : { 'tmi_arg' : 'Tasa de mortalidad nacional' }, seriesAxis : { 'tmi_arg' : 'left' } }) }   ","title":"Ejemplo completo"}]}
\ No newline at end of file
diff --git a/docs/sitemap.xml b/docs/sitemap.xml
index fb7e169e..ea140e8b 100644
--- a/docs/sitemap.xml
+++ b/docs/sitemap.xml
@@ -2,42 +2,42 @@
 
     
      https://datos.gob.ar/series/docs/
-     2019-09-26
+     2019-09-30
      daily
     
     
      https://datos.gob.ar/series/reference/ts-explorer/
-     2019-09-26
+     2019-09-30
      daily
     
     
      https://datos.gob.ar/series/reference/ts-components/
-     2019-09-26
+     2019-09-30
      daily
     
     
      https://datos.gob.ar/series/reference/ts-components/graphic/
-     2019-09-26
+     2019-09-30
      daily
     
     
      https://datos.gob.ar/series/reference/ts-components/card/
-     2019-09-26
+     2019-09-30
      daily
     
     
      https://datos.gob.ar/series/reference/ts-components/examples/
-     2019-09-26
+     2019-09-30
      daily
     
     
      https://datos.gob.ar/series/developers/install/
-     2019-09-26
+     2019-09-30
      daily
     
     
      https://datos.gob.ar/series/developers/deploy/
-     2019-09-26
+     2019-09-30
      daily
     
 
\ No newline at end of file
diff --git a/docs/sitemap.xml.gz b/docs/sitemap.xml.gz
index 9b108e32..02b32b52 100644
Binary files a/docs/sitemap.xml.gz and b/docs/sitemap.xml.gz differ