Entity Stat aggregate view simplified.

#345

Author: davidwatkins73

…s/directives/apps-by-investment-pie.html …s/components/apps-by-investment-pie.htmlwaltz-ng/client/applications/directives/apps-by-investment-pie.html renamed to waltz-ng/client/applications/components/apps-by-investment-pie.html waltz-ng/client/applications/directives/apps-by-investment-pie.html renamed to waltz-ng/client/applications/components/apps-by-investment-pie.html

@@ -1,6 +1,6 @@
 <div>
-    <waltz-pie-table data="ctrl.data"
-                     config="ctrl.config"
+    <waltz-pie-table data="$ctrl.data"
+                     config="$ctrl.config"
                      class="clickable"
                      waltz-jump-to="apps-section"
                      icon="money"

…ons/directives/apps-by-investment-pie.js …ons/components/apps-by-investment-pie.jswaltz-ng/client/applications/directives/apps-by-investment-pie.js renamed to waltz-ng/client/applications/components/apps-by-investment-pie.js waltz-ng/client/applications/directives/apps-by-investment-pie.js renamed to waltz-ng/client/applications/components/apps-by-investment-pie.js

@@ -21,14 +21,18 @@ import {ragColorScale} from "../../common/colors";
 import {toKeyCounts} from "../../common";
 
 
-const BINDINGS = {
-    applications: '=',
-    size: '='
+const bindings = {
+    applications: '<',
+    size: '<'
 };
 
 
+const template = require('./apps-by-investment-pie.html');
+
+
 const DEFAULT_SIZE = 80;
 
+
 const investmentLabels = {
     'R' : 'Disinvest',
     'A' : 'Maintain',
@@ -39,7 +43,7 @@ const investmentLabels = {
 const config = {
     colorProvider: (d) => ragColorScale(d.data.key),
     size: DEFAULT_SIZE,
-    labelProvider: (k) => investmentLabels[k] || 'Unknown'
+    labelProvider: (d) => investmentLabels[d.key] || 'Unknown'
 };
 
 
@@ -48,32 +52,25 @@ function calcAppInvestmentPieStats(apps) {
 }
 
 
-function controller($scope) {
+function controller() {
     const vm = this;
 
     vm.config = config;
     vm.data = [];
 
-    $scope.$watch('ctrl.size', sz => vm.config.size = sz ? sz : DEFAULT_SIZE);
-
-    $scope.$watch('ctrl.applications', apps => {
-        if (!apps) return;
-        vm.data = calcAppInvestmentPieStats(apps);
-    });
-
+    vm.$onChanges = () => {
+        vm.config.size = vm.size
+            ? vm.size
+            : DEFAULT_SIZE;
+        vm.data = calcAppInvestmentPieStats(vm.applications);
+    };
 }
 
-controller.$inject = ['$scope'];
-
 
-export default () => {
-    return {
-        restrict: 'E',
-        replace: true,
-        template: require('./apps-by-investment-pie.html'),
-        scope: {},
-        bindToController: BINDINGS,
-        controllerAs: 'ctrl',
-        controller
-    };
+const component = {
+    template,
+    bindings,
+    controller
 };
+
+export default component;

…ectives/apps-by-lifecycle-phase-pie.html …ponents/apps-by-lifecycle-phase-pie.htmlwaltz-ng/client/applications/directives/apps-by-lifecycle-phase-pie.html renamed to waltz-ng/client/applications/components/apps-by-lifecycle-phase-pie.html waltz-ng/client/applications/directives/apps-by-lifecycle-phase-pie.html renamed to waltz-ng/client/applications/components/apps-by-lifecycle-phase-pie.html

@@ -1,6 +1,6 @@
 <div>
-    <waltz-pie-table data="ctrl.data"
-                     config="ctrl.config"
+    <waltz-pie-table data="$ctrl.data"
+                     config="$ctrl.config"
                      class="clickable"
                      waltz-jump-to="apps-section"
                      icon="desktop"

…irectives/apps-by-lifecycle-phase-pie.js …omponents/apps-by-lifecycle-phase-pie.jswaltz-ng/client/applications/directives/apps-by-lifecycle-phase-pie.js renamed to waltz-ng/client/applications/components/apps-by-lifecycle-phase-pie.js waltz-ng/client/applications/directives/apps-by-lifecycle-phase-pie.js renamed to waltz-ng/client/applications/components/apps-by-lifecycle-phase-pie.js

@@ -18,55 +18,54 @@
  */
 
 import {lifecyclePhaseColorScale} from "../../common/colors";
+import {lifecyclePhaseDisplayNames} from '../../common/services/display_names';
 import {toKeyCounts} from "../../common";
 
 
-const BINDINGS = {
-    applications: '=',
-    size: '='
+const bindings = {
+    applications: '<',
+    size: '<'
 };
 
 
+const template = require('./apps-by-lifecycle-phase-pie.html');
+
+
 const DEFAULT_SIZE = 80;
 
+
 const config = {
     colorProvider: (d) => lifecyclePhaseColorScale(d.data.key),
-    size: DEFAULT_SIZE
+    size: DEFAULT_SIZE,
+    labelProvider: d => lifecyclePhaseDisplayNames[d.key] || 'Unknown'
 };
 
 
-
-function calcAppPhasePieStats(apps) {
+function calcAppPhasePieStats(apps = []) {
     return toKeyCounts(apps, a => a.lifecyclePhase);
 }
 
 
-function controller($scope) {
+function controller() {
     const vm = this;
 
     vm.config = config;
     vm.data = [];
 
-    $scope.$watch('ctrl.size', sz => vm.config.size = sz ? sz : DEFAULT_SIZE);
-
-    $scope.$watch('ctrl.applications', apps => {
-        if (!apps) return;
-        vm.data = calcAppPhasePieStats(apps);
-    });
-
+    vm.$onChanges = () => {
+        vm.config.size = vm.size
+            ? vm.size
+            : DEFAULT_SIZE;
+        vm.data = calcAppPhasePieStats(vm.applications);
+    };
 }
 
-controller.$inject = ['$scope'];
-
 
-export default () => {
-    return {
-        restrict: 'E',
-        replace: true,
-        template: require('./apps-by-lifecycle-phase-pie.html'),
-        scope: {},
-        bindToController: BINDINGS,
-        controllerAs: 'ctrl',
-        controller
-    };
+const component = {
+    template,
+    bindings,
+    controller
 };
+
+
+export default component;

waltz-ng/client/applications/index.js

@@ -23,11 +23,11 @@ export default (module) => {
         .directive('waltzAppOverviewSection', require('./directives/app-overview-section'))
         .directive('waltzAppSelector', require('./directives/app-selector'))
         .directive('waltzAppTable', require('./directives/app-table'))
-        .directive('waltzAppsByInvestmentPie', require('./directives/apps-by-investment-pie'))
-        .directive('waltzAppsByLifecyclePhasePie', require('./directives/apps-by-lifecycle-phase-pie'))
         .directive('waltzAssetCodeExplorer', require('./directives/asset-code-explorer'))
         .directive('waltzBasicAppSelector', require('./directives/basic-app-selector'));
 
     module
+        .component('waltzAppsByInvestmentPie', require('./components/apps-by-investment-pie'))
+        .component('waltzAppsByLifecyclePhasePie', require('./components/apps-by-lifecycle-phase-pie'))
         .component('waltzAppSummary', require('./components/app-summary'));
 };