Skip to content

Commit f0f1305

Browse files
dtaylor113dtaylor113
committed
Ng-Docs: Moved 'card' examples out of TrendChart and UtilizationBarChart, and into base Card
1 parent b4f6509 commit f0f1305

File tree

6 files changed

+173
-93
lines changed

6 files changed

+173
-93
lines changed

‎Gruntfile.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ module.exports = function (grunt) {
4545
options: {
4646
hostname: '0.0.0.0',
4747
base: 'dist/docs',
48-
livereload: true,
48+
livereload: 35722,
4949
open: true
5050
}
5151
}

‎dist/angular-patternfly.js‎

Lines changed: 83 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -308,21 +308,38 @@ angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function
308308
309309
<file name="index.html">
310310
<div ng-controller="ChartCtrl">
311-
<div pf-card head-title="Card Title" sub-title="Card Subtitle" filter="filterConfigHeader" style="width: 50%">
312-
[Card Contents] <button>Click Me</button> Timeframe filter in header
311+
<label class="label-title">Timeframe filter in header</label>
312+
<div pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true" filter="filterConfigHeader" style="width: 50%">
313+
Card Contents
313314
</div>
314315
316+
<label class="label-title">Footer with Link & Timeframe filter</label>
315317
<div pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true"
316318
footer="footerConfig" filter="filterConfig" style="width: 50%">
317-
[Card Contents] <button>Click Me</button> Footer with Link & Timeframe filter
319+
Card Contents
318320
</div>
319321
322+
<label class="label-title">Card With Single Trend Chart</label>
323+
<div pf-card head-title="Cluster Utilization" show-top-border="true" footer="footerConfig" filter="filterConfig" style="width: 50%">
324+
<div pf-trends-chart config="configSingle" chart-data="dataSingle"></div>
325+
</div>
326+
327+
<label class="label-title">Card With Multiple Trends</label>
320328
<div pf-card head-title="Performance" sub-title="Last 30 Days" show-top-border="false"
321329
show-titles-separator="false" style="width: 65%" footer="actionBarConfig">
322330
<div pf-trends-chart config="configVirtual" chart-data="dataVirtual"></div>
323331
<div pf-trends-chart config="configPhysical" chart-data="dataPhysical"></div>
324332
<div pf-trends-chart config="configMemory" chart-data="dataMemory"></div>
325333
</div>
334+
335+
<label class="label-title">Card With Multiple Utilization Bars</label>
336+
<div pf-card head-title="System Resources" show-top-border="true" style="width: 65%">
337+
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
338+
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
339+
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
340+
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
341+
</div>
342+
326343
</div>
327344
</file>
328345
<file name="script.js">
@@ -362,6 +379,21 @@ angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function
362379
dates.push(new Date(today.getTime() - (d * 24 * 60 * 60 * 1000)));
363380
}
364381
382+
$scope.configSingle = {
383+
'chartId' : 'example2TrendsChart',
384+
'title' : 'Storage Capacity',
385+
'layout' : 'compact',
386+
'valueType' : 'actual',
387+
'units' : 'TB',
388+
'tooltipType' : 'percentage'
389+
};
390+
391+
$scope.dataSingle = {
392+
'total': '250',
393+
'xData': dates,
394+
'yData': ['used', '90', '20', '30', '20', '20', '10', '14', '20', '25', '68', '44', '56', '78', '56', '67', '88', '76', '65', '87', '76']
395+
};
396+
365397
$scope.configVirtual = {
366398
'chartId' : 'virtualTrendsChart',
367399
'layout' : 'inline',
@@ -411,6 +443,40 @@ angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function
411443
alert("Footer Callback Fn Called");
412444
}
413445
}
446+
447+
$scope.title2 = 'Memory';
448+
$scope.units2 = 'GB';
449+
450+
$scope.data2 = {
451+
'used': '25',
452+
'total': '100'
453+
};
454+
455+
$scope.title3 = 'CPU Usage';
456+
$scope.units3 = 'MHz';
457+
458+
$scope.data3 = {
459+
'used': '420',
460+
'total': '500',
461+
};
462+
463+
$scope.title4 = 'Disk Usage';
464+
$scope.units4 = 'TB';
465+
$scope.data4 = {
466+
'used': '350',
467+
'total': '500',
468+
};
469+
470+
$scope.title5 = 'Disk I/O';
471+
$scope.units5 = 'I/Ops';
472+
$scope.data5 = {
473+
'used': '450',
474+
'total': '500',
475+
};
476+
477+
$scope.layoutInline = {
478+
'type': 'inline'
479+
};
414480
});
415481
</file>
416482
</example>
@@ -1475,13 +1541,6 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
14751541
<button ng-click="addDataPoint()">Add Data Point</button>
14761542
</div>
14771543
</div>
1478-
<hr class="col-md-12">
1479-
<div class="col-md-12">
1480-
<div pf-card head-title="Cluster Utilization" show-top-border="true"
1481-
footer="footerConfig" filter="filterConfig">
1482-
<div pf-trends-chart config="config2" chart-data="data"></div>
1483-
</div>
1484-
</div>
14851544
</div>
14861545
</file>
14871546
<file name="script.js">
@@ -1498,15 +1557,6 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
14981557
'tooltipType' : 'percentage'
14991558
};
15001559
1501-
$scope.config2 = {
1502-
'chartId' : 'example2TrendsChart',
1503-
'title' : 'Storage Capacity',
1504-
'layout' : 'compact',
1505-
'valueType' : 'actual',
1506-
'units' : 'TB',
1507-
'tooltipType' : 'percentage'
1508-
};
1509-
15101560
$scope.footerConfig = {
15111561
'iconClass' : 'fa fa-plus-circle',
15121562
'text' : 'Add New Cluster',
@@ -1643,32 +1693,20 @@ angular.module('patternfly.charts').directive('pfTrendsChart', function () {
16431693
<example module="patternfly.example">
16441694
<file name="index.html">
16451695
<div ng-controller="ChartCtrl">
1646-
<div pf-utilization-bar-chart chart-data=data1 chart-title=title1 units=units1></div>
1647-
<hr>
1648-
<div pf-card head-title="Utilization Bar Chart">
1649-
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 units=units2 threshold-error="85" threshold-warning="60"></div>
1650-
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 units=units3 threshold-error="85" threshold-warning="60"></div>
1651-
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 units=units4 threshold-error="85" threshold-warning="60"></div>
1652-
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 units=units5 threshold-error="85" threshold-warning="60"></div>
1653-
</div>
1654-
1655-
<hr>
1656-
<label><strong>layout='inline'</strong></label>
1657-
<div pf-card head-title="Utilization Bar Chart">
1658-
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2short layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
1659-
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
1660-
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
1661-
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
1662-
</div>
16631696
1664-
<hr>
1665-
<label><strong>layout='inline', footer-label-format='percent', and custom chart-footer labels</strong></label>
1666-
<div pf-card head-title="Utilization Bar Chart">
1667-
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2short layout=layoutInline footer-label-format='percent' units=units2 threshold-error="85" threshold-warning="60"></div>
1668-
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline footer-label-format='percent' units=units3 threshold-error="85" threshold-warning="60"></div>
1669-
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 chart-footer=footer1 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
1670-
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 chart-footer=footer2 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
1671-
</div>
1697+
<label class="label-title">Default Layout, no Thresholds</label>
1698+
<div pf-utilization-bar-chart chart-data=data1 chart-title=title1 units=units1></div>
1699+
<br>
1700+
<label class="label-title">Inline Layouts with Error, Warning, and Ok Thresholds</label>
1701+
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
1702+
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
1703+
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
1704+
<br>
1705+
<label class="label-title">layout='inline', footer-label-format='percent', and custom chart-footer labels</label>
1706+
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline footer-label-format='percent' units=units2 threshold-error="85" threshold-warning="60"></div>
1707+
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline footer-label-format='percent' units=units3 threshold-error="85" threshold-warning="60"></div>
1708+
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 chart-footer=footer1 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
1709+
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 chart-footer=footer2 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
16721710
</div>
16731711
</file>
16741712
@@ -1685,8 +1723,7 @@ angular.module('patternfly.charts').directive('pfTrendsChart', function () {
16851723
'total': '24'
16861724
};
16871725
1688-
$scope.title2 = 'Memory Utilization';
1689-
$scope.title2short = 'Memory';
1726+
$scope.title2 = 'Memory';
16901727
$scope.units2 = 'GB';
16911728
16921729
$scope.data2 = {

‎misc/examples.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,3 +87,9 @@ hr {
8787
.actions-label {
8888
margin-top: 5px;
8989
}
90+
91+
.label-title {
92+
font-size: 16px;
93+
font-weight: 600;
94+
padding-bottom: 10px;
95+
}

‎src/card/basic/card.directive.js‎

Lines changed: 69 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,21 +34,38 @@
3434
3535
<file name="index.html">
3636
<div ng-controller="ChartCtrl">
37-
<div pf-card head-title="Card Title" sub-title="Card Subtitle" filter="filterConfigHeader" style="width: 50%">
38-
[Card Contents] <button>Click Me</button> Timeframe filter in header
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
3940
</div>
4041
42+
<label class="label-title">Footer with Link & Timeframe filter</label>
4143
<div pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true"
4244
footer="footerConfig" filter="filterConfig" style="width: 50%">
43-
[Card Contents] <button>Click Me</button> Footer with Link & Timeframe filter
45+
Card Contents
4446
</div>
4547
48+
<label class="label-title">Card With Single Trend Chart</label>
49+
<div pf-card head-title="Cluster Utilization" show-top-border="true" footer="footerConfig" filter="filterConfig" style="width: 50%">
50+
<div pf-trends-chart config="configSingle" chart-data="dataSingle"></div>
51+
</div>
52+
53+
<label class="label-title">Card With Multiple Trends</label>
4654
<div pf-card head-title="Performance" sub-title="Last 30 Days" show-top-border="false"
4755
show-titles-separator="false" style="width: 65%" footer="actionBarConfig">
4856
<div pf-trends-chart config="configVirtual" chart-data="dataVirtual"></div>
4957
<div pf-trends-chart config="configPhysical" chart-data="dataPhysical"></div>
5058
<div pf-trends-chart config="configMemory" chart-data="dataMemory"></div>
5159
</div>
60+
61+
<label class="label-title">Card With Multiple Utilization Bars</label>
62+
<div pf-card head-title="System Resources" show-top-border="true" style="width: 65%">
63+
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
64+
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
65+
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
66+
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
67+
</div>
68+
5269
</div>
5370
</file>
5471
<file name="script.js">
@@ -88,6 +105,21 @@
88105
dates.push(new Date(today.getTime() - (d * 24 * 60 * 60 * 1000)));
89106
}
90107
108+
$scope.configSingle = {
109+
'chartId' : 'example2TrendsChart',
110+
'title' : 'Storage Capacity',
111+
'layout' : 'compact',
112+
'valueType' : 'actual',
113+
'units' : 'TB',
114+
'tooltipType' : 'percentage'
115+
};
116+
117+
$scope.dataSingle = {
118+
'total': '250',
119+
'xData': dates,
120+
'yData': ['used', '90', '20', '30', '20', '20', '10', '14', '20', '25', '68', '44', '56', '78', '56', '67', '88', '76', '65', '87', '76']
121+
};
122+
91123
$scope.configVirtual = {
92124
'chartId' : 'virtualTrendsChart',
93125
'layout' : 'inline',
@@ -137,6 +169,40 @@
137169
alert("Footer Callback Fn Called");
138170
}
139171
}
172+
173+
$scope.title2 = 'Memory';
174+
$scope.units2 = 'GB';
175+
176+
$scope.data2 = {
177+
'used': '25',
178+
'total': '100'
179+
};
180+
181+
$scope.title3 = 'CPU Usage';
182+
$scope.units3 = 'MHz';
183+
184+
$scope.data3 = {
185+
'used': '420',
186+
'total': '500',
187+
};
188+
189+
$scope.title4 = 'Disk Usage';
190+
$scope.units4 = 'TB';
191+
$scope.data4 = {
192+
'used': '350',
193+
'total': '500',
194+
};
195+
196+
$scope.title5 = 'Disk I/O';
197+
$scope.units5 = 'I/Ops';
198+
$scope.data5 = {
199+
'used': '450',
200+
'total': '500',
201+
};
202+
203+
$scope.layoutInline = {
204+
'type': 'inline'
205+
};
140206
});
141207
</file>
142208
</example>

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

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -82,13 +82,6 @@
8282
<button ng-click="addDataPoint()">Add Data Point</button>
8383
</div>
8484
</div>
85-
<hr class="col-md-12">
86-
<div class="col-md-12">
87-
<div pf-card head-title="Cluster Utilization" show-top-border="true"
88-
footer="footerConfig" filter="filterConfig">
89-
<div pf-trends-chart config="config2" chart-data="data"></div>
90-
</div>
91-
</div>
9285
</div>
9386
</file>
9487
<file name="script.js">
@@ -105,15 +98,6 @@
10598
'tooltipType' : 'percentage'
10699
};
107100
108-
$scope.config2 = {
109-
'chartId' : 'example2TrendsChart',
110-
'title' : 'Storage Capacity',
111-
'layout' : 'compact',
112-
'valueType' : 'actual',
113-
'units' : 'TB',
114-
'tooltipType' : 'percentage'
115-
};
116-
117101
$scope.footerConfig = {
118102
'iconClass' : 'fa fa-plus-circle',
119103
'text' : 'Add New Cluster',

0 commit comments

Comments
 (0)