* Move legend from top to bottom

* Add Parameter Names tag below a chart with params * Display parameter names in the tooltip
jzillmann · Aug 7, 2018 · 489f146 · 489f146
1 parent 112b6bf
commit 489f146
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 26 deletions.
diff --git a/src/javascript/components/single/BarChartView.jsx b/src/javascript/components/single/BarChartView.jsx
@@ -24,6 +24,9 @@ export default class BarChartView extends React.Component {
     render() {
         const { dataSet, dataMax } = this.props;
 
+        const { paramNames } = dataSet;
+
+
         const domainMax = dataMax && dataMax > 0 ? Math.round(dataMax) : 'auto';
         const chartHeight = 100 + dataSet.data.length * dataSet.barGroups.length * 36;
         const maxMethodNameLength = dataSet.data.map((element) => element.name.length).reduce((previous, current) => Math.max(previous, current), 32);
@@ -50,21 +53,32 @@ export default class BarChartView extends React.Component {
         });
 
         return (
-            <ResponsiveContainer width='100%' height={ chartHeight }>
-                <BarChart
-                    layout="vertical"
-                    width={ 900 }
-                    height={ chartHeight }
-                    data={ dataSet.data }
-                    margin={ { top: 20, right: 45, left: maxMethodNameLength * 4, bottom: 5 } }>
-                    <XAxis type="number" domain={ [0, domainMax] } />
-                    <YAxis dataKey="name" type="category" />
-                    <CartesianGrid strokeDasharray="3 3" />
-                    <Tooltip content={ <SingleRunChartTooltip scoreUnit={ dataSet.scoreUnit } roundScores={ dataSet.roundScores } /> } cursor={ { stroke: green, strokeWidth: 2 } } wrapperStyle={ { backgroundColor: tooltipBackground, opacity: 0.95 } } />
-                    <Legend verticalAlign='top' height={ 30 } />
-                    { bars }
-                </BarChart>
-            </ResponsiveContainer>
+            <div>
+                <ResponsiveContainer width='100%' height={ chartHeight }>
+                    <BarChart
+                        layout="vertical"
+                        width={ 900 }
+                        height={ chartHeight }
+                        data={ dataSet.data }
+                        margin={ { top: 20, right: 45, left: maxMethodNameLength * 4, bottom: 5 } }>
+                        <XAxis type="number" domain={ [0, domainMax] } />
+                        <YAxis dataKey="name" type="category" />
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <Tooltip content={ <SingleRunChartTooltip
+                            scoreUnit={ dataSet.scoreUnit }
+                            roundScores={ dataSet.roundScores } /> }
+                            cursor={ { stroke: green, strokeWidth: 2 } }
+                            wrapperStyle={ { backgroundColor: tooltipBackground, opacity: 0.95 } }
+                            paramNames={ paramNames }
+                        />
+                        <Legend />
+                        { bars }
+                    </BarChart>
+                </ResponsiveContainer>
+                { paramNames.length > 0 &&
+                    <div><div><b>Parameter Names:</b> { paramNames.join(':') }</div><br /></div>
+                }
+            </div>
         );
     }
 }
diff --git a/src/javascript/components/single/BarDataSet.js b/src/javascript/components/single/BarDataSet.js
@@ -10,6 +10,7 @@ export default class BarDataSet {
         this.data = options.data;
         this.dataMax = options.dataMax;
         this.roundScores = options.roundScores;
+        this.paramNames = options.paramNames;
     }
 }
 
