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

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

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

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

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