.. _`Html Report`:

.. _`org.sysess.sympathy.html.report`:

Html Report
~~~~~~~~~~~

.. image:: html_report.svg
   :width: 48


Create and render a Jinja2 template. See `Jinja2
<http://jinja.pocoo.org/>`_ for full syntax of the template engine.

Input data can be of any type and is accessed using {{arg}}.

In order to make use of the built-in report API the template needs to consist of::

    {% import 'macros.html' as macros %}
    {% extends 'base.html' %}

    {% block contents %}
    {% endblock contents %}

These lines will import a small report builidng API as **macros**.
base.html us used as a base template (see Jinja2) and includes
*bootstrap.css* and *boostrap.js* (via CDN) among other things.

In *{% block contents %}* the user's layout is supposed to go.
To add a report header the following code will do that::

    {% block contents %}
      {{ macros.header('Report header', 'sy_logo.png'|image_path) }}
    {% endblock contents %}

This code uses a macro called *header*. The first argument is the
title and the second is the path to a file. The filter **image_path**
(Jinja2 feature) is used to select the package's image path.

If a section with a title is needed this can be achieved by using the macro
*section*, that takes a title and html as a string::

    {% block contents %}
      {{ macros.section('Section title', '<strong>test</strong>') }}
    {% endblock contents %}

This makes it possible to combine multiple macros to create advanced reports.
It is also possible to import a custom macro file to add even more functionality
to easily customize reports.

To see more advanced examples please look at the example flow Html.syx. That
will include interactive Bokeh plots in the report (and more).

Some more examples below of how to incude data. Assume that the first input is a table.

Example of iterating over each column::

   {% for name in arg.column_names() %}
      The column name is: {{name}}
      The column data is: {% for value in arg.col(name).data %} {{value}} {% endfor %}
   {% endfor %}

Example of iterating over one specific column::

   {% for value in arg.col('Foo').data %}
      {{ value }}
   {% endfor %}

Example of iterating over each row::

   {% for row in arg.to_rows() %}
      {% for value in row %} {{value}} {% endfor %}
   {% endfor %}

The examples below assume that you have created a tuple or list of tables
as input::

   {% for tbl in arg %}
      Table name: {{ tbl.name }}
      {% for col in tbl.cols() %}
         {{ col.name }}: {% for x in col.data %} {{x}} {% endfor %}
      {% endfor %}
   {% endfor %}

Finally, you can connect complex datatypes such as an ADAF to the node::

   {% for name, col in arg.sys['system0']['raster0'].items() %}
      Signal: {{name}}
      Time: {{ col.t }}
      Value:  {{ col.y }}
   {% endfor %}

Have a look at the :ref:`Data type APIs<datatypeapis>` to see what methods
and attributes are available on the data type that you are working with.

*Input ports*:
    :in_ds: datasource

        Datasource input
    :in: <a>

        Input

*Output ports*:
    :out: html

        HTML output

*Configuration*:
    **Template:** (template)
        Select the Jinja2 template.
    **Standalone HTML** (standalone)
        Include all dependencies in one single HTML file.
    **Use custom base** (custom_base)
        Use a custom base.html located next to the template file.
    **Relative tempfile** (relative_tempfile)
        Put the preview tempfile in the same directory as the template file.

.. automodule:: node_html

.. class:: HtmlReport


Example flows
#############

* :download:`Html.syx </_examples/Sympathy/Visual/Html/Html.syx>`