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

package/src/bar-chart-grouped.component.ts

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

package/src/bar-chart-simple.component.ts

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

package/src/bar-chart-stacked.component.ts

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

package/src/base-chart.component.ts

@@ -0,0 +1,102 @@
+import {
+	Component,
+	Input,
+	ViewChild,
+	OnInit,
+	AfterViewInit,
+	ElementRef
+} from "@angular/core";
+
+/**
+ * Wrapper around `BaseChart` in carbon charts library
+ *
+ * Most functions just call their equivalent from the chart library.
+ */
+@Component({
+	selector: "ibm-base-chart",
+	template: ``
+})
+export class BaseChart implements AfterViewInit, OnInit {
+	constructor(protected elementRef: ElementRef) {}
+
+	/**
+	 * Data passed to charts library for displaying
+	 */
+	@Input() set data(newData) {
+		// If data already exists, that means the chart has been initialized
+		const dataExistsAlready = this._data !== null && this._data !== undefined;
+
+		this._data = newData;
+
+		if (dataExistsAlready) {
+			this.chart.model.setData(newData);
+		}
+	}
+
+	get data() {
+		return this._data;
+	}
+
+	/**
+	 * Options passed to charts library
+	 */
+	@Input() set options(newOptions) {
+		// If data already exists, that means the chart has been initialized
+		const optionsExistAlready = this._options !== null && this._options !== undefined;
+
+		this._options = newOptions;
+
+		if (optionsExistAlready) {
+			this.chart.model.setOptions(newOptions);
+		}
+	}
+
+	get options() {
+		return this._options;
+	}
+
+	/**
+	 * Chart width
+	 */
+	@Input() width: any;
+
+	/**
+	 * Chart height
+	 */
+	@Input() height: any;
+
+	/**
+	 * Chart container element ref
+	 */
+	@ViewChild("nChart") chartRef;
+
+	/**
+	 * Chart object instance
+	 *
+	 * You can use this to do whatever you would normally do with a chart if you used
+	 * charts library directly.
+	 */
+	chart;
+
+	private _data: any;
+	private _options: any;
+
+	ngOnInit() {
+		// Width prop is mandatory for the wrappers
+		if (this.width) {
+			this.options.width = this.width;
+		}
+
+		// Height prop is mandatory for the wrappers
+		if (this.height) {
+			this.options.height = this.height;
+		}
+	}
+
+	/**
+	 * Runs after view init to create a chart, attach it to `chartRef` and draw it.
+	 */
+	ngAfterViewInit() {
+		console.log("You need to implement your own `ngAfterViewInit()` function");
+	}
+}

package/src/boxplot-chart.component.ts

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

package/src/bubble-chart.component.ts

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

package/src/bullet-chart.component.ts

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

package/src/charts.module.ts

@@ -0,0 +1,87 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { BaseChart } from './base-chart.component';
+import { AlluvialChartComponent } from './alluvial-chart.component';
+import { AreaChartComponent } from './area-chart.component';
+import { StackedAreaChartComponent } from './area-chart-stacked.component';
+import { SimpleBarChartComponent } from './bar-chart-simple.component';
+import { GroupedBarChartComponent } from './bar-chart-grouped.component';
+import { StackedBarChartComponent } from './bar-chart-stacked.component';
+import { BoxplotChartComponent } from './boxplot-chart.component';
+import { BubbleChartComponent } from './bubble-chart.component';
+import { BulletChartComponent } from './bullet-chart.component';
+import { DonutChartComponent } from './donut-chart.component';
+import { GaugeChartComponent } from './gauge-chart.component';
+import { HistogramChartComponent } from './histogram-chart.component';
+import { LineChartComponent } from './line-chart.component';
+import { LollipopChartComponent } from './lollipop-chart.component';
+import { PieChartComponent } from './pie-chart.component';
+import { ScatterChartComponent } from './scatter-chart.component';
+import { MeterChartComponent } from './meter-chart.component';
+import { RadarChartComponent } from './radar-chart.component';
+import { ComboChartComponent } from './combo-chart.component';
+import { TreeChartComponent } from './tree-chart.component';
+import { TreemapChartComponent } from './treemap-chart.component';
+import { CirclePackChartComponent } from './circle-pack-chart.component';
+import { WordCloudChartComponent } from './wordcloud-chart.component';
+import { HeatmapChartComponent } from './heatmap-chart.component';
+
+@NgModule({
+	imports: [CommonModule],
+	declarations: [
+		BaseChart,
+		AlluvialChartComponent,
+		AreaChartComponent,
+		StackedAreaChartComponent,
+		SimpleBarChartComponent,
+		GroupedBarChartComponent,
+		StackedBarChartComponent,
+		BoxplotChartComponent,
+		BubbleChartComponent,
+		BulletChartComponent,
+		DonutChartComponent,
+		GaugeChartComponent,
+		HeatmapChartComponent,
+		HistogramChartComponent,
+		LineChartComponent,
+		LollipopChartComponent,
+		PieChartComponent,
+		ScatterChartComponent,
+		MeterChartComponent,
+		RadarChartComponent,
+		ComboChartComponent,
+		TreeChartComponent,
+		TreemapChartComponent,
+		CirclePackChartComponent,
+		WordCloudChartComponent,
+	],
+	exports: [
+		BaseChart,
+		AlluvialChartComponent,
+		AreaChartComponent,
+		StackedAreaChartComponent,
+		SimpleBarChartComponent,
+		GroupedBarChartComponent,
+		StackedBarChartComponent,
+		BoxplotChartComponent,
+		BubbleChartComponent,
+		BulletChartComponent,
+		DonutChartComponent,
+		GaugeChartComponent,
+		HeatmapChartComponent,
+		HistogramChartComponent,
+		LineChartComponent,
+		LollipopChartComponent,
+		PieChartComponent,
+		ScatterChartComponent,
+		MeterChartComponent,
+		RadarChartComponent,
+		ComboChartComponent,
+		TreeChartComponent,
+		TreemapChartComponent,
+		CirclePackChartComponent,
+		WordCloudChartComponent
+	],
+})
+export class ChartsModule {}

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

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

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

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

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

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

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

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

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

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