@@ -32,36 +33,36 @@ export function createDataSetFromBenchmarks(runName, benchmarkBundle, metricExtr
 
     if (!params) {
         //case 0
-        return createBarDataSet(id, benchmarkMethods, metricExtractor, (method) => method.name, () => `${metricType} ${scoreUnit}`);
+        return createBarDataSet(id, benchmarkMethods, metricExtractor, (method) => method.name, () => `${metricType} ${scoreUnit}`, []);
     } else { // all other cases
         const paramNames = params.map(param => param[0]);
         if (paramNames.length == 1) {
             if (methodCount == 1) {
                 // case 1
-                return createBarDataSet(id, benchmarkMethods, metricExtractor, (method) => method.params[0][0] + '=' + method.params[0][1], () => `${metricType} ${scoreUnit}`);
+                return createBarDataSet(id, benchmarkMethods, metricExtractor, (method) => `${method.params[0][0]} =  ${method.params[0][1]}`, () => `${metricType} ${scoreUnit}`, []);
             } else {
                 // case 2
-                return createBarDataSet(id, benchmarkMethods, metricExtractor, (method) => method.name, (method) => method.params[0][1]);
+                return createBarDataSet(id, benchmarkMethods, metricExtractor, (method) => method.name, (method) => method.params[0][1], paramNames);
             }
         } else if (paramNames.length == 2 && methodCount == 1) {
             // case 3
-            return createBarDataSet(id, benchmarkMethods, metricExtractor, (method) => method.params[0][1], (method) => method.params[1][1]);
+            return createBarDataSet(id, benchmarkMethods, metricExtractor, (method) => `${method.params[0][0]} = ${method.params[0][1]}`, (method) => method.params[1][1], [paramNames[1]]);
         } else {
             if (methodCount > 1) {
                 // case 4
-                return createBarDataSet(id, benchmarkMethods, metricExtractor, (method) => method.name, (method) => method.params.map(param => param[1]).join(':'));
+                return createBarDataSet(id, benchmarkMethods, metricExtractor, (method) => method.name, (method) => method.params.map(param => param[1]).join(':'), paramNames);
             } else {
                 // case 5
                 const barName = paramNames.join(':');
-                return createBarDataSet(id, benchmarkMethods, metricExtractor, (method) => method.params.map(param => param[1]).join(':'), () => barName);
+                return createBarDataSet(id, benchmarkMethods, metricExtractor, (method) => method.params.map(param => param[1]).join(':'), () => barName, []);
             }
         }
     }
 }
 
 
 //Each benchmark can have multiple bar's attached
-function createBarDataSet(id, benchmarkMethods, metricExtractor, groupFunction, barGroupFunction) {
+function createBarDataSet(id, benchmarkMethods, metricExtractor, groupFunction, barGroupFunction, paramNames) {
     var dataMax = 0;
     var scoreUnit;
     const shouldRoundScores = shouldRound(benchmarkMethods, metricExtractor);
@@ -112,6 +113,7 @@ function createBarDataSet(id, benchmarkMethods, metricExtractor, groupFunction,
         barGroups: [...barGroups],
         data: data,
         dataMax: dataMax,
-        roundScores: shouldRoundScores
+        roundScores: shouldRoundScores,
+        paramNames: paramNames
     });
 }
diff --git a/src/javascript/components/single/SingleRunChartTooltip.jsx b/src/javascript/components/single/SingleRunChartTooltip.jsx
@@ -13,6 +13,7 @@ export default class SingleRunChartTooltip extends Component {
 
     static propTypes = {
         label: PropTypes.any,
+        paramNames: PropTypes.array,
         scoreUnit: PropTypes.string,
         roundScores: PropTypes.bool,
         payload: PropTypes.arrayOf(PropTypes.shape({
@@ -24,7 +25,7 @@ export default class SingleRunChartTooltip extends Component {
     };
 
     render() {
-        const { label, payload, scoreUnit, roundScores } = this.props;
+        const { label, payload, scoreUnit, roundScores, paramNames } = this.props;
         if (!payload || payload.length == 0) {
             return null;
         }
@@ -33,8 +34,8 @@ export default class SingleRunChartTooltip extends Component {
         const tableHeaders = [];
         if (payload.length > 1) {
             tableHeaders.push(<th key='1'>
-                Run
-                              </th>);
+                { paramNames.join(':') }
+            </th>);
         }
         tableHeaders.push(<th key='2'>
             Score