Rooba
/
spaCy
mirror of https://github.com/explosion/spaCy.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Unify chart options and update styleguide

This commit is contained in:
ines 2017-10-30 17:25:49 +01:00
parent 14ad92d337
commit 3ffbb64ab6
2 changed files with 23 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
website/assets/js/models.js
View File

@ -5,9 +5,11 @@ import { Templater, handleResponse, convertNumber } from './util.js';
/** /**
* Chart.js defaults * Chart.js defaults
*/ */
Chart.defaults.global.legend.position = 'bottom';
Chart.defaults.global.defaultFontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
const CHART_COLORS = { model1: '#09a3d5', model2: '#066B8C' }; const CHART_COLORS = { model1: '#09a3d5', model2: '#066B8C' };
const CHART_FONTS = {
legend: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
ticks: 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
};
/** /**
* Formatters for model details. * Formatters for model details.
@ -180,6 +182,7 @@ export class ModelComparer {
this.labels = labels; this.labels = labels;
this.models = {}; this.models = {};
this.colors = CHART_COLORS; this.colors = CHART_COLORS;
this.fonts = CHART_FONTS;
this.defaultModels = defaultModels; this.defaultModels = defaultModels;
this.tpl.get('result').style.display = 'block'; this.tpl.get('result').style.display = 'block';
this.fetchCompat() this.fetchCompat()
@ -193,12 +196,14 @@ export class ModelComparer {
const selectB = this.tpl.get('model2'); const selectB = this.tpl.get('model2');
selectA.addEventListener('change', this.onSelect.bind(this)); selectA.addEventListener('change', this.onSelect.bind(this));
selectB.addEventListener('change', this.onSelect.bind(this)); selectB.addEventListener('change', this.onSelect.bind(this));
this.chart = new Chart('chart_compare_accuracy', { type: 'bar', this.chart = new Chart('chart_compare_accuracy', { type: 'bar', options: {
options: { responsive: true, scales: { responsive: true,
yAxes: [{ label: 'Accuracy', ticks: { min: 70 }}], legend: { position: 'bottom', labels: { fontFamily: this.fonts.legend, fontSize: 13 }},
xAxes: [{ barPercentage: 0.75 }] scales: {
}} yAxes: [{ label: 'Accuracy', ticks: { min: 70, fontFamily: this.fonts.ticks }}],
}); xAxes: [{ barPercentage: 0.75, ticks: { fontFamily: this.fonts.ticks }}]
}
}});
if (this.defaultModels) { if (this.defaultModels) {
selectA.value = this.defaultModels.model1; selectA.value = this.defaultModels.model1;
selectB.value = this.defaultModels.model2; selectB.value = this.defaultModels.model2;

13
website/styleguide.jade
View File

@ -130,7 +130,8 @@ include _includes/_mixins
| capabilities and can be used to mark features that require a | capabilities and can be used to mark features that require a
| respective model to be installed. | respective model to be installed.
p.o-block.o-inline-list .o-block
p.o-inline-list
+tag I'm a tag +tag I'm a tag
+tag-new(2) +tag-new(2)
+tag-model("Named entities") +tag-model("Named entities")
@ -359,18 +360,14 @@ include _includes/_mixins
script(src="/assets/js/chart.min.js") script(src="/assets/js/chart.min.js")
script new Chart('chart_accuracy', { datasets: [] }) script new Chart('chart_accuracy', { datasets: [] })
+grid
+grid-col("half")
+chart("accuracy", 400) +chart("accuracy", 400)
+grid-col("half")
+chart("speed", 300) +chart("speed", 300)
script(src="/assets/js/chart.min.js") script(src="/assets/js/vendor/chart.min.js")
script. script.
Chart.defaults.global.defaultFontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"; 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_accuracy', { type: 'bar', options: { legend: { position: 'bottom'}, responsive: true, scales: { yAxes: [{ label: 'Accuracy', ticks: { suggestedMin: 70 } }], xAxes: [{ barPercentage: 0.75 }]}}, data: { labels: ['UAS', 'LAS', 'POS', 'NER F', 'NER P', 'NER R'], datasets: [{ label: 'en_core_web_sm', data: [91.65, 89.77, 97.05, 84.80, 84.53, 85.06], backgroundColor: '#09a3d5' }, { label: 'en_core_web_lg', data: [91.49, 89.66, 97.23, 86.46, 86.78, 86.15], backgroundColor: '#066B8C'}]}});
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'}]}}); new Chart('chart_speed', { type: 'horizontalBar', options: { legend: { position: 'bottom'}, responsive: true, scales: { xAxes: [{ label: 'Speed', ticks: { suggestedMin: 0 }}], yAxes: [{ barPercentage: 0.75 }]}}, data: { labels: ['w/s CPU', 'w/s GPU'], datasets: [{ label: 'en_core_web_sm', data: [9575, 25531], backgroundColor: '#09a3d5'}, { label: 'en_core_web_lg', data: [8421, 22092], backgroundColor: '#066B8C'}]}});
+section("embeds") +section("embeds")
+h(2, "embeds") Embeds +h(2, "embeds") Embeds