Display and sort by percentages in TopN subcharts (#82)

* Switch to EuiSplitPanel for subcharts * Add percentages to subcharts * Simplify subchart ordering * Simplify calculating percentages per category
elastic · Jul 4, 2022 · ac367f5 · ac367f5
1 parent 56a24a9
commit ac367f5
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 49 deletions.
diff --git a/src/plugins/profiling/common/topn.ts b/src/plugins/profiling/common/topn.ts
@@ -15,9 +15,12 @@ import {
 
 import { StackFrameMetadata } from './profiling';
 
-export interface TopNSample {
+export interface CountPerTime {
   Timestamp: number;
   Count: number;
+}
+
+export interface TopNSample extends CountPerTime {
   Category: string;
 }
 
@@ -62,15 +65,37 @@ export function createTopNSamples(histogram: AggregationsHistogramAggregate): To
   return orderBy(samples, ['Timestamp', 'Count', 'Category'], ['asc', 'desc', 'asc']);
 }
 
-export function groupSamplesByCategory(samples: TopNSample[]) {
-  const series = new Map();
+export interface TopNSubchart {
+  Category: string;
+  Percentage: number;
+  Series: CountPerTime[];
+}
+
+export function groupSamplesByCategory(samples: TopNSample[]): TopNSubchart[] {
+  const seriesByCategory = new Map<string, CountPerTime[]>();
+  let total = 0;
+
   for (let i = 0; i < samples.length; i++) {
-    const v = samples[i];
-    if (!series.has(v.Category)) {
-      series.set(v.Category, []);
+    const sample = samples[i];
+
+    if (!seriesByCategory.has(sample.Category)) {
+      seriesByCategory.set(sample.Category, []);
     }
-    const value = series.get(v.Category);
-    value.push([v.Timestamp, v.Count]);
+    const series = seriesByCategory.get(sample.Category)!;
+    series.push({ Timestamp: sample.Timestamp, Count: sample.Count });
+
+    total += sample.Count;
   }
-  return series;
+
+  const subcharts: TopNSubchart[] = [];
+  for (const [category, series] of seriesByCategory) {
+    const totalPerCategory = series.reduce((sum, { Count }) => sum + Count, 0);
+    subcharts.push({
+      Category: category,
+      Percentage: (totalPerCategory / total) * 100,
+      Series: series,
+    });
+  }
+
+  return orderBy(subcharts, ['Percentage', 'Category'], ['desc', 'asc']);
 }
diff --git a/src/plugins/profiling/public/app.tsx b/src/plugins/profiling/public/app.tsx
@@ -103,7 +103,7 @@ function App({ fetchTopN, fetchElasticFlamechart }: Props) {
 
   const [topn, setTopN] = useState({
     samples: [],
-    series: new Map(),
+    subcharts: [],
   });
 
   const [elasticFlamegraph, setElasticFlamegraph] = useState({});

diff --git a/src/plugins/profiling/public/components/bar-chart.tsx b/src/plugins/profiling/public/components/bar-chart.tsx
@@ -29,7 +29,7 @@ export const BarChart: React.FC<BarChartProps> = ({ id, name, height, data, x, y
   return (
     <Chart size={{ height }}>
       <Settings showLegend={false} />
-      <BarSeries id={id} name={name} data={data} xScaleType="time" xAccessor={0} yAccessors={[1]} />
+      <BarSeries id={id} name={name} data={data} xScaleType="time" xAccessor={x} yAccessors={[y]} />
       <Axis id="bottom-axis" position="bottom" tickFormat={timeFormatter('YYYY-MM-DD HH:mm:ss')} />
       <Axis id="left-axis" position="left" showGridLines tickFormat={(d) => Number(d).toFixed(0)} />
     </Chart>

diff --git a/src/plugins/profiling/public/components/chart-grid.tsx b/src/plugins/profiling/public/components/chart-grid.tsx
@@ -9,59 +9,66 @@
 import React, { useContext, useEffect } from 'react';
 
 import {
-  EuiCard,
   EuiFlexGrid,
+  EuiFlexGroup,
   EuiFlexItem,
   EuiNotificationBadge,
   EuiSpacer,
+  EuiSplitPanel,
   EuiTitle,
 } from '@elastic/eui';
 
-import { TopNContext } from './contexts/topn';
 import { BarChart } from './bar-chart';
+import { TopNContext } from './contexts/topn';
+import { TopNSubchart } from '../../common/topn';
 
 export interface ChartGridProps {
   maximum: number;
 }
 
-export const ChartGrid: React.FC<ChartGridProps> = ({ maximum }) => {
-  const ctx = useContext(TopNContext);
-  const printSubCharts = (series: any) => {
-    let keys: string[] = Array.from(series.keys());
-    const ncharts = Math.min(maximum, series.size);
-    keys = keys.slice(0, ncharts);
+function printSubCharts(subcharts: TopNSubchart[], maximum: number) {
+  const ncharts = Math.min(maximum, subcharts.length);
 
-    const charts = [];
-    for (let i = 0; i < ncharts; i++) {
-      const subdata = ctx.series.get(keys[i]);
-      const uniqueID = `bar-chart-${i}`;
+  const charts = [];
+  for (let i = 0; i < ncharts; i++) {
+    const subchart = subcharts[i];
+    const uniqueID = `bar-chart-${i}`;
 
-      const barchart = (
-        <BarChart id={uniqueID} name={keys[i]} height={200} data={subdata} x="x" y="y" />
-      );
+    const barchart = (
+      <BarChart
+        id={uniqueID}
+        name={subchart.Category}
+        height={200}
+        data={subchart.Series}
+        x="Timestamp"
+        y="Count"
+      />
+    );
 
-      const title = (
-        <div>
+    const title = (
+      <EuiFlexGroup gutterSize="m">
+        <EuiFlexItem grow={false}>
           <EuiNotificationBadge>{i + 1}</EuiNotificationBadge>
-          &emsp;
-          {keys[i]}
-        </div>
-      );
+        </EuiFlexItem>
+        <EuiFlexItem>{subchart.Category}</EuiFlexItem>
+        <EuiFlexItem grow={false}>{subchart.Percentage.toFixed(2)}%</EuiFlexItem>
+      </EuiFlexGroup>
+    );
 
-      const card = (
-        <EuiCard
-          layout="horizontal"
-          onClick={() => {}}
-          title={title}
-          display="plain"
-          description={barchart}
-        />
-      );
+    const card = (
+      <EuiSplitPanel.Outer>
+        <EuiSplitPanel.Inner>{title}</EuiSplitPanel.Inner>
+        <EuiSplitPanel.Inner>{barchart}</EuiSplitPanel.Inner>
+      </EuiSplitPanel.Outer>
+    );
 
-      charts.push(<EuiFlexItem>{card}</EuiFlexItem>);
-    }
-    return charts;
-  };
+    charts.push(<EuiFlexItem>{card}</EuiFlexItem>);
+  }
+  return charts;
+}
+
+export const ChartGrid: React.FC<ChartGridProps> = ({ maximum }) => {
+  const ctx = useContext(TopNContext);
 
   useEffect(() => {
     console.log(new Date().toISOString(), 'updated chart-grid');
@@ -71,11 +78,11 @@ export const ChartGrid: React.FC<ChartGridProps> = ({ maximum }) => {
     <>
       <EuiSpacer />
       <EuiTitle size="s">
-        <h1>Top {ctx.series.size}</h1>
+        <h1>Top {ctx.subcharts.length}</h1>
       </EuiTitle>
       <EuiSpacer />
       <EuiFlexGrid columns={2} gutterSize="s">
-        {printSubCharts(ctx.series)}
+        {printSubCharts(ctx.subcharts, maximum)}
       </EuiFlexGrid>
     </>
   );

diff --git a/src/plugins/profiling/public/components/stacktrace-nav.tsx b/src/plugins/profiling/public/components/stacktrace-nav.tsx
@@ -62,9 +62,9 @@ export const StackTraceNavigation = ({ index, projectID, n, timeRange, fetchTopN
       (response: TopNSamples) => {
         console.log(new Date().toISOString(), 'finished payload retrieval');
         const samples = response.TopN;
-        const series = groupSamplesByCategory(samples);
+        const subcharts = groupSamplesByCategory(samples);
         const samplesWithoutZero = samples.filter((sample: TopNSample) => sample.Count > 0);
-        setTopN({ samples: samplesWithoutZero, series });
+        setTopN({ samples: samplesWithoutZero, subcharts });
         console.log(new Date().toISOString(), 'updated local state');
       }
     );