@carbon/charts-angular 0.59.0-beta.0 → 1.0.3

package/src/circle-pack-chart.component.ts

@@ -1,34 +0,0 @@
-import {
-	Component,
-	AfterViewInit
-} from "@angular/core";
-
-import { BaseChart } from "./base-chart.component";
-
-import { CirclePackChart } from "@carbon/charts";
-
-/**
- * Wrapper around `BubbleChart` in carbon charts library
- *
- * Most functions just call their equivalent from the chart library.
- */
-@Component({
-	selector: "ibm-circle-pack-chart",
-	template: ``
-})
-export class CirclePackChartComponent extends BaseChart implements AfterViewInit {
-	/**
-	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
-	 */
-	ngAfterViewInit() {
-		this.chart = new CirclePackChart(
-			this.elementRef.nativeElement,
-			{
-				data: this.data,
-				options: this.options
-			}
-		);
-
-		Object.assign(this, this.chart);
-	}
-}

package/src/combo-chart.component.ts

@@ -1,33 +0,0 @@
-import {
-	Component,
-	AfterViewInit
-} from "@angular/core";
-
-import { BaseChart } from "./base-chart.component";
-import { ComboChart } from "@carbon/charts";
-
-/**
- * Wrapper around `ComboChart` in carbon charts library
- *
- * Most functions just call their equivalent from the chart library.
- */
-@Component({
-	selector: "ibm-combo-chart",
-	template: ``
-})
-export class ComboChartComponent extends BaseChart implements AfterViewInit {
-	/**
-	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
-	 */
-	ngAfterViewInit() {
-		this.chart = new ComboChart(
-			this.elementRef.nativeElement,
-			{
-				data: this.data,
-				options: this.options
-			}
-		);
-
-		Object.assign(this, this.chart);
-	}
-}

package/src/diagrams/card-node/card-node-column.component.ts

@@ -1,22 +0,0 @@
-import { Component, Input, HostBinding } from '@angular/core';
-import { carbonPrefix } from '../configs';
-
-@Component({
-	selector: 'ibm-diagram-card-node-column',
-	template: `
-		<xhtml:div>
-			<ng-content></ng-content>
-		</xhtml:div>
-	`,
-})
-export class CardNodeColumnComponent {
-	@Input() farsideColumn = false;
-
-	@HostBinding('class') get class() {
-		const farsideClassName = this.farsideColumn
-			? `${carbonPrefix}--cc--card-node__column--farside`
-			: '';
-
-		return `${carbonPrefix}--cc--card-node__column ${farsideClassName}`;
-	}
-}

package/src/diagrams/card-node/card-node-label.component.ts

@@ -1,15 +0,0 @@
-import { Component } from "@angular/core";
-import { carbonPrefix } from '../configs';
-
-@Component({
-	selector: "ibm-diagram-card-node-label",
-	template: `
-	<xhtml:label [ngClass]="namespace">
-		<ng-content></ng-content>
-	</xhtml:label>
-	`
-})
-
-export class CardNodeLabelComponent {
-	namespace = `${carbonPrefix}--cc--card-node__label`;
-}

package/src/diagrams/card-node/card-node-subtitle.component.ts

@@ -1,15 +0,0 @@
-import { Component } from "@angular/core";
-import { carbonPrefix } from '../configs';
-
-@Component({
-	selector: "ibm-diagram-card-node-subtitle",
-	template: `
-	<xhtml:div [ngClass]="namespace">
-		<ng-content></ng-content>
-	</xhtml:div>
-	`
-})
-
-export class CardNodeSubtitleComponent {
-	namespace = `${carbonPrefix}--cc--card-node__subtitle`;
-}

package/src/diagrams/card-node/card-node-title.component.ts

@@ -1,15 +0,0 @@
-import { Component } from "@angular/core";
-import { carbonPrefix } from '../configs';
-
-@Component({
-	selector: "ibm-diagram-card-node-title",
-	template: `
-	<xhtml:div [ngClass]="namespace">
-		<ng-content></ng-content>
-	</xhtml:div>
-	`
-})
-
-export class CardNodeTitleComponent {
-	namespace = `${carbonPrefix}--cc--card-node__title`;
-}

package/src/diagrams/card-node/card-node.component.ts

