Skip to content

Commit 35e7e60

Browse files
author
Dan
committed
Split pfCard examples so they can be included separately in patternfly-toolkit.
1 parent 683341d commit 35e7e60

File tree

4 files changed

+359
-155
lines changed

4 files changed

+359
-155
lines changed

‎dist/angular-patternfly.js

Lines changed: 130 additions & 28 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 Timeframe Filters
299299
* @restrict A
300300
* @element ANY
301301
* @param {string} headTitle Title for the card
@@ -330,37 +330,98 @@ angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function
330330
<file name="index.html">
331331
<div ng-controller="ChartCtrl">
332332
<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-
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>
337336
<label class="label-title">Footer with Link & Timeframe filter</label>
338337
<div pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true"
339338
footer="footerConfig" filter="filterConfig" style="width: 50%">
340-
Card Contents
339+
Card Contents
341340
</div>
341+
</div>
342+
</file>
343+
<file name="script.js">
344+
angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope ) {
345+
346+
$scope.footerConfig = {
347+
'iconClass' : 'fa fa-flag',
348+
'text' : 'View All Events',
349+
'callBackFn': function () {
350+
alert("Footer Callback Fn Called");
351+
}
352+
}
353+
354+
$scope.filterConfigHeader = {
355+
'filters' : [{label:'Last 30 Days', value:'30'},
356+
{label:'Last 15 Days', value:'15'},
357+
{label:'Today', value:'today'}],
358+
'callBackFn': function (f) {
359+
alert("Header Filter Callback Fn Called for '" + f.label + "' value = " + f.value);
360+
},
361+
'position' : 'header'
362+
}
363+
364+
$scope.filterConfig = {
365+
'filters' : [{label:'Last 30 Days', value:'30'},
366+
{label:'Last 15 Days', value:'15'},
367+
{label:'Today', value:'today'}],
368+
'callBackFn': function (f) {
369+
alert("Filter Callback Fn Called for '" + f.label + "' value = " + f.value);
370+
},
371+
'defaultFilter' : '1'
372+
}
373+
});
374+
</file>
375+
</example>
376+
*/
377+
;/**
378+
* @ngdoc directive
379+
* @name patternfly.card.directive:pfCard Trends
380+
* @restrict A
381+
* @element ANY
382+
* @param {string} headTitle Title for the card
383+
* @param {string=} subTitle Sub-Title for the card
384+
* @param {boolean=} showTopBorder Show/Hide the blue top border. True shows top border, false (default) hides top border
385+
* @param {boolean=} showTitlesSeparator Show/Hide the grey line between the title and sub-title.
386+
* True (default) shows the line, false hides the line
387+
* @param {object=} footer footer configuration properties:<br/>
388+
* <ul style='list-style-type: none'>
389+
* <li>.iconClass - (optional) the icon to show on the bottom left of the footer panel
390+
* <li>.text - (optional) the text to show on the bottom left of the footer panel, to the right of the icon
391+
* <li>.href - (optional) the href link to navigate to when the footer href is clicked
392+
* <li>.callBackFn - (optional) user defined function to call when the footer href is clicked
393+
* </ul>
394+
* *Note: If a href link and a callBackFn are specified, the href link will be called
395+
* @param {object=} filter filter configuration properties:<br/>
396+
* <ul style='list-style-type: none'>
397+
* <li>.filters - drop down items for the filter.
398+
*<pre class=''>
399+
* Ex: 'filters' : [{label:'Last 30 Days', value:'30'},
400+
* {label:'Last 15 Days', value:'15'},
401+
* {label:'Today', value:'today'}]</pre>
402+
* <li>.defaultFilter - integer, 0 based index into the filters array
403+
* <li>.callBackFn - user defined function to call when a filter is selected
404+
* </ul>
405+
* @description
406+
* Directive for easily displaying a card with html content
407+
*
408+
* @example
409+
<example module="demo">
342410
411+
<file name="index.html">
412+
<div ng-controller="ChartCtrl">
343413
<label class="label-title">Card With Single Trend Chart</label>
344414
<div pf-card head-title="Cluster Utilization" show-top-border="true" footer="footerConfig" filter="filterConfig" style="width: 50%">
345415
<div pf-trends-chart config="configSingle" chart-data="dataSingle"></div>
346416
</div>
347-
348417
<label class="label-title">Card With Multiple Trends</label>
349418
<div pf-card head-title="Performance" sub-title="Last 30 Days" show-top-border="false"
350419
show-titles-separator="false" style="width: 65%" footer="actionBarConfig">
351420
<div pf-trends-chart config="configVirtual" chart-data="dataVirtual"></div>
352421
<div pf-trends-chart config="configPhysical" chart-data="dataPhysical"></div>
353422
<div pf-trends-chart config="configMemory" chart-data="dataMemory"></div>
354423
</div>
355-
356-
<label class="label-title">Card With Multiple Utilization Bars</label>
357-
<div pf-card head-title="System Resources" show-top-border="true" style="width: 65%">
358-
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
359-
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
360-
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
361-
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
362-
</div>
363-
424+
</div>
364425
</div>
365426
</file>
366427
<file name="script.js">
@@ -374,16 +435,6 @@ angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function
374435
}
375436
}
376437
377-
$scope.filterConfigHeader = {
378-
'filters' : [{label:'Last 30 Days', value:'30'},
379-
{label:'Last 15 Days', value:'15'},
380-
{label:'Today', value:'today'}],
381-
'callBackFn': function (f) {
382-
alert("Header Filter Callback Fn Called for '" + f.label + "' value = " + f.value);
383-
},
384-
'position' : 'header'
385-
}
386-
387438
$scope.filterConfig = {
388439
'filters' : [{label:'Last 30 Days', value:'30'},
389440
{label:'Last 15 Days', value:'15'},
@@ -464,9 +515,60 @@ angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function
464515
alert("Footer Callback Fn Called");
465516
}
466517
}
518+
});
519+
</file>
520+
</example>
521+
*/
522+
;/**
523+
* @ngdoc directive
524+
* @name patternfly.card.directive:pfCard Utilization
525+
* @restrict A
526+
* @element ANY
527+
* @param {string} headTitle Title for the card
528+
* @param {string=} subTitle Sub-Title for the card
529+
* @param {boolean=} showTopBorder Show/Hide the blue top border. True shows top border, false (default) hides top border
530+
* @param {boolean=} showTitlesSeparator Show/Hide the grey line between the title and sub-title.
531+
* True (default) shows the line, false hides the line
532+
* @param {object=} footer footer configuration properties:<br/>
533+
* <ul style='list-style-type: none'>
534+
* <li>.iconClass - (optional) the icon to show on the bottom left of the footer panel
535+
* <li>.text - (optional) the text to show on the bottom left of the footer panel, to the right of the icon
536+
* <li>.href - (optional) the href link to navigate to when the footer href is clicked
537+
* <li>.callBackFn - (optional) user defined function to call when the footer href is clicked
538+
* </ul>
539+
* *Note: If a href link and a callBackFn are specified, the href link will be called
540+
* @param {object=} filter filter configuration properties:<br/>
541+
* <ul style='list-style-type: none'>
542+
* <li>.filters - drop down items for the filter.
543+
*<pre class=''>
544+
* Ex: 'filters' : [{label:'Last 30 Days', value:'30'},
545+
* {label:'Last 15 Days', value:'15'},
546+
* {label:'Today', value:'today'}]</pre>
547+
* <li>.defaultFilter - integer, 0 based index into the filters array
548+
* <li>.callBackFn - user defined function to call when a filter is selected
549+
* </ul>
550+
* @description
551+
* Directive for easily displaying a card with html content
552+
*
553+
* @example
554+
<example module="demo">
555+
556+
<file name="index.html">
557+
<div ng-controller="ChartCtrl">
558+
<label class="label-title">Card With Multiple Utilization Bars</label>
559+
<div pf-card head-title="System Resources" show-top-border="true" style="width: 65%">
560+
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
561+
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
562+
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
563+
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
564+
</div>
565+
</div>
566+
</file>
567+
<file name="script.js">
568+
angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope ) {
467569
468-
$scope.title2 = 'Memory';
469-
$scope.units2 = 'GB';
570+
$scope.title2 = 'Memory';
571+
$scope.units2 = 'GB';
470572
471573
$scope.data2 = {
472574
'used': '25',

‎src/card/basic/card-timeframe.js

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/**
2+
* @ngdoc directive
3+
* @name patternfly.card.directive:pfCard Timeframe Filters
4+
* @restrict A
5+
* @element ANY
6+
* @param {string} headTitle Title for the card
7+
* @param {string=} subTitle Sub-Title for the card
8+
* @param {boolean=} showTopBorder Show/Hide the blue top border. True shows top border, false (default) hides top border
9+
* @param {boolean=} showTitlesSeparator Show/Hide the grey line between the title and sub-title.
10+
* True (default) shows the line, false hides the line
11+
* @param {object=} footer footer configuration properties:<br/>
12+
* <ul style='list-style-type: none'>
13+
* <li>.iconClass - (optional) the icon to show on the bottom left of the footer panel
14+
* <li>.text - (optional) the text to show on the bottom left of the footer panel, to the right of the icon
15+
* <li>.href - (optional) the href link to navigate to when the footer href is clicked
16+
* <li>.callBackFn - (optional) user defined function to call when the footer href is clicked
17+
* </ul>
18+
* *Note: If a href link and a callBackFn are specified, the href link will be called
19+
* @param {object=} filter filter configuration properties:<br/>
20+
* <ul style='list-style-type: none'>
21+
* <li>.filters - drop down items for the filter.
22+
*<pre class=''>
23+
* Ex: 'filters' : [{label:'Last 30 Days', value:'30'},
24+
* {label:'Last 15 Days', value:'15'},
25+
* {label:'Today', value:'today'}]</pre>
26+
* <li>.defaultFilter - integer, 0 based index into the filters array
27+
* <li>.callBackFn - user defined function to call when a filter is selected
28+
* </ul>
29+
* @description
30+
* Directive for easily displaying a card with html content
31+
*
32+
* @example
33+
<example module="demo">
34+
35+
<file name="index.html">
36+
<div ng-controller="ChartCtrl">
37+
<label class="label-title">Timeframe filter in header</label>
38+
<div pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true" filter="filterConfigHeader" style="width: 50%">
39+
Card Contents
40+
</div>
41+
<label class="label-title">Footer with Link & Timeframe filter</label>
42+
<div pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true"
43+
footer="footerConfig" filter="filterConfig" style="width: 50%">
44+
Card Contents
45+
</div>
46+
</div>
47+
</file>
48+
<file name="script.js">
49+
angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope ) {
50+
51+
$scope.footerConfig = {
52+
'iconClass' : 'fa fa-flag',
53+
'text' : 'View All Events',
54+
'callBackFn': function () {
55+
alert("Footer Callback Fn Called");
56+
}
57+
}
58+
59+
$scope.filterConfigHeader = {
60+
'filters' : [{label:'Last 30 Days', value:'30'},
61+
{label:'Last 15 Days', value:'15'},
62+
{label:'Today', value:'today'}],
63+
'callBackFn': function (f) {
64+
alert("Header Filter Callback Fn Called for '" + f.label + "' value = " + f.value);
65+
},
66+
'position' : 'header'
67+
}
68+
69+
$scope.filterConfig = {
70+
'filters' : [{label:'Last 30 Days', value:'30'},
71+
{label:'Last 15 Days', value:'15'},
72+
{label:'Today', value:'today'}],
73+
'callBackFn': function (f) {
74+
alert("Filter Callback Fn Called for '" + f.label + "' value = " + f.value);
75+
},
76+
'defaultFilter' : '1'
77+
}
78+
});
79+
</file>
80+
</example>
81+
*/

0 commit comments

Comments
 (0)