@carbon/charts-angular 0.58.1 → 0.59.0-beta.0

package/src/scatter-chart.component.ts

@@ -0,0 +1,34 @@
+import {
+	Component,
+	AfterViewInit
+} from "@angular/core";
+
+import { BaseChart } from "./base-chart.component";
+
+import { ScatterChart } 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 BaseChart implements AfterViewInit {
+	/**
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
+	 */
+	ngAfterViewInit() {
+		this.chart = new ScatterChart(
+			this.elementRef.nativeElement,
+			{
+				data: this.data,
+				options: this.options
+			}
+		);
+
+		Object.assign(this, this.chart);
+	}
+}

package/src/tree-chart.component.ts

@@ -0,0 +1,34 @@
+import {
+	Component,
+	AfterViewInit
+} from "@angular/core";
+
+import { BaseChart } from "./base-chart.component";
+
+import { TreeChart } 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 BaseChart implements AfterViewInit {
+	/**
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
+	 */
+	ngAfterViewInit() {
+		this.chart = new TreeChart(
+			this.elementRef.nativeElement,
+			{
+				data: this.data,
+				options: this.options
+			}
+		);
+
+		Object.assign(this, this.chart);
+	}
+}

package/src/treemap-chart.component.ts

@@ -0,0 +1,34 @@
+import {
+	Component,
+	AfterViewInit
+} from "@angular/core";
+
+import { BaseChart } from "./base-chart.component";
+
+import { TreemapChart } 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 BaseChart implements AfterViewInit {
+	/**
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
+	 */
+	ngAfterViewInit() {
+		this.chart = new TreemapChart(
+			this.elementRef.nativeElement,
+			{
+				data: this.data,
+				options: this.options
+			}
+		);
+
+		Object.assign(this, this.chart);
+	}
+}

package/src/wordcloud-chart.component.ts

@@ -0,0 +1,34 @@
+import {
+	Component,
+	AfterViewInit
+} from "@angular/core";
+
+import { BaseChart } from "./base-chart.component";
+
+import { WordCloudChart } 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 BaseChart implements AfterViewInit {
+	/**
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
+	 */
+	ngAfterViewInit() {
+		this.chart = new WordCloudChart(
+			this.elementRef.nativeElement,
+			{
+				data: this.data,
+				options: this.options
+			}
+		);
+
+		Object.assign(this, this.chart);
+	}
+}

package/stories/all.stories.ts

