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

package/stories/1_gettingStarted_content.js

@@ -0,0 +1,121 @@
+import marked from 'marked';
+
+export const reactGettingStartedTutorial = {
+  name: 'React',
+  type: 'getting-started',
+  content: marked(`
+# Carbon Charts - React
+
+The Carbon Charts library provides a collection of reusable charting components to
+build websites and user interfaces.
+
+Adopting the library enables developers to use
+consistent markup, styles, and behavior in prototype and production work.
+
+ 
+## Install
+
+**with yarn:**
+\`\`\`bash
+yarn add @carbon/charts-react d3
+\`\`\`
+
+**with npm:**
+\`\`\`bash
+npm install --save @carbon/charts-react d3
+\`\`\`
+
+**Note:** you'd also need to install \`carbon-components\` if you're not using a bundled version of the library.
+
+ 
+## Getting started
+
+To start using the \`StackedBarChart\` component, try the example below:
+ 
+
+
+\`\`\`ts
+import React from "react";
+
+import { StackedBarChart } from "@carbon/charts-react";
+import "@carbon/charts/styles.css";
+// Or
+// import '@carbon/charts/styles/styles.scss';
+
+function App() {
+	const [stackedBarData, setStackedBarData] = React.useState([
+		// refer to tabular data format tutorial
+	]);
+
+	const [stackedBarOptions, setStackedBarOptions] = React.useState([
+		// refer to chart specific options
+	]);
+
+	return (
+		<div className="App">
+			<StackedBarChart
+				data={stackedBarData}
+				options={stackedBarOptions}
+			/>
+		</div>
+	);
+}
+
+// ...
+\`\`\`
+
+&nbsp;
+## Data
+Data follows almost the same model in all charts.
+See tutorial on tabular data format for more information on chart data.
+
+&nbsp;
+## Options
+
+You can see the options for all charts
+[here](https://charts.carbondesignsystem.com/documentation/modules/_interfaces_charts_.html).
+
+&nbsp;
+## Demos and Examples
++ **[Storybook - Story Sources](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/react/stories)**
++ **[Storybook - Data & options used](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data)**
+
+&nbsp;
+## Guidance
+
+Please refer to the
+[Carbon Design Systems guidance](https://www.carbondesignsystem.com/data-visualization/chart-types)
+on using the different charts available in this library.
+
+&nbsp;
+## Development
+Please refer to the
+[Contribution Guidelines](https://github.com/carbon-design-system/carbon-charts/blob/master/CONTRIBUTING.md)
+before starting any work.
+
+#### Using the server
+We recommend the use of [React Storybook](https://github.com/storybookjs/storybook/tree/next/app/react)
+for developing components.
+
+**Start the server:**
+\`\`\`bash
+cd packages/react
+yarn run storybook
+\`\`\`
+
+Open browser to \`http://localhost:9006/\`.
+
+&nbsp;
+## List of available components
+View available components [here](https://github.com/carbon-design-system/carbon-charts#component-status)
+
+&nbsp;
+## Troubleshoot
+
+If you experience any issues while getting set up with Carbon Charts, please head over to
+the [GitHub repo](https://github.com/carbon-design-system/carbon-charts)
+for more guidelines and support.
+Please [create an issue](https://github.com/carbon-design-system/carbon-charts/issues)
+if your issue does not already exist.
+`),
+};

