Skip to content

Alternate Label Placement for TrendsCard & TrendsChart #594

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
Aug 28, 2017
Merged

Alternate Label Placement for TrendsCard & TrendsChart #594

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
17 changes: 15 additions & 2 deletions src/card/examples/card-trend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@
<pf-card head-title="Cluster Utilization" show-top-border="true" footer="footerConfig" filter="filterConfig" style="width: 50%">
<pf-trends-chart config="configSingle" chart-data="dataSingle"></pf-trends-chart>
</pf-card>
<pf-card head-title="Cluster Utilization" show-top-border="true" footer="footerConfig" filter="filterConfig" style="width: 50%">
<pf-trends-chart config="configRightLabel" chart-data="dataSingle"></pf-trends-chart>
</pf-card>
<label class="label-title">Card with Multiple Trends</label>
<pf-card head-title="Performance" sub-title="Last 30 Days" show-top-border="false"
show-titles-separator="false" style="width: 65%" footer="actionBarConfig">
Expand All @@ -57,7 +60,7 @@
'callBackFn': function () {
alert("Footer Callback Fn Called");
}
}
};

$scope.filterConfig = {
'filters' : [{label:'Last 30 Days', value:'30'},
Expand All @@ -67,7 +70,7 @@
alert("Filter Callback Fn Called for '" + f.label + "' value = " + f.value);
},
'defaultFilter' : '1'
}
};

var today = new Date();
var dates = ['dates'];
Expand All @@ -84,6 +87,16 @@
'tooltipType' : 'percentage'
};

$scope.configRightLabel = {
'chartId' : 'exampleRightLabelTrendsChart',
'title' : 'Storage Capacity',
'layout' : 'compact',
'valueType' : 'actual',
'units' : 'TB',
'tooltipType' : 'percentage',
'compactLabelPosition' : 'right'
};

