@granite-elements/granite-timeline 2.0.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +58 -0
- package/README.md +150 -53
- package/granite-timeline.js +252 -706
- package/package.json +36 -19
- package/src/timeline-renderer.js +391 -0
- package/.eslintrc.json +0 -28
- package/demo/index.html +0 -50
- package/example.html +0 -367
- package/index.html +0 -16
- package/polymer.json +0 -7
package/example.html
DELETED
|
@@ -1,367 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
|
|
5
|
-
<script src="../../d3/d3.js"></script>
|
|
6
|
-
<script src="./bower_components/d3-timelines/dist/d3-timelines.js"></script>
|
|
7
|
-
<style type="text/css">
|
|
8
|
-
.axis path,
|
|
9
|
-
.axis line {
|
|
10
|
-
fill: none;
|
|
11
|
-
stroke: black;
|
|
12
|
-
shape-rendering: crispEdges;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.axis text {
|
|
16
|
-
font-family: sans-serif;
|
|
17
|
-
font-size: 10px;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.timeline-label {
|
|
21
|
-
font-family: sans-serif;
|
|
22
|
-
font-size: 12px;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
#timeline2 .axis {
|
|
26
|
-
transform: translate(0px,40px);
|
|
27
|
-
-ms-transform: translate(0px,40px); /* IE 9 */
|
|
28
|
-
-webkit-transform: translate(0px,40px); /* Safari and Chrome */
|
|
29
|
-
-o-transform: translate(0px,40px); /* Opera */
|
|
30
|
-
-moz-transform: translate(0px,40px); /* Firefox */
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.coloredDiv {
|
|
34
|
-
height:20px; width:20px; float:left;
|
|
35
|
-
}
|
|
36
|
-
</style>
|
|
37
|
-
<script type="text/javascript">
|
|
38
|
-
window.onload = function() {
|
|
39
|
-
var testData = [
|
|
40
|
-
{times: [{"starting_time": 1355752800000, "ending_time": 1355759900000}, {"starting_time": 1355767900000, "ending_time": 1355774400000}]},
|
|
41
|
-
{times: [{"starting_time": 1355759910000, "ending_time": 1355761900000}, ]},
|
|
42
|
-
{times: [{"starting_time": 1355761910000, "ending_time": 1355763910000}]}
|
|
43
|
-
];
|
|
44
|
-
|
|
45
|
-
var rectAndCircleTestData = [
|
|
46
|
-
{times: [{"starting_time": 1355752800000,
|
|
47
|
-
"display": "circle"}, {"starting_time": 1355767900000, "ending_time": 1355774400000}]},
|
|
48
|
-
{times: [{"starting_time": 1355759910000,
|
|
49
|
-
"display":"circle"}, ]},
|
|
50
|
-
{times: [{"starting_time": 1355761910000, "ending_time": 1355763910000}]}
|
|
51
|
-
];
|
|
52
|
-
|
|
53
|
-
var labelTestData = [
|
|
54
|
-
{label: "person a", times: [{"starting_time": 1355752800000, "ending_time": 1355759900000}, {"starting_time": 1355767900000, "ending_time": 1355774400000}]},
|
|
55
|
-
{label: "person b", times: [{"starting_time": 1355759910000, "ending_time": 1355761900000}, ]},
|
|
56
|
-
{label: "person c", times: [{"starting_time": 1355761910000, "ending_time": 1355763910000}]}
|
|
57
|
-
];
|
|
58
|
-
|
|
59
|
-
var iconTestData = [
|
|
60
|
-
{class:"jackie", icon: "jackie.png", times: [
|
|
61
|
-
{"starting_time": 1355752800000, "ending_time": 1355759900000},
|
|
62
|
-
{"starting_time": 1355767900000, "ending_time": 1355774400000}]},
|
|
63
|
-
{class:"troll", icon: "troll.png", times: [
|
|
64
|
-
{"starting_time": 1355759910000, "ending_time": 1355761900000,
|
|
65
|
-
"display":"circle"}, ]},
|
|
66
|
-
{class:"wat", icon: "wat.png", times: [
|
|
67
|
-
{"starting_time": 1355761910000, "ending_time": 1355763910000}]}
|
|
68
|
-
];
|
|
69
|
-
|
|
70
|
-
var labelColorTestData = [
|
|
71
|
-
{label: "person a", times: [{"color":"green", "label":"Weeee", "starting_time": 1355752800000, "ending_time": 1355759900000}, {"color":"blue", "label":"Weeee", "starting_time": 1355767900000, "ending_time": 1355774400000}]},
|
|
72
|
-
{label: "person b", times: [{"color":"pink", "label":"Weeee", "starting_time": 1355759910000, "ending_time": 1355761900000}, ]},
|
|
73
|
-
{label: "person c", times: [{"color":"yellow", "label":"Weeee", "starting_time": 1355761910000, "ending_time": 1355763910000}]}
|
|
74
|
-
];
|
|
75
|
-
|
|
76
|
-
var testDataWithColor = [
|
|
77
|
-
{label: "fruit 1", fruit: "orange", times: [
|
|
78
|
-
{"starting_time": 1355759910000, "ending_time": 1355761900000}]},
|
|
79
|
-
{label: "fruit 2", fruit: "apple", times: [
|
|
80
|
-
{"starting_time": 1355752800000, "ending_time": 1355759900000},
|
|
81
|
-
{"starting_time": 1355767900000, "ending_time": 1355774400000}]},
|
|
82
|
-
{label: "fruit3", fruit: "lemon", times: [
|
|
83
|
-
{"starting_time": 1355761910000, "ending_time": 1355763910000}]}
|
|
84
|
-
];
|
|
85
|
-
|
|
86
|
-
var testDataWithColorPerTime = [
|
|
87
|
-
{label: "fruit 2", fruit: "apple", times: [
|
|
88
|
-
{fruit: "orange", "starting_time": 1355752800000, "ending_time": 1355759900000},
|
|
89
|
-
{"starting_time": 1355767900000, "ending_time": 1355774400000},
|
|
90
|
-
{fruit: "lemon", "starting_time": 1355774400000, "ending_time": 1355775500000}]}
|
|
91
|
-
];
|
|
92
|
-
|
|
93
|
-
var testDataRelative = [
|
|
94
|
-
{times: [{"starting_time": 1355752800000, "ending_time": 1355759900000}, {"starting_time": 1355767900000, "ending_time": 1355774400000}]},
|
|
95
|
-
{times: [{"starting_time": 1355759910000, "ending_time": 1355761900000}]},
|
|
96
|
-
{times: [{"starting_time": 1355761910000, "ending_time": 1355763910000}]}
|
|
97
|
-
];
|
|
98
|
-
|
|
99
|
-
var width = 500;
|
|
100
|
-
function timelineRect() {
|
|
101
|
-
var chart = d3.timelines();
|
|
102
|
-
|
|
103
|
-
var svg = d3.select("#timeline1").append("svg").attr("width", width)
|
|
104
|
-
.datum(testData).call(chart);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
function timelineRectNoAxis() {
|
|
108
|
-
var chart = d3.timelines().showTimeAxis();
|
|
109
|
-
|
|
110
|
-
var svg = d3.select("#timeline1_noaxis").append("svg").attr("width", width)
|
|
111
|
-
.datum(testData).call(chart);
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
function timelineCircle() {
|
|
115
|
-
var chart = d3.timelines()
|
|
116
|
-
.tickFormat( //
|
|
117
|
-
{format: d3.timeFormat("%I %p"),
|
|
118
|
-
tickTime: d3.timeHours,
|
|
119
|
-
tickInterval: 1,
|
|
120
|
-
tickSize: 30})
|
|
121
|
-
.display("circle"); // toggle between rectangles and circles
|
|
122
|
-
|
|
123
|
-
var svg = d3.select("#timeline2").append("svg").attr("width", width)
|
|
124
|
-
.datum(testData).call(chart);
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
function timelineRectAndCircle() {
|
|
128
|
-
var chart = d3.timelines();
|
|
129
|
-
|
|
130
|
-
var svg = d3.select("#timeline2_combine").append("svg").attr("width", width)
|
|
131
|
-
.datum(rectAndCircleTestData).call(chart);
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
// the stacked, hover, scrollable
|
|
135
|
-
function timelineHover() {
|
|
136
|
-
var chart = d3.timelines()
|
|
137
|
-
.width(width*4)
|
|
138
|
-
.stack()
|
|
139
|
-
.margin({left:70, right:30, top:0, bottom:0})
|
|
140
|
-
.hover(function (d, i, datum) {
|
|
141
|
-
// d is the current rendering object
|
|
142
|
-
// i is the index during d3 rendering
|
|
143
|
-
// datum is the id object
|
|
144
|
-
var div = $('#hoverRes');
|
|
145
|
-
var colors = chart.colors();
|
|
146
|
-
div.find('.coloredDiv').css('background-color', colors(i))
|
|
147
|
-
div.find('#name').text(datum.label);
|
|
148
|
-
})
|
|
149
|
-
.click(function (d, i, datum) {
|
|
150
|
-
alert(datum.label);
|
|
151
|
-
})
|
|
152
|
-
.scroll(function (x, scale) {
|
|
153
|
-
$("#scrolled_date").text(scale.invert(x) + " to " + scale.invert(x+width));
|
|
154
|
-
});
|
|
155
|
-
|
|
156
|
-
var svg = d3.select("#timeline3").append("svg").attr("width", width)
|
|
157
|
-
.datum(labelTestData).call(chart);
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
function timelineStackedIcons() {
|
|
161
|
-
var chart = d3.timelines()
|
|
162
|
-
.beginning(1355752800000) // we can optionally add beginning and ending times to speed up rendering a little
|
|
163
|
-
.ending(1355774400000)
|
|
164
|
-
.showTimeAxisTick() // toggles tick marks
|
|
165
|
-
.stack() // toggles graph stacking
|
|
166
|
-
.margin({left:70, right:30, top:0, bottom:0})
|
|
167
|
-
;
|
|
168
|
-
var svg = d3.select("#timeline5").append("svg").attr("width", width)
|
|
169
|
-
.datum(iconTestData).call(chart);
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
function timelineLabelColor() {
|
|
173
|
-
var chart = d3.timelines()
|
|
174
|
-
.beginning(1355752800000) // we can optionally add beginning and ending times to speed up rendering a little
|
|
175
|
-
.ending(1355774400000)
|
|
176
|
-
.stack() // toggles graph stacking
|
|
177
|
-
.margin({left:70, right:30, top:0, bottom:0})
|
|
178
|
-
;
|
|
179
|
-
var svg = d3.select("#timeline6").append("svg").attr("width", width)
|
|
180
|
-
.datum(labelColorTestData).call(chart);
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
function timelineRotatedTicks() {
|
|
184
|
-
var chart = d3.timelines()
|
|
185
|
-
.rotateTicks(45);
|
|
186
|
-
|
|
187
|
-
var svg = d3.select("#timeline7").append("svg").attr("width", width)
|
|
188
|
-
.datum(testData).call(chart);
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
function timelineRectColors() {
|
|
192
|
-
var colorScale = d3.scaleOrdinal().range(['#6b0000','#ef9b0f','#ffee00'])
|
|
193
|
-
.domain(['apple','orange','lemon']);
|
|
194
|
-
|
|
195
|
-
var chart = d3.timelines()
|
|
196
|
-
.colors( colorScale )
|
|
197
|
-
.colorProperty('fruit');
|
|
198
|
-
|
|
199
|
-
var svg = d3.select("#timelineColors").append("svg").attr("width", width)
|
|
200
|
-
.datum(testDataWithColor).call(chart);
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
function timelineRectColorsPerTime() {
|
|
204
|
-
var colorScale = d3.scaleOrdinal().range(['#6b0000','#ef9b0f','#ffee00'])
|
|
205
|
-
.domain(['apple','orange','lemon']);
|
|
206
|
-
var chart = d3.timelines()
|
|
207
|
-
.colors( colorScale )
|
|
208
|
-
.colorProperty('fruit');
|
|
209
|
-
var svg = d3.select("#timelineColorsPerTime").append("svg").attr("width", width)
|
|
210
|
-
.datum(testDataWithColorPerTime).call(chart);
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
function timelineRelativeTime() {
|
|
214
|
-
//This solution is for relative time is from
|
|
215
|
-
//http://stackoverflow.com/questions/11286872/how-do-i-make-a-custom-axis-formatter-for-hours-minutes-in-d3-js
|
|
216
|
-
var chart = d3.timelines()
|
|
217
|
-
.relativeTime()
|
|
218
|
-
.tickFormat({
|
|
219
|
-
format: function(d) { return d3.timeFormat("%H:%M")(d) },
|
|
220
|
-
tickTime: d3.timeMinutes,
|
|
221
|
-
tickInterval: 30,
|
|
222
|
-
tickSize: 15,
|
|
223
|
-
});
|
|
224
|
-
|
|
225
|
-
var svg = d3.select("#timelineRelativeTime").append("svg").attr("width", width)
|
|
226
|
-
.datum(testDataRelative).call(chart);
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
function timelineAxisTop() {
|
|
230
|
-
var chart = d3.timelines().showAxisTop().stack();
|
|
231
|
-
|
|
232
|
-
var svg = d3.select("#timelineAxisTop").append("svg").attr("width", width)
|
|
233
|
-
.datum(testData).call(chart);
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
function timelineBgndTick() {
|
|
237
|
-
var chart = d3.timelines().stack().showTimeAxisTick().background('grey');
|
|
238
|
-
|
|
239
|
-
var svg = d3.select("#timelineBgndTick").append("svg").attr("width", width)
|
|
240
|
-
.datum(testData).call(chart);
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
function timelineBgnd() {
|
|
244
|
-
var chart = d3.timelines().stack().background('grey');
|
|
245
|
-
|
|
246
|
-
var svg = d3.select("#timelineBgnd").append("svg").attr("width", width)
|
|
247
|
-
.datum(testData).call(chart);
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
function timelineComplex() {
|
|
251
|
-
var chart = d3.timelines();
|
|
252
|
-
chart.stack();
|
|
253
|
-
chart.showTimeAxisTick();
|
|
254
|
-
// chart.showAxisTop();
|
|
255
|
-
// chart.showToday();
|
|
256
|
-
// chart.itemHeight(50);
|
|
257
|
-
chart.margin({left: 250, right: 0, top: 20, bottom: 0});
|
|
258
|
-
chart.itemMargin(0);
|
|
259
|
-
chart.labelMargin(25);
|
|
260
|
-
|
|
261
|
-
var backgroundColor = "#FCFCFD";
|
|
262
|
-
var altBackgroundColor = "red";
|
|
263
|
-
chart.background(function (datum, i) {
|
|
264
|
-
var odd = (i % 2) === 0;
|
|
265
|
-
return odd ? altBackgroundColor : backgroundColor;
|
|
266
|
-
});
|
|
267
|
-
chart.fullLengthBackgrounds();
|
|
268
|
-
var svg = d3.select("#timelineComplex").append("svg").attr("width", width)
|
|
269
|
-
.datum(labelTestData).call(chart);
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
timelineRect();
|
|
273
|
-
timelineRectNoAxis();
|
|
274
|
-
timelineCircle();
|
|
275
|
-
timelineRectAndCircle();
|
|
276
|
-
timelineHover();
|
|
277
|
-
timelineStackedIcons();
|
|
278
|
-
timelineLabelColor();
|
|
279
|
-
timelineRotatedTicks();
|
|
280
|
-
timelineRectColors();
|
|
281
|
-
timelineRectColorsPerTime();
|
|
282
|
-
timelineRelativeTime();
|
|
283
|
-
timelineAxisTop();
|
|
284
|
-
timelineBgndTick();
|
|
285
|
-
timelineBgnd();
|
|
286
|
-
timelineComplex();
|
|
287
|
-
}
|
|
288
|
-
</script>
|
|
289
|
-
</head>
|
|
290
|
-
<body>
|
|
291
|
-
<div>
|
|
292
|
-
<h3>A simple timeline</h3>
|
|
293
|
-
<div id="timeline1"></div>
|
|
294
|
-
</div>
|
|
295
|
-
<div>
|
|
296
|
-
<h3>A simple timeline without Axis</h3>
|
|
297
|
-
<div id="timeline1_noaxis"></div>
|
|
298
|
-
</div>
|
|
299
|
-
<div>
|
|
300
|
-
<h3>It works with circles too</h3>
|
|
301
|
-
<div id="timeline2"></div>
|
|
302
|
-
</div>
|
|
303
|
-
<div>
|
|
304
|
-
<h3>Combine circles and rectangles</h3>
|
|
305
|
-
<div id="timeline2_combine"></div>
|
|
306
|
-
</div>
|
|
307
|
-
<div>
|
|
308
|
-
<h3>A stacked timeline with hover, click, and scroll events</h3>
|
|
309
|
-
<div id="timeline3"></div>
|
|
310
|
-
<div id="hoverRes">
|
|
311
|
-
<div class="coloredDiv"></div>
|
|
312
|
-
<div id="name"></div>
|
|
313
|
-
<div id="scrolled_date"></div>
|
|
314
|
-
</div>
|
|
315
|
-
</div>
|
|
316
|
-
<div>
|
|
317
|
-
<h3>We can also use icons</h3>
|
|
318
|
-
<div id="timeline5"></div>
|
|
319
|
-
</div>
|
|
320
|
-
|
|
321
|
-
<div>
|
|
322
|
-
<h3>We can change colors and put labels</h3>
|
|
323
|
-
<div id="timeline6"></div>
|
|
324
|
-
</div>
|
|
325
|
-
|
|
326
|
-
<div>
|
|
327
|
-
<h3>We can also rotate tick mark labels</h3>
|
|
328
|
-
<div id="timeline7"></div>
|
|
329
|
-
</div>
|
|
330
|
-
|
|
331
|
-
<div>
|
|
332
|
-
<h3>A timeline with colors mapped from the data</h3>
|
|
333
|
-
<div id="timelineColors"></div>
|
|
334
|
-
</div>
|
|
335
|
-
|
|
336
|
-
<div>
|
|
337
|
-
<h3>A timeline with colors mapped from the data for individual time objects</h3>
|
|
338
|
-
<div id="timelineColorsPerTime"></div>
|
|
339
|
-
</div>
|
|
340
|
-
|
|
341
|
-
<div>
|
|
342
|
-
<h3>A timeline with relative timepoints</h3>
|
|
343
|
-
<div width="100%" id="timelineRelativeTime"></div>
|
|
344
|
-
</div>
|
|
345
|
-
|
|
346
|
-
<div>
|
|
347
|
-
<h3>A stacked timeline with axis on top</h3>
|
|
348
|
-
<div width="100%" id="timelineAxisTop"></div>
|
|
349
|
-
</div>
|
|
350
|
-
|
|
351
|
-
<div>
|
|
352
|
-
<h3>A stacked timeline with backgrounds</h3>
|
|
353
|
-
<div width="100%" id="timelineBgnd"></div>
|
|
354
|
-
</div>
|
|
355
|
-
|
|
356
|
-
<div>
|
|
357
|
-
<h3>A stacked timeline with backgrounds and ticks</h3>
|
|
358
|
-
<div width="100%" id="timelineBgndTick"></div>
|
|
359
|
-
</div>
|
|
360
|
-
|
|
361
|
-
<div>
|
|
362
|
-
<h3>A complex timeline</h3>
|
|
363
|
-
<div width="100%" id="timelineComplex"></div>
|
|
364
|
-
</div>
|
|
365
|
-
|
|
366
|
-
</body>
|
|
367
|
-
</html>
|
package/index.html
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta http-equiv="refresh" content="0;url=demo/" />
|
|
6
|
-
<title>granite-timeline</title>
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<!--
|
|
10
|
-
ELEMENT API DOCUMENTATION SUPPORT COMING SOON
|
|
11
|
-
Visit demo/index.html to see live examples of your element running.
|
|
12
|
-
This page will automatically redirect you there when run in the browser
|
|
13
|
-
with `polymer serve`.
|
|
14
|
-
-->
|
|
15
|
-
</body>
|
|
16
|
-
</html>
|