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

package/carbon.yml

@@ -1,277 +0,0 @@
-# yaml-language-server: $schema=https://unpkg.com/@carbon-platform/schemas@v1/carbon-resources.schema.json
-library:
-  id: carbon-charts-angular
-  name: Carbon Charts Angular
-  description:
-    Tell accurate stories around data with beautiful and accessible
-    visualizations.
-  inherits: carbon-charts
-  externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/getting-started
-  demoLinks:
-    - type: storybook
-      name: Storybook
-      action: link
-      url: https://charts.carbondesignsystem.com/angular
-assets:
-  alluvial:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/complex-charts#alluvialsankey-diagrams
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/complex-charts-alluvial
-  area-simple:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#area-(simple)
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-area-simple
-  area-stacked:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts/#area-(stacked)
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-area-stacked
-  bar-floating:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#bar-(floating)
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-bar-floating
-  bar-grouped:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#bar-(grouped)
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-bar-grouped
-  bar-simple:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#bar-(simple)
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-bar-simple
-  bar-stacked:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts/#bar-(stacked)
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-bar-stacked
-  boxplot:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#boxplot
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-boxplot
-  bubble:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#bubble
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-bubble
-  bullet:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts/#bullet
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-bullet
-  circle-pack:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/complex-charts#circle-packs
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/complex-charts-circle-pack
-  combo:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/getting-started
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-combo
-  donut:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#donut
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-donut
-  gauge:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts/#gauge
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-gauge
-  heatmap:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/complex-charts#heat-maps
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/complex-charts-heatmap
-  histogram:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#histogram
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-histogram
-  line:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#line
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-line
-  lollipop:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#lollipop
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-lollipop
-  meter:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts/#meter
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-meter
-  meter-proportional:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts/#meter
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-meter-proportional
-  network-diagram:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/complex-charts#network-diagrams
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/diagrams
-  pie:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#pie
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-pie
-  radar:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#radar
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-radar
-  scatter:
-    name: Scatter
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#scatter
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-scatter
-  sparkline:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/getting-started
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-sparkline
-  step:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/getting-started
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-step
-  tree:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/complex-charts#tree-diagrams
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/complex-charts-tree
-  treemap:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/complex-charts#tree-maps
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/complex-charts-treemap
-  word-cloud:
-    status: stable
-    framework: angular
-    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#word-cloud
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-word-cloud

package/ng-package.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "./dist",
-  "lib": {
-    "entryFile": "src/index.ts"
-  },
-  "allowedNonPeerDependencies": [
-    "@angular/common",
-    "@angular/core",
-    "@carbon/charts",
-    "@carbon/icons-angular",
-    "@carbon/telemetry"
-  ]
-}

package/src/index.ts

@@ -1,53 +0,0 @@
-/*
- * 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

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

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

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

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

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

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

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

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

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