Skip to content

Ng-Docs: Moved 'card' examples out of TrendChart and UtilizationBarChart... #153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 9, 2015
Merged

Ng-Docs: Moved 'card' examples out of TrendChart and UtilizationBarChart... #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ module.exports = function (grunt) {
options: {
hostname: '0.0.0.0',
base: 'dist/docs',
livereload: true,
livereload: 35722,
open: true
}
}
Expand Down
129 changes: 83 additions & 46 deletions dist/angular-patternfly.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,21 +308,38 @@ angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function

<file name="index.html">
<div ng-controller="ChartCtrl">
<div pf-card head-title="Card Title" sub-title="Card Subtitle" filter="filterConfigHeader" style="width: 50%">
[Card Contents] <button>Click Me</button> Timeframe filter in header
<label class="label-title">Timeframe filter in header</label>
Copy link
Member

@rhamilto rhamilto Nov 9, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The label element is intended for use in forms. This would be better as a heading (e.g., h2).

Copy link
Member Author

@dtaylor113 dtaylor113 Nov 9, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is an issue/bug in ng-docs which we haven't gotten to the root of yet. When I used H's, they get converted to H6's and render strangely.

<div pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true" filter="filterConfigHeader" style="width: 50%">
Card Contents
</div>

<label class="label-title">Footer with Link & Timeframe filter</label>
<div pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true"
footer="footerConfig" filter="filterConfig" style="width: 50%">
[Card Contents] <button>Click Me</button> Footer with Link & Timeframe filter
Card Contents
</div>

<label class="label-title">Card With Single Trend Chart</label>
<div pf-card head-title="Cluster Utilization" show-top-border="true" footer="footerConfig" filter="filterConfig" style="width: 50%">
<div pf-trends-chart config="configSingle" chart-data="dataSingle"></div>
</div>

<label class="label-title">Card With Multiple Trends</label>
<div pf-card head-title="Performance" sub-title="Last 30 Days" show-top-border="false"
show-titles-separator="false" style="width: 65%" footer="actionBarConfig">
<div pf-trends-chart config="configVirtual" chart-data="dataVirtual"></div>
<div pf-trends-chart config="configPhysical" chart-data="dataPhysical"></div>
<div pf-trends-chart config="configMemory" chart-data="dataMemory"></div>
</div>

<label class="label-title">Card With Multiple Utilization Bars</label>
<div pf-card head-title="System Resources" show-top-border="true" style="width: 65%">
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
</div>

</div>
</file>
<file name="script.js">
Expand Down Expand Up @@ -362,6 +379,21 @@ angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function
dates.push(new Date(today.getTime() - (d * 24 * 60 * 60 * 1000)));
}

$scope.configSingle = {
'chartId' : 'example2TrendsChart',
'title' : 'Storage Capacity',
'layout' : 'compact',
'valueType' : 'actual',
'units' : 'TB',
'tooltipType' : 'percentage'
};

$scope.dataSingle = {
'total': '250',
'xData': dates,
'yData': ['used', '90', '20', '30', '20', '20', '10', '14', '20', '25', '68', '44', '56', '78', '56', '67', '88', '76', '65', '87', '76']
};

$scope.configVirtual = {
'chartId' : 'virtualTrendsChart',
'layout' : 'inline',
Expand Down Expand Up @@ -411,6 +443,40 @@ angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function
alert("Footer Callback Fn Called");
}
}

$scope.title2 = 'Memory';
$scope.units2 = 'GB';

$scope.data2 = {
'used': '25',
'total': '100'
};

$scope.title3 = 'CPU Usage';
$scope.units3 = 'MHz';

$scope.data3 = {
'used': '420',
'total': '500',
};

$scope.title4 = 'Disk Usage';
$scope.units4 = 'TB';
$scope.data4 = {
'used': '350',
'total': '500',
};

$scope.title5 = 'Disk I/O';
$scope.units5 = 'I/Ops';
$scope.data5 = {
'used': '450',
'total': '500',
};

$scope.layoutInline = {
'type': 'inline'
};
});
</file>
</example>
Expand Down Expand Up @@ -1475,13 +1541,6 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
<button ng-click="addDataPoint()">Add Data Point</button>
</div>
</div>
<hr class="col-md-12">
<div class="col-md-12">
<div pf-card head-title="Cluster Utilization" show-top-border="true"
footer="footerConfig" filter="filterConfig">
<div pf-trends-chart config="config2" chart-data="data"></div>
</div>
</div>
</div>
</file>
<file name="script.js">
Expand All @@ -1498,15 +1557,6 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
'tooltipType' : 'percentage'
};

$scope.config2 = {
'chartId' : 'example2TrendsChart',
'title' : 'Storage Capacity',
'layout' : 'compact',
'valueType' : 'actual',
'units' : 'TB',
'tooltipType' : 'percentage'
};

