Componentes

Series de tiempo

Las series de tiempo son indicadores numéricos con evolución temporal. Estos componentes se pueden usar con todas las series publicadas en la API de Series de Tiempo de la República Argentina.

Tarjetas

Sirven para mostrar el valor más reciente de un indicador.

Para usarlas debe importarse dos CSS's y un JS adicional:



                        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/css/components.css" type="text/css">

                        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" type="text/css">

                        <script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.2/dist/js/components.js'></script>

Debe ubicarse un div con un id en el html, y crear un objeto TSComponentes.Card en un script:



                        <div id='reservas-card'></div>
                      

window.onload = function() {
  TSComponents.Card.render('reservas-card', {
      serieId: '174.1_RRVAS_IDOS_0_0_36:percent_change',
    explicitSign: true,
      color: '#F9A822',
      hasChart: 'small',
      title: "Reservas Internacionales"
    })
}

Para que se vean mejor, conviene ubicar las tarjetas en una row y agregar algunos estilos:


<style>
.row cardtiempo {
    display: flex;
    justify-content: space-around;
}
</style>

<div class="row">
      <div id='reservas-card'></div>
</div>

Ver la documentación completa del objeto "Card".

Card: default


                                    <div class="row cardtiempo">
                                        <div id='reservas-card'></div>
                                        <div id='tn-card'></div>
                                        <div id='faafem-card'></div>
                                    </div>
                      

        TSComponents.Card.render('reservas-card', {
            serieId: '174.1_RRVAS_IDOS_0_0_36:percent_change',
            explicitSign: true,
            color: '#F9A822',
            hasChart: 'small',
            title: "Reservas Internacionales"
        })

        TSComponents.Card.render('tn-card', {
            serieId: '452.3_RESULTADO_RIO_0_M_18_54',
            hasChart: 'small',
            title: "Tasa de Natalidad de Argentina"
        })

        TSComponents.Card.render('faafem-card', {
            serieId: 'defensa_FAA_0006',
            color: '#EC407A',
            hasChart: 'small',
            title: "Personal femenino de la Fuerza Aérea"
        })

Card: menos links


                                    <div class="row cardtiempo">
                                        <div id='reservas-card-links2'></div>
                                        <div id='tn-card-links2'></div>
                                        <div id='faafem-card-links2'></div>
                                    </div>
                      

        TSComponents.Card.render('reservas-card-links2', {
            serieId: '174.1_RRVAS_IDOS_0_0_36:percent_change',
            explicitSign: true,
            color: '#F9A822',
            hasChart: 'small',
            links: "small",
            title: "Reservas Internacionales"
        })

        TSComponents.Card.render('tn-card-links2', {
            serieId: 'tn_arg',
            hasChart: 'small',
            links: "small",
            title: "Tasa de Natalidad de Argentina"
        })

        TSComponents.Card.render('faafem-card-links2', {
            serieId: 'defensa_FAA_0006',
            color: '#EC407A',
            hasChart: 'small',
            links: "small",
            title: "Personal femenino de la Fuerza Aérea"
        })

Card: sin links


                                    <div class="row cardtiempo">
                                        <div id='reservas-card-med'></div>
                                        <div id='tn-card-med'></div>
                                        <div id='faafem-card-med'></div>
                                    </div>
                      

        TSComponents.Card.render('reservas-card-med', {
            serieId: '174.1_RRVAS_IDOS_0_0_36:percent_change',
            explicitSign: true,
            color: '#F9A822',
            hasChart: 'small',
            links: "none",
            title: "Reservas Internacionales"
        })

        TSComponents.Card.render('tn-card-med', {
            serieId: 'tn_arg',
            hasChart: 'small',
            links: "none",
            title: "Tasa de Natalidad de Argentina",
            hasFrame: false
        })

        TSComponents.Card.render('faafem-card-med', {
            serieId: 'defensa_FAA_0006',
            color: '#EC407A',
            hasChart: 'small',
            links: "none",
            title: "Personal femenino de la Fuerza Aérea",
            hasColorBar: false
        })

Card: mínima


                                    <div class="row cardtiempo">
                                        <div id='reservas-card-min'></div>
                                        <div id='tn-card-min'></div>
                                        <div id='faafem-card-min'></div>
                                    </div>
                                    <div class="row">
                      

        TSComponents.Card.render('reservas-card-min', {
            serieId: '174.1_RRVAS_IDOS_0_0_36:percent_change',
            explicitSign: true,
            color: '#F9A822',
            links: 'none',
            hasChart: "none",
            title: "Reservas Internacionales"
        })

        TSComponents.Card.render('tn-card-min', {
            serieId: 'tn_arg',
            links: 'none',
            hasChart: "none",
            title: "Tasa de Natalidad de Argentina",
            hasColorBar: true
        })

        TSComponents.Card.render('faafem-card-min', {
            serieId: 'defensa_FAA_0006',
            color: '#EC407A',
            links: 'none',
            hasChart: "none",
            title: "Personal femenino de la Fuerza Aérea",
            hasFrame: true
        })

