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

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

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

@@ -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
-	],
-	imports: [CommonModule],
-	exports: [
-		MarkerComponent,
-		MarkerArrowLeftComponent,
-		MarkerArrowRightComponent,
-		MarkerShapeNodeComponent,
-		MarkerDiamondComponent,
-		MarkerSquareComponent,
-		MarkerTeeComponent
-	]
-})
-export class MarkerModule {}

package/src/lib/diagrams/index.ts

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

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

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

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

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

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

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

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

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

@@ -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],
-	imports: [CommonModule],
-	exports: [ShapeNodeComponent]
-})
-export class ShapeNodeModule {}

package/src/lib/index.ts

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

@@ -1,69 +0,0 @@
-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).