Support datetime data properly for Line & Bar & Area charts

[mia-mifeng]

Provide a general summary of the feature here

Currently for line, bar, and area charts, data with datetime format will have to be converted into unix/epoch time stamp format (eg, 1712096542) and be manually sorted in order to be properly visualized. See the date format in the tooltip below:

The request is to have the charts to accept a wider range of datetime formats including:

• ISO8601 2020-07-10 15:00:00.000
• ISO8601 in UTC 2019-11-14T00:55:31.820Z
  Additionally, the datetime data can be automatically sorted in the chart.

🤔 Expected Behavior?

Line, bar and area charts can properly interpret and display a wider range of datetime formats including ISO8601 and UTC time and can be automatically sorted in the chart as mentioned above.

💁 Possible Solution

No response

🔦 Context

This feature is needed for migrating the UDD charts to use RSC.
Analysis doc: https://wiki.corp.adobe.com/pages/viewpage.action?spaceKey=AEPLT&title=UDD+Charts+RSC+Migration+Analysis

💻 Examples

No response

🧢 Your Company/Team

Adobe/AEP Reporting Experience

[marshallpete]

For this one it would be best to look at what types of datetime formats react-vega supports. I assume they support more than RSC does so it would be good to look at the specs they produce to see how they are doing it in vega. Once you have the implementation in vega figured out, it should be straight forward to implement in RSC.

Currently we add a time transform to the source data when setting up the data for the given chart type (See lineSpecBuilder.ts line 92, scatterSpecBuilder.ts line 102, areaSpecBuilder.ts line 98).

[marshallpete]

addTimeTransform in dataUtils.ts is how we currently handle datetime formats and it only works for epoch as called out above.

Ideally there should not be an API change for this ticket. Hopefully the solution will be able to handle any datetime format without the user having to specify which datetime format is being used. Let me know if this isn't possible and wee can figure out a suitable API.

[mia-mifeng]

Thank you @marshallpete for the instructions! I made an attempt to fixing this, basically by adding one more entry to transform to convert the datetime field of any format to "Date" in vega:

                {
                  "type": "formula",
                  "expr": "toDate(datum[\"datetime\"])",
                  "as": "datetime"
                },

The actual fix is in this PR #245.
Would you please take a look and let me know if the fix looks appropriate? Thank you!

PS: i double checked that react-vega uses vega-lite which automatically supports various datetime formats. And vega-lite uses the above approach to parse date (source1, source2)

Here're the screenshots -- before the fix

after the fix