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 95 96 97 | 176x 176x 176x 176x 27x 27x 27x 27x 176x 176x 176x 176x | import _ from 'lodash';
import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { omitProps, 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
{...omitProps<ILineProps>(
passThroughs,
undefined,
_.keys(Line.propTypes)
)}
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\`*
Lines are typically used for line charts and are pretty much a thin
wrapper around svg paths.
`,
categories: ['visualizations', 'geoms'],
};
Line.propTypes = {
style: object`
Passed through to the root element.
`,
className: string`
Appended to the component-specific class names set on the root element.
`,
d: string`
The path for the line.
`,
color: string`
Strings should match an existing color class unless they start with a '#' for specific colors. E.g.:
- \`COLOR_0\`
- \`COLOR_GOOD\`
- \`'#123abc'\`
`,
isDotted: bool`
Display a dotted line.
`,
};
export default Line;
|