Merge pull request #91 from dtaylor113/trendChartNewLayouts

Trend chart new 'compact' and 'inline' layouts

Author: jeff-phillips-18

dist/angular-patternfly.js

@@ -1173,7 +1173,8 @@ 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     - (optional) the layout and sizes of titles and chart. Values are 'large' (default), and 'small'
+ * <li>.layout     - (optional) the layout and sizes of titles and chart. Values are 'large' (default), 'small', 'compact', and 'inline'
+ * <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..
  * <li>.valueType  - (optional) the format of the latest data point which is shown in the title. Values are 'actual'(default) or 'percentage'
@@ -1216,21 +1217,23 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
        <div class="col-md-3">
          <form role="form" >
            <div class="form-group">
-             <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>
+             <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>
+               <option value="compact">Compact</option>
+               <option value="inline">Inline</option>
              </select>
            </div>
          </form>
        </div>
        <div class="col-md-3">
-         <form role="form" >
+         <form role="form" ng-hide="layout == 'inline'">
            <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>
+             <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>
@@ -1248,6 +1251,7 @@ angular.module('patternfly.charts').directive('pfSparklineChart', ["c3ChartDefau
          'chartId'      : 'exampleTrendsChart',
          'title'        : 'Network Utilization Trends',
          'layout'       : 'large',
+         'trendLabel'   : 'Virtual Disk I/O',
          'valueType'    : 'actual',
          'timeFrame'    : 'Last 15 Minutes',
          'units'        : 'MHz',
@@ -4349,7 +4353,7 @@ angular.module('patternfly.views').directive('pfDataToolbar',
 
 
   $templateCache.put('charts/trends/trends-chart.html',
-    "<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>"
+    "<span ng-switch on=config.layout><div ng-switch-default 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><div ng-switch-when=compact><div class=\"row trend-row\"><div class=\"col-sm-4 col-md-4\"><div class=trend-compact-details><span ng-if=showActualValue><span class=trend-title-compact-big-pf>{{getLatestValue()}}</span> <span class=trend-title-compact-small-pf>{{config.units}}</span></span> <span ng-if=showPercentageValue><span class=trend-title-compact-big-pf>{{getPercentageValue() + '%'}}</span> <span class=trend-title-compact-small-pf>of {{chartData.total + ' ' + config.units}}</span></span> <span class=trend-header-compact-pf ng-if=config.title>{{config.title}}</span></div></div><div class=\"col-sm-8 col-md-8\"><div pf-sparkline-chart config=config chart-data=chartData chart-height=getChartHeight() show-x-axis=showXAxis show-y-axis=showYAxis></div></div></div></div><div ng-switch-when=inline><div class=\"row trend-row\"><div class=\"col-sm-8 col-md-8 trend-flat-col\"><div pf-sparkline-chart config=config chart-data=chartData chart-height=getChartHeight() show-x-axis=showXAxis show-y-axis=showYAxis></div></div><div class=\"col-sm-4 col-md-4 trend-flat-col\"><div class=trend-flat-details><div class=trend-flat-details-cell><span class=trend-title-flat-big-pf>{{getPercentageValue() + '%'}}</span></div><div class=trend-flat-details-cell><span class=trend-label-flat-strong-pf>{{config.trendLabel}}</span> <span class=trend-label-flat-pf>{{getLatestValue()}} of {{chartData.total + ' ' + config.units}}</span></div></div></div></div></div></span>"
   );
 
 

dist/angular-patternfly.min.js

@@ -282,6 +282,59 @@
   font-weight: 400;
 }
 
+.trend-flat-details {
+  display: table;
+  margin-top: 5px;
+}
+
+@media (min-width: 768px) {
+.trend-flat-details {
+    margin-top: 25px;
+  }
+}
+
+.trend-flat-details-cell {
+  display: table-cell;
+  vertical-align: bottom;
+}
+
+.trend-header-compact-pf {
+  display: block;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.trend-title-compact-big-pf {
+  font-size: 36px;
+  font-weight: 300;
+  line-height: 1;
+}
+
+.trend-title-compact-small-pf {
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.trend-title-flat-big-pf {
+  font-size: 26px;
+  font-weight: 300;
+  line-height: 1;
+  margin-right: 15px;
+}
+
+.trend-label-flat-pf {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1;
+}
+
+.trend-label-flat-strong-pf {
+  display: block;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+}
+
 .trend-footer-pf {
   font-size: 10px;
   font-weight: 400;