Cómo hacer que las visualizaciones se correspondan con los filtros (con AngularJS)

★★★ Avanzado - Tiempo: 30 minutos

Con este tutorial aprenderá a crear diferentes opciones de visualizaciones para hacer que se correspondan con los filtros relacionados. Puede resultar especialmente útil con los gráficos, dado que en ocasiones estos se vuelven innecesarios una vez activados los filtros relacionados. Este tutorial será totalmente personalizable y reutilizable en cualquier panel o elemento de contenido creado con HTML/CSS en Opendatasoft.

../_images/module2_final.png

En este tutorial, aprenderá:

  • cómo utilizar la directiva AngularJS ng-if

  • cuándo y cómo utilizar el objeto context.parameters dentro de la directiva ng-if

REQUISITOS PREVIOS

  • Para probar este tutorial o integrar la configuración de ocultar/mostrar de los widgets en una página ya existente, debe tener acceso al back office de un portal Opendatasoft y disponer del permiso “Editar todas las páginas”.

  • Dado que este tutorial está categorizado con el nivel de dificultad “Avanzado”, suponemos que ya tiene los conocimientos suficientes de HTML y CSS para reconocer y entender sus estructuras y funcionamiento. No obstante, se explicarán en detalle otros elementos más técnicos.

  • Recomendamos vivamente seguir el tutorial con el conjunto de datos Shanghai World University Ranking, que se utiliza a lo largo de todo el tutorial. Sin embargo, si desea seguir el tutorial con otro conjunto de datos, tenga presente que deberá adaptar todos los pasos.

Mostrar todas las imágenes

Ocultar todas las imágenes

Crear la base

En este tutorial, crearemos una página formada por una visualización y su filtro de conjunto de datos relacionado, tomando como punto de partida el conjunto de datos Shanghai World University Ranking disponible en la red de datos de Opendatasoft.

1 + Comenzaremos la página añadiendo el código de widget de la visualización deseada. En este caso, hemos decidido visualizar un gráfico de dispersión que representa la lista de los 20 mejores países de la clasificación. Para cada uno de los países, el gráfico muestra su puntuación promedio.

Nota

Dependiendo de si prueba este tutorial en una página nueva o un panel ya existente, tal vez vea las etiquetas <div class="container"> y <div class="ods-box">: ambas son etiquetas predeterminadas que crean el marco predeterminado de cualquier página de Opendatasoft. Si quiere conservar este marco, asegúrese de añadir el código del tutorial entre estas etiquetas predeterminadas.

<div class="container">
   <div class="ods-box">

    <ods-dataset-context context="shanghaiworlduniversityrankingpublic" shanghaiworlduniversityrankingpublic-dataset="shanghai-world-university-ranking@public" shanghaiworlduniversityrankingpublic-parameters="{'sort':'world_rank'}">
    <ods-chart align-month="true">
       <ods-chart-query context="shanghaiworlduniversityrankingpublic" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>
    </ods-dataset-context>

   </div>
</div>
../_images/step114.png

2 + Antes de continuar, declare el contexto único de la página, con el widget odsDatasetContext. Con ello hacemos posible la interacción mutua de todos nuestros widgets (y siempre es la forma adecuada de construir un panel).

Importante

No olvide suprimir la etiqueta ods-dataset-context sobre el código del widget de gráfico. Asimismo, sustituya el nombre de contexto actual (aquí, shanghaiworlduniversityrankingpublic) por el nuevo (aquí, worlduniversityranking).

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

<div class="container">
   <div class="ods-box">

    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>

   </div>
</div>

</ods-dataset-context>
../_images/step28.png

3 + Añada un filtro relacionado con el conjunto de datos elegido, mediante el widget odsFacets. En este caso, hemos recuperado el filtro de país que ya está en una faceta existente del conjunto de datos publicado en Datos.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

<div class="container">
   <div class="ods-box">

    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

</ods-dataset-context>
../_images/step33.png

4 + Haga clic en Vista previa. Técnicamente, todo funciona bien: el gráfico se actualiza según la opción de filtro elegida. No obstante, el gráfico filtrado se vuelve totalmente innecesario, porque solo visualiza un punto.

../_images/step43.png

