You are here

Home » API reference » Content Planner 8

content-state-statistic.html.twig in Content Planner 8 

{%
  set colors = [
    '#ffb2fc',
    '#fca747',
    '#0096d0',
    '#505050',
    '#99529a',
    '#5ebc68',
    '#d3d3d3',
  ]
%}
{# Calculate total #}
{% set total_count = 0 %}
{% for state in data %}
  {% set total_count = total_count + state.count %}
{% endfor %}

{# visual bar #}
<div class="content-states-visual-bar">

  {% set color_index = 1 %}
  {% for state in data %}

    {% set slice_percentage = (state.count / total_count) * 100 %}

    <div class="content-state-slice" style="background-color: {{ colors[color_index] }}; width: {{ slice_percentage }}%;">&nbsp;</div>
    {% set color_index = color_index + 1 %}
  {% endfor %}
</div>

{# count list #}
<ul class="dashboard-content-status-counts">
  {% set color_index = 1 %}
  {% for state in data %}
    <li class="content-state">
      <span class="color" style="background-color: {{ colors[color_index] }}"></span>
      <span class="label">{{ state.label }} ({{ state.count }})</span>
    </li>
    {% set color_index = color_index + 1 %}
  {% endfor %}
</ul>
<strong>Total: {{ total_count }}</strong>
1 theme call to content-state-statistic.html.twig
ContentStateStatistic::build in modules/content_kanban/src/Plugin/DashboardBlock/ContentStateStatistic.php
Build the block and return a renderable array.

File

modules/content_kanban/templates/content-state-statistic.html.twig
View source 
  1. {%

  2.   set colors = [

  3.     '#ffb2fc',

  4.     '#fca747',

  5.     '#0096d0',

  6.     '#505050',

  7.     '#99529a',

  8.     '#5ebc68',

  9.     '#d3d3d3',

  10.   ]

  11. %}

  12. {# Calculate total #}

  13. {% set total_count = 0 %}

  14. {% for state in data %}

  15.   {% set total_count = total_count + state.count %}

  16. {% endfor %}

  17. 

  18. {# visual bar #}

  19. <div class="content-states-visual-bar">

  20. 

  21.   {% set color_index = 1 %}

  22.   {% for state in data %}

  23. 

  24.     {% set slice_percentage = (state.count / total_count) * 100 %}

  25. 

  26.     <div class="content-state-slice" style="background-color: {{ colors[color_index] }}; width: {{ slice_percentage }}%;">&nbsp;</div>

  27.     {% set color_index = color_index + 1 %}

  28.   {% endfor %}

  29. </div>

  30. 

  31. {# count list #}

  32. <ul class="dashboard-content-status-counts">

  33.   {% set color_index = 1 %}

  34.   {% for state in data %}

  35.     <li class="content-state">

  36.       <span class="color" style="background-color: {{ colors[color_index] }}"></span>

  37.       <span class="label">{{ state.label }} ({{ state.count }})</span>

  38.     </li>

  39.     {% set color_index = color_index + 1 %}

  40.   {% endfor %}

  41. </ul>

  42. <strong>Total: {{ total_count }}</strong>