package/stories/all.stories.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, object } from '@storybook/addon-knobs';
+
+import * as ChartComponents from '../dist/index';
+import * as storyUtils from '@carbon/charts/demo/utils';
+
+import { storybookDemoGroups } from '@carbon/charts/demo/data';
+import * as Configuration from '@carbon/charts/configuration';
+const colorPairingOptions = Configuration.color.pairingOptions;
+
+// 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;
+		}
+		const DemoComponent = ChartComponents[demo.chartType.vanilla];
+		groupStories.add(demo.title, () => {
+			/* Storybook seems to be skipping re-render when chartRef starts
+			 * populating, adding this as a quick hack */
+			const [update, setUpdate] = React.useState(false);
+
+			const demoRef = React.useRef(null);
+			const chartRef = React.useRef(null);
+
+			if (demoRef.current && chartRef.current) {
+				const container = demoRef.current;
+				const chart = chartRef.current.chart;
+
+				storyUtils.addControls(container, demoGroup, chart, {
+					colorPairingOptions,
+				});
+
+				storyUtils.addOtherVersions(container, demoGroup, demo, {
+					currentVersion: 'react',
+				});
+			}
+
+			React.useEffect(() => {
+				setUpdate(!update);
+			}, [demoRef, chartRef]);
+
+			return (
+				<div className="container theme--g100" ref={demoRef}>
+					<div className="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 className="cds--tag cds--tag--green component-name">{`<${demo.chartType.vanilla} />`}</span>
+					</h3>
+
+					<p className="props">
+						<b>Props:</b>{' '}
+						<a href="/?path=/story/docs-tutorials--tabular-data-format">
+							data
+						</a>
+						,{' '}
+						<a
+							href="https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html"
+							target="_blank">
+							options
+						</a>
+					</p>
+
+					<div id="charting-controls"></div>
+
+					<div className="marginTop-30" id="chart-demo">
+						<DemoComponent
+							data={object('Data', demo.data)}
+							options={object('Options', demo.options)}
+							ref={chartRef}
+						/>
+					</div>
+
+					<h3 className="marginTop-30">Code sample</h3>
+					<a href={demo.codesandbox.react} target="_blank">
+						<img
+							src="https://codesandbox.io/static/img/play-codesandbox.svg"
+							className="marginTop"
+							alt="Edit on Codesandbox"
+						/>
+					</a>
+
+					<h3 class="marginTop-45">Other versions</h3>
+					<p style={{ opacity: 0.75 }}>
+						(currently on <strong>React</strong>)
+					</p>
+					<div id="other-versions"></div>
+				</div>
+			);
+		});
+	});
+});

package/stories/diagrams/0_Diagrams.stories.js

