fix(pfTrendsChart): Updated trend chart and trend card with right (#594)

label config

Author: amarie401

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">
@@ -57,7 +60,7 @@
          'callBackFn': function () {
             alert("Footer Callback Fn Called");
           }
-       }
+       };
 
        $scope.filterConfig = {
          'filters' : [{label:'Last 30 Days', value:'30'},
@@ -67,7 +70,7 @@
             alert("Filter Callback Fn Called for '" + f.label + "' value = " + f.value);
           },
         'defaultFilter' : '1'
-       }
+       };
 
        var today = new Date();
        var dates = ['dates'];
@@ -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,

src/charts/charts.less

@@ -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;
   }
 }

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..
@@ -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">
@@ -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>
@@ -125,7 +139,8 @@
          valueType    : 'actual',
          timeFrame    : 'Last 15 Minutes',
          units        : 'MHz',
-         tooltipType  : 'percentage'
+         tooltipType  : 'percentage',
+         compactLabelPosition  : 'left'
        };
 
        $scope.footerConfig = {
@@ -134,7 +149,7 @@
          callBackFn: function () {
             alert("Footer Callback Fn Called");
           }
-       }
+       };
 
        $scope.filterConfig = {
          filters : [{label:'Last 30 Days', value:'30'},
@@ -143,7 +158,7 @@
          callBackFn: function (f) {
             alert("Filter Callback Fn Called for '" + f.label + "' value = " + f.value);
           }
-       }
+       };
 
        $scope.layouts = [
          {

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-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>
@@ -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>

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

@@ -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();