Necesitamos una visualización alternativa, que solo se visualizará si se utiliza el filtro. Esta visualización alternativa sustituirá al gráfico sin filtrar predeterminado que se vuelve innecesario una vez filtrado. ¡Adelante!

Añadir una visualización alternativa con AngularJS

5 + Antes de introducirnos en las expresiones y directivas AngularJS, vamos a añadir el código de widget de la visualización alternativa, justo bajo la primera. En este caso, hemos decidido visualizar un gráfico de columnas que representa la lista de las 10 mejores universidades de la clasificación. Para cada una de las universidades, el gráfico muestra su puntuación promedio. Tenga presente que este gráfico solo se visualizará cuando se utilice el filtro, lo que significa que el nuevo gráfico alternativo siempre mostrará las 10 mejores universidades por país seleccionado.

Importante

No olvide limpiar el código y sustituir el nombre de contexto por el que hemos declarado con anterioridad (consulte el paso 2).

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

<div class="container">
   <div class="ods-box">

    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>

   <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
   </ods-chart>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

</ods-dataset-context>
../_images/step53.png

6 + ¡Es la hora de AngularJS! Tendremos que añadir una directiva AngularJS a ambas visualizaciones: el gráfico predeterminado (el que NO se visualizará si se emplea el filtro) y el alternativo (el que SOLO se visualizará si se emplea el filtro). Puesto que cualquier directiva AngularJS debe añadirse en una etiqueta HTML, y viendo nuestro código, la mejor manera de hacerlo para mantener limpio el código es añadir etiquetas div. Delimite cada uno de los gráficos mediante etiquetas div.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

<div class="container">
   <div class="ods-box">

    <div>
    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>
    </div>

   <div>
   <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
   </ods-chart>
   </div>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

</ods-dataset-context>
../_images/step63.png

7 + ¡Ahora ya tenemos el lugar perfecto para escribir nuestras directivas AngularJS! Comenzaremos con el gráfico alternativo, el que solo se visualizará si se emplea el filtro. Para ello, tenemos que utilizar la directiva AngularJS ng-if. La directiva ng-if es una expresión condicional que determina si un elemento HTML debe visualizarse o no.

Veamos la sintaxis de la expresión que vamos a usar.

ng-if="mycontext.parameters['refine.field_ID']"

ng-if es la directiva AngularJS. Siempre va seguida de un signo de igual = que indica que lo que va a continuación es una expresión. Esta expresión será evaluada por la directiva y debe escribirse siempre entre comillas dobles ".

mycontext.parameters puede entenderse como un objeto que contiene una lista de parámetros relacionados con el contexto que actúan como filtros. La lista de parámetros debe escribirse entre corchetes [ ] y cada uno de los parámetros debe escribirse entre comillas simples '. Para este tutorial, como es el uso del filtro Country el que determinará qué opción de visualización de gráfico se mostrará, necesitamos que el objeto mycontext.parameters utilice el parámetro de filtro en nuestra expresión ng-if. mycontext debe sustituirse por el nombre del contexto de la página.

  • refine indica que utilizamos un parámetro de filtro.

  • .field_ID nos permite precisar qué filtro específico vamos a usar. field_ID debe sustituirse por el identificador técnico del campo empleado como filtro.

En definitiva, la sintaxis de ng-if puede leerse de este modo: “Si mycontext se filtra con field_ID, [visualizar los elementos HTML relacionados]”.

8 + Añada la directiva ng-if en la etiqueta div que delimita el gráfico alternativo. No olvide sustituir mycontext por el nombre del contexto de la página (consulte el paso 2) y field_ID por el identificador técnico del campo del conjunto de datos que utilizamos como filtro (consulte el paso 3). En este tutorial, mycontext se sustituye por worlduniversityranking y field_ID se sustituye por country.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

<div class="container">
   <div class="ods-box">

    <div>
      <ods-chart align-month="true">
         <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
             <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
             </ods-chart-serie>
         </ods-chart-query>
      </ods-chart>
    </div>

   <div ng-if="worlduniversityranking.parameters['refine.country']">
     <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>
   </div>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

</ods-dataset-context>
../_images/step82.png

9 + Haga clic en Vista previa: de forma predeterminada, nuestro gráfico alternativo está oculto. En cambio, cuando se usa el filtro, ¡aparece!

../_images/step93.png

