https://geo.stat.gov.lv/stage2/lib/timeknots/src/timeknots-min.js

1var TimeKnots = {
2  draw: function (a, b, c) {
3    var d = {
4      width: 600,
5      height: 100,
6      radius: 10,
7      lineWidth: 4,
8      color: '#999',
9      background: '#FFF',
10      dateFormat: '%Y/%m/%d %H:%M:%S',
11      horizontalLayout: !0,
12      showLabels: !1,
13      labelFormat: '%Y/%m/%d %H:%M:%S',
14      addNow: !1,
15      seriesColor: d3.scale.category20(),
16      dateDimension: !0,
17    };
18
19    var mouseDown = false;
20    const mouseMoveEvent = event => {
21      const timelineSplits = d.width / b.length;
22      const currentSplit = (event.pageX + document.getElementById('animatetimeline').scrollLeft - 95) / timelineSplits;
23
24      if (b[Math.round(currentSplit)]) {
25        $('#go_to_year_input').val(b[Math.round(currentSplit)].name);
26        $('#go_to_year').click();
27      }
28    };
29
30    document.onmouseup = function () {
31      mouseDown = false;
32
33      if (document.getElementById('animatetimeline')) {
34        document.getElementById('animatetimeline').style.cursor = 'unset';
35      }
36
37      if (document.getElementById('mapInfo')) {
38        document.getElementById('mapInfo').removeEventListener('mousemove', mouseMoveEvent);
39      }
40      document.removeEventListener('mousemove', mouseMoveEvent);
41    };
42
43    if (void 0 != c) for (var e in c) d[e] = c[e];
44    0 != d.addNow && b.push({ date: new Date(), name: d.addNowLabel || 'Today' });
45    var g = d3.select(a).append('svg').attr('width', d.width).attr('height', d.height),
46      f = d3
47        .select(a)
48        .append('div')
49        .style('opacity', 0)
50        .style('position', 'absolute')
51        .style('background', 'rgba(0,0,0,0.5)')
52        .style('color', 'white')
53        .style('padding', '5px 10px 5px 10px')
54        .style('-moz-border-radius', '8px 8px')
55        .style('border-radius', '8px 8px')
56        .style('pointer-events', 'none')
57        .style('left', 0)
58        .style('top', 0);
59    if (d.dateDimension)
60      var h = b.map(function (a) {
61          return Date.parse(a.date);
62        }),
63        i = d3.max(h),
64        j = d3.min(h);
65    else
66      var h = b.map(function (a) {
67          return a.value;
68        }),
69        i = d3.max(h),
70        j = d3.min(h);
71    var hname = b.map(function (a) {
72      return a;
73    });
74    jname = hname.find(hname => hname.value === j).name;
75    iname = hname.find(hname => hname.value === i).name;
76    var k =
77        1.5 *
78          (d3.max(
79            b.map(function (a) {
80              return a.radius;
81            }),
82          ) || d.radius) +
83        d.lineWidth,
84      l = d.horizontalLayout ? (d.width - 2 * k) / (i - j) : (d.height - 2 * k) / (i - j),
85      m = [];
86    if (
87      (i == j && ((l = 0), (k = d.horizontalLayout ? d.width / 2 : d.height / 2)),
88      (linePrevious = { x1: null, x2: null, y1: null, y2: null }),
89      g
90        .selectAll('line')
91        .data(b)
92        .enter()
93        .append('line')
94        .attr('class', 'timeline-line')
95        .attr('x1', function (a) {
96          var b;
97          if (d.horizontalLayout) {
98            var c = d.dateDimension ? new Date(a.date).getTime() : a.value;
99            b = Math.floor(l * (c - j) + k);
100          } else b = Math.floor(d.width / 2);
101          return (linePrevious.x1 = b), b;
102        })
103        .attr('x2', function (a) {
104          if (null != linePrevious.x1) return linePrevious.x1;
105          if (d.horizontalLayout) {
106            var b = d.dateDimension ? new Date(a.date).getTime() : a.value;
107            ret = Math.floor(l * (b - j));
108          }
109          return Math.floor(d.width / 2);
110        })
111        .attr('y1', function (a) {
112          var b;
113          if (d.horizontalLayout) b = Math.floor(d.height / 2);
114          else {
115            var c = d.dateDimension ? new Date(a.date).getTime() : a.value;
116            b = Math.floor(l * (c - j)) + k;
117          }
118          return (linePrevious.y1 = b), b;
119        })
120        .attr('y2', function (a) {
121          if (null != linePrevious.y1) return linePrevious.y1;
122          if (d.horizontalLayout) return Math.floor(d.height / 2);
123          var b = d.dateDimension ? new Date(a.date).getTime() : a.value;
124          return Math.floor(l * (b - j));
125        })
126        .style('stroke', function (a) {
127          return void 0 != a.color ? a.color : void 0 != a.series ? (m.indexOf(a.series) < 0 && m.push(a.series), d.seriesColor

127(m.indexOf(a.series))) : d.color;
128        })
129        .style('stroke-width', d.lineWidth),
130      g
131        .selectAll('circle')
132        .data(b)
133        .enter()
134        .append('circle')
135        .attr('class', 'timeline-event')
136        .attr('id', function (d) {
137          return 'timeline-circle-' + d.name;
138        })
139        .attr('r', function (a) {
140          return void 0 != a.radius ? a.radius : d.radius;
141        })
142        .style('stroke', function (a) {
143          return void 0 != a.color
144            ? a.color
145            : void 0 != a.series
146            ? (m.indexOf(a.series) < 0 && m.push(a.series), console.log(a.series, m, m.indexOf(a.series)), d.seriesColor(m.indexOf(a.series)))
147            : d.color;
148        })
149        .style('stroke-width', function (a) {
150          return void 0 != a.lineWidth ? a.lineWidth : d.lineWidth;
151        })
152        .style('fill', function (a) {
153          return void 0 != a.background ? a.background : d.background;
154        })
155        .style('cursor', 'pointer')
156        .attr('cy', function (a) {
157          if (d.horizontalLayout) return Math.floor(d.height / 2);
158          var b = d.dateDimension ? new Date(a.date).getTime() : a.value;
159          return Math.floor(l * (b - j) + k);
160        })
161        .attr('cx', function (a) {
162          if (d.horizontalLayout) {
163            var b = d.dateDimension ? new Date(a.date).getTime() : a.value,
164              c = Math.floor(l * (b - j) + k);
165            return c;
166          }
167          return Math.floor(d.width / 2);
168        })
169        .on('mouseover', function (a) {
170          if (d.dateDimension)
171            var b = d3.time.format(d.dateFormat),
172              c = b(new Date(a.date)),
173              e = '' != c ? a.name : a.name;
174          else
175            var b = function (a) {
176                return a;
177              },
178              c = a.value,
179              e = a.name;
180          d3
181            .select(this)
182            .transition()
183            .duration(100)
184            .attr('r', function (a) {
185              return void 0 != a.radius ? Math.floor(1.5 * a.radius) : Math.floor(1.5 * d.radius);
186            }),
187            f.html(''),
188            void 0 != a.img && f.append('img').style('float', 'left').style('margin-right', '4px').attr('src', a.img).attr('width', '64px'),
189            f.append('div').style('float', 'left').html(e),
190            f.transition().duration(100).style('opacity', 0.9);
191        })
192        .on('mouseout', function () {
193          d3
194            .select(this)
195            .transition()
196            .duration(100)
197            .attr('r', function (a) {
198              return void 0 != a.radius ? a.radius : d.radius;
199            }),
200            f.transition().duration(100).style('opacity', 0);
201        })
202        .on('mousedown', function (a) {
203          $('#go_to_year_input').val(a.name);
204          $('#go_to_year').click();
205          mouseDown = true;
206
207          document.addEventListener('mousemove', mouseMoveEvent);
208          document.getElementById('mapInfo').addEventListener('mousemove', mouseMoveEvent);
209          document.getElementById('animatetimeline').style.cursor = 'grabbing';
210
211          if ($('#pause_animation').find('.ion-pause').length > 0) {
212            $('#pause_animation').click();
213          }
214        })
215        .on('click', function (a) {
216          $('#go_to_year_input').val(a.name);
217          $('#go_to_year').click();
218        }),
219      0 != d.showLabels)
220    ) {
221      var n = function (a) {
222          return a;
223        },
224        o = jname,
225        p = iname;
226
227      if (b.length > 8 && b[0].name.match(/\d{4}/)) {
228        b.slice(3, b.length - 3).forEach((data, index) => {
229          if (data.name.match(/^\d{3}5$|^\d{3}0$|^\d{4}Q1$|^\d{4}M01$|^\d{4}M07$/)) {
230            g.append('text')
231              .text(data.name)
232              .style('font-size', '100%')
233              .style('fill', '#fff')
234              .style('pointer-events', 'none')
235              .style('user-select', 'none')
236              .attr('x', function (a) {
237                var b = d.dateDimension ? new Date(data.date).getTime() : data.value,
238                  c = Math.floor(l * (b - j) + k);
239
240                if (data.name.length === 4) {
241                  c = c - 15;
242                }
243
244                if (data.name.length === 6) {
245                  c = c - 24;
246                }
247
248                if (data.name.length === 7) {
249                  c = c - 30;
250                }
251
252                return c;
253              })
254              .attr('y', function (a) {
255                return d.horizontalLayout ? Math.floor(d.height / 2 + (k + this.getBBox().height)) : k + this.getBBox().height / 2;
256              });
257          }
258        });
259      }
260      g
261        .append('text')

262        .text(o)
263        .style('font-size', '100%')
264        .style('fill', '#fff')
265        .style('pointer-events', 'none')
266        .style('user-select', 'none')
267        .attr('x', function (a) {
268          return d.horizontalLayout ? d3.max([0, k - this.getBBox().width / 2]) : Math.floor(this.getBBox().width / 2);
269        })
270        .attr('y', function (a) {
271          return d.horizontalLayout ? Math.floor(d.height / 2 + (k + this.getBBox().height)) : k + this.getBBox().height / 2;
272        }),
273        g
274          .append('text')
275          .text(p)
276          .style('font-size', '100%')
277          .style('fill', '#fff')
278          .style('pointer-events', 'none')
279          .style('user-select', 'none')
280          .attr('x', function (a) {
281            return d.horizontalLayout ? d.width - d3.max([this.getBBox().width, k + this.getBBox().width / 2]) : Math.floor(this.getBBox().width / 2);
282          })
283          .attr('y', function (a) {
284            return d.horizontalLayout ? Math.floor(d.height / 2 + (k + this.getBBox().height)) : d.height - k + this.getBBox().height / 2;
285          });
286    }
287    g.on('mousemove', function () {
288      const outerWidth = parseInt(f.style('width').replace('px', '')) / 2;
289      let left = d3.event.pageX - 80 - outerWidth;
290      if (d3.event.pageX > d.width) {
291        left = d.width - parseInt(f.style('width').replace('px', '')) - 21;
292      } else if (left < 0) {
293        left = 0;
294      }
295
296      if (mouseDown) {
297        mouseMoveEvent(d3.event);
298      }
299
300      return (tipPixels = parseInt(f.style('height').replace('px', ''))), f.style('left', left + 'px');
301    }).on('mouseout', function () {
302      return f.style('opacity', 0).style('top', '0px').style('left', '0px');
303    });
304  },
305};