awslabs / iot-app-kit

A development library for creating web applications to visualize industrial data
Apache License 2.0
117 stars 60 forks source link

[Widgets] Timezone support via `timeZone` #2663

Closed diehbria closed 4 months ago

diehbria commented 8 months ago

This task is to add timezone support for the shared widgets of IoT App Kit.

Add a new optional property, timeZone?: string;. This will be used to format dates into a different timezone than the where the one the user is in.

Implementation details: We want to use https://date-fns.org/ to format dates.

const { utcToZonedTime, format } = require("date-fns-tz");

// https://date-fns.org/v3.6.0/docs/Time-Zones#date-fns-tz
// converts a utc date to a formatted string in a specific timeZone
const formatDate = (dateTime: number, { timeZone, pattern }: { timeZone: string; pattern: string; }) => {
  const zonedDate = utcToZonedTime(new Date(dateTime), timeZone);
  const formattedDate = format(zonedDate, pattern, { timeZone });

  return formattedDate;
};

How to handle timezones in echarts - https://github.com/apache/echarts/issues/14453

How to handle dates in our React components -

// Helper components for use in a React Context
export type DateTimeFormatContextOptions = {
  timeZone: string;
};
export const DateTimeFormatContext = React.createContext<DateTimeFormatContextOptions>({
  timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
});

export type DateTimeOptions = {
  dateTime: number;
  pattern?: string;
};
export const DateTime = ({ dateTime, pattern }: DateTimeOptions) => {
  const dateTimeFormatPattern = pattern ?? 'yyy-MM-dd hh:mm:ss a';
  const { timeZone } = useContext(DateTimeFormatContext);

  return <>{ formatDate(dateTime, { timeZone, pattern: dateTimeFormatPattern }) }</>;
};

Default: the user's current timeZone as provided by the browser. Intl.DateTimeFormat().resolvedOptions().timeZone

For KPI, Status, make sure the bottom timestamp displayed on the widget reflects the updated timezone Screenshot 2024-03-08 at 8 06 03 AM

For resource explorer, ensure that all places which display timestamps of data as a result of searches, reflects the timezone offset.

For XY Plot, ensure the bottom timestamp displayed reflects the timezone offset, the data point tooltip, as well as the X-Axis labels, and the timestamps shown within the legend and the trend cursor column headers.

Expected API behavior

### Acceptance criteria
- [ ] Timezone support added in KPI / Status
- [ ] Timezone support in XY Plot
- [ ] Timezone support in resource explorer
tracy-french commented 8 months ago

Questions:

diehbria commented 8 months ago

updated ticket, no changes required for table, additional clarification added for other widgets.

tracy-french commented 8 months ago

Updated ticket with expected API behavior to clarify.