pelican-datatable
is an open source Pelican plugin to produce dynamic HTML tables with visualizations. The plugin provides an automatic HTML table generation from a data structure. Currently plugin only works for Markdown formatted content. This pelican plugin is basically Pelican wrapper for js-datatable JQuery plugin. The project was originally developed for the needs of an academic data visualization (see e.g. DCASE2016 evaluation campaign results).
Author
Toni Heittola ([email protected]), GitHub, Home page
pyyaml and bs4 are required. To ensure that all external modules are installed, run:
pip install -r requirements.txt
Or install one by one:
pyyaml, for yaml reading
pip install pyyaml
bs4 (BeautifulSoup) for parsing HTML content
pip install beautifulsoup4
Make sure the directory where the plugin was installed is set in pelicanconf.py
. For example if you installed in plugins/pelican-datatable
, add:
PLUGIN_PATHS = ['plugins']
Enable pelican-datatable:
PLUGINS = ['pelican-datatable']
To allow plugin in include css and js files, one needs to add following to the base.html
template, in the head (to include css files):
{% if article %}
{% if article.styles %}
{% for style in article.styles %}
{{ style }}
{% endfor %}
{% endif %}
{% endif %}
{% if page %}
{% if page.styles %}
{% for style in page.styles %}
{{ style }}
{% endfor %}
{% endif %}
{% endif %}
At the bottom of the page before </body>
tag (to include js files):
{% if article %}
{% if article.scripts %}
{% for script in article.scripts %}
{{ script }}
{% endfor %}
{% endif %}
{% endif %}
{% if page %}
{% if page.scripts %}
{% for script in page.scripts %}
{{ script }}
{% endfor %}
{% endif %}
{% endif %}
Datatable is injected to <table>
tags with class datatable
.
Example:
<table class="datatable table"
data-yaml="content/data/test.yaml"
data-show-chart="true"
data-chart-modes="bar,scatter,comparison"
data-chart-default-mode="scatter"
data-id-field="code"
data-sort-name="value1"
data-sort-order="desc"
data-rank-mode="grouped_muted"
data-row-highlighting="false"
data-pagination="false"
data-show-pagination-switch="false"
data-scatter-x="value1"
data-scatter-y="value2"
data-comparison-row-id-field="code"
data-comparison-sets-json='[{"title": "All values","data_axis_title": "Value axis", "fields": ["value1", "value2", "value3", "value4"], "field_titles": ["custom title 1","custom title 2","custom title 3","custom title 4"]},{"title": "Sub comparison 1","data_axis_title": "Value", "fields": ["value1", "value2"]},{"title": "Sub comparison 2", "data_axis_title": "Accuracy", "fields": ["value3", "value4"]}]'
data-comparison-active-set="All values"
data-comparison-a-row="Red"
data-comparison-b-row="Blue"
data-filter-control="true"
data-filter-show-clear="true"
>
<thead>
<tr>
<th data-rank="true">Rank</th>
<th data-field="code"
data-sortable="true">
Name
</th>
<th data-field="value1"
data-sortable="true"
data-value-type="float4"
data-chartable="true">
Value 1
</th>
<th data-field="value2"
data-sortable="true"
data-value-type="float4"
data-chartable="true">
Value 2
</th>
<th class="sep-left-cell"
data-align="center"
data-field="feature1"
data-sortable="true"
data-tag="true"
data-filter-control="select">
Feature 1
</th>
<th
data-align="center"
data-field="feature2"
data-sortable="true"
data-tag="true"
data-filter-control="select">
Feature 2
</th>
<th
data-align="center"
data-field="info.second_level_value"
data-sortable="true"
data-tag="true"
data-filter-control="select">
Second level value
</th>
</tr>
</thead>
</table>
Place data structure file inside pelican project folder. Example structure:
data:
- code: Red
value1: 12
value2: 22
value3: 62
value4: 52
feature1: square
feature2: triangle
row_css: danger
info:
second_level_value: 2
- code: Blue
value1: 62
value2: 42
value3: 62
value4: 52
feature1: circle
feature2: triangle
row_css: warning
info:
second_level_value: 12
- code: Black
value1: 18
value2: 42
value3: 62
value4: 52
feature1: square
feature2: circle
row_css: success
info:
second_level_value: 22
- code: White
value1: 18
value2: 37
value3: 62
value4: 52
feature1: triangle
feature2: square
row_css: info
info:
second_level_value: 22
- code: Purple
value1: 12
value2: 22
value3: 62
value4: 52
feature1: square
feature2: circle
info:
second_level_value: 32
- code: Brown
value1: 42
value2: 26
value3: 62
value4: 52
feature1: block
feature2: pyramid
info:
second_level_value: 16
- code: Baseline
value1: 62
value2: 32
value3: 62
value4: 52
feature1: triangle
feature2: circle
baseline: true
row_css: active
info:
second_level_value: 54