Skip to content

Commit f40bafe

Browse files
jeff-phillips-18jeff-phillips-18
committed
Add Utilization Chart directive with ng-docs and unit tests.
1 parent 83a2b27 commit f40bafe

9 files changed

+702
-16
lines changed

‎dist/angular-patternfly.js

Lines changed: 241 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -555,7 +555,7 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ['c3ChartDefaul
555555
scope: {
556556
config: '=',
557557
data: '=',
558-
centerLabel: '@'
558+
centerLabel: '=?'
559559
},
560560
replace: true,
561561
templateUrl: 'charts/donut/donut-pct-chart.html',
@@ -650,26 +650,26 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ['c3ChartDefaul
650650
$scope.updateAll($scope);
651651
}
652652
],
653-
link: function (scope, element, attrs) {
653+
link: function (scope, element) {
654654
var setupDonutChartTitle = function () {
655655
$timeout(function () {
656656
var donutChartTitle, bigText, smText;
657657

658658
donutChartTitle = element[0].querySelector('text.c3-chart-arcs-title');
659659
if (scope.config.centerLabelFn) {
660660
donutChartTitle.innerHTML = scope.config.centerLabelFn(scope);
661-
} else if (attrs.centerLabel === 'none') {
661+
} else if (scope.centerLabel === 'none') {
662662
donutChartTitle.innerHTML = '';
663663
} else {
664664
// default to 'used' info.
665665
bigText = scope.data.used;
666666
smText = scope.config.units + ' Used';
667667

668-
if (attrs.centerLabel === 'available') {
668+
if (scope.centerLabel === 'available') {
669669
bigText = scope.data.available;
670670
smText = scope.config.units + ' Available';
671-
} else if (attrs.centerLabel === 'percent') {
672-
bigText = scope.data.used / scope.data.total * 100.0 + '%';
671+
} else if (scope.centerLabel === 'percent') {
672+
bigText = Math.round(scope.data.used / scope.data.total * 100.0) + '%';
673673
smText = 'of ' + scope.data.total + ' ' + scope.config.units;
674674
}
675675
if (donutChartTitle) {
@@ -695,7 +695,7 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ['c3ChartDefaul
695695
setupDonutChartTitle();
696696
}, true);
697697

698-
attrs.$observe('centerLabel', function () {
698+
scope.$watch('centerLabel', function () {
699699
setupDonutChartTitle();
700700
});
701701
}
@@ -1027,6 +1027,235 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ['c3ChartDefau
10271027
};
10281028
}
10291029
]);
1030+
;/**
1031+
* @ngdoc directive
1032+
* @name patternfly.charts.directive:pfUtilizationChart
1033+
*
1034+
* @description
1035+
* Directive for rendering a utilization chart. The utilization chart combines overall data with a pfDonutPctChart and
1036+
* a pfSparklineChart. Add the options for the pfDonutChart via the donutConfig parameter. Add the options for the
1037+
* pfSparklineChart via the sparklineConfig parameter.
1038+
* <br><br>
1039+
* See http://c3js.org/reference.html for a full list of C3 chart options.
1040+
*
1041+
* @param {object} config configuration settings for the utilization chart:<br/>
1042+
* <ul style='list-style-type: none'>
1043+
* <li>.title - title of the Utilization chart
1044+
* <li>.units - unit label for values, ex: 'MHz','GB', etc..
1045+
* </ul>
1046+
*
1047+
* @param {object} donutConfig configuration settings for the donut pct chart, see pfDonutPctChart for specifics<br/>
1048+
* @param {object} sparklineConfig configuration settings for the sparkline chart, see pfSparklineChart for specifics<br/>
1049+
*
1050+
* @param {object} chartData the data to be shown in the donut and sparkline charts<br/>
1051+
* <ul style='list-style-type: none'>
1052+
* <li>.used - number representing the amount used
1053+
* <li>.total - number representing the total amount
1054+
* <li>.xData - Array, X values for the data points, first element must be the name of the data
1055+
* <li>.yData - Array, Y Values for the data points, first element must be the name of the data
1056+
* </ul>
1057+
*
1058+
* @param {string=} donutCenterLabel specifies the contents of the donut's center label.<br/>
1059+
* <strong>Values:</strong>
1060+
* <ul style='list-style-type: none'>
1061+
* <li> 'used' - displays the Used amount in the center label (default)
1062+
* <li> 'available' - displays the Available amount in the center label
1063+
* <li> 'percent' - displays the Usage Percent of the Total amount in the center label
1064+
* <li> 'none' - does not display the center label
1065+
* </ul>
1066+
* @param {int=} sparklineChartHeight height of the sparkline chart
1067+
* @param {boolean=} showSparklineXAxis override sparkline config settings for showing the X Axis
1068+
* @param {boolean=} showSparklineYAxis override sparkline config settings for showing the Y Axis
1069+
1070+
* @example
1071+
<example module="patternfly.charts">
1072+
<file name="index.html">
1073+
<style>
1074+
hr {
1075+
display: block;
1076+
height: 10px;
1077+
border: 0;
1078+
border-top: 1px solid #525252;
1079+
margin: 1em 0;
1080+
padding: 0;
1081+
}
1082+
</style>
1083+
<div ng-controller="ChartCtrl" class="row" style="display:inline-block; width: 100%;">
1084+
<div class="col-md-12">
1085+
<div pf-utilization-chart config="config"
1086+
chart-data="data" center-label="centerLabel"
1087+
donut-config="donutConfig" sparkline-config="sparklineConfig"
1088+
sparkline-chart-height="custChartHeight"
1089+
show-sparkline-x-axis="custShowXAxis"
1090+
show-sparkline-y-axis="custShowYAxis">
1091+
</div>
1092+
</div>
1093+
<hr class="col-md-12">
1094+
<div class="col-md-12">
1095+
<form role="form">
1096+
<div class="form-group">
1097+
<label>Donut Center Label Type</label>
1098+
</br>
1099+
<label class="radio-inline">
1100+
<input type="radio" ng-model="centerLabel" value="used">Used</input>
1101+
</label>
1102+
<label class="radio-inline">
1103+
<input type="radio" ng-model="centerLabel" value="available">Available</input>
1104+
</label>
1105+
<label class="radio-inline">
1106+
<input type="radio" ng-model="centerLabel" value="percent">Percent</input>
1107+
</label>
1108+
<label class="radio-inline">
1109+
<input type="radio" ng-model="centerLabel" value="none">None</input>
1110+
</label>
1111+
</div>
1112+
</form>
1113+
<form role="form">
1114+
<div class="form-group">
1115+
<label>Sparkline Tooltip Type</label>
1116+
</br>
1117+
<label class="radio-inline">
1118+
<input type="radio" ng-model="sparklineConfig.tooltipType" value="default">Default</input>
1119+
</label>
1120+
<label class="radio-inline">
1121+
<input type="radio" ng-model="sparklineConfig.tooltipType" value="usagePerDay">Usage Per Day</input>
1122+
</label>
1123+
<label class="radio-inline">
1124+
<input type="radio" ng-model="sparklineConfig.tooltipType" value="valuePerDay">Value Per Day</input>
1125+
</label>
1126+
<label class="radio-inline">
1127+
<input type="radio" ng-model="sparklineConfig.tooltipType" value="percentage">Percentage</input>
1128+
</label>
1129+
</div>
1130+
</form>
1131+
<div class="row">
1132+
<div class="col-md-6">
1133+
<form role="form"">
1134+
<div class="form-group">
1135+
<label>Show</label>
1136+
</br>
1137+
<label class="checkbox-inline">
1138+
<input type="checkbox" ng-model="custShowXAxis">Sparkline X Axis</input>
1139+
</label>
1140+
<label class="checkbox-inline">
1141+
<input type="checkbox" ng-model="custShowYAxis">Sparkline Y Axis</input>
1142+
</label>
1143+
</div>
1144+
</form>
1145+
</div>
1146+
<div class="col-md-3">
1147+
<form role="form" >
1148+
<div class="form-group">
1149+
<label>Chart Height</label>
1150+
</br>
1151+
<input style="height:25px; width:60px;" type="number" ng-model="custChartHeight"></input>
1152+
</div>
1153+
</form>
1154+
</div>
1155+
<div class="col-md-3">
1156+
<button ng-click="addDataPoint()">Add Data Point</button>
1157+
</div>
1158+
</div>
1159+
</div>
1160+
</div>
1161+
</file>
1162+
1163+
<file name="script.js">
1164+
function ChartCtrl($scope) {
1165+
1166+
$scope.config = {
1167+
title: 'Memory',
1168+
units: 'GB'
1169+
};
1170+
$scope.donutConfig = {
1171+
chartId: 'chartA',
1172+
thresholds: {'warning':'60','error':'90'}
1173+
};
1174+
$scope.sparklineConfig = {
1175+
'chartId': 'exampleSparkline',
1176+
'tooltipType': 'default'
1177+
};
1178+
1179+
var today = new Date();
1180+
var dates = ['dates'];
1181+
for (var d = 20 - 1; d >= 0; d--) {
1182+
dates.push(new Date(today.getTime() - (d * 24 * 60 * 60 * 1000)));
1183+
}
1184+
1185+
$scope.data = {
1186+
used: 76,
1187+
total: 100,
1188+
xData: dates,
1189+
yData: ['used', '10', '20', '30', '20', '30', '10', '14', '20', '25', '68', '54', '56', '78', '56', '67', '88', '76', '65', '87', '76']
1190+
};
1191+
1192+
$scope.centerLabel = 'used';
1193+
1194+
$scope.custShowXAxis = false;
1195+
$scope.custShowYAxis = false;
1196+
$scope.custChartHeight = 60;
1197+
1198+
$scope.addDataPoint = function () {
1199+
var newData = Math.round(Math.random() * 100);
1200+
var newDate = new Date($scope.data.xData[$scope.data.xData.length - 1].getTime() + (24 * 60 * 60 * 1000));
1201+
1202+
$scope.data.used = newData;
1203+
$scope.data.xData.push(newDate);
1204+
$scope.data.yData.push(newData);
1205+
};
1206+
};
1207+
</file>
1208+
</example>
1209+
*/
1210+
angular.module('patternfly.charts').directive('pfUtilizationChart',
1211+
function () {
1212+
'use strict';
1213+
return {
1214+
restrict: 'A',
1215+
scope: {
1216+
chartData: '=',
1217+
config: '=',
1218+
centerLabel: '=?',
1219+
donutConfig: '=',
1220+
sparklineConfig: '=',
1221+
sparklineChartHeight: '=?',
1222+
showSparklineXAxis: '=?',
1223+
showSparklineYAxis: '=?'
1224+
},
1225+
replace: true,
1226+
templateUrl: 'charts/utilization/utilization-chart.html',
1227+
controller: ['$scope',
1228+
function ($scope) {
1229+
if ($scope.centerLabel === undefined) {
1230+
$scope.centerLabel = 'used';
1231+
1232+
}
1233+
if ($scope.donutConfig.units === undefined) {
1234+
$scope.donutConfig.units = $scope.config.units;
1235+
}
1236+
if ($scope.chartData.available === undefined) {
1237+
$scope.chartData.available = $scope.chartData.total - $scope.chartData.used;
1238+
}
1239+
$scope.config.units = $scope.config.units || $scope.units;
1240+
}
1241+
],
1242+
link: function (scope, element) {
1243+
var setupCurrentValues = function () {
1244+
if (scope.centerLabel === 'available') {
1245+
scope.currentValue = scope.chartData.used;
1246+
scope.currentText = 'Used';
1247+
} else {
1248+
scope.currentValue = scope.chartData.total - scope.chartData.used;
1249+
scope.currentText = 'Available';
1250+
}
1251+
};
1252+
scope.$watch('centerLabel', function () {
1253+
setupCurrentValues();
1254+
});
1255+
}
1256+
};
1257+
}
1258+
);
10301259
;/**
10311260
* @ngdoc directive
10321261
* @name patternfly.form.directive:pfDatepicker
@@ -1921,6 +2150,11 @@ angular.module('patternfly.validation', []).directive('pfValidation', function (
19212150
"<div class=sparkline-chart><div pf-c3-chart id={{sparklineChartId}} config=config></div></div>"
19222151
);
19232152

2153+
2154+
$templateCache.put('charts/utilization/utilization-chart.html',
2155+
"<div class=utilization-chart-pf><span class=title>{{config.title}}</span><div class=current-values><div class=\"available-count pull-left\"><span>{{currentValue}}</span></div><div class=\"available-text pull-left\"><div><span>{{currentText}}</span></div><div><span>of {{chartData.total}} {{config.units}}</span></div></div></div><div pf-donut-pct-chart config=donutConfig data=chartData center-label=centerLabel></div><div pf-sparkline-chart config=sparklineConfig chart-data=chartData chart-height=sparklineChartHeight show-x-axis=showSparklineXAxis show-y-axis=showSparklineYAxis></div><span class=\"pull-left legend-text\">{{legendLeftText}}</span> <span class=\"pull-right legend-text\">{{legendRightText}}</span></div>"
2156+
);
2157+
19242158
}]);
19252159
;angular.module('patternfly.form').run(['$templateCache', function($templateCache) {
19262160
'use strict';

‎dist/angular-patternfly.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/styles/angular-patternfly.css

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,58 @@
2424
color: #333;
2525
}
2626

27+
.utilization-chart-pf {
28+
}
29+
30+
.utilization-chart-pf .current-values {
31+
border-bottom: 1px solid #d1d1d1;
32+
float: left;
33+
padding: 0 5px 10px 0;
34+
width: 100%;
35+
}
36+
37+
.utilization-chart-pf .available-count {
38+
font-size: 22px;
39+
font-weight: 300;
40+
line-height: 22px;
41+
margin-bottom: 2px;
42+
padding-left: 0;
43+
padding-right: 5px;
44+
}
45+
46+
.utilization-chart-pf .title {
47+
font-size: 15px;
48+
font-weight: 400;
49+
}
50+
51+
.utilization-chart-pf .available-text {
52+
color: #333;
53+
font-size: 12px;
54+
font-weight: 400;
55+
line-height: 12px;
56+
margin-bottom: 2px;
57+
padding-left: 5px;
58+
padding-right: 5px;
59+
}
60+
61+
.utilization-chart-pf .radial-chart {
62+
float: left;
63+
padding-top: 10px;
64+
width: 100%;
65+
}
66+
67+
.utilization-chart-pf .sparkline-chart {
68+
float: left;
69+
margin-left: -5px;
70+
margin-right: -5px;
71+
width: 100%;
72+
}
73+
74+
.utilization-chart-pf .legend-text {
75+
color: inherit;
76+
display: block;
77+
font-size: 12px;
78+
font-weight: 400;
79+
margin-left: 0;
80+
}
2781

‎dist/styles/angular-patternfly.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)