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

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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,133 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,34 @@
+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);
+	}
+}

package/src/histogram-chart.component.ts

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

package/src/index.ts

@@ -0,0 +1,44 @@
+export * from './charts.module';
+
+export * from './base-chart.component';
+export * from './area-chart.component';
+export * from './area-chart-stacked.component';
+export * from './bar-chart-simple.component';
+export * from './bar-chart-grouped.component';
+export * from './bar-chart-stacked.component';
+export * from './boxplot-chart.component';
+export * from './bubble-chart.component';
+export * from './bullet-chart.component';
+export * from './donut-chart.component';
+export * from './gauge-chart.component';
+export * from './histogram-chart.component';
+export * from './line-chart.component';
+export * from './lollipop-chart.component';
+export * from './pie-chart.component';
+export * from './scatter-chart.component';
+export * from './meter-chart.component';
+export * from './radar-chart.component';
+export * from './combo-chart.component';
+export * from './tree-chart.component';
+export * from './treemap-chart.component';
+export * from './circle-pack-chart.component';
+export * from './wordcloud-chart.component';
+export * from './alluvial-chart.component';
+export * from './heatmap-chart.component';
+
+// Diagrams
+export * from './diagrams/card-node/card-node.module';
+export * from './diagrams/card-node/card-node-column.component';
+export * from './diagrams/card-node/card-node-label.component';
+export * from './diagrams/card-node/card-node-subtitle.component';
+export * from './diagrams/card-node/card-node-title.component';
+export * from './diagrams/card-node/card-node.component';
+
+export * from './diagrams/edge/edge.module';
+export * from './diagrams/edge/edge.component';
+
+export * from './diagrams/marker/marker.module';
+export * from './diagrams/marker/marker.component';
+
+export * from './diagrams/shape-node/shape-node.module';
+export * from './diagrams/shape-node/shape-node.component';

package/src/line-chart.component.ts

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

package/src/lollipop-chart.component.ts

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

package/src/meter-chart.component.ts

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

package/src/pie-chart.component.ts

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

package/src/radar-chart.component.ts

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