Skip to content

Commit f6b0768

Browse files
dtaylor113dtaylor113
committed
Trends Chart: added 'compact' layout
1 parent b815211 commit f6b0768

File tree

8 files changed

+95
-7
lines changed

8 files changed

+95
-7
lines changed

‎dist/angular-patternfly.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1173,7 +1173,7 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
11731173
* <ul style='list-style-type: none'>
11741174
* <li>.chartId - the unique id of this trends chart
11751175
* <li>.title - (optional) title of the Trends chart
1176-
* <li>.layout - (optional) the layout and sizes of titles and chart. Values are 'large' (default), and 'small'
1176+
* <li>.layout - (optional) the layout and sizes of titles and chart. Values are 'large' (default), 'small', and 'compact'
11771177
* <li>.timeFrame - (optional) the time frame for the data in the pfSparklineChart, ex: 'Last 30 Days'
11781178
* <li>.units - unit label for values, ex: 'MHz','GB', etc..
11791179
* <li>.valueType - (optional) the format of the latest data point which is shown in the title. Values are 'actual'(default) or 'percentage'
@@ -1231,6 +1231,7 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
12311231
<select pf-select class="pf-select-sm" ng-model="layout" id="layout">
12321232
<option value="large" ng-selected="true" selected>Large</option>
12331233
<option value="small">Small</option>
1234+
<option value="compact">Compact</option>
12341235
</select>
12351236
</div>
12361237
</form>
@@ -4349,7 +4350,7 @@ angular.module('patternfly.views').directive('pfDataToolbar',
43494350

43504351

43514352
$templateCache.put('charts/trends/trends-chart.html',
4352-
"<span><div ng-class=\"{'trend-card-large-pf': showLargeCardLayout,'trend-card-small-pf': showSmallCardLayout}\"><span class=trend-header-pf ng-if=config.title>{{config.title}}</span> <span ng-if=showActualValue><span class=trend-title-big-pf>{{getLatestValue()}}</span> <span class=trend-title-small-pf>{{config.units}}</span></span> <span ng-if=showPercentageValue><span class=trend-title-big-pf>{{getPercentageValue() + '%'}}</span> <span class=trend-title-small-pf>of {{chartData.total + ' ' + config.units}}</span></span><div pf-sparkline-chart config=config chart-data=chartData chart-height=getChartHeight() show-x-axis=showXAxis show-y-axis=showYAxis></div><span class=trend-footer-pf ng-if=config.timeFrame>{{config.timeFrame}}</span></div></span>"
4353+
"<span ng-switch on=config.layout><div ng-switch-default ng-class=\"{'trend-card-large-pf': showLargeCardLayout,'trend-card-small-pf': showSmallCardLayout}\"><span class=trend-header-pf ng-if=config.title>{{config.title}}</span> <span ng-if=showActualValue><span class=trend-title-big-pf>{{getLatestValue()}}</span> <span class=trend-title-small-pf>{{config.units}}</span></span> <span ng-if=showPercentageValue><span class=trend-title-big-pf>{{getPercentageValue() + '%'}}</span> <span class=trend-title-small-pf>of {{chartData.total + ' ' + config.units}}</span></span><div pf-sparkline-chart config=config chart-data=chartData chart-height=getChartHeight() show-x-axis=showXAxis show-y-axis=showYAxis></div><span class=trend-footer-pf ng-if=config.timeFrame>{{config.timeFrame}}</span></div><div ng-switch-when=compact><div class=\"row trend-compact-row\"><div class=col-md-4 style=padding-right:0px><span ng-if=showActualValue><span class=trend-title-compact-big-pf>{{getLatestValue()}}</span> <span class=trend-title-compact-small-pf>{{config.units}}</span></span> <span ng-if=showPercentageValue><span class=trend-title-compact-big-pf>{{getPercentageValue() + '%'}}</span> <span class=trend-title-compact-small-pf>of {{chartData.total + ' ' + config.units}}</span></span> <span class=trend-header-compact-pf ng-if=config.title>{{config.title}}</span></div><div class=col-md-8 style=padding-left:0px><div pf-sparkline-chart config=config chart-data=chartData chart-height=getChartHeight() show-x-axis=showXAxis show-y-axis=showYAxis></div></div></div></div></span>"
43534354
);
43544355

43554356

‎dist/angular-patternfly.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/styles/angular-patternfly.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,33 @@
282282
font-weight: 400;
283283
}
284284

