Lavorando nel regno della visualizzazione dei dati, come me, impari presto che molti grafici e grafici comportano una sorta di elemento temporale. Ad esempio, prendi questo grafico:

Per quanto semplice possa essere, per quanto riguarda i grafici, la generazione leggibile zecche, etichette, suggerimenti, leggendee altro testo per molte località diverse richiede un set di strumenti di alta qualità. Uno strumento indispensabile da cui dipendono molti sviluppatori web è D3. Corto per Documenti basati sui datiD3 è una libreria di visualizzazione dei dati open source che aiuta a dare vita ai tuoi dati utilizzando una combinazione di conformità W3C HTMLSVG e CSS. Come vedremo in questo tutorial, è stata trattata tutta la formattazione della data.

Leggi: Visualizzazione di formati di data personalizzati in angolare

Impostare la localizzazione nel modo più difficile con D3

Di default, l’unica locale che viene precaricata è it_US. Per creare un formattatore per una locale diversa, devi crearne un’istanza tramite il file d3.locale() metodo. Accetta una definizione di locale che contiene tutte le informazioni relative alla locale. Ecco qual è il de_DE I campi della data della definizione (Germania) hanno il seguente aspetto:

{
  "dateTime": "%A, der %e. %B %Y, %X",
  "date": "%d.%m.%Y",
  "time": "%H:%M:%S",
  "periods": ["AM", "PM"],
  "days": ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
  "shortDays": ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
  "months": ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
  "shortMonths": ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"]
}

Quando si desidera utilizzare il formato di una locale diversa da it-USAquesto è il solito processo:

var localeDef = *{locale definition object};     
var timeFormatter = d3.timeFormatLocale(localeDef);
var timeFormat = timeFormatter.format(localeDef.date);

*locale definition object not included.

Si noti che è necessario fornire l’oggetto di definizione della locale. Lo svantaggio di questo approccio è che, la ricerca di tutti i nomi di giorni e mesi per molte località diverse richiede alcune ricerche, soprattutto se non si è sicuri di come un determinato paese formatta le date e gli orari. Per fortuna, come vedremo nella prossima sezione, esiste un approccio molto più semplice!

Leggi: Analisi di date e orari con Luxon

Impostazione della localizzazione in modo semplice con D3

Sicuramente qualcuno ha compilato una selezione di definizioni locali per uso generale? In effetti, qualcuno l’ha fatto. Il d3-formato-ora il modulo estende D3 per fornire a JavaScript attuazione del venerabile strptime e strftime funzioni dalla libreria standard C, nonché l’analisi e la formattazione della data in una varietà di rappresentazioni specifiche della locale. Rispetto a quest’ultimo, il progetto contiene un gran numero di file di definizione delle impostazioni locali. Meglio ancora, questi file sono facilmente accessibili dai tuoi script tramite il file jsDelivr Rete di distribuzione dei contenuti.

Diamo un’occhiata a come usarlo.

Utilizzo di file di definizione delle impostazioni locali ospitati con fetch()

Il modo consigliato per scaricare i file di definizione delle impostazioni locali consiste nell’usare il global andare a prendere() metodo. Restituisce la risposta come a Promettere così puoi passarlo ad altri metodi usando il poi() metodo. Ecco un esempio che formatta la data corrente per il fr-FR (Francia francese) locale:

const localeFR = await fetch("https://cdn.jsdelivr.net/npm/[email protected]/locale/fr-FR.json")
  .then(d => d.json())
  .then(d3.formatLocale);
const formatter = localeFR.timeFormat("'%d %B %Y");
console.log(formatter(Date.now())); // 05 février 2022

Allo stesso modo, possiamo usare l’oggetto locale per impostare la formattazione predefinita:

const localeFR = await fetch("https://cdn.jsdelivr.net/npm/[email protected]/locale/fr-FR.json")
  .then(d => d.json())
  .then(locale => {
    d3.timeFormatDefaultLocale(locale);
    console.log(d3.timeFormat(locale.date)); // 05 février 2022
  });    

Applicazione della formattazione personalizzata ai formati data in 3D

Se è necessario modificare uno o due tipi di formato, non è necessario sostituire l’intera definizione delle impostazioni locali; sostituisci solo quelli che si applicano. Per illustrare, ecco un servizio che utilizza i formati predefiniti per tutte le lingue tranne il cinese:

const LOCALE_REPO = 'https://cdn.jsdelivr.net/npm/[email protected]/locale/';

@Injectable()
export class DateLocaleService {
  private readonly customDateFormats = new Map<string, string>([
    ['en-CA', '%B %d, %Y'],
    ['fr-CA', '%d %B %Y'],
    ['es-ES', '%d de %B de %Y'],
    ['de-DE', '%d. %B %Y'],
    ['zh-TW', '%Y %B %d'],
  ]);

  public async setLocale<T>(locale: string): Promise<T> {
    const localeString = this.convertEnumKeyToLocale(locale);

    return await fetch(`${LOCALE_REPO}${localeString}.json`)
      .then(d => d.json())
      .then(locale => {
        const timeFormatLocale = d3.timeFormatLocale(locale);
        //Use a custom format for Chinese
        const dateFormat = locale === 'zh-TW' 
          ? this.customDateFormats.get(locale)
          : locale.date;
        return timeFormatLocale.format(dateFormat) as T;
      });
  }
}

Il generico dice al transpiler TypeScript che il chiamante dovrebbe aspettarsi il Promettere per contenere il tipo specificato. Puoi vedere di seguito che ci aspettiamo che venga restituita una funzione. Nello specifico, è la funzione di formattazione per visualizzare le date nella locale scelta:

private formatDate(locale: string) {
  this.dateLocaleService.setLocale<Function>(locale)
    .then((formatter) => {
      this.formattedDate = formatter(this.testDate);
    });
}