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

package/package.json

@@ -1,19 +1,30 @@
 {
   "name": "@carbon/charts-angular",
-  "version": "1.9.0-rc.1",
+  "version": "1.9.0-rc.3",
   "description": "Carbon charting components for Angular",
   "exports": {
     "./styles.min.css": "./dist/styles.min.css",
-    "./styles.css": "./dist/styles.css",
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/carbon-charts-angular.mjs",
-      "esm": "./esm2022/carbon-charts-angular.mjs",
-      "default": "./fesm2022/carbon-charts-angular.mjs"
-    }
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "ng": "ng",
+    "postinstall": "carbon-telemetry collect --install",
+    "file:md": "cp *.md dist",
+    "file:styles": "cp ../core/dist/styles.* dist",
+    "postbundle": "concurrently \"yarn:file:*\"",
+    "build:package:vite": "vite build && yarn postbundle",
+    "build:package": "ng build && yarn postbundle",
+    "demo:mdx:angular": "cp ../core/src/stories/getting-started/angular.stories.mdx src/stories",
+    "demo:mdx:tutorials": "cp ../core/src/stories/tutorials/* src/stories",
+    "demo:mdx": "concurrently \"yarn:demo:mdx:*\"",
+    "build:demo": "yarn demo:mdx && ng run charts-angular:build-storybook",
+    "build": "yarn build:package && yarn build:demo",
+    "storybook": "ng run charts-angular:storybook",
+    "start": "yarn storybook",
+    "lint:angular": "ng lint --ignore-path ../../.eslintignore",
+    "lint": "eslint . --ignore-path ../../.eslintignore",
+    "format": "prettier --write src/ --ignore-path ../../.eslintignore",
+    "clean": "rm -rf dist demo/bundle"
   },
   "peerDependencies": {
     "@angular/common": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
@@ -22,11 +33,57 @@
   "dependencies": {
     "@angular/common": "^16.0.4",
     "@angular/core": "^16.0.4",
-    "@carbon/charts": "workspace:*",
+    "@carbon/charts": "1.9.0-rc.3",
     "@carbon/icons-angular": "^11.2.2",
     "@carbon/telemetry": "~0.1.0",
     "tslib": "^2.5.3"
   },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^16.0.4",
+    "@angular-eslint/builder": "16.0.3",
+    "@angular-eslint/eslint-plugin": "16.0.3",
+    "@angular-eslint/eslint-plugin-template": "16.0.3",
+    "@angular-eslint/schematics": "16.0.3",
+    "@angular-eslint/template-parser": "16.0.3",
+    "@angular/animations": "^16.0.4",
+    "@angular/cli": "^16.0.4",
+    "@angular/compiler": "^16.0.4",
+    "@angular/compiler-cli": "^16.0.4",
+    "@angular/forms": "^16.0.4",
+    "@angular/platform-browser": "^16.0.4",
+    "@angular/platform-browser-dynamic": "^16.0.4",
+    "@babel/core": "^7.22.1",
+    "@stackblitz/sdk": "^1.9.0",
+    "@storybook/addon-essentials": "^7.1.0-0",
+    "@storybook/addon-interactions": "^7.1.0-0",
+    "@storybook/addon-links": "^7.1.0-0",
+    "@storybook/angular": "^7.1.0-0",
+    "@storybook/blocks": "^7.1.0-0",
+    "@storybook/manager-api": "^7.1.0-0",
+    "@storybook/testing-library": "^0.1.0",
+    "@storybook/theming": "^7.1.0-0",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/parser": "^5.59.9",
+    "concurrently": "^8.1.0",
+    "eslint": "^8.42.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-storybook": "^0.6.12",
+    "ng-packagr": "^16.0.1",
+    "prettier": "^2.8.8",
+    "prettier-eslint": "^15.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rxjs": "~7.8.1",
+    "storybook": "^7.1.0-0",
+    "style-loader": "3.3.3",
+    "typescript": "~5.0.4",
+    "vite": "^4.3.9",
+    "vite-plugin-dts": "^2.3.0",
+    "webpack": "5.85.1",
+    "zone.js": "~0.13.0"
+  },
+  "prettier": "../../prettier.config.cjs",
   "publishConfig": {
     "directory": "dist",
     "access": "public"
@@ -74,8 +131,5 @@
       "email": "iliadm@ca.ibm.com",
       "url": "https://github.com/theiliad"
     }
