[O2B-1154] QC flags visualization

lib/database/adapters/QcFlagAdapter.js

@@ -23,6 +23,7 @@ class QcFlagAdapter {
 
         this.qcFlagTypeAdapter = null;
         this.qcFlagVerificationAdapter = null;
+        this.qcFlagEffectivePeriodAdapter = null;
         this.userAdapter = null;
     }
 
@@ -48,6 +49,7 @@ class QcFlagAdapter {
             flagTypeId,
             flagType,
             verifications,
+            effectivePeriods,
         } = databaseObject;
 
         return {
@@ -65,6 +67,7 @@ class QcFlagAdapter {
             createdAt: createdAt ? new Date(createdAt).getTime() : null,
             updatedAt: createdAt ? new Date(updatedAt).getTime() : null,
             verifications: (verifications ?? []).map(this.qcFlagVerificationAdapter.toEntity),
+            effectivePeriods: (effectivePeriods ?? []).map(this.qcFlagEffectivePeriodAdapter.toEntity),
         };
     }
 }

lib/public/components/common/chart/barChart/barChartComponent.js

@@ -26,15 +26,15 @@
 class BarChartClassComponent {
     /**
      * Constructor
-     * @param {{attrs: {points: Point[], configuration: BarChartComponentConfiguration}}} vnode the component's vnode
+     * @param {{attrs: {data: Bar[], configuration: BarChartComponentConfiguration}}} vnode the component's vnode
      */
     constructor({
         attrs: {
-            points,
+            data,
             configuration,
         },
     }) {
-        this._chartRenderer = new BarChartRenderer(configuration.chartConfiguration, points);
+        this._chartRenderer = new BarChartRenderer(configuration.chartConfiguration, data);
     }
 
     /**
@@ -69,10 +69,10 @@
 /**
  * Render a line chart component
  *
- * @param {Point[]} points the points to display
+ * @param {Bar[]} bars the points to display
  * @param {BarChartComponentConfiguration} configuration the configuration of the component
  * @return {Component} the resulting component
  */
-export const barChartComponent = (points, configuration) => points.length
-    ? h(BarChartClassComponent, { points, configuration })
+export const barChartComponent = (bars, configuration) => bars.length
+    ? h(BarChartClassComponent, { data: bars, configuration })
     : h('.w-100.h-100.flex-row.items-center.justify-center', h('', configuration.placeholder || 'No data'));

lib/public/components/common/chart/lineChart/lineChartComponent.js

@@ -38,9 +38,9 @@
 class LineChartClassComponent {
     /**
      * Constructor
-     * @param {{attrs: {points: Point[], configuration: LineChartComponentConfiguration}}} the component's vnode
+     * @param {{attrs: {data: Point[], configuration: LineChartComponentConfiguration}}} the component's vnode
      */
-    constructor({ attrs: { points, configuration } }) {
+    constructor({ attrs: { data, configuration } }) {
         this.configuration = configuration;
         this.tooltipElement = null;
         this.hoveredPointCoordinates = null;
@@ -52,7 +52,7 @@
 
         this.updateHoveredPoint = this.updateHoveredPoint.bind(this);
         this.handleMouseMove = this.handleMouseMove.bind(this);
-        this._chartRenderer = new LineChartRenderer(configuration.chartConfiguration, points);
+        this._chartRenderer = new LineChartRenderer(configuration.chartConfiguration, data);
         this.svgNode = null;
     }
 
@@ -62,10 +62,10 @@
     }
 
     // eslint-disable-next-line require-jsdoc
-    onupdate({ attrs: { points, configuration } }) {
+    onupdate({ attrs: { data, configuration } }) {
         this.configuration = configuration;
 
-        this._chartRenderer = new LineChartRenderer(configuration.chartConfiguration, points);
+        this._chartRenderer = new LineChartRenderer(configuration.chartConfiguration, data);
     }
 
     // eslint-disable-next-line require-jsdoc
@@ -221,5 +221,5 @@
  * @return {Component} the resulting component
  */
 export const lineChartComponent = (points, configuration) => points.length
-    ? h(LineChartClassComponent, { points, configuration })
+    ? h(LineChartClassComponent, { data: points, configuration })
     : h('.w-100.h-100.flex-row.items-center.justify-center', h('', configuration.placeholder || 'No data'));

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

@@ -31,36 +31,97 @@
      * Constructor
      *
      * @param {BarChartConfiguration} configuration the chart configuration
-     * @param {Point[]} points the points to render
+     * @param {Bar[]} data the bars to render
      */
-    constructor(configuration, points) {
-        super(configuration, points);
+    constructor(configuration, data) {
+        super(configuration, data);
 
-        if (this._stackedY) {
+        if (this._stackedDependent) {
             throw new Error('Bar chart not implemented for stacked values');
         }
+
+        /**
+         * Get bar length - size along axis of dependnet variable
+         * @param {Bar} bar bar
+         * @return {number} bar length
+         */
+        const getBarLength = ({ x, y }) => {
+            if (this._independentVariable === 'x') {
+                if (Array.isArray(y)) {
+                    throw new Error('Range and stacked bars not implemented for independent variable \'x\'');
+                }
+                return this._chartDrawingZone.top + this._chartDrawingZone.height - this.yScale(y);
+            } else if (Array.isArray(x)) { // (this._independentVariable === 'y')
+                if (!this._stackedDependent) {
+                    if (x.length === 2) {
+                        return this.xScale(x[1]) - this.xScale(x[0]);
+                    } else {
+                        throw new Error('For range bars you need to provide array of two numbers');
+                    }
+                } else {
+                    throw new Error('Bar chart not implemented for stacked values');
+                }
+            } else {
+                return this.xScale(x);
+            }
+        };
+
+        /**
+         * Get bars thickness - size along axis of independnet variable
+         * @return {number} thickness of bars
+         */
+        const getBarThickness = () => this.independentVariableScale.bandwidth();
+
+        /**
+         * @type {BarPropertiesProvider}
+         */
+        this._barPropertiesProvider = {
+            getX: ({ x }) => {
+                if (this._independentVariable === 'x') {
+                    return this.xScale(x);
+                } else if (Array.isArray(x)) { // (this._independentVariable === 'y')
+                    if (!this._stackedDependent) {
+                        if (x.length === 2) {
+                            return this.xScale(x[0]);
+                        } else {
+                            throw new Error('For range bars you need to provide array of two numbers');
+                        }
+                    } else {
+                        throw new Error('Bar chart not implemented for stacked values');
+                    }
+                } else {
+                    return this._chartDrawingZone.left;
+                }
+            },
+            getY: ({ y }) => {
+                if (this._independentVariable === 'x') {
+                    if (Array.isArray(y)) {
+                        throw new Error('Range and stacked bars not implemented for independent variable \'x\'');
+                    }
+                }
+                return this.yScale(y);
+            },
+            getWidth: this._independentVariable === 'x' // Size along x-axis
+                ? getBarThickness
+                : getBarLength,
+            getHeight: this._independentVariable === 'x' // Size along y-axis
+                ? getBarLength
+                : getBarThickness,
+        };
     }
 
     // eslint-disable-next-line valid-jsdoc
     /**
      * @inheritDoc
      */
     renderDataset(datasetIndex, svg) {
-        /** @type {PointLocator} */
-        const pointLocator = {
-            getX: ({ x }) => this.xScale(x),
-            getY: ({ y }) => this.yScale(y),
-        };
-
         const { bar: barConfiguration } = this._datasets[datasetIndex] || {};
 
         // Display datasets
         renderDatasetAsBars(
             svg,
-            this._points,
-            this.xScale.bandwidth(),
-            this._chartDrawingZone,
-            pointLocator,
+            this._data,
+            this._barPropertiesProvider,
             barConfiguration,
         );
     }

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

@@ -51,21 +51,33 @@
      * @template T
      *
      * @param {ChartConfiguration<T>} configuration the chart's configuration
-     * @param {(Point[])} points the data to draw. If datasets configuration is an array, each point is expected to have an array as y value,
-     *     one per dataset
+     * @param {(DrawableData[])} data the data to draw.
+     * If datasets configuration is an array:
+     * - and if independent variable is 'x' then each point is expected to have an array as y value, one per dataset
+     * - and if independent variable is 'y', 'x' must contain an array in the same manner
      */
-    constructor(configuration, points) {
-        if (!points.length) {
-            throw new Error('The points list can not be empty');
+    constructor(configuration, data) {
+        if (!data.length) {
+            throw new Error('The data list can not be empty');
         }
+        this._data = data;
 
         const {
             chartMargins: configurationChartMargins = {},
             forceZero = false,
             axis = {},
+            independentVariable = 'x',
+            renderGrid = true,
             datasets: configurationDatasets = {},
         } = configuration;
 
+        if (independentVariable !== 'x' && independentVariable !== 'y') {
+            throw new Error(`Independent variable can be only 'x' or 'y', it cannot be '${this._independentVariable}'`);
+        }
+        this._independentVariable = independentVariable;
+
+        this._renderGrid = renderGrid;
+
         // Configuration
 
         this._chartMargins = {
@@ -76,9 +88,8 @@
         };
 
         this._forceZero = forceZero;
-        this._stackedY = Array.isArray(configurationDatasets);
-
-        this._datasets = this._stackedY ? configurationDatasets : [configurationDatasets];
+        this._stackedDependent = Array.isArray(configurationDatasets);
+        this._datasets = this._stackedDependent ? configurationDatasets : [configurationDatasets];
 
         this._axis = axis;
 
@@ -94,27 +105,39 @@
             height: 0,
         };
 
-        this._points = points;
+        const dependentVariable = this._independentVariable === 'x' ? 'y' : 'x';
+        const { [dependentVariable]: {
+            min: dependetnVarMin,
+            max: dependentVarMax,
+        } } = this.getAxisConfiguration();
 
-        const { y: { min: yMin, max: yMax } } = this.getAxisConfiguration();
-        this._xAxisScaleFactory = new EnumerableBasedScaleFactory({ point: this.isPoint });
-        const yAxisScaleFactoryConfiguration = { forceRange: { min: yMin, max: yMax } };
+        const independentAxisScaleFactory = new EnumerableBasedScaleFactory({ point: this.isPoint });
+        const dependentAxisScaleFactoryConfiguration = { forceRange: { min: dependetnVarMin, max: dependentVarMax } };
         if (this._forceZero) {
-            yAxisScaleFactoryConfiguration.minimalRange = { min: 0, max: 0 };
+            dependentAxisScaleFactoryConfiguration.minimalRange = { min: 0, max: 0 };
         }
-        this._yAxisScaleFactory = new RangeBasedScaleFactory(yAxisScaleFactoryConfiguration);
+        const dependantAxisScaleFactory = new RangeBasedScaleFactory(dependentAxisScaleFactoryConfiguration);
 
-        for (const point of points) {
-            this._xAxisScaleFactory.processValue?.(point.x);
-            if (this._stackedY) {
-                for (const value of point.y) {
-                    this._yAxisScaleFactory.processValue?.(value);
+        for (const point of data) {
+            independentAxisScaleFactory.processValue?.(point[independentVariable]);
+
+            if (Array.isArray(point[dependentVariable])) {
+                for (const value of point[dependentVariable]) {
+                    dependantAxisScaleFactory.processValue?.(value);
                 }
             } else {
-                this._yAxisScaleFactory.processValue?.(point.y);
+                dependantAxisScaleFactory.processValue?.(point[dependentVariable]);
             }
         }
 
+        if (independentVariable === 'x') {
+            this._xAxisScaleFactory = independentAxisScaleFactory;
+            this._yAxisScaleFactory = dependantAxisScaleFactory;
+        } else {
+            this._xAxisScaleFactory = dependantAxisScaleFactory;
+            this._yAxisScaleFactory = independentAxisScaleFactory;
+        }
+
         this._refreshScales();
     }
 
@@ -178,7 +201,9 @@
         yAxisRenderer.render(this.yScale, this._chartDrawingZone);
 
         // Render the horizontal grid
-        renderHorizontalGrid(yAxisRenderer.getCurrentAxis(), this._chartDrawingZone.width);
+        if (this._renderGrid) {
+            renderHorizontalGrid(yAxisRenderer.getCurrentAxis(), this._chartDrawingZone.width);
+        }
 
         this.registerEvents(svg);
     }
@@ -216,7 +241,7 @@
     }
 
     /**
-     * States if the points are rendered as points or bars
+     * States if the data are rendered as points or bars
      * @return {boolean} true if points
      */
     get isPoint() {
@@ -272,6 +297,15 @@
         return this._yScale;
     }
 
+    /**
+     * Returns the current independent-variable-axis scale
+     *
+     * @return {d3.AxisScale} the scale
+     */
+    get independentVariableScale() {
+        return this._independentVariable === 'x' ? this._xScale : this._yScale;
+    }
+
     /**
      * Recompute the scales with the current chart drawing zone
      *

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

@@ -45,6 +45,9 @@
      */
     constructor(configuration, points) {
         super(configuration, points);
+        if (this._independentVariable !== 'x') {
+            throw new Error('LiceChartRendered only supports \'x\' as independent variable');
+        }
 
         this._pointHoverMargin = configuration.pointHoverMargin || DEFAULT_POINT_HOVER_MARGIN;
         this._computeHoveredPoint = new Array(this._datasets.length).fill(0);
@@ -66,14 +69,14 @@
         /** @type {PointLocator} */
         const pointLocator = {
             getX: ({ x }) => this.xScale(x),
-            getY: this._stackedY ? ({ y }) => this.yScale(y[datasetIndex]) : ({ y }) => this.yScale(y),
+            getY: this._stackedDependent ? ({ y }) => this.yScale(y[datasetIndex]) : ({ y }) => this.yScale(y),
         };
 
         const { line: lineConfiguration, point: pointConfiguration, legend: legendConfiguration } = this._datasets[datasetIndex] || {};
 
         // Display datasets
 
-        const points = this._points.filter((point) => (pointLocator.getY(point) ?? null) !== null);
+        const points = this._data.filter((point) => (pointLocator.getY(point) ?? null) !== null);
 
         // Display line
         if (lineConfiguration) {
@@ -99,7 +102,7 @@
         const datasetQuadtree = quadtree()
             .x(pointLocator.getX)
             .y(pointLocator.getY)
-            .addAll(this._points);
+            .addAll(this._data);
 
         /**
          * Compute the point hovered by the mouse and call the onPointHover function accordingly