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

package/src/diagrams/CardNode/CardNode.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// @ts-ignore
+import classnames from 'classnames';
+
+// Carbon Prefix
+import { carbonPrefix } from '../configs';
+
+const namespace = `${carbonPrefix}--cc--card-node`;
+
+const CardNode = ({
+	as = 'div',
+	children,
+	className,
+	color,
+	href = null,
+	onMouseEnter = null,
+	onMouseOver = null,
+	onMouseOut = null,
+	onMouseLeave = null,
+	onMouseMove = null,
+	onClick = null,
+	position = 'static',
+	stacked,
+}: any) => {
+	let Component = 'div';
+
+	if (as !== 'div') {
+		Component = as;
+	} else if (href) {
+		Component = 'a';
+	} else if (onClick) {
+		Component = 'button';
+	}
+
+	const cardClasses = classnames(namespace, {
+		[`${namespace}--stacked`]: stacked,
+		[`${namespace}--${Component}`]: Component,
+		[className]: className,
+	});
+
+	return (
+		// @ts-ignore
+		<Component
+			className={cardClasses}
+			onClick={onClick}
+			onMouseEnter={onMouseEnter}
+			onMouseOver={onMouseOver}
+			onMouseOut={onMouseOut}
+			onMouseLeave={onMouseLeave}
+			onMouseMove={onMouseMove}
+			style={{ borderColor: color, position }}
+			tabIndex={0}>
+			{children}
+		</Component>
+	);
+};
+
+export default CardNode;
+
+CardNode.propTypes = {
+	/** Provide a custom element to be rendered instead of the default */
+	as: PropTypes.elementType,
+
+	/**
+	 * Pass in the children that will be rendered within the CardNode
+	 */
+	children: PropTypes.node,
+
+	/**
+	 * Provide an optional class to be applied on the outer element
+	 */
+	className: PropTypes.string,
+
+	/**
+	 * Specify the node's border color
+	 */
+	color: PropTypes.string,
+
+	/**
+	 * Optionally specify an href for the CardNode to become an `<a>` element
+	 */
+	href: PropTypes.string,
+
+	/**
+	 * Provide an optional function to be called when the CardNode
+	 * is clicked, turning the CardNode into a `<button>` element
+	 */
+	onClick: PropTypes.func,
+
+	/**
+	 * Provide an optional function to be called for the onMouseEnter event
+	 */
+	onMouseEnter: PropTypes.func,
+
+	/**
+	 * Provide an optional function to be called for the onMouseOver event
+	 */
+	onMouseOver: PropTypes.func,
+
+	/**
+	 * Provide an optional function to be called for the onMouseOut event
+	 */
+	onMouseOut: PropTypes.func,
+
+	/**
+	 * Provide an optional function to be called for the onMouseLeave event
+	 */
+	onMouseLeave: PropTypes.func,
+
+	/**
+	 * Provide an optional function to be called for the onMouseMove event
+	 */
+	onMouseMove: PropTypes.func,
+
+	/**
+	 * Specify whether the node displays a stacked effect
+	 */
+	stacked: PropTypes.bool,
+};

package/src/diagrams/CardNode/CardNodeColumn.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// @ts-ignore
+import classnames from 'classnames';
+
+// Carbon Prefix
+import { carbonPrefix } from '../configs';
+
+const namespace = `${carbonPrefix}--cc--card-node`;
+
+const CardNodeColumn = ({ children, className, farsideColumn }: any) => {
+	const classes = classnames(`${namespace}__column`, {
+		[`${namespace}__column--farside`]: farsideColumn,
+		[className]: className,
+	});
+
+	return <div className={classes}>{children}</div>;
+};
+
+export { CardNodeColumn };
+
+CardNodeColumn.propTypes = {
+	/**
+	 * Pass in the children that will be rendered within the CardNodeColumn
+	 */
+	children: PropTypes.node,
+
+	/**
+	 * Provide an optional class to be applied on the outer element
+	 */
+	className: PropTypes.string,
+
+	/**
+	 * Specify whether this is the last column
+	 */
+	farsideColumn: PropTypes.bool,
+};

package/src/diagrams/CardNode/CardNodeLabel.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// @ts-ignore
+import classnames from 'classnames';
+
+// Carbon Prefix
+import { carbonPrefix } from '../configs';
+
+const namespace = `${carbonPrefix}--cc--card-node`;
+
+const CardNodeLabel = ({ children, className }: any) => {
+	const classes = classnames(`${namespace}__label`, {
+		[className]: className,
+	});
+
+	return <label className={classes}>{children}</label>;
+};
+
+export { CardNodeLabel };
+
+CardNodeLabel.propTypes = {
+	/**
+	 * Pass in the children that will be rendered within the CardNodeLabel
+	 */
+	children: PropTypes.node,
+
+	/**
+	 * Provide an optional class to be applied on the outer element
+	 */
+	className: PropTypes.string,
+};

