[O2B-970] Add mean efficiency line (#1276)

* [O2B-970] Add mean efficiency line

* Handle empty datasets

* Add time label

Author: martinboulais

lib/public/components/common/chart/rendering/LineChartRenderer.js

@@ -15,6 +15,7 @@ import { quadtree } from '/assets/d3.min.js';
 import { ChartRenderer } from './ChartRenderer.js';
 import { renderDatasetAsLine } from './dataset/renderDatasetAsLine.js';
 import { renderDatasetAsPointCloud } from './dataset/renderDatasetAsPointCloud.js';
+import { renderDatasetLegend } from './legend/renderDatasetLegend.js';
 
 /**
  * @typedef LineChartDatasetConfiguration
@@ -68,7 +69,7 @@ export class LineChartRenderer extends ChartRenderer {
             getY: this._stackedY ? ({ y }) => this.yScale(y[datasetIndex]) : ({ y }) => this.yScale(y),
         };
 
-        const { line: lineConfiguration, point: pointConfiguration } = this._datasets[datasetIndex] || {};
+        const { line: lineConfiguration, point: pointConfiguration, legend: legendConfiguration } = this._datasets[datasetIndex] || {};
 
         // Display datasets
 
@@ -79,8 +80,6 @@ export class LineChartRenderer extends ChartRenderer {
             renderDatasetAsLine(
                 svg,
                 points.filter((point) => (pointLocator.getY(point) ?? null) !== null),
-                this.xScale,
-                this.yScale,
                 pointLocator,
                 this._chartDrawingZone,
                 lineConfiguration,
@@ -92,6 +91,11 @@ export class LineChartRenderer extends ChartRenderer {
             renderDatasetAsPointCloud(svg, points, pointLocator, this._chartDrawingZone, pointConfiguration);
         }
 
+        // Display dataset legend
+        if (legendConfiguration) {
+            renderDatasetLegend(svg, points, pointLocator, this._chartDrawingZone, legendConfiguration);
+        }
+
         const datasetQuadtree = quadtree()
             .x(pointLocator.getX)
             .y(pointLocator.getY)

lib/public/components/common/chart/rendering/dataset/renderDatasetAsLine.js

@@ -25,8 +25,6 @@ import { getUniqueId } from '../../../../../utilities/getUniqueId.js';
  *
  * @param {SVGElement} svg the svg in which graph must be rendered
  * @param {Point[]} points the dataset to display
- * @param {d3.AxisScale} xScale the horizontal scale of the dataset
- * @param {d3.AxisScale} yScale the vertical scale of the dataset
  * @param {PointLocator} pointLocator locator to compute the points coordinates
  * @param {BoundingBox} chartDrawingZone the chart drawing zone outside which points are not rendered
  * @param {LineGraphConfiguration} [configuration] the line graph configuration
@@ -35,8 +33,6 @@ import { getUniqueId } from '../../../../../utilities/getUniqueId.js';
 export const renderDatasetAsLine = (
     svg,
     points,
-    xScale,
-    yScale,
     pointLocator,
     chartDrawingZone,
     configuration = {},
@@ -59,18 +55,23 @@ export const renderDatasetAsLine = (
         .x(pointLocator.getX)
         .y(pointLocator.getY)(points);
 
-    const xLeft = chartDrawingZone.left;
-    const xRight = chartDrawingZone.left + chartDrawingZone.width;
-    const yBottom = chartDrawingZone.top + chartDrawingZone.height;
-    if (points.length > 1) {
-        pathDraw = `M ${xLeft},${yBottom} ${pathDraw.substring(1)} ${xRight},${yBottom}`;
+    if (configuration.fill) {
+        const xLeft = chartDrawingZone.left;
+        const xRight = chartDrawingZone.left + chartDrawingZone.width;
+        const yBottom = chartDrawingZone.top + chartDrawingZone.height;
+        if (points.length > 1) {
+            pathDraw = `M ${xLeft},${yBottom} ${pathDraw.substring(1)} ${xRight},${yBottom}`;
+        }
     }
 
     path.attr('d', pathDraw);
 
     if (configuration.stroke) {
         path.attr('stroke', configuration.stroke);
     }
+    if (configuration.thickness) {
+        path.attr('stroke-width', configuration.thickness);
+    }
     if (configuration.fill) {
         path.attr('fill', configuration.fill);
     } else {

lib/public/components/common/chart/rendering/legend/renderDatasetLegend.js

@@ -0,0 +1,56 @@
+/**
+ *  @license
+ *  Copyright CERN and copyright holders of ALICE O2. This software is
+ *  distributed under the terms of the GNU General Public License v3 (GPL
+ *  Version 3), copied verbatim in the file "COPYING".
+ *
+ *  See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ *  In applying this license CERN does not waive the privileges and immunities
+ *  granted to it by virtue of its status as an Intergovernmental Organization
+ *  or submit itself to any jurisdiction.
+ */
+
+import { select } from '/assets/d3.min.js';
+
+/**
+ * @typedef DatasetLegendConfiguration
+ * @property {string} text the content of the legend
+ */
+
+const DATASET_MARGIN = 10;
+const FONT_SIZE = 20;
+
+/**
+ * Render the given dataset configuration
+ *
+ * @param {SVGElement} svg the svg in which legend should be displayed
+ * @param {Point[]} points the points of the dataset, used to compute the legend position
+ * @param {PointLocator} pointLocator the point locator to locate points on chart
+ * @param {BoundingBox} chartDrawingZone the chart drawing zone
+ * @param {DatasetLegendConfiguration} legendConfiguration the configuration of the dataset's legend
+ * @return {void}
+ */
+export const renderDatasetLegend = (svg, points, pointLocator, chartDrawingZone, legendConfiguration) => {
+    if (!points.length) {
+        return;
+    }
+
+    const { text } = legendConfiguration;
+
+    // For now, dataset position is only top-end
+    const lastPoint = points[points.length - 1];
+    const left = Math.min(pointLocator.getX(lastPoint) - DATASET_MARGIN, chartDrawingZone.left + chartDrawingZone.width);
+    const top = Math.max(pointLocator.getY(lastPoint) - DATASET_MARGIN, chartDrawingZone.top);
+
+    select(svg)
+        .append('text')
+        .text(text)
+        .attr('text-anchor', 'end')
+        .attr('fill', 'black')
+        .attr('stroke', 'white')
+        .attr('paint-order', 'stroke')
+        .attr('stroke-width', '5')
+        .attr('font-size', FONT_SIZE)
+        .attr('transform', `translate(${left}, ${top})`);
+};

lib/public/views/Statistics/StatisticsPage.js

@@ -64,7 +64,11 @@ export const StatisticsPage = ({ statisticsModel }) => {
                         h('h3', `Efficiency - ${periodLabel}`),
                         h(
                             '.flex-grow.chart-box',
-                            efficiencyChartComponent(fillStatistics, () => statisticsModel.notify()),
+                            efficiencyChartComponent(
+                                fillStatistics,
+                                () => statisticsModel.notify(),
+                                statisticsModel.timeRangeFilterModel.periodLabel,
+                            ),
                         ),
                     ],
                 }),

