-
Notifications
You must be signed in to change notification settings - Fork 941
/
Rickshaw.Graph.Axis.X.js
122 lines (85 loc) · 3.35 KB
/
Rickshaw.Graph.Axis.X.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
Rickshaw.namespace('Rickshaw.Graph.Axis.X');
Rickshaw.Graph.Axis.X = function(args) {
var self = this;
var berthRate = 0.10;
this.initialize = function(args) {
this.graph = args.graph;
this.orientation = args.orientation || 'top';
this.color = args.color || "#000000";
this.pixelsPerTick = args.pixelsPerTick || 75;
if (args.ticks) this.staticTicks = args.ticks;
if (args.tickValues) this.tickValues = args.tickValues;
this.tickSize = args.tickSize || 4;
this.ticksTreatment = args.ticksTreatment || 'plain';
if (args.element) {
this.element = args.element;
this._discoverSize(args.element, args);
this.vis = d3.select(args.element)
.append("svg:svg")
.attr('height', this.height)
.attr('width', this.width)
.attr('stroke', this.color)
.attr('class', 'rickshaw_graph x_axis_d3');
this.element = this.vis[0][0];
this.element.style.position = 'relative';
this.setSize({ width: args.width, height: args.height });
} else {
this.vis = this.graph.vis;
}
this.graph.onUpdate( function() { self.render() } );
};
this.setSize = function(args) {
args = args || {};
if (!this.element) return;
this._discoverSize(this.element.parentNode, args);
this.vis
.attr('height', this.height)
.attr('width', this.width * (1 + berthRate));
var berth = Math.floor(this.width * berthRate / 2);
this.element.style.left = -1 * berth + 'px';
};
this.render = function() {
if (this._renderWidth !== undefined && this.graph.width !== this._renderWidth) this.setSize({ auto: true });
var axis = d3.svg.axis().scale(this.graph.x).orient(this.orientation);
axis.tickFormat( args.tickFormat || function(x) { return x } );
if (this.tickValues) axis.tickValues(this.tickValues);
this.ticks = this.staticTicks || Math.floor(this.graph.width / this.pixelsPerTick);
var berth = Math.floor(this.width * berthRate / 2) || 0;
var bar_offset = this.graph.renderer.name == "bar" && Math.ceil(this.graph.width * 0.95 / this.graph.series[0].data.length / 2) || 0;
var transform;
if (this.orientation == 'top') {
var yOffset = this.height || this.graph.height;
transform = 'translate(' + (berth + bar_offset) + ',' + yOffset + ')';
} else {
transform = 'translate(' + (berth + bar_offset) + ', 0)';
}
if (this.element) {
this.vis.selectAll('*').remove();
}
this.vis
.append("svg:g")
.attr("class", ["x_ticks_d3", this.ticksTreatment].join(" "))
.attr("transform", transform)
.call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize));
var gridSize = (this.orientation == 'bottom' ? 1 : -1) * this.graph.height;
this.graph.vis
.append("svg:g")
.attr("class", "x_grid_d3")
.call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(gridSize))
.selectAll('text')
.each(function() { this.parentNode.setAttribute('data-x-value', this.textContent) });
this._renderHeight = this.graph.height;
};
this._discoverSize = function(element, args) {
if (typeof window !== 'undefined') {
var style = window.getComputedStyle(element, null);
var elementHeight = parseInt(style.getPropertyValue('height'), 10);
if (!args.auto) {
var elementWidth = parseInt(style.getPropertyValue('width'), 10);
}
}
this.width = (args.width || elementWidth || this.graph.width) * (1 + berthRate);
this.height = args.height || elementHeight || 40;
};
this.initialize(args);
};