Hello Charts lancia un'esperienza di creazione di grafici nativa per l'editor blocchi

Pubblicato: 2021-12-03

Luke Carbis e Rob Stinson, due del team di tre persone Block Lab che WP Engine ha raccolto nel 2020, sono tornati insieme per un nuovo progetto. Questa volta, sono raggiunti da Byron Keet. Il trio sta conquistando lo spazio dei grafici di WordPress tramite una suite di blocchi denominata Hello Charts.

"Alcune persone lanciano offerte durante il Black Friday", ha scritto il team la scorsa settimana solo nel suo secondo tweet da luglio. "Stiamo lanciando un intero prodotto!"

Carbis ha sottolineato che il team ha cercato di creare un plug-in nativo per l'editor di blocchi. Non ci sono schermate di amministrazione o pagine delle impostazioni e l'utente lavora solo dall'editor.

Il materiale di marketing sulla home page del sito Web afferma che Hello Charts è "il primo editor di blocchi creato per primo dal plug-in di grafici". Tuttavia, SB Charts è in circolazione da quasi un anno e Chart Block è arrivato nella directory dei plugin di WordPress diverse settimane fa. Charts Blocks per Gutenberg, che supporta le importazioni CSV, ha ricevuto la sua versione iniziale sei mesi fa, ma da allora non è stato aggiornato.

La pretesa di essere i primi è, forse, un errore nel marketing. L'unico motivo per cui l'ho notato immediatamente è che ho tenuto d'occhio plugin simili per un po', sperando di trovare una soluzione decente per i grafici per l'editor di blocchi. Sebbene Hello Charts potrebbe non essere tecnicamente il primo ad atterrare, offre ancora la migliore esperienza utente.

Nella maggior parte dei casi, mi affido a grafici a barre e a linee. Tuttavia, il plug-in offre cinque tipi di blocchi in totale:

  • Grafico a barre
  • Grafico a linee
  • Grafico a torta
  • Grafico dell'area polare
  • Grafico radar

Ciascuno funziona quasi allo stesso modo quando si inseriscono i dati e si personalizza l'output. Ci sono alcune opzioni e controlli specifici per ogni tipo. Inoltre, gli utenti possono passare da un blocco grafico all'altro e viceversa con un semplice clic senza perdere dati.

Dopo aver familiarizzato con le opzioni, ho creato un grafico dei dati di vendita dei prodotti a tre anni per mese. Ho iniziato con il blocco del grafico a barre, che aveva più senso. Ciascuno dei blocchi ha un pulsante "Modifica dati grafico". Facendo clic su di esso si apre una sovrapposizione sullo schermo che funziona come un tipico programma di fogli di calcolo.

Sovrapposizione popup nell'editor di WordPress per l'immissione di dati del grafico che assomigliano a un foglio di calcolo.
Sovrapposizione dati grafico.

Gli utenti possono scorrere ogni cella, aggiungendo dati e creando nuovi set di dati o righe. Sono disponibili opzioni per duplicare i set di dati o aggiungerne di nuovi prima/dopo facendo clic sul pulsante con i puntini di sospensione. Sembrava tutto semplice per qualcuno che non ha passato molto tempo a lavorare con il software per fogli di calcolo dai tempi della lezione di computer del liceo.

Dopo un paio di minuti, avevo un grafico a barre. Tutto quello che dovevo fare era regolarlo per usare i colori del mio tema.

Grafico a barre che mostra i dati di vendita mensili per tre anni nell'editor di WordPress.
Blocco grafico a barre.

Le opzioni di personalizzazione del plugin erano abbondanti ma abbastanza equilibrate da non diventare prepotenti. Volevo solo che si abbinasse al design del mio tema senza troppi problemi, e non ci è voluto molto perché ciò accadesse.

Ho aggiunto un blocco di grafico a linee all'editor utilizzando i miei dati esistenti. L'unico aggiustamento che dovevo fare era l'opzione "Curva". Volevo che le mie linee fossero dritte invece di fluire in onde. Mi stavo già chiedendo se la squadra avesse pensato a tutto prima che sapessi che ne avevo bisogno a quel punto.

Grafico a linee che mostra i dati di vendita mensili per tre anni nell'editor di WordPress.
Blocco grafico a linee.

Per buona misura, ho testato il blocco Grafico a torta. È un tipo di grafico da cui potrei ottenere l'uso occasionale. Nel complesso, si è comportato come gli altri.

