Merge pull request #324 from IgniteUI/IGanchev/chart-templates

Adding samples.

templates/angular/igx-ts/bullet-graph/default/files/src/app/__path__/__name__.component.css

@@ -0,0 +1,26 @@
+.sample-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.buttons-container {
+  display: flex;
+  margin-bottom: 5px;
+}
+
+.sample-button {
+  margin: 3px;
+  flex-grow: 1;
+  height: 30px;
+  font: 12px Titillium Web, sans-serif;
+  min-width:5.5rem;
+  height:2.25rem;
+  font-size:.875rem;
+  font-weight:600;
+  line-height:1;
+  text-align:center;
+  border:none;
+  border-radius:2px;
+  text-transform:uppercase;
+  cursor:pointer;
+}

templates/angular/igx-ts/bullet-graph/default/files/src/app/__path__/__name__.component.html

@@ -0,0 +1,49 @@
+<div igxLayout igxLayoutDir="columns" igxLayoutItemAlign="center">
+  <p>You can read more about configuring the bullet graph component in the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/bulletgraph.html" target="_blank"> official documentation page.
+    </a>
+  </p>
+  <div class="sample-container">
+    <div class="buttons-container">
+      <button igxButton="raised" (click)="AnimateToGauge1()"
+          igxButtonColor="black"
+          igxButtonBackground="#e2e2e2"
+          class="sample-button">Gauge Animation #1</button>
+      <button igxButton="raised" (click)="AnimateToGauge2()"
+          igxButtonColor="black"
+          igxButtonBackground="#e2e2e2"
+          class="sample-button">Gauge Animation #2</button>
+      <button igxButton="raised" (click)="AnimateToGauge3()"
+          igxButtonColor="black"
+          igxButtonBackground="#e2e2e2"
+          class="sample-button">Gauge Animation #3</button>
+    </div>
+
+    <div class="sample-control">
+      <!-- Note the bullet graph requires settings only for
+      minimumValue, maximumValue, and value, targetValue properties.
+      All other properties are optional and listed here
+      for demonstration purpose only -->
+      <igx-bullet-graph
+        #bulletGraph
+        height="80px"
+        width="100%"
+        minimumValue=0
+        maximumValue=120
+        valueBrush="#4286f4"
+        value=70
+        targetValueBrush="#4286f4"
+        targetValue=90
+        targetValueBreadth=10
+        interval=10
+        labelInterval=10
+        labelExtent=0.02
+        rangeBrushes ="#FF9800, #F96232, #C62828"
+        rangeOutlines="#FF9800, #F96232, #C62828"
+        scaleBackgroundThickness=0
+        scaleBackgroundBrush="#dbdbdb"
+        scaleBackgroundOutline="gray">
+      </igx-bullet-graph>
+    </div>
+  </div>
+</div>

templates/angular/igx-ts/bullet-graph/default/files/src/app/__path__/__name__.component.spec.ts