Card: mínima (eliminando elementos)


                                    <div class="row cardtiempo">
                                            <div id='reservas-card-min-xtreme'></div>
                                            <div id='tn-card-min-xtreme'></div>
                                            <div id='faafem-card-min-xtreme'></div>
                                    </div>

                      

        TSComponents.Card.render('reservas-card-min-xtreme', {
            serieId: '174.1_RRVAS_IDOS_0_0_36:percent_change',
            explicitSign: true,
            links: 'none',
            hasChart: "none",
            title: "",
            units: "",
            source: ""
        })

        TSComponents.Card.render('tn-card-min-xtreme', {
            serieId: 'tn_arg',
            links: 'none',
            hasChart: "none",
            title: "",
            units: "",
            source: "",
            hasColorBar: true
        })

        TSComponents.Card.render('faafem-card-min-xtreme', {
            serieId: 'defensa_FAA_0006',
            color: '#EC407A',
            links: 'none',
            hasChart: "none",
            title: "",
            units: "",
            source: "",
            hasFrame: true
        })

Gráficos

Sirven para mostrar la evolución temporal de un indicador.

Ver la documentación completa del objeto "Graphic".

Gráfico: completo




                                    <div class="row">
                                            <div class="col-sm-12" id="tsChartFull"></div>
                                    </div>

                      

        TSComponents.Graphic.render('tsChartFull', {
                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',
                zoom: true,
                chartTypes: {'143.3_NO_PR_2004_A_21:percent_change_a_year_ago': 'column'},
                title: 'Nivel de Actividad y Tipo de Cambio Real Multilateral',
                source: 'Fuente: Instituto Nacional de Estadística y Censos (INDEC), Banco Central de la República Argentina (BCRA)',
                navigator: true
        })


Gráfico: medio





                                    <div class="row">
                                            <div class="col-sm-6" id="tsChartSmall1"></div>
                                            <div class="col-sm-6" id="tsChartSmall2"></div>
                                    </div>
                      

        TSComponents.Graphic.render('tsChartSmall1', {
                graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=11.3_VMATC_2004_M_12:percent_change_a_year_ago,143.3_NO_PR_2004_A_21:percent_change_a_year_ago',
                zoom: false,
                datePickerEnabled: false,
                navigator: false,
                title: 'Apagando todos los elementos',
                chartTypes: { '11.3_VMATC_2004_M_12:percent_change_a_year_ago': 'area', '143.3_NO_PR_2004_A_21:percent_change_a_year_ago': 'area' },
                source: 'Fuente: Instituto Nacional de Estadística y Censos (INDEC)',
                legendLabel: { "11.3_VMATC_2004_M_12": "mi propio label", '143.3_NO_PR_2004_A_21': "el otro label" }
        })

        TSComponents.Graphic.render('tsChartSmall2', {
                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',
                title: 'Prendiendo todos los elementos',
                navigator: true,
                zoom: true,
                datePickerEnabled: true
        })


Gráfico: mínimo





                                    <div class="row" style="height: 400px">
                                            <div class="col-sm-4" id="tsChartMin1"></div>
                                            <div class="col-sm-4" id="tsChartMin2"></div>
                                            <div class="col-sm-4" id="tsChartMin4"></div>
                                    </div>
                      

        TSComponents.Graphic.render('tsChartMin1', {
            graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=33.2_I_2004_M_4',
            title: "Apagando todos los elementos",
            source: 'Fuente: Instituto Nacional de Estadística y Censos (INDEC)',
        })

        TSComponents.Graphic.render('tsChartMin2', {
            graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=143.3_NO_PR_2004_A_21:percent_change_a_year_ago',
            title: 'Prendiendo algunos elementos',
            zoom: true,
            datePickerEnabled: true,
            source: 'Fuente: Instituto Nacional de Estadística y Censos (INDEC)',
            chartTypes: { '143.3_NO_PR_2004_A_21': 'column' }
        })

        TSComponents.Graphic.render('tsChartMin4', {
            graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=14.2_E_M_2004_0_3',
            title: 'Sin fuente',
            zoom: false,
            datePickerEnabled: false
        })