package/src/diagrams/CardNode/CardNodeSubtitle.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// @ts-ignore
+import classnames from 'classnames';
+
+// Carbon Prefix
+import { carbonPrefix } from '../configs';
+
+const namespace = `${carbonPrefix}--cc--card-node`;
+
+const CardNodeSubtitle = ({ children, className }: any) => {
+	const classes = classnames(`${namespace}__subtitle`, {
+		[className]: className,
+	});
+
+	return <div className={classes}>{children}</div>;
+};
+
+export { CardNodeSubtitle };
+
+CardNodeSubtitle.propTypes = {
+	/**
+	 * Pass in the children that will be rendered within the CardNodeSubtitle
+	 */
+	children: PropTypes.node,
+
+	/**
+	 * Provide an optional class to be applied on the outer element
+	 */
+	className: PropTypes.string,
+};

package/src/diagrams/CardNode/CardNodeTitle.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// @ts-ignore
+import classnames from 'classnames';
+
+// Carbon Prefix
+import { carbonPrefix } from '../configs';
+
+const namespace = `${carbonPrefix}--cc--card-node`;
+
+const CardNodeTitle = ({ children, className }: any) => {
+	const classes = classnames(`${namespace}__title`, {
+		[className]: className,
+	});
+
+	return <div className={classes}>{children}</div>;
+};
+
+export { CardNodeTitle };
+
+CardNodeTitle.propTypes = {
+	/**
+	 * Pass in the children that will be rendered within the CardNodeTitle
+	 */
+	children: PropTypes.node,
+
+	/**
+	 * Provide an optional class to be applied on the outer element
+	 */
+	className: PropTypes.string,
+};

package/src/diagrams/CardNode/index.tsx

@@ -0,0 +1,13 @@
+import CardNode from './CardNode';
+import { CardNodeColumn } from './CardNodeColumn';
+import { CardNodeLabel } from './CardNodeLabel';
+import { CardNodeSubtitle } from './CardNodeSubtitle';
+import { CardNodeTitle } from './CardNodeTitle';
+
+export {
+	CardNode as default,
+	CardNodeColumn,
+	CardNodeSubtitle,
+	CardNodeTitle,
+	CardNodeLabel,
+};

package/src/diagrams/Edge/Edge.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// Carbon Prefix
+import { carbonPrefix } from '../configs';
+
+// @ts-ignore
+import classnames from 'classnames';
+
+import { buildStraightPathString } from '@carbon/charts/components/diagrams/buildPaths';
+
+const Edge = ({
+	className,
+	color,
+	markerEnd,
+	markerStart,
+	onMouseEnter = null,
+	onMouseOver = null,
+	onMouseOut = null,
+	onMouseLeave = null,
+	onMouseMove = null,
+	path,
+	source,
+	target,
+	variant = null,
+}: any) => {
+	const namespace = `${carbonPrefix}--cc--edge`;
+
+	const pathClasses = classnames(namespace, {
+		[`${namespace}--${variant}`]: variant,
+		[className]: className,
+	});
+
+	const d = path || buildStraightPathString(source, target);
+
+	return (
+		<g
+			className={pathClasses}
+			onMouseEnter={onMouseEnter}
+			onMouseOver={onMouseOver}
+			onMouseOut={onMouseOut}
+			onMouseLeave={onMouseLeave}
+			onMouseMove={onMouseMove}>
+			<path d={d} className={`${namespace}__container`} />
+			<path d={d} className={`${namespace}__outer`} />
+			<path
+				d={d}
+				className={`${namespace}__inner`}
+				markerEnd={`url(#${markerEnd})`}
+				markerStart={`url(#${markerStart})`}
+				style={{ stroke: color }}
+			/>
+		</g>
+	);
+};
+
+export default Edge;
+
+Edge.propTypes = {
+	/**
+	 * Provide an optional class to be applied on the outer element
+	 */
+	className: PropTypes.string,
+
+	/**
+	 * Specify the edge's color
+	 */
+	color: PropTypes.string,
+
+	/**
+	 * Specify an ID for a corresponding end marker
+	 */
+	markerEnd: PropTypes.string,
+
+	/**
+	 * Specify an ID for a corresponding start marker
+	 */
+	markerStart: PropTypes.string,
+
+	/**
+	 * Provide an optional function to be called for the onMouseEnter event
+	 */
+	onMouseEnter: PropTypes.func,
+
+	/**
+	 * Provide an optional function to be called for the onMouseOver event
+	 */
+	onMouseOver: PropTypes.func,
+
+	/**
+	 * Provide an optional function to be called for the onMouseOut event
+	 */
+	onMouseOut: PropTypes.func,
+
+	/**
+	 * Provide an optional function to be called for the onMouseLeave event
+	 */
+	onMouseLeave: PropTypes.func,
+
+	/**
+	 * Provide an optional function to be called for the onMouseMove event
+	 */
+	onMouseMove: PropTypes.func,
+
+	/**
+	 * Specify a path string
+	 */
+	path: PropTypes.string,
+
+	/**
+	 * Coordinates for the source element
+	 */
+	source: PropTypes.shape({
+		x: PropTypes.number,
+		y: PropTypes.number,
+	}),
+
+	/**
+	 * Coordinates for the target element
+	 */
+	target: PropTypes.shape({
+		x: PropTypes.number,
+		y: PropTypes.number,
+	}),
+
+	/**
+	 * Specify the variant of the edge
+	 */
+	variant: PropTypes.oneOf([
+		'dash-sm',
+		'dash-md',
+		'dash-lg',
+		'dash-xl',
+		'double',
+		'tunnel',
+	]),
+};

