Ajustamos el gráfico de idiomas

Verdoso · Oct 30, 2022 · 9834672 · 9834672
1 parent 264bdc8
commit 9834672
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 5 deletions.
diff --git a/docs/grafico_idiomas.jpg b/docs/grafico_idiomas.jpg
diff --git a/src/main/frontend/src/less/librarian.less b/src/main/frontend/src/less/librarian.less
@@ -142,4 +142,8 @@ Typeahead
 .empty-message {
     padding: .5em 1em;
     font-weight: bold;
+}
+
+canvas#idiomas-chart {
+    margin: auto;
 }
diff --git a/src/main/frontend/src/vue/idiomas-chart.vue b/src/main/frontend/src/vue/idiomas-chart.vue
@@ -38,14 +38,14 @@ export default {
     },
     width: {
       type: Number,
-      default: 400
+      default: 800
     },
     height: {
       type: Number,
-      default: 150
+      default: 500
     },
     cssClasses: {
-      default: '',
+      default: 'idiomas_doughnut',
       type: String
     },
     styles: {
@@ -70,10 +70,47 @@ export default {
         ]
       }
       , chartOptions: {
-        responsive: true
+        responsive: false
+        , aspectRatio: 5
         , maintainAspectRatio: false
         , plugins: {
-          tooltip: {
+          legend: {
+            position: 'right'
+            , labels: {
+              generateLabels: ((chart) => {
+                const data = chart.data;
+                if (data.labels.length && data.datasets.length) {
+                  const {labels: {pointStyle}} = chart.legend.options;
+    
+                  return data.labels.map((label, i) => {
+                    const meta = chart.getDatasetMeta(0);
+                    const style = meta.controller.getStyle(i);
+                    
+                    var total = chart.config.data.datasets[0].data.reduce(function(previousValue, currentValue, currentIndex, array) {
+                      return previousValue + currentValue;
+                    });
+                    
+                    var value = chart.config.data.datasets[0].data[i];
+                    var percentage = parseFloat((value/total*100).toFixed(2));
+    
+                    return {
+                      text: label + ': ' + Intl.NumberFormat('ca').format(value)  + ' (' + percentage + '%)',
+                      fillStyle: style.backgroundColor,
+                      strokeStyle: style.borderColor,
+                      lineWidth: style.borderWidth,
+                      pointStyle: pointStyle,
+                      hidden: !chart.getDataVisibility(i),
+    
+                      // Extra data used for toggling the correct item
+                      index: i
+                    };
+                  });
+                }
+                return [];
+              })
+            }
+          }
+          , tooltip: {
               enabled: true,
               callbacks: {
                 label: ((context) => {