@@ -0,0 +1,99 @@
+import { storiesOf } from '@storybook/angular';
+import { withKnobs, object } from '@storybook/addon-knobs';
+
+import { ChartsModule } from '../src/charts.module';
+
+import { storybookDemoGroups } from '@carbon/charts/demo/data';
+
+const getTemplate = (demo) => `
+	<div class="container theme--white">
+		<div class="v10-banner">
+			This version relies on <b>Carbon v11</b>. If you're using Carbon v10, <a href="https://carbon-charts-0x.netlify.app" target="_blank" rel="noreferrer">see the legacy demo site</a>
+		</div>
+
+		<h3>
+			<b>Component:</b>
+			<span class="cds--tag cds--tag--green component-name">${demo.chartType.angular}</span>
+		</h3>
+		<p class="props"><b>Props:</b> data, <a href="https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html" target="_blank">options</a></p>
+
+		<div class="marginTop-30" id="chart-demo">
+			<${demo.chartType.angular}
+				class="n-chart"
+				[data]="data"
+				[options]="options"
+				#${demo.chartType.vanilla}>
+			</${demo.chartType.angular}>
+		</div>
+
+
+		<h3 class="marginTop-30">Code sample</h3>
+
+		<div class="marginTop-30" *ngFor="let codeFile of codeFiles;">
+			<h5>{{codeFile}}</h5>
+
+			<div class="cds--snippet cds--snippet--multi cds--snippet--expand marginTop-15" data-code-snippet>
+				<div class="cds--snippet-container" aria-label="Code Snippet Text">
+					<pre><code>{{code[codeFile]}}</code></pre>
+				</div>
+			</div>
+		</div>
+	</div>
+`;
+
+const introStories = storiesOf('Intro', module).addDecorator(withKnobs);
+
+// Loop through the demos for the group
+introStories.add('Welcome', () => ({
+	template: `<div class="container intro">
+	<div
+	class="welcome__container"
+	style="
+	  background: url(./welcome.png) no-repeat center center fixed;
+	  background-size: cover;
+	">
+		<div class="welcome__content">
+			<h2 class="welcome__heading">Carbon Charts</h2>
+			<h4 class="welcome__heading welcome__heading--subtitle">(Angular)</h4>
+
+			<h5 class="welcome__heading welcome__heading--other">Other versions</h5>
+			<ul>
+				<li><a href="https://charts.carbondesignsystem.com" class="welcome__heading welcome__heading--other">vanilla</a></li>
+				<li><a href="https://charts.carbondesignsystem.com/react" class="welcome__heading welcome__heading--other">React</a></li>
+				<li><a href="https://charts.carbondesignsystem.com/vue" class="welcome__heading welcome__heading--other">Vue</a></li>
+				<li><a href="https://charts.carbondesignsystem.com/svelte" class="welcome__heading welcome__heading--other">Svelte</a></li>
+			</ul>
+
+			<span class="netlify">Deploys by <a href="https://netlify.com" target="_blank">Netlify</a></span>
+		</div>
+	</div>
+</div>`,
+}));
+
+// Loop through all demo groups
+storybookDemoGroups.forEach((demoGroup) => {
+	// Create story group for each demo group
+	const groupStories = storiesOf(
+		`${demoGroup.storyGroupTitle}|${demoGroup.title}`,
+		module
+	).addDecorator(withKnobs({ escapeHTML: false }));
+
+	// Loop through the demos for the group
+	demoGroup.demos.forEach((demo) => {
+		if (demo.isHighScale) {
+			return;
+		}
+		groupStories.add(demo.title, () => ({
+			template: getTemplate(demo),
+			moduleMetadata: {
+				imports: [ChartsModule],
+			},
+			props: {
+				data: object('Data', demo.data),
+				options: object('Options', demo.options),
+				codeFiles: Object.keys(demo.code.angular),
+				code: demo.code.angular,
+			},
+		}));
+	});
+});

package/stories/diagrams/0_diagram.stories.ts

