From 859fe098fedc261d646833012d9d408039491075 Mon Sep 17 00:00:00 2001
From: andreas-unleash <andreas@getunleash.ai>
Date: Wed, 20 Mar 2024 17:38:49 +0200
Subject: [PATCH] chore: verify chart names and tooltips (#6635)

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 <andreas@getunleash.ai>
Co-authored-by: Thomas Heartman <thomas@getunleash.io>
---
 .../component/executiveDashboard/Charts.tsx   | 58 +++++--------
 .../executiveDashboard/chart-info.ts          | 82 +++++++++++++++++++
 2 files changed, 104 insertions(+), 36 deletions(-)
 create mode 100644 frontend/src/component/executiveDashboard/chart-info.ts

diff --git a/frontend/src/component/executiveDashboard/Charts.tsx b/frontend/src/component/executiveDashboard/Charts.tsx
index 2369b0d724..06eaea9ba9 100644
--- a/frontend/src/component/executiveDashboard/Charts.tsx
+++ b/frontend/src/component/executiveDashboard/Charts.tsx
@@ -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'];
@@ -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}
@@ -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>
@@ -106,7 +105,7 @@ export const Charts: VFC<IChartsProps> = ({
                 <ConditionallyRender
                     condition={showAllProjects}
                     show={
-                        <ChartWidget title='Users'>
+                        <ChartWidget {...chartInfo.users}>
                             <UsersChart
                                 userTrends={userTrends}
                                 isLoading={loading}
@@ -114,17 +113,14 @@ export const Charts: VFC<IChartsProps> = ({
                         </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={
@@ -137,7 +133,7 @@ export const Charts: VFC<IChartsProps> = ({
                 <ConditionallyRender
                     condition={showAllProjects}
                     show={
-                        <ChartWidget title='Number of flags'>
+                        <ChartWidget {...chartInfo.flags}>
                             <FlagsChart
                                 flagTrends={flagTrends}
                                 isLoading={loading}
@@ -145,17 +141,14 @@ export const Charts: VFC<IChartsProps> = ({
                         </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}
@@ -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}
@@ -195,8 +181,9 @@ 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}
@@ -204,8 +191,7 @@ export const Charts: VFC<IChartsProps> = ({
                 />
             </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
diff --git a/frontend/src/component/executiveDashboard/chart-info.ts b/frontend/src/component/executiveDashboard/chart-info.ts
new file mode 100644
index 0000000000..4754956386
--- /dev/null
+++ b/frontend/src/component/executiveDashboard/chart-info.ts
@@ -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.',
+    },
+};