Skip to content

Commit

Permalink
chore: verify chart names and tooltips (#6635)
Browse files Browse the repository at this point in the history 
Centralises and improves the chart title and tooltip descriptions.  

Closes

[1-2199](https://linear.app/unleash/issue/1-2199/verify-tooltip-texts-and-explanations-are-clear-enough)
[1-2200](https://linear.app/unleash/issue/1-2200/verify-chart-naming)

---------

Signed-off-by: andreas-unleash <[email protected]>
Co-authored-by: Thomas Heartman <[email protected]>
  • Loading branch information
@andreas-unleash @thomasheartman
andreas-unleash and thomasheartman authored Mar 20, 2024
1 parent 84707e2 commit 859fe09
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 36 deletions.
58 changes: 22 additions & 36 deletions frontend/src/component/executiveDashboard/Charts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import type { GroupedDataByProject } from './hooks/useGroupedProjectTrends';
import { Box, styled } from '@mui/material';
import { allOption } from '../common/ProjectSelect/ProjectSelect';
import type { VFC } from 'react';
import { chartInfo } from './chart-info';

interface IChartsProps {
flagTrends: ExecutiveSummarySchema['flagTrends'];
Expand Down Expand Up @@ -83,7 +84,7 @@ export const Charts: VFC<IChartsProps> = ({
<ConditionallyRender
condition={showAllProjects}
show={
<Widget title='Total users'>
<Widget {...chartInfo.totalUsers}>
<UserStats
count={users.total}
active={users.active}
Expand All @@ -93,11 +94,9 @@ export const Charts: VFC<IChartsProps> = ({
}
elseShow={
<Widget
title={
isOneProjectSelected
? 'Users in project'
: 'Users per project on average'
}
{...(isOneProjectSelected
? chartInfo.usersInProject
: chartInfo.avgUsersPerProject)}
>
<UserStats count={summary.averageUsers} />
</Widget>
Expand All @@ -106,25 +105,22 @@ export const Charts: VFC<IChartsProps> = ({
<ConditionallyRender
condition={showAllProjects}
show={
<ChartWidget title='Users'>
<ChartWidget {...chartInfo.users}>
<UsersChart
userTrends={userTrends}
isLoading={loading}
/>
</ChartWidget>
}
elseShow={
<ChartWidget title='Users per project'>
<ChartWidget {...chartInfo.usersPerProject}>
<UsersPerProjectChart
projectFlagTrends={groupedProjectsData}
/>
</ChartWidget>
}
/>
<Widget
title='Total flags'
tooltip='Active flags (not archived) that currently exist across selected projects.'
>
<Widget {...chartInfo.totalFlags}>
<FlagStats
count={summary.total}
flagsPerUser={
Expand All @@ -137,25 +133,22 @@ export const Charts: VFC<IChartsProps> = ({
<ConditionallyRender
condition={showAllProjects}
show={
<ChartWidget title='Number of flags'>
<ChartWidget {...chartInfo.flags}>
<FlagsChart
flagTrends={flagTrends}
isLoading={loading}
/>
</ChartWidget>
}
elseShow={
<ChartWidget title='Flags per project'>
<ChartWidget {...chartInfo.flagsPerProject}>
<FlagsProjectChart
projectFlagTrends={groupedProjectsData}
/>
</ChartWidget>
}
/>
<Widget
title='Average health'
tooltip='Average health is a percentage of flags that are not stale nor potencially stale.'
>
<Widget {...chartInfo.averageHealth}>
<HealthStats
value={summary.averageHealth}
healthy={summary.active}
Expand All @@ -164,29 +157,22 @@ export const Charts: VFC<IChartsProps> = ({
/>
</Widget>
<ChartWidget
title={
showAllProjects ? 'Healthy flags' : 'Health per project'
}
tooltip='How the health changes over time'
{...(showAllProjects
? chartInfo.overallHealth
: chartInfo.healthPerProject)}
>
<ProjectHealthChart
projectFlagTrends={groupedProjectsData}
isAggregate={showAllProjects}
/>
</ChartWidget>
<Widget
title='Average time to production'
tooltip='How long did it take on average from a feature toggle was created until it was enabled in an environment of type production. This is calculated only from feature toggles with the type of "release" and averaged across selected projects. '
>
<Widget {...chartInfo.averageTimeToProduction}>
<TimeToProduction daysToProduction={avgDaysToProduction} />
</Widget>
<ChartWidget
title={
showAllProjects
? 'Time to production'
: 'Time to production per project'
}
tooltip='How the time to production changes over time'
{...(showAllProjects
? chartInfo.timeToProduction
: chartInfo.timeToProductionPerProject)}
>
<TimeToProductionChart
projectFlagTrends={groupedProjectsData}
Expand All @@ -195,17 +181,17 @@ export const Charts: VFC<IChartsProps> = ({
</ChartWidget>
</StyledGrid>
<Widget
title={showAllProjects ? 'Metrics' : 'Metrics per project'}
tooltip='Summary of all flag evaluations reported by SDKs.'
{...(showAllProjects
? chartInfo.metrics
: chartInfo.metricsPerProject)}
>
<MetricsSummaryChart
metricsSummaryTrends={groupedMetricsData}
isAggregate={showAllProjects}
/>
</Widget>
<Widget
title='Updates per environment type'
tooltip='Summary of all configuration updates per environment type'
{...chartInfo.updates}
sx={{ mt: (theme) => theme.spacing(2) }}
>
<UpdatesPerEnvironmentTypeChart
Expand Down
82 changes: 82 additions & 0 deletions frontend/src/component/executiveDashboard/chart-info.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
export const chartInfo = {
totalUsers: {
title: 'Total users',
tooltip: 'Total number of current users.',
},
usersInProject: {
title: 'Users in project',
tooltip: 'Average number of users for selected projects.',
},
avgUsersPerProject: {
title: 'Users per project on average',
tooltip: 'Number of users in selected projects.',
},
users: {
title: 'Users',
tooltip: 'How the number of users changes over time.',
},
usersPerProject: {
title: 'Users per project',
tooltip:
'How the number of users changes over time for the selected projects.',
},
totalFlags: {
title: 'Total flags',
tooltip:
'Active flags (not archived) that currently exist across the selected projects.',
},
flags: {
title: 'Number of flags',
tooltip:
'How the number of flags has changed over time across all projects.',
},
flagsPerProject: {
title: 'Flags per project',
tooltip:
'How the number of flags changes over time for the selected projects.',
},
averageHealth: {
title: 'Average health',
tooltip:
'Average health is the current percentage of flags in the selected projects that are not stale or potentially stale.',
},
overallHealth: {
title: 'Overall Health',
tooltip:
'How the overall health changes over time across all projects.',
},
healthPerProject: {
title: 'Health per project',
tooltip:
'How the overall health changes over time for the selected projects.',
},
averageTimeToProduction: {
title: 'Average time to production',
tooltip:
'How long does it currently take on average from when a feature flag was created until it was enabled in a "production" type environment. This is calculated only from feature flags of the type "release" and is averaged across the selected projects.',
},
timeToProduction: {
title: 'Time to production',
tooltip:
'How the average time to production changes over time across all projects.',
},
timeToProductionPerProject: {
title: 'Time to production per project',
tooltip:
'How the average time to production changes over time for the selected projects.',
},
metrics: {
title: 'Flag evaluation metrics',
tooltip:
'Summary of all flag evaluations reported by SDKs across all projects.',
},
metricsPerProject: {
title: 'Flag evaluation metrics per project',
tooltip:
'Summary of all flag evaluations reported by SDKs for the selected projects.',
},
updates: {
title: 'Updates per environment type',
tooltip: 'Summary of all configuration updates per environment type.',
},
};

0 comments on commit 859fe09

Please sign in to comment.