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