-  ],
-  "module": "fesm2022/carbon-charts-angular.mjs",
-  "typings": "index.d.ts",
-  "sideEffects": false
-}
+  ]
+}

package/src/index.ts

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

package/src/lib/charts/alluvial-chart.component.ts

@@ -0,0 +1,30 @@
+import { Component, AfterViewInit } from '@angular/core'
+import { BaseChartComponent } from './base-chart.component'
+import {
+	AlluvialChart as AlluvialChartCore,
+	type AlluvialChartOptions,
+	type ChartTabularData
+} from '@carbon/charts'
+
+/**
+ * Wrapper around `Alluvial` in carbon charts library
+ *
+ * Most functions just call their equivalent from the chart library.
+ */
+@Component({
+	selector: 'ibm-alluvial-chart',
+	template: ``
+})
+export class AlluvialChartComponent extends BaseChartComponent implements AfterViewInit {
+	/**
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
+	 */
+	override ngAfterViewInit() {
+		this.chart = new AlluvialChartCore(this.elementRef.nativeElement, {
+			data: this.data as ChartTabularData,
+			options: this.options as AlluvialChartOptions
+		})
+
+		Object.assign(this, this.chart)
+	}
+}

package/src/lib/charts/area-chart-stacked.component.ts

@@ -0,0 +1,30 @@
+import { Component, AfterViewInit } from '@angular/core'
+import { BaseChartComponent } from './base-chart.component'
+import {
+	StackedAreaChart as StackedAreaChartCore,
+	type StackedAreaChartOptions,
+	type ChartTabularData
+} from '@carbon/charts'
+
+/**
+ * Wrapper around `StackedAreaChart` in carbon charts library
+ *
+ * Most functions just call their equivalent from the chart library.
+ */
+@Component({
+	selector: 'ibm-stacked-area-chart',
+	template: ``
+})
+export class StackedAreaChartComponent extends BaseChartComponent implements AfterViewInit {
+	/**
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
+	 */
+	override ngAfterViewInit() {
+		this.chart = new StackedAreaChartCore(this.elementRef.nativeElement, {
+			data: this.data as ChartTabularData,
+			options: this.options as StackedAreaChartOptions
+		})
+
+		Object.assign(this, this.chart)
+	}
+}

package/src/lib/charts/area-chart.component.ts

@@ -0,0 +1,30 @@
+import { Component, AfterViewInit } from '@angular/core'
+import { BaseChartComponent } from './base-chart.component'
+import {
+	AreaChart as AreaChartCore,
+	type AreaChartOptions,
+	type ChartTabularData
+} from '@carbon/charts'
+
+/**
+ * Wrapper around `AreaChart` in carbon charts library
+ *
+ * Most functions just call their equivalent from the chart library.
+ */
+@Component({
+	selector: 'ibm-area-chart',
+	template: ``
+})
+export class AreaChartComponent extends BaseChartComponent implements AfterViewInit {
+	/**
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
+	 */
+	override ngAfterViewInit() {
+		this.chart = new AreaChartCore(this.elementRef.nativeElement, {
+			data: this.data as ChartTabularData,
+			options: this.options as AreaChartOptions
+		})
+
+		Object.assign(this, this.chart)
+	}
+}

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

@@ -0,0 +1,30 @@
+import { Component, AfterViewInit } from '@angular/core'
+import { BaseChartComponent } from './base-chart.component'
+import {
+	GroupedBarChart as GroupedBarChartCore,
+	type ChartTabularData,
+	type BarChartOptions
+} 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 BaseChartComponent implements AfterViewInit {
+	/**
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
+	 */
+	override ngAfterViewInit() {
+		this.chart = new GroupedBarChartCore(this.elementRef.nativeElement, {
+			data: this.data as ChartTabularData,
+			options: this.options as BarChartOptions
+		})
+
+		Object.assign(this, this.chart)
+	}
+}

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

@@ -0,0 +1,30 @@
+import { Component, AfterViewInit } from '@angular/core'
+import { BaseChartComponent } from './base-chart.component'
+import {
+	SimpleBarChart as SimpleBarChartCore,
+	type ChartTabularData,
+	type BarChartOptions
+} 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 BaseChartComponent implements AfterViewInit {
+	/**
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
+	 */
+	override ngAfterViewInit() {
+		this.chart = new SimpleBarChartCore(this.elementRef.nativeElement, {
+			data: this.data as ChartTabularData,
+			options: this.options as BarChartOptions
+		})
+
+		Object.assign(this, this.chart)
+	}
+}

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

