marmelab/EventDrops

locale is not use in v4 of d3

liuyepiaoxiang opened this issue · 2 comments

1. Try to use locale failed.

config.dateFormat = config.locale ? config.locale.timeFormat('%d %B %Y') : d3.timeFormat('%d %B %Y');

I found in d3 v4.0 ,only d3.timeFormatDefaultLocale or d3.timeFormatLocale functions to define with locale,and this locale obeject have attrbutions of format, parse , utcFormat, utcParse, there no more locale.timeFormate again,so if I define a locale obejct ,it didn't work with the locale object.

But I tried to change the upper code to this ,
config.dateFormat = config.locale ? config.locale.format('%d %B %Y') : d3.timeFormat('%d %B %Y');
It didn't work ,too.

2. I also try to define tickFormat, it didn't work ,too

`
var defaultLocale = {
"decimal": ",",
"thousands": " ",
"grouping": [3],
"dateTime": "%A %e %B %Y, %X",
"date": "%d/%m/%Y",
"time": "%H:%M:%S",
"periods": ["AM", "PM"],
"days": ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
"shortDays": ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
"months": ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
"shortMonths": ["janv.", "févr.", "mars", "avril", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."]
});
const locale = d3.timeFormatDefaultLocale(defaultLocale );
const eventDropsChart = eventDrops()
.locale(locale)
.tickFormat((date) => {
const formatMillisecond = locale.format('.%L');
const formatSecond = locale.format(':%S');
const formatMinute = locale.format('%I:%M');
const formatHour = locale.format('%I %p');
const formatDay = locale.format('%a %d');
const formatWeek = locale.format('%b %d');
const formatMonth = locale.format('%B');
const formatYear = locale.format('%Y');

  console.log('formatMonth', formatMonth);
  return (d3.timeSecond(date) < date
    ? formatMillisecond
    : d3.timeMinute(date) < date
      ? formatSecond
      : d3.timeHour(date) < date
        ? formatMinute
        : d3.timeDay(date) < date
          ? formatHour
          : d3.timeMonth(date) < date
            ? d3.timeWeek(date) < date
              ? formatDay
              : formatWeek
            : d3.timeYear(date) < date
              ? formatMonth
              : formatYear)(date);
})

`

We just released the 1.0 version (more details on our related blog post). You can now take profit of d3-time-format locales, such as: https://github.com/marmelab/EventDrops/blob/master/src/config.js#L4