[TimeSeriesCard] Interval is not dynamic based on inputted values

[eosineye1]

What package is this for?

• [x] React
• [ ] Angular

Describe the bug

When the user changes the time range for the TimeSeriesCard, the Interval prop of the TimeSeriesCard must be passed in and does not update automatically.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://carbon-addons-iot-react.com/?path=/story/1-watson-iot-timeseriescard--single-point
2. Change the time range of the card
3. The knob for interval does not update based on the new time range and values within that range

Please create a reduced test case in CodeSandbox: https://codesandbox.io/s/github/carbon-design-system/carbon-addons-iot-react/tree/next/packages/react/examples/codesandbox

Expected behavior

When the time range of the TimeSeriesCrad changes, the interval knob should update according to the best option to display the values of the chart.

The current UI fix is:

/*
* Interval constants
*/
export const INTERVALS = {
  MINUTE: 'minute',
  HOUR: 'hour',
  DAY: 'day',
  WEEK: 'week',
  QUARTER: 'quarter',
  MONTH: 'month',
  YEAR: 'year',
}

/*
* Time constants
*/
export const TIMES = {
  ONE_YEAR: 365,
  HALF_A_YEAR: 182,
  HALF_A_DAY_IN_MINS: 720,
  ONE_QTR: 90,
  ONE_MONTH: 30,
  ONE_DAY_IN_MINS: 1440,
  HALF_A_DAY: 0.5,
}


/**
 *
 * Determines interval to be used for line chart
 *
 * @param {Object} timeValues, list of object that contains timestamp of value
 */
export const getTimeInterval = (timeValues = []) => {
  if(!isEmpty(timeValues)){
    // Getting start date and end date from card values - assumption card values are sorted
    const startDate = moment(timeValues[0]?.timestamp);
    const endDate = moment(timeValues[(timeValues.length - 1)]?.timestamp);

    // Get difference in highest and smallest dates from card values
    const diffInMinutes = Math.abs(startDate.diff(endDate, 'minutes'));
    const diffInDays =  diffInMinutes / TIMES.ONE_DAY_IN_MINS;

    if (diffInMinutes <= TIMES.HALF_A_DAY_IN_MINS ){
      return INTERVALS.MINUTE;
    }
    if (diffInMinutes <= TIMES.ONE_DAY_IN_MINS){
      return INTERVALS.HOUR;
    }
    if (diffInDays <= TIMES.ONE_MONTH){
      return INTERVALS.DAY;
    }
    if (diffInDays <= TIMES.ONE_QTR){
      return INTERVALS.WEEK; 
    }
    if (diffInDays <= TIMES.HALF_A_YEAR){
      return INTERVALS.QUARTER;
    }
    if (diffInDays <= TIMES.ONE_YEAR){
      return INTERVALS.MONTH;
    }
    return INTERVALS.YEAR;
  }

  return INTERVALS.DAY;
}

Something similar could be implemented where the interval could be determined using the highest and lowest timestamp of the values for that specific time range

Environment/versions:

• OS: [e.g. MacOS, Windows]
• Browser: [e.g. chrome, safari]
• carbon-addons-iot-react version: [e.g. v2.60.0]

Additional context

If applicable, add screenshots to help explain your problem.

Add any other context about the problem here.

Specific timeline issues / requests

Do you want this work within a specific time period? Is it related to an upcoming release?

NB: The core contributors will try to work with your timeline, but it's not guaranteed. The earlier you make a request in advance of a desired delivery date, the better!

[JordanWSmith15]

@dianatran18 I believe I recall you mentioning that we are going to overhaul the date selector for cards in 8.8, in which case, I'd prefer to simply wait for this to be fixed upstream.