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

package/src/stories/diagrams/0-diagrams-start-here.stories.ts

@@ -0,0 +1,219 @@
+import { storiesOf, moduleMetadata } from '@storybook/angular'
+import { buildElbowPathString, type Coordinates } from '@carbon/charts'
+import { UserModule, WikisModule } from '@carbon/icons-angular'
+import { CardNodeModule, EdgeModule, MarkerModule, ShapeNodeModule } from '../../'
+import { getTemplate } from './utils'
+
+const nodeHeight = 64
+const nodeWidth = 200
+const circleSize = 64
+
+const stories = storiesOf('Diagrams', module)
+stories.addDecorator(
+	moduleMetadata({
+		imports: [ShapeNodeModule, CardNodeModule, EdgeModule, MarkerModule, UserModule, WikisModule]
+	})
+)
+
+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
+		}
+	}),
+	{
+		controls: {
+			hideNoControlsWarning: true
+		}
+	}
+)
+
+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: Coordinates, target: Coordinates) => buildElbowPathString(source, target)
+	},
+	{
+		source: 'd',
+		target: 'c',
+		path: (source: Coordinates, target: Coordinates) => 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)
+
+	if (!sourceNode || !targetNode)
+		throw new Error('Either sourceNode or targetNode were not defined.')
+
+	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/src/stories/diagrams/diagrams-edges-marker.stories.ts

