feat: Make time shifted series colors match the original series #24048
Conversation
| isString(series.name) | ||
| ? !!timeCompare.find( | ||
| timeOffset => | ||
| // offset is represented as <offset>, group by list |
There was a problem hiding this comment.
@villebro I tried changing the way metrics with and without dimensions are displayed but ended up in a rabbit hole. I decided to restrain the scope of the PR. If we decide to change that later, it will be easy to simplify this code.
There was a problem hiding this comment.
Sounds good, I can take a stab at it, too 👍
| @@ -227,30 +230,43 @@ export default function transformProps( | |||
| contributionMode || isAreaExpand ? ',.0%' : yAxisFormat, | |||
| ); | |||
|
|
|||
| const array = ensureIsArray(chartProps.rawFormData?.time_compare); | |||
| const inverted = invert(verboseMap); | |||
There was a problem hiding this comment.
The data series are transformed to use the verbose name but I need the original name to compare against the result.
Codecov Report
@@ Coverage Diff @@
## master #24048 +/- ##
==========================================
+ Coverage 68.13% 68.22% +0.08%
==========================================
Files 1941 1943 +2
Lines 75304 75225 -79
Branches 8166 8151 -15
==========================================
+ Hits 51312 51325 +13
+ Misses 21903 21814 -89
+ Partials 2089 2086 -3
Flags with carried forward coverage won't be shown. Click here to find out more.
... and 1 file with indirect coverage changes 📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more |
| rawSeries.forEach(entry => { | ||
| const lineStyle = isDerivedSeries(entry, chartProps.rawFormData) | ||
| ? { type: 'dashed' as ZRLineType } | ||
| : {}; | ||
| const transformedSeries = transformSeries(entry, colorScale, { |
There was a problem hiding this comment.
A thought for future improvement - we may want to use different patterns to disambiguate the different derived series from one another. dasharray could be useful to create half a dozen or so different patterns:
There was a problem hiding this comment.
@villebro we did a quick hackathon on this, and the echart option works great. We haven't put up a PR yet because there's more that needs to be done around toggling the visualization on/off per user.
There was a problem hiding this comment.
@eschutho nice, this would be a really nice improvement! ❤️
mistercrunch
added
🏷️ bot
|
For Mixed Series Diagrams the time shifted line looks absolutely like original |
SUMMARY
This PR upgrades Timeseries ECharts to display time shifted series as dashed lines and using the same color as the original series.
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Screen.Recording.2023-05-12.at.15.30.22.mov
TESTING INSTRUCTIONS
Check the video for instructions.
ADDITIONAL INFORMATION