@@ -0,0 +1,224 @@
+import { storiesOf, moduleMetadata } from '@storybook/angular';
+import { ShapeNodeModule } from '../../src/diagrams/shape-node/shape-node.module';
+import { CardNodeModule } from '../../src/diagrams/card-node/card-node.module';
+import { EdgeModule } from '../../src/diagrams/edge/edge.module';
+import { MarkerModule } from '../../src/diagrams/marker/marker.module';
+
+import { UserModule, WikisModule } from '@carbon/icons-angular';
+import { buildElbowPathString } from '@carbon/charts/components/diagrams/buildPaths';
+
+const nodeHeight = 64;
+const nodeWidth = 200;
+const circleSize = 64;
+
+const stories = storiesOf('Diagrams/', module);
+stories.addDecorator(
+	moduleMetadata({
+		imports: [
+			ShapeNodeModule,
+			CardNodeModule,
+			EdgeModule,
+			MarkerModule,
+			UserModule,
+			WikisModule,
+		],
+	})
+);
+
+const getTemplate = (demo) => `
+	<div class="container theme--white">
+		${demo}
+	</div>
+`;
+
+stories.add('Start here', () => ({
+	template: getTemplate(`
+		<div>
+			<h1>Diagrams</h1>
+
+			<p style='max-width: 600px; font-size: 1rem; font-weight: 400; line-height: 1.5; letter-spacing: 0'>
+				Angular components for building diagram experiences, using the Carbon Design System.
+			</p>
+
+			<p style='max-width: 600px; font-size: 1rem; font-weight: 400; line-height: 1.5; letter-spacing: 0'>
+			<b>Note that Carbon Charts does not provide layouts for diagrams.
+			You can utilize these components alongside graphing libraries,
+			or by composing your own layouts (see section 3).</b>
+			</p>
+
+			<h2 style='padding-top: 2rem'>Examples</h2>
+
+			<h3 style='padding-top: 1rem'>1. Simple static layout</h3>
+
+			<p style='max-width: 600px; font-size: 1rem; font-weight: 400; line-height: 1.5; letter-spacing: 0'>
+			A simple composed diagram, using statically defined x and y
+			coordinates.
+			<a href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/angular/stories/diagrams/0_diagram.stories.ts">
+				View source
+			</a>
+			</p>
+
+			${SimpleStatic}
+
+			<h3 style='padding-top: 1rem'>2. Programmatic static layout</h3>
+
+			<p style='max-width: 600px; font-size: 1rem; font-weight: 400; line-height: 1.5; letter-spacing: 0'>
+				A composed diagram, rendered using arrays of statically defined
+				x and y coordinates.
+				<a href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/angular/stories/diagrams/0_diagram.stories.ts">
+					View source
+				</a>
+			</p>
+
+			${ProgrammaticStatic}
+
+			<h3 style='padding-top: 1rem'>3. Layouts using external dependencies</h3>
+
+			<p>Here's an example using <b>elkjs</b> in <b><u>react</u></b></p>
+
+			<iframe
+				src="https://codesandbox.io/embed/carbon-charts-react-elkjs-diagram-b9xyp?fontsize=14&hidenavigation=1&theme=dark&view=preview"
+				style="width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden; margin-top: 2em;"
+				title="carbon-charts-react-elkjs-diagram"
+				allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+				sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
+		</div>
+	`),
+	props: {
+		source: { x: 0, y: 48 },
+		target: { x: 396, y: 48 },
+		markerEnd: 'marker',
+		nodeHeight,
+		nodeWidth,
+		circleSize,
+		nodeData,
+		edgeMapped,
+	},
+}));
+
+const SimpleStatic = `
+	<div class="demo-desktop-only">
+		<div class="cp-message">This is a desktop-only example</div>
+
+		<svg height="124" width="600" style="margin-top: 1em;" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+			<svg:defs>
+				<svg:marker ibm-graph-marker-arrow-right [id]="markerEnd"></svg:marker>
+			</svg:defs>
+
+			<svg:g ibm-graph-edge [source]="source" [target]="target" variant="dash-sm" [markerEnd]="markerEnd" ></svg:g>
+
+			<svg:foreignObject style="overflow: visible" [attr.height]="nodeHeight" [attr.width]="nodeWidth" [attr.transform]="'translate(0, 16)'">
+				<xhtml:div>
+					<ibm-diagram-card-node as="button">
+						<ibm-diagram-card-node-column>
+							<svg ibmIconUser size="20"></svg>
+						</ibm-diagram-card-node-column>
+						<ibm-diagram-card-node-column>
+							<ibm-diagram-card-node-title>
+								Title
+							</ibm-diagram-card-node-title>
+							<ibm-diagram-card-node-subtitle>
+								Description
+							</ibm-diagram-card-node-subtitle>
+						</ibm-diagram-card-node-column>
+					</ibm-diagram-card-node>
+				</xhtml:div>
+			</svg:foreignObject>
+
+			<svg:foreignObject style="overflow: visible" [attr.height]="nodeHeight" [attr.width]="nodeWidth" [attr.transform]="'translate(400, 16)'">
+				<xhtml:div>
+					<ibm-diagram-shape-node as="button" title="Title" [size]="circleSize" [renderIcon]="wikiTemplate"></ibm-diagram-shape-node>
+				</xhtml:div>
+			</svg:foreignObject>
+		</svg>
+
+		<ng-template #wikiTemplate>
+			<svg ibmIconWikis size="20"></svg>
+		</ng-template>
+	</div>
+`;
+
+const nodeData = [
+	{ id: 'a', x: 0, y: 16, icon: 'user', nodeWidth, nodeHeight },
+	{ id: 'b', x: 250, y: 16, icon: 'wiki', nodeWidth, nodeHeight },
+	{
+		id: 'c',
+		x: 600,
+		y: 200,
+		icon: 'user',
+		circle: true,
+		nodeWidth: circleSize,
+		nodeHeight: circleSize,
+	},
+	{ id: 'd', x: 0, y: 150, icon: 'wiki', nodeWidth, nodeHeight },
+];
+
+const edgeData = [
+	{ source: 'a', target: 'b', variant: 'dash-md' },
+	{
+		source: 'c',
+		target: 'b',
+		path: (source, target) => buildElbowPathString(source, target),
+	},
+	{
+		source: 'd',
+		target: 'c',
+		path: (source, target) => buildElbowPathString(source, target),
+		variant: 'tunnel',
+	},
+];
+
+const edgeMapped = edgeData.map((link) => {
+	const sourceNode = nodeData.find((node) => node.id === link.source);
+	const targetNode = nodeData.find((node) => node.id === link.target);
+
+	return {
+		...link,
+		source: {
+			x: sourceNode.x + sourceNode.nodeWidth / 2,
+			y: sourceNode.y + sourceNode.nodeHeight / 2,
+		},
+		target: {
+			x: targetNode.x + targetNode.nodeWidth / 2,
+			y: targetNode.y + targetNode.nodeHeight / 2,
+		},
+	};
+});
+
+const ProgrammaticStatic = `
+	<div class="demo-desktop-only">
+		<div class="cp-message">This is a desktop-only example</div>
+
+		<svg height="320" width="800" style="margin-top: 1.5em;" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+			<svg:g ibm-graph-edge *ngFor="let edge of edgeMapped" [source]="edge.source" [target]="edge.target" [path]="edge.path && edge.path(edge.source, edge.target)" [variant]="edge.variant"></svg:g>
+			<svg:foreignObject *ngFor="let node of nodeData" style="overflow: visible" [attr.height]="node.nodeHeight" [attr.width]="node.nodeWidth" attr.transform="translate({{node.x}},{{node.y}})">
+				<xhtml:div *ngIf="node.circle">
+					<ibm-diagram-shape-node as="button" [title]="'Title'" [subtitle]="'Description'" [size]="circleSize" [renderIcon]="(node.icon === 'user') ? userTemplate : wikiTemplate"></ibm-diagram-shape-node>
+				</xhtml:div>
+				<xhtml:div *ngIf="!node.circle">
+					<ibm-diagram-card-node as="button">
+						<ibm-diagram-card-node-column>
+							<svg ibmIconUser size="20"></svg>
+						</ibm-diagram-card-node-column>
+						<ibm-diagram-card-node-column>
+							<ibm-diagram-card-node-title>
+								Title
+							</ibm-diagram-card-node-title>
+							<ibm-diagram-card-node-subtitle>
+								Description
+							</ibm-diagram-card-node-subtitle>
+						</ibm-diagram-card-node-column>
+					</ibm-diagram-card-node>
+				</xhtml:div>
+			</svg:foreignObject>
+		</svg>
+
+		<ng-template #userTemplate>
+			<svg ibmIconUser size="20"></svg>
+		</ng-template>
+
+		<ng-template #wikiTemplate>
+			<svg ibmIconWikis size="20"></svg>
+		</ng-template>
+	</div>
+`;