@@ -1,100 +0,0 @@
-import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
-import { carbonPrefix } from '../configs';
-
-@Component({
-	selector: 'ibm-diagram-card-node',
-	template: `
-		<ng-container [ngSwitch]="component">
-			<xhtml:div
-				*ngSwitchCase="'div'"
-				[ngClass]="[
-					namespace,
-					stacked ? namespace + '--stacked' : '',
-					namespace + '--' + component
-				]"
-				[ngStyle]="{
-					'border-color': color,
-					position: position
-				}"
-				(mouseenter)="mouseEnter.emit($event)"
-				(mouseover)="mouseOver.emit($event)"
-				(mouseout)="mouseOut.emit($event)"
-				(mouseleave)="mouseLeave.emit($event)"
-				(mousemove)="mouseMove.emit($event)"
-				tabindex="0"
-			>
-				<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
-			</xhtml:div>
-
-			<xhtml:button
-				*ngSwitchCase="'button'"
-				[ngClass]="[
-					namespace,
-					stacked ? namespace + '--stacked' : '',
-					namespace + '--' + component
-				]"
-				[ngStyle]="{
-					'border-color': color,
-					position: position
-				}"
-				(click)="click.emit($event)"
-				(mouseenter)="mouseEnter.emit($event)"
-				(mouseover)="mouseOver.emit($event)"
-				(mouseout)="mouseOut.emit($event)"
-				(mouseleave)="mouseLeave.emit($event)"
-				(mousemove)="mouseMove.emit($event)"
-				tabindex="0"
-			>
-				<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
-			</xhtml:button>
-
-			<xhtml:a
-				*ngSwitchCase="'a'"
-				[ngClass]="[
-					namespace,
-					stacked ? namespace + '--stacked' : '',
-					namespace + '--' + component
-				]"
-				[attr.href]="href"
-				[ngStyle]="{ 'border-color': color, position: position }"
-				(mouseenter)="mouseEnter.emit($event)"
-				(mouseover)="mouseOver.emit($event)"
-				(mouseout)="mouseOut.emit($event)"
-				(mouseleave)="mouseLeave.emit($event)"
-				(mousemove)="mouseMove.emit($event)"
-				tabindex="0"
-			>
-				<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
-			</xhtml:a>
-		</ng-container>
-		<ng-template #nodeTemplate>
-			<ng-content></ng-content>
-		</ng-template>
-	`,
-})
-export class CardNodeComponent implements OnInit {
-	@Input() as = 'div';
-	@Input() href: string = null;
-	@Input() color;
-	@Input() stacked;
-	@Input() position: string = 'static';
-
-	@Output() click: EventEmitter<any> = new EventEmitter<any>();
-	@Output() mouseEnter: EventEmitter<any> = new EventEmitter<any>();
-	@Output() mouseOver: EventEmitter<any> = new EventEmitter<any>();
-	@Output() mouseOut: EventEmitter<any> = new EventEmitter<any>();
-	@Output() mouseLeave: EventEmitter<any> = new EventEmitter<any>();
-	@Output() mouseMove: EventEmitter<any> = new EventEmitter<any>();
-
-	namespace = `${carbonPrefix}--cc--card-node`;
-
-	component = 'div';
-
-	ngOnInit() {
-		if (this.href) {
-			this.component = 'a';
-		} else {
-			this.component = this.as;
-		}
-	}
-}

package/src/diagrams/card-node/card-node.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { CardNodeComponent } from "./card-node.component";
-import { CardNodeColumnComponent } from "./card-node-column.component";
-import { CardNodeLabelComponent } from "./card-node-label.component";
-import { CardNodeSubtitleComponent } from "./card-node-subtitle.component";
-import { CardNodeTitleComponent } from "./card-node-title.component";
-export { CardNodeComponent,
-	CardNodeColumnComponent,
-	CardNodeLabelComponent,
-	CardNodeSubtitleComponent,
-	CardNodeTitleComponent };
-@NgModule({
-	declarations: [CardNodeComponent, CardNodeColumnComponent, CardNodeLabelComponent, CardNodeSubtitleComponent, CardNodeTitleComponent],
-	exports: [CardNodeComponent, CardNodeColumnComponent, CardNodeLabelComponent, CardNodeSubtitleComponent, CardNodeTitleComponent],
-	imports: [CommonModule]
-})
-export class CardNodeModule { }

package/src/diagrams/configs.ts

@@ -1 +0,0 @@
-export const carbonPrefix = 'cds';

package/src/diagrams/edge/edge.component.ts

