forked from observablehq/plot
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbar.js
124 lines (118 loc) · 4.6 KB
/
bar.js
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
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 {maybeIntervalX, maybeIntervalY} from "../transforms/interval.js";
import {maybeStackX, maybeStackY} from "../transforms/stack.js";
export class AbstractBar extends Mark {
constructor(data, channels, options = {}, defaults) {
super(data, channels, options, defaults);
const {inset = 0, insetTop = inset, insetRight = inset, insetBottom = inset, insetLeft = inset, rx, ry} = options;
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 {rx, ry} = this;
return create("svg:g", context)
.call(applyIndirectStyles, this, scales, dimensions)
.call(this._transform, this, scales)
.call(g => g.selectAll()
.data(index)
.enter()
.append("rect")
.call(applyDirectStyles, this)
.attr("x", this._x(scales, channels, dimensions))
.attr("width", this._width(scales, channels, dimensions))
.attr("y", this._y(scales, channels, dimensions))
.attr("height", this._height(scales, channels, dimensions))
.call(applyAttr, "rx", rx)
.call(applyAttr, "ry", ry)
.call(applyChannelStyles, this, channels))
.node();
}
_x(scales, {x: X}, {marginLeft}) {
const {insetLeft} = this;
return X ? i => X[i] + insetLeft : marginLeft + insetLeft;
}
_y(scales, {y: Y}, {marginTop}) {
const {insetTop} = this;
return Y ? i => Y[i] + insetTop : marginTop + insetTop;
}
_width({x}, {x: X}, {marginRight, marginLeft, width}) {
const {insetLeft, insetRight} = this;
const bandwidth = X && x ? x.bandwidth() : width - marginRight - marginLeft;
return Math.max(0, bandwidth - insetLeft - insetRight);
}
_height({y}, {y: Y}, {marginTop, marginBottom, height}) {
const {insetTop, insetBottom} = this;
const bandwidth = Y && y ? y.bandwidth() : height - marginTop - marginBottom;
return Math.max(0, bandwidth - insetTop - insetBottom);
}
}
const defaults = {
ariaLabel: "bar"
};
export class BarX extends AbstractBar {
constructor(data, options = {}) {
const {x1, x2, y} = options;
super(
data,
[
{name: "x1", value: x1, scale: "x"},
{name: "x2", value: x2, scale: "x"},
{name: "y", value: y, scale: "y", type: "band", optional: true}
],
options,
defaults
);
}
_transform(selection, mark, {x}) {
selection.call(applyTransform, mark, {x}, 0, 0);
}
_x({x}, {x1: X1, x2: X2}, {marginLeft}) {
const {insetLeft} = this;
return isCollapsed(x) ? marginLeft + insetLeft : i => Math.min(X1[i], X2[i]) + insetLeft;
}
_width({x}, {x1: X1, x2: X2}, {marginRight, marginLeft, width}) {
const {insetLeft, insetRight} = this;
return isCollapsed(x) ? width - marginRight - marginLeft - insetLeft - insetRight : i => Math.max(0, Math.abs(X2[i] - X1[i]) - insetLeft - insetRight);
}
}
export class BarY extends AbstractBar {
constructor(data, options = {}) {
const {x, y1, y2} = options;
super(
data,
[
{name: "y1", value: y1, scale: "y"},
{name: "y2", value: y2, scale: "y"},
{name: "x", value: x, scale: "x", type: "band", optional: true}
],
options,
defaults
);
}
_transform(selection, mark, {y}) {
selection.call(applyTransform, mark, {y}, 0, 0);
}
_y({y}, {y1: Y1, y2: Y2}, {marginTop}) {
const {insetTop} = this;
return isCollapsed(y) ? marginTop + insetTop : i => Math.min(Y1[i], Y2[i]) + insetTop;
}
_height({y}, {y1: Y1, y2: Y2}, {marginTop, marginBottom, height}) {
const {insetTop, insetBottom} = this;
return isCollapsed(y) ? height - marginTop - marginBottom - insetTop - insetBottom : i => Math.max(0, Math.abs(Y2[i] - Y1[i]) - insetTop - insetBottom);
}
}
export function barX(data, options = {y: indexOf, x2: identity}) {
return new BarX(data, maybeStackX(maybeIntervalX(maybeIdentityX(options))));
}
export function barY(data, options = {x: indexOf, y2: identity}) {
return new BarY(data, maybeStackY(maybeIntervalY(maybeIdentityY(options))));
}