Date Format Incorrect in Gantt Chart for Some Locales

[pmoeller91]

As a developer for terra-graphs, I'd like to spike on how we can best internationalize strings of the form "Mon DD"

So that, these types of strings will be able to show up properly in other languages

We'll know we're done when we have a proposal on how best to internationalize these strings. This could include changes to d3-scale or our own code. We should have an issue logged with the concrete description of what the plan is to fix this as a result of this spike.

Bug Report

When using the Gantt Chart (at least), the dates displaying above the graph are not displaying in the correct format for all locales it seems. In the "en" locale, dates display as "Mon DD" for example "Dec 29". However, in some other locales, this format should update to be "29 Dec". This apparently should be the case for at least Swedish, Dutch, and French, and maybe others. I am restricting this report to the Gantt Chart since it is what we are using, however, it may apply to other charts which display dates.

Description

When displaying dates above the Gantt chart, the formatting is not localized. The abbreviations seem to be, but not the display order of Mon DD / DD Mon. If needed I can try to provide an example.

Graphs affected

Note: AT LEAST Gantt chart is affected, there may be others.

• Bar graph
• Bubble graph
• Gantt chart
• Line graph
• Paired result
• Pie chart
• Scatter plot
• Timeline

Steps to Reproduce

1. Create a Gantt chart using Swedish (sv), French (fr) or Dutch (nl) locale
2. Populate it with data such that the dates along the top are displayed as "Mon DD"
3. Note that the formatting is not correct for the locale
4. Formatting may also be incorrect for other date formats as well, if year is included or if time is involved - I have not checked, but worth investigating.

Link to CodeSandbox

For now I have not created a reproduction. If needed I can do so.

Additional Context / Screenshots

Swedish Locale screenshot showing incorrect date formatting.

Dutch Locale screenshot showing incorrect date formatting.

French Locale screenshot showing incorrect date formatting.

Expected Behavior

Dates in the Gantt chart and other graphs should be have their format localized appropriately, similar to, for example, moment's locale-aware date formatting feature.

Possible Solution

Implement some kind of locale-aware date formatting tool or feature that allows for locale-sensitive arrangement of the date elements.

Environment

• Component Name and Version: @cerner/carbon-graphs 2.17.1
• Browser Name and Version: Chrome 90.0.4430.212 (Official Build) (x86_64)
• Node/npm Version: Node v10.23.1, NPM v6.14.10
• Webpack Version: WebPack v4.46.0
• Operating System and version (desktop or mobile): macOS Version 10.15.7 (Build 19H524)

@ Mentions

@AshishMotanamGurunadham directed me here to submit an issue. I have not worked with anyone regarding investigation or anything similar.

[pmoeller91]

In retrospect this may have been better classified as a feature request, if the functionality was not intended to be there in the first place - My head was in the space of "bug report" since it was identified as an issue. Feel free to update as you feel appropriate. Thank you for your time.

[ryanthemanuel]

I logged this: d3/d3-scale#247 to see if we can get some traction to make those partial date phrases internationalizable.

[AshishMotanamGurunadham]

Spike update: Based on the research I have done till now, looks like the only way we can change the date format is by sending in the format argument manually. If format is not specified tickFormat function returns the current format, which defaults to null. A null format indicates that the scale’s default formatter should be used, which is generated by calling scale.tickFormat. Since we are not providing any format for the axis ticks, ticks are displaying as designed by scale.tickFormat.

Our next move on this issue is, we will go through the d3-axis code so that we can suggest changes(if there is any) to the d3 team to fix this date format issue.

The new issue is raised here.

If this issue cannot be fixed from the d3 end, as our last hope we will manually send the desired format as per the locale, lower and upper limits provided by the consumer.
Source: https://stackoverflow.com/questions/40286963/d3-time-format-multi-in-v4-x