in src/UXClient/Components/AvailabilityChart/AvailabilityChart.ts [165:303]
public render (transformedAvailability: any, chartOptions: any, rawAvailability: any = {}) {
this.setChartOptions(chartOptions);
this.rawAvailability = rawAvailability;
this.transformedAvailability = transformedAvailability;
this.color = this.chartOptions.color ? this.chartOptions.color : 'teal';
this.maxBuckets = (this.chartOptions.maxBuckets) ? this.chartOptions.maxBuckets : 500;
this.setRangeVariables(rawAvailability);
var startBucket = (this.fromMillis !== null && this.bucketSize !== null) ?
Math.round(Math.floor(this.fromMillis / this.bucketSize) * this.bucketSize) : null;
var endBucket = (this.toMillis !== null && this.bucketSize !== null) ?
Math.round(Math.floor(this.toMillis / this.bucketSize) * this.bucketSize) : null;
if (startBucket !== null && startBucket === endBucket) {
this.fromMillis = Math.floor(this.fromMillis / this.bucketSize) * this.bucketSize;
this.toMillis = this.fromMillis + this.bucketSize;
this.bucketSize = this.bucketSize / 60;
}
this.ae = [new this.uxClient.AggregateExpression({predicateString: ""}, {property: 'Count', type: "Double"}, ['count'],
{ from: new Date(this.fromMillis), to: new Date(this.toMillis) }, null, 'grey', 'Availability')];
this.targetElement = d3.select(this.renderTarget)
.classed("tsi-availabilityChart", true)
.classed("tsi-compact", this.chartOptions.isCompact)
.classed("tsi-withButton", this.chartOptions.persistDateTimeButtonRange);
this.chartOptions.yAxisHidden = true;
this.chartOptions.focusHidden = true;
this.chartOptions.singleLineXAxisLabel = true;
this.chartOptions.suppressResizeListener = true;
this.chartOptions.brushClearable = false;
this.chartOptions.minBrushWidth = 1;
this.chartOptions.brushHandlesVisible = true;
let brushMoveAction = this.chartOptions.brushMoveAction;
this.chartOptions.brushMoveAction = (from, to) => {
this.setFromAndToTimes(from.valueOf(), to.valueOf());
this.drawGhost();
if (this.chartOptions.isCompact) {
this.buildCompactFromAndTo();
}
if (brushMoveAction != null)
brushMoveAction(from, to);
}
super.themify(this.targetElement, chartOptions.theme);
if (this.timePickerContainer == null) {
this.targetElement.html("");
this.timePickerContainer = this.targetElement.append("div")
.classed("tsi-timePickerContainer", true);
this.timePickerChart = this.timePickerContainer.append("div").classed("tsi-timePickerChart", true);
var sparkLineContainer = this.targetElement.append("div").classed("tsi-sparklineContainer", true);
this.timePickerTextContainer = this.targetElement.append("div").classed("tsi-timePickerTextContainer", true)
.style("margin-left", this.chartOptions.availabilityLeftMargin + this.margins.left);
this.timePickerLineChart = new LineChart(this.timePickerChart.node() as any);
this.timePickerLineChart.chartMargins.left = (this.chartOptions.availabilityLeftMargin - this.margins.left);
this.buildFromAndToContainer();
this.sparkLineChart = new LineChart(sparkLineContainer.node() as any);
this.sparkLineChart.chartMargins.left = (this.chartOptions.availabilityLeftMargin - this.margins.left);
this.dateTimePickerContainer = this.targetElement.append("div").classed("tsi-dateTimePickerContainer", true);
this.dateTimePicker = new DateTimePicker(this.dateTimePickerContainer.node());
window.addEventListener('resize', () => {
this.timePickerLineChart.draw();
this.setTicks();
this.drawWarmRange();
if (this.chartOptions.isCompact)
this.buildCompactFromAndTo();
setTimeout(() => {
this.drawGhost();
}, 100);
});
var pickerContainerAndContent = this.targetElement.selectAll(".tsi-dateTimePickerContainer, .tsi-dateTimePickerContainer *");
}
//clear the date time picker
this.dateTimePickerContainer.style("display", "none");
this.timePickerContainer.selectAll('.tsi-compactFromTo').remove();
if (this.chartOptions.isCompact) {
this.targetElement.select('.tsi-sparklineContainer').style("display", 'none');
if(!this.chartOptions.persistDateTimeButtonRange)
this.targetElement.select(".tsi-timePickerTextContainer").style('display', 'none');
this.targetElement.select('.tsi-zoomButtonContainer').style('display', 'none');
this.targetElement.select('.tsi-timePickerContainer').style('max-height', '68px').style('top', this.chartOptions.persistDateTimeButtonRange ? '6px' : '20px');
} else {
this.targetElement.select('.tsi-sparklineContainer').style("display", 'flex');
this.targetElement.select(".tsi-timePickerTextContainer").style('display', 'inherit');
this.targetElement.select('.tsi-zoomButtonContainer').style('display', 'flex');
this.targetElement.select('.tsi-timePickerContainer').style('max-height', 'none').style('top', '0px');
}
var sparkLineOptions: any = this.createSparkLineOptions(chartOptions);
var visibileAvailability = this.createDisplayBuckets(this.fromMillis, this.toMillis);
this.sparkLineChart.render(visibileAvailability, sparkLineOptions, this.ae);
this.timePickerLineChart.render(visibileAvailability, this.chartOptions, this.ae);
this.setTicks();
this.drawWarmRange();
if (!this.chartOptions.preserveAvailabilityState) {
this.zoomedToMillis = this.toMillis;
this.zoomedFromMillis = this.chartOptions.defaultAvailabilityZoomRangeMillis ? Math.max(this.fromMillis, this.toMillis - this.chartOptions.defaultAvailabilityZoomRangeMillis) : this.fromMillis;
this.sparkLineChart.setBrushStartTime(new Date(this.zoomedFromMillis));
this.sparkLineChart.setBrushEndTime(new Date(this.zoomedToMillis));
this.setFromAndToTimes(Math.max(this.fromMillis, this.toMillis - (24 * 60 * 60 * 1000)), this.toMillis);
this.setBrush(Math.max(this.fromMillis, this.toMillis - (24 * 60 * 60 * 1000)), this.toMillis);
} else {
if (this.zoomedFromMillis == null) this.zoomedFromMillis = this.chartOptions.defaultAvailabilityZoomRangeMillis ? Math.max(this.fromMillis, this.toMillis - this.chartOptions.defaultAvailabilityZoomRangeMillis) : this.fromMillis;
if (this.zoomedToMillis == null) this.zoomedToMillis = this.toMillis;
if (this.sparkLineChart.brushStartTime == null) this.sparkLineChart.setBrushStartTime(new Date(this.zoomedFromMillis));
if (this.sparkLineChart.brushEndTime == null) this.sparkLineChart.setBrushEndTime(new Date(this.zoomedToMillis));
if (this.selectedFromMillis == null || this.selectedToMillis == null) this.setFromAndToTimes(this.toMillis - (24 * 60 * 60 * 1000), this.toMillis);
this.drawGhost();
this.setBrush(this.selectedFromMillis, this.selectedToMillis);
}
this.sparkLineChart.setBrush();
var self = this;
this.timePickerChart.select(".brushElem").on("wheel.zoom", function (d) {
let direction = d3.event.deltaY > 0 ? 'out' : 'in';
let xPos = (d3.mouse(<any>this)[0]);
self.zoom(direction, xPos);
});
if (!this.chartOptions.isCompact) {
this.buildZoomButtons();
} else {
this.timePickerChart.select('.brushElem').select('.selection')
}
this.setAvailabilityRange(this.zoomedFromMillis, this.zoomedToMillis);
if (this.chartOptions.isCompact) {
this.buildCompactFromAndTo();
}
this.timePickerLineChart.drawBrushRange();
}