package/stories/diagrams/card-node.stories.ts

@@ -0,0 +1,181 @@
+import { storiesOf, moduleMetadata } from '@storybook/angular';
+import { CardNodeModule } from '../../src/diagrams/card-node/card-node.module';
+import { ScreenModule, ChevronDownModule } from '@carbon/icons-angular';
+
+const getTemplate = (demo) => `
+	<div class="container theme--white" style="max-width: 400px;">
+		${demo}
+	</div>
+`;
+
+storiesOf('Diagrams|Nodes/Card', module)
+	.addDecorator(
+		moduleMetadata({
+			imports: [CardNodeModule, ScreenModule, ChevronDownModule],
+		})
+	)
+	.add('Default', () => ({
+		template: getTemplate(`
+		<ibm-diagram-card-node>
+			<ibm-diagram-card-node-column>
+				<ibm-diagram-card-node-title>
+					{{ title }}
+				</ibm-diagram-card-node-title>
+				<ibm-diagram-card-node-subtitle>
+					{{ description }}
+				</ibm-diagram-card-node-subtitle>
+			</ibm-diagram-card-node-column>
+		</ibm-diagram-card-node>
+	`),
+		props: {
+			title: 'Title',
+			description: 'Description',
+		},
+	}))
+	.add('Stacked', () => ({
+		template: getTemplate(`
+		<ibm-diagram-card-node [stacked]="stacked">
+			<ibm-diagram-card-node-column>
+				<ibm-diagram-card-node-title>
+					{{ title }}
+				</ibm-diagram-card-node-title>
+				<ibm-diagram-card-node-subtitle>
+					{{ description }}
+				</ibm-diagram-card-node-subtitle>
+			</ibm-diagram-card-node-column>
+		</ibm-diagram-card-node>
+	`),
+		props: {
+			title: 'Title',
+			description: 'Description',
+			stacked: true,
+		},
+	}))
+	.add('Color', () => ({
+		template: getTemplate(`
+	<ibm-diagram-card-node [color]="color">
+		<ibm-diagram-card-node-column>
+			<ibm-diagram-card-node-title>
+				{{ title }}
+			</ibm-diagram-card-node-title>
+			<ibm-diagram-card-node-subtitle>
+				{{ description }}
+			</ibm-diagram-card-node-subtitle>
+		</ibm-diagram-card-node-column>
+	</ibm-diagram-card-node>
+	`),
+		props: {
+			title: 'Title',
+			description: 'Description',
+			color: '#8a3ffc',
+		},
+	}))
+	.add('With icon', () => ({
+		template: getTemplate(`
+	<ibm-diagram-card-node [color]="color">
+		<ibm-diagram-card-node-column>
+			<svg ibmIconScreen size="16"></svg>
+		</ibm-diagram-card-node-column>
+		<ibm-diagram-card-node-column>
+			<ibm-diagram-card-node-title>
+				{{ title }}
+			</ibm-diagram-card-node-title>
+			<ibm-diagram-card-node-subtitle>
+				{{ description }}
+			</ibm-diagram-card-node-subtitle>
+		</ibm-diagram-card-node-column>
+	</ibm-diagram-card-node>
+	`),
+		props: {
+			title: 'Title',
+			description: 'Description',
+		},
+	}))
+	.add('As button', () => ({
+		template: getTemplate(`
+	<ibm-diagram-card-node [as]="component">
+		<ibm-diagram-card-node-column>
+			<ibm-diagram-card-node-title>
+				{{ title }}
+			</ibm-diagram-card-node-title>
+			<ibm-diagram-card-node-subtitle>
+				{{ description }}
+			</ibm-diagram-card-node-subtitle>
+		</ibm-diagram-card-node-column>
+	</ibm-diagram-card-node>
+	`),
+		props: {
+			title: 'Title',
+			description: 'Description',
+			component: 'button',
+		},
+	}))
+	.add('As link', () => ({
+		template: getTemplate(`
+	<ibm-diagram-card-node [href]="href">
+		<ibm-diagram-card-node-column>
+			<ibm-diagram-card-node-title>
+				{{ title }}
+			</ibm-diagram-card-node-title>
+			<ibm-diagram-card-node-subtitle>
+				{{ description }}
+			</ibm-diagram-card-node-subtitle>
+		</ibm-diagram-card-node-column>
+	</ibm-diagram-card-node>
+	`),
+		props: {
+			title: 'Title',
+			description: 'Description',
+			href: '#',
+		},
+	}))
+	.add('With label', () => ({
+		template: getTemplate(`
+	<ibm-diagram-card-node [color]="color">
+		<ibm-diagram-card-node-column>
+			<svg ibmIconScreen size="16"></svg>
+		</ibm-diagram-card-node-column>
+		<ibm-diagram-card-node-column>
+			<ibm-diagram-card-node-title>
+				{{ title }}
+			</ibm-diagram-card-node-title>
+			<ibm-diagram-card-node-subtitle>
+				{{ description }}
+			</ibm-diagram-card-node-subtitle>
+			<ibm-diagram-card-node-label>
+				{{ label }}
+			</ibm-diagram-card-node-label>
+		</ibm-diagram-card-node-column>
+	</ibm-diagram-card-node>
+	`),
+		props: {
+			title: 'Title',
+			description: 'Description',
+			label: 'Label',
+		},
+	}))
+	.add('With action', () => ({
+		template: getTemplate(`
+	<ibm-diagram-card-node [color]="color">
+		<ibm-diagram-card-node-column>
+			<svg ibmIconScreen size="16"></svg>
+		</ibm-diagram-card-node-column>
+		<ibm-diagram-card-node-column>
+			<ibm-diagram-card-node-title>
+				{{ title }}
+			</ibm-diagram-card-node-title>
+			<ibm-diagram-card-node-subtitle>
+				{{ description }}
+			</ibm-diagram-card-node-subtitle>
+		</ibm-diagram-card-node-column>
+		<ibm-diagram-card-node-column [farsideColumn]="farsideColumn">
+			<svg ibmIconChevronDown size="16"></svg>
+		</ibm-diagram-card-node-column>
+	</ibm-diagram-card-node>
+	`),
+		props: {
+			title: 'Title',
+			description: 'Description',
+			farsideColumn: true,
+		},
+	}));