[Widgets] Timezone support via timeZone

[diehbria]

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 - apache/echarts#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

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

• When timeZone is undefined, use browser timeZone.
• When timeZone is "America/Denver", The date should be display in Mountain Daylight Time (GMT-6).

Acceptance criteria

Beta Give feedback

1. Timezone support added in KPI / Status
2. Timezone support in XY Plot
3. Timezone support in resource explorer

[tracy-french]

Questions:

• Where to add time zone to the table?
• What to do with the offset value?

[diehbria]

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

[tracy-french]

Updated ticket with expected API behavior to clarify.