@@ -0,0 +1,30 @@
+import { Component, AfterViewInit } from '@angular/core'
+import { BaseChartComponent } from './base-chart.component'
+import {
+	StackedBarChart as StackedBarChartCore,
+	type ChartTabularData,
+	type StackedBarChartOptions
+} 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 BaseChartComponent implements AfterViewInit {
+	/**
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
+	 */
+	override ngAfterViewInit() {
+		this.chart = new StackedBarChartCore(this.elementRef.nativeElement, {
+			data: this.data as ChartTabularData,
+			options: this.options as StackedBarChartOptions
+		})
+
+		Object.assign(this, this.chart)
+	}
+}

package/src/lib/charts/base-chart.component.ts

@@ -0,0 +1,91 @@
+import { Component, Input, OnInit, AfterViewInit, ElementRef } from '@angular/core'
+import type { BaseChartOptions, ChartTabularData, Charts } from '@carbon/charts'
+
+/**
+ * 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 BaseChartComponent implements AfterViewInit, OnInit {
+	/**
+	 * Data passed to charts library for displaying
+	 */
+	@Input() set data(newData: ChartTabularData) {
+		// If data already exists, that means the chart has been initialized
+		const dataExistsAlready = !!this._data
+
+		this._data = newData
+
+		if (dataExistsAlready) {
+			this.chart?.model.setData(newData)
+		}
+	}
+
+	get data(): ChartTabularData {
+		return this._data
+	}
+
+	/**
+	 * Options passed to charts library
+	 */
+	@Input() set options(newOptions: BaseChartOptions) {
+		// If data already exists, that means the chart has been initialized
+		const optionsExistAlready = !!this._options
+
+		this._options = newOptions
+
+		if (optionsExistAlready) {
+			this.chart?.model.setOptions(newOptions)
+		}
+	}
+
+	get options() {
+		return this._options
+	}
+
+	/**
+	 * Chart width
+	 */
+	@Input() width?: string
+
+	/**
+	 * Chart height
+	 */
+	@Input() height?: string
+
+	/**
+	 * Chart object instance
+	 *
+	 * You can use this to do whatever you would normally do with a chart if you used
+	 * charts library directly.
+	 */
+	chart!: Charts
+
+	private _data!: ChartTabularData
+	private _options!: BaseChartOptions
+
+	constructor(protected elementRef: ElementRef) {}
+
+	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 `elementRef` and draw it.
+	 */
+	ngAfterViewInit() {
+		console.log('Class that extended BaseChartComponent did not implement ngAfterViewInit().')
+	}
+}

package/src/lib/charts/boxplot-chart.component.ts

@@ -0,0 +1,30 @@
+import { Component, AfterViewInit } from '@angular/core'
+import { BaseChartComponent } from './base-chart.component'
+import {
+	BoxplotChart as BoxplotChartCore,
+	type ChartTabularData,
+	type BoxplotChartOptions
+} 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 BaseChartComponent implements AfterViewInit {
+	/**
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
+	 */
+	override ngAfterViewInit() {
+		this.chart = new BoxplotChartCore(this.elementRef.nativeElement, {
+			data: this.data as ChartTabularData,
+			options: this.options as BoxplotChartOptions
+		})
+
+		Object.assign(this, this.chart)
+	}
+}

package/src/lib/charts/bubble-chart.component.ts

@@ -0,0 +1,30 @@
+import { Component, AfterViewInit } from '@angular/core'
+import { BaseChartComponent } from './base-chart.component'
+import {
+	BubbleChart as BubbleChartCore,
+	type BubbleChartOptions,
+	type ChartTabularData
+} 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 BaseChartComponent implements AfterViewInit {
+	/**
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
+	 */
+	override ngAfterViewInit() {
+		this.chart = new BubbleChartCore(this.elementRef.nativeElement, {
+			data: this.data as ChartTabularData,
+			options: this.options as BubbleChartOptions
+		})
+
+		Object.assign(this, this.chart)
+	}
+}

package/src/lib/charts/bullet-chart.component.ts

