From 3ffbb64ab6b0340d62cd1624402c934f6d54e6e7 Mon Sep 17 00:00:00 2001
From: ines <ines@ines.io>
Date: Mon, 30 Oct 2017 17:25:49 +0100
Subject: [PATCH] Unify chart options and update styleguide

---
 website/assets/js/models.js | 21 +++++++++++++--------
 website/styleguide.jade     | 23 ++++++++++-------------
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/website/assets/js/models.js b/website/assets/js/models.js
index 10ef87642..e79073edd 100644
--- a/website/assets/js/models.js
+++ b/website/assets/js/models.js
@@ -5,9 +5,11 @@ import { Templater, handleResponse, convertNumber } from './util.js';
 /**
  * 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_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.
@@ -180,6 +182,7 @@ export class ModelComparer {
         this.labels = labels;
         this.models = {};
         this.colors = CHART_COLORS;
+        this.fonts = CHART_FONTS;
         this.defaultModels = defaultModels;
         this.tpl.get('result').style.display = 'block';
         this.fetchCompat()
@@ -193,12 +196,14 @@ export class ModelComparer {
         const selectB = this.tpl.get('model2');
         selectA.addEventListener('change', this.onSelect.bind(this));
         selectB.addEventListener('change', this.onSelect.bind(this));
-        this.chart = new Chart('chart_compare_accuracy', { type: 'bar',
-            options: { responsive: true, scales: {
-                yAxes: [{ label: 'Accuracy', ticks: { min: 70 }}],
-                xAxes: [{ barPercentage: 0.75 }]
-            }}
-        });
+        this.chart = new Chart('chart_compare_accuracy', { type: 'bar', options: {
+            responsive: true,
+            legend: { position: 'bottom', labels: { fontFamily: this.fonts.legend, fontSize: 13 }},
+            scales: {
+                yAxes: [{ label: 'Accuracy', ticks: { min: 70, fontFamily: this.fonts.ticks }}],
+                xAxes: [{ barPercentage: 0.75, ticks: { fontFamily: this.fonts.ticks }}]
+            }
+        }});
         if (this.defaultModels) {
             selectA.value = this.defaultModels.model1;
             selectB.value = this.defaultModels.model2;
diff --git a/website/styleguide.jade b/website/styleguide.jade
index b503569b7..8034615e1 100644
--- a/website/styleguide.jade
+++ b/website/styleguide.jade
@@ -130,10 +130,11 @@ include _includes/_mixins
         |  capabilities and can be used to mark features that require a
         |  respective model to be installed.
 
-    p.o-block.o-inline-list
-        +tag I'm a tag
-        +tag-new(2)
-        +tag-model("Named entities")
+    .o-block
+        p.o-inline-list
+            +tag I'm a tag
+            +tag-new(2)
+            +tag-model("Named entities")
 
     +h(3, "icons", "website/_includes/_svg.jade") Icons
 
@@ -359,18 +360,14 @@ include _includes/_mixins
         script(src="/assets/js/chart.min.js")
         script new Chart('chart_accuracy', { datasets: [] })
 
-    +grid
-        +grid-col("half")
-            +chart("accuracy", 400)
+    +chart("accuracy", 400)
+    +chart("speed", 300)
 
-        +grid-col("half")
-            +chart("speed", 300)
-
-    script(src="/assets/js/chart.min.js")
+    script(src="/assets/js/vendor/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'}]}});
+        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: { 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")
     +h(2, "embeds") Embeds