10 + ¡Es el momento de hacer desaparecer el gráfico predeterminado cuando se usa el filtro (y visualizar el gráfico alternativo)! En último término, queremos que esta expresión haga justo lo contrario que la anterior. Por fortuna, hay una forma de conseguirlo sin necesidad de volver a escribir una nueva expresión. Tan solo tenemos que reutilizar la expresión anterior y añadir un único carácter al principio: un signo de exclamación !.

ng-if="! mycontext.parameters['refine.field_ID']"

Un signo de exclamación ! colocado al principio de una expresión invierte su comportamiento. En definitiva, esta expresión puede leerse así: “Si mycontext se filtra con field_ID, [NO visualizar los elementos HTML relacionados]”.

11 + Añada la directiva ng-if en la etiqueta div que delimita el primer gráfico predeterminado. No olvide sustituir mycontext y field_ID como en la expresión anterior (consulte el paso 8).

Nota

También puede copiar la directiva ng-if anterior con su expresión y añadir un ! al principio.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

<div class="container">
   <div class="ods-box">

    <div ng-if="! worlduniversityranking.parameters['refine.country']">
      <ods-chart align-month="true">
         <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
             <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
             </ods-chart-serie>
         </ods-chart-query>
      </ods-chart>
    </div>

   <div ng-if="worlduniversityranking.parameters['refine.country']">
     <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
     </ods-chart>
   </div>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

</ods-dataset-context>
../_images/step115.png

12 + Haga clic en Vista previa: ¡todo funciona a la perfección!

../_images/step122.png

Añadir los retoques finales

13 + ¡En este punto, solo resta mejorar el aspecto de la página! Vamos a organizar los elementos HTML con Bootstrap. Para este tutorial, usaremos una sola fila, que estará dividida en dos: la visualización aparecerá a la izquierda mientras se visualiza el filtro a la derecha. A tenor del tamaño de una visualización en comparación con el de una lista de filtros, utilizaremos 9 columnas para la visualización y 3 para los filtros.

Importante

Si no está familiarizado con Bootstrap y cómo permite organizar una página web, consulte nuestro tutorial “Cómo crear un panel (parte 2)” (sección “Dar formato al panel: organizar los widgets en filas y columnas”).

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

<div class="container">
   <div class="ods-box">

   <div class="row">

     <div class="col-md-9">
       <div ng-if="! worlduniversityranking.parameters['refine.country']">
         <ods-chart align-month="true">
           <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
             <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
             </ods-chart-serie>
          </ods-chart-query>
        </ods-chart>
      </div>

      <div ng-if="worlduniversityranking.parameters['refine.country']">
         <ods-chart align-month="true">
          <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
            <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
            </ods-chart-serie>
          </ods-chart-query>
         </ods-chart>
        </div>
      </div>

     <div class="col-md-3">
   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>
      </div>

   </div>

   </div>
</div>

</ods-dataset-context>
../_images/step133.png

14 + Por último, vamos a añadir títulos e indicaciones textuales para asegurarnos de que todo el mundo entiende el funcionamiento de la página y su contenido.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="shanghai-world-university-ranking@public">

<div class="container">
   <div class="ods-box">

   <div class="row">

     <div class="col-md-9">
    <div ng-if="! worlduniversityranking.parameters['refine.country']">
    <h2>
        Top 20 countries <i class="fa fa-globe" aria-hidden="true"></i>
    </h2>
    <h5>
        by average score
    </h5>
    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>
    </div>

   <div ng-if="worlduniversityranking.parameters['refine.country']">
   <h2>
       Top 10 university <i class="fa fa-university" aria-hidden="true"></i>
   </h2>
   <h5>
       by average score
   </h5>
   <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
   </ods-chart>
   </div>
      </div>

     <div class="col-md-3">
     <h3>
         Countries
     </h3>
     <h5>
         Pick a country to see its universities and scores
     </h5>
   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>
      </div>

   </div>

   </div>
</div>

</ods-dataset-context>
../_images/step143.png

¡ENHORABUENA!

Ha completado este tutorial, y ahora ya sabe cómo crear diferentes opciones de visualizaciones para hacer que se correspondan con los filtros de la página. ¡Y esperamos que se sienta lo suficientemente cómodo con el uso de ng-if y context.parameters para hacerlo por sí solo en adelante!