Add height option to +chart and document

This commit is contained in:
ines 2017-10-29 03:53:59 +01:00
parent e18744823b
commit 9b6828bd83
2 changed files with 29 additions and 2 deletions

View File

@ -149,9 +149,9 @@ mixin terminal(label)
//- Chart.js
id - [string] chart ID, will be assigned as #chart_{id}
mixin chart(id)
mixin chart(id, height)
figure.o-block&attributes(attributes)
canvas(id="chart_#{id}" width="800" height="400" style="max-width: 100%")
canvas(id="chart_#{id}" width="800" height=(height || "400") style="max-width: 100%")
//- Gitter chat button and widget

View File

@ -332,6 +332,33 @@ include _includes/_mixins
| A new annotation tool for radically efficient machine teaching,
| powered by active learning.
+h(3, "chart") Chart
p
| Charts are powered by #[+a("http://www.chartjs.org") chart.js] and
| implemented via a mixin that creates the #[code canvas] element and
| assigns the chart ID. The chart data itself is supplied in JavaScript.
| Charts are mostly used to visualise and compare model accuracy scores
| and speed benchmarks.
+aside-code("Usage", "jade").
+chart("accuracy")
script(src="/assets/js/chart.min.js")
script new Chart('chart_accuracy', { datasets: [] })
+grid
+grid-col("half")
+chart("accuracy", 400)
+grid-col("half")
+chart("speed", 300)
script(src="/assets/js/chart.min.js")
script.
Chart.defaults.global.defaultFontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
new Chart('chart_accuracy', { type: 'bar', options: { legend: false, responsive: true, scales: { yAxes: [{ label: 'Accuracy', ticks: { suggestedMin: 70 } }], xAxes: [{ barPercentage: 0.425 }]}}, data: { labels: ['UAS', 'LAS', 'POS', 'NER F', 'NER P', 'NER R'], datasets: [{ label: 'en_core_web_sm', data: [91.49, 89.66, 97.23, 86.46, 86.78, 86.15], backgroundColor: '#09a3d5' }]}});
new Chart('chart_speed', { type: 'horizontalBar', options: { legend: false, responsive: true, scales: { xAxes: [{ label: 'Speed', ticks: { suggestedMin: 0 }}], yAxes: [{ barPercentage: 0.425 }]}}, data: { labels: ['w/s CPU', 'w/s GPU'], datasets: [{ label: 'en_core_web_sm', data: [9575, 25531], backgroundColor: '#09a3d5'}]}});
+section("embeds")
+h(2, "embeds") Embeds