[TRON-17796] [MINOR] Refactor library codebase

README.md

@@ -36,12 +36,12 @@ import { CFDGraph, CFDRenderer } from 'graphs-renderer';
 
 ```javascript
     let data = [...]
-    let cfdSelector = "#cfd";
-    let cfdGraph = new CFDGraph(data)
-    let cfdDataSet = cfdGraph.computeDataSet();
-    let cfdRenderer = new CFDRenderer(cfdDataSet)
-    cfdRenderer.drawGraph(cfdSelector)
-    cfdRenderer.useBrush("#cfd-brush")
+let cfdSelector = "#cfd";
+let cfdGraph = new CFDGraph(data)
+let cfdDataSet = cfdGraph.computeDataSet();
+let cfdRenderer = new CFDRenderer(cfdDataSet)
+cfdRenderer.renderGraph(cfdSelector)
+cfdRenderer.setupBrush("#cfd-brush")
 ```
 
 To see usage examples of the library and the data format for the graph refer to [Examples](#examples)

examples/example.js

@@ -9,7 +9,7 @@ import {
     processServiceData,
     eventBus
 } from "../dist/graphs-renderer.js";
-import {initializeForm,toggleRightSidebar} from "./sidebars.js"
+import {initializeForm, toggleRightSidebar} from "./sidebars.js"
 
 let removedTicketTypes = ["task"];
 let removedRepos = ["wizard-lambda"];
@@ -33,19 +33,20 @@ async function renderGraphs(data, serviceId) {
     const cfdGraphElementSelector = "#cfd-area-div";
     const cfdBrushElementSelector = "#cfd-brush-div";
     //Create a CFDGraph
-    const cfdGraph = new CFDGraph(data);
+    const states = ['analysis_active', 'analysis_done', 'in_progress', 'dev_complete', 'verif_start', 'delivered'];
+    const cfdGraph = new CFDGraph(data, states);
     //Compute the dataset for a cfd graph
     const cfdGraphDataSet = cfdGraph.computeDataSet();
     //Create a CFDRenderer
     const cfdRenderer = new CFDRenderer(cfdGraphDataSet);
     //Pass the created event bus to teh cfd graph
-    cfdRenderer.useEventBus(eventBus);
+    cfdRenderer.setupEventBus(eventBus);
     if (document.querySelector(cfdGraphElementSelector)) {
         if (cfdGraphDataSet.length > 0) {
-            cfdRenderer.drawGraph(cfdGraphElementSelector);
-            document.querySelector(cfdBrushElementSelector) && cfdRenderer.useBrush(cfdBrushElementSelector);
-            document.querySelector(controlsElementSelector) && cfdRenderer.useControls("#reporting-range-input", "#range-increments-select");
-            document.querySelector(loadConfigInputSelector) && cfdRenderer.useConfigLoading(loadConfigInputSelector, resetConfigInputSelector);
+            cfdRenderer.renderGraph(cfdGraphElementSelector);
+            document.querySelector(cfdBrushElementSelector) && cfdRenderer.setupBrush(cfdBrushElementSelector);
+            document.querySelector(controlsElementSelector) && cfdRenderer.setupChartControls("#reporting-range-input", "#range-increments-select");
+            document.querySelector(loadConfigInputSelector) && cfdRenderer.setupConfigLoader(loadConfigInputSelector, resetConfigInputSelector);
         } else {
             cfdRenderer.clearGraph(cfdGraphElementSelector, cfdBrushElementSelector);
         }
@@ -62,18 +63,16 @@ async function renderGraphs(data, serviceId) {
     //Create a ScatterplotRenderer
     const scatterplotRenderer = new ScatterplotRenderer(leadTimeDataSet);
     //Pass the created event bus to teh cfd graph
-    scatterplotRenderer.useEventBus(eventBus);
+    scatterplotRenderer.setupEventBus(eventBus);
     //Create a HistogramRenderer
     const histogramRenderer = new HistogramRenderer(leadTimeDataSet, eventBus);
     if (document.querySelector(scatterplotGraphElementSelector)) {
         if (leadTimeDataSet.length > 0) {
-            scatterplotRenderer.drawGraph(scatterplotGraphElementSelector);
-            document.querySelector(histogramGraphElementSelector) && histogramRenderer.drawGraph(histogramGraphElementSelector);
-            document.querySelector(scatterplotBrushElementSelector) && scatterplotRenderer.useBrush(scatterplotBrushElementSelector);
-            document.querySelector(controlsElementSelector) &&
-            scatterplotRenderer.useControls("#reporting-range-input", "#range-increments-select");
-            document.querySelector(loadConfigInputSelector) &&
-            scatterplotRenderer.useConfigLoading(loadConfigInputSelector, resetConfigInputSelector);
+            scatterplotRenderer.renderGraph(scatterplotGraphElementSelector);
+            document.querySelector(histogramGraphElementSelector) && histogramRenderer.renderGraph(histogramGraphElementSelector);
+            document.querySelector(scatterplotBrushElementSelector) && scatterplotRenderer.setupBrush(scatterplotBrushElementSelector);
+            document.querySelector(controlsElementSelector) && scatterplotRenderer.setupChartControls("#reporting-range-input", "#range-increments-select");
+            document.querySelector(loadConfigInputSelector) && scatterplotRenderer.setupConfigLoader(loadConfigInputSelector, resetConfigInputSelector);
         } else {
             scatterplotRenderer.clearGraph(scatterplotGraphElementSelector, scatterplotBrushElementSelector);
             histogramRenderer.clearGraph(histogramGraphElementSelector);
@@ -87,8 +86,8 @@ async function useObservationLogging(scatterplotRenderer, cfdRenderer, serviceId
     const workTicketsURL = "#";
     const observationLoggingService = new ObservationLoggingService(observationLoggingServiceURL, serviceId);
     await observationLoggingService.loadObservations();
-    scatterplotRenderer.useObservationLogging(observationLoggingService.observationsByService, workTicketsURL);
-    cfdRenderer.useObservationLogging(observationLoggingService.observationsByService);
+    scatterplotRenderer.setupObservationLogging(observationLoggingService.observationsByService, workTicketsURL);
+    cfdRenderer.setupObservationLogging(observationLoggingService.observationsByService);
 
     eventBus.addEventListener("scatterplot-click", (event) => {
         initializeForm({...event, chartType: "SCATTERPLOT", serviceId});
@@ -114,11 +113,11 @@ async function useObservationLogging(scatterplotRenderer, cfdRenderer, serviceId
             toggleRightSidebar(false);
             if (observation.data.chart_type === "SCATTERPLOT") {
                 scatterplotRenderer.hideTooltip();
-                scatterplotRenderer.markObservations(observationLoggingService.observationsByService);
+                scatterplotRenderer.displayObservationMarkers(observationLoggingService.observationsByService);
             }
             if (observation.data.chart_type === "CFD") {
-                cfdRenderer.hideTooltip();
-                cfdRenderer.markObservations(observationLoggingService.observationsByService);
+                cfdRenderer.hideTooltipAndMovingLine();
+                cfdRenderer.displayObservationMarkers(observationLoggingService.observationsByService);
             }
         }
     });

examples/exampleData.js

@@ -521,4 +521,4 @@ export const exampleData = {
                 "work_id": "TRON-12457"
             }
         ]
-}
+}

package.json

@@ -5,7 +5,10 @@
   "main": "./src/index.js",
   "type": "module",
   "scripts": {
-    "postinstall": "webpack --config webpack.config.cjs",
+    "postinstall": "webpack --mode production",
+    "build:dev": "webpack --mode development",
+    "build:prod": "webpack --mode production",
+    "watch": "webpack --mode development --watch",
     "lint": "eslint 'src/**/*.{js,jsx}' --max-warnings=0",
     "lint:fix": "eslint 'src/**/*.{js,jsx}' --fix",
     "prettier": "prettier 'src/**/*.{js,jsx,json,css}' --check",

src/graphs/Renderer.js

@@ -1,5 +1,8 @@
 import * as d3 from 'd3';
 
+/**
+ * Represents a generic graphs renderer
+ */
 export default class Renderer {
   margin = { top: 20, right: 40, bottom: 60, left: 40 };
   width = 1040 - this.margin.left - this.margin.right;
@@ -17,6 +20,12 @@ export default class Renderer {
     this.data = data;
   }
 
+  /**
+   * Creates an SVG element within a specified DOM selector.
+   * @param {number} [height=this.height] - The height of the SVG element.
+   * @param {number} [width=this.width] - The width of the SVG element.
+   * @returns {d3.Selection} The created SVG element.
+   */
   createSvg(selector, height = this.height, width = this.width) {
     const htmlElement = document.querySelector(selector);
     if (htmlElement) {
@@ -33,23 +42,54 @@ export default class Renderer {
     return svg;
   }
 
+  /**
+   * Computes a d3 time scale with a given domain and range.
+   * @param {Array} domain - The domain for the scale.
+   * @param {Array} range - The range for the scale.
+   * @returns {d3.ScaleTime} The computed time scale.
+   */
   computeTimeScale(domain, range) {
     const scale = d3.scaleTime();
     return scale.domain(domain).range(range);
   }
 
+  /**
+   * Computes a d3 linear scale with a given domain and range.
+   * @param {Array} domain - The domain for the scale.
+   * @param {Array} range - The range for the scale.
+   * @returns {d3.ScaleLinear} The computed linear scale.
+   */
   computeLinearScale(domain, range) {
     return d3.scaleLinear().domain(domain).range(range);
   }
 
+  /**
+   * Draws the X-axis of the chart.
+   * @param {d3.Selection} g - The SVG group element where the axis is drawn.
+   * @param {d3.Scale} x - The scale to use for the axis.
+   * @param {number} [height=this.height] - The height at which to draw the axis.
+   */
   drawXAxis(g, x, height = this.height) {
     g.call(d3.axisBottom(x)).attr('transform', `translate(0, ${height})`);
   }
 
+  /**
+   * Draws the Y-axis of the chart.
+   * @param {d3.Selection} g - The SVG group element where the axis is drawn.
+   * @param {d3.Scale} y - The scale to use for the axis.
+   */
   drawYAxis(g, y) {
     g.call(d3.axisLeft(y));
   }
 
+  /**
+   * Adds a clipping path to the SVG element.
+   * @param {d3.Selection} svg - The SVG element to which the clipping path is added.
+   * @param {string} clipId - The id for the clipping path.
+   * @param {number} [width=this.width] - The width of the clipping area.
+   * @param {number} [height=this.height] - The height of the clipping area.
+   * @returns {d3.Selection} The SVG group element with the clipping path applied.
+   */
   addClipPath(svg, clipId, width = this.width, height = this.height) {
     svg
       .append('defs')
@@ -64,6 +104,12 @@ export default class Renderer {
     return svg.append('g').attr('clip-path', `url(#${clipId})`);
   }
 
+  /**
+   * Draws labels for the X and Y axes.
+   * @param {d3.Selection} svg - The SVG element where labels are to be added.
+   * @param {string} xLabel - The label for the X-axis.
+   * @param {string} yLabel - The label for the Y-axis.
+   */
   drawAxisLabels(svg, xLabel, yLabel) {
     // Add X axis label:
     svg
@@ -85,7 +131,11 @@ export default class Renderer {
       .style('font-size', this.axisLabelFontSize);
   }
 
-  updateChart(_domain) {
-    throw new Error('Method not implemented!');
+  /**
+   * Abstract method to update the chart. Must be implemented in subclasses.
+   * @param {Array} domain - The domain to update the chart with.
+   */
+  updateGraph(_domain) {
+    throw new Error('Method not implemented. It must be implemented in subclasses!');
   }
 }