285+
.trend-title-compact-big-pf {
286+
font-size: 36px;
287+
font-weight: 300;
288+
margin-left: 10px;
289+
}
290+
291+
.trend-title-compact-small-pf {
292+
font-size: 12px;
293+
font-weight: 400;
294+
}
295+
296+
.trend-header-compact-pf {
297+
font-size: 12px;
298+
font-weight: 400;
299+
display: block;
300+
margin-left: 10px;
301+
margin-top: -5px;
302+
}
303+
304+
.trend-compact-row > * {
305+
float: none;
306+
display: inline-block;
307+
}
308+
.trend-compact-row > *:last-child {
309+
vertical-align: bottom;
310+
}
311+
285312
.trend-footer-pf {
286313
font-size: 10px;
287314
font-weight: 400;

‎dist/styles/angular-patternfly.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
* <ul style='list-style-type: none'>
1414
* <li>.chartId - the unique id of this trends chart
1515
* <li>.title - (optional) title of the Trends chart
16-
* <li>.layout - (optional) the layout and sizes of titles and chart. Values are 'large' (default), and 'small'
16+
* <li>.layout - (optional) the layout and sizes of titles and chart. Values are 'large' (default), 'small', and 'compact'
1717
* <li>.timeFrame - (optional) the time frame for the data in the pfSparklineChart, ex: 'Last 30 Days'
1818
* <li>.units - unit label for values, ex: 'MHz','GB', etc..
1919
* <li>.valueType - (optional) the format of the latest data point which is shown in the title. Values are 'actual'(default) or 'percentage'
@@ -71,6 +71,7 @@
7171
<select pf-select class="pf-select-sm" ng-model="layout" id="layout">
7272
<option value="large" ng-selected="true" selected>Large</option>
7373
<option value="small">Small</option>
74+
<option value="compact">Compact</option>
7475
</select>
7576
</div>
7677
</form>

‎src/charts/trends/trends-chart.html‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<span>
2-
<div ng-class="{'trend-card-large-pf': showLargeCardLayout,'trend-card-small-pf': showSmallCardLayout}">
1+
<span ng-switch on="config.layout">
2+
<div ng-switch-default ng-class="{'trend-card-large-pf': showLargeCardLayout,'trend-card-small-pf': showSmallCardLayout}">
33

44
<span class="trend-header-pf" ng-if="config.title">{{config.title}}</span>
55

@@ -17,4 +17,24 @@
1717

1818
<span class="trend-footer-pf" ng-if="config.timeFrame">{{config.timeFrame}}</span>
1919
</div>
20+
<div ng-switch-when="compact">
21+
<div class="row trend-compact-row">
22+
<div class="col-md-4" style="padding-right:0px">
23+
<span ng-if="showActualValue">
24+
<span class="trend-title-compact-big-pf">{{getLatestValue()}}</span>
25+
<span class="trend-title-compact-small-pf">{{config.units}}</span>
26+
</span>
27+
<span ng-if="showPercentageValue">
28+
<span class="trend-title-compact-big-pf">{{getPercentageValue() + '%'}}</span>
29+
<span class="trend-title-compact-small-pf">of {{chartData.total + ' ' + config.units}}</span>
30+
</span>
31+
32+
<span class="trend-header-compact-pf" ng-if="config.title">{{config.title}}</span>
33+
</div>
34+
<div class="col-md-8" style="padding-left:0px">
35+
<div pf-sparkline-chart config="config" chart-data="chartData" chart-height="getChartHeight()"
36+
show-x-axis="showXAxis" show-y-axis="showYAxis"></div>
37+
</div>
38+
</div>
39+
</div>
2040
</span>

‎styles/angular-patternfly.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,33 @@
282282
font-weight: 400;
283283
}
284284

285+
.trend-title-compact-big-pf {
286+
font-size: 36px;
287+
font-weight: 300;
288+
margin-left: 10px;
289+
}
290+
291+
.trend-title-compact-small-pf {
292+
font-size: 12px;
293+
font-weight: 400;
294+
}
295+
296+
.trend-header-compact-pf {
297+
font-size: 12px;
298+
font-weight: 400;
299+
display: block;
300+
margin-left: 10px;
301+
margin-top: -5px;
302+
}
303+
304+
.trend-compact-row > * {
305+
float: none;
306+
display: inline-block;
307+
}
308+
.trend-compact-row > *:last-child {
309+
vertical-align: bottom;
310+
}
311+
285312
.trend-footer-pf {
286313
font-size: 10px;
287314
font-weight: 400;

‎test/charts/trends/trends-chart.spec.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,4 +81,16 @@ describe('Directive: pfTrendsChart', function() {
8181
expect(trendCard.size()).toBe(1);
8282
expect(trendCard.hasClass('.trend-card-small-pf')).toBeFalsy();
8383
});
84+
85+
it("should show compact card layout", function() {
86+
$scope.config.layout = 'compact';
87+
$scope.$digest();
88+
89+
var trendCard = element.find('.trend-compact-row');
90+
expect(trendCard.size()).toBe(1);
91+
var trendCard = element.find('.trend-title-compact-big-pf');
92+
expect(trendCard.size()).toBe(1);
93+
var trendCard = element.find('.trend-title-compact-small-pf');
94+
expect(trendCard.size()).toBe(1);
95+
});
8496
});

0 commit comments

Comments
 (0)