@@ -0,0 +1,27 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { $(ClassName)Component } from './$(filePrefix).component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxBulletGraphModule } from 'igniteui-angular-gauges/ES5/igx-bullet-graph-module';
+
+describe('$(ClassName)Component', () => {
+  let component: $(ClassName)Component;
+  let fixture: ComponentFixture<$(ClassName)Component>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [$(ClassName)Component],
+      imports: [IgxBulletGraphModule, NoopAnimationsModule]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent($(ClassName)Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

templates/angular/igx-ts/bullet-graph/default/files/src/app/__path__/__name__.component.ts

@@ -0,0 +1,235 @@
+
+import { AfterViewInit, Component, ViewEncapsulation, ViewChild } from "@angular/core";
+import { IgxLinearGraphRangeComponent } from "igniteui-angular-gauges/ES5/igx-linear-graph-range-component";
+import { IgxBulletGraphComponent } from "igniteui-angular-gauges/ES5/igx-bullet-graph-component";
+
+@Component({
+  selector: "app-$(filePrefix)",
+  templateUrl: "./$(filePrefix).component.html",
+  styleUrls: ["./$(filePrefix).component.css"],
+  encapsulation: ViewEncapsulation.None
+})
+export class $(ClassName)Component implements AfterViewInit {
+
+  @ViewChild("bulletGraph")
+  public bulletGraph: IgxBulletGraphComponent;
+
+  public ngAfterViewInit(): void {
+
+    // enabling animation duration (in milliseconds)
+    this.bulletGraph.transitionDuration = 500;
+    this.AnimateToGauge3();
+  }
+
+  public AnimateToGauge3(): void {
+
+    this.bulletGraph.minimumValue = 0;
+    this.bulletGraph.maximumValue = 120;
+    this.bulletGraph.value = 70;
+    this.bulletGraph.interval = 10;
+
+    // setting appearance of labels
+    this.bulletGraph.labelInterval = 10;
+    this.bulletGraph.labelExtent = 0.02;
+
+    // setting custom appearance of performance bar
+    this.bulletGraph.valueInnerExtent = 0.5;
+    this.bulletGraph.valueOuterExtent = 0.7;
+    this.bulletGraph.valueBrush = "#000000";
+
+    // setting custom appearance of target bar
+    this.bulletGraph.targetValueBrush = "#000000";
+    this.bulletGraph.targetValueBreadth = 10;
+    this.bulletGraph.targetValue = 90;
+
+    // setting appearance of major/minor ticks
+    this.bulletGraph.minorTickCount = 5;
+    this.bulletGraph.minorTickEndExtent = 0.10;
+    this.bulletGraph.minorTickStartExtent = 0.20;
+    this.bulletGraph.tickStartExtent = 0.20;
+    this.bulletGraph.tickEndExtent = 0.05;
+    this.bulletGraph.tickStrokeThickness = 2;
+
+    // setting custom gauge ranges
+    const range1 = new IgxLinearGraphRangeComponent();
+    range1.startValue = 0;
+    range1.endValue = 40;
+    const range2 = new IgxLinearGraphRangeComponent();
+    range2.startValue = 40;
+    range2.endValue = 80;
+    const range3 = new IgxLinearGraphRangeComponent();
+    range3.startValue = 80;
+    range3.endValue = 120;
+
+    this.bulletGraph.rangeBrushes  = [ "#FF9800", "#F96232", "#C62828"];
+    this.bulletGraph.rangeOutlines = [ "#FF9800", "#F96232", "#C62828"];
+    this.bulletGraph.ranges.clear();
+    this.bulletGraph.ranges.add(range1);
+    this.bulletGraph.ranges.add(range2);
+    this.bulletGraph.ranges.add(range3);
+
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.bulletGraph.ranges.count; i++) {
+      const range = this.bulletGraph.ranges.item(i);
+      range.innerStartExtent = 0.2;
+      range.innerEndExtent = 0.2;
+      range.outerStartExtent = 0.95;
+      range.outerEndExtent = 0.95;
+    }
+
+    // setting extent of gauge scale
+    this.bulletGraph.scaleBackgroundThickness = 0.5;
+    this.bulletGraph.scaleBackgroundBrush = "#dbdbdb";
+    this.bulletGraph.scaleBackgroundOutline = "gray";
+    this.bulletGraph.scaleStartExtent = 0.05;
+    this.bulletGraph.scaleEndExtent = 0.95;
+    this.bulletGraph.scaleBackgroundThickness = 0;
+
+    // setting appearance of backing fill and outline
+    this.bulletGraph.backingBrush = "#f7f7f7";
+    this.bulletGraph.backingOutline = "#d1d1d1";
+    this.bulletGraph.backingStrokeThickness = 0;
+
+  }
+
+  public AnimateToGauge2(): void {
+
+    this.bulletGraph.minimumValue = 100;
+    this.bulletGraph.maximumValue = 200;
+    this.bulletGraph.value = 120;
+    this.bulletGraph.interval = 10;
+
+    // setting appearance of labels
+    this.bulletGraph.labelInterval = 10;
+    this.bulletGraph.labelExtent = 0.02;
+
+    // setting custom appearance of performance bar
+    this.bulletGraph.valueInnerExtent = 0.5;
+    this.bulletGraph.valueOuterExtent = 0.7;
+    this.bulletGraph.valueBrush = "#000000";
+
+    // setting custom appearance of target bar
+    this.bulletGraph.targetValueBrush = "#000000";
+    this.bulletGraph.targetValueBreadth = 10;
+    this.bulletGraph.targetValue = 180;
+
+    // setting appearance of major/minor ticks
+    this.bulletGraph.minorTickCount = 5;
+    this.bulletGraph.minorTickEndExtent = 0.10;
+    this.bulletGraph.minorTickStartExtent = 0.20;
+    this.bulletGraph.tickStartExtent = 0.20;
+    this.bulletGraph.tickEndExtent = 0.05;
+    this.bulletGraph.tickStrokeThickness = 2;
+
+    // setting custom gauge ranges
+    const range1 = new IgxLinearGraphRangeComponent();
+    range1.startValue = 100;
+    range1.endValue = 125;
+    const range2 = new IgxLinearGraphRangeComponent();
+    range2.startValue = 125;
+    range2.endValue = 150;
+    const range3 = new IgxLinearGraphRangeComponent();
+    range3.startValue = 150;
+    range3.endValue = 175;
+    const range4 = new IgxLinearGraphRangeComponent();
+    range4.startValue = 175;
+    range4.endValue = 200;
+
+    this.bulletGraph.rangeBrushes  = [ "#0078C8", "#0099FF", "#21A7FF", "#4FB9FF"];
+    this.bulletGraph.rangeOutlines = [ "#0078C8", "#0099FF", "#21A7FF", "#4FB9FF"];
+    this.bulletGraph.ranges.clear();
+    this.bulletGraph.ranges.add(range1);
+    this.bulletGraph.ranges.add(range2);
+    this.bulletGraph.ranges.add(range3);
+    this.bulletGraph.ranges.add(range4);
+
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.bulletGraph.ranges.count; i++) {
+      const range = this.bulletGraph.ranges.item(i);
+      range.innerStartExtent = 0.2;
+      range.innerEndExtent = 0.2;
+      range.outerStartExtent = 0.95;
+      range.outerEndExtent = 0.95;
+    }
+
+    // setting extent of gauge scale
+    this.bulletGraph.scaleBackgroundThickness = 0.5;
+    this.bulletGraph.scaleBackgroundBrush = "#dbdbdb";
+    this.bulletGraph.scaleBackgroundOutline = "gray";
+    this.bulletGraph.scaleStartExtent = 0.05;
+    this.bulletGraph.scaleEndExtent = 0.95;
+    this.bulletGraph.scaleBackgroundThickness = 0;
+
+    // setting appearance of backing fill and outline
+    this.bulletGraph.backingBrush = "#f7f7f7";
+    this.bulletGraph.backingOutline = "#d1d1d1";
+    this.bulletGraph.backingStrokeThickness = 0;
+  }
+
+  public AnimateToGauge1(): void {
+
+    this.bulletGraph.minimumValue = 0;
+    this.bulletGraph.maximumValue = 80;
+    this.bulletGraph.value = 70;
+    this.bulletGraph.interval = 20;
+
+    // setting appearance of labels
+    this.bulletGraph.labelInterval = 20;
+    this.bulletGraph.labelExtent = 0.02;
+
+    // setting custom appearance of performance bar
+    this.bulletGraph.valueInnerExtent = 0.5;
+    this.bulletGraph.valueOuterExtent = 0.7;
+    this.bulletGraph.valueBrush = "#000000";
+
+    // setting custom appearance of target bar
+    this.bulletGraph.targetValueBrush = "#000000";
+    this.bulletGraph.targetValueBreadth = 10;
+    this.bulletGraph.targetValue = 60;
+
+    // setting appearance of major/minor ticks
+    this.bulletGraph.minorTickCount = 5;
+    this.bulletGraph.minorTickEndExtent = 0.10;
+    this.bulletGraph.minorTickStartExtent = 0.20;
+    this.bulletGraph.tickStartExtent = 0.20;
+    this.bulletGraph.tickEndExtent = 0.05;
+    this.bulletGraph.tickStrokeThickness = 2;
+
+    // setting custom gauge ranges
+    const range1 = new IgxLinearGraphRangeComponent();
+    range1.startValue = 0;
+    range1.endValue = 40;
+    const range2 = new IgxLinearGraphRangeComponent();
+    range2.startValue = 40;
+    range2.endValue = 80;
+
+    this.bulletGraph.rangeBrushes  = [ "#a4bd29", "#F86232" ];
+    this.bulletGraph.rangeOutlines = [ "#a4bd29", "#F86232" ];
+    this.bulletGraph.ranges.clear();
+    this.bulletGraph.ranges.add(range1);
+    this.bulletGraph.ranges.add(range2);
+
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.bulletGraph.ranges.count; i++) {
+      const range = this.bulletGraph.ranges.item(i);
+      range.innerStartExtent = 0.2;
+      range.innerEndExtent = 0.2;
+      range.outerStartExtent = 0.95;
+      range.outerEndExtent = 0.95;
+    }
+
+    // setting extent of gauge scale
+    this.bulletGraph.scaleBackgroundThickness = 0.5;
+    this.bulletGraph.scaleBackgroundBrush = "#dbdbdb";
+    this.bulletGraph.scaleBackgroundOutline = "gray";
+    this.bulletGraph.scaleStartExtent = 0.05;
+    this.bulletGraph.scaleEndExtent = 0.95;
+    this.bulletGraph.scaleBackgroundThickness = 0;
+
+    // setting appearance of backing fill and outline
+    this.bulletGraph.backingBrush = "#f7f7f7";
+    this.bulletGraph.backingOutline = "#d1d1d1";
+    this.bulletGraph.backingStrokeThickness = 0;
+
+  }
+}

