I have made all these changes except the StreamingChart issue. I tried filling an array with null values inside the StreamingChart component while initializing initialState but still the issue is not resolved.
I have made following changes:
const initialState = [ Array.from(new Array(xRange).keys()), ...(data.datasets?.map((d)=>{ let nullValues = new Array(xRange - d.data.length).fill(null); let ret = [...nullValues, ...d.data]; ret.reverse(); return ret; })??{}), ];
It works fine if we initialize the data array with the null values but I'm not getting why this is not working.
I have few observations. You have added separate titles for graphs and other tabular data. This is inconsistent with existing UI.
For example,
like here:
like here:
The dashboard goes blank when I change refresh rates.
And regarding filling with nulls to fix the reversing issue of graph - you can do it in StreamingChart itself when setting initialState var, as it is StreamingChart's responsibility to do it.
I would like to request you all to review the changes and provide your valuable feedback. Your insights and suggestions would be invaluable in ensuring the quality and accuracy of the codebase.