Skip to content

Commit

Permalink
Refactored color logic out of template
Browse files Browse the repository at this point in the history
  • Loading branch information
DeanF committed Jun 10, 2016
1 parent 062ea47 commit 33224dc
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 5 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"name": "health_metric_vis",
"version": "0.3.0"
"version": "0.3.1"
}
2 changes: 1 addition & 1 deletion public/health_metric_vis.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div ng-controller="KbnHealthMetricVisController" class="health-metric-vis">
<div class="health-metric-container" ng-repeat="metric in metrics">
<div class="health-metric-value" ng-style="{'font-size': vis.params.fontSize+'pt', 'color': ((!vis.params.invertScale && metric.rawValue <= vis.params.redThreshold) || (vis.params.invertScale && metric.rawValue >= vis.params.redThreshold)) ? vis.params.redColor : ((!vis.params.invertScale && metric.rawValue > vis.params.redThreshold && metric.rawValue < vis.params.greenThreshold) || (vis.params.invertScale && metric.rawValue < vis.params.redThreshold && metric.rawValue > vis.params.greenThreshold)) ? vis.params.yellowColor : vis.params.greenColor }">{{metric.formattedValue}}</div>
<div class="health-metric-value" ng-style="{'font-size': vis.params.fontSize+'pt', 'color': metric.color }">{{metric.formattedValue}}</div>
<div>{{metric.label}}</div>
</div>
</div>
31 changes: 28 additions & 3 deletions public/health_metric_vis_controller.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,44 @@ define(function (require) {
function isInvalid(val) {
return _.isUndefined(val) || _.isNull(val) || _.isNaN(val);
}

function getColor(val, visParams) {
if (!visParams.invertScale) {
if (val <= visParams.redThreshold) {
return visParams.redColor;
}
else if (val < visParams.greenThreshold) {
return visParams.yellowColor;
}
else {
return visParams.greenColor;
}
}
else {
if (val <= visParams.greenThreshold) {
return visParams.greenColor;
}
else if (val < visParams.redThreshold) {
return visParams.yellowColor;
}
else {
return visParams.redColor;
}
}
}

$scope.processTableGroups = function (tableGroups) {
tableGroups.tables.forEach(function (table) {
table.columns.forEach(function (column, i) {
const fieldFormatter = table.aggConfig(column).fieldFormatter();
let value = table.rows[0][i];

let formattedValue = isInvalid(value) ? '?' : fieldFormatter(value);

let color = getColor(value, vis.params);

metrics.push({
label: column.title,
formattedValue: formattedValue,
rawValue: value
color: color
});
});
});
Expand Down

0 comments on commit 33224dc

Please sign in to comment.