templates/angular/igx-ts/bullet-graph/default/index.ts

@@ -0,0 +1,20 @@
+import { IgniteUIForAngularTemplate } from "../../../../../lib/templates/IgniteUIForAngularTemplate";
+
+class IgxBulletGraphTemplate extends IgniteUIForAngularTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Bullet Graph"];
+		this.controlGroup = "Gauges";
+		this.listInComponentTemplates = true;
+		this.id = "bullet-graph";
+		this.projectType = "igx-ts";
+		this.name = "Bullet Graph";
+		this.description = "Graph with different animations.";
+		this.dependencies = [{
+			from: "igniteui-angular-gauges/ES5/igx-bullet-graph-module",
+			import: ["IgxBulletGraphModule"]
+		}];
+		this.packages = ["tslib@1.7.1", "igniteui-angular-core@6.1.1", "igniteui-angular-gauges@6.1.1"];
+	}
+}
+module.exports = new IgxBulletGraphTemplate();

templates/angular/igx-ts/bullet-graph/index.ts

@@ -0,0 +1,14 @@
+
+import { BaseComponent } from "../../../../lib/BaseComponent";
+
+class IgxBulletGraphAnimationComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Bullet Graph";
+		this.group = "Gauges";
+	}
+}
+module.exports = new IgxBulletGraphAnimationComponent();