@@ -0,0 +1,259 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { User20, Wikis20, Debug20 } from '@carbon/icons-react';
+import { buildElbowPathString } from '@carbon/charts/components/diagrams/buildPaths';
+
+import CardNode, {
+	CardNodeColumn,
+	CardNodeTitle,
+	CardNodeSubtitle,
+} from '../../dist/diagrams/CardNode';
+import Edge from '../../dist/diagrams/Edge';
+import ShapeNode from '../../dist/diagrams/ShapeNode';
+import { ArrowRightMarker } from '../../dist/diagrams/Marker';
+
+const nodeHeight = 64;
+const nodeWidth = 200;
+const ShapeNodeSize = 64;
+
+const stories = storiesOf('Diagrams/', module);
+stories.addDecorator((story) => (
+	<div className="container theme--white">{story()}</div>
+));
+
+stories.add('Start here', () => {
+	const paragraphStyle = {
+		style: {
+			maxWidth: 600,
+			fontSize: '1rem',
+			fontWeight: 400,
+			lineHeight: 1.5,
+			letterSpacing: 0,
+		},
+	};
+
+	const h3Style = {
+		style: {
+			paddingTop: '1rem',
+		},
+	};
+
+	const h2Style = {
+		style: {
+			paddingTop: '2rem',
+		},
+	};
+
+	return (
+		<div>
+			<h1>Diagrams</h1>
+
+			<p {...paragraphStyle}>
+				React components for building diagram experiences, using the
+				Carbon Design System.
+			</p>
+
+			<p {...paragraphStyle}>
+				<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 {...h2Style}>Examples</h2>
+
+			<h3 {...h3Style}>1. Simple static layout</h3>
+
+			<p {...paragraphStyle}>
+				A simple composed diagram, using statically defined x and y
+				coordinates.{' '}
+				<a href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/react/stories/diagrams/0_Diagrams.stories.js">
+					View source
+				</a>
+			</p>
+
+			<SimpleStatic />
+
+			<h3 {...h3Style}>2. Programmatic static layout</h3>
+
+			<p {...paragraphStyle}>
+				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/react/stories/diagrams/0_Diagrams.stories.js">
+					View source
+				</a>
+			</p>
+
+			<ProgrammaticStatic />
+
+			<h3 {...h3Style}>3. Layouts using external dependencies</h3>
+
+			<p>
+				Here's an example using <b>elkjs</b> in react
+			</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',
+					marginTop: '2em',
+					border: 0,
+					borderRadius: '4px',
+					overflow: 'hidden',
+				}}
+				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>
+	);
+});
+
+const DesktopOnlyMessage = () => (
+	<div className="cp-message">This is a desktop-only example</div>
+);
+
+const SimpleStatic = () => (
+	<div className="demo-desktop-only">
+		<DesktopOnlyMessage />
+
+		<svg height="124" width="600" style={{ marginTop: '1em' }}>
+			<defs>
+				<ArrowRightMarker id={'marker'} />
+			</defs>
+
+			<Edge
+				source={{ x: 0, y: 48 }}
+				target={{ x: 396, y: 48 }}
+				markerEnd={'marker'}
+				variant={'dash-sm'}
+			/>
+
+			<foreignObject
+				style={{ overflow: 'visible' }}
+				transform={`translate(0, 16)`}
+				height={nodeHeight}
+				width={nodeWidth}>
+				<CardNode onClick={() => {}}>
+					<CardNodeColumn>
+						<User20 />
+					</CardNodeColumn>
+					<CardNodeColumn>
+						<CardNodeTitle>Title</CardNodeTitle>
+						<CardNodeSubtitle>Description</CardNodeSubtitle>
+					</CardNodeColumn>
+				</CardNode>
+			</foreignObject>
+
+			<foreignObject
+				style={{ overflow: 'visible' }}
+				transform={`translate(400, 16)`}>
+				<ShapeNode
+					title={'Title'}
+					size={ShapeNodeSize}
+					onClick={() => {}}
+					renderIcon={<Wikis20 />}
+				/>
+			</foreignObject>
+		</svg>
+	</div>
+);
+
+const ProgrammaticStatic = () => {
+	const nodeData = [
+		{ id: 'a', x: 0, y: 16, icon: <User20 />, nodeWidth, nodeHeight },
+		{ id: 'b', x: 250, y: 16, icon: <Wikis20 />, nodeWidth, nodeHeight },
+		{
+			id: 'c',
+			x: 600,
+			y: 200,
+			icon: <Debug20 />,
+			ShapeNode: true,
+			nodeWidth: ShapeNodeSize,
+			nodeHeight: ShapeNodeSize,
+		},
+		{ id: 'd', x: 0, y: 150, icon: <Wikis20 />, 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 nodes = nodeData.map((node, i) => (
+		<foreignObject
+			style={{ overflow: 'visible' }}
+			key={`node_${i}`}
+			transform={`translate(${node.x}, ${node.y})`}
+			height={node.nodeHeight}
+			width={node.nodeWidth}>
+			{node.ShapeNode ? (
+				<ShapeNode
+					onClick={() => {}}
+					title={'Title'}
+					size={ShapeNodeSize}
+					description={'Description'}
+					renderIcon={node.icon}
+				/>
+			) : (
+				<CardNode onClick={() => {}}>
+					<CardNodeColumn>{node.icon}</CardNodeColumn>
+					<CardNodeColumn>
+						<CardNodeTitle>Title</CardNodeTitle>
+						<CardNodeSubtitle>Description</CardNodeSubtitle>
+					</CardNodeColumn>
+				</CardNode>
+			)}
+		</foreignObject>
+	));
+	const edges = edgeMapped.map((edge, i) => (
+		<Edge
+			key={`link_${i}`}
+			source={edge.source}
+			target={edge.target}
+			path={edge.path && edge.path(edge.source, edge.target)}
+			variant={edge.variant}
+		/>
+	));
+
+	return (
+		<div className="demo-desktop-only">
+			<DesktopOnlyMessage />
+
+			<svg height="300" width="800" style={{ marginTop: '1.5em' }}>
+				{edges}
+				{nodes}
+			</svg>
+		</div>
+	);
+};

package/stories/diagrams/CardNode.stories.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import CardNode, {
+	CardNodeColumn,
+	CardNodeSubtitle,
+	CardNodeLabel,
+	CardNodeTitle,
+} from '../../dist/diagrams/CardNode';
+
+import { User20, ChevronDown20 } from '@carbon/icons-react';
+
+const stories = storiesOf('Diagrams|Nodes/Card', module);
+stories.addDecorator((story) => (
+	<div className="container theme--white" style={{ maxWidth: 400 }}>
+		{story()}
+	</div>
+));
+
+stories.add('Default', () => (
+	<CardNode>
+		<CardNodeColumn>
+			<CardNodeTitle>Title</CardNodeTitle>
+			<CardNodeSubtitle>Description</CardNodeSubtitle>
+		</CardNodeColumn>
+	</CardNode>
+));
+
+stories.add('Stacked', () => (
+	<CardNode stacked>
+		<CardNodeColumn>
+			<CardNodeTitle>Title</CardNodeTitle>
+			<CardNodeSubtitle>Description</CardNodeSubtitle>
+		</CardNodeColumn>
+	</CardNode>
+));
+
+stories.add('Color', () => (
+	<CardNode color={'#8a3ffc'}>
+		<CardNodeColumn>
+			<CardNodeTitle>Title</CardNodeTitle>
+			<CardNodeSubtitle>Description</CardNodeSubtitle>
+		</CardNodeColumn>
+	</CardNode>
+));
+
+stories.add('With icon', () => (
+	<CardNode>
+		<CardNodeColumn>
+			<User20 />
+		</CardNodeColumn>
+		<CardNodeColumn>
+			<CardNodeTitle>Title</CardNodeTitle>
+			<CardNodeSubtitle>Description</CardNodeSubtitle>
+		</CardNodeColumn>
+	</CardNode>
+));
+
+stories.add('As button', () => (
+	<CardNode onClick={() => {}}>
+		<CardNodeColumn>
+			<User20 />
+		</CardNodeColumn>
+		<CardNodeColumn>
+			<CardNodeTitle>Title</CardNodeTitle>
+			<CardNodeSubtitle>Description</CardNodeSubtitle>
+		</CardNodeColumn>
+	</CardNode>
+));
+
+stories.add('As link', () => (
+	<CardNode href="#">
+		<CardNodeColumn>
+			<User20 />
+		</CardNodeColumn>
+		<CardNodeColumn>
+			<CardNodeTitle>Title</CardNodeTitle>
+			<CardNodeSubtitle>Description</CardNodeSubtitle>
+		</CardNodeColumn>
+	</CardNode>
+));
+
+stories.add('With label', () => (
+	<CardNode>
+		<CardNodeColumn>
+			<CardNodeTitle>Title</CardNodeTitle>
+			<CardNodeSubtitle>Description</CardNodeSubtitle>
+			<CardNodeLabel>Label</CardNodeLabel>
+		</CardNodeColumn>
+	</CardNode>
+));
+
+stories.add('With third column', () => (
+	<CardNode>
+		<CardNodeColumn>
+			<User20 />
+		</CardNodeColumn>
+		<CardNodeColumn>
+			<CardNodeTitle>Title</CardNodeTitle>
+			<CardNodeSubtitle>Description</CardNodeSubtitle>
+		</CardNodeColumn>
+		<CardNodeColumn farsideColumn>
+			<ChevronDown20 />
+		</CardNodeColumn>
+	</CardNode>
+));

package/stories/diagrams/Edge.stories.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import Edge from '../../dist/diagrams/Edge';
+import {
+	buildBezierPathString,
+	buildElbowPathString,
+} from '@carbon/charts/components/diagrams/buildPaths';
+
+const linkSource = { x: 0, y: 0 };
+const linkTarget = { x: 400, y: 0 };
+const linkTargetCurve = { x: 400, y: 200 };
+
+const stories = storiesOf('Diagrams|Edges', module);
+stories.addDecorator((story) => (
+	<div className="container theme--white">{story()}</div>
+));
+
+stories.add('Default', () => (
+	<svg height="800" width="800">
+		<g transform="translate(16,16)">
+			<Edge source={linkSource} target={linkTarget} />
+		</g>
+	</svg>
+));
+
+stories.add('Color', () => (
+	<svg height="800" width="800">
+		<g transform="translate(16,16)">
+			<Edge source={linkSource} target={linkTarget} color={'#FB4B53'} />
+		</g>
+	</svg>
+));
+
+stories.add('Dashed', () => (
+	<svg height="800" width="800">
+		<g transform="translate(16,16)">
+			<Edge source={linkSource} target={linkTarget} variant={'dash-sm'} />
+		</g>
+
+		<g transform="translate(16,32)">
+			<Edge source={linkSource} target={linkTarget} variant={'dash-md'} />
+		</g>
+
+		<g transform="translate(16,48)">
+			<Edge source={linkSource} target={linkTarget} variant={'dash-lg'} />
+		</g>
+
+		<g transform="translate(16,64)">
+			<Edge source={linkSource} target={linkTarget} variant={'dash-xl'} />
+		</g>
+	</svg>
+));
+
+stories.add('Double', () => (
+	<svg height="800" width="800">
+		<g transform="translate(16,16)">
+			<Edge source={linkSource} target={linkTarget} variant={'double'} />
+		</g>
+	</svg>
+));
+
+stories.add('Tunnel', () => (
+	<svg height="800" width="800">
+		<g transform="translate(16,16)">
+			<Edge source={linkSource} target={linkTarget} variant={'tunnel'} />
+		</g>
+	</svg>
+));
+
+stories.add('Elbow', () => (
+	<svg height="800" width="800">
+		<g transform="translate(16,16)">
+			<Edge path={buildElbowPathString(linkSource, linkTargetCurve)} />
+		</g>
+	</svg>
+));
+
+stories.add('Bezier', () => (
+	<svg height="800" width="800">
+		<g transform="translate(16,16)">
+			<Edge
+				path={buildBezierPathString(
+					linkSource,
+					linkTargetCurve,
+					150,
+					280,
+					150,
+					30
+				)}
+			/>
+		</g>
+	</svg>
+));