Time Series Functionality Request

[PatrickDuncan]

I am submitting a...

• Feature request

Issue description

Similar to #113 and #258

Hello, I'm apart of the IBM Cloud Monitoring team and we need the ability to visualize time-series. One of our major projects is blocked by this and we're requesting that the priority be elevated. We heard that the functionality is projected for Q3 and we just wanted to solidify the commitment.

We're aware of carbon-addons-data-viz-react, but it is no longer maintained. With the current carbon-charts: creating a label for each timestamp wouldn't work for us.

Feature Proposal

• Automatically labels the x-axis based on the timestamps provided to a data list
• start prop that specifies at what time to start displaying the entries from data
• end prop that specifies at what time to stop displaying the entries from data
• Validation that start < end
• Adjusts x-axis for any number of data lists from the datasets prop
  • Basically just find the min and max from all data lists and scale the x-axis time-stamps accordingly

Screenshot or recording

(From #113)

[PatrickDuncan]

Design & Functionality

Features

• Automatic x-axis population from data points with correct resolution
• Cursor hover vertical line
  • Shows what the value on the x-axis is
  • Shows the values for each dataset at the same time
• Filled line graph with alpha
  • Alpha set to 100% / len(datasets) I assume
• The start and end props stated in the OP are required

It would also be nice if the chart demos had the respective React code. It's hard to know what props to use and how to use them with your docs compared to other graphing libraries. For example, how to make a line graph curved.

Thanks!

[theiliad]

Design & Functionality

Features

• Automatic x-axis population from data points with correct resolution

• Cursor hover vertical line

  • Shows what the value on the x-axis is
  • Shows the values for each dataset at the same time

• Filled line graph with alpha

  • Alpha set to 100% / len(datasets) I assume

• The start and end props stated in the OP are required

It would also be nice if the chart demos had the respective React code. It's hard to know what props to use and how to use them with your docs compared to other graphing libraries. For example, how to make a line graph curved.

Thanks!

Great! It's good to have that screenshot to account for your use case

[PatrickDuncan]

It would also be nice if the graph components re-render when receiving a modified data prop. With most time series applications, data is continuously fetched and pushed to the graph. Using a different key prop mimics the behaviour, but is bad for performance since it always renders a new graph component on every render.

https://imgur.com/ELp9DxH

[theiliad]

It would also be nice if the graph components re-render when receiving a modified data prop. With most time series applications, data is continuously fetched and pushed to the graph. Using a different key prop mimics the behaviour, but is bad for performance since it always renders a new graph component on every render.

https://imgur.com/ELp9DxH

Current charts should be able to handle data updates and re-renders on all components.
There's also a refactor to our rendering engine coming that'll enhance that logic