Closed sc0ttj closed 5 years ago
Advantages:
Yaml is dead simple to use - defining charts, embeds, custom elements/components in yml would be nice and easy.
Disadvantages:
Yaml parsers implemented in shell are few and far between, and don't support multi-dimensional arrays or hashes, so they often output the yml data as dynamically named variables - which could get cumbersome/ugly..
Processing the yml data, via mustache templates into JSON might be buggy, slow or incomplete in implementation.
Do something like Jekylls data files...
page-name.yml
file in assets/data/
:my_cool_line_chart:
x_axis:
labels: [2017, 2018, 2019]
y_axis:
labels: [0,10,20,30,40,50,60,70,80,90,100]
data:
[
[34, 45, 67],
[52, 64, 78],
]
cool_bar_chat
...
Some text.
<?bash
line_chart 'my_cool_line_chart'
?>
More text.
Disadvantages:
In order to have the required component data (which will most likely begin life as JSON) stored in a way that can be processedby mo
(the mustache templater), there is a lot of setup and 'boilerplate' code required .. The original data will need to be transformed into a Bash array of hashes, and multiple nested levels are not possible, so a bit of extra work is required for complex loops in templates..
TLDR: this is a very inefficient way of doing it...
File `templates/components/
Example:
line_chart_data=(
[x1]="2018",
[x2]="2019",
[y1]="0",
[y2]="100",
[d1]="23,46,79",
[d2]="12,11,19")
line_chart_json="$(render _line_chart 'json')"
in the page/markdown:
Some text.
{{render _line_chart}}
More text.
Advantages:
d3
, vega
, chartjs
, chartist
, noembed
, etc) will require JSON data as inputassets/data
:my-cool-line-chart.json
^ contains (for example) a vega line chart config object
File `templates/components/
Example:
vega-line-chart.html.mustache - html for vega chart (container, style and script tag)
vega-line-chart.js.mustache - init vega with the generated json data
vega-line-chart.css.mustache - styles
```vega-line-chart
assets/my-cool-line-chart.json
Outdated
Example:
Writing this: