@carbon/charts-angular 1.8.0 → 1.9.0-rc.3

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

@@ -0,0 +1,112 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { arrowLeft, arrowRight, circle, diamond, square, tee } from '@carbon/charts'
+import { carbonPrefix } from '../../config'
+
+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,[ibm-graph-marker]',
+	template
+})
+export class MarkerComponent {
+	@Input() d = ''
+	@Input() color = ''
+	@Input() id = ''
+	@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
+	}: {
+		d: string
+		id: string
+		height: number
+		width: number
+	}) => {
+		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,[ibm-graph-marker-arrow-left]',
+	template
+})
+export class MarkerArrowLeftComponent extends MarkerComponent implements OnInit {
+	ngOnInit() {
+		this.setAttributes({ ...arrowLeft })
+	}
+}
+@Component({
+	selector: 'ibm-graph-marker-arrow-right,[ibm-graph-marker-arrow-right]',
+	template
+})
+export class MarkerArrowRightComponent extends MarkerComponent implements OnInit {
+	ngOnInit() {
+		this.setAttributes({ ...arrowRight })
+	}
+}
+@Component({
+	selector: 'ibm-graph-marker-circle,[ibm-graph-marker-circle]',
+	template
+})
+export class MarkerShapeNodeComponent extends MarkerComponent implements OnInit {
+	ngOnInit() {
+		this.setAttributes({ ...circle })
+	}
+}
+@Component({
+	selector: 'ibm-graph-marker-diamond,[ibm-graph-marker-diamond]',
+	template
+})
+export class MarkerDiamondComponent extends MarkerComponent implements OnInit {
+	ngOnInit() {
+		this.setAttributes({ ...diamond })
+	}
+}
+@Component({
+	selector: 'ibm-graph-marker-square,[ibm-graph-marker-square]',
+	template
+})
+export class MarkerSquareComponent extends MarkerComponent implements OnInit {
+	ngOnInit() {
+		this.setAttributes({ ...square })
+	}
+}
+@Component({
+	selector: 'ibm-graph-marker-tee,[ibm-graph-marker-tee]',
+	template
+})
+export class MarkerTeeComponent extends MarkerComponent implements OnInit {
+	ngOnInit() {
+		this.setAttributes({ ...tee })
+	}
+}

package/src/lib/diagrams/edges/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
+	],
+	imports: [CommonModule],
+	exports: [
+		MarkerComponent,
+		MarkerArrowLeftComponent,
+		MarkerArrowRightComponent,
+		MarkerShapeNodeComponent,
+		MarkerDiamondComponent,
+		MarkerSquareComponent,
+		MarkerTeeComponent
+	]
+})
+export class MarkerModule {}

package/src/lib/diagrams/index.ts

@@ -0,0 +1,23 @@
+export {
+	MarkerComponent,
+	MarkerArrowLeftComponent,
+	MarkerArrowRightComponent,
+	MarkerShapeNodeComponent,
+	MarkerDiamondComponent,
+	MarkerSquareComponent,
+	MarkerTeeComponent,
+	MarkerModule
+} from './edges/marker/marker.module'
+
+export { EdgeComponent, EdgeModule } from './edges/edge.module'
+
+export {
+	CardNodeComponent,
+	CardNodeColumnComponent,
+	CardNodeLabelComponent,
+	CardNodeSubtitleComponent,
+	CardNodeTitleComponent,
+	CardNodeModule
+} from './nodes/cards/card-node.module'
+
+export { ShapeNodeComponent, ShapeNodeModule } from './nodes/shape/shape-node.module'

package/src/lib/diagrams/nodes/cards/card-node-column.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, HostBinding } from '@angular/core'
+import { carbonPrefix } from '../../config'
+
+@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/lib/diagrams/nodes/cards/card-node-label.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core'
+import { carbonPrefix } from '../../config'
+
+@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/lib/diagrams/nodes/cards/card-node-subtitle.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core'
+import { carbonPrefix } from '../../config'
+
+@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/lib/diagrams/nodes/cards/card-node-title.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core'
+import { carbonPrefix } from '../../config'
+
+@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/lib/diagrams/nodes/cards/card-node.component.ts

@@ -0,0 +1,98 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'
+import { carbonPrefix } from '../../config'
+
+@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 = ''
+	@Input() color = ''
+	@Input() stacked = false
+	@Input() position = 'static'
+
+	// eslint-disable-next-line @angular-eslint/no-output-native
+	@Output() click: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>()
+	@Output() mouseEnter: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>()
+	@Output() mouseOver: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>()
+	@Output() mouseOut: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>()
+	@Output() mouseLeave: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>()
+	@Output() mouseMove: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>()
+
+	namespace = `${carbonPrefix}--cc--card-node`
+
+	component = 'div'
+
+	ngOnInit() {
+		if (this.href) {
+			this.component = 'a'
+		} else {
+			this.component = this.as
+		}
+	}
+}

package/src/lib/diagrams/nodes/cards/card-node.module.ts

