forked from observablehq/plot
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathrect.js
More file actions
136 lines (131 loc) · 4.7 KB
/
rect.js
File metadata and controls
136 lines (131 loc) · 4.7 KB
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
import {create} from "../context.js";
import {identity, indexOf, number} from "../options.js";
import {Mark} from "../plot.js";
import {isCollapsed} from "../scales.js";
import {
applyDirectStyles,
applyIndirectStyles,
applyTransform,
impliedString,
applyAttr,
applyChannelStyles
} from "../style.js";
import {maybeIdentityX, maybeIdentityY} from "../transforms/identity.js";
import {maybeTrivialIntervalX, maybeTrivialIntervalY} from "../transforms/interval.js";
import {maybeStackX, maybeStackY} from "../transforms/stack.js";
const defaults = {
ariaLabel: "rect"
};
export class Rect extends Mark {
constructor(data, options = {}) {
const {
x1,
y1,
x2,
y2,
inset = 0,
insetTop = inset,
insetRight = inset,
insetBottom = inset,
insetLeft = inset,
rx,
ry
} = options;
super(
data,
{
x1: {value: x1, scale: "x", optional: true},
y1: {value: y1, scale: "y", optional: true},
x2: {value: x2, scale: "x", optional: true},
y2: {value: y2, scale: "y", optional: true}
},
options,
defaults
);
this.insetTop = number(insetTop);
this.insetRight = number(insetRight);
this.insetBottom = number(insetBottom);
this.insetLeft = number(insetLeft);
this.rx = impliedString(rx, "auto"); // number or percentage
this.ry = impliedString(ry, "auto");
}
render(index, scales, channels, dimensions, context) {
const {x, y} = scales;
const {x1: X1, y1: Y1, x2: X2, y2: Y2} = channels;
const {marginTop, marginRight, marginBottom, marginLeft, width, height} = dimensions;
const {insetTop, insetRight, insetBottom, insetLeft, rx, ry} = this;
return create("svg:g", context)
.call(applyIndirectStyles, this, scales, dimensions)
.call(applyTransform, this, {x: X1 && X2 ? x : null, y: Y1 && Y2 ? y : null}, 0, 0)
.call((g) =>
g
.selectAll()
.data(index)
.enter()
.append("rect")
.call(applyDirectStyles, this)
.attr("x", X1 && X2 && !isCollapsed(x) ? (i) => Math.min(X1[i], X2[i]) + insetLeft : marginLeft + insetLeft)
.attr("y", Y1 && Y2 && !isCollapsed(y) ? (i) => Math.min(Y1[i], Y2[i]) + insetTop : marginTop + insetTop)
.attr(
"width",
X1 && X2 && !isCollapsed(x)
? (i) => Math.max(0, Math.abs(X2[i] - X1[i]) - insetLeft - insetRight)
: width - marginRight - marginLeft - insetRight - insetLeft
)
.attr(
"height",
Y1 && Y2 && !isCollapsed(y)
? (i) => Math.max(0, Math.abs(Y1[i] - Y2[i]) - insetTop - insetBottom)
: height - marginTop - marginBottom - insetTop - insetBottom
)
.call(applyAttr, "rx", rx)
.call(applyAttr, "ry", ry)
.call(applyChannelStyles, this, channels)
)
.node();
}
}
/**
* ```js
* Plot.rect(athletes, Plot.bin({fill: "count"}, {x: "weight", y: "height"}))
* ```
*
* Returns a new rect with the given *data* and *options*.
*/
export function rect(data, options) {
return new Rect(data, maybeTrivialIntervalX(maybeTrivialIntervalY(options)));
}
/**
* ```js
* Plot.rectX(athletes, Plot.binY({x: "count"}, {y: "weight"}))
* ```
*
* Equivalent to
* [Plot.rect](https://github.com/observablehq/plot/blob/main/README.md#plotrectdata-options),
* except that if neither the **x1** nor **x2** option is specified, the **x**
* option may be specified as shorthand to apply an implicit [stackX
* transform](https://github.com/observablehq/plot/blob/main/README.md#plotstackxstack-options);
* this is the typical configuration for a histogram with rects aligned at *x* =
* 0. If the **x** option is not specified, it defaults to the identity
* function.
*/
export function rectX(data, options = {y: indexOf, interval: 1, x2: identity}) {
return new Rect(data, maybeStackX(maybeTrivialIntervalY(maybeIdentityX(options))));
}
/**
* ```js
* Plot.rectY(athletes, Plot.binX({y: "count"}, {x: "weight"}))
* ```
*
* Equivalent to
* [Plot.rect](https://github.com/observablehq/plot/blob/main/README.md#plotrectdata-options),
* except that if neither the **y1** nor **y2** option is specified, the **y**
* option may be specified as shorthand to apply an implicit [stackY
* transform](https://github.com/observablehq/plot/blob/main/README.md#plotstackystack-options);
* this is the typical configuration for a histogram with rects aligned at *y* =
* 0. If the **y** option is not specified, it defaults to the identity
* function.
*/
export function rectY(data, options = {x: indexOf, interval: 1, y2: identity}) {
return new Rect(data, maybeStackY(maybeTrivialIntervalX(maybeIdentityY(options))));
}