predixdesignsystem/px-data-grid

Specifications for timezones in data input (user and application) presentation and filtering

Closed this issue · 5 comments

alump commented

How the following things should work:

  • When time is received from data source, but it doesn't have timezone definition (ISO), what timezone should be used? UTC? Users local? defaultTimeZone property?

  • What is the default timezone used in filter fields. Now UTC is shown there, and user can modify it. Should the default be user's local? Or the defaultTimeZone property?

  • Should editors in cells (when time is asked) also ask for timezone? If so, what value is default?

  • In parts of UI where there isn't space for timezone (eg. filter chips), what timezone should be used?

alump commented

img_20180215_142449

alump commented

This part is probably too hard to understand, the definition example below might be easier to understand.

Picture written out:

  • Have dateFormat property in column (for date columns), that has format (see how renderer handles it) and timezone attribute (as format might not define this). These values are used to parse and write data (the actual string value in item). Right now the format how data is read is defined in rendererConfig (relocate it here), but timezone value is not anywhere.

  • Renderer config can be similar is it now, but only containing renderer stuff. Momentjs is again used to output formatted presentation in data renderer. First convert string to momentjs object with help of data format, and then back to presentation string with render format (and timezone). So move the data format to new location, and add also timezone here (as data might be in UTC, but presentation is something else, maybe have magic LOCAL string for browser's local timezone).

Default values would be (if not provided):

  • date format: ISO (check how 'ISO' is handled in date-renderer)
  • timezone: UTC

Renderer defaults:

  • date format: YYYY-MM-DD HH:MM:SS
  • timezone: the value of date timezone, maybe?

Test to run:
Have data as YYYY-MM-DD HH:MM and timezone UTC, and then allow grid to show these dates in grid as MM/DD YYYY HH:MM with timezone PST.

In edit mode of grid, I say we just force use the timezone used by presentation. Also in filtering we should just set timezone to presentation timezone (but make sure compare works even if data is in different timezone) and that when you read data out of grid they stay in timezone of data.

alump commented

Example for test.

columns: [
  {
    path: "updated",
    type: "date",
    dateFormat: {
       format: "YYYY-MM-DD HH:MM", // NEW
       timezone: "UTC" // NEW
    },
    renderConfig: {
       hideTime: false,
       displayFormat: "MM/DD YYYY HH:MM",
       datePickerDateFormat: "MM/DD YYYY",
       datePickerTimeFormat: "HH:MM",
       timezone: "PST" // NEW
       // dataFormat moved to dateFormat->format
    }
  }
];

PS. Notice that datePicker has it's own formatting already now. This because it needs to separated strings. Keep this as it's done now.

Make sure data stays in UTC, but presentation is always in PST. Also filtering still works correctly.

If it's easier to leave the timezone picker to filter fields, then let's leave it there. But make sure filtering uses momentjs to compare (there is way to get momentjs object from filter rule, not just the string version in style of data)

Looking good to me 👍

Closing this because it is done.