fix: Data usage metrics chart included per day annotion (#6941)

Added a small annotation to the chart on how much data is included in the pro plan on average per day to make it easier to spot when a customer average above the included threshold. ![image](https://github.com/Unleash/unleash/assets/158948/c3105f87-03e0-4b27-9e3f-53c749c78078)
Unleash · Apr 29, 2024 · 3978c69 · 3978c69
1 parent 010c4ee
commit 3978c69
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 29 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -72,6 +72,7 @@
     "cartesian": "^1.0.1",
     "chart.js": "3.9.1",
     "chartjs-adapter-date-fns": "3.0.0",
+    "chartjs-plugin-annotation": "2.2.1",
     "classnames": "2.5.1",
     "copy-to-clipboard": "3.3.3",
     "countries-and-timezones": "^3.4.0",

diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx b/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx
@@ -30,6 +30,7 @@ import type { Theme } from '@mui/material/styles/createTheme';
 import Grid from '@mui/material/Grid';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { NetworkTrafficUsagePlanSummary } from './NetworkTrafficUsagePlanSummary';
+import annotationPlugin from 'chartjs-plugin-annotation';
 
 type ChartDatasetType = ChartDataset<'bar'>;
 
@@ -185,8 +186,36 @@ const customHighlightPlugin = {
 const createBarChartOptions = (
     theme: Theme,
     tooltipTitleCallback: (tooltipItems: any) => string,
+    includedTraffic?: number,
 ): ChartOptions<'bar'> => ({
     plugins: {
+        annotation: {
+            clip: false,
+            annotations: {
+                line: {
+                    type: 'line',
+                    borderDash: [5, 5],
+                    yMin: includedTraffic ? includedTraffic / 30 : 0,
+                    yMax: includedTraffic ? includedTraffic / 30 : 0,
+                    borderColor: 'gray',
+                    borderWidth: 1,
+                    display: !!includedTraffic,
+
+                    label: {
+                        backgroundColor: 'rgba(192, 192, 192,  0.8)',
+                        color: 'black',
+                        padding: {
+                            top: 10,
+                            bottom: 10,
+                            left: 10,
+                            right: 10,
+                        },
+                        content: 'Average daily requests included in your plan',
+                        display: !!includedTraffic,
+                    },
+                },
+            },
+        },
         legend: {
             position: 'bottom',
             labels: {
@@ -284,7 +313,7 @@ const endpointsInfo: Record<string, EndpointInfo> = {
     },
 };
 
-const proPlanIncludedRequests = 53000000;
+const proPlanIncludedRequests = 53_000_000;
 
 export const NetworkTrafficUsage: VFC = () => {
     usePageTitle('Network - Data Usage');
@@ -294,20 +323,28 @@ export const NetworkTrafficUsage: VFC = () => {
     const record = toPeriodsRecord(selectablePeriods);
     const [period, setPeriod] = useState<string>(selectablePeriods[0].key);
 
+    const { isOss, isPro } = useUiConfig();
+
+    const includedTraffic = isPro() ? proPlanIncludedRequests : 0;
+
     const options = useMemo(() => {
-        return createBarChartOptions(theme, (tooltipItems: any) => {
-            const periodItem = record[period];
-            const tooltipDate = new Date(
-                periodItem.year,
-                periodItem.month,
-                Number.parseInt(tooltipItems[0].label),
-            );
-            return tooltipDate.toLocaleDateString('en-US', {
-                month: 'long',
-                day: 'numeric',
-                year: 'numeric',
-            });
-        });
+        return createBarChartOptions(
+            theme,
+            (tooltipItems: any) => {
+                const periodItem = record[period];
+                const tooltipDate = new Date(
+                    periodItem.year,
+                    periodItem.month,
+                    Number.parseInt(tooltipItems[0].label),
+                );
+                return tooltipDate.toLocaleDateString('en-US', {
+                    month: 'long',
+                    day: 'numeric',
+                    year: 'numeric',
+                });
+            },
+            includedTraffic,
+        );
     }, [theme, period]);
 
     const traffic = useInstanceTrafficMetrics(period);
@@ -323,7 +360,6 @@ export const NetworkTrafficUsage: VFC = () => {
         datasets,
     };
 
-    const { isOss } = useUiConfig();
     const flagEnabled = useUiFlag('displayTrafficDataUsage');
 
     useEffect(() => {
@@ -368,9 +404,7 @@ export const NetworkTrafficUsage: VFC = () => {
                                 <Grid item xs={7} md={5.5}>
                                     <NetworkTrafficUsagePlanSummary
                                         usageTotal={usageTotal}
-                                        planIncludedRequests={
-                                            proPlanIncludedRequests
-                                        }
+                                        includedTraffic={includedTraffic}
                                     />
                                 </Grid>
                             </Grid>
@@ -406,6 +440,7 @@ export const NetworkTrafficUsage: VFC = () => {
 
 // Register dependencies that we need to draw the chart.
 ChartJS.register(
+    annotationPlugin,
     CategoryScale,
     LinearScale,
     BarElement,

diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsagePlanSummary.tsx b/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsagePlanSummary.tsx
@@ -4,7 +4,6 @@ import Grid from '@mui/material/Grid';
 import { flexRow } from 'themes/themeStyles';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Badge } from 'component/common/Badge/Badge';
-import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 const StyledContainer = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -45,15 +44,14 @@ const StyledNumbersDiv = styled('div')(({ theme }) => ({
 
 interface INetworkTrafficUsagePlanSummary {
     usageTotal: number;
-    planIncludedRequests: number;
+    includedTraffic: number;
 }
 
 export const NetworkTrafficUsagePlanSummary = ({
     usageTotal,
-    planIncludedRequests,
+    includedTraffic,
 }: INetworkTrafficUsagePlanSummary) => {
-    const { isPro } = useUiConfig();
-    const overages = usageTotal - planIncludedRequests;
+    const overages = usageTotal - includedTraffic;
     return (
         <StyledContainer>
             <Grid item>
@@ -65,11 +63,11 @@ export const NetworkTrafficUsagePlanSummary = ({
                         Incoming requests selected month{' '}
                         <StyledNumbersDiv>
                             <ConditionallyRender
-                                condition={isPro()}
+                                condition={includedTraffic > 0}
                                 show={
                                     <ConditionallyRender
                                         condition={
-                                            usageTotal <= planIncludedRequests
+                                            usageTotal <= includedTraffic
                                         }
                                         show={
                                             <Badge color='success'>
@@ -95,21 +93,20 @@ export const NetworkTrafficUsagePlanSummary = ({
                     </RowContainer>
                 </StyledCardDescription>
                 <ConditionallyRender
-                    condition={isPro()}
+                    condition={includedTraffic > 0}
                     show={
                         <StyledCardDescription>
                             <RowContainer>
                                 Included in your plan monthly
                                 <StyledNumbersDiv>
-                                    {planIncludedRequests.toLocaleString()}{' '}
-                                    requests
+                                    {includedTraffic.toLocaleString()} requests
                                 </StyledNumbersDiv>
                             </RowContainer>
                         </StyledCardDescription>
                     }
                 />
                 <ConditionallyRender
-                    condition={isPro() && overages > 0}
+                    condition={includedTraffic > 0 && overages > 0}
                     show={
                         <StyledCardDescription>
                             <RowContainer>

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -3136,6 +3136,11 @@ chartjs-adapter-date-fns@3.0.0:
   resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz#c25f63c7f317c1f96f9a7c44bd45eeedb8a478e5"
   integrity sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==
 
+chartjs-plugin-annotation@2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/chartjs-plugin-annotation/-/chartjs-plugin-annotation-2.2.1.tgz#b7c359e46814b27632d9648584435d64c183427c"
+  integrity sha512-RL9UtrFr2SXd7C47zD0MZqn6ZLgrcRt3ySC6cYal2amBdANcYB1QcwFXcpKWAYnO4SGJYRok7P5rKDDNgJMA/w==
+
 check-error@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.3.tgz#a6502e4312a7ee969f646e83bb3ddd56281bd694"