Skip to content

Commit 947ff27

Browse files
jeff-phillips-18jeff-phillips-18
committed
Merge pull request #220 from dlabrecq/PTNFLY-examples
Split pfCard examples to be included separately in patternfly-toolkit.
2 parents 683341d + 7169bef commit 947ff27

File tree

36 files changed

+1171
-591
lines changed

36 files changed

+1171
-591
lines changed

‎dist/angular-patternfly.js

Lines changed: 213 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -295,7 +295,7 @@ angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function
295295
});
296296
;/**
297297
* @ngdoc directive
298-
* @name patternfly.card.directive:pfCard
298+
* @name patternfly.card.directive:pfCard - Utilization
299299
* @restrict A
300300
* @element ANY
301301
* @param {string} headTitle Title for the card
@@ -329,38 +329,152 @@ angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function
329329
330330
<file name="index.html">
331331
<div ng-controller="ChartCtrl">
332-
<label class="label-title">Timeframe filter in header</label>
333-
<div pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true" filter="filterConfigHeader" style="width: 50%">
334-
Card Contents
335-
</div>
336-
337-
<label class="label-title">Footer with Link & Timeframe filter</label>
338-
<div pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true"
339-
footer="footerConfig" filter="filterConfig" style="width: 50%">
340-
Card Contents
341-
</div>
342-
343-
<label class="label-title">Card With Single Trend Chart</label>
344-
<div pf-card head-title="Cluster Utilization" show-top-border="true" footer="footerConfig" filter="filterConfig" style="width: 50%">
345-
<div pf-trends-chart config="configSingle" chart-data="dataSingle"></div>
346-
</div>
347-
348-
<label class="label-title">Card With Multiple Trends</label>
349-
<div pf-card head-title="Performance" sub-title="Last 30 Days" show-top-border="false"
350-
show-titles-separator="false" style="width: 65%" footer="actionBarConfig">
351-
<div pf-trends-chart config="configVirtual" chart-data="dataVirtual"></div>
352-
<div pf-trends-chart config="configPhysical" chart-data="dataPhysical"></div>
353-
<div pf-trends-chart config="configMemory" chart-data="dataMemory"></div>
354-
</div>
355-
356332
<label class="label-title">Card With Multiple Utilization Bars</label>
357333
<div pf-card head-title="System Resources" show-top-border="true" style="width: 65%">
358334
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
359335
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
360336
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
361337
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
362338
</div>
339+
</div>
340+
</file>
341+
<file name="script.js">
342+
angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope ) {
343+
344+
$scope.title2 = 'Memory';
345+
$scope.units2 = 'GB';
346+
347+
$scope.data2 = {
348+
'used': '25',
349+
'total': '100'
350+
};
351+
352+
$scope.title3 = 'CPU Usage';
353+
$scope.units3 = 'MHz';
354+
355+
$scope.data3 = {
356+
'used': '420',
357+
'total': '500',
358+
};
363359
360+
$scope.title4 = 'Disk Usage';
361+
$scope.units4 = 'TB';
362+
$scope.data4 = {
363+
'used': '350',
364+
'total': '500',
365+
};
366+
367+
$scope.title5 = 'Disk I/O';
368+
$scope.units5 = 'I/Ops';
369+
$scope.data5 = {
370+
'used': '450',
371+
'total': '500',
372+
};
373+
374+
$scope.layoutInline = {
375+
'type': 'inline'
376+
};
377+
});
378+
</file>
379+
</example>
380+
*/
381+
angular.module('patternfly.card').directive('pfCard', function () {
382+
'use strict';
383+
384+
return {
385+
restrict: 'A',
386+
transclude: true,
387+
templateUrl: 'card/basic/card.html',
388+
scope: {
389+
headTitle: '@',
390+
subTitle: '@?',
391+
showTopBorder: '@?',
392+
showTitlesSeparator: '@?',
393+
footer: '=?',
394+
filter: '=?'
395+
},
396+
controller: ["$scope", function ($scope) {
397+
if ($scope.filter && !$scope.currentFilter) {
398+
if ($scope.filter.defaultFilter) {
399+
$scope.currentFilter = $scope.filter.filters[$scope.filter.defaultFilter];
400+
} else {
401+
$scope.currentFilter = $scope.filter.filters[0];
402+
}
403+
}
404+
405+
$scope.footerCallBackFn = function () {
406+
$scope.footerCallBackResult = $scope.footer.callBackFn();
407+
};
408+
409+
$scope.filterCallBackFn = function (f) {
410+
$scope.currentFilter = f;
411+
if ($scope.filter.callBackFn) {
412+
$scope.filterCallBackResult = $scope.filter.callBackFn(f);
413+
}
414+
};
415+
416+
$scope.showHeader = function () {
417+
return ($scope.headTitle || $scope.showFilterInHeader());
418+
};
419+
420+
$scope.showFilterInHeader = function () {
421+
return ($scope.filter && $scope.filter.filters && $scope.filter.position && $scope.filter.position === 'header');
422+
};
423+
424+
$scope.showFilterInFooter = function () {
425+
return ($scope.filter && $scope.filter.filters && (!$scope.filter.position || $scope.filter.position === 'footer'));
426+
};
427+
}],
428+
link: function (scope) {
429+
scope.shouldShowTitlesSeparator = (!scope.showTitlesSeparator || scope.showTitlesSeparator === 'true');
430+
}
431+
};
432+
});
433+
;/**
434+
* @ngdoc directive
435+
* @name patternfly.card.directive:pfCard - Timeframe Filters
436+
* @restrict A
437+
* @element ANY
438+
* @param {string} headTitle Title for the card
439+
* @param {string=} subTitle Sub-Title for the card
440+
* @param {boolean=} showTopBorder Show/Hide the blue top border. True shows top border, false (default) hides top border
441+
* @param {boolean=} showTitlesSeparator Show/Hide the grey line between the title and sub-title.
442+
* True (default) shows the line, false hides the line
443+
* @param {object=} footer footer configuration properties:<br/>
444+
* <ul style='list-style-type: none'>
445+
* <li>.iconClass - (optional) the icon to show on the bottom left of the footer panel
446+
* <li>.text - (optional) the text to show on the bottom left of the footer panel, to the right of the icon
447+
* <li>.href - (optional) the href link to navigate to when the footer href is clicked
448+
* <li>.callBackFn - (optional) user defined function to call when the footer href is clicked
449+
* </ul>
450+
* *Note: If a href link and a callBackFn are specified, the href link will be called
451+
* @param {object=} filter filter configuration properties:<br/>
452+
* <ul style='list-style-type: none'>
453+
* <li>.filters - drop down items for the filter.
454+
*<pre class=''>
455+
* Ex: 'filters' : [{label:'Last 30 Days', value:'30'},
456+
* {label:'Last 15 Days', value:'15'},
457+
* {label:'Today', value:'today'}]</pre>
458+
* <li>.defaultFilter - integer, 0 based index into the filters array
459+
* <li>.callBackFn - user defined function to call when a filter is selected
460+
* </ul>
461+
* @description
462+
* Directive for easily displaying a card with html content
463+
*
464+
* @example
465+
<example module="demo">
466+
467+
<file name="index.html">
468+
<div ng-controller="ChartCtrl">
469+
<label class="label-title">Timeframe filter in header</label>
470+
<div pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true" filter="filterConfigHeader" style="width: 50%">
471+
Card Contents
472+
</div>
473+
<label class="label-title">Footer with Link & Timeframe filter</label>
474+
<div pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true"
475+
footer="footerConfig" filter="filterConfig" style="width: 50%">
476+
Card Contents
477+
</div>
364478
</div>
365479
</file>
366480
<file name="script.js">
@@ -393,6 +507,80 @@ angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function
393507
},
394508
'defaultFilter' : '1'
395509
}
510+
});
511+
</file>
512+
</example>
513+
*/
514+
;/**
515+
* @ngdoc directive
516+
* @name patternfly.card.directive:pfCard - Trends
517+
* @restrict A
518+
* @element ANY
519+
* @param {string} headTitle Title for the card
520+
* @param {string=} subTitle Sub-Title for the card
521+
* @param {boolean=} showTopBorder Show/Hide the blue top border. True shows top border, false (default) hides top border
522+
* @param {boolean=} showTitlesSeparator Show/Hide the grey line between the title and sub-title.
523+
* True (default) shows the line, false hides the line
524+
* @param {object=} footer footer configuration properties:<br/>
525+
* <ul style='list-style-type: none'>
526+
* <li>.iconClass - (optional) the icon to show on the bottom left of the footer panel
527+
* <li>.text - (optional) the text to show on the bottom left of the footer panel, to the right of the icon
528+
* <li>.href - (optional) the href link to navigate to when the footer href is clicked
529+
* <li>.callBackFn - (optional) user defined function to call when the footer href is clicked
530+
* </ul>
531+
* *Note: If a href link and a callBackFn are specified, the href link will be called
532+
* @param {object=} filter filter configuration properties:<br/>
533+
* <ul style='list-style-type: none'>
534+
* <li>.filters - drop down items for the filter.
535+
*<pre class=''>
536+
* Ex: 'filters' : [{label:'Last 30 Days', value:'30'},
537+
* {label:'Last 15 Days', value:'15'},
538+
* {label:'Today', value:'today'}]</pre>
539+
* <li>.defaultFilter - integer, 0 based index into the filters array
540+
* <li>.callBackFn - user defined function to call when a filter is selected
541+
* </ul>
542+
* @description
543+
* Directive for easily displaying a card with html content
544+
*
545+
* @example
546+
<example module="demo">
547+
548+
<file name="index.html">
549+
<div ng-controller="ChartCtrl">
550+
<label class="label-title">Card With Single Trend Chart</label>
551+
<div pf-card head-title="Cluster Utilization" show-top-border="true" footer="footerConfig" filter="filterConfig" style="width: 50%">
552+
<div pf-trends-chart config="configSingle" chart-data="dataSingle"></div>
553+
</div>
554+
<label class="label-title">Card With Multiple Trends</label>
555+
<div pf-card head-title="Performance" sub-title="Last 30 Days" show-top-border="false"
556+
show-titles-separator="false" style="width: 65%" footer="actionBarConfig">
557+
<div pf-trends-chart config="configVirtual" chart-data="dataVirtual"></div>
558+
<div pf-trends-chart config="configPhysical" chart-data="dataPhysical"></div>
559+
<div pf-trends-chart config="configMemory" chart-data="dataMemory"></div>
560+
</div>
561+
</div>
562+
</div>
563+
</file>
564+
<file name="script.js">
565+
angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope ) {
566+
567+
$scope.footerConfig = {
568+
'iconClass' : 'fa fa-flag',
569+
'text' : 'View All Events',
570+
'callBackFn': function () {
571+
alert("Footer Callback Fn Called");
572+
}
573+
}
574+
575+
$scope.filterConfig = {
576+
'filters' : [{label:'Last 30 Days', value:'30'},
577+
{label:'Last 15 Days', value:'15'},
578+
{label:'Today', value:'today'}],
579+
'callBackFn': function (f) {
580+
alert("Filter Callback Fn Called for '" + f.label + "' value = " + f.value);
581+
},
582+
'defaultFilter' : '1'
583+
}
396584
397585
var today = new Date();
398586
var dates = ['dates'];
@@ -464,96 +652,10 @@ angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function
464652
alert("Footer Callback Fn Called");
465653
}
466654
}
467-
468-
$scope.title2 = 'Memory';
469-
$scope.units2 = 'GB';
470-
471-
$scope.data2 = {
472-
'used': '25',
473-
'total': '100'
474-
};
475-
476-
$scope.title3 = 'CPU Usage';
477-
$scope.units3 = 'MHz';
478-
479-
$scope.data3 = {
480-
'used': '420',
481-
'total': '500',
482-
};
483-
484-
$scope.title4 = 'Disk Usage';
485-
$scope.units4 = 'TB';
486-
$scope.data4 = {
487-
'used': '350',
488-
'total': '500',
489-
};
490-
491-
$scope.title5 = 'Disk I/O';
492-
$scope.units5 = 'I/Ops';
493-
$scope.data5 = {
494-
'used': '450',
495-
'total': '500',
496-
};
497-
498-
$scope.layoutInline = {
499-
'type': 'inline'
500-
};
501655
});
502656
</file>
503657
</example>
504658
*/
505-
angular.module('patternfly.card').directive('pfCard', function () {
506-
'use strict';
507-
508-
return {
509-
restrict: 'A',
510-
transclude: true,
511-
templateUrl: 'card/basic/card.html',
512-
scope: {
513-
headTitle: '@',
514-
subTitle: '@?',
515-
showTopBorder: '@?',
516-
showTitlesSeparator: '@?',
517-
footer: '=?',
518-
filter: '=?'
519-
},
520-
controller: ["$scope", function ($scope) {
521-
if ($scope.filter && !$scope.currentFilter) {
522-
if ($scope.filter.defaultFilter) {
523-
$scope.currentFilter = $scope.filter.filters[$scope.filter.defaultFilter];
524-
} else {
525-
$scope.currentFilter = $scope.filter.filters[0];
526-
}
527-
}
528-
529-
$scope.footerCallBackFn = function () {
530-
$scope.footerCallBackResult = $scope.footer.callBackFn();
531-
};
532-
533-
$scope.filterCallBackFn = function (f) {
534-
$scope.currentFilter = f;
535-
if ($scope.filter.callBackFn) {
536-
$scope.filterCallBackResult = $scope.filter.callBackFn(f);
537-
}
538-
};
539-
540-
$scope.showHeader = function () {
541-
return ($scope.headTitle || $scope.showFilterInHeader());
542-
};
543-
544-
$scope.showFilterInHeader = function () {
545-
return ($scope.filter && $scope.filter.filters && $scope.filter.position && $scope.filter.position === 'header');
546-
};
547-
548-
$scope.showFilterInFooter = function () {
549-
return ($scope.filter && $scope.filter.filters && (!$scope.filter.position || $scope.filter.position === 'footer'));
550-
};
551-
}],
552-
link: function (scope) {
553-
scope.shouldShowTitlesSeparator = (!scope.showTitlesSeparator || scope.showTitlesSeparator === 'true');
554-
}
555-
};
556-
});
557659
;(function () {
558660
'use strict';
559661

0 commit comments

Comments
 (0)