All files / components/Line Line.jsx

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
95
 
 
 
 
 
 
120x
 
 
 
 
 
120x
 
 
 
 
 
 
 
 
 
 
120x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
120x
 
 
 
 
 
 
 
 
 
 
 
 
 
25x
 
25x
25x
 
 
 
25x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import _ from 'lodash';
import React from 'react';
import { lucidClassNames } from '../../util/style-helpers';
import { createClass, omitProps } from '../../util/component-types';
import * as chartConstants from '../../constants/charts';
 
const cx = lucidClassNames.bind('&-Line');
 
const {
	string,
	object,
	bool,
} = React.PropTypes;
 
/**
 * {"categories": ["visualizations", "geoms"]}
 *
 * *For use within an `svg`*
 *
 * Lines are typically used for line charts and are pretty much a thin wrapper
 * around svg paths.
 *
 */
const Line = createClass({
	displayName: '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,
	},
 
	getDefaultProps() {
		return {
			color: chartConstants.COLOR_0,
			isDotted: false,
		};
	},
 
	render() {
		const {
			className,
			color,
			isDotted,
			d,
			style,
			...passThroughs,
		} = this.props;
 
		const isCustomColor = _.startsWith(color, '#');
		const colorStyle = isCustomColor
			? { fill: color, stroke: color }
			: null;
 
		return (
			<path
				{...omitProps(passThroughs, Line)}
				style={{
					...style,
					...colorStyle,
				}}
				className={cx(className, '&', {
					[`&-${color}`]: !isCustomColor,
					'&-is-dotted': isDotted,
				})}
				d={d}
			/>
		);
	},
});
 
export default Line;