package/src/diagrams/Edge/index.tsx

@@ -0,0 +1,2 @@
+import Edge from './Edge';
+export default Edge;

package/src/diagrams/Marker/Marker.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// @ts-ignore
+import classnames from 'classnames';
+
+// Carbon Prefix
+import { carbonPrefix } from '../configs';
+
+import {
+	arrowLeft,
+	arrowRight,
+	circle,
+	diamond,
+	square,
+	tee,
+} from '@carbon/charts/components/diagrams/markerDefinitions';
+
+const Marker = ({
+	className,
+	color,
+	d,
+	id,
+	orient = 'auto',
+	height,
+	width,
+	position = 'end',
+	refX,
+	refY,
+}: any) => {
+	const namespace = `${carbonPrefix}--cc--marker`;
+	const classes = classnames(namespace, {
+		[className]: className,
+	});
+
+	const xPos = position === 'end' ? width / 2 + 0.5 : 0.5;
+	const yPos = height / 2;
+
+	return (
+		<marker
+			className={classes}
+			markerHeight={height}
+			markerWidth={width}
+			orient={orient}
+			id={id}
+			refX={refX || xPos}
+			refY={refY || yPos}
+			markerUnits="userSpaceOnUse">
+			<path d={d} style={{ fill: color }} />
+		</marker>
+	);
+};
+
+const ArrowLeftMarker = ({ ...rest }) => <Marker {...arrowLeft} {...rest} />;
+const ArrowRightMarker = ({ ...rest }) => <Marker {...arrowRight} {...rest} />;
+const CircleMarker = ({ ...rest }) => <Marker {...circle} {...rest} />;
+const DiamondMarker = ({ ...rest }) => <Marker {...diamond} {...rest} />;
+const SquareMarker = ({ ...rest }) => <Marker {...square} {...rest} />;
+const TeeMarker = ({ ...rest }) => <Marker {...tee} {...rest} />;
+
+export {
+	Marker as default,
+	ArrowLeftMarker,
+	ArrowRightMarker,
+	CircleMarker,
+	DiamondMarker,
+	SquareMarker,
+	TeeMarker,
+};
+
+Marker.propTypes = {
+	/**
+	 * Provide an optional class to be applied on the outer element
+	 */
+	className: PropTypes.string,
+
+	/**
+	 * Specify the marker's color
+	 */
+	color: PropTypes.string,
+
+	/**
+	 * Specify a path string
+	 */
+	d: PropTypes.string,
+
+	/**
+	 * Specify an ID for the marker
+	 */
+	id: PropTypes.string,
+
+	/**
+	 * Specify the orient attribute for the marker
+	 */
+	orient: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+	/**
+	 * Specify the height attribute for the marker
+	 */
+	height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+	/**
+	 * Specify the width attribute for the marker
+	 */
+	width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+	/**
+	 * Specify whether this marker appears at the start or end of a line
+	 */
+	position: PropTypes.oneOf(['end', 'start']),
+
+	/**
+	 * Specify the refX attribute for the marker
+	 */
+	refX: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+	/**
+	 * Specify the refY attribute for the marker
+	 */
+	refY: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};

package/src/diagrams/Marker/index.tsx