@@ -1,45 +0,0 @@
-import { Component, Input } from "@angular/core";
-import { buildStraightPathString } from "@carbon/charts/components/diagrams/buildPaths";
-
-import { carbonPrefix } from '../configs';
-
-interface Coordinates {
-	x: number;
-	y: number;
-}
-@Component({
-	selector: "[ibm-graph-edge]",
-	template: `
-	<svg:g [ngClass]="[namespace, variant ? namespace + '--' + variant : '']">
-		<svg:path
-			[ngClass]="namespace + '__container'"
-			[attr.d]="path ? path : straight(source, target)"
-		/>
-		<svg:path
-			[ngClass]="namespace + '__outer'"
-			[attr.d]="path ? path : straight(source, target)"
-		/>
-		<svg:path
-			[ngClass]="namespace + '__inner'"
-			[attr.d]="path ? path : straight(source, target)"
-			[ngStyle]="{'stroke': color}"
-			[attr.marker-start]="markerStart ? 'url(#' + markerStart + ')' : ''"
-			[attr.marker-end]="markerEnd ? 'url(#' + markerEnd + ')' : ''"
-		/>
-	</svg:g>
-	`
-})
-
-export class EdgeComponent {
-	@Input() color: string;
-	@Input() markerEnd: string;
-	@Input() markerStart: string;
-	@Input() source: Coordinates;
-	@Input() target: Coordinates;
-	@Input() variant: "dash-sm" | "dash-md" |  "dash-lg" |  "dash-xl" |  "double" |  "tunnel";
-	@Input() path: string;
-
-	pathClasses;
-	namespace = `${carbonPrefix}--cc--edge`;
-	straight = buildStraightPathString;
-}

package/src/diagrams/edge/edge.module.ts

@@ -1,11 +0,0 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { EdgeComponent } from "./edge.component";
-export { EdgeComponent } from "./edge.component";
-
-@NgModule({
-	declarations: [EdgeComponent],
-	exports: [EdgeComponent],
-	imports: [CommonModule]
-})
-export class EdgeModule { }

package/src/diagrams/marker/marker.component.ts

@@ -1,68 +0,0 @@
-import { Component, Input, OnInit } from "@angular/core";
-import {
-	arrowLeft,
-	arrowRight,
-	circle,
-	diamond,
-	square,
-	tee,
-} from "@carbon/charts/components/diagrams/markerDefinitions";
-
-import { carbonPrefix } from '../configs';
-
-const template = `
-<svg:marker
-	[ngClass]="namespace"
-	[attr.markerHeight]="height"
-	[attr.markerWidth]="width"
-	[attr.orient]="orient"
-	[attr.id]="id"
-	[attr.refX]="refX"
-	[attr.refY]="refY"
-	markerUnits="userSpaceOnUse">
-	<svg:path [attr.d]="d" [ngStyle]="{'fill': color}" ></svg:path>
-</svg:marker>
-`;
-
-@Component({
-	selector: "[ibm-graph-marker]",
-	template
-})
-export class MarkerComponent {
-	@Input() d: string;
-	@Input() color: string;
-	@Input() id: string;
-	@Input() orient: string | number = "auto";
-	@Input() height: string | number;
-	@Input() width: string | number;
-	@Input() refX: string | number;
-	@Input() refY: string | number;
-	@Input() position: "start" | "end" = "end";
-
-	namespace = `${carbonPrefix}--cc--marker`;
-
-	setAttributes = ({d, id, height, width}) => {
-		const xPos = (this.position === "end") ? (width / 2) + 0.5 : 0.5;
-		const yPos = height / 2;
-
-		this.d = this.d || d;
-		this.id = this.id || id;
-		this.height = this.height || height;
-		this.width = this.width || width;
-		this.refX = this.refX || xPos;
-		this.refY = this.refY || yPos;
-	}
-}
-
-@Component({ selector: "[ibm-graph-marker-arrow-left]", template})
-export class MarkerArrowLeftComponent extends MarkerComponent implements OnInit { ngOnInit() {this.setAttributes({...arrowLeft}); } }
-@Component({ selector: "[ibm-graph-marker-arrow-right]", template})
-export class MarkerArrowRightComponent extends MarkerComponent implements OnInit { ngOnInit() {this.setAttributes({...arrowRight}); } }
-@Component({ selector: "[ibm-graph-marker-circle]", template})
-export class MarkerShapeNodeComponent extends MarkerComponent implements OnInit { ngOnInit() {this.setAttributes({...circle}); } }
-@Component({ selector: "[ibm-graph-marker-diamond]", template})
-export class MarkerDiamondComponent extends MarkerComponent implements OnInit { ngOnInit() {this.setAttributes({...diamond}); } }
-@Component({ selector: "[ibm-graph-marker-square]", template})
-export class MarkerSquareComponent extends MarkerComponent implements OnInit { ngOnInit() {this.setAttributes({...square}); } }
-@Component({ selector: "[ibm-graph-marker-tee]", template})
-export class MarkerTeeComponent extends MarkerComponent implements OnInit { ngOnInit() {this.setAttributes({...tee}); } }