$scope.footerConfig = {
'iconClass' : 'fa fa-plus-circle',
'text' : 'Add New Cluster',
Expand Down Expand Up @@ -1643,32 +1693,20 @@ angular.module('patternfly.charts').directive('pfTrendsChart', function () {
<example module="patternfly.example">
<file name="index.html">
<div ng-controller="ChartCtrl">
<div pf-utilization-bar-chart chart-data=data1 chart-title=title1 units=units1></div>
<hr>
<div pf-card head-title="Utilization Bar Chart">
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 units=units2 threshold-error="85" threshold-warning="60"></div>
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 units=units3 threshold-error="85" threshold-warning="60"></div>
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 units=units4 threshold-error="85" threshold-warning="60"></div>
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 units=units5 threshold-error="85" threshold-warning="60"></div>
</div>

<hr>
<label><strong>layout='inline'</strong></label>
<div pf-card head-title="Utilization Bar Chart">
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2short layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
</div>

<hr>
<label><strong>layout='inline', footer-label-format='percent', and custom chart-footer labels</strong></label>
<div pf-card head-title="Utilization Bar Chart">
<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>
<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>
<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>
<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>
</div>
<label class="label-title">Default Layout, no Thresholds</label>
<div pf-utilization-bar-chart chart-data=data1 chart-title=title1 units=units1></div>
<br>
<label class="label-title">Inline Layouts with Error, Warning, and Ok Thresholds</label>
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
<br>
<label class="label-title">layout='inline', footer-label-format='percent', and custom chart-footer labels</label>
<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>
<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>
<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>
<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>
</div>
</file>

Expand All @@ -1685,8 +1723,7 @@ angular.module('patternfly.charts').directive('pfTrendsChart', function () {
'total': '24'
};

$scope.title2 = 'Memory Utilization';
$scope.title2short = 'Memory';
$scope.title2 = 'Memory';
$scope.units2 = 'GB';

$scope.data2 = {
Expand Down
6 changes: 6 additions & 0 deletions misc/examples.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,3 +87,9 @@ hr {
.actions-label {
margin-top: 5px;
}

.label-title {
Copy link
Member

@rhamilto rhamilto Nov 9, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you use a heading, this CSS is unnecessary.

font-size: 16px;
font-weight: 600;
padding-bottom: 10px;
}
72 changes: 69 additions & 3 deletions src/card/basic/card.directive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,21 +34,38 @@

<file name="index.html">
<div ng-controller="ChartCtrl">
<div pf-card head-title="Card Title" sub-title="Card Subtitle" filter="filterConfigHeader" style="width: 50%">
[Card Contents] <button>Click Me</button> Timeframe filter in header
<label class="label-title">Timeframe filter in header</label>
<div pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true" filter="filterConfigHeader" style="width: 50%">
Card Contents
</div>

<label class="label-title">Footer with Link & Timeframe filter</label>
<div pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true"
footer="footerConfig" filter="filterConfig" style="width: 50%">
[Card Contents] <button>Click Me</button> Footer with Link & Timeframe filter
Card Contents
</div>

<label class="label-title">Card With Single Trend Chart</label>
<div pf-card head-title="Cluster Utilization" show-top-border="true" footer="footerConfig" filter="filterConfig" style="width: 50%">
<div pf-trends-chart config="configSingle" chart-data="dataSingle"></div>
</div>

<label class="label-title">Card With Multiple Trends</label>
<div pf-card head-title="Performance" sub-title="Last 30 Days" show-top-border="false"
show-titles-separator="false" style="width: 65%" footer="actionBarConfig">
<div pf-trends-chart config="configVirtual" chart-data="dataVirtual"></div>
<div pf-trends-chart config="configPhysical" chart-data="dataPhysical"></div>
<div pf-trends-chart config="configMemory" chart-data="dataMemory"></div>
</div>

<label class="label-title">Card With Multiple Utilization Bars</label>
<div pf-card head-title="System Resources" show-top-border="true" style="width: 65%">
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
</div>

</div>
</file>
<file name="script.js">
Expand Down Expand Up @@ -88,6 +105,21 @@
dates.push(new Date(today.getTime() - (d * 24 * 60 * 60 * 1000)));
}

$scope.configSingle = {
'chartId' : 'example2TrendsChart',
'title' : 'Storage Capacity',
'layout' : 'compact',
'valueType' : 'actual',
'units' : 'TB',
'tooltipType' : 'percentage'
};

$scope.dataSingle = {
'total': '250',
'xData': dates,
'yData': ['used', '90', '20', '30', '20', '20', '10', '14', '20', '25', '68', '44', '56', '78', '56', '67', '88', '76', '65', '87', '76']
};

$scope.configVirtual = {
'chartId' : 'virtualTrendsChart',
'layout' : 'inline',
Expand Down Expand Up @@ -137,6 +169,40 @@
alert("Footer Callback Fn Called");
}
}

$scope.title2 = 'Memory';
$scope.units2 = 'GB';

$scope.data2 = {
'used': '25',
'total': '100'
};

$scope.title3 = 'CPU Usage';
$scope.units3 = 'MHz';

$scope.data3 = {
'used': '420',
'total': '500',
};

$scope.title4 = 'Disk Usage';
$scope.units4 = 'TB';
$scope.data4 = {
'used': '350',
'total': '500',
};

$scope.title5 = 'Disk I/O';
$scope.units5 = 'I/Ops';
$scope.data5 = {
'used': '450',
'total': '500',
};

$scope.layoutInline = {
'type': 'inline'
};
});
</file>
</example>
Expand Down
16 changes: 0 additions & 16 deletions src/charts/trends/trends-chart.directive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,13 +82,6 @@
<button ng-click="addDataPoint()">Add Data Point</button>
</div>
</div>
<hr class="col-md-12">
<div class="col-md-12">
<div pf-card head-title="Cluster Utilization" show-top-border="true"
footer="footerConfig" filter="filterConfig">
<div pf-trends-chart config="config2" chart-data="data"></div>
</div>
</div>
</div>
</file>
<file name="script.js">
Expand All @@ -105,15 +98,6 @@
'tooltipType' : 'percentage'
};

$scope.config2 = {
'chartId' : 'example2TrendsChart',
'title' : 'Storage Capacity',
'layout' : 'compact',
'valueType' : 'actual',
'units' : 'TB',
'tooltipType' : 'percentage'
};

$scope.footerConfig = {
'iconClass' : 'fa fa-plus-circle',
'text' : 'Add New Cluster',
Expand Down
Loading