@@ -0,0 +1,30 @@
+import { Component, AfterViewInit } from '@angular/core'
+import { BaseChartComponent } from './base-chart.component'
+import {
+	BulletChart as BulletChartCore,
+	type BulletChartOptions,
+	type ChartTabularData
+} 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 BaseChartComponent implements AfterViewInit {
+	/**
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
+	 */
+	override ngAfterViewInit() {
+		this.chart = new BulletChartCore(this.elementRef.nativeElement, {
+			data: this.data as ChartTabularData,
+			options: this.options as BulletChartOptions
+		})
+
+		Object.assign(this, this.chart)
+	}
+}

package/src/lib/charts/charts.module.ts

@@ -0,0 +1,92 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+
+import {
+	AlluvialChartComponent,
+	AreaChartComponent,
+	BaseChartComponent,
+	BoxplotChartComponent,
+	BubbleChartComponent,
+	BulletChartComponent,
+	CirclePackChartComponent,
+	ComboChartComponent,
+	DonutChartComponent,
+	ExperimentalChoroplethChartComponent,
+	GaugeChartComponent,
+	GroupedBarChartComponent,
+	HeatmapChartComponent,
+	HistogramChartComponent,
+	LineChartComponent,
+	LollipopChartComponent,
+	MeterChartComponent,
+	PieChartComponent,
+	RadarChartComponent,
+	ScatterChartComponent,
+	SimpleBarChartComponent,
+	StackedAreaChartComponent,
+	StackedBarChartComponent,
+	TreeChartComponent,
+	TreemapChartComponent,
+	WordCloudChartComponent
+} from './index'
+
+@NgModule({
+	declarations: [
+		BaseChartComponent,
+		AlluvialChartComponent,
+		AreaChartComponent,
+		StackedAreaChartComponent,
+		SimpleBarChartComponent,
+		GroupedBarChartComponent,
+		StackedBarChartComponent,
+		BoxplotChartComponent,
+		BubbleChartComponent,
+		BulletChartComponent,
+		DonutChartComponent,
+		ExperimentalChoroplethChartComponent,
+		GaugeChartComponent,
+		HeatmapChartComponent,
+		HistogramChartComponent,
+		LineChartComponent,
+		LollipopChartComponent,
+		PieChartComponent,
+		ScatterChartComponent,
+		MeterChartComponent,
+		RadarChartComponent,
+		ComboChartComponent,
+		TreeChartComponent,
+		TreemapChartComponent,
+		CirclePackChartComponent,
+		WordCloudChartComponent
+	],
+	imports: [CommonModule],
+	exports: [
+		BaseChartComponent,
+		AlluvialChartComponent,
+		AreaChartComponent,
+		StackedAreaChartComponent,
+		SimpleBarChartComponent,
+		GroupedBarChartComponent,
+		StackedBarChartComponent,
+		BoxplotChartComponent,
+		BubbleChartComponent,
+		BulletChartComponent,
+		DonutChartComponent,
+		ExperimentalChoroplethChartComponent,
+		GaugeChartComponent,
+		HeatmapChartComponent,
+		HistogramChartComponent,
+		LineChartComponent,
+		LollipopChartComponent,
+		PieChartComponent,
+		ScatterChartComponent,
+		MeterChartComponent,
+		RadarChartComponent,
+		ComboChartComponent,
+		TreeChartComponent,
+		TreemapChartComponent,
+		CirclePackChartComponent,
+		WordCloudChartComponent
+	]
+})
+export class ChartsModule {}

package/src/lib/charts/choropleth.component.ts

@@ -0,0 +1,33 @@
+import { Component, AfterViewInit } from '@angular/core'
+import { BaseChartComponent } from './base-chart.component'
+import {
+	ExperimentalChoroplethChart as ChoroplethChartCore,
+	type ChoroplethChartOptions,
+	type ChartTabularData
+} from '@carbon/charts'
+
+/**
+ * Wrapper around `Choropleth` in carbon charts library
+ *
+ * Most functions just call their equivalent from the chart library.
+ */
+@Component({
+	selector: 'ibm-experimental-choropleth-chart',
+	template: ``
+})
+export class ExperimentalChoroplethChartComponent
+	extends BaseChartComponent
+	implements AfterViewInit
+{
+	/**
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
+	 */
+	override ngAfterViewInit() {
+		this.chart = new ChoroplethChartCore(this.elementRef.nativeElement, {
+			data: this.data as ChartTabularData,
+			options: this.options as ChoroplethChartOptions
+		})
+
+		Object.assign(this, this.chart)
+	}
+}