feat: personal flag metrics display #8232
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
Dependency Review✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.OpenSSF Scorecard
Scanned Manifest Files |
| } | ||
|
|
||
| export const FEATURE_METRIC_HOURS_BACK_DEFAULT = 48; | ||
|
|
||
| export const FeatureMetricsHours = ({ | ||
| hoursBack, | ||
| setHoursBack, | ||
| label = <StyledTitle>Period</StyledTitle>, |
There was a problem hiding this comment.
allowing to disable the label by passing undefined. In the feature metrics the label is needed but in personal dashboard it's not.
There was a problem hiding this comment.
As long as this doesn't cause any a11y issues, I have no problems. But I notice that the general select component doesn't have a label associated with it. Input elements should always be properly labeled (with label elements tied to the component). You can hide the label visually if you want, but it should def be there for assistive tech.
There was a problem hiding this comment.
Of course, the input's been around for a while, probably, but we can still fix it up now that we're here 💁🏼
| return `${value} (${percentage}%) - ${key}`; | ||
| }; | ||
|
|
||
| export const createPlaceholderBarChartOptions = ( |
There was a problem hiding this comment.
moved from a separate file
| hoursBack: number, | ||
| locationSettings: ILocationSettings, | ||
| ): ChartOptions<'bar'> => { | ||
| const { plugins, responsive, elements, interaction, scales } = |
There was a problem hiding this comment.
reuse options that we share with the placeholder settings
| return { | ||
| plugins: { | ||
| legend: plugins?.legend, | ||
| tooltip: { |
There was a problem hiding this comment.
tooltip only shows up when we have metrics data, it's not present in the placeholder. The styles are copied from the NetworkTrafficUsage. We may eventually create a shared tooltip styling after we get another use case (avoid premature abstraction)
| usePointStyle: true, | ||
| caretSize: 0, | ||
| boxPadding: 10, | ||
| callbacks: { |
There was a problem hiding this comment.
all the callbacks are copied from the feature metrics line chart
| ticks: { | ||
| color: theme.palette.text.secondary, | ||
| callback(tickValue) { | ||
| const label = this.getLabelForValue(Number(tickValue)); |
There was a problem hiding this comment.
this was tricky to find. chartjs doesn't return timestamps in the callback but indices. So I lookup the actual value using a utility function provided in the latest version of chartjs
| return { environment, setEnvironment, activeEnvironments }; | ||
| }; | ||
|
|
||
| const useFlagMetrics = ( |
There was a problem hiding this comment.
copied all this code from the feature metrics. One difference is that now we have a hook that prepares chart options + chart data in one function instead of going through multiple components
| @@ -0,0 +1,42 @@ | |||
| import type { IFeatureMetricsRaw } from 'interfaces/featureToggle'; | |||
There was a problem hiding this comment.
this is a copy paste of the feature metrics with colors swapped and total series removed
| } | ||
|
|
||
| export const FEATURE_METRIC_HOURS_BACK_DEFAULT = 48; | ||
|
|
||
| export const FeatureMetricsHours = ({ | ||
| hoursBack, | ||
| setHoursBack, | ||
| label = <StyledTitle>Period</StyledTitle>, |
There was a problem hiding this comment.
As long as this doesn't cause any a11y issues, I have no problems. But I notice that the general select component doesn't have a label associated with it. Input elements should always be properly labeled (with label elements tied to the component). You can hide the label visually if you want, but it should def be there for assistive tech.
| } | ||
|
|
||
| export const FEATURE_METRIC_HOURS_BACK_DEFAULT = 48; | ||
|
|
||
| export const FeatureMetricsHours = ({ | ||
| hoursBack, | ||
| setHoursBack, | ||
| label = <StyledTitle>Period</StyledTitle>, |
There was a problem hiding this comment.
Of course, the input's been around for a while, probably, but we can still fix it up now that we're here 💁🏼
About the changes
Details:
Next steps:
Important files
Discussion points