En aquest article t'explique com m'he preparat unes funcionalitats a Drupal per a poder fer gràfiques sobre les dades que vullga, com els nodes, fitxers, imatges, taxonomies, usuaris, etc.
Anem a la pàgina del mòdul Charts i seguim les indicacions per instal·lar-ho amb Composer:
composer require 'drupal/charts:^5.1'
El mòdul Charts inclou un submòduls de diferents llibreries de gràfics, com:
- Billboard.js Charts, ací tens la web oficial de Billboard.js
- C3.js Charts, ací tens la web oficial de C3.js
- Google Charts, ací tens la web oficial de Google Charts
- Chart.js Charts, ací tens la web oficial de Chart.js.
- Charts , el mòdul principal.
Jo només he instal·lat Charts, Billboard.js i Chart.js, perquè són els que més m'han agradat per a l'estil que tinc en aquest projecte Drupal. No obstant això, pot ser provaré altres llibreries en alguns altres projectes.
Però bé, una vegada instal·lat aquestos mòdul, instal·laré la llibreria Billboard.js i la llibreria de Charts.js.
Instal·lació de la llibreria Billboard.js
Afegim al nostre composer.json que dins de l'apartat "repoitories":
{
"type": "package",
"package": {
"name": "drupal-library/billboard",
"version": "3.13.0",
"type": "drupal-library",
"dist": {
"url": "https://registry.npmjs.org/billboard.js/-/billboard.js-3.13.0.tgz",
"type": "tar"
},
"require": {
"composer/installers": "^2"
},
"extra": {
"installer-name": "billboard"
}
}
}
Si ja tinc un altre repositori, hauré de ficar una coma entre les dues línies:
"url": "https://packages.drupal.org/8"
}
{
Ficarem:
"url": "https://packages.drupal.org/8"
},
{
Per a comprovar que ara funcionarà bé, podem fer:
composer validate
Si respon bé, podrem fer la instal·lació ara.
Ara instal·larem la llibreria amb Composer:
composer require drupal-library/billboard:3.13.0
Ara podem anar als reports de Drupal a admin/reports/status#warning per a veure que Drupal ja detecta que tenim instal·lada la llibreria Billboard.js
Instal·lació de la llibreria Chart.js
Instal·lem el submòdul habilitant-lo en Administració + Extend.
Ara descarreguem el fitxer chart.umd.min.js i el deixarem en la ruta /libraries/chartjs/dist
Jo l'he buscat a Google i me l'he descarregat amb wget així:
wget https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.5.0/chart.umd.min.js
I bé, ara des dels reports de Drupal a admin/reports/status#warning ja veig que els tinc els dos instal·lats.
I he fet algunes proves amb gràfics que pots veure en aquestes captures de pantalla que et mostre a continuació.
Captura 1
Captura 2
Captura 3
Jo he estat fent proves amb les etiquetes lliures que tinc als articles del meu blog, i m'he fet unes simples gràfiques que mostren (1) totes les etiquetes per mida, (2) totes les etiquetes en una gràfica de barres, (3) una gràfica de barres també amb les etiquetes afegides a la web en els últims 30 dies i (4) una gràfica de línea que mostra les etiquetes afegides en l'últim any.
Ho tinc a https://joancatala.net/etiquetes
Així aniré veient l'evolució i els canvis de les gràfiques a poc a poc, quan vaja afegint nous articles amb diferents etiquetes.
Seguirem fent proves, sempre aprenent!
