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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent