@@ -3921,6 +3921,7 @@ angular.module( 'patternfly.card' ).component('pfInfoStatusCard', {
3921
3921
bindings: {
3922
3922
config: '<',
3923
3923
data: '<',
3924
+ tooltip: '<',
3924
3925
chartHeight: '<?',
3925
3926
centerLabel: '<?',
3926
3927
onThresholdChange: '&'
@@ -3986,19 +3987,31 @@ angular.module( 'patternfly.card' ).component('pfInfoStatusCard', {
3986
3987
ctrl.donutTooltip = function () {
3987
3988
return {
3988
3989
contents: function (d) {
3989
- var tooltipHtml;
3990
-
3990
+ // Default to percent format
3991
+ var tooltipContent =
3992
+ '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
3993
+ Math.round(d[0].ratio * 100) + '% ' + d[0].name +
3994
+ '</span>';
3991
3995
if (ctrl.config.tooltipFn) {
3992
- tooltipHtml = '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
3993
- ctrl.config.tooltipFn(d) +
3994
- '</span>';
3995
- } else {
3996
- tooltipHtml = '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
3997
- Math.round(d[0].ratio * 100) + '%' + ' ' + ctrl.config.units + ' ' + d[0].name +
3998
- '</span>';
3996
+ tooltipContent =
3997
+ '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
3998
+ ctrl.config.tooltipFn(d) +
3999
+ '</span>';
4000
+ } else if (ctrl.tooltip === "amount") {
4001
+ tooltipContent =
4002
+ '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
4003
+ d[0].value + ' ' + ctrl.config.units + ' ' + d[0].name +
4004
+ '</span>';
4005
+ } else if (ctrl.tooltip === "both") {
4006
+ tooltipContent =
4007
+ '<table class="c3-tooltip"><tbody><tr>' +
4008
+ '<td>' +
4009
+ d[0].value + ' ' + ctrl.config.units + ' ' + d[0].name +
4010
+ '</td><td>' +
4011
+ Math.round(d[0].ratio * 100) + '%' +
4012
+ '</td></tr></tbody></table>';
3999
4013
}
4000
-
4001
- return tooltipHtml;
4014
+ return tooltipContent;
4002
4015
}
4003
4016
};
4004
4017
};
@@ -4257,6 +4270,14 @@ angular.module( 'patternfly.card' ).component('pfInfoStatusCard', {
4257
4270
* <li> 'none' - does not display the center label
4258
4271
* </ul>
4259
4272
*
4273
+ * @param {string=} tooltip specifies the value to show in the tooltip when hovering Used or Available chart segments
4274
+ * <strong>Values:</strong>
4275
+ * <ul style='list-style-type: none'>
4276
+ * <li> 'percent' - displays the Used or Available percentage of the Total in the tooltop (default)
4277
+ * <li> 'amount' - displays the Used or Available amount and units in the tooltip
4278
+ * <li> 'both' - displays both the percentage and amount in the tooltip
4279
+ * </ul>
4280
+ *
4260
4281
* @param {int=} chartHeight height of the donut chart
4261
4282
* @param {function (threshold)} on-threshold-change user defined function to handle when thresolds change <br/>
4262
4283
* <strong>'threshold' Values:</strong>
@@ -4317,9 +4338,30 @@ angular.module( 'patternfly.card' ).component('pfInfoStatusCard', {
4317
4338
<pf-donut-pct-chart config="pctConfig" data="pctData" center-label="pctLabel"></pf-donut-pct-chart>
4318
4339
</div>
4319
4340
<div class="col-md-3 text-center">
4320
- <label>center-label = 'none'</label>
4341
+ <label>center-label = 'none'</label>
4342
+ <pf-donut-pct-chart config="noneConfig" data="noneData" center-label="noLabel"></pf-donut-pct-chart>
4343
+ </div>
4344
+ </div>
4345
+
4346
+ <div class="row">
4347
+ <div class="col-md-12">
4348
+ <hr>
4349
+ </div>
4350
+ </div>
4351
+
4352
+ <div class="row">
4353
+ <div class="col-md-4 text-center">
4354
+ <label>tooltip = 'percent'</label>
4321
4355
<pf-donut-pct-chart config="noneConfig" data="noneData" center-label="noLabel"></pf-donut-pct-chart>
4322
4356
</div>
4357
+ <div class="col-md-4 text-center">
4358
+ <label>tooltip = 'amount'</label>
4359
+ <pf-donut-pct-chart config="noneConfig" data="noneData" center-label="noLabel" tooltip="tooltipAmount"></pf-donut-pct-chart>
4360
+ </div>
4361
+ <div class="col-md-4 text-center">
4362
+ <label>tooltip = 'both'</label>
4363
+ <pf-donut-pct-chart config="noneConfig" data="noneData" center-label="noLabel" tooltip="tooltipBoth"></pf-donut-pct-chart>
4364
+ </div>
4323
4365
</div>
4324
4366
4325
4367
<div class="row">
@@ -4505,6 +4547,10 @@ angular.module( 'patternfly.card' ).component('pfInfoStatusCard', {
4505
4547
$scope.noLabel = "none";
4506
4548
4507
4549
//start demo 3rd row
4550
+ $scope.tooltipAmount = "amount";
4551
+ $scope.tooltipBoth = "both";
4552
+
4553
+ //start demo 4th row
4508
4554
$scope.configOrientationLeft = {
4509
4555
'units': 'GB',
4510
4556
'thresholds':{'warning':'60','error':'90'},
@@ -4573,7 +4619,7 @@ angular.module( 'patternfly.card' ).component('pfInfoStatusCard', {
4573
4619
'total': '1000'
4574
4620
};
4575
4621
4576
- //start demo 4th row
4622
+ //start demo 5th row
4577
4623
$scope.custConfig = {
4578
4624
'chartId': 'custChart',
4579
4625
'units': 'MHz',
0 commit comments