Skip to content

Commit

Permalink
[TRON-17796] Refactor library
Browse files Browse the repository at this point in the history 
- refactor namings and methods - v1
  • Loading branch information
@ClaudiaGivan
ClaudiaGivan committed Nov 23, 2023
1 parent 2645341 commit aa61c78
Show file tree
Hide file tree
Showing 6 changed files with 188 additions and 146 deletions.
12 changes: 6 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
4 changes: 2 additions & 2 deletions examples/example.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ async function renderGraphs(data, serviceId) {
cfdRenderer.useEventBus(eventBus);
if (document.querySelector(cfdGraphElementSelector)) {
if (cfdGraphDataSet.length > 0) {
cfdRenderer.drawGraph(cfdGraphElementSelector);
cfdRenderer.renderGraph(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);
Expand All @@ -68,7 +68,7 @@ async function renderGraphs(data, serviceId) {
const histogramRenderer = new HistogramRenderer(leadTimeDataSet, eventBus);
if (document.querySelector(scatterplotGraphElementSelector)) {
if (leadTimeDataSet.length > 0) {
scatterplotRenderer.drawGraph(scatterplotGraphElementSelector);
scatterplotRenderer.renderGraph(scatterplotGraphElementSelector);
document.querySelector(histogramGraphElementSelector) && histogramRenderer.drawGraph(histogramGraphElementSelector);
document.querySelector(scatterplotBrushElementSelector) && scatterplotRenderer.useBrush(scatterplotBrushElementSelector);
document.querySelector(controlsElementSelector) &&
Expand Down
91 changes: 49 additions & 42 deletions src/graphs/UIControlsRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,62 +2,69 @@ import { readJsonFile } from '../utils/utils.js';
import Renderer from './Renderer.js';

export default class UIControlsRenderer extends Renderer {
currentSelectionDomain;
defaultSelectionDomain;
selectedTimeRange;
defaultTimeRange;
#defaultReportingRangeDays = 90;
#defaultRangeIncrementUnits = 'weeks';
#defaultTimeInterval = 'weeks';
reportingRangeDays = this.#defaultReportingRangeDays;
rangeIncrementUnits = this.#defaultRangeIncrementUnits;
gBrush;
timeInterval = this.#defaultTimeInterval;
brushGroup;
brush;
isUserBrushEvent = true;
isManualBrushUpdate = true;

constructor(data) {
super(data);
this.reportingRangeDays = localStorage.getItem('reportingRangeDays') || this.reportingRangeDays;
this.rangeIncrementUnits = localStorage.getItem('rangeIncrementUnits') || this.rangeIncrementUnits;
this.timeInterval = localStorage.getItem('rangeIncrementUnits') || this.timeInterval;
}

useBrush(brushElementSelector) {
setupBrush(brushElementSelector) {
this.brushSelector = brushElementSelector;
this.defaultSelectionDomain = this.getReportingDomain(this.reportingRangeDays);
this.currentSelectionDomain ||= Array.from(this.defaultSelectionDomain);
this.drawBrush();
this.defaultTimeRange = this.computeReportingRange(this.reportingRangeDays);
this.selectedTimeRange ||= Array.from(this.defaultTimeRange);
this.renderBrush();
}

updateBrush(newSelectionDomain) {
if (newSelectionDomain) {
this.isUserBrushEvent = false;
this.currentSelectionDomain = newSelectionDomain;
this.gBrush?.call(this.brush)?.call(
updateBrushSelection(newTimeRange) {
if (newTimeRange) {
this.isManualBrushUpdate = false;
this.selectedTimeRange = newTimeRange;
this.brushGroup?.call(this.brush)?.call(
this.brush.move,
newSelectionDomain?.map((d) => this.x(d))
newTimeRange?.map((d) => this.x(d))
);
}
}

useControls(reportingRangeDaysSelector, rangeIncrementUnits) {
this.reportingRangeDaysElement = document.querySelector(reportingRangeDaysSelector);
this.reportingRangeDaysElement.value = this.reportingRangeDays;
this.currentSelectionDomain ||= this.getReportingDomain(this.reportingRangeDays);
this.reportingRangeDaysElement.addEventListener('keypress', (event) => {
setupChartControls(reportingRangeDaysSelector, timeIntervalSelector) {
this.setupReportingRangeDays(reportingRangeDaysSelector);
this.setupTimeInterval(timeIntervalSelector);
this.brushSelector ? this.renderBrush() : this.updateChart(this.selectedTimeRange);
}

setupReportingRangeDays(reportingRangeDaysSelector) {
this.reportingRangeDaysInput = document.querySelector(reportingRangeDaysSelector);
this.reportingRangeDaysInput.value = this.reportingRangeDays;
this.selectedTimeRange ||= this.computeReportingRange(this.reportingRangeDays);
this.reportingRangeDaysInput.addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
this.reportingRangeDays = event.target.value;
this.currentSelectionDomain = this.getReportingDomain(this.reportingRangeDays);
this.brushSelector ? this.drawBrush() : this.updateChart(this.currentSelectionDomain);
this.selectedTimeRange = this.computeReportingRange(this.reportingRangeDays);
this.brushSelector ? this.renderBrush() : this.updateChart(this.selectedTimeRange);
}
});
}

this.rangeIncrementUnitsElement = document.querySelector(rangeIncrementUnits);
this.rangeIncrementUnitsElement.value = this.rangeIncrementUnits;
setupTimeInterval(timeIntervalSelector) {
this.rangeIncrementUnitsElement = document.querySelector(timeIntervalSelector);
this.rangeIncrementUnitsElement.value = this.timeInterval;
this.rangeIncrementUnitsElement.addEventListener('change', (event) => {
this.rangeIncrementUnits = event.target.value;
this.drawXAxis(this.gx, this.x.copy().domain(this.currentSelectionDomain), this.rangeIncrementUnits);
this.timeInterval = event.target.value;
this.drawXAxis(this.gx, this.x.copy().domain(this.selectedTimeRange), this.timeInterval);
});
this.brushSelector ? this.drawBrush() : this.updateChart(this.currentSelectionDomain);
}

useConfigLoading(loadConfigInputSelector, resetConfigInputSelector) {
setupConfigLoader(loadConfigInputSelector, resetConfigInputSelector) {
this.loadConfigButton = document.querySelector(loadConfigInputSelector);
const fileChosenElement = document.querySelector('#config-file-chosen');
this.loadConfigButton.addEventListener('change', async (event) => {
Expand All @@ -66,11 +73,11 @@ export default class UIControlsRenderer extends Renderer {
const jsonConfig = await readJsonFile(file);
fileChosenElement.textContent = file.name;
this.reportingRangeDays = jsonConfig.reportingRangeDays || this.reportingRangeDays;
this.rangeIncrementUnits = jsonConfig.rangeIncrementUnits || this.rangeIncrementUnits;
this.timeInterval = jsonConfig.timeInterval || this.timeInterval;
localStorage.setItem('reportingRangeDays', this.reportingRangeDays);
localStorage.setItem('rangeIncrementUnits', this.rangeIncrementUnits);
this.currentSelectionDomain = this.getReportingDomain(this.reportingRangeDays);
this.brushSelector ? this.drawBrush() : this.updateChart(this.currentSelectionDomain);
localStorage.setItem('rangeIncrementUnits', this.timeInterval);
this.selectedTimeRange = this.computeReportingRange(this.reportingRangeDays);
this.brushSelector ? this.renderBrush() : this.updateChart(this.selectedTimeRange);
} catch (err) {
console.error(err);
fileChosenElement.textContent = err;
Expand All @@ -81,28 +88,28 @@ export default class UIControlsRenderer extends Renderer {
localStorage.removeItem('reportingRangeDays');
localStorage.removeItem('rangeIncrementUnits');
this.reportingRangeDays = this.#defaultReportingRangeDays;
this.rangeIncrementUnits = this.#defaultRangeIncrementUnits;
this.currentSelectionDomain = this.getReportingDomain(this.reportingRangeDays);
this.brushSelector ? this.drawBrush() : this.updateChart(this.currentSelectionDomain);
this.timeInterval = this.#defaultTimeInterval;
this.selectedTimeRange = this.computeReportingRange(this.reportingRangeDays);
this.brushSelector ? this.renderBrush() : this.updateChart(this.selectedTimeRange);
});
}

setReportingRangeDays(reportingRangeDays) {
this.reportingRangeDays = reportingRangeDays;
if (this.reportingRangeDaysElement) {
this.reportingRangeDaysElement.value = Math.floor(this.reportingRangeDays);
if (this.reportingRangeDaysInput) {
this.reportingRangeDaysInput.value = Math.floor(this.reportingRangeDays);
}
}

setRangeIncrementUnits(rangeIncrementUnits) {
this.rangeIncrementUnits = rangeIncrementUnits;
setTimeInterval(rangeIncrementUnits) {
this.timeInterval = rangeIncrementUnits;
if (this.rangeIncrementUnitsElement) {
const option = Array.from(this.rangeIncrementUnitsElement.options).find((o) => o.value === rangeIncrementUnits);
option.selected = true;
}
}

drawBrush() {
renderBrush() {
throw new Error('Method not implemented!');
}
}
58 changes: 33 additions & 25 deletions src/graphs/cfd/CFDRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,20 +46,28 @@ class CFDRenderer extends UIControlsRenderer {
console.table(data);
}

useEventBus(eventBus) {
setupEventBus(eventBus) {
this.eventBus = eventBus;
this.eventBus?.addEventListener('change-time-range-scatterplot', this.updateBrush.bind(this));
this.eventBus?.addEventListener('change-time-range-scatterplot', this.updateBrushSelection.bind(this));
}

useObservationLogging(observations) {
setupObservationLogging(observations) {
if (observations) {
this.cfdTooltip = d3.select('body').append('div').attr('class', styles.tooltip).attr('id', 'c-tooltip').style('opacity', 0);
this.cfdLine = this.chartArea.append('line').attr('id', 'cfd-line').attr('stroke', 'black').style('display', 'none');
this.chartArea.on('mouseleave', () => this.hideTooltip());
this.#createTooltipAndMovingLine();
this.#setupMouseLeaveHandler();
this.markObservations(observations);
}
}

#setupMouseLeaveHandler() {
this.chartArea.on('mouseleave', () => this.hideTooltip());
}

#createTooltipAndMovingLine() {
this.cfdTooltip = d3.select('body').append('div').attr('class', styles.tooltip).attr('id', 'c-tooltip').style('opacity', 0);
this.cfdLine = this.chartArea.append('line').attr('id', 'cfd-line').attr('stroke', 'black').style('display', 'none');
}

markObservations(observations) {
if (observations) {
this.observations = observations;
Expand Down Expand Up @@ -110,13 +118,13 @@ class CFDRenderer extends UIControlsRenderer {
event.observationBody && this.cfdTooltip.append('p').text('Observation: ' + event.observationBody);
}

getReportingDomain(noOfDays) {
computeReportingRange(noOfDays) {
const finalDate = this.data[this.data.length - 1].date;
let endDate = new Date(finalDate);
let startDate = addDaysToDate(finalDate, -Number(noOfDays));
if (this.currentSelectionDomain) {
endDate = new Date(this.currentSelectionDomain[1]);
startDate = new Date(this.currentSelectionDomain[0]);
if (this.selectedTimeRange) {
endDate = new Date(this.selectedTimeRange[1]);
startDate = new Date(this.selectedTimeRange[0]);
const diffDays = Number(noOfDays) - calculateDaysBetweenDates(startDate, endDate);
if (diffDays < 0) {
startDate = addDaysToDate(startDate, -Number(diffDays));
Expand All @@ -135,43 +143,43 @@ class CFDRenderer extends UIControlsRenderer {
return [startDate, endDate];
}

drawGraph(graphElementSelector) {
renderGraph(graphElementSelector) {
this.#drawSvg(graphElementSelector);
this.svg.append('g').attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);
this.#drawAxis();
this.#drawArea();
}

drawBrush() {
renderBrush() {
const svgBrush = this.#drawBrushSvg(this.brushSelector);
const defaultSelectionRange = this.defaultSelectionDomain.map((d) => this.x(d));
const defaultSelectionRange = this.defaultTimeRange.map((d) => this.x(d));
this.brush = d3
.brushX()
.extent([
[0, 1],
[this.width, this.focusHeight - this.margin.top + 1],
])
.on('brush', ({ selection }) => {
this.currentSelectionDomain = selection.map(this.x.invert, this.x);
this.updateChart(this.currentSelectionDomain);
if (this.isUserBrushEvent && this.eventBus) {
this.eventBus?.emitEvents('change-time-range-cfd', this.currentSelectionDomain);
this.selectedTimeRange = selection.map(this.x.invert, this.x);
this.updateChart(this.selectedTimeRange);
if (this.isManualBrushUpdate && this.eventBus) {
this.eventBus?.emitEvents('change-time-range-cfd', this.selectedTimeRange);
}
this.isUserBrushEvent = true;
this.isManualBrushUpdate = true;
})
.on('end', ({ selection }) => {
if (!selection) {
this.gBrush.call(this.brush.move, defaultSelectionRange);
this.brushGroup.call(this.brush.move, defaultSelectionRange);
}
});

const brushArea = this.#computeArea(this.x, this.y.copy().range([this.focusHeight - this.margin.top, 4]));
this.#drawStackedAreaChart(svgBrush, this.#stackedData, brushArea);
this.drawXAxis(svgBrush.append('g'), this.x, '', this.focusHeight - this.margin.top);
this.gBrush = svgBrush.append('g');
this.gBrush.call(this.brush).call(
this.brushGroup = svgBrush.append('g');
this.brushGroup.call(this.brush).call(
this.brush.move,
this.currentSelectionDomain.map((d) => this.x(d))
this.selectedTimeRange.map((d) => this.x(d))
);
}

Expand All @@ -198,7 +206,7 @@ class CFDRenderer extends UIControlsRenderer {

this.gx = this.svg.append('g');
this.gy = this.svg.append('g');
this.drawXAxis(this.gx, this.x, this.rangeIncrementUnits);
this.drawXAxis(this.gx, this.x, this.timeInterval);
this.drawYAxis(this.gy, this.y);
}

Expand Down Expand Up @@ -300,7 +308,7 @@ class CFDRenderer extends UIControlsRenderer {
this.setReportingRangeDays(calculateDaysBetweenDates(domain[0], domain[1]));
this.currentXScale = this.x.copy().domain(domain);
this.currentYScale = this.y.copy().domain([0, maxY]).nice();
this.drawXAxis(this.gx, this.currentXScale, this.rangeIncrementUnits, this.height);
this.drawXAxis(this.gx, this.currentXScale, this.timeInterval, this.height);
this.drawYAxis(this.gy, this.currentYScale);

this.chartArea
Expand All @@ -313,7 +321,7 @@ class CFDRenderer extends UIControlsRenderer {

drawXAxis(g, x, rangeIncrementUnits, height = this.height) {
let axis;
rangeIncrementUnits && this.setRangeIncrementUnits(rangeIncrementUnits);
rangeIncrementUnits && this.setTimeInterval(rangeIncrementUnits);
switch (rangeIncrementUnits) {
case 'days':
axis = d3
Expand Down
2 changes: 1 addition & 1 deletion src/graphs/histogram/HistogramRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ class HistogramRenderer extends Renderer {
this.x = this.computeLinearScale(xDomain, [0, this.width]).nice();
}

drawGraph(graphElementSelector) {
renderGraph(graphElementSelector) {
this.#drawSvg(graphElementSelector);
this.#drawAxis();
this.#drawArea();
Expand Down
Loading

0 comments on commit aa61c78

Please sign in to comment.