Merge pull request #82 from dtaylor113/trendCardUpdates

Trend Chart Card updates

Author: Walden Raines

Gruntfile.js

@@ -201,8 +201,8 @@ module.exports = function (grunt) {
           files: ['Gruntfile.js'],
           tasks: ['eslint']
         },
-        js: {
-          files: ['Gruntfile.js', 'src/**/*.js'],
+        all: {
+          files: ['Gruntfile.js', 'src/**/*.js', 'src/**/*.html', 'styles/**/*.css'],
           tasks: ['build']
         }
       }

dist/angular-patternfly.js

@@ -1171,10 +1171,12 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
  *
  * @param {object} config configuration settings for the trends chart:<br/>
  * <ul style='list-style-type: none'>
- * <li>.chartId      - the unique id of this trends chart
- * <li>.title        - (optional) title of the Trends chart
- * <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..
+ * <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), and 'small'
+ * <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..
+ * <li>.valueType  - (optional) the format of the latest data point which is shown in the title. Values are 'actual'(default) or 'percentage'
  * </ul>
  *
  * @param {object} chartData the data to be shown in the sparkline charts<br/>
@@ -1192,7 +1194,7 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
  <file name="index.html">
    <div ng-controller="ChartCtrl" class="row" style="display:inline-block; width: 100%;">
      <div class="col-md-12">
-       <div pf-trends-chart config="config" chart-data="data" chart-height="custChartHeight"
+       <div pf-trends-chart config="config" chart-data="data"
             show-x-axis="custShowXAxis" show-y-axis="custShowYAxis"></div>
      </div>
      <hr class="col-md-12">
@@ -1211,15 +1213,29 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
            </div>
          </form>
        </div>
-       <div class="col-md-4">
+       <div class="col-md-3">
          <form role="form" >
            <div class="form-group">
-             <label>Chart Height</label></br>
-             <input style="height:25px; width:60px;" type="number" ng-model="custChartHeight"></input>
+             <label>Title Value Type</label></br>
+             <select pf-select class="pf-select-sm" ng-model="valueType" id="valueType">
+               <option value="actual" ng-selected="true" selected>Actual</option>
+               <option value="percentage">Percentage</option>
+             </select>
            </div>
          </form>
        </div>
-       <div class="col-md-4">
+       <div class="col-md-3">
+         <form role="form" >
+           <div class="form-group">
+             <label>Layout</label></br>
+             <select pf-select class="pf-select-sm" ng-model="layout" id="layout">
+               <option value="large" ng-selected="true" selected>Large</option>
+               <option value="small">Small</option>
+             </select>
+           </div>
+         </form>
+       </div>
+       <div class="col-md-2">
          <button ng-click="addDataPoint()">Add Data Point</button>
        </div>
      </div>
@@ -1231,9 +1247,10 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
        $scope.config = {
          'chartId'      : 'exampleTrendsChart',
          'title'        : 'Network Utilization Trends',
+         'layout'       : 'large',
+         'valueType'    : 'actual',
          'timeFrame'    : 'Last 15 Minutes',
          'units'        : 'MHz',
-         'showTopBorder': 'true',
          'tooltipType'  : 'percentage'
        };
 
@@ -1244,19 +1261,27 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
       }
 
        $scope.data = {
-           'total': '100',
+           'total': '250',
            'xData': dates,
            'yData': ['used', '10', '20', '30', '20', '30', '10', '14', '20', '25', '68', '54', '56', '78', '56', '67', '88', '76', '65', '87', '76']
        };
 
        $scope.custShowXAxis = false;
        $scope.custShowYAxis = false;
-       $scope.custChartHeight = 60;
 
        $scope.addDataPoint = function () {
          $scope.data.xData.push(new Date($scope.data.xData[$scope.data.xData.length - 1].getTime() + (24 * 60 * 60 * 1000)));
          $scope.data.yData.push(Math.round(Math.random() * 100));
        };