@@ -0,0 +1,9 @@
+export {
+	default,
+	ArrowLeftMarker,
+	ArrowRightMarker,
+	CircleMarker,
+	DiamondMarker,
+	SquareMarker,
+	TeeMarker,
+} from './Marker';

package/src/diagrams/ShapeNode/ShapeNode.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// Carbon Prefix
+import { carbonPrefix } from '../configs';
+
+// @ts-ignore
+import classnames from 'classnames';
+
+const ShapeNode = ({
+	as = 'div',
+	className,
+	href = null,
+	onClick = null,
+	onMouseEnter = null,
+	onMouseOver = null,
+	onMouseOut = null,
+	onMouseLeave = null,
+	onMouseMove = null,
+	position = 'fixed',
+	bodyPosition = 'absolute',
+	renderIcon,
+	size = 48,
+	stacked,
+	shape = 'circle',
+	subtitle,
+	title,
+}: any) => {
+	const namespace = `${carbonPrefix}--cc--shape-node`;
+
+	let Component = 'div';
+
+	if (href) {
+		Component = 'a';
+	} else if (onClick) {
+		Component = 'button';
+	}
+
+	const circleClasses = classnames(namespace, {
+		[`${namespace}--stacked`]: stacked,
+		[`${namespace}--${shape}`]: shape,
+		[`${namespace}--${Component}`]: Component,
+		[className]: className,
+	});
+
+	const titleElement = title ? (
+		<div className={`${namespace}__title`}>{title}</div>
+	) : null;
+	const subtitleElement = subtitle ? (
+		<div className={`${namespace}__subtitle`}>{subtitle}</div>
+	) : null;
+
+	return (
+		// @ts-ignore
+		<Component
+			className={circleClasses}
+			onClick={onClick}
+			onMouseEnter={onMouseEnter}
+			onMouseOver={onMouseOver}
+			onMouseOut={onMouseOut}
+			onMouseLeave={onMouseLeave}
+			onMouseMove={onMouseMove}
+			style={{ height: size, width: size, position }}
+			tabIndex={0}>
+			<div className={`${namespace}__icon`}>{renderIcon}</div>
+			<div
+				className={`${namespace}__body`}
+				style={{ position: bodyPosition }}>
+				{titleElement}
+				{subtitleElement}
+			</div>
+		</Component>
+	);
+};
+
+ShapeNode.propTypes = {
+	/** Provide a custom element to be rendered instead of the default */
+	as: PropTypes.oneOf(['div', 'a', 'button']),
+
+	/**
+	 * Provide an optional class to be applied on the outer element
+	 */
+	className: PropTypes.string,
+
+	/**
+	 * Optionally specify an href for the CardNode to become an `<a>` element
+	 */
+	href: PropTypes.string,
+
+	/**
+	 * Provide an optional function to be called when the CardNode
+	 * is clicked, turning the CardNode into a `<button>` element
+	 */
+	onClick: PropTypes.func,
+
+	/**
+	 * Provide an optional function to be called for the onMouseEnter event
+	 */
+	onMouseEnter: PropTypes.func,
+
+	/**
+	 * Provide an optional function to be called for the onMouseOver event
+	 */
+	onMouseOver: PropTypes.func,
+
+	/**
+	 * Provide an optional function to be called for the onMouseOut event
+	 */
+	onMouseOut: PropTypes.func,
+
+	/**
+	 * Provide an optional function to be called for the onMouseLeave event
+	 */
+	onMouseLeave: PropTypes.func,
+
+	/**
+	 * Provide an optional function to be called for the onMouseMove event
+	 */
+	onMouseMove: PropTypes.func,
+
+	/**
+	 * Function to render your own icon in the underlying button
+	 */
+	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+	/**
+	 * Specify the height and width of the shape
+	 * Can be defined using any CSS length unit (px, %, rem)
+	 */
+	size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+	/**
+	 * Specify whether the node displays a stacked effect
+	 */
+	stacked: PropTypes.bool,
+
+	/**
+	 * Specify the shape of the node
+	 */
+	shape: PropTypes.oneOf(['circle', 'square', 'rounded-square']),
+
+	/**
+	 * Specify the node's subtitle
+	 */
+	subtitle: PropTypes.string,
+
+	/**
+	 * Specify the node's title
+	 */
+	title: PropTypes.string,
+};
+
+export default ShapeNode;

package/src/diagrams/ShapeNode/index.tsx

@@ -0,0 +1,2 @@
+import ShapeNode from './ShapeNode';
+export default ShapeNode;

package/src/diagrams/configs.ts

@@ -0,0 +1 @@
+export const carbonPrefix = 'cds';