Make the tooltip for project selection in the playground work properly
again. Right now, it doesn't work due to an error in react refs.
Because we wrap this in a tooltip in the Playground, we need to forward
the ref to the underlying component.
This follows the steps outlined in
https://mui.com/material-ui/guides/composition/#caveat-with-refs
Provides store method for retrieving traffic usage data based on
period parameter, and UI + ui hook with the new chart for displaying
traffic usage data spread out over selectable month.
In this PR we copied and adapted a plugin written by DX for highlighting
a column in the chart:
There are some minor improvements planned which will come in a separate
PR, reversing the order in legend and tooltip so the colors go from
light to dark, and adding a month -sum below the legend
## Discussion points
- Should any of this be extracted as a separate reusable component?
---------
Co-authored-by: Nuno Góis <github@nunogois.com>
Preview (eye icon) on a segment in "targetting" when creating or editing
a strategy now corectly shows details of a segment.
Previously it was not showing constraints present in this segment
This PR fixes a bug where editing the default strategy would not refresh
the resource it was depending on to display the data. This also surfaces
another issue, which is that project settings is using data from the
getProjectOverview hook to display the default strategies in each
environment. This should be it's own resource, but that is beyond the
scope of this PR.
This change makes the tooltip still render values and headers that are
`N/A` (instead of not rendering them at all).
This makes the tooltip more consistent and predictable. At least to
me, it was confusing that some of the values were just hidden sometimes.
I've also added a test to make sure that the tooltip renders the N/A
values.
This is what it looks like now:
Various ui enhancements
Aggregates the time to production and metrics summary by averaging by
date across all projects to get the value. Creates a single dataset for
the aggregation. This makes theme behave like eg the Health chart
(showing aggregated graph when show all projects and per project when
not)
Gradient fill when all projects across all related charts
Attached recording with generated data for 3 months
https://github.com/Unleash/unleash/assets/104830839/7acd80a8-b799-4a35-9a2e-bf3798f56d32
---------
Signed-off-by: andreas-unleash <andreas@getunleash.ai>
This PR fixes these errors (that were showing up in the dev console) in
the insights pages:
- nesting a div within a p in the count header (flags, environments,
apps); instead flip the relationship and nest the p within the div
- missing keys in mapped components
- passing a boolean "scrolled" value to the underlying component (a div)
is invalid: instead, make it so that that prop is not passed
The only one of these that could have a visual impact is the first one
(p>div -> div>p), but it appears to be the same to me.
Here's before the change:
And here's after:
