Skip to content

Commit efb484e

Browse files
dtaylor113dtaylor113
committed
Trend-Chart: added title 'valueType' to show as a percentage or actual value
1 parent b213b8d commit efb484e

File tree

5 files changed

+86
-21
lines changed

5 files changed

+86
-21
lines changed

‎dist/angular-patternfly.js‎

Lines changed: 34 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1171,10 +1171,11 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
11711171
*
11721172
* @param {object} config configuration settings for the trends chart:<br/>
11731173
* <ul style='list-style-type: none'>
1174-
* <li>.chartId - the unique id of this trends chart
1175-
* <li>.title - (optional) title of the Trends chart
1176-
* <li>.timeFrame - (optional) the time frame for the data in the pfSparklineChart, ex: 'Last 30 Days'
1177-
* <li>.units - unit label for values, ex: 'MHz','GB', etc..
1174+
* <li>.chartId - the unique id of this trends chart
1175+
* <li>.title - (optional) title of the Trends chart
1176+
* <li>.timeFrame - (optional) the time frame for the data in the pfSparklineChart, ex: 'Last 30 Days'
1177+
* <li>.units - unit label for values, ex: 'MHz','GB', etc..
1178+
* <li>.valueType - the format of the latest data point which is shown in the title. Values are 'actual' or 'percentage'
11781179
* </ul>
11791180
*
11801181
* @param {object} chartData the data to be shown in the sparkline charts<br/>
@@ -1211,15 +1212,26 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
12111212
</div>
12121213
</form>
12131214
</div>
1214-
<div class="col-md-4">
1215+
<div class="col-md-3">
12151216
<form role="form" >
12161217
<div class="form-group">
12171218
<label>Chart Height</label></br>
12181219
<input style="height:25px; width:60px;" type="number" ng-model="custChartHeight"></input>
12191220
</div>
12201221
</form>
12211222
</div>
1222-
<div class="col-md-4">
1223+
<div class="col-md-3">
1224+
<form role="form" >
1225+
<div class="form-group">
1226+
<label>Title Value Type</label></br>
1227+
<select pf-select style="height:25px; width:120px;" ng-model="valueType" id="valueType">
1228+
<option value="actual" ng-selected="true" selected>Actual</option>
1229+
<option value="percentage">Percentage</option>
1230+
</select>
1231+
</div>
1232+
</form>
1233+
</div>
1234+
<div class="col-md-2">
12231235
<button ng-click="addDataPoint()">Add Data Point</button>
12241236
</div>
12251237
</div>
@@ -1231,9 +1243,9 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
12311243
$scope.config = {
12321244
'chartId' : 'exampleTrendsChart',
12331245
'title' : 'Network Utilization Trends',
1246+
'valueType' : 'actual',
12341247
'timeFrame' : 'Last 15 Minutes',
12351248
'units' : 'MHz',
1236-
'showTopBorder': 'true',
12371249
'tooltipType' : 'percentage'
12381250
};
12391251
@@ -1244,7 +1256,7 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
12441256
}
12451257
12461258
$scope.data = {
1247-
'total': '100',
1259+
'total': '250',
12481260
'xData': dates,
12491261
'yData': ['used', '10', '20', '30', '20', '30', '10', '14', '20', '25', '68', '54', '56', '78', '56', '67', '88', '76', '65', '87', '76']
12501262
};
@@ -1257,6 +1269,11 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
12571269
$scope.data.xData.push(new Date($scope.data.xData[$scope.data.xData.length - 1].getTime() + (24 * 60 * 60 * 1000)));
12581270
$scope.data.yData.push(Math.round(Math.random() * 100));
12591271
};
1272+
1273+
$scope.$watch('valueType', function (newValue) {
1274+
$scope.config.valueType = newValue;
1275+
});
1276+
12601277
});
12611278
</file>
12621279
</example>
@@ -1274,7 +1291,14 @@ angular.module('patternfly.charts').directive('pfTrendsChart',
12741291
showYAxis: '=?'
12751292
},
12761293
replace: true,
1277-
templateUrl: 'charts/trends/trends-chart.html'
1294+
templateUrl: 'charts/trends/trends-chart.html',
1295+
controller: ['$scope',
1296+
function ($scope) {
1297+
$scope.getPercentage = function () {
1298+
return Math.round($scope.chartData.yData[$scope.chartData.yData.length - 1] / $scope.chartData.total * 100.0);
1299+
};
1300+
}
1301+
]
12781302
};
12791303
}
12801304
);
@@ -3982,7 +4006,7 @@ angular.module('patternfly.views').directive('pfDataToolbar',
39824006

39834007

39844008
$templateCache.put('charts/trends/trends-chart.html',
3985-
"<div><span class=trend-header-pf ng-if=config.title>{{config.title}}</span> <span class=trend-title-big-pf>{{chartData.yData[chartData.yData.length-1]}}</span> <span class=trend-title-small-pf>{{config.units}}</span><div pf-sparkline-chart config=config chart-data=chartData chart-height=chartHeight show-x-axis=showXAxis show-y-axis=showYAxis></div><span class=trend-footer-pf ng-if=config.timeFrame>{{config.timeFrame}}</span></div>"
4009+
"<div><span class=trend-header-pf ng-if=config.title>{{config.title}}</span> <span ng-if=\"!config.valueType || config.valueType === 'actual'\"><span class=trend-title-big-pf>{{chartData.yData[chartData.yData.length-1]}}</span> <span class=trend-title-small-pf>{{config.units}}</span></span> <span ng-if=\"config.valueType === 'percentage'\"><span class=trend-title-big-pf>{{getPercentage() + '%'}}</span> <span class=trend-title-small-pf>of {{chartData.total + ' ' + config.units}}</span></span><div pf-sparkline-chart config=config chart-data=chartData chart-height=chartHeight show-x-axis=showXAxis show-y-axis=showYAxis></div><span class=trend-footer-pf ng-if=config.timeFrame>{{config.timeFrame}}</span></div>"
39864010
);
39874011

39884012

‎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.

‎src/charts/trends/trends-chart.directive.js‎

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,11 @@
1111
*
1212
* @param {object} config configuration settings for the trends chart:<br/>
1313
* <ul style='list-style-type: none'>
14-
* <li>.chartId - the unique id of this trends chart
15-
* <li>.title - (optional) title of the Trends chart
16-
* <li>.timeFrame - (optional) the time frame for the data in the pfSparklineChart, ex: 'Last 30 Days'
17-
* <li>.units - unit label for values, ex: 'MHz','GB', etc..
14+
* <li>.chartId - the unique id of this trends chart
15+
* <li>.title - (optional) title of the Trends chart
16+
* <li>.timeFrame - (optional) the time frame for the data in the pfSparklineChart, ex: 'Last 30 Days'
17+
* <li>.units - unit label for values, ex: 'MHz','GB', etc..
18+
* <li>.valueType - the format of the latest data point which is shown in the title. Values are 'actual' or 'percentage'
1819
* </ul>
1920
*
2021
* @param {object} chartData the data to be shown in the sparkline charts<br/>
@@ -51,15 +52,26 @@
5152
</div>
5253
</form>
5354
</div>
54-
<div class="col-md-4">
55+
<div class="col-md-3">
5556
<form role="form" >
5657
<div class="form-group">
5758
<label>Chart Height</label></br>
5859
<input style="height:25px; width:60px;" type="number" ng-model="custChartHeight"></input>
5960
</div>
6061
</form>
6162
</div>
62-
<div class="col-md-4">
63+
<div class="col-md-3">
64+
<form role="form" >
65+
<div class="form-group">
66+
<label>Title Value Type</label></br>
67+
<select pf-select style="height:25px; width:120px;" ng-model="valueType" id="valueType">
68+
<option value="actual" ng-selected="true" selected>Actual</option>
69+
<option value="percentage">Percentage</option>
70+
</select>
71+
</div>
72+
</form>
73+
</div>
74+
<div class="col-md-2">
6375
<button ng-click="addDataPoint()">Add Data Point</button>
6476
</div>
6577
</div>
@@ -71,9 +83,9 @@
7183
$scope.config = {
7284
'chartId' : 'exampleTrendsChart',
7385
'title' : 'Network Utilization Trends',
86+
'valueType' : 'actual',
7487
'timeFrame' : 'Last 15 Minutes',
7588
'units' : 'MHz',
76-
'showTopBorder': 'true',
7789
'tooltipType' : 'percentage'
7890
};
7991
@@ -84,7 +96,7 @@
8496
}
8597
8698
$scope.data = {
87-
'total': '100',
99+
'total': '250',
88100
'xData': dates,
89101
'yData': ['used', '10', '20', '30', '20', '30', '10', '14', '20', '25', '68', '54', '56', '78', '56', '67', '88', '76', '65', '87', '76']
90102
};
@@ -97,6 +109,11 @@
97109
$scope.data.xData.push(new Date($scope.data.xData[$scope.data.xData.length - 1].getTime() + (24 * 60 * 60 * 1000)));
98110
$scope.data.yData.push(Math.round(Math.random() * 100));
99111
};
112+
113+
$scope.$watch('valueType', function (newValue) {
114+
$scope.config.valueType = newValue;
115+
});
116+
100117
});
101118
</file>
102119
</example>
@@ -114,7 +131,14 @@ angular.module('patternfly.charts').directive('pfTrendsChart',
114131
showYAxis: '=?'
115132
},
116133
replace: true,
117-
templateUrl: 'charts/trends/trends-chart.html'
134+
templateUrl: 'charts/trends/trends-chart.html',
135+
controller: ['$scope',
136+
function ($scope) {
137+
$scope.getPercentage = function () {
138+
return Math.round($scope.chartData.yData[$scope.chartData.yData.length - 1] / $scope.chartData.total * 100.0);
139+
};
140+
}
141+
]
118142
};
119143
}
120144
);

