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

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)
+	}
+}

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

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

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

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

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

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

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

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

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

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

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

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

package/src/lib/charts/index.ts

@@ -0,0 +1,28 @@
+export { AlluvialChartComponent } from './alluvial-chart.component'
+export { AreaChartComponent } from './area-chart.component'
+export { BaseChartComponent } from './base-chart.component'
+export { BoxplotChartComponent } from './boxplot-chart.component'
+export { BubbleChartComponent } from './bubble-chart.component'
+export { BulletChartComponent } from './bullet-chart.component'
+export { CirclePackChartComponent } from './circle-pack-chart.component'
+export { ComboChartComponent } from './combo-chart.component'
+export { DonutChartComponent } from './donut-chart.component'
+export { ExperimentalChoroplethChartComponent } from './choropleth.component'
+export { GaugeChartComponent } from './gauge-chart.component'
+export { GroupedBarChartComponent } from './bar-chart-grouped.component'
+export { HeatmapChartComponent } from './heatmap-chart.component'
+export { HistogramChartComponent } from './histogram-chart.component'
+export { LineChartComponent } from './line-chart.component'
+export { LollipopChartComponent } from './lollipop-chart.component'
+export { MeterChartComponent } from './meter-chart.component'
+export { PieChartComponent } from './pie-chart.component'
+export { RadarChartComponent } from './radar-chart.component'
+export { ScatterChartComponent } from './scatter-chart.component'
+export { SimpleBarChartComponent } from './bar-chart-simple.component'
+export { StackedAreaChartComponent } from './area-chart-stacked.component'
+export { StackedBarChartComponent } from './bar-chart-stacked.component'
+export { TreeChartComponent } from './tree-chart.component'
+export { TreemapChartComponent } from './treemap-chart.component'
+export { WordCloudChartComponent } from './wordcloud-chart.component'
+
+export { ChartsModule } from './charts.module'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/lib/diagrams/config.ts

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

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

@@ -0,0 +1,41 @@
+import { Component, Input } from '@angular/core'
+import { buildStraightPathString } from '@carbon/charts'
+
+import { carbonPrefix } from '../config'
+
+interface Coordinates {
+	x: number
+	y: number
+}
+@Component({
+	selector: 'ibm-graph-edge, [ibm-graph-edge]',
+	template: `
+		<svg:g [ngClass]="[namespace, variant ? namespace + '--' + variant : '']">
+			<svg:path
+				[ngClass]="namespace + '__container'"
+				[attr.d]="path ? path : straight(source, target)" />
+			<svg:path
+				[ngClass]="namespace + '__outer'"
+				[attr.d]="path ? path : straight(source, target)" />
+			<svg:path
+				[ngClass]="namespace + '__inner'"
+				[attr.d]="path ? path : straight(source, target)"
+				[ngStyle]="{ stroke: color }"
+				[attr.marker-start]="markerStart ? 'url(#' + markerStart + ')' : ''"
+				[attr.marker-end]="markerEnd ? 'url(#' + markerEnd + ')' : ''" />
+		</svg:g>
+	`
+})
+export class EdgeComponent {
+	@Input() color = ''
+	@Input() markerEnd = ''
+	@Input() markerStart = ''
+	@Input() source: Coordinates = { x: 0, y: 0 }
+	@Input() target: Coordinates = { x: 0, y: 0 }
+	@Input() variant?: 'dash-sm' | 'dash-md' | 'dash-lg' | 'dash-xl' | 'double' | 'tunnel'
+	@Input() path = ''
+
+	pathClasses = ''
+	namespace = `${carbonPrefix}--cc--edge`
+	straight = buildStraightPathString
+}

package/src/lib/diagrams/edges/edge.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { EdgeComponent } from './edge.component'
+export { EdgeComponent } from './edge.component'
+
+@NgModule({
+	declarations: [EdgeComponent],
+	imports: [CommonModule],
+	exports: [EdgeComponent]
+})
+export class EdgeModule {}