La funzione che mi mancava era la stampa dei dati per ciascuno dei segmenti della torta sullo schermo. I dati sono disponibili tramite un popup al passaggio del mouse o al focus, ma i visitatori non possono vedere tutti i dati del segmento contemporaneamente.

Blocco del grafico a torta nell'editor di WordPress con un set di dati sconosciuto.
Blocco grafico a torta.

Certo, non ho passato molto tempo con i blocchi della mappa ad area polare e della mappa radar. La mia esperienza con loro è inesistente negli scenari del mondo reale, quindi non ho una solida conoscenza se ci sono funzionalità che altri potrebbero desiderare. Li ho semplicemente testati per assicurarmi che funzionassero. Come gli altri blocchi del set, non ho riscontrato problemi.

Vorrei vedere un'opzione di titolo o didascalia integrata nei blocchi del plug-in. Tuttavia, entrambi possono essere facilmente aggiunti con un blocco di intestazione o paragrafo. Per abbinare lo sfondo, il wrapping in un blocco di gruppo aiuta, come mostrato nella schermata seguente:

Grafico a barre con dati sulle vendite mensili e un'intestazione sopra di esso.
Raggruppamento di un grafico per aggiungere un titolo.

Un paio di altre caratteristiche gradite sarebbero le opzioni di colore per le linee degli assi X e Y e il testo dei dati insieme al supporto per il blocco o il margine. La spaziatura della legenda lasciava un po' a desiderare, spesso avvicinandosi troppo all'output del grafico. Ha diverse opzioni di posizionamento, ma ha bisogno di spazio extra, specialmente quando si trova in alto o in basso.

Nel complesso, non ho trovato molto di cui lamentarmi. Hello Charts è un plugin che consiglierei a chiunque abbia bisogno di una soluzione per grafici che funzioni come se fosse stata creata per il sistema a blocchi di WordPress.

Flusso di acquisto e configurazione

Puoi ottenere un po 'di chilometraggio dagli attuali plug-in di blocco gratuiti, ma Hello Charts vale l'aggiornamento del prezzo. Potrebbe anche essere sottovalutato per il valore. Se il team costruisse importazioni CSV, sarebbe un vero e proprio furto.

Gli utenti possono acquistare i cinque tipi di blocchi individuali per $ 4 individualmente o aggiornarli per ottenerli tutti per $ 16. Questi offrono aggiornamenti a vita per un singolo sito senza supporto. C'è un livello più pesante di $ 199 per siti illimitati e un anno di supporto.

C'è un solo plugin che gli utenti devono installare. Ciascuno dei tipi di blocco è raggruppato nel plugin. Gli utenti stanno tecnicamente acquistando una chiave di licenza per attivarli.

Carbis mi ha offerto codici sconto per testare come funzionava questo flusso di acquisto e fornire feedback. Il team voleva intraprendere una strada diversa con l'acquisto di blocchi. Invece di creare un accordo tutto o niente per gli utenti, potrebbero semplicemente acquistare ciò di cui hanno effettivamente bisogno. "Quindi, se hai bisogno di un grafico a barre, acquista semplicemente un blocco di grafico a barre", ha affermato Carbis. "Oppure puoi ottenere tutti i tipi di grafici come set."

Non ho avuto problemi durante il flusso di acquisto. Ho iniziato con il grafico a barre, un blocco di cui avrei avuto bisogno più spesso degli altri. Quindi, ho aggiornato all'intero set.

L'unico inconveniente che ho avuto all'inizio è stato capire come attivare le licenze poiché il plugin non aveva una pagina delle impostazioni. Il campo della licenza si trova effettivamente nella schermata di amministrazione dei plugin.

Elenco dei plugin Hello Charts dalla schermata di amministrazione dei plugin di WordPress. Ha un campo chiave di licenza sotto la descrizione e i dati.
Campo della chiave di licenza nella schermata Plugin.

Lo svantaggio di avere licenze separate per ogni tipo di blocco è che gli utenti devono inserire la chiave per uno, inviarla, attendere che la pagina si ricarichi, scorrere fino al plug-in e ricominciare da capo con un'altra licenza. Il processo è stato così doloroso che ho voluto rinunciare a testare i tipi di grafici che non mi interessavano. Tuttavia, sono andato avanti, inserendo la chiave di licenza dopo la chiave di licenza.

Sì, sto esagerando un pochino, ma sarebbe molto più semplice inserire più chiavi di licenza contemporaneamente o non attendere il caricamento della pagina. Questa è solo una parte dell'esperienza che non è stata all'altezza dello standard impostato dal resto del plug-in.