+
+       $scope.$watch('valueType', function (newValue) {
+         $scope.config.valueType = newValue;
+       });
+
+       $scope.$watch('layout', function (newValue) {
+         $scope.config.layout = newValue;
+       });
+
      });
  </file>
  </example>
@@ -1274,7 +1299,34 @@ angular.module('patternfly.charts').directive('pfTrendsChart',
         showYAxis: '=?'
       },
       replace: true,
-      templateUrl: 'charts/trends/trends-chart.html'
+      templateUrl: 'charts/trends/trends-chart.html',
+      controller: ["$scope", function ($scope) {
+        var SMALL = 30, LARGE = 60;
+
+        $scope.getPercentageValue = function () {
+          return Math.round($scope.getLatestValue() / $scope.chartData.total * 100.0);
+        };
+        $scope.getLatestValue = function () {
+          return $scope.chartData.yData[$scope.chartData.yData.length - 1];
+        };
+        $scope.getChartHeight = function () {
+          var retValue = LARGE;
+          if ($scope.chartHeight) {
+            retValue = $scope.chartHeight;
+          } else if ($scope.config.layout === 'small') {
+            retValue = SMALL;
+          }
+          return retValue;
+        };
+      }],
+      link: function (scope) {
+        scope.$watch('config', function () {
+          scope.showLargeCardLayout = (!scope.config.layout || scope.config.layout === 'large');
+          scope.showSmallCardLayout = (scope.config.layout === 'small');
+          scope.showActualValue = (!scope.config.valueType || scope.config.valueType === 'actual');
+          scope.showPercentageValue = (scope.config.valueType === 'percentage');
+        }, true);
+      }
     };
   }
 );
@@ -3982,7 +4034,7 @@ angular.module('patternfly.views').directive('pfDataToolbar',
 
 
   $templateCache.put('charts/trends/trends-chart.html',
-    "<div><span class=trend-header-pf ng-if=config.title>{{config.title}}</span> <span class=trend-title-big-pf>{{chartData.yData[chartData.yData.length-1]}}</span> <span class=trend-title-small-pf>{{config.units}}</span><div pf-sparkline-chart config=config chart-data=chartData chart-height=chartHeight show-x-axis=showXAxis show-y-axis=showYAxis></div><span class=trend-footer-pf ng-if=config.timeFrame>{{config.timeFrame}}</span></div>"
+    "<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>"
   );
 
 

dist/angular-patternfly.min.js

@@ -246,30 +246,45 @@
   box-shadow: none;
 }
 
-.trend-title-big-pf {
-  font-size: 24px;
-  font-weight: 300;
-  color: #333;
+.trend-card-large-pf .trend-header-pf {
+  font-size: 16px;
+  font-weight: 400;
+  display: block;
   margin-left: 10px;
 }
 
-.trend-title-small-pf {
+.trend-card-small-pf .trend-header-pf {
   font-size: 12px;
   font-weight: 400;
-  color: #333;
+  display: block;
+  margin-left: 10px;
 }
 
-.trend-header-pf {
-  display: block;
-  font-size: 18px;
+.trend-card-large-pf .trend-title-big-pf {
+  font-size: 26px;
+  font-weight: 300;
+  margin-left: 10px;
+}
+
+.trend-card-small-pf .trend-title-big-pf {
+  font-size: 17px;
   font-weight: 400;
-  color: #333;
   margin-left: 10px;
 }
 
-.trend-footer-pf {
+.trend-card-large-pf .trend-title-small-pf {
   font-size: 12px;
   font-weight: 400;
+}
+
+.trend-card-small-pf .trend-title-small-pf {
+  font-size: 10px;
+  font-weight: 400;
+}
+
+.trend-footer-pf {
+  font-size: 10px;
+  font-weight: 400;
   color: #333;
   margin-left: 10px;
 }

dist/styles/angular-patternfly.css

@@ -70,3 +70,8 @@ hr {
 .dropdown-menu > li > a:hover {
   background-image: none;
 }
+
+.pf-select-sm {
+  height :25px;
+  width  :120px;
+}