All files / Line Line.tsx

100% Statements 12/12
100% Branches 2/2
100% Functions 1/1
100% Lines 12/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94                10x   10x                                     10x         10x 192x 192x 192x   192x                               10x   10x 10x       10x                                                              
import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
 
import { lucidClassNames } from '../../util/style-helpers';
import { StandardProps } from '../../util/component-types';
import * as chartConstants from '../../constants/charts';
 
const cx = lucidClassNames.bind('&-Line');
 
const { string, object, bool } = PropTypes;
 
export interface ILineProps
	extends StandardProps,
		React.SVGProps<SVGPathElement> {
	/** The path for the line. */
	d?: string;
 
	/** Strings should match an existing color class unless they start with a '#' for specific colors. E.g.:
 
		- \`COLOR_0\`
		- \`COLOR_GOOD\`
		- \`'#123abc'\` */
	color: string;
 
	/** Display a dotted line. */
	isDotted: boolean;
}
 
const defaultProps = {
	color: chartConstants.COLOR_0,
	isDotted: false,
};
 
export const Line = (props: ILineProps): React.ReactElement => {
	const { className, color, isDotted, d, style, ...passThroughs } = props;
	const isCustomColor = _.startsWith(color, '#');
	const colorStyle = isCustomColor ? { fill: color, stroke: color } : null;
 
	return (
		<path
			{...passThroughs}
			style={{
				...style,
				...colorStyle,
			}}
			className={cx(className, '&', {
				[`&-${color}`]: !isCustomColor,
				'&-is-dotted': isDotted,
			})}
			d={d}
		/>
	);
};
 
Line.defaultProps = defaultProps;
 
Line.displayName = 'Line';
Line.peek = {
	description: `*For use within an \`svg\`*. A \`Line\` is typically used for line charts and is pretty much a thin wrapper around \`svg\` paths.`,
	categories: ['visualizations', 'geoms'],
};
Line.propTypes = {
	/**
		Passed through to the root element.
	*/
	style: object,
 
	/**
		Appended to the component-specific class names set on the root element.
	*/
	className: string,
 
	/**
		The path for the line.
	*/
	d: string,
 
	/**
		Strings should match an existing color class unless they start with a '#' for specific colors. E.g.:
 
		- \`COLOR_0\`
		- \`COLOR_GOOD\`
		- \`'#123abc'\`
	*/
	color: string,
	/**
		Display a dotted line.
	*/
	isDotted: bool,
};
 
export default Line;