- Deprecated function: Use of "static" in callables is deprecated in Drupal\user\Entity\Role::postLoad() (line 172 of core/modules/user/src/Entity/Role.php).
Drupal\user\Entity\Role::postLoad(Object, Array) (Line: 423)
Drupal\Core\Entity\EntityStorageBase->postLoad(Array) (Line: 353)
Drupal\Core\Entity\EntityStorageBase->loadMultiple(Array) (Line: 16)
Drupal\user\RoleStorage->isPermissionInRoles('access site in maintenance mode', Array) (Line: 112)
Drupal\Core\Session\UserSession->hasPermission('access site in maintenance mode') (Line: 105)
Drupal\Core\Session\AccountProxy->hasPermission('access site in maintenance mode') (Line: 83)
Drupal\redirect\RedirectChecker->canRedirect(Object) (Line: 120)
Drupal\redirect\EventSubscriber\RedirectRequestSubscriber->onKernelRequestCheckRedirect(Object, 'kernel.request', Object)
call_user_func(Array, Object, 'kernel.request', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.request') (Line: 145)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-9874a217-43c5-4763-b440-89b4e7edbdca') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-9874a217-43c5-4763-b440-89b4e7edbdca') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-9874a217-43c5-4763-b440-89b4e7edbdca') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-9874a217-43c5-4763-b440-89b4e7edbdca') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-bcd73194-6cd2-45a9-8c38-a350b630e3c7') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-bcd73194-6cd2-45a9-8c38-a350b630e3c7') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-bcd73194-6cd2-45a9-8c38-a350b630e3c7') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-bcd73194-6cd2-45a9-8c38-a350b630e3c7') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-ab04bf9e-344c-43d1-bbbe-b1953b897e68') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-ab04bf9e-344c-43d1-bbbe-b1953b897e68') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-ab04bf9e-344c-43d1-bbbe-b1953b897e68') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-ab04bf9e-344c-43d1-bbbe-b1953b897e68') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-c09e77ca-4704-43a9-a164-23940204c628') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-c09e77ca-4704-43a9-a164-23940204c628') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-c09e77ca-4704-43a9-a164-23940204c628') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-c09e77ca-4704-43a9-a164-23940204c628') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-fff5203a-6bc9-4c69-8287-11763977fcec') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-fff5203a-6bc9-4c69-8287-11763977fcec') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-fff5203a-6bc9-4c69-8287-11763977fcec') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-fff5203a-6bc9-4c69-8287-11763977fcec') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-89fa48cc-ed58-4da6-8261-9196f2c038a9') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-89fa48cc-ed58-4da6-8261-9196f2c038a9') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-89fa48cc-ed58-4da6-8261-9196f2c038a9') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-89fa48cc-ed58-4da6-8261-9196f2c038a9') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-b3ed14f9-1507-4558-be80-7e904e9bbc07') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-b3ed14f9-1507-4558-be80-7e904e9bbc07') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-b3ed14f9-1507-4558-be80-7e904e9bbc07') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-b3ed14f9-1507-4558-be80-7e904e9bbc07') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-ef19c871-5a72-4585-b392-d2ea3860921c') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-ef19c871-5a72-4585-b392-d2ea3860921c') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-ef19c871-5a72-4585-b392-d2ea3860921c') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-ef19c871-5a72-4585-b392-d2ea3860921c') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-e4e785ae-027c-4da8-bc37-3590a902b218') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-e4e785ae-027c-4da8-bc37-3590a902b218') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-e4e785ae-027c-4da8-bc37-3590a902b218') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-e4e785ae-027c-4da8-bc37-3590a902b218') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-267b5ff1-45ce-4fea-bb72-8f87c3bab6f2') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-267b5ff1-45ce-4fea-bb72-8f87c3bab6f2') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-267b5ff1-45ce-4fea-bb72-8f87c3bab6f2') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-267b5ff1-45ce-4fea-bb72-8f87c3bab6f2') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-5fa586c2-0ac7-47ed-be39-ba7617e3990a') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-5fa586c2-0ac7-47ed-be39-ba7617e3990a') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-5fa586c2-0ac7-47ed-be39-ba7617e3990a') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-5fa586c2-0ac7-47ed-be39-ba7617e3990a') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-cd1f6586-6b0c-4715-a35b-79a52be88871') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-cd1f6586-6b0c-4715-a35b-79a52be88871') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-cd1f6586-6b0c-4715-a35b-79a52be88871') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-cd1f6586-6b0c-4715-a35b-79a52be88871') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-0823cd3c-18b3-4d12-b8ff-2d38c27c9f6c') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-0823cd3c-18b3-4d12-b8ff-2d38c27c9f6c') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-0823cd3c-18b3-4d12-b8ff-2d38c27c9f6c') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-0823cd3c-18b3-4d12-b8ff-2d38c27c9f6c') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-2c9686b7-ebaa-440b-a0d4-02962a4ef986') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-2c9686b7-ebaa-440b-a0d4-02962a4ef986') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-2c9686b7-ebaa-440b-a0d4-02962a4ef986') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-2c9686b7-ebaa-440b-a0d4-02962a4ef986') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-7b27c809-e40b-4c85-8e5f-f46c64501392') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-7b27c809-e40b-4c85-8e5f-f46c64501392') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-7b27c809-e40b-4c85-8e5f-f46c64501392') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-7b27c809-e40b-4c85-8e5f-f46c64501392') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-b0322380-525a-4fcc-b619-b943c06aac89') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-b0322380-525a-4fcc-b619-b943c06aac89') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-b0322380-525a-4fcc-b619-b943c06aac89') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-b0322380-525a-4fcc-b619-b943c06aac89') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-8df18089-cace-440d-b94f-7e9af181936e') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-8df18089-cace-440d-b94f-7e9af181936e') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-8df18089-cace-440d-b94f-7e9af181936e') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-8df18089-cace-440d-b94f-7e9af181936e') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-ea90261b-6fa8-4014-a6ff-d8a197c32b38') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-ea90261b-6fa8-4014-a6ff-d8a197c32b38') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-ea90261b-6fa8-4014-a6ff-d8a197c32b38') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-ea90261b-6fa8-4014-a6ff-d8a197c32b38') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-ec00b272-7573-44ab-ae14-4415dd0f9194') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-ec00b272-7573-44ab-ae14-4415dd0f9194') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-ec00b272-7573-44ab-ae14-4415dd0f9194') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-ec00b272-7573-44ab-ae14-4415dd0f9194') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-dbb3bb35-e14a-4815-80e8-ac448247c69e') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-dbb3bb35-e14a-4815-80e8-ac448247c69e') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-dbb3bb35-e14a-4815-80e8-ac448247c69e') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-dbb3bb35-e14a-4815-80e8-ac448247c69e') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-a9dbe2a0-4b7e-4d23-a251-fb84b7a6aa91') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-a9dbe2a0-4b7e-4d23-a251-fb84b7a6aa91') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-a9dbe2a0-4b7e-4d23-a251-fb84b7a6aa91') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-a9dbe2a0-4b7e-4d23-a251-fb84b7a6aa91') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-e0f02db1-eb13-4793-a9db-95aafbc3536a') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-e0f02db1-eb13-4793-a9db-95aafbc3536a') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-e0f02db1-eb13-4793-a9db-95aafbc3536a') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-e0f02db1-eb13-4793-a9db-95aafbc3536a') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-6a9534fb-cbc1-41e9-8fbf-1d0859925b93') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-6a9534fb-cbc1-41e9-8fbf-1d0859925b93') (Line: 95)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'file') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-6a9534fb-cbc1-41e9-8fbf-1d0859925b93') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('entity_query') (Line: 147)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 640)
Drupal\Core\Entity\EntityStorageBase->loadByProperties(Array) (Line: 63)
Drupal\Core\Entity\EntityRepository->loadEntityByUuid('file', 'insert-max_800_px-6a9534fb-cbc1-41e9-8fbf-1d0859925b93') (Line: 124)
Drupal\editor\Plugin\Filter\EditorFileReference->process('Las <strong>segmentaciones</strong> o <strong>slicers</strong> son una de las visualizaciones que más prácticas resultan pues permiten al usuario de nuestro informe (seamos nosotros o no) segmentar los datos del informe según el criterio controlado por la segmentación. Su panel de campos es sumamente simple:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_01.jpg"></a>
El único campo disponible (cuyo nombre es <em>Campo</em>), recibirá el campo (no se aceptan medidas) por cuyos valores se desea segmentar la información mostrada en el informe.
Por ejemplo, creemos una visualización de este tipo y llevemos el campo Country de nuestro modelo de datos al campo mencionado en esta visualización. Por defecto nos muestra un listado de los distintos valores que toma dicho campo, junto a casillas de selección que nos permiten seleccionar la opción que nos interesa (para visualizar mejor el efecto de la segmentación se incluye un mapa a su derecha mostrando las ventas por país):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_02.jpg"></a>
Vemos que se incluye una opción "(En blanco)" aun cuando no hay ventas que no tengan un país asociado.
Con un clic en alguna de las casillas de selección seleccionamos la opción que corresponda (y solo esa). Es decir, por defecto solo se admite una casilla seleccionada:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_03.jpg"></a>
Podemos presionar la tecla <em>Control</em> mientras seleccionamos una opción para añadirla a la que ya exista. Otra forma de permitir selecciones múltiples es activar la opción Formato > Controles de selección > Selección única:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_04.jpg"></a>
En este caso, al haber seleccionado explícitamente los países que nos interesan, si en una actualización de los datos se añadiese un nuevo país, por defecto éste no se incluiría en la selección.
También podemos activar la opción de <em>Mostrar opción "Seleccionar todo"</em> en <em>Formato > Controles de selección,</em> en cuyo caso se mostrará también esta opción en el listado anterior:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_05.jpg"></a>
Si hacemos clic en esta opción se seleccionan todas las demás, y la opción de "<em>Seleccionar todo</em>" queda marcada con un punto indicando que, a partir de ese momento, estamos aplicando un filtro negativo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_06.jpg"></a>
Ahora, un clic en alguna de las restantes opciones la elimina del conjunto de valores seleccionados:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_07.jpg"></a>
Esto supone, por ejemplo, que si en una actualización de datos se añadiese un nuevo país, éste sí se seleccionaría por defecto (la segmentación anterior puede interpretarse como "selecciona todos los países menos Italia").
Un clic en el icono <em>Borrar selecciones</em> que se muestra en la parte superior de la visualización deselecciona todo (lo que supone que no se aplique ningún filtro a los países):
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_08.jpg"></a>
A la derecha del icono anterior se muestra otro con aspecto de triángulo invertido, que nos permite modificar el tipo de interfaz mostrada por la visualización:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_09.jpg"></a>
Por defecto, la visualización muestra una interfaz tipo <em>Lista</em>. Si la cambiamos a <em>Menú desplegable</em> mostrará el siguiente aspecto:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_10.jpg"></a>
Un clic en el texto <em>Todas</em> o en el triángulo invertido mostrado abrirá un menú con el listado de opciones.
Si hacemos clic en los tres puntos que se muestran en el extremo superior de la visualización se muestran opciones adicionales:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_11.jpg"></a>
Así, si seleccionamos la opción Buscar veremos cómo se muestra en la parte superior del listado de países un campo de búsqueda, vacío por defecto. A medida que escribamos cualquier texto en este campo, las opciones incluidas en el listado se irán filtrando para mostrar solo aquellas que incluyan el texto introducido, lo que resulta muy útil en el caso de que tengamos un listado de valores especialmente largo:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_12.jpg"></a>
Un nuevo clic en los tres puntos y otro en <em>Buscar</em> oculta el campo de búsqueda.
Una opción muy útil es la de seleccionar la "orientación" de nuestra visualización, opción que podemos encontrar en <em>Formato > General > Orientación</em>. La opción por defecto es <em>Vertical</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_13.jpg"></a>
Hay que comentar que el nombre de esta opción no está nada bien escogido: "<em>Vertical</em>" quiere decir en realidad que el listado se va a mostrar en vertical y no se va a adaptar al tamaño de la visualización. La opción "<em>Horizontal</em>", por el contrario, significa que el listado se mostrará como un panel de botones en vertical o en horizontal en función del tamaño de la visualización. Por ejemplo, seleccionemos esta opción ("<em>Horizontal</em>") y estiremos la visualización hacia abajo (para hacerla muy alta y con el mismo ancho que tenía). Las opciones se muestran como botones en vertical, y un clic en uno de los botones lo selecciona, tal y como ocurría antes:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_14.jpg"></a>
Estaremos de acuerdo en que este formato no tiene mucho de "horizontal"...
Ahora, si ahora redimensionamos la visualización para que sea muy ancho y poco alta, el resultado es el siguiente:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_15.jpg"></a>
Es posible personalizar los colores de los botones y del texto que se muestra en ellos en <em>Formato > Elementos</em>:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_17.jpg"></a>
En la imagen anterior también se ha eliminado el texto ("<em>Country</em>") que se muestra por defecto en la esquina superior izquierda de la visualización (<em>Formato > Encabezado de segmentación</em>).
Con independencia del nombre de esta opción, resulta extremadamente útil y atractiva para crear menús que permitan al usuario del informe la fácil segmentación de los datos.
En el caso de que el campo a utilizar en la segmentación sea un campo de tipo fecha, las opciones aumentan. Por defecto se muestra en el lienzo una segmentación de tipo <em>slider</em>, que nos permite pinchar y arrastrar cualquiera de los dos extremos con el objetivo de especificar la primera y última fecha a incluir en el informe:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_18.jpg"></a>
Al hacer clic en alguno de los dos recuadros que indican la fecha seleccionada, se abre un calendario que nos permite buscar cómodamente la fecha de interés:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_19.jpg"></a>
Un clic en la etiqueta del mes o del año nos abre un listado vertical que nos permite desplazarnos rápidamente por el calendario:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_20.jpg"></a>
También es posible escribir directamente la fecha de interés en los recuadros comentados.
Se ha comentado que, por defecto, la visualización muestra una segmentación tipo <em>slider</em>. Pues bien, un clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha de la visualización nos muestra el resto de opciones disponibles:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_21.jpg"></a>
El nombre de la opción por defecto es <em>Entre</em>, pero podemos escoger la opción <em>Anterior a</em>, que nos permitirá escoger únicamente una fecha, seleccionando todas las anteriores, <em>Posterior a</em>, semejante a la anterior, <em>Lista</em>, mostrando un listado de fechas:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_22.jpg"></a>
...<em>Menú desplegable</em>, semejante a la opción anterior pero en la que el listado de fechas se muestra como un menú que se abre al hacer clic en la visualización, y <em>Relativa</em>, opción muy útil que nos permite seleccionar fechas relativas a "algo". Ese "algo" puede ser el último período de tiempo, el siguiente o el actual, y una vez determinado este período de referencia, podemos escoger los N períodos que nos interesen, ya sean días, meses, años...:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_23.jpg"></a>
Si el campo que llevamos a la segmentación es de tipo numérico, se nos muestra una interfaz semejante a la de las fechas. En la siguiente imagen, por ejemplo, se ha llevado al campo <em>Campos</em> de la visualización el campo <em>Amount</em> que define el montante de cada venta:
<a class="colorbox insert-colorbox" data-colorbox-gallery="gallery-node" data-insert-class="" data-insert-type="image" href="/sites/default/files/2019-09/slicer_24.jpg"></a>
Al igual que con las fechas, podemos pinchar y arrastrar los extremos para limitar los valores incluidos en la selección, escribir directamente la cifra en el recuadro, hacer clic en el icono con forma de triángulo invertido que se muestra en la esquina superior derecha para visualizar otras opciones disponibles (<em>Entre</em>, <em>Menor o igual que</em>, etc.).
En función del campo que se esté utilizando para la segmentación (si es numérico o categórico) la visualización nos ofrece ciertas opciones adicionales para personalizar la visualización (colores, etc.).
En resumen, se trata de una visualización extremadamente útil y muy versátil.
', 'es') (Line: 118)
Drupal\filter\Element\ProcessedText::preRenderText(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 88)
__TwigTemplate_a7d6005c89ae729617b9a0c2bccb1776->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 46)
__TwigTemplate_804f7948456cfe20e11a34c43439c7c2->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array, Array) (Line: 43)
__TwigTemplate_bd990293b89f3b78c69fe0ee2f7828b5->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/contrib/classy/templates/field/field--text-with-summary.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('field', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 446)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 479)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 74)
__TwigTemplate_94047fbdba6937b76a4479dfa1763452->doDisplay(Array, Array) (Line: 405)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 378)
Twig\Template->display(Array) (Line: 390)
Twig\Template->render(Array) (Line: 55)
twig_render_template('themes/custom/yg_aesthetic/templates/node.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('node', Array) (Line: 433)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 242)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 235)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Return type of Drupal\google_analytics\Component\Render\GoogleAnalyticsJavaScriptSnippet::jsonSerialize() should either be compatible with JsonSerializable::jsonSerialize(): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in include() (line 10 of modules/contrib/google_analytics/src/Component/Render/GoogleAnalyticsJavaScriptSnippet.php).
include('/var/www/vhosts/interactivechaos.ovh/httpdocs/modules/contrib/google_analytics/src/Component/Render/GoogleAnalyticsJavaScriptSnippet.php') (Line: 578)
Composer\Autoload\ClassLoader::Composer\Autoload\{closure}('/var/www/vhosts/interactivechaos.ovh/httpdocs/modules/contrib/google_analytics/src/Component/Render/GoogleAnalyticsJavaScriptSnippet.php') (Line: 432)
Composer\Autoload\ClassLoader->loadClass('Drupal\google_analytics\Component\Render\GoogleAnalyticsJavaScriptSnippet') (Line: 372)
google_analytics_page_attachments(Array) (Line: 313)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}(Object, 'google_analytics') (Line: 405)
Drupal\Core\Extension\ModuleHandler->invokeAllWith('page_attachments', Object) (Line: 310)
Drupal\Core\Render\MainContent\HtmlRenderer->invokePageAttachmentHooks(Array) (Line: 288)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Use of "static" in callables is deprecated in Drupal\user\Entity\Role::postLoad() (line 172 of core/modules/user/src/Entity/Role.php).
Drupal\user\Entity\Role::postLoad(Object, Array) (Line: 423)
Drupal\Core\Entity\EntityStorageBase->postLoad(Array) (Line: 353)
Drupal\Core\Entity\EntityStorageBase->loadMultiple() (Line: 126)
eu_cookie_compliance_page_attachments(Array) (Line: 313)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}(Object, 'eu_cookie_compliance') (Line: 405)
Drupal\Core\Extension\ModuleHandler->invokeAllWith('page_attachments', Object) (Line: 310)
Drupal\Core\Render\MainContent\HtmlRenderer->invokePageAttachmentHooks(Array) (Line: 288)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 174)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\views\ManyToOneHelper::$handler is deprecated in Drupal\views\ManyToOneHelper->__construct() (line 24 of core/modules/views/src/ManyToOneHelper.php).
Drupal\views\ManyToOneHelper->__construct(Object) (Line: 51)
Drupal\views\Plugin\views\filter\ManyToOne->defineOptions() (Line: 117)
Drupal\taxonomy\Plugin\views\filter\TaxonomyIndexTid->defineOptions() (Line: 141)
Drupal\views\Plugin\views\PluginBase->init(Object, Object, Array) (Line: 104)
Drupal\views\Plugin\views\HandlerBase->init(Object, Object, Array) (Line: 95)
Drupal\views\Plugin\views\filter\FilterPluginBase->init(Object, Object, Array) (Line: 44)
Drupal\views\Plugin\views\filter\InOperator->init(Object, Object, Array) (Line: 36)
Drupal\views\Plugin\views\filter\ManyToOne->init(Object, Object, Array) (Line: 98)
Drupal\taxonomy\Plugin\views\filter\TaxonomyIndexTid->init(Object, Object, Array) (Line: 894)
Drupal\views\Plugin\views\display\DisplayPluginBase->getHandlers('filter') (Line: 1045)
Drupal\views\ViewExecutable->_initHandler('filter', Array) (Line: 903)
Drupal\views\ViewExecutable->initHandlers() (Line: 2633)
Drupal\views\Plugin\views\display\DisplayPluginBase->viewExposedFormBlocks() (Line: 35)
Drupal\views\Plugin\Block\ViewsExposedFilterBlock->build() (Line: 171)
Drupal\block\BlockViewBuilder::preRender(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 160)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 159)
Drupal\Core\Render\Renderer->renderPlain(Array) (Line: 175)
Drupal\Core\Render\Renderer->renderPlaceholder('', Array) (Line: 665)
Drupal\Core\Render\Renderer->replacePlaceholders(Array) (Line: 550)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 148)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 147)
Drupal\Core\Render\Renderer->renderRoot(Array) (Line: 279)
Drupal\Core\Render\HtmlResponseAttachmentsProcessor->renderPlaceholders(Object) (Line: 71)
Drupal\big_pipe\Render\BigPipeResponseAttachmentsProcessor->processAttachments(Object) (Line: 45)
Drupal\Core\EventSubscriber\HtmlResponseSubscriber->onRespond(Object, 'kernel.response', Object)
call_user_func(Array, Object, 'kernel.response', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.response') (Line: 202)
Symfony\Component\HttpKernel\HttpKernel->filterResponse(Object, Object, 1) (Line: 190)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\views\ManyToOneHelper::$handler is deprecated in Drupal\views\ManyToOneHelper->__construct() (line 24 of core/modules/views/src/ManyToOneHelper.php).
Drupal\views\ManyToOneHelper->__construct(Object) (Line: 51)
Drupal\views\Plugin\views\filter\ManyToOne->defineOptions() (Line: 117)
Drupal\taxonomy\Plugin\views\filter\TaxonomyIndexTid->defineOptions() (Line: 228)
Drupal\views\Plugin\views\PluginBase->unpackOptions(Array, Array) (Line: 144)
Drupal\views\Plugin\views\PluginBase->init(Object, Object, Array) (Line: 104)
Drupal\views\Plugin\views\HandlerBase->init(Object, Object, Array) (Line: 95)
Drupal\views\Plugin\views\filter\FilterPluginBase->init(Object, Object, Array) (Line: 44)
Drupal\views\Plugin\views\filter\InOperator->init(Object, Object, Array) (Line: 36)
Drupal\views\Plugin\views\filter\ManyToOne->init(Object, Object, Array) (Line: 98)
Drupal\taxonomy\Plugin\views\filter\TaxonomyIndexTid->init(Object, Object, Array) (Line: 894)
Drupal\views\Plugin\views\display\DisplayPluginBase->getHandlers('filter') (Line: 1045)
Drupal\views\ViewExecutable->_initHandler('filter', Array) (Line: 903)
Drupal\views\ViewExecutable->initHandlers() (Line: 2633)
Drupal\views\Plugin\views\display\DisplayPluginBase->viewExposedFormBlocks() (Line: 35)
Drupal\views\Plugin\Block\ViewsExposedFilterBlock->build() (Line: 171)
Drupal\block\BlockViewBuilder::preRender(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 160)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 159)
Drupal\Core\Render\Renderer->renderPlain(Array) (Line: 175)
Drupal\Core\Render\Renderer->renderPlaceholder('', Array) (Line: 665)
Drupal\Core\Render\Renderer->replacePlaceholders(Array) (Line: 550)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 148)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 147)
Drupal\Core\Render\Renderer->renderRoot(Array) (Line: 279)
Drupal\Core\Render\HtmlResponseAttachmentsProcessor->renderPlaceholders(Object) (Line: 71)
Drupal\big_pipe\Render\BigPipeResponseAttachmentsProcessor->processAttachments(Object) (Line: 45)
Drupal\Core\EventSubscriber\HtmlResponseSubscriber->onRespond(Object, 'kernel.response', Object)
call_user_func(Array, Object, 'kernel.response', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.response') (Line: 202)
Symfony\Component\HttpKernel\HttpKernel->filterResponse(Object, Object, 1) (Line: 190)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\views\ManyToOneHelper::$handler is deprecated in Drupal\views\ManyToOneHelper->__construct() (line 24 of core/modules/views/src/ManyToOneHelper.php).
Drupal\views\ManyToOneHelper->__construct(Object) (Line: 51)
Drupal\views\Plugin\views\filter\ManyToOne->defineOptions() (Line: 117)
Drupal\taxonomy\Plugin\views\filter\TaxonomyIndexTid->defineOptions() (Line: 228)
Drupal\views\Plugin\views\PluginBase->unpackOptions(Array, Array) (Line: 110)
Drupal\views\Plugin\views\HandlerBase->init(Object, Object, Array) (Line: 95)
Drupal\views\Plugin\views\filter\FilterPluginBase->init(Object, Object, Array) (Line: 44)
Drupal\views\Plugin\views\filter\InOperator->init(Object, Object, Array) (Line: 36)
Drupal\views\Plugin\views\filter\ManyToOne->init(Object, Object, Array) (Line: 98)
Drupal\taxonomy\Plugin\views\filter\TaxonomyIndexTid->init(Object, Object, Array) (Line: 894)
Drupal\views\Plugin\views\display\DisplayPluginBase->getHandlers('filter') (Line: 1045)
Drupal\views\ViewExecutable->_initHandler('filter', Array) (Line: 903)
Drupal\views\ViewExecutable->initHandlers() (Line: 2633)
Drupal\views\Plugin\views\display\DisplayPluginBase->viewExposedFormBlocks() (Line: 35)
Drupal\views\Plugin\Block\ViewsExposedFilterBlock->build() (Line: 171)
Drupal\block\BlockViewBuilder::preRender(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 160)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 159)
Drupal\Core\Render\Renderer->renderPlain(Array) (Line: 175)
Drupal\Core\Render\Renderer->renderPlaceholder('', Array) (Line: 665)
Drupal\Core\Render\Renderer->replacePlaceholders(Array) (Line: 550)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 148)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 147)
Drupal\Core\Render\Renderer->renderRoot(Array) (Line: 279)
Drupal\Core\Render\HtmlResponseAttachmentsProcessor->renderPlaceholders(Object) (Line: 71)
Drupal\big_pipe\Render\BigPipeResponseAttachmentsProcessor->processAttachments(Object) (Line: 45)
Drupal\Core\EventSubscriber\HtmlResponseSubscriber->onRespond(Object, 'kernel.response', Object)
call_user_func(Array, Object, 'kernel.response', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.response') (Line: 202)
Symfony\Component\HttpKernel\HttpKernel->filterResponse(Object, Object, 1) (Line: 190)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\views\ManyToOneHelper::$handler is deprecated in Drupal\views\ManyToOneHelper->__construct() (line 24 of core/modules/views/src/ManyToOneHelper.php).
Drupal\views\ManyToOneHelper->__construct(Object) (Line: 38)
Drupal\views\Plugin\views\filter\ManyToOne->init(Object, Object, Array) (Line: 98)
Drupal\taxonomy\Plugin\views\filter\TaxonomyIndexTid->init(Object, Object, Array) (Line: 894)
Drupal\views\Plugin\views\display\DisplayPluginBase->getHandlers('filter') (Line: 1045)
Drupal\views\ViewExecutable->_initHandler('filter', Array) (Line: 903)
Drupal\views\ViewExecutable->initHandlers() (Line: 2633)
Drupal\views\Plugin\views\display\DisplayPluginBase->viewExposedFormBlocks() (Line: 35)
Drupal\views\Plugin\Block\ViewsExposedFilterBlock->build() (Line: 171)
Drupal\block\BlockViewBuilder::preRender(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 160)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 159)
Drupal\Core\Render\Renderer->renderPlain(Array) (Line: 175)
Drupal\Core\Render\Renderer->renderPlaceholder('', Array) (Line: 665)
Drupal\Core\Render\Renderer->replacePlaceholders(Array) (Line: 550)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 148)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 147)
Drupal\Core\Render\Renderer->renderRoot(Array) (Line: 279)
Drupal\Core\Render\HtmlResponseAttachmentsProcessor->renderPlaceholders(Object) (Line: 71)
Drupal\big_pipe\Render\BigPipeResponseAttachmentsProcessor->processAttachments(Object) (Line: 45)
Drupal\Core\EventSubscriber\HtmlResponseSubscriber->onRespond(Object, 'kernel.response', Object)
call_user_func(Array, Object, 'kernel.response', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.response') (Line: 202)
Symfony\Component\HttpKernel\HttpKernel->filterResponse(Object, Object, 1) (Line: 190)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\views\ManyToOneHelper::$handler is deprecated in Drupal\views\ManyToOneHelper->__construct() (line 24 of core/modules/views/src/ManyToOneHelper.php).
Drupal\views\ManyToOneHelper->__construct(Object) (Line: 51)
Drupal\views\Plugin\views\filter\ManyToOne->defineOptions() (Line: 117)
Drupal\taxonomy\Plugin\views\filter\TaxonomyIndexTid->defineOptions() (Line: 141)
Drupal\views\Plugin\views\PluginBase->init(Object, Object, Array) (Line: 104)
Drupal\views\Plugin\views\HandlerBase->init(Object, Object, Array) (Line: 95)
Drupal\views\Plugin\views\filter\FilterPluginBase->init(Object, Object, Array) (Line: 44)
Drupal\views\Plugin\views\filter\InOperator->init(Object, Object, Array) (Line: 36)
Drupal\views\Plugin\views\filter\ManyToOne->init(Object, Object, Array) (Line: 98)
Drupal\taxonomy\Plugin\views\filter\TaxonomyIndexTid->init(Object, Object, Array) (Line: 894)
Drupal\views\Plugin\views\display\DisplayPluginBase->getHandlers('filter') (Line: 1045)
Drupal\views\ViewExecutable->_initHandler('filter', Array) (Line: 903)
Drupal\views\ViewExecutable->initHandlers() (Line: 2633)
Drupal\views\Plugin\views\display\DisplayPluginBase->viewExposedFormBlocks() (Line: 35)
Drupal\views\Plugin\Block\ViewsExposedFilterBlock->build() (Line: 171)
Drupal\block\BlockViewBuilder::preRender(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 160)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 159)
Drupal\Core\Render\Renderer->renderPlain(Array) (Line: 175)
Drupal\Core\Render\Renderer->renderPlaceholder('', Array) (Line: 665)
Drupal\Core\Render\Renderer->replacePlaceholders(Array) (Line: 550)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 148)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 147)
Drupal\Core\Render\Renderer->renderRoot(Array) (Line: 279)
Drupal\Core\Render\HtmlResponseAttachmentsProcessor->renderPlaceholders(Object) (Line: 71)
Drupal\big_pipe\Render\BigPipeResponseAttachmentsProcessor->processAttachments(Object) (Line: 45)
Drupal\Core\EventSubscriber\HtmlResponseSubscriber->onRespond(Object, 'kernel.response', Object)
call_user_func(Array, Object, 'kernel.response', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.response') (Line: 202)
Symfony\Component\HttpKernel\HttpKernel->filterResponse(Object, Object, 1) (Line: 190)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\views\ManyToOneHelper::$handler is deprecated in Drupal\views\ManyToOneHelper->__construct() (line 24 of core/modules/views/src/ManyToOneHelper.php).
Drupal\views\ManyToOneHelper->__construct(Object) (Line: 51)
Drupal\views\Plugin\views\filter\ManyToOne->defineOptions() (Line: 117)
Drupal\taxonomy\Plugin\views\filter\TaxonomyIndexTid->defineOptions() (Line: 228)
Drupal\views\Plugin\views\PluginBase->unpackOptions(Array, Array) (Line: 144)
Drupal\views\Plugin\views\PluginBase->init(Object, Object, Array) (Line: 104)
Drupal\views\Plugin\views\HandlerBase->init(Object, Object, Array) (Line: 95)
Drupal\views\Plugin\views\filter\FilterPluginBase->init(Object, Object, Array) (Line: 44)
Drupal\views\Plugin\views\filter\InOperator->init(Object, Object, Array) (Line: 36)
Drupal\views\Plugin\views\filter\ManyToOne->init(Object, Object, Array) (Line: 98)
Drupal\taxonomy\Plugin\views\filter\TaxonomyIndexTid->init(Object, Object, Array) (Line: 894)
Drupal\views\Plugin\views\display\DisplayPluginBase->getHandlers('filter') (Line: 1045)
Drupal\views\ViewExecutable->_initHandler('filter', Array) (Line: 903)
Drupal\views\ViewExecutable->initHandlers() (Line: 2633)
Drupal\views\Plugin\views\display\DisplayPluginBase->viewExposedFormBlocks() (Line: 35)
Drupal\views\Plugin\Block\ViewsExposedFilterBlock->build() (Line: 171)
Drupal\block\BlockViewBuilder::preRender(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 160)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 159)
Drupal\Core\Render\Renderer->renderPlain(Array) (Line: 175)
Drupal\Core\Render\Renderer->renderPlaceholder('', Array) (Line: 665)
Drupal\Core\Render\Renderer->replacePlaceholders(Array) (Line: 550)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 148)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 147)
Drupal\Core\Render\Renderer->renderRoot(Array) (Line: 279)
Drupal\Core\Render\HtmlResponseAttachmentsProcessor->renderPlaceholders(Object) (Line: 71)
Drupal\big_pipe\Render\BigPipeResponseAttachmentsProcessor->processAttachments(Object) (Line: 45)
Drupal\Core\EventSubscriber\HtmlResponseSubscriber->onRespond(Object, 'kernel.response', Object)
call_user_func(Array, Object, 'kernel.response', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.response') (Line: 202)
Symfony\Component\HttpKernel\HttpKernel->filterResponse(Object, Object, 1) (Line: 190)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\views\ManyToOneHelper::$handler is deprecated in Drupal\views\ManyToOneHelper->__construct() (line 24 of core/modules/views/src/ManyToOneHelper.php).
Drupal\views\ManyToOneHelper->__construct(Object) (Line: 51)
Drupal\views\Plugin\views\filter\ManyToOne->defineOptions() (Line: 117)
Drupal\taxonomy\Plugin\views\filter\TaxonomyIndexTid->defineOptions() (Line: 228)
Drupal\views\Plugin\views\PluginBase->unpackOptions(Array, Array) (Line: 110)
Drupal\views\Plugin\views\HandlerBase->init(Object, Object, Array) (Line: 95)
Drupal\views\Plugin\views\filter\FilterPluginBase->init(Object, Object, Array) (Line: 44)
Drupal\views\Plugin\views\filter\InOperator->init(Object, Object, Array) (Line: 36)
Drupal\views\Plugin\views\filter\ManyToOne->init(Object, Object, Array) (Line: 98)
Drupal\taxonomy\Plugin\views\filter\TaxonomyIndexTid->init(Object, Object, Array) (Line: 894)
Drupal\views\Plugin\views\display\DisplayPluginBase->getHandlers('filter') (Line: 1045)
Drupal\views\ViewExecutable->_initHandler('filter', Array) (Line: 903)
Drupal\views\ViewExecutable->initHandlers() (Line: 2633)
Drupal\views\Plugin\views\display\DisplayPluginBase->viewExposedFormBlocks() (Line: 35)
Drupal\views\Plugin\Block\ViewsExposedFilterBlock->build() (Line: 171)
Drupal\block\BlockViewBuilder::preRender(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 160)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 159)
Drupal\Core\Render\Renderer->renderPlain(Array) (Line: 175)
Drupal\Core\Render\Renderer->renderPlaceholder('', Array) (Line: 665)
Drupal\Core\Render\Renderer->replacePlaceholders(Array) (Line: 550)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 148)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 147)
Drupal\Core\Render\Renderer->renderRoot(Array) (Line: 279)
Drupal\Core\Render\HtmlResponseAttachmentsProcessor->renderPlaceholders(Object) (Line: 71)
Drupal\big_pipe\Render\BigPipeResponseAttachmentsProcessor->processAttachments(Object) (Line: 45)
Drupal\Core\EventSubscriber\HtmlResponseSubscriber->onRespond(Object, 'kernel.response', Object)
call_user_func(Array, Object, 'kernel.response', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.response') (Line: 202)
Symfony\Component\HttpKernel\HttpKernel->filterResponse(Object, Object, 1) (Line: 190)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\views\ManyToOneHelper::$handler is deprecated in Drupal\views\ManyToOneHelper->__construct() (line 24 of core/modules/views/src/ManyToOneHelper.php).
Drupal\views\ManyToOneHelper->__construct(Object) (Line: 38)
Drupal\views\Plugin\views\filter\ManyToOne->init(Object, Object, Array) (Line: 98)
Drupal\taxonomy\Plugin\views\filter\TaxonomyIndexTid->init(Object, Object, Array) (Line: 894)
Drupal\views\Plugin\views\display\DisplayPluginBase->getHandlers('filter') (Line: 1045)
Drupal\views\ViewExecutable->_initHandler('filter', Array) (Line: 903)
Drupal\views\ViewExecutable->initHandlers() (Line: 2633)
Drupal\views\Plugin\views\display\DisplayPluginBase->viewExposedFormBlocks() (Line: 35)
Drupal\views\Plugin\Block\ViewsExposedFilterBlock->build() (Line: 171)
Drupal\block\BlockViewBuilder::preRender(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 160)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 159)
Drupal\Core\Render\Renderer->renderPlain(Array) (Line: 175)
Drupal\Core\Render\Renderer->renderPlaceholder('', Array) (Line: 665)
Drupal\Core\Render\Renderer->replacePlaceholders(Array) (Line: 550)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 148)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 147)
Drupal\Core\Render\Renderer->renderRoot(Array) (Line: 279)
Drupal\Core\Render\HtmlResponseAttachmentsProcessor->renderPlaceholders(Object) (Line: 71)
Drupal\big_pipe\Render\BigPipeResponseAttachmentsProcessor->processAttachments(Object) (Line: 45)
Drupal\Core\EventSubscriber\HtmlResponseSubscriber->onRespond(Object, 'kernel.response', Object)
call_user_func(Array, Object, 'kernel.response', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.response') (Line: 202)
Symfony\Component\HttpKernel\HttpKernel->filterResponse(Object, Object, 1) (Line: 190)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'taxonomy_term') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 228)
Drupal\taxonomy\Plugin\views\filter\TaxonomyIndexTid->valueForm(Array, Object) (Line: 941)
Drupal\views\Plugin\views\filter\FilterPluginBase->buildExposedForm(Array, Object) (Line: 111)
Drupal\views\Form\ViewsExposedForm->buildForm(Array, Object)
call_user_func_array(Array, Array) (Line: 534)
Drupal\Core\Form\FormBuilder->retrieveForm('views_exposed_form', Object) (Line: 281)
Drupal\Core\Form\FormBuilder->buildForm('\Drupal\views\Form\ViewsExposedForm', Object) (Line: 134)
Drupal\views\Plugin\views\exposed_form\ExposedFormPluginBase->renderExposedForm(1) (Line: 2638)
Drupal\views\Plugin\views\display\DisplayPluginBase->viewExposedFormBlocks() (Line: 35)
Drupal\views\Plugin\Block\ViewsExposedFilterBlock->build() (Line: 171)
Drupal\block\BlockViewBuilder::preRender(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 160)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 159)
Drupal\Core\Render\Renderer->renderPlain(Array) (Line: 175)
Drupal\Core\Render\Renderer->renderPlaceholder('', Array) (Line: 665)
Drupal\Core\Render\Renderer->replacePlaceholders(Array) (Line: 550)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 148)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 147)
Drupal\Core\Render\Renderer->renderRoot(Array) (Line: 279)
Drupal\Core\Render\HtmlResponseAttachmentsProcessor->renderPlaceholders(Object) (Line: 71)
Drupal\big_pipe\Render\BigPipeResponseAttachmentsProcessor->processAttachments(Object) (Line: 45)
Drupal\Core\EventSubscriber\HtmlResponseSubscriber->onRespond(Object, 'kernel.response', Object)
call_user_func(Array, Object, 'kernel.response', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.response') (Line: 202)
Symfony\Component\HttpKernel\HttpKernel->filterResponse(Object, Object, 1) (Line: 190)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('taxonomy_term_access') (Line: 145)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 228)
Drupal\taxonomy\Plugin\views\filter\TaxonomyIndexTid->valueForm(Array, Object) (Line: 941)
Drupal\views\Plugin\views\filter\FilterPluginBase->buildExposedForm(Array, Object) (Line: 111)
Drupal\views\Form\ViewsExposedForm->buildForm(Array, Object)
call_user_func_array(Array, Array) (Line: 534)
Drupal\Core\Form\FormBuilder->retrieveForm('views_exposed_form', Object) (Line: 281)
Drupal\Core\Form\FormBuilder->buildForm('\Drupal\views\Form\ViewsExposedForm', Object) (Line: 134)
Drupal\views\Plugin\views\exposed_form\ExposedFormPluginBase->renderExposedForm(1) (Line: 2638)
Drupal\views\Plugin\views\display\DisplayPluginBase->viewExposedFormBlocks() (Line: 35)
Drupal\views\Plugin\Block\ViewsExposedFilterBlock->build() (Line: 171)
Drupal\block\BlockViewBuilder::preRender(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 160)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 159)
Drupal\Core\Render\Renderer->renderPlain(Array) (Line: 175)
Drupal\Core\Render\Renderer->renderPlaceholder('', Array) (Line: 665)
Drupal\Core\Render\Renderer->replacePlaceholders(Array) (Line: 550)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 148)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 147)
Drupal\Core\Render\Renderer->renderRoot(Array) (Line: 279)
Drupal\Core\Render\HtmlResponseAttachmentsProcessor->renderPlaceholders(Object) (Line: 71)
Drupal\big_pipe\Render\BigPipeResponseAttachmentsProcessor->processAttachments(Object) (Line: 45)
Drupal\Core\EventSubscriber\HtmlResponseSubscriber->onRespond(Object, 'kernel.response', Object)
call_user_func(Array, Object, 'kernel.response', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.response') (Line: 202)
Symfony\Component\HttpKernel\HttpKernel->filterResponse(Object, Object, 1) (Line: 190)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterMetaData is deprecated in Drupal\Core\Database\Query\Select->addMetaData() (line 178 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addMetaData('entity_type', 'taxonomy_term') (Line: 115)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 228)
Drupal\taxonomy\Plugin\views\filter\TaxonomyIndexTid->valueForm(Array, Object) (Line: 941)
Drupal\views\Plugin\views\filter\FilterPluginBase->buildExposedForm(Array, Object) (Line: 111)
Drupal\views\Form\ViewsExposedForm->buildForm(Array, Object)
call_user_func_array(Array, Array) (Line: 534)
Drupal\Core\Form\FormBuilder->retrieveForm('views_exposed_form', Object) (Line: 281)
Drupal\Core\Form\FormBuilder->buildForm('\Drupal\views\Form\ViewsExposedForm', Object) (Line: 134)
Drupal\views\Plugin\views\exposed_form\ExposedFormPluginBase->renderExposedForm(1) (Line: 2638)
Drupal\views\Plugin\views\display\DisplayPluginBase->viewExposedFormBlocks() (Line: 35)
Drupal\views\Plugin\Block\ViewsExposedFilterBlock->build() (Line: 171)
Drupal\block\BlockViewBuilder::preRender(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 160)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 159)
Drupal\Core\Render\Renderer->renderPlain(Array) (Line: 175)
Drupal\Core\Render\Renderer->renderPlaceholder('', Array) (Line: 665)
Drupal\Core\Render\Renderer->replacePlaceholders(Array) (Line: 550)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 148)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 147)
Drupal\Core\Render\Renderer->renderRoot(Array) (Line: 279)
Drupal\Core\Render\HtmlResponseAttachmentsProcessor->renderPlaceholders(Object) (Line: 71)
Drupal\big_pipe\Render\BigPipeResponseAttachmentsProcessor->processAttachments(Object) (Line: 45)
Drupal\Core\EventSubscriber\HtmlResponseSubscriber->onRespond(Object, 'kernel.response', Object)
call_user_func(Array, Object, 'kernel.response', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.response') (Line: 202)
Symfony\Component\HttpKernel\HttpKernel->filterResponse(Object, Object, 1) (Line: 190)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
- Deprecated function: Creation of dynamic property Drupal\mysql\Driver\Database\mysql\Select::$alterTags is deprecated in Drupal\Core\Database\Query\Select->addTag() (line 149 of core/lib/Drupal/Core/Database/Query/Select.php).
Drupal\Core\Database\Query\Select->addTag('taxonomy_term_access') (Line: 145)
Drupal\Core\Entity\Query\Sql\Query->prepare() (Line: 80)
Drupal\Core\Entity\Query\Sql\Query->execute() (Line: 228)
Drupal\taxonomy\Plugin\views\filter\TaxonomyIndexTid->valueForm(Array, Object) (Line: 941)
Drupal\views\Plugin\views\filter\FilterPluginBase->buildExposedForm(Array, Object) (Line: 111)
Drupal\views\Form\ViewsExposedForm->buildForm(Array, Object)
call_user_func_array(Array, Array) (Line: 534)
Drupal\Core\Form\FormBuilder->retrieveForm('views_exposed_form', Object) (Line: 281)
Drupal\Core\Form\FormBuilder->buildForm('\Drupal\views\Form\ViewsExposedForm', Object) (Line: 134)
Drupal\views\Plugin\views\exposed_form\ExposedFormPluginBase->renderExposedForm(1) (Line: 2638)
Drupal\views\Plugin\views\display\DisplayPluginBase->viewExposedFormBlocks() (Line: 35)
Drupal\views\Plugin\Block\ViewsExposedFilterBlock->build() (Line: 171)
Drupal\block\BlockViewBuilder::preRender(Array)
call_user_func_array(Array, Array) (Line: 101)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 788)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 374)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 160)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 159)
Drupal\Core\Render\Renderer->renderPlain(Array) (Line: 175)
Drupal\Core\Render\Renderer->renderPlaceholder('', Array) (Line: 665)
Drupal\Core\Render\Renderer->replacePlaceholders(Array) (Line: 550)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 148)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 580)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 147)
Drupal\Core\Render\Renderer->renderRoot(Array) (Line: 279)
Drupal\Core\Render\HtmlResponseAttachmentsProcessor->renderPlaceholders(Object) (Line: 71)
Drupal\big_pipe\Render\BigPipeResponseAttachmentsProcessor->processAttachments(Object) (Line: 45)
Drupal\Core\EventSubscriber\HtmlResponseSubscriber->onRespond(Object, 'kernel.response', Object)
call_user_func(Array, Object, 'kernel.response', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.response') (Line: 202)
Symfony\Component\HttpKernel\HttpKernel->filterResponse(Object, Object, 1) (Line: 190)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 81)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 713)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)