$scope.dataSingle = {
'total': '250',
'xData': dates,
Expand Down
4 changes: 2 additions & 2 deletions src/charts/charts.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,10 @@ pf-c3-chart {
}

.trend-card-compact-pf {
.col-sm-2 {
.col-sm-2:not(.col-sm-push-10) {
padding-right: 0;
}
.col-sm-10 {
.col-sm-10:not(.col-sm-pull-2) {
padding-left: 0;
}
Copy link
Member

Choose a reason for hiding this comment

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

I would have expected this check to be on both columns and to do the reverse padding on them. That is, whichever column ends up on the left has a right-padding 0, and whichever ends up on the right has a left-padding of 0.

Copy link
Contributor Author

@amarie401 amarie401 Aug 25, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

@jeff-phillips-18 If I change the styling to this then the details is too close to the chart for the right label position as shown below unless I remove the .col-sm-2.col-sm-push-10 { padding-left: 0; } then the spacing is fine. Should I leave that specific style out?

.trend-card-compact-pf {
  .col-sm-2:not(.col-sm-push-10) {
    padding-right: 0;
  }
  .col-sm-2.col-sm-push-10 {
    padding-left: 0;
  }
  .col-sm-10:not(.col-sm-pull-2) {
    padding-left: 0;
  }
  .col-sm-10.col-sm-pull-2 {
    padding-right: 0;
  }
}

screen shot 2017-08-25 at 6 04 30 pm

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@jeff-phillips-18 what are your thoughts?

Copy link
Member

Choose a reason for hiding this comment

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

I guess I was assuming the text would be right justified in this layout. If not, then I guess we should leave the spacing as it was.

}
Expand Down
27 changes: 21 additions & 6 deletions src/charts/trends/trends-chart.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
* <li>.chartId - the unique id of this trends chart
* <li>.title - (optional) title of the Trends chart
* <li>.layout - (optional) the layout and sizes of titles and chart. Values are 'large' (default), 'small', 'compact', and 'inline'
* <li>.compactLabelPosition - (optional) the trend label positioning when the layout value is 'compact'. Values are 'left' (default) or 'right'
* <li>.trendLabel - (optional) the trend label used in the 'inline' layout
* <li>.timeFrame - (optional) the time frame for the data in the pfSparklineChart, ex: 'Last 30 Days'
* <li>.units - unit label for values, ex: 'MHz','GB', etc..
Expand Down Expand Up @@ -44,7 +45,7 @@
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<form role="form"">
<form role="form">
<div class="form-group">
<label>Show</label></br>
<label class="checkbox-inline">
Expand Down Expand Up @@ -101,15 +102,28 @@
</div>
</div>
<div class="row">
<div class="col-md-6">
<form role="form"">
<div class="col-md-4">
<form role="form">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" ng-model="data.dataAvailable">Data Available</input>
</label>
</div>
</form>
</div>
<div class="col-md-4" ng-if="config.layout === 'compact'">
<form role="form">
<div class="form-group">
<label>Compact Label Position</label></br>
<label class="radio-inline">
<input type="radio" ng-model="config.compactLabelPosition" value="left">Left</input>
</label>
<label class="radio-inline">
<input type="radio" ng-model="config.compactLabelPosition" value="right">Right</input>
</label>
</div>
</form>
</div>
</div>
</div>
</div>
Expand All @@ -125,7 +139,8 @@
valueType : 'actual',
timeFrame : 'Last 15 Minutes',
units : 'MHz',
tooltipType : 'percentage'
tooltipType : 'percentage',
compactLabelPosition : 'left'
};

$scope.footerConfig = {
Expand All @@ -134,7 +149,7 @@
callBackFn: function () {
alert("Footer Callback Fn Called");
}
}
};

$scope.filterConfig = {
filters : [{label:'Last 30 Days', value:'30'},
Expand All @@ -143,7 +158,7 @@
callBackFn: function (f) {
alert("Filter Callback Fn Called for '" + f.label + "' value = " + f.value);
}
}
};

$scope.layouts = [
{
Expand Down
4 changes: 2 additions & 2 deletions src/charts/trends/trends-chart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
</div>
<div ng-switch-when="compact" class="trend-card-compact-pf">
<div class="row trend-row">
<div class="col-sm-2">
<div class="col-sm-2" ng-class="{'col-sm-push-10': $ctrl.config.compactLabelPosition === 'right'}">
<div class="trend-compact-details">
<span ng-if="$ctrl.showActualValue">
<span class="trend-title-compact-big-pf">{{$ctrl.getLatestValue()}}</span>
Expand All @@ -32,7 +32,7 @@
<span class="trend-header-compact-pf" ng-if="$ctrl.config.title">{{$ctrl.config.title}}</span>
</div>
</div>
<div class="col-sm-10">
<div class="col-sm-10" ng-class="{'col-sm-pull-2': $ctrl.config.compactLabelPosition === 'right'}">
<pf-sparkline-chart ng-if="$ctrl.chartData.dataAvailable !== false" config="$ctrl.config" chart-data="$ctrl.chartData" chart-height="$ctrl.getChartHeight()"
show-x-axis="$ctrl.showXAxis" show-y-axis="$ctrl.showYAxis"></pf-sparkline-chart>
<pf-empty-chart ng-if="$ctrl.chartData.dataAvailable === false" chart-height="$ctrl.getChartHeight()"></pf-empty-chart>
Expand Down
12 changes: 12 additions & 0 deletions test/charts/trends/trends-chart.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,18 @@ describe('Directive: pfTrendsChart', function() {
expect(trendCard.length).toBe(1);
});

it("should push/pull label to the right when compactLabelPosition is 'right'", function() {
$scope.config.layout = 'compact';
$scope.config.compactLabelPosition = 'right';
$scope.$digest();

trendCard = element.find('.col-sm-2');
expect(trendCard.hasClass('col-sm-push-10')).toEqual(true);

trendCard = element.find('.col-sm-10');
expect(trendCard.hasClass('col-sm-pull-2')).toEqual(true);
});

it("should show inline card layout", function() {
$scope.config.layout = 'inline';
$scope.$digest();
Expand Down