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;
|