[CSM] Use stacked chart for page views (#78042) (#78170)

elastic · Sep 22, 2020 · 65a2b7e · 65a2b7e
1 parent cea299b
commit 65a2b7e
Show file tree

Hide file tree

Showing 5 changed files with 403 additions and 31 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageViewsChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageViewsChart.tsx
@@ -33,7 +33,10 @@ import { ChartWrapper } from '../ChartWrapper';
 import { I18LABELS } from '../translations';
 
 interface Props {
-  data?: Array<Record<string, number | null>>;
+  data?: {
+    topItems: string[];
+    items: Array<Record<string, number | null>>;
+  };
   loading: boolean;
 }
 
@@ -68,15 +71,9 @@ export function PageViewsChart({ data, loading }: Props) {
     });
   };
 
-  let breakdownAccessors: Set<string> = new Set();
-  if (data && data.length > 0) {
-    data.forEach((item) => {
-      breakdownAccessors = new Set([
-        ...Array.from(breakdownAccessors),
-        ...Object.keys(item).filter((key) => key !== 'x'),
-      ]);
-    });
-  }
+  const breakdownAccessors = data?.topItems?.length ? data?.topItems : ['y'];
+
+  const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
   const customSeriesNaming: SeriesNameFn = ({ yAccessor }) => {
     if (yAccessor === 'y') {
@@ -86,8 +83,6 @@ export function PageViewsChart({ data, loading }: Props) {
     return yAccessor;
   };
 
-  const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
-
   return (
     <ChartWrapper loading={loading} height="250px">
       {(!loading || data) && (
@@ -115,15 +110,17 @@ export function PageViewsChart({ data, loading }: Props) {
             id="page_views"
             title={I18LABELS.pageViews}
             position={Position.Left}
-            tickFormat={(d) => numeral(d).format('0a')}
+            tickFormat={(d) => numeral(d).format('0')}
+            labelFormat={(d) => numeral(d).format('0a')}
           />
           <BarSeries
             id={I18LABELS.pageViews}
             xScaleType={ScaleType.Time}
             yScaleType={ScaleType.Linear}
             xAccessor="x"
             yAccessors={Array.from(breakdownAccessors)}
-            data={data ?? []}
+            stackAccessors={['x']}
+            data={data?.items ?? []}
             name={customSeriesNaming}
           />
         </Chart>

diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_page_view_trends.ts b/x-pack/plugins/apm/server/lib/rum_client/get_page_view_trends.ts
@@ -51,6 +51,16 @@ export async function getPageViewTrends({
               }
             : undefined,
         },
+        ...(breakdownItem
+          ? {
+              topBreakdowns: {
+                terms: {
+                  field: breakdownItem.fieldName,
+                  size: 9,
+                },
+              },
+            }
+          : {}),
       },
     },
   });
@@ -59,25 +69,44 @@ export async function getPageViewTrends({
 
   const response = await apmEventClient.search(params);
 
+  const { topBreakdowns } = response.aggregations ?? {};
+
+  // we are only displaying top 9
+  const topItems: string[] = (topBreakdowns?.buckets ?? []).map(
+    ({ key }) => key as string
+  );
+
   const result = response.aggregations?.pageViews.buckets ?? [];
 
-  return result.map((bucket) => {
-    const { key: xVal, doc_count: bCount } = bucket;
-    const res: Record<string, null | number> = {
-      x: xVal,
-      y: bCount,
-    };
-    if ('breakdown' in bucket) {
-      const categoryBuckets = bucket.breakdown.buckets;
-      categoryBuckets.forEach(({ key, doc_count: docCount }) => {
-        if (key === 'Other') {
-          res[key + `(${breakdownItem?.name})`] = docCount;
-        } else {
-          res[key] = docCount;
+  return {
+    topItems,
+    items: result.map((bucket) => {
+      const { key: xVal, doc_count: bCount } = bucket;
+      const res: Record<string, number> = {
+        x: xVal,
+        y: bCount,
+      };
+      if ('breakdown' in bucket) {
+        let top9Count = 0;
+        const categoryBuckets = bucket.breakdown.buckets;
+        categoryBuckets.forEach(({ key, doc_count: docCount }) => {
+          if (topItems.includes(key as string)) {
+            if (res[key]) {
+              // if term is already in object, just add it to it
+              res[key] += docCount;
+            } else {
+              res[key] = docCount;
+            }
+            top9Count += docCount;
+          }
+        });
+        // Top 9 plus others, get a diff from parent bucket total
+        if (bCount > top9Count) {
+          res.Other = bCount - top9Count;
         }
-      });
-    }
+      }
 
-    return res;
-  });
+      return res;
+    }),
+  };
 }