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 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 '<h3>' + ev.target.getAttribute("name") + '</h3>' + ev.target.getAttribute("value") + "<br/>" + 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<this.columns.length;n++) { var lasttime = data[0][0]; for(var q=1;q<data.length;q++) { val = data[q-1][n+1]; if (val != data[q][n+1]) { tm = data[q][0] - lasttime; finaldata.push({name: this.columns[n].name,value: parseFloat(val),desc: MapValue[PROPERTYID](val), colour: MapColour[PROPERTYID](val),x1: lasttime, x2: data[q][0],y: n, duration: tm}); lasttime = data[q][0]; } } //Make sure we write the data at the end. var q = data.length-1; if (lasttime != data[q][0]) { tm = data[q][0] - lasttime; finaldata.push({name: this.columns[n].name,value: parseFloat(val),desc: MapValue[PROPERTYID](val), colour: MapColour[PROPERTYID](val),x1: lasttime, x2: data[q][0],y: n, duration: tm}); } } var context = this; //Draw the individual bars this.svg.selectAll(".bg") .data(finaldata) .join( enter => 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); }) ) } }