lib/public/views/Statistics/charts/efficiencyChartComponent.js

@@ -25,61 +25,86 @@ import { formatPercentage } from '../../../utilities/formatting/formatPercentage
  *
  * @param {LhcFillStatistics[]} statistics the statistics to represent
  * @param {function} [onPointHover] function called when a point is hovered
+ * @param {string} [periodLabel] if it applies, the label of the currently selected period
  * @return {Component} the resulting component
  */
-export const efficiencyChartComponent = (statistics, onPointHover) => lineChartComponent(
-    statistics.map(({ fillNumber, efficiency, efficiencyLossAtStart }) => ({
-        x: fillNumber,
-        y: [efficiency + efficiencyLossAtStart, efficiency],
-    })),
-    {
-        placeholder: 'No fill on the given period',
-        tooltip: ({ x, y }) => h('', [
-            h('h5', `Fill #${x}`),
-            h('.flex-row.items-center.g2', [
-                h('.tooltip-bullet', { style: `background-color: ${ChartColors.Blue.dark}` }),
-                h('', `Efficiency: ${formatPercentage(y[1], 0)}`),
-            ]),
-            h('.flex-row.items-center.g2', [
-                h('.tooltip-bullet', { style: `background-color: ${ChartColors.Red.dark}` }),
-                h('', `Eff. loss at start: ${formatPercentage(y[0] - y[1], 2)}`),
+export const efficiencyChartComponent = (statistics, onPointHover, periodLabel) => {
+    const points = [];
+    let efficiencySum = 0;
+    for (const { fillNumber, efficiency, efficiencyLossAtStart } of statistics) {
+        points.push({
+            x: fillNumber,
+            y: [efficiency + efficiencyLossAtStart, efficiency],
+        });
+        efficiencySum += efficiency;
+    }
+
+    const meanEfficiency = efficiencySum / points.length;
+    if (points.length) {
+        points[0].y.push(meanEfficiency);
+        points[points.length - 1].y.push(meanEfficiency);
+    }
+
+    return lineChartComponent(
+        points,
+        {
+            placeholder: 'No fill on the given period',
+            tooltip: ({ x, y }) => h('', [
+                h('h5', `Fill #${x}`),
+                h('.flex-row.items-center.g2', [
+                    h('.tooltip-bullet', { style: `background-color: ${ChartColors.Blue.dark}` }),
+                    h('', `Efficiency: ${formatPercentage(y[1], 0)}`),
+                ]),
+                h('.flex-row.items-center.g2', [
+                    h('.tooltip-bullet', { style: `background-color: ${ChartColors.Red.dark}` }),
+                    h('', `Eff. loss at start: ${formatPercentage(y[0] - y[1], 2)}`),
+                ]),
             ]),
-        ]),
-        onPointHover,
-        chartConfiguration: {
-            axis: {
-                y: {
-                    ticks: { format: (efficiency) => formatPercentage(efficiency, 0) },
-                    label: 'Efficiency',
-                    min: 0,
-                    max: 1,
-                },
-                x: {
-                    label: 'FILL',
-                },
-            },
-            datasets: [
-                {
-                    point: {
-                        fill: ChartColors.Red.dark,
-                        radius: 5,
+            onPointHover,
+            chartConfiguration: {
+                axis: {
+                    y: {
+                        ticks: { format: (efficiency) => formatPercentage(efficiency, 0) },
+                        label: 'Efficiency',
+                        min: 0,
+                        max: 1,
                     },
-                    line: {
-                        stroke: ChartColors.Red.dark,
-                        fill: ChartColors.Red.light,
+                    x: {
+                        label: 'FILL',
                     },
                 },
-                {
-                    point: {
-                        fill: ChartColors.Blue.dark,
-                        radius: 5,
+                datasets: [
+                    {
+                        point: {
+                            fill: ChartColors.Red.dark,
+                            radius: 5,
+                        },
+                        line: {
+                            stroke: ChartColors.Red.dark,
+                            fill: ChartColors.Red.light,
+                        },
                     },
-                    line: {
-                        stroke: ChartColors.Blue.dark,
-                        fill: ChartColors.Blue.light,
+                    {
+                        point: {
+                            fill: ChartColors.Blue.dark,
+                            radius: 5,
+                        },
+                        line: {
+                            stroke: ChartColors.Blue.dark,
+                            fill: ChartColors.Blue.light,
+                        },
                     },
-                },
-            ],
+                    {
+                        line: {
+                            stroke: ChartColors.Orange.dark,
+                            thickness: 3,
+                        },
+                        legend: {
+                            text: ['ALICE efficiency', periodLabel || '', '=', formatPercentage(meanEfficiency)].join(' '),
+                        },
+                    },
+                ],
+            },
         },
-    },
-);
+    );
+};