Created trend chart and trend card with right label config

Author: Amineta Lo

Diff for: src/card/examples/card-trend.js

@@ -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">
@@ -81,9 +84,19 @@
          'layout'       : 'compact',
          'valueType'    : 'actual',
          'units'        : 'TB',
-         'tooltipType'  : 'percentage'
+         'tooltipType'  : 'percentage',
        };
 
+       $scope.configRightLabel = {
+       'chartId'      : 'exampleAltLabelTrendsChart',
+         'title'        : 'Storage Capacity',
+         'layout'       : 'compact',
+         'valueType'    : 'actual',
+         'units'        : 'TB',
+         'tooltipType'  : 'percentage',
+         'compactLabelPosition'  : 'right'
+       }
+
        $scope.dataSingle = {
          'total': '250',
          'xData': dates,

Diff for: src/charts/trends/trends-chart.component.js

@@ -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..
@@ -101,7 +102,7 @@
          </div>
        </div>
        <div class="row">
-         <div class="col-md-6">
+         <div class="col-md-4">
            <form role="form"">
              <div class="form-group">
                <label class="checkbox-inline">
@@ -110,6 +111,19 @@
              </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>
@@ -125,7 +139,8 @@
          valueType    : 'actual',
          timeFrame    : 'Last 15 Minutes',
          units        : 'MHz',
-         tooltipType  : 'percentage'
+         tooltipType  : 'percentage',
+         compactLabelPosition  : 'left'
        };
 
        $scope.footerConfig = {

Diff for: src/charts/trends/trends-chart.html

@@ -19,7 +19,7 @@
   </div>
   <div ng-switch-when="compact" class="trend-card-compact-pf">
     <div class="row trend-row">
-      <div class="col-sm-4 col-md-4">
+      <div class="col-sm-4 col-md-4" ng-class="{'col-sm-push-8 col-md-push-8': $ctrl.config.compactLabelPosition === 'right'}">
         <div class="trend-compact-details">
           <span ng-if="$ctrl.showActualValue">
             <span class="trend-title-compact-big-pf">{{$ctrl.getLatestValue()}}</span>
@@ -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-8 col-md-8">
+      <div class="col-sm-8 col-md-8" ng-class="{'col-sm-pull-4 col-md-pull-4': $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>

Diff for: test/charts/trends/trends-chart.spec.js

@@ -95,6 +95,16 @@ describe('Directive: pfTrendsChart', function() {
     expect(trendCard.length).toBe(1);
   });
 
+  it("should push/pull label to the right", function() {
+    $scope.config.compactLabelPosition = 'right';
+    $scope.$digest();
+
+    trendCard = element.find('.col-sm-4 .col-md-4');
+    expect(trendCard.hasClass('.col-sm-push-8 .col-md-push-8'));
+    trendCard = element.find('.col-sm-8 .col-md-8');
+    expect(trendCard.hasClass('.col-sm-pull-4 .col-md-pull-4'));
+  });
+
   it("should show inline card layout", function() {
     $scope.config.layout = 'inline';
     $scope.$digest();