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

package/stories/1_gettingStarted_content.js

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

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

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

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

@@ -1,94 +0,0 @@
-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>
-));