richMetricBar.tpl.html

<div>
	{{metric.name}} (count: {{metric.count}})
	<div ng-if="metric.count > 1" class="progress with-marks">
		<div class="mark-current" ng-style="{left: valueWidth + '%'}"></div>
		<div class="bar-offset" ng-style="{width: minWidth + '%'}"></div>
		<div class="bar bar-success" ng-style="{width: (avgWidth - minWidth) + '%'}"></div>
		<div class="bar bar-success" ng-style="{width: (maxWidth - avgWidth) + '%'}"></div>
		<div tooltip="value {{metric.value}}" class="value-mark" ng-style="{left: valueWidth + '%'}">{{metric.value}}</div>
	</div>
	<div ng-if="metric.count > 1" class="bar-scale">
		<div tooltip="min {{metric.min}}" class="pitch-line" ng-style="{left: minWidth + '%'}"><small class="muted">{{metric.min}}</small></div>
		<div tooltip="max {{metric.max}}" class="pitch-line" ng-style="{left: maxWidth + '%'}"><small class="muted">{{metric.max}}</small></div>
		<div tooltip="average {{metric.avg}}" class="pitch-line" ng-style="{left: avgWidth + '%'}">{{metric.avg}}</div>
	</div>
	<div ng-if="metric.count <= 1" class="progress" style="margin-bottom: 0px;">
		<div class="bar bar-success" ng-style="{width: valueWidth + '%'}" style="text-align:right; padding-right: 5px;">{{metric.value}}</div>
	</div>
</div>