Added display of values in the average

Author: Fgerthoffert

src/views/testingPerfs/content/compare/comparisonTable/compareCell.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import { withStyles, Theme } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Tooltip from '@material-ui/core/Tooltip';
+
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import TableCell from '@material-ui/core/TableCell';
+
+interface Props {
+  data: any;
+}
+
+const HtmlTooltip = withStyles((theme: Theme) => ({
+  tooltip: {
+    backgroundColor: '#fff',
+    color: 'rgba(0, 0, 0, 0.87)',
+    maxWidth: 800,
+    fontSize: theme.typography.pxToRem(10),
+    border: '1px solid #dadde9',
+  },
+}))(Tooltip);
+
+const CompareCell: React.FC<Props> = (props: Props) => {
+  const { data } = props;
+
+  return (
+    <TableCell align="right">
+      <HtmlTooltip
+        title={
+          <React.Fragment>
+            <Typography color="inherit">Average calculated using:</Typography>
+            <TableContainer>
+              <Table size="small" aria-label="a dense table">
+                <TableHead>
+                  <TableRow>
+                    <TableCell>Run Name</TableCell>
+                    <TableCell>Started</TableCell>
+                    <TableCell align="right">Value</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {data.runs.map((run: any) => (
+                    <TableRow key={run.id}>
+                      <TableCell>{run.name}</TableCell>
+                      <TableCell>{run.startedAt}</TableCell>
+                      <TableCell align="right">{Math.round(run.value)}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </React.Fragment>
+        }
+      >
+        <span>{Math.round(data.value)}</span>
+      </HtmlTooltip>
+    </TableCell>
+  );
+};
+
+export default CompareCell;

src/views/testingPerfs/content/compare/comparisonTable/getData.graphql

@@ -37,14 +37,12 @@ query($query: String, $referenceQuery: String, $comparisonQuery: String, $select
           statisticsKey
           transaction
           value
-        }
-        values {
-          id
-          name
-          startedAt
-          statisticsKey
-          transaction
-          value
+          runs {
+            id
+            name
+            startedAt
+            value
+          }
         }
       }
       comparison: average(profileId: $selectedProfile, averageQuery: $comparisonQuery) {
@@ -83,14 +81,12 @@ query($query: String, $referenceQuery: String, $comparisonQuery: String, $select
           statisticsKey
           transaction
           value
-        }
-        values {
-          id
-          name
-          startedAt
-          statisticsKey
-          transaction
-          value
+          runs {
+            id
+            name
+            startedAt
+            value
+          }
         }
       }
     } 

src/views/testingPerfs/content/compare/comparisonTable/index.tsx

@@ -19,6 +19,7 @@ import IconButton from '@material-ui/core/IconButton';
 
 import { iRootState } from '../../../../../store';
 import CustomCard from '../../../../../components/customCard';
+import CompareCell from './compareCell';
 
 const mapState = (state: iRootState) => ({
   query: state.testingPerfs.query,
@@ -259,37 +260,36 @@ const ComparisonTable: React.FC<connectedProps> = (props: connectedProps) => {
                   {comparisonTableColumns
                     .filter((c: any) => c.visible === true)
                     .map((col: any) => {
-                      let refValue = reference.average.find(
+                      const refValue = reference.average.find(
                         (v: any) => v.transaction === transaction && v.statisticsKey === col.id,
                       );
-                      refValue = refValue !== undefined ? refValue.value : '';
-                      let compValue = comparison.average.find(
+                      const compValue = comparison.average.find(
                         (v: any) => v.transaction === transaction && v.statisticsKey === col.id,
                       );
-                      compValue = compValue !== undefined ? compValue.value : '';
                       let compDiff: number | string = 0;
-                      if (refValue === '' || compValue === '') {
+                      if (refValue.value === undefined || compValue.value === undefined) {
                         compDiff = '';
-                      } else if (refValue === 0 && compValue === 0) {
+                      } else if (refValue.value === 0 && compValue.value === 0) {
                         compDiff = 0;
-                      } else if (compValue === 0) {
-                        compDiff = refValue;
+                      } else if (compValue.value === 0) {
+                        compDiff = refValue.value;
                       } else {
-                        compDiff = 1 - refValue / compValue;
+                        compDiff = 1 - refValue.value / compValue.value;
                       }
                       return {
                         ...col,
-                        refValue: refValue === '' ? '' : Math.round(refValue),
-                        compValue: compValue === '' ? '' : Math.round(compValue),
+                        refAverage: refValue,
+                        compAverage: compValue,
                         compDiff: compDiff,
                       };
                     })
                     .map((col: any) => (
                       <React.Fragment key={col.id}>
-                        <TableCell align="right">{col.refValue}</TableCell>
+                        {/* <TableCell align="right">{Math.round(col.refAverage.value)}</TableCell> */}
+                        <CompareCell data={col.refAverage} />
                         {!comparisonTableHideCompare && (
                           <>
-                            <TableCell align="right">{col.compValue}</TableCell>
+                            <CompareCell data={col.compAverage} />
                             <TableCell
                               align="right"
                               style={{