Skip to content

Commit 12fb45c

Browse files
ClaudiaGivanClaudiaGivan
committed
NPL calculations corrections
- include the ticket type in the graphs data set computation
1 parent edc95f3 commit 12fb45c

File tree

2 files changed

+190
-0
lines changed

2 files changed

+190
-0
lines changed

‎examples/example.js‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
import {exampleData} from "./exampleData.js";
2+
import {
3+
CFDGraph,
4+
CFDRenderer,
5+
ScatterplotGraph,
6+
MovingRangeGraph,
7+
MovingRangeRenderer,
8+
ControlRenderer,
9+
HistogramRenderer,
10+
SimpleScatterplotRenderer,
11+
ObservationLoggingService,
12+
processServiceData,
13+
eventBus
14+
} from "../dist/graphs-renderer.js";
15+
import {initializeForm, toggleRightSidebar, warningField} from "./sidebars.js"
16+
17+
18+
let removedTicketTypes = ["task"];
19+
let removedRepos = ["wizard-lambda"];
20+
let serviceData = exampleData
21+
let serviceId = "0a95c-9151-448e"
22+
let data = processServiceData(serviceData, removedRepos, removedTicketTypes);
23+
if (!data || data.length === 0) {
24+
console.log("There is no data for this service!");
25+
} else {
26+
renderGraphs(data, serviceId);
27+
}
28+
29+
function renderCfdGraph(data, controlsElementSelector, loadConfigInputSelector, resetConfigInputSelector) {
30+
//The cfd area chart and brush window elements css selectors
31+
const cfdGraphElementSelector = "#cfd-area-div";
32+
const cfdBrushElementSelector = "#cfd-brush-div";
33+
//Declare the states array for the cfd graph data
34+
const states = ['analysis_active', 'analysis_done', 'in_progress', 'dev_complete', 'verification_start', 'delivered'];
35+
//Declare the states in reversed order for the CFD (stacked area chart) to render correctly the areas
36+
const reversedStates = [...states].reverse();
37+
//Create a CFDGraph
38+
const cfdGraph = new CFDGraph(data, states);
39+
//Compute the dataset for a cfd graph
40+
const cfdGraphDataSet = cfdGraph.computeDataSet();
41+
//Create a CFDRenderer with the reversed states
42+
const cfdRenderer = new CFDRenderer(cfdGraphDataSet, reversedStates);
43+
//Pass the created event bus to the cfd graph
44+
cfdRenderer.setupEventBus(eventBus);
45+
const reportingRangeDays = 0.75 * cfdGraphDataSet.length;
46+
if (document.querySelector(cfdGraphElementSelector)) {
47+
if (cfdGraphDataSet.length > 0) {
48+
cfdRenderer.renderGraph(cfdGraphElementSelector);
49+
cfdRenderer.reportingRangeDays = reportingRangeDays
50+
cfdRenderer.setupXAxisControl()
51+
cfdRenderer.enableMetrics()
52+
document.querySelector(cfdBrushElementSelector) && cfdRenderer.setupBrush(cfdBrushElementSelector);
53+
document.querySelector(loadConfigInputSelector) && cfdRenderer.setupConfigLoader(loadConfigInputSelector, resetConfigInputSelector);
54+
} else {
55+
cfdRenderer.clearGraph(cfdGraphElementSelector, cfdBrushElementSelector);
56+
}
57+
}
58+
return {cfdRenderer, reportingRangeDays};
59+
}
60+
61+
function renderScatterplotAndHistogramGraphs(data, reportingRangeDays, controlsElementSelector, loadConfigInputSelector, resetConfigInputSelector) {
62+
//The scatterplot area chart, histogram area chart and scatterplot brush window elements css selectors
63+
const scatterplotGraphElementSelector = "#scatterplot-area-div";
64+
const movingRangeGraphElementSelector = "#moving-range-area-div";
65+
const controlGraphElementSelector = "#control-area-div";
66+
const histogramGraphElementSelector = "#histogram-area-div";
67+
const timeScaleSelector = "#time-scale-select";
68+
const baseJiraURL = "";
69+
const scatterplotBrushElementSelector = "#scatterplot-brush-div";
70+
const controlBrushElementSelector = "#control-brush-div";
71+
const movingRangeBrushElementSelector = "#moving-range-brush-div";
72+
//Create a ScatterplotGraph
73+
const scatterplotGraph = new ScatterplotGraph(data);
74+
// //Compute the dataset for the scatterplot and histogram graphs
75+
const leadTimeDataSet = scatterplotGraph.computeDataSet(data);
76+
//Create a ScatterplotRenderer
77+
const scatterplotRenderer = new SimpleScatterplotRenderer(leadTimeDataSet, baseJiraURL);
78+
//Pass the created event bus to teh cfd graph
79+
scatterplotRenderer.setupEventBus(eventBus);
80+
//Create a HistogramRenderer
81+
const histogramRenderer = new HistogramRenderer(leadTimeDataSet, eventBus);
82+
if (document.querySelector(scatterplotGraphElementSelector)) {
83+
if (leadTimeDataSet.length > 0) {
84+
scatterplotRenderer.setTimeScaleListener(timeScaleSelector)
85+
scatterplotRenderer.renderGraph(scatterplotGraphElementSelector);
86+
scatterplotRenderer.reportingRangeDays = reportingRangeDays
87+
scatterplotRenderer.setupXAxisControl()
88+
scatterplotRenderer.enableMetrics()
89+
document.querySelector(histogramGraphElementSelector) && histogramRenderer.renderGraph(histogramGraphElementSelector);
90+
document.querySelector(scatterplotBrushElementSelector) && scatterplotRenderer.setupBrush(scatterplotBrushElementSelector);
91+
document.querySelector(loadConfigInputSelector) && scatterplotRenderer.setupConfigLoader(loadConfigInputSelector, resetConfigInputSelector);
92+
} else {
93+
scatterplotRenderer.clearGraph(scatterplotGraphElementSelector, scatterplotBrushElementSelector);
94+
histogramRenderer.clearGraph(histogramGraphElementSelector);
95+
}
96+
}
97+
98+
//filter leadTimeDataSet values to not exceed 80 days lead time
99+
const filteredLeadTimeDataSet = leadTimeDataSet.filter((d) => d.leadTime <= 80);
100+
101+
//Moving range chart
102+
const movingRangeGraph = new MovingRangeGraph(filteredLeadTimeDataSet);
103+
const movingRangeGraphDataSet = movingRangeGraph.computeDataSet();
104+
const avgMovingRange = movingRangeGraph.getAvgMovingRange()
105+
const movingRangeRenderer = new MovingRangeRenderer(movingRangeGraphDataSet, avgMovingRange);
106+
movingRangeRenderer.renderGraph(movingRangeGraphElementSelector);
107+
movingRangeRenderer.reportingRangeDays = reportingRangeDays;
108+
movingRangeRenderer.setupEventBus(eventBus)
109+
document.querySelector(movingRangeBrushElementSelector) && movingRangeRenderer.setupBrush(movingRangeBrushElementSelector);
110+
movingRangeRenderer.setupXAxisControl()
111+
112+
113+
//Control chart
114+
const controlRenderer = new ControlRenderer(filteredLeadTimeDataSet, avgMovingRange);
115+
controlRenderer.renderGraph(controlGraphElementSelector);
116+
controlRenderer.reportingRangeDays = reportingRangeDays;
117+
controlRenderer.setupEventBus(eventBus)
118+
document.querySelector(controlBrushElementSelector) && controlRenderer.setupBrush(controlBrushElementSelector);
119+
controlRenderer.setupXAxisControl()
120+
121+
return scatterplotRenderer;
122+
}
123+
124+
async function renderGraphs(data, serviceId) {
125+
//The Load and reset config input buttons css selectors
126+
const loadConfigInputSelector = "#load-config-input";
127+
const resetConfigInputSelector = "#reset-config-input";
128+
//The controls div css selector that contains the reporting range days input and the x axes labeling units dropdown
129+
const controlsElementSelector = "#controls-div";
130+
131+
const {
132+
cfdRenderer,
133+
reportingRangeDays
134+
} = renderCfdGraph(data, controlsElementSelector, loadConfigInputSelector, resetConfigInputSelector);
135+
const scatterplotRenderer = renderScatterplotAndHistogramGraphs(data, reportingRangeDays, controlsElementSelector, loadConfigInputSelector, resetConfigInputSelector);
136+
const useObservationLogging = false;
137+
useObservationLogging && await useObservationLogging(scatterplotRenderer, cfdRenderer, serviceId);
138+
}
139+
140+
async function useObservationLogging(scatterplotRenderer, cfdRenderer, serviceId) {
141+
const loggingServiceURL = "";
142+
const btoaToken = "";
143+
const observationLoggingService = new ObservationLoggingService(loggingServiceURL, btoaToken, serviceId);
144+
let observations = [];
145+
try {
146+
await observationLoggingService.loadObservations();
147+
observations = observationLoggingService.observationsByService;
148+
} catch (e) {
149+
console.error(e);
150+
}
151+
152+
scatterplotRenderer.setupObservationLogging(observations);
153+
cfdRenderer.setupObservationLogging(observations);
154+
eventBus.addEventListener("scatterplot-click", (event) => {
155+
initializeForm({...event, chartType: "SCATTERPLOT", serviceId});
156+
toggleRightSidebar(true);
157+
});
158+
eventBus.addEventListener("cfd-click", (event) => {
159+
initializeForm({...event, chartType: "CFD", serviceId});
160+
toggleRightSidebar(true);
161+
});
162+
eventBus.addEventListener("submit-observation-form", async (observation) => {
163+
let observationResponse;
164+
const observationId = observation.observation_id;
165+
delete observation.observation_id;
166+
try {
167+
if (observationId) {
168+
observationResponse = await observationLoggingService.updateObservation(observation, observationId);
169+
} else {
170+
observationResponse = await observationLoggingService.addObservation(observation);
171+
}
172+
if (observationResponse) {
173+
toggleRightSidebar(false);
174+
if (observation.chart_type === "SCATTERPLOT") {
175+
scatterplotRenderer.hideTooltip();
176+
scatterplotRenderer.displayObservationMarkers(observationLoggingService.observationsByService);
177+
}
178+
if (observation.chart_type === "CFD") {
179+
cfdRenderer.hideTooltipAndMovingLine();
180+
cfdRenderer.displayObservationMarkers(observationLoggingService.observationsByService);
181+
}
182+
}
183+
} catch (e) {
184+
warningField.textContent = "Error submitting the observation: " + e.message;
185+
console.log("Error submitting the observation: " + e.message);
186+
}
187+
});
188+
}

‎src/graphs/scatterplot/ScatterplotGraph.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ class ScatterplotGraph {
4141
this.data = data;
4242
this.states = states;
4343
}
44+
4445
/**
4546
* Computes the dataSet for the Scatterplot and Histogram graphs.
4647
*
@@ -70,6 +71,7 @@ class ScatterplotGraph {
7071
deliveredTimestamp: ticket.delivered,
7172
leadTime: 0,
7273
ticketId: ticket.work_id,
74+
ticketType: ticket.indexes?.find((i) => i.name === 'ticket_type')?.value || '',
7375
};
7476
for (const state of this.states) {
7577
if (ticket[state]) {

0 commit comments

Comments
 (0)