consumerportal/js/src/controllers/generic/gauge.ts

mydna Custimised for you

/// <reference path="../../includes.ts" />

module app {

    class Controller {
        public static $inject = ["$scope", "$rootScope"];
        public $onInit: Function;
        public $onChanges: Function;
        public open: boolean = false;

        constructor(
            private $scope:any,
            private $rootScope: any) {
            this.$onInit = () => {

                $scope.$on('tabsOpen', (ev: any, val: any) => {
                    if (val !== 'reportnav') {
                        this.open = false;
                    }
                })
            };

            this.$onChanges = (values: any) => {
            };
        }

        toggleTabs() {
            this.open = !this.open;
            if (this.open) {
                this.$rootScope.$broadcast('tabsOpen', 'reportnav');
            }
        }
    }

    class Gauge {
        public bindings: any = {
            name: '<',
            pc: '<',
            genes: '<',
            leftLabel: '<',
            rightLabel: '<',
            topLabel: '<',
            caption: '<',
            result: '<',
            addClass: '<'
        };
        public template: string = `
            <div class="gauge">
                <div class="title" ng-bind="vm.name"></div>
                <div class="genes"><span>Genes:&nbsp;</span><span ng-bind="vm.genes"></span></div>
                <div class="caption"><div ng-bind="vm.caption"></div></div>
                <div class="labels"><div class="solo" ng-bind="vm.topLabel"></div></div>
                <div class="graphic">
                    <div></div>
                    <div ng-style="{transform: 'rotate(-' +(1 + ((100 - vm.pc) / 200)) + 'turn)'}" ng-class="vm.addClass"></div>
                    <div></div>
                </div>
                <div class="labels"><div ng-bind="vm.leftLabel"></div><div ng-bind="vm.rightLabel"></div></div>
                <div class="result"><div ng-bind="vm.result"></div></div>
            </div>
            
        `;
        public controller: any = Controller;
        public controllerAs: string = 'vm';

        constructor() {
        }

    }

    angular.module('app').component('gauge', new Gauge());
}