carbon-addons-iot-react
carbon-addons-iot-react copied to clipboard
[TimeSeriesCard] Interval is not dynamic based on inputted values
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:
- Go to https://carbon-addons-iot-react.com/?path=/story/1-watson-iot-timeseriescard--single-point
- Change the time range of the card
- 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!
@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.