pfCharts: Component Conversion

src/card/basic/card.component.js

@@ -36,10 +36,10 @@
    <div ng-controller="ChartCtrl">
      <label class="label-title">Card With Multiple Utilization Bars</label>
      <pf-card head-title="System Resources" show-top-border="true" style="width: 65%">
-       <div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
-       <div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
-       <div pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
-       <div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
+       <pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
+       <pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
+       <pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
+       <pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
      </pf-card>
    </div>
  </file>

src/card/examples/card-trend.js

@@ -36,14 +36,14 @@
    <div ng-controller="ChartCtrl">
      <label class="label-title">Card With Single Trend</label>
      <pf-card head-title="Cluster Utilization" show-top-border="true" footer="footerConfig" filter="filterConfig" style="width: 50%">
-       <div pf-trends-chart config="configSingle" chart-data="dataSingle"></div>
+       <pf-trends-chart config="configSingle" 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">
-       <div pf-trends-chart config="configVirtual" chart-data="dataVirtual"></div>
-       <div pf-trends-chart config="configPhysical" chart-data="dataPhysical"></div>
-       <div pf-trends-chart config="configMemory" chart-data="dataMemory"></div>
+       <pf-trends-chart config="configVirtual" chart-data="dataVirtual"></pf-trends-chart>
+       <pf-trends-chart config="configPhysical" chart-data="dataPhysical"></pf-trends-chart>
+       <pf-trends-chart config="configMemory" chart-data="dataMemory"></pf-trends-chart>
      </pf-card>
     </div>
    </div>

src/charts/c3/c3-chart.directive.js → src/charts/c3/c3-chart.component.js

@@ -1,9 +1,10 @@
 /**
  * @ngdoc directive
- * @name patternfly.charts.directive:pfC3Chart
+ * @name patternfly.charts.component:pfC3Chart
+ * @restrict E
  *
  * @description
- *   Directive for wrapping c3 library
+ *   Component for wrapping c3 library
  *
  *   Note: The 'patternfly.charts' module is not a dependency in the default angular 'patternfly' module.
  *   In order to use patternfly charts you must add 'patternfly.charts' as a dependency in your application.
@@ -12,13 +13,12 @@
  * @param {string} id the ID of the container that the chart should bind to
  * @param {expression} config the c3 configuration options for the chart
  * @param {function (chart))=} getChartCallback the callback user function to be called once the chart is generated, containing the c3 chart object
- *
  * @example
 
  <example module="patternfly.charts">
    <file name="index.html">
      <div ng-controller="ChartCtrl">
-        <div pf-c3-chart id="chartId" config="chartConfig" get-chart-callback="getChart"></div>
+        <pf-c3-chart id="chartId" config="chartConfig" get-chart-callback="getChart"></pf-c3-chart>
 
         <form role="form" style="width:300px">
           Total = {{total}}, Used = {{used}}, Available = {{available}}
@@ -64,6 +64,7 @@
        }
 
        $scope.submitform = function (val) {
+         console.log("submitform");
          $scope.used = val;
          $scope.updateAvailable();
          $scope.chartConfig.data.columns = [["Used",$scope.used],["Available",$scope.available]];
@@ -75,32 +76,39 @@
 (function () {
   'use strict';
 
-  angular.module('patternfly.charts').directive('pfC3Chart', function ($timeout) {
-    return {
-      restrict: 'A',
-      scope: {
-        config: '=',
-        getChartCallback: '='
-      },
-      template: '<div id=""></div>',
-      replace: true,
-      link: function (scope, element, attrs) {
-        scope.$watch('config', function () {
-          $timeout(function () {
-            // store the chart object
-            var chart;
-            //generate c3 chart data
-            var chartData = scope.config;
-            if (chartData) {
-              chartData.bindto = '#' + attrs.id;
-              chart = c3.generate(chartData);
-              if (scope.getChartCallback) {
-                scope.getChartCallback(chart);
-              }
-            }
-          });
-        }, true);
-      }
-    };
+  angular.module('patternfly.charts').component('pfC3Chart', {
+    bindings: {
+      config: '<',
+      getChartCallback: '<'
+    },
+    template: '<div id=""></div>',
+    controller: function ($timeout, $attrs) {
+      var ctrl = this, prevConfig;
+
+      ctrl.generateChart = function () {
+        var chart;
+        var chartData;
+
+        // Need to deep watch changes in chart config
+        prevConfig = angular.copy(ctrl.config);
+
+        $timeout(function () {
+          chartData = ctrl.config;
+          if (chartData) {
+            chartData.bindto = '#' + $attrs.id;
+            chart = c3.generate(chartData);
+            ctrl.getChartCallback(chart);
+            prevConfig = angular.copy(ctrl.config);
+          }
+        });
+      };
+
+      ctrl.$doCheck = function () {
+        // do a deep compare on config
+        if (!angular.equals(ctrl.config, prevConfig)) {
+          ctrl.generateChart();
+        }
+      };
+    }
   });
 }());