@@ -0,0 +1,189 @@
+import { storiesOf, moduleMetadata } from '@storybook/angular'
+import { EdgeModule, MarkerModule } from '../../'
+import { getTemplate } from './utils'
+
+const linkSource = { x: 0, y: 0 }
+const linkTarget = { x: 300, y: 0 }
+
+storiesOf('Diagrams/Edges/Marker', module)
+	.addDecorator(
+		moduleMetadata({
+			imports: [MarkerModule, EdgeModule]
+		})
+	)
+	.add(
+		'Arrow left',
+		() => ({
+			template: getTemplate(`
+		<svg height="400" width="400">
+			<svg:defs>
+				<svg:marker ibm-graph-marker-arrow-left [id]="markerStart"></svg:marker>
+			</svg:defs>
+			<svg:g transform="translate(16,16)">
+				<svg:g ibm-graph-edge [source]="source" [target]="target" [markerStart]="markerStart"></svg:g>
+			</svg:g>
+		</svg>
+	`),
+			props: {
+				source: linkSource,
+				target: linkTarget,
+				markerStart: 'marker'
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'Arrow Right',
+		() => ({
+			template: getTemplate(`
+		<svg height="400" width="400">
+			<svg:defs>
+				<svg:marker ibm-graph-marker-arrow-right [id]="markerEnd"></svg:marker>
+			</svg:defs>
+			<svg:g transform="translate(16,16)">
+				<svg:g ibm-graph-edge [source]="source" [target]="target" [markerEnd]="markerEnd"></svg:g>
+			</svg:g>
+		</svg>
+	`),
+			props: {
+				source: linkSource,
+				target: linkTarget,
+				markerEnd: 'marker'
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'Circle',
+		() => ({
+			template: getTemplate(`
+		<svg height="400" width="400">
+			<svg:defs>
+				<svg:marker ibm-graph-marker-circle [id]="markerStart"></svg:marker>
+			</svg:defs>
+			<svg:g transform="translate(16,16)">
+				<svg:g ibm-graph-edge [source]="source" [target]="target" [markerStart]="markerStart"></svg:g>
+			</svg:g>
+		</svg>
+	`),
+			props: {
+				source: linkSource,
+				target: linkTarget,
+				markerStart: 'marker'
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'Diamond',
+		() => ({
+			template: getTemplate(`
+		<svg height="400" width="400">
+			<svg:defs>
+				<svg:marker ibm-graph-marker-diamond [id]="markerStart"></svg:marker>
+			</svg:defs>
+			<svg:g transform="translate(16,16)">
+				<svg:g ibm-graph-edge [source]="source" [target]="target" [markerStart]="markerStart"></svg:g>
+			</svg:g>
+		</svg>
+	`),
+			props: {
+				source: linkSource,
+				target: linkTarget,
+				markerStart: 'marker'
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'Square',
+		() => ({
+			template: getTemplate(`
+		<svg height="400" width="400">
+			<svg:defs>
+				<svg:marker ibm-graph-marker-square [id]="markerStart"></svg:marker>
+			</svg:defs>
+			<svg:g transform="translate(16,16)">
+				<svg:g ibm-graph-edge [source]="source" [target]="target" [markerStart]="markerStart"></svg:g>
+			</svg:g>
+		</svg>
+	`),
+			props: {
+				source: linkSource,
+				target: linkTarget,
+				markerStart: 'marker'
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'Tee',
+		() => ({
+			template: getTemplate(`
+		<svg height="400" width="400">
+			<svg:defs>
+				<svg:marker ibm-graph-marker-tee [id]="markerStart"></svg:marker>
+			</svg:defs>
+			<svg:g transform="translate(16,16)">
+				<svg:g ibm-graph-edge [source]="source" [target]="target" [markerStart]="markerStart"></svg:g>
+			</svg:g>
+		</svg>
+	`),
+			props: {
+				source: linkSource,
+				target: linkTarget,
+				markerStart: 'marker'
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'Color',
+		() => ({
+			template: getTemplate(`
+		<svg height="400" width="400">
+			<svg:defs>
+				<svg:marker ibm-graph-marker-tee [id]="markerStart" [color]="color" ></svg:marker>
+			</svg:defs>
+			<svg:g transform="translate(16,16)">
+				<svg:g ibm-graph-edge [source]="source" [target]="target" [markerStart]="markerStart" [color]="color"></svg:g>
+			</svg:g>
+		</svg>
+	`),
+			props: {
+				source: linkSource,
+				target: linkTarget,
+				markerStart: 'marker',
+				color: '#FB4B53'
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)

package/src/stories/diagrams/diagrams-edges.stories.ts

@@ -0,0 +1,177 @@
+import { storiesOf, moduleMetadata } from '@storybook/angular'
+import { EdgeModule } from '../../'
+import { buildBezierPathString, buildElbowPathString } from '@carbon/charts'
+import { getTemplate } from './utils'
+
+const linkSource = { x: 0, y: 0 }
+const linkTarget = { x: 400, y: 0 }
+const linkTargetCurve = { x: 400, y: 200 }
+
+storiesOf('Diagrams/Edges', module)
+	.addDecorator(
+		moduleMetadata({
+			imports: [EdgeModule]
+		})
+	)
+	.add(
+		'Default',
+		() => ({
+			template: getTemplate(`
+		<svg height="800" width="800">
+			<g transform="translate(16,16)">
+				<g ibm-graph-edge [source]="source" [target]="target"></g>
+			</g>
+		</svg>
+	`),
+			props: {
+				source: linkSource,
+				target: linkTarget
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'Color',
+		() => ({
+			template: getTemplate(`
+		<svg height="800" width="800">
+			<g transform="translate(16,16)">
+				<g ibm-graph-edge [color]="color" [source]="source" [target]="target"></g>
+			</g>
+		</svg>
+	`),
+			props: {
+				color: '#FB4B53',
+				source: linkSource,
+				target: linkTarget
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'Dashed',
+		() => ({
+			template: getTemplate(`
+		<svg height="800" width="800">
+			<g transform="translate(16,16)">
+				<g ibm-graph-edge [source]="source" [target]="target" variant='dash-sm' />
+			</g>
+
+			<g transform="translate(16,32)">
+				<g ibm-graph-edge [source]="source" [target]="target" variant='dash-md' />
+			</g>
+
+			<g transform="translate(16,48)">
+				<g ibm-graph-edge [source]="source" [target]="target" variant='dash-lg' />
+			</g>
+
+			<g transform="translate(16,64)">
+				<g ibm-graph-edge [source]="source" [target]="target" variant='dash-xl' />
+			</g>
+		</svg>
+	`),
+			props: {
+				source: linkSource,
+				target: linkTarget
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'Double',
+		() => ({
+			template: getTemplate(`
+		<svg height="800" width="800">
+			<g transform="translate(16,16)">
+				<g ibm-graph-edge [source]="source" [target]="target" variant='double' />
+			</g>
+		</svg>
+	`),
+			props: {
+				source: linkSource,
+				target: linkTarget
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'Tunnel',
+		() => ({
+			template: getTemplate(`
+		<svg height="800" width="800">
+			<g transform="translate(16,16)">
+				<g ibm-graph-edge [source]="source" [target]="target" variant='tunnel' />
+			</g>
+		</svg>
+	`),
+			props: {
+				source: linkSource,
+				target: linkTarget
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'Elbow',
+		() => ({
+			template: getTemplate(`
+		<svg height="800" width="800">
+			<g transform="translate(16,16)">
+				<g ibm-graph-edge [source]="source" [target]="target" [path]="path" />
+			</g>
+		</svg>
+	`),
+			props: {
+				source: linkSource,
+				target: linkTarget,
+				path: buildElbowPathString(linkSource, linkTargetCurve)
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'Bezier',
+		() => ({
+			template: getTemplate(`
+		<svg height="800" width="800">
+			<g transform="translate(16,16)">
+				<g ibm-graph-edge [source]="source" [target]="target" [path]="path" />
+			</g>
+		</svg>
+	`),
+			props: {
+				source: linkSource,
+				target: linkTarget,
+				path: buildBezierPathString(linkSource, linkTargetCurve, 150, 280, 150, 30)
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)