Skip to content

Commit f615775

Browse files
jeff-phillips-18jeff-phillips-18
committed
Merge pull request #153 from dtaylor113/ngdocs
Ng-Docs: Moved 'card' examples out of TrendChart and UtilizationBarChart...
2 parents e766143 + f0f1305 commit f615775

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
@@ -46,7 +46,7 @@ module.exports = function (grunt) {
4646
hostname: '0.0.0.0',
4747
port: grunt.option("port") || 8000,
4848
base: 'dist/docs',
49-
livereload: true,
49+
livereload: 35722,
5050
open: true
5151
}
5252
}

‎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>
@@ -1721,13 +1787,6 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
17211787
<button ng-click="addDataPoint()">Add Data Point</button>
17221788
</div>
17231789
</div>
1724-
<hr class="col-md-12">
1725-
<div class="col-md-12">
1726-
<div pf-card head-title="Cluster Utilization" show-top-border="true"
1727-
footer="footerConfig" filter="filterConfig">
1728-
<div pf-trends-chart config="config2" chart-data="data"></div>
1729-
</div>
1730-
</div>
17311790
</div>
17321791
</file>
17331792
<file name="script.js">
@@ -1744,15 +1803,6 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
17441803
'tooltipType' : 'percentage'
17451804
};
17461805
1747-
$scope.config2 = {
1748-
'chartId' : 'example2TrendsChart',
1749-
'title' : 'Storage Capacity',
1750-
'layout' : 'compact',
1751-
'valueType' : 'actual',
1752-
'units' : 'TB',
1753-
'tooltipType' : 'percentage'
1754-
};
1755-
17561806
$scope.footerConfig = {
17571807
'iconClass' : 'fa fa-plus-circle',
17581808
'text' : 'Add New Cluster',
@@ -1889,32 +1939,20 @@ angular.module('patternfly.charts').directive('pfTrendsChart', function () {
18891939
<example module="patternfly.example">
18901940
<file name="index.html">
18911941
<div ng-controller="ChartCtrl">
1892-
<div pf-utilization-bar-chart chart-data=data1 chart-title=title1 units=units1></div>
1893-
<hr>
1894-
<div pf-card head-title="Utilization Bar Chart">
1895-
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 units=units2 threshold-error="85" threshold-warning="60"></div>
1896-
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 units=units3 threshold-error="85" threshold-warning="60"></div>
1897-
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 units=units4 threshold-error="85" threshold-warning="60"></div>
1898-
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 units=units5 threshold-error="85" threshold-warning="60"></div>
1899-
</div>
1900-
1901-
<hr>
1902-
<label><strong>layout='inline'</strong></label>
1903-
<div pf-card head-title="Utilization Bar Chart">
1904-
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2short layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
1905-
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
1906-
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
1907-
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
1908-
</div>
19091942
1910-
<hr>
1911-
<label><strong>layout='inline', footer-label-format='percent', and custom chart-footer labels</strong></label>
1912-
<div pf-card head-title="Utilization Bar Chart">
1913-
<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>
1914-
<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>
1915-
<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>
1916-
<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>
1917-
</div>
1943+
<label class="label-title">Default Layout, no Thresholds</label>
1944+
<div pf-utilization-bar-chart chart-data=data1 chart-title=title1 units=units1></div>
1945+
<br>
1946+
<label class="label-title">Inline Layouts with Error, Warning, and Ok Thresholds</label>
1947+
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
1948+
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
1949+
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
1950+
<br>
1951+
<label class="label-title">layout='inline', footer-label-format='percent', and custom chart-footer labels</label>
1952+
<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>
1953+
<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>
1954+
<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>
1955+
<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>
19181956
</div>
19191957
</file>
19201958
@@ -1931,8 +1969,7 @@ angular.module('patternfly.charts').directive('pfTrendsChart', function () {
19311969
'total': '24'
19321970
};
19331971
1934-
$scope.title2 = 'Memory Utilization';
1935-
$scope.title2short = 'Memory';
1972+
$scope.title2 = 'Memory';
19361973
$scope.units2 = 'GB';
19371974
19381975
$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)