package/src/diagrams/marker/marker.module.ts

@@ -1,43 +0,0 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import {
-	MarkerComponent,
-	MarkerArrowLeftComponent,
-	MarkerArrowRightComponent,
-	MarkerShapeNodeComponent,
-	MarkerDiamondComponent,
-	MarkerSquareComponent,
-	MarkerTeeComponent
-} from "./marker.component";
-
-export {
-	MarkerComponent,
-	MarkerArrowLeftComponent,
-	MarkerArrowRightComponent,
-	MarkerShapeNodeComponent,
-	MarkerDiamondComponent,
-	MarkerSquareComponent,
-	MarkerTeeComponent
-};
-@NgModule({
-	declarations: [
-		MarkerComponent,
-		MarkerArrowLeftComponent,
-		MarkerArrowRightComponent,
-		MarkerShapeNodeComponent,
-		MarkerDiamondComponent,
-		MarkerSquareComponent,
-		MarkerTeeComponent
-	],
-	exports: [
-		MarkerComponent,
-		MarkerArrowLeftComponent,
-		MarkerArrowRightComponent,
-		MarkerShapeNodeComponent,
-		MarkerDiamondComponent,
-		MarkerSquareComponent,
-		MarkerTeeComponent
-	],
-	imports: [CommonModule]
-})
-export class MarkerModule { }

package/src/diagrams/shape-node/shape-node.component.ts

@@ -1,133 +0,0 @@
-import {
-	Component,
-	Input,
-	Output,
-	EventEmitter,
-	TemplateRef,
-	OnInit,
-} from '@angular/core';
-
-import { carbonPrefix } from '../configs';
-
-@Component({
-	selector: 'ibm-diagram-shape-node',
-	template: `
-		<ng-container [ngSwitch]="component">
-			<xhtml:div
-				*ngSwitchCase="'div'"
-				[ngClass]="[
-					namespace,
-					stacked ? namespace + '--stacked' : '',
-					shape ? namespace + '--' + shape : '',
-					namespace + '--' + component
-				]"
-				[ngStyle]="{
-					'height.px': size,
-					'width.px': size,
-					position: position
-				}"
-				(mouseenter)="mouseEnter.emit($event)"
-				(mouseover)="mouseOver.emit($event)"
-				(mouseout)="mouseOut.emit($event)"
-				(mouseleave)="mouseLeave.emit($event)"
-				(mousemove)="mouseMove.emit($event)"
-				tabindex="0"
-			>
-				<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
-			</xhtml:div>
-
-			<xhtml:button
-				*ngSwitchCase="'button'"
-				[ngClass]="[
-					namespace,
-					stacked ? namespace + '--stacked' : '',
-					shape ? namespace + '--' + shape : '',
-					namespace + '--' + component
-				]"
-				[ngStyle]="{
-					'height.px': size,
-					'width.px': size,
-					position: position
-				}"
-				(click)="click.emit($event)"
-				(mouseenter)="mouseEnter.emit($event)"
-				(mouseover)="mouseOver.emit($event)"
-				(mouseout)="mouseOut.emit($event)"
-				(mouseleave)="mouseLeave.emit($event)"
-				(mousemove)="mouseMove.emit($event)"
-				tabindex="0"
-			>
-				<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
-			</xhtml:button>
-
-			<xhtml:a
-				*ngSwitchCase="'a'"
-				[ngClass]="[
-					namespace,
-					stacked ? namespace + '--stacked' : '',
-					shape ? namespace + '--' + shape : '',
-					namespace + '--' + component
-				]"
-				[attr.href]="href"
-				[ngStyle]="{
-					'height.px': size,
-					'width.px': size,
-					position: position
-				}"
-				(mouseenter)="mouseEnter.emit($event)"
-				(mouseover)="mouseOver.emit($event)"
-				(mouseout)="mouseOut.emit($event)"
-				(mouseleave)="mouseLeave.emit($event)"
-				(mousemove)="mouseMove.emit($event)"
-				tabindex="0"
-			>
-				<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
-			</xhtml:a>
-		</ng-container>
-
-		<ng-template #nodeTemplate>
-			<div *ngIf="renderIcon" attr.class="{{ namespace + '__icon' }}">
-				<ng-container *ngTemplateOutlet="renderIcon"></ng-container>
-			</div>
-			<div
-				attr.class="{{ namespace + '__body' }}"
-				[ngStyle]="{ position: bodyPosition }"
-			>
-				<div attr.class="{{ namespace + '__title' }}">{{ title }}</div>
-				<div attr.class="{{ namespace + '__subtitle' }}">
-					{{ subtitle }}
-				</div>
-			</div>
-		</ng-template>
-	`,
-})
-export class ShapeNodeComponent implements OnInit {
-	@Input() as = 'div';
-	@Input() href: string = null;
-	@Input() renderIcon: TemplateRef<any>;
-	@Input() size = 48;
-	@Input() stacked: boolean;
-	@Input() shape: 'circle' | 'square' | 'rounded-square' = 'circle';
-	@Input() subtitle: string;
-	@Input() title: string;
-	@Input() position: string = 'fixed';
-	@Input() bodyPosition: string = 'absolute';
-
-	@Output() click: EventEmitter<any> = new EventEmitter<any>();
-	@Output() mouseEnter: EventEmitter<any> = new EventEmitter<any>();
-	@Output() mouseOver: EventEmitter<any> = new EventEmitter<any>();
-	@Output() mouseOut: EventEmitter<any> = new EventEmitter<any>();
-	@Output() mouseLeave: EventEmitter<any> = new EventEmitter<any>();
-	@Output() mouseMove: EventEmitter<any> = new EventEmitter<any>();
-
-	namespace = `${carbonPrefix}--cc--shape-node`;
-	component = 'div';
-
-	ngOnInit() {
-		if (this.href) {
-			this.component = 'a';
-		} else {
-			this.component = this.as;
-		}
-	}
-}

