Improve power management UI

This commit is contained in:
Colin McLeod
2015-06-10 22:51:36 -07:00
parent 0d3e156346
commit 2ea5c64256
3 changed files with 18 additions and 22 deletions

View File

@@ -25,11 +25,11 @@ angular.module('app').directive('powerBands', ['$window', function ($window) {
// Create Y Axis SVG Elements
vis.append('g').attr('class', 'watt axis');
vis.append('g').attr('class', 'pct axis');
vis.append("text").attr('x', -35).attr('y', 15).attr('class','primary').text('RET');
vis.append("text").attr('x', -35).attr('y', barHeight + 17).attr('class','primary').text('DEP');
vis.append("text").attr('x', -35).attr('y', 16).attr('class','primary').text('RET');
vis.append("text").attr('x', -35).attr('y', barHeight + 18).attr('class','primary').text('DEP');
var retLbl = vis.append("text").attr('y', 15);
var depLbl = vis.append("text").attr('y', barHeight + 17);
var retLbl = vis.append("text").attr('y', 16);
var depLbl = vis.append("text").attr('y', barHeight + 18);
// Watch for changes to data and events
scope.$watchCollection('available', render);
@@ -53,24 +53,24 @@ angular.module('app').directive('powerBands', ['$window', function ($window) {
deployed.selectAll('text').remove();
// Update X & Y Axis
wattScale.range([0, w]).domain([0, maxPwr]);
pctScale.range([0, w]).domain([0, maxPwr / available]);
wattScale.range([0, w]).domain([0, maxPwr]).clamp(true);
pctScale.range([0, w]).domain([0, maxPwr / available]).clamp(true);
vis.selectAll('.watt.axis').call(wattAxis);
vis.selectAll('.pct.axis').attr('transform', 'translate(0,' + innerHeight + ')').call(pctAxis);
retLbl
.attr('x', wattScale(maxBand.retractedSum) + 5 )
.attr('x', w + 5 )
.attr('class',maxBand.retractedSum > available? 'warning': 'primary')
.text(wattFmt(maxBand.retractedSum) + ' (' + pctFmt(maxBand.retractedSum / available) + ')');
.text(wattFmt(Math.max(0,maxBand.retractedSum)) + ' (' + pctFmt(Math.max(0,maxBand.retractedSum / available)) + ')');
depLbl
.attr('x', wattScale(maxBand.deployedSum) + 5 )
.attr('x', w + 5 )
.attr('class',maxBand.deployedSum > available? 'warning': 'primary')
.text(wattFmt(maxBand.deployedSum) + ' (' + pctFmt(maxBand.deployedSum / available) + ')');
.text(wattFmt(Math.max(0,maxBand.deployedSum)) + ' (' + pctFmt(Math.max(0,maxBand.deployedSum / available)) + ')');
retracted.selectAll("rect").data(bands).enter().append("rect")
.attr("height", barHeight)
.attr("width", function(d) { return d.retracted? (wattScale(d.retracted) - 1) : 0; })
.attr("width", function(d) { return Math.max(wattScale(d.retracted) - 1, 0); })
.attr("x", function(d) { return wattScale(d.retractedSum) - wattScale(d.retracted); })
.attr('y', 1)
.attr('class',function(d){ return (d.retractedSum > available)? 'warning' :'primary'; });
@@ -84,7 +84,7 @@ angular.module('app').directive('powerBands', ['$window', function ($window) {
deployed.selectAll("rect").data(bands).enter().append("rect")
.attr("height", barHeight)
.attr("width", function(d) { return (d.deployed || d.retracted)? (wattScale(d.deployed + d.retracted) - 1) : 0; })
.attr("width", function(d) { return Math.max(wattScale(d.deployed + d.retracted) - 1, 0); })
.attr("x", function(d) { return wattScale(d.deployedSum) - wattScale(d.retracted) - wattScale(d.deployed); })
.attr('y', barHeight + 2)
.attr('class',function(d){ return (d.deployedSum > available)? 'warning' :'primary'; });
@@ -99,13 +99,8 @@ angular.module('app').directive('powerBands', ['$window', function ($window) {
}
function bandText(val, index) {
if (val > 0) {
if( wattScale(val) > 100) {
return (index + 1) + ' (' + wattFmt(val) + ' MW)';
}
if( wattScale(val) > 10) {
return index + 1;
}
if (val > 0 && wattScale(val) > 13) {
return index + 1;
}
return '';
}