‎src/charts/trends/trends-chart.html‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
<div>
22
<span class="trend-header-pf" ng-if="config.title">{{config.title}}</span>
3-
<span class="trend-title-big-pf">{{chartData.yData[chartData.yData.length-1]}}</span> <span class="trend-title-small-pf">{{config.units}}</span>
3+
4+
<span ng-if="!config.valueType || config.valueType === 'actual'">
5+
<span class="trend-title-big-pf">{{chartData.yData[chartData.yData.length-1]}}</span>
6+
<span class="trend-title-small-pf">{{config.units}}</span>
7+
</span>
8+
<span ng-if="config.valueType === 'percentage'">
9+
<span class="trend-title-big-pf">{{getPercentage() + '%'}}</span>
10+
<span class="trend-title-small-pf">of {{chartData.total + ' ' + config.units}}</span>
11+
</span>
12+
413
<div pf-sparkline-chart config="config" chart-data="chartData" chart-height="chartHeight"
514
show-x-axis="showXAxis" show-y-axis="showYAxis"></div>
615
<span class="trend-footer-pf" ng-if="config.timeFrame">{{config.timeFrame}}</span>

‎test/charts/trends/trends-chart.spec.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,4 +55,12 @@ describe('Directive: pfTrendsChart', function() {
5555
expect(angular.element(element).find('.trend-footer-pf').html()).toBe("Last 15 Minutes");
5656
});
5757

58+
it("should show the percentage in the trend heading", function() {
59+
60+
$scope.config.valueType = 'percentage';
61+
$scope.$digest();
62+
63+
expect(angular.element(element).find('.trend-title-big-pf').html()).toBe("76%");
64+
expect(angular.element(element).find('.trend-title-small-pf').html()).toBe("of 100 MHz");
65+
});
5866
});

0 commit comments

Comments
 (0)