package/src/diagrams/shape-node/shape-node.module.ts

@@ -1,11 +0,0 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { ShapeNodeComponent } from "./shape-node.component";
-export { ShapeNodeComponent } from "./shape-node.component";
-
-@NgModule({
-	declarations: [ShapeNodeComponent],
-	exports: [ShapeNodeComponent],
-	imports: [CommonModule]
-})
-export class ShapeNodeModule { }

package/src/donut-chart.component.ts

@@ -1,34 +0,0 @@
-import {
-	Component,
-	AfterViewInit
-} from "@angular/core";
-
-import { BaseChart } from "./base-chart.component";
-
-import { DonutChart } from "@carbon/charts";
-
-/**
- * Wrapper around `DonutChart` in carbon charts library
- *
- * Most functions just call their equivalent from the chart library.
- */
-@Component({
-	selector: "ibm-donut-chart",
-	template: ``
-})
-export class DonutChartComponent extends BaseChart implements AfterViewInit {
-	/**
-	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
-	 */
-	ngAfterViewInit() {
-		this.chart = new DonutChart(
-			this.elementRef.nativeElement,
-			{
-				data: this.data,
-				options: this.options
-			}
-		);
-
-		Object.assign(this, this.chart);
-	}
-}

package/src/gauge-chart.component.ts

@@ -1,34 +0,0 @@
-import {
-	Component,
-	AfterViewInit
-} from "@angular/core";
-
-import { BaseChart } from "./base-chart.component";
-
-import { GaugeChart } from "@carbon/charts";
-
-/**
- * Wrapper around `GaugeChart` in carbon charts library
- *
- * Most functions just call their equivalent from the chart library.
- */
-@Component({
-	selector: "ibm-gauge-chart",
-	template: ``
-})
-export class GaugeChartComponent extends BaseChart implements AfterViewInit {
-	/**
-	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
-	 */
-	ngAfterViewInit() {
-		this.chart = new GaugeChart(
-			this.elementRef.nativeElement,
-			{
-				data: this.data,
-				options: this.options
-			}
-		);
-
-		Object.assign(this, this.chart);
-	}
-}

package/src/heatmap-chart.component.ts

@@ -1,34 +0,0 @@
-import {
-	Component,
-	AfterViewInit
-} from "@angular/core";
-
-import { BaseChart } from "./base-chart.component";
-
-import { HeatmapChart } from "@carbon/charts";
-
-/**
- * Wrapper around `Heatmap` in carbon charts library
- *
- * Most functions just call their equivalent from the chart library.
- */
-@Component({
-	selector: "ibm-heatmap-chart",
-	template: ``
-})
-export class HeatmapChartComponent extends BaseChart implements AfterViewInit {
-	/**
-	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
-	 */
-	ngAfterViewInit() {
-		this.chart = new HeatmapChart(
-			this.elementRef.nativeElement,
-			{
-				data: this.data,
-				options: this.options
-			}
-		);
-
-		Object.assign(this, this.chart);
-	}
-}