Skip to content

Commit

Permalink
Merge pull request #52 from pfizer-opensource/baseline-and-brush-adju…
Browse files Browse the repository at this point in the history
…stments

Adjust baseline and brush
  • Loading branch information
ClaudiaGivan authored Nov 29, 2024
2 parents 6648efd + 22dd8e6 commit 1168e75
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 10 deletions.
1 change: 1 addition & 0 deletions src/graphs/Renderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export default class Renderer {
* @returns {d3.Selection} The created SVG element.
*/
createSvg(selector, height = this.height, width = this.width) {
this.graphElementSelector = selector;
const htmlElement = document.querySelector(selector);
if (htmlElement) {
htmlElement.innerHTML = '';
Expand Down
38 changes: 35 additions & 3 deletions src/graphs/UIControlsRenderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,41 @@ export default class UIControlsRenderer extends Renderer {
updateBrushSelection(newTimeRange) {
if (newTimeRange) {
this.isManualBrushUpdate = false;
const maxX = newTimeRange[1] > this.x.domain()[1] ? this.x.domain()[1] : newTimeRange[1];
const minX = newTimeRange[0] < this.x.domain()[0] ? this.x.domain()[0] : newTimeRange[0];
this.selectedTimeRange = [minX, maxX];
const [newStart, newEnd] = newTimeRange;
const [domainStart, domainEnd] = this.x.domain();
const duration = newEnd - newStart;
let selectedMin = newStart;
let selectedMax = newEnd;
// Ensure selectedMin does not go before domainStart
const adjustSelectedMin = (calculatedMin) => {
if (calculatedMin < domainStart) {
return domainStart;
}
return calculatedMin;
};

// Check if newTimeRange exceeds the domain
if (newStart < domainStart || newEnd > domainEnd) {
selectedMax = domainEnd;

// Calculate selectedMin based on the duration
selectedMin = new Date(domainEnd.getTime() - duration);

// Ensure selectedMin does not go before domainStart
selectedMin = adjustSelectedMin(selectedMin);

if (selectedMin === domainStart) {
selectedMax = new Date(selectedMin.getTime() + duration);

// Ensure selectedMax does not exceed domainEnd
if (selectedMax > domainEnd) {
selectedMax = domainEnd;
}
}
}

this.selectedTimeRange = [selectedMin, selectedMax];

// Set the flag before emitting an event
this.preventEventLoop = true;

Expand Down
50 changes: 43 additions & 7 deletions src/graphs/scatterplot/ScatterplotRenderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -226,18 +226,54 @@ class ScatterplotRenderer extends UIControlsRenderer {
}
}

setBaselineListener(baselineStartDateSelector, baselineEndDateSelector) {
this.baselineStartDateElement = document.querySelector(baselineStartDateSelector);
setBaselineListener(baselineStartDateSelector, baselineEndDateSelector, baselineErrorSelector, namespace) {
const lastIndex = this.data.length - 1;
this.baselineStartDateElement = d3.select(baselineStartDateSelector);
if (this.baselineStartDateElement) {
this.baselineStartDateElement.addEventListener('change', (event) => {
this.baselineStartDate = new Date(event.target.value);
this.baselineStartDateElement.attr('min', new Date(this.data[0].deliveredDate).toISOString().split('T')[0]);
this.baselineStartDateElement.attr('max', new Date(this.data[lastIndex].deliveredDate).toISOString().split('T')[0]);
this.baselineStartDateElement.on(`change.${namespace}`, (event) => {
const selectedValue = d3.select(event.target).property('value');
this.baselineStartDate = new Date(selectedValue);

if (this.baselineEndDate && this.baselineStartDate > this.baselineEndDate) {
d3.select(baselineErrorSelector).style('display', 'block').text('Start date cannot be later than end date.');

// Reset the end date to the start date
this.baselineEndDateElement.property('value', selectedValue);
this.baselineEndDate = new Date(selectedValue);

// Hide the error message after 3 seconds
setTimeout(() => {
d3.select(baselineErrorSelector).style('display', 'none');
}, 3000);
}

this.updateGraph(this.selectedTimeRange);
});
}
this.baselineEndDateElement = document.querySelector(baselineEndDateSelector);

this.baselineEndDateElement = d3.select(baselineEndDateSelector);
if (this.baselineEndDateElement) {
this.baselineEndDateElement.addEventListener('change', (event) => {
this.baselineEndDate = new Date(event.target.value);
this.baselineEndDateElement.attr('min', new Date(this.data[0].deliveredDate).toISOString().split('T')[0]);
this.baselineEndDateElement.attr('max', new Date(this.data[lastIndex].deliveredDate).toISOString().split('T')[0]);
this.baselineEndDateElement.on(`change.${namespace}`, (event) => {
const selectedValue = d3.select(event.target).property('value');
this.baselineEndDate = new Date(selectedValue);

if (this.baselineStartDate && this.baselineStartDate > this.baselineEndDate) {
d3.select(baselineErrorSelector).style('display', 'block').text('End date cannot be earlier than start date.');

// Reset the start date to the end date
this.baselineStartDateElement.property('value', selectedValue);
this.baselineStartDate = new Date(selectedValue);

// Hide the error message after 3 seconds
setTimeout(() => {
d3.select(baselineErrorSelector).style('display', 'none');
}, 3000);
}

this.updateGraph(this.selectedTimeRange);
});
}
Expand Down

0 comments on commit 1168e75

Please sign in to comment.