Html Report

Create and render a Jinja2 template. See Jinja2 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 Data type APIs 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.

class node_html.HtmlReport

Example flows

• Html.syx