| 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137 |
120x
120x
120x
120x
120x
43x
43x
43x
43x
43x
43x
| import _ from 'lodash';
import React from 'react';
import { lucidClassNames } from '../../util/style-helpers';
import { createClass, omitProps } from '../../util/component-types';
import { transformFromCenter } from '../../util/chart-helpers';
import * as chartConstants from '../../constants/charts';
const cx = lucidClassNames.bind('&-Point');
const {
number,
bool,
string,
object,
} = React.PropTypes;
// These were originally built in a 12x12 grid, except triangles which were
// 14x12 cause triangles are poo.
const PATHS = [
'M6,12 C2.686,12 0,9.314 0,6 C0,2.686 2.686,0 6,0 C9.314,-0 12,2.686 12,6 C12,9.314 9.314,12 6,12 z',
'M6,12 C0,12 0,12 0,6 C0,0 -0,0 6,0 C12,0 12,0 12,6 C12,12 12,12 6,12 z',
'M6.034,1.656 C7,0 7,0 7.966,1.656 L13.034,10.344 C14,12 13,12 12,12 L2,12 C1,12 0,12 0.966,10.344 L6.034,1.656 z',
'M7.966,10.344 C7,12 7,12 6.034,10.344 L0.966,1.656 C-0,0 1,0 2,0 L12,0 C13,0 14,0 13.034,1.656 L7.966,10.344 z',
'M2.594,9.406 C-0.812,6 -0.812,6 2.594,2.594 C6,-0.812 6,-0.812 9.406,2.594 C12.812,6 12.812,6 9.406,9.406 C6,12.812 6,12.812 2.594,9.406 z',
];
/**
* {"categories": ["visualizations", "geoms"]}
*
* *For use within an `svg`*
*
* Points are typically used for scatter plots or overlaying shapes on lines.
*
*/
const Point = createClass({
displayName: 'Point',
propTypes: {
/**
* Passed through to the root element.
*/
style: object,
/**
* Appended to the component-specific class names set on the root element.
*/
className: string,
/**
* Determines if the point has a white stroke around it.
*/
hasStroke: bool,
/**
* x coordinate
*/
x: number,
/**
* y coordinate
*/
y: number,
/**
* Zero-based set of shapes. It's recommended that you pass the index of
* your array for shapes.
*/
kind: number,
/**
* Strings should match an existing color class unless they start with a
* '#' for specific colors. E.g.:
*
* - `COLOR_0`
* - `COLOR_GOOD`
* - `'#123abc'`
*/
color: string,
/**
* Scale up the size of the symbol. 2 would be double the original size.
*/
scale: number,
},
getDefaultProps() {
return {
x: 0,
y: 0,
kind: 0,
color: chartConstants.COLOR_0,
hasStroke: false,
scale: 1,
};
},
render() {
const {
className,
color,
hasStroke,
style,
kind,
x,
y,
scale,
...passThroughs,
} = this.props;
const kindIndex = kind % 5;
const isCustomColor = _.startsWith(color, '#');
const colorStyle = isCustomColor ? { fill: color } : null;
// These transforms are used to center the icon on the x y coordinate
// provided.
const transforms = [
transformFromCenter(x, y, 6, 6, scale),
transformFromCenter(x, y, 6, 6, scale),
transformFromCenter(x, y, 7, 6, scale), // triangle
transformFromCenter(x, y, 7, 6, scale), // triangle
transformFromCenter(x, y, 6, 6, scale),
];
return (
<path
{...omitProps(passThroughs, Point)}
style={{
...style,
...colorStyle,
}}
className={cx(className, '&', {
'&-has-stroke': hasStroke,
[`&-${color}`]: !isCustomColor,
})}
transform={transforms[kindIndex]}
d={PATHS[kindIndex]}
/>
);
},
});
export default Point;
|