===Status-Line Example=== A **Status-Line** report is used to show the value of a //discrete// channel across time. An example can be found in the [[https://demo.optrix.com.au/s/pl/displaylist/info?report=automatic.Running_Status_Report|Paint-Line Running Status Infographic]]. ==Example==

==Description== You should replace the following... ^Element^Replace With^ |[PROPERTY]|The name of the property you want to report on| |[PROPERTYID]|The ARDI ID number of the property you want to report on|


class ActiveReport extends SVGReport {
	initialise() {
		super.initialise();
		this.first = true;
	};
	
	create() {		
		report.singleQueryReport("'[PROPERTY]' ALLPOINTS {%%} GETHISTORY");			
	}	
	
       //Customise the tooltip for this Infographic
	updateTooltip(ev) {
		return '' + ev.target.getAttribute("name") + '
' + ev.target.getAttribute("value") + "
" + ev.target.getAttribute("duration");
	}
		
	draw(data) {
		//Calculate the margins
				
		var margin = {top: 60, right: 40, bottom: 40, left: 150};
		var height = this.sizing[1];
		var width = this.sizing[0];	

		var svg = this.svgbase;			
				
                //No smooth animation for this report - clear the SVG file every time
		$('#reportsvg').html("");
		
                //Create a group to contain the report
		var group = svg.append("g")
			.attr("transform","translate(" + margin.left + " " + margin.top + ")");
			
		svg = group;
		width = width - (margin.left + margin.right);
		height = height - (margin.top + margin.bottom);			
		
                //Create the X-axis
		var x = d3.scaleTime()
			.domain([data[0][0], data[data.length-1][0]])
			.range([ 0, width]);

                //Draw the X axis
		svg.append("g")
			.attr("transform", "translate(0," + height + ")")
			.call(d3.axisBottom(x))
			.selectAll("text")
			  .attr("transform", "translate(-10,0)rotate(-45)")
			  .style("text-anchor", "end");
		
		 // Create the Y axis
		var y = d3.scaleBand()
			.range([ 0, height ])
			.domain(this.columns.map(d => d.name.replace(" [PROPERTY]","")))
			.padding(.1);

               //Draw the Y axis
		svg.append("g")
			.call(d3.axisLeft(y));
			
		this.svg = group;
		this.first = false;
		this.x = x;
		this.y = y;
		
		
		var val = 0;
		var tm = 0;
		var finaldata = [];

                //For each channel, determine where the values change and add a FinalData entry
		for(var n=0;n enter.append("rect")
					.attr("class","bg element")
					.attr("x", function(d) {
						return context.x(d.x1);
					})
					.attr("y", function(d) { 
						return context.y(d.name.replace(" [PROPERTY]","")); 
					})		
					.attr("width", function(d) {
						return context.x(d.x2) -  context.x(d.x1); 
					})
					.attr("height",y.bandwidth())
					.attr("fill", function (d) {
						return d.colour;
					})
					.attr('value', function(d) { 
						return d.desc;
					})
					.attr('name', function(d) { 
						return d.name.replace(" [PROPERTY]","");
					})
					.attr('duration', function(d) { 
						return context.formatDuration(d.duration/1000) + ", from " + context.formatDate(d.x1,d.x1,d.x2) + " to " + context.formatDate(d.x2,d.x1,d.x2);
					})
					.call(this.tip)
					.attr("units","")
					.attr("opacity",1)
					.attr("text-anchor","start")
					.attr("alignment-baseline","hanging"),
				update => update
					.transition()
					.duration(500)
					.attr("x", function(d) {
						return context.x(d.x1);
					})				
					.attr("fill", function (d) {
						return d.colour;
					})
					.attr('value', function(d) { 
						return d.desc;
					})
					.attr("width", function(d) {
						return context.x(d.x2) -  context.x(d.x1); 
					})
			)

	}	
}