@@ -0,0 +1,32 @@
+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
+	],
+	imports: [CommonModule],
+	exports: [
+		CardNodeComponent,
+		CardNodeColumnComponent,
+		CardNodeLabelComponent,
+		CardNodeSubtitleComponent,
+		CardNodeTitleComponent
+	]
+})
+export class CardNodeModule {}

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

@@ -0,0 +1,120 @@
+import { Component, Input, Output, EventEmitter, TemplateRef, OnInit } from '@angular/core'
+import { carbonPrefix } from '../../config'
+
+@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 = ''
+	@Input() renderIcon?: TemplateRef<void>
+	@Input() size = 48
+	@Input() stacked = false
+	@Input() shape: 'circle' | 'square' | 'rounded-square' = 'circle'
+	@Input() subtitle = ''
+	@Input() title = ''
+	@Input() position = 'fixed'
+	@Input() bodyPosition = 'absolute'
+
+	// eslint-disable-next-line @angular-eslint/no-output-native
+	@Output() click: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>()
+	@Output() mouseEnter: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>()
+	@Output() mouseOver: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>()
+	@Output() mouseOut: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>()
+	@Output() mouseLeave: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>()
+	@Output() mouseMove: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>()
+
+	namespace = `${carbonPrefix}--cc--shape-node`
+	component = 'div'
+
+	ngOnInit() {
+		if (this.href) {
+			this.component = 'a'
+		} else {
+			this.component = this.as
+		}
+	}
+}

package/src/lib/diagrams/nodes/shape/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],
+	imports: [CommonModule],
+	exports: [ShapeNodeComponent]
+})
+export class ShapeNodeModule {}

package/src/lib/index.ts

@@ -0,0 +1,50 @@
+export {
+	AlluvialChartComponent,
+	AreaChartComponent,
+	BaseChartComponent,
+	BoxplotChartComponent,
+	BubbleChartComponent,
+	BulletChartComponent,
+	ChartsModule,
+	CirclePackChartComponent,
+	ComboChartComponent,
+	DonutChartComponent,
+	ExperimentalChoroplethChartComponent,
+	GaugeChartComponent,
+	GroupedBarChartComponent,
+	HeatmapChartComponent,
+	HistogramChartComponent,
+	LineChartComponent,
+	LollipopChartComponent,
+	MeterChartComponent,
+	PieChartComponent,
+	RadarChartComponent,
+	ScatterChartComponent,
+	SimpleBarChartComponent,
+	StackedAreaChartComponent,
+	StackedBarChartComponent,
+	TreeChartComponent,
+	TreemapChartComponent,
+	WordCloudChartComponent
+} from './charts'
+
+export {
+	CardNodeColumnComponent,
+	CardNodeComponent,
+	CardNodeLabelComponent,
+	CardNodeSubtitleComponent,
+	CardNodeTitleComponent,
+	CardNodeModule,
+	EdgeComponent,
+	EdgeModule,
+	MarkerArrowLeftComponent,
+	MarkerArrowRightComponent,
+	MarkerComponent,
+	MarkerDiamondComponent,
+	MarkerModule,
+	MarkerShapeNodeComponent,
+	MarkerSquareComponent,
+	MarkerTeeComponent,
+	ShapeNodeComponent,
+	ShapeNodeModule
+} from './diagrams'

package/src/stories/0-api.stories.mdx

@@ -0,0 +1,69 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Docs/Tutorials/API" />
+
+# API (Vanilla JavaScript)
+
+When initializing an object using any of our exposed chart types (e.g. PieChart), the object that you'll receive includes many useful elements inside it.
+
+```ts
+const myChart = new PieChart({
+  data: ...,
+  options: ...
+})
+
+console.log(myChart)
+
+// RESULT
+{
+  model, // where we store charting data & options
+  services, // globalized functions that can affect charting behaviour. (e.g. event listener dispatching etc.)
+  components // internally used for arranging the charting layout, you can disregard this
+}
+```
+
+<br/>
+## Data updates
+Data updates are done through the model.
+
+```ts
+const myChart = new PieChart({
+  data: ...,
+  options: ...
+})
+
+myChart.model.setData(...)
+```
+
+Similarly, `myChart.model.getData();` & `myChart.model.getDisplayData();` can provide you the full data that's stored or only the portion that's currently being displayed.
+
+<br/>
+## Option updates
+Options updates are also done through the model.
+
+```js
+const myChart = new PieChart({
+  data: ...,
+  options: ...
+})
+
+myChart.model.setOptions(...)
+```
+
+Similarly, `myChart.model.getOptions();` will provide you with the options that are stored.
+
+## What are services?
+Services are globalized functions that have proven useful across the board. General tasks such as event dispatching, transition handling, DOM-related activities etc. are handled by services.
+
+**Example:**
+
+Event listeners can be added through the events service:
+
+```ts
+barChart.services.events.addEventListener("bar-mouseover", e => console.log(e.detail))
+```
+
+## API Reference
+Our full API reference docs can be found [here](https://carbon-design-system.github.io/carbon-charts/documentation/).
+
+To get an idea of all the possible configurations in every chart type, see [here](https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html).