@mxtommy/kip 1.3.0 → 2.0.0

package/src/app/gauge-steel/gauge-steel.component.ts

@@ -1,282 +0,0 @@
-import { Component, Input, AfterViewInit, OnInit, OnChanges, SimpleChanges, ViewChild, ElementRef } from '@angular/core';
-import { ResizedEvent } from 'angular-resize-event';
-
-declare var steelseries: any; // 3rd party
-
-export const SteelBackgroundColors = {
-  'darkGray': steelseries.BackgroundColor.DARK_GRAY,
-  'satinGray': steelseries.BackgroundColor.SATIN_GRAY,
-  'lightGray': steelseries.BackgroundColor.LIGHT_GRAY,
-  'white': steelseries.BackgroundColor.WHITE,
-  'black': steelseries.BackgroundColor.BLACK,
-  'beige': steelseries.BackgroundColor.BEIGE,
-  'brown': steelseries.BackgroundColor.BROWN,
-  'red': steelseries.BackgroundColor.RED,
-  'green': steelseries.BackgroundColor.GREEN,
-  'blue': steelseries.BackgroundColor.BLUE,
-  'anthracite': steelseries.BackgroundColor.ANTHRACITE,
-  'mud': steelseries.BackgroundColor.MUD,
-  'punchedSheet': steelseries.BackgroundColor.PUNCHED_SHEET,
-  'carbon': steelseries.BackgroundColor.CARBON,
-  'stainless': steelseries.BackgroundColor.STAINLESS,
-  'brushedMetal': steelseries.BackgroundColor.BRUSHED_METAL,
-  'brushedStainless': steelseries.BackgroundColor.BRUSHED_STAINLESS,
-  'turned': steelseries.BackgroundColor.TURNED
-}
-
-export const SteelFrameColors = {
-'blackMetal': steelseries.FrameDesign.BLACK_METAL,
-'metal': steelseries.FrameDesign.METAL,
-'shinyMetal': steelseries.FrameDesign.SHINY_METAL,
-'brass': steelseries.FrameDesign.BRASS,
-'steel': steelseries.FrameDesign.STEEL,
-'chrome': steelseries.FrameDesign.CHROME,
-'gold': steelseries.FrameDesign.GOLD,
-'anthracite': steelseries.FrameDesign.ANTHRACITE,
-'tiltedGray': steelseries.FrameDesign.TILTED_GRAY,
-'tiltedBlack': steelseries.FrameDesign.TILTED_BLACK,
-'glossyMetal': steelseries.FrameDesign.GLOSSY_METAL
-}
-
-
-@Component({
-  selector: 'gauge-steel',
-  templateUrl: './gauge-steel.component.html',
-  styleUrls: ['./gauge-steel.component.css']
-})
-export class GaugeSteelComponent implements OnInit, AfterViewInit, OnChanges {
-
-  @ViewChild('wrapperDiv', {static: true, read: ElementRef}) wrapperDiv: ElementRef;
-
-  @Input('widgetUUID') widgetUUID: string;
-  @Input('gaugeType') gaugeType: string; // linear or radial
-  @Input('barGauge') barGauge: boolean;
-
-  @Input('radialSize') radialSize?: string;
-
-  @Input('backgroundColor') backgroundColor?: string;
-  @Input('frameColor') frameColor: string;
-
-  @Input('minValue') minValue: number;
-  @Input('maxValue') maxValue: number;
-
-  @Input('zones') zones: Array<{ low: number; high: number; state: string}>;
-
-  @Input('title') title: string;
-  @Input('units') units: string;
-
-  @Input('value') value: number;
-  gaugeWidth: number = 0;
-  gaugeHeight: number = 0;
-  isInResizeWindow: boolean = false;
-  gaugeStarted: boolean = false;
-
-  constructor() { }
-
-  gauge;
-
-  gaugeOptions = {};
-
-  // common options for both radial and linear
-
-  sections;
-
-
-  ngOnInit() {
-
-  }
-
-  ngAfterViewInit() {
-    if (!this.gaugeType) { this.gaugeType = 'radial'; }
-  }
-
-  buildOptions() {
-    this.gaugeOptions = {};
-
-    //size
-    if (this.gaugeType == 'radial') {
-      this.gaugeOptions['size'] = Math.min(this.gaugeHeight, this.gaugeWidth); // radial takes only size as both the same
-    } else {
-      this.gaugeOptions['width'] = this.gaugeWidth;
-      this.gaugeOptions['height'] = this.gaugeHeight;
-    }
-
-    //minMax
-    this.gaugeOptions['minValue'] = this.minValue;
-    this.gaugeOptions['maxValue'] = this.maxValue;
-
-    //labels
-    this.gaugeOptions['titleString'] = this.title;
-    this.gaugeOptions['unitString'] = this.units;
-
-    // Radial Arc size
-    if (this.gaugeType == 'radial') {
-      switch(this.radialSize) {
-        case 'quarter':
-          this.gaugeOptions['gaugeType'] = steelseries.GaugeType.TYPE1;
-          break;
-        case 'half':
-          this.gaugeOptions['gaugeType'] = steelseries.GaugeType.TYPE2;
-          break;
-        case 'three-quarter':
-          this.gaugeOptions['gaugeType'] = steelseries.GaugeType.TYPE3;
-          break;
-        case 'full':
-        default:
-          this.gaugeOptions['gaugeType'] = steelseries.GaugeType.TYPE4;
-
-
-      }
-    }
-
-    // Zones
-    // Define some sections
-    if (this.zones) {
-      let sections = [];
-      let areas = []
-      for (let i=0;i < this.zones.length; i++) {
-        switch (this.zones[i].state) {
-          case 'good':
-            sections.push(steelseries.Section(this.zones[i].low, this.zones[i].high, 'rgba(0, 220, 0, 0.3)'));
-            break;
-          case 'warn':
-            sections.push(steelseries.Section(this.zones[i].low, this.zones[i].high, 'rgba(220, 220, 0, 0.3)'));
-            break;
-          case 'alert':
-            if (this.gaugeType == 'radial' && (!this.barGauge)) {
-              areas.push(steelseries.Section(this.zones[i].low, this.zones[i].high, 'rgba(220, 0, 0, 0.3)'));
-            } else {
-              sections.push(steelseries.Section(this.zones[i].low, this.zones[i].high, 'rgba(220, 0, 0, 0.3)'));
-            }
-        }
-      }
-
-      this.gaugeOptions['section'] = sections;
-      this.gaugeOptions['area'] = areas;
-      this.gaugeOptions['useSectionColors'] = true;
-    }
-
-
-    //Colors
-    if (SteelBackgroundColors[this.backgroundColor]) {
-      this.gaugeOptions['backgroundColor'] = SteelBackgroundColors[this.backgroundColor];
-    }
-    if (SteelFrameColors[this.frameColor]) {
-      this.gaugeOptions['frameDesign'] = SteelFrameColors[this.frameColor];
-    }
-    if (this.barGauge) {
-      this.gaugeOptions['valueColor'] = steelseries.ColorDef.GREEN;
-    }
-
-
-    //defaults
-    this.gaugeOptions['lcdVisible'] = true;
-    this.gaugeOptions['thresholdVisible'] = false;
-    this.gaugeOptions['threshold'] = this.maxValue;
-    this.gaugeOptions['ledVisible'] = false;
-  }
-
-  startGauge() {
-    this.gaugeStarted = true;
-    this.buildOptions();
-        // Initialzing gauges
-    if (this.gaugeType == 'radial') {
-      if (this.barGauge) {
-        this.gauge = new steelseries.RadialBargraph(this.widgetUUID, this.gaugeOptions);
-      } else {
-        this.gauge = new steelseries.Radial(this.widgetUUID, this.gaugeOptions);
-      }
-    } else if (this.gaugeType == 'linear') {
-       if (this.barGauge) {
-        this.gauge = new steelseries.LinearBargraph(this.widgetUUID, this.gaugeOptions);
-      } else {
-        this.gauge = new steelseries.Linear(this.widgetUUID, this.gaugeOptions);
-      }
-    }
-
-  }
-
-  onResized(event: ResizedEvent) {
-    if (event.newRect.height < 50) {
-      return;
-    }
-    if (event.newRect.width < 50) {
-      return;
-    }
-    if (!this.isInResizeWindow) {
-      this.isInResizeWindow = true;
-
-      setTimeout(() => {
-        let rect = this.wrapperDiv.nativeElement.getBoundingClientRect();
-        this.gaugeWidth = rect.width;
-        this.gaugeHeight = rect.height;
-        this.isInResizeWindow = false;
-        this.startGauge();
-         }, 1000);
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (!this.gaugeStarted) { return; }
-
-    if (changes.value) {
-      if (! changes.value.firstChange) {
-        this.gauge.setValueAnimated(changes.value.currentValue);
-      }
-    }
-
-    if (changes.gaugeType) {
-      if ( !changes.gaugeType.firstChange) {
-        this.startGauge();//reset
-      }
-    }
-
-    if (changes.barGauge) {
-      if ( !changes.barGauge.firstChange) {
-        this.startGauge();//reset
-      }
-    }
-
-    if (changes.title) {
-      if ( !changes.title.firstChange) {
-        this.startGauge();//reset
-      }
-    }
-
-    if (changes.units) {
-      if ( !changes.units.firstChange) {
-        this.startGauge();//reset
-      }
-    }
-    if (changes.minValue) {
-      if ( !changes.minValue.firstChange) {
-        this.startGauge();//reset
-      }
-    }
-    if (changes.maxValue) {
-      if ( !changes.maxValue.firstChange) {
-        this.startGauge();//reset
-      }
-    }
-
-    if (changes.radialSize) {
-      if ( !changes.radialSize.firstChange) {
-        this.startGauge();//reset
-      }
-    }
-
-    if (changes.backgroundColor) {
-      if ( !changes.backgroundColor.firstChange) {
-        this.startGauge();//reset
-      }
-    }
-
-    if (changes.frameColor) {
-      if ( !changes.frameColor.firstChange) {
-        this.startGauge();//reset
-      }
-    }
-
-  }
-
-}

package/src/app/gauges-module/base-gauge.ts

@@ -1,301 +0,0 @@
-/*!
- * The MIT License (MIT)
- *
- * Copyright (c) 2017 Vlad Martynenko <vladimir.martynenko.work@gmail.com>
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import { ViewChild, Input, NgZone, ElementRef, OnInit, AfterViewInit, Directive } from '@angular/core';
-import * as CanvasGauges from 'canvas-gauges';
-import * as Rx from 'rx-dom-html';
-
-
-
-// String utils
-const toCamelCase = (str: string) => str.replace(/(\-\w)/g, (matches) => matches[1].toUpperCase());
-
-const toKebabCase = (str: string) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-
-const attributeName2PropertyName = (attrName: string) => toCamelCase(attrName);
-
-
-
-
-/**
- * Base gauge component for the Gauges rendering
- * T - Type of the Gauge to be rendered (Currently RadialGauge, LinearGauge from the original library)
- * T2 - Type of config options used by the particular gauge (RadialGaugeOptions, LinearGaugeOptions)
- */
-@Directive()
-export abstract class BaseGauge<T extends CanvasGauges.BaseGauge, T2 extends CanvasGauges.GenericOptions>
-    implements OnInit, AfterViewInit {
-
-    /**
-     * Canvas element on the template used by the library to draw gauge element
-     */
-    @ViewChild('gauge', { static: true })
-    protected canvas: ElementRef;
-
-    /**
-     * A gauge instance responsible for rendering and updates on the canvas.
-     * Subclasses should initialize in their ngOnInit implementation.
-     */
-    protected gauge: T;
-
-
-    /**
-     * Flag indicating that OnViewInit life-cycle has completed
-     */
-    private isInited = false;
-
-    /**
-     * value property of gauge prior to component view initialization
-     */
-    private preInitValue: number;
-
-    /**
-     * options property of gauge prior to component view initialization
-     */
-    private preInitOptions: T2;
-
-
-    /**
-     * Listen for attribute changes, i.e., options properties that are stored
-     * as attributes on this ElementRef
-     */
-    private domListener: MutationObserver;
-
-
-    /**
-     *
-     * @param el - reference to the element of the whole component, used to scrape options declared on the component itself
-     * @param zone - required to redraw gauge outside of Angular, due to animation lags caused by the ovewritten function of the ngZone
-     */
-    constructor(private el: ElementRef, public zone: NgZone) {
-    }
-
-
-    /**
-     * Subclasses should instantiate the CanvasGauge object in the child component
-     */
-    abstract ngOnInit(): void;
-
-
-    /**
-     * Returns gauges properties as an options object.
-     * Option properties consist of the attribute-based properties and those
-     * explicitly set.
-     * @returns <T2>
-     */
-    public get options(): T2 {
-
-        const options = {} as T2;
-        options.renderTo = this.canvas.nativeElement;
-
-        // Map attribute-based options onto options.
-        // Requries converting kebab style attribute names to camelCase property names
-        for (const attr of this.el.nativeElement.attributes) {
-            const prop = attributeName2PropertyName(attr.name);
-            options[prop] = CanvasGauges.DomObserver.parse(attr.value);
-        }
-
-        // merge preOptons with attribute-based properties
-        // tslint:disable-next-line:forin
-        for (const prop in this.preInitOptions) {
-            options[prop] = this.preInitOptions[prop];
-        }
-
-        // clear the preInitOptions as they have already been merged
-        // with the attribute-based properties
-        if (this.isInited) {
-            this.preInitOptions = null;
-        }
-
-        return options;
-    }
-
-
-    /**
-     * Assign gauge options at anytime in the lifecycle.
-     * @param newOptions - assign the style and size properties
-     */
-    @Input()
-    public set options(newOptions: T2) {
-
-        // cache newOptions as preInitOptions until gauge is ready
-        if (!this.isInited) {
-            this.preInitOptions = newOptions;
-            return;
-        }
-
-        this.update(newOptions);
-    }
-
-
-    /**
-     * Assign the value of the gauge visual indicator such as a needle or pointer
-     * @param newValue  the guage new value
-     */
-    @Input()
-    public set value(newValue: number) {
-
-        // case new gauge value as preInitValue until the gauge is ready
-        if (!this.isInited) {
-            this.preInitValue = newValue;
-            return;
-        }
-
-        this.zone.runOutsideAngular(() => {
-            this.gauge.value = newValue;
-        });
-    }
-
-
-    /**
-     * Update the gauge options. Do not use until after OnViewInit() before using.
-     *
-     * Special implementation note - options.properties are maintained as
-     * attribute name->value on this component's elementRef.  Thus this method
-     * maps each newOptions property onto the property's corresponding attribute.
-     * The attribute update triggers a DOM mutation event which  "this" listens for.
-     * See #listenForDOMEvents()
-     *
-     * @param newOptions  - the options to update the gauge
-     */
-    public update(newOptions: T2 | {}) {
-
-        // map all options onto this element's attributes
-        // Then attribute changes will be detected and pushed to the gauge.update()
-        if (!newOptions) { return; }
-
-        // tslint:disable-next-line:forin
-        for (const prop in newOptions) {
-            const val = newOptions[prop].toString();
-
-            if (prop === 'value') {
-                // short circuit the value property update by calling
-                // the gauge.value api directly for efficient animated update
-                this.value = CanvasGauges.DomObserver.parse(val);
-            } else {
-                const attrName = toKebabCase(prop);
-                this.el.nativeElement.setAttribute(attrName, val);
-            }
-        }
-    }
-
-
-    /**
-     * Perform gauge initialization.
-     * Subclasses that override this method must this super version
-     * for proper operation.
-     */
-    public ngAfterViewInit() {
-
-        // initial update of gauge properties
-        this.initGauge();
-
-        this.listenForDOMEvents();
-
-        this.isInited = true;
-
-        if (this.preInitValue) {
-          this.value = this.preInitValue;
-        }
-    }
-
-
-    /**
-     * Listen for attribute-change events that are created when updating
-     * the options of this gauge.
-     */
-    protected listenForDOMEvents() {
-        // Listen to gauge element for attribute changes
-        // Convert all changed attribtues into a GenericOptions or subclass
-        // Update the gauge with the new options.
-        this.domListener =
-            Rx.DOM.fromMutationObserver(this.el.nativeElement, { attributes: true }).
-                subscribe(changes => {
-                    const newOptions = {} as T2;
-                    changes.forEach(change => {
-                        if ('attributes' === change.type) {
-                            // console.log('DOM, change', change.attributeName);
-                            newOptions[attributeName2PropertyName(change.attributeName)] =
-                                CanvasGauges.DomObserver.parse(
-                                    this.el.nativeElement.getAttribute(change.attributeName));
-                        }
-                    });
-
-                    this.basicUpdate(newOptions);
-                });
-    }
-
-
-    /**
-     * Discontinue listening for attribute change events.
-     */
-    protected stopListeningForDOMEvents() {
-        if (this.domListener) {
-            this.domListener.disconnect();
-            this.domListener = null;
-        }
-    }
-
-
-    /**
-     * Initalize the gauge with all options defined by attributes and
-     * parent component options.
-     */
-    protected initGauge() {
-        const options = this.options;
-
-        // init options.renderTo if needed
-        if (!options.hasOwnProperty('renderTo') || !options.renderTo) {
-            options.renderTo = this.canvas.nativeElement;
-        }
-
-        this.basicUpdate(options);
-    }
-
-
-    /**
-     * Performs the gauge update using the current options
-     * @param options  The options for the guage
-     */
-    protected basicUpdate(options: T2) {
-
-        // treat the value property special and update it through the
-        // value getter.
-        if (typeof options.value === 'number') {
-
-            // use gauge api directly for most efficient update method
-            this.value = options.value;
-
-            // filter value property from options to avoid redundant
-            // processing by gauge
-            delete options.value;
-        }
-
-        // do nothing if no option properties to update
-        if (Object.keys(options).length) {
-            this.gauge.update(options);
-        }
-    }
-
-}

package/src/app/gauges-module/gauges.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { LinearGauge } from './linear-gauge';
-import { RadialGauge } from './radial-gauge';
-
-@NgModule({
-  declarations: [
-    LinearGauge,
-    RadialGauge],
-  imports: [
-  ],
-  exports: [
-    LinearGauge,
-    RadialGauge]
-})
-export class GaugesModule { }
-
-// code from module https://github.com/biacsics/ng-canvas-gauges/blob/master/projects/ng-canvas-gauges

package/src/app/gauges-module/linear-gauge.ts

@@ -1,50 +0,0 @@
-/*!
- * The MIT License (MIT)
- *
- * Copyright (c) 2017 Vlad Martynenko <vladimir.martynenko.work@gmail.com>
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import {Component, NgZone, ElementRef, OnInit} from '@angular/core';
-import {BaseGauge} from './base-gauge';
-import * as CanvasGauges from 'canvas-gauges';
-
-export { LinearGaugeOptions } from 'canvas-gauges';
-
-/**
- * Implements Linear Gauge from the original library
- */
-@Component({
-    // tslint:disable-next-line:component-selector
-    selector: 'linear-gauge',
-    template: '<canvas #gauge></canvas>'
-})
-// tslint:disable-next-line:component-class-suffix
-export class LinearGauge extends BaseGauge<CanvasGauges.LinearGauge, CanvasGauges.LinearGaugeOptions> implements OnInit {
-
-    constructor(el: ElementRef, zone: NgZone) {
-        super(el, zone);
-    }
-
-
-    ngOnInit(): void {
-        this.gauge = new CanvasGauges.LinearGauge(this.options).draw();
-    }
-}

package/src/app/gauges-module/radial-gauge.ts

@@ -1,48 +0,0 @@
-/*!
- * The MIT License (MIT)
- *
- * Copyright (c) 2017 Vlad Martynenko <vladimir.martynenko.work@gmail.com>
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import { Component, NgZone, ElementRef, OnInit } from '@angular/core';
-import { BaseGauge } from './base-gauge';
-import * as CanvasGauges from 'canvas-gauges';
-
-export { RadialGaugeOptions } from 'canvas-gauges';
-
-/**
- * Implements Radial Gauge from the original library
- */
-@Component({
-    // tslint:disable-next-line:component-selector
-    selector: 'radial-gauge',
-    template: '<canvas #gauge></canvas>'
-})
-// tslint:disable-next-line:component-class-suffix
-export class RadialGauge extends BaseGauge<CanvasGauges.RadialGauge, CanvasGauges.RadialGaugeOptions> implements OnInit {
-    constructor(el: ElementRef, zone: NgZone) {
-        super(el, zone);
-    }
-
-    ngOnInit() {
-        this.gauge = new CanvasGauges.RadialGauge(this.options).draw();
-    }
-}