feat: document and demonstrate new lifecycle and plugin features

- Add documentation for chart-plugins, chart-display-when-no-data, and chart-force-update to README.
- Add Advanced Features section to examples with live demos for plugins and lifecycle management.
- Ensure full reactivity for new directive attributes in angular-chart.js via explicit watches.
- Refactor watchData to correctly handle lifecycle toggles and force-updates.
- Improve example layout using flexbox and refined watermark styling.
- Resolve linting violations and ensure 100% test compliance.

Author: jtblin

README.md

@@ -83,6 +83,9 @@ Here are the options for all directives:
 - `chart-click`: onclick event handler
 - `chart-hover`: onmousemove event handler
 - `chart-dataset-override`: override individual datasets to allow per dataset configuration e.g. y-axis, mixed type chart
+- `chart-plugins`: (default: `[]`): array of [Chart.js plugins](http://www.chartjs.org/docs/latest/developers/plugins.html)
+- `chart-display-when-no-data`: (default: `false`): whether to create the chart even if data is empty or undefined
+- `chart-force-update`: (default: `false`): whether to force a chart update even if data references have not changed
 
 There is another directive `chart-base` that takes an extra attribute `chart-type` to define the type
 dynamically. 
@@ -152,7 +155,9 @@ Module should work with CommonJS out of the box e.g. [browserify](http://browser
 # Reactive
 
 angular-chart.js watch updates on data, series, labels, colors and options and will update, or destroy and recreate, 
-the chart on changes.
+the chart on changes. 
+
+**Note**: Updates to `chart-options` are now performed non-destructively using `chart.update()`, which provides smoother transitions when changing configuration dynamically.
 
 # Events
 

examples/app.js

@@ -339,4 +339,41 @@
     const y = previous + Math.random() * 10 - 5;
     return y < 0 ? 0 : y > 100 ? 100 : y;
   }
+
+  app.controller('PluginsCtrl', ['$scope', ($scope) => {
+    $scope.labels = [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July',
+    ];
+    $scope.data = [65, 59, 80, 81, 56, 55, 40];
+    $scope.plugins = [{
+      afterDatasetsDraw: (chart) => {
+        const ctx = chart.ctx;
+        ctx.save();
+        ctx.font = '900 40px "Helvetica Neue", Helvetica, Arial, sans-serif';
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.07)';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.translate(chart.width / 2, chart.height / 2);
+        ctx.rotate(-Math.PI / 4);
+        ctx.fillText('CONFIDENTIAL', 0, 0);
+        ctx.restore();
+      },
+    }];
+  }]);
+
+  app.controller('NoDataCtrl', ['$scope', ($scope) => {
+    $scope.labels = ['Sales', 'Support', 'Admin'];
+    $scope.data = [];
+    $scope.type = 'bar';
+    $scope.displayWhenNoData = true;
+    $scope.forceUpdate = false;
+
+    $scope.setData = () => {
+      $scope.data = [300, 500, 100];
+    };
+
+    $scope.clearData = () => {
+      $scope.data = [];
+    };
+  }]);
 })();

examples/charts.html

@@ -677,6 +677,47 @@ <h1>Mixed type charts</h1>
         </div>
       </div>
     </section>
+    <section id="advanced">
+      <div class="page-header">
+        <h1>Advanced Features</h1>
+        <p>Support for plugins and advanced lifecycle management.</p>
+      </div>
+      <div class="row" style="display: flex; flex-wrap: wrap;">
+        <div class="col-lg-6 col-sm-12" ng-controller="PluginsCtrl" style="display: flex;">
+          <div class="panel panel-default" style="display: flex; flex-direction: column; width: 100%;">
+            <div class="panel-heading">Plugins Support</div>
+            <div class="panel-body" style="flex: 1;">
+              <canvas class="chart chart-line" chart-data="data" chart-labels="labels"
+                      chart-plugins="plugins"></canvas>
+            </div>
+            <div class="panel-footer">
+              Using <code>chart-plugins</code> to draw a watermark.
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-6 col-sm-12" ng-controller="NoDataCtrl" style="display: flex;">
+          <div class="panel panel-default" style="display: flex; flex-direction: column; width: 100%;">
+            <div class="panel-heading">Lifecycle Management</div>
+            <div class="panel-body" style="flex: 1; min-height: 300px;">
+              <canvas class="chart chart-base" chart-type="type" chart-data="data" chart-labels="labels"
+                      chart-display-when-no-data="displayWhenNoData"
+                      chart-force-update="forceUpdate"
+                      style="border: 1px dashed #ccc;"></canvas>
+            </div>
+            <div class="panel-footer">
+              <button class="btn btn-sm btn-default" ng-click="setData()">Set Data</button>
+              <button class="btn btn-sm btn-default" ng-click="clearData()">Clear Data</button>
+              <label style="font-weight: normal;"><input type="checkbox" ng-model="displayWhenNoData"> Display when no data</label>
+              <select ng-model="type" class="form-control input-sm" style="display: inline-block; width: auto;">
+                <option value="bar">Bar</option>
+                <option value="line">Line</option>
+                <option value="pie">Pie</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
   </div>
   <footer class="footer">
     <div class="container">

src/angular-chart.js

@@ -115,6 +115,19 @@ function ChartJsFactory(ChartJs, $timeout) {
         scope.$watch('chartColors', watchOther, true);
         scope.$watch('chartDatasetOverride', watchOther, true);
         scope.$watch('chartType', watchType, false);
+        scope.$watch('chartPlugins', watchOther, true);
+        scope.$watch('chartDisplayWhenNoData', (newVal, oldVal) => {
+          if (newVal === oldVal) {
+            return;
+          }
+          watchData(scope.chartData);
+        }, false);
+        scope.$watch('chartForceUpdate', (newVal, oldVal) => {
+          if (newVal === oldVal) {
+            return;
+          }
+          watchData(scope.chartData);
+        }, false);
 
         scope.$on('$destroy', () => destroyChart(scope));