Trends Chart: Added Large and Small card layouts

Author: dtaylor113

dist/angular-patternfly.js

@@ -1173,9 +1173,10 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
  * <ul style='list-style-type: none'>
  * <li>.chartId    - the unique id of this trends chart
  * <li>.title      - (optional) title of the Trends chart
+ * <li>.layout     - 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  - the format of the latest data point which is shown in the title. Values are 'actual' or 'percentage'
+ * <li>.valueType  - 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/>
@@ -1193,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">
@@ -1215,18 +1216,21 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
        <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 style="height:25px; width:120px;" 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-3">
          <form role="form" >
            <div class="form-group">
-             <label>Title Value Type</label></br>
-             <select pf-select style="height:25px; width:120px;" ng-model="valueType" id="valueType">
-               <option value="actual" ng-selected="true" selected>Actual</option>
-               <option value="percentage">Percentage</option>
+             <label>Layout</label></br>
+             <select pf-select style="height:25px; width:120px;" ng-model="layout" id="layout">
+               <option value="large" ng-selected="true" selected>Large</option>
+               <option value="small">Small</option>
              </select>
            </div>
          </form>
@@ -1243,6 +1247,7 @@ 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',
@@ -1263,15 +1268,18 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
 
        $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.config.valueType = newValue;
+       });
+
+       $scope.$watch('layout', function (newValue) {
+         $scope.config.layout = newValue;
        });
 
      });
@@ -1294,11 +1302,31 @@ angular.module('patternfly.charts').directive('pfTrendsChart',
       templateUrl: 'charts/trends/trends-chart.html',
       controller: ['$scope',
         function ($scope) {
-          $scope.getPercentage = function () {
-            return Math.round($scope.chartData.yData[$scope.chartData.yData.length - 1] / $scope.chartData.total * 100.0);
+          $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 = 60;
+            if ($scope.chartHeight) {
+              retValue = $scope.chartHeight;
+            } else if ($scope.config.layout === 'small') {
+              retValue = 30;
+            }
+            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);
+      }
     };
   }
 );
@@ -4006,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 ng-if=\"!config.valueType || config.valueType === 'actual'\"><span class=trend-title-big-pf>{{chartData.yData[chartData.yData.length-1]}}</span> <span class=trend-title-small-pf>{{config.units}}</span></span> <span ng-if=\"config.valueType === 'percentage'\"><span class=trend-title-big-pf>{{getPercentage() + '%'}}</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=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/styles/angular-patternfly.css

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