https://www.hasloch.de/__/scripts/Trend.js

1export default class Trend {
2    constructor(id, time = 3, steps = 30) {
3        this.id = id;
4        this.time = time;
5        this.steps = steps;
6        this.currentStep = 0;
7        this.trendBlocks = [];
8        this.started = false;
9
10        document.querySelectorAll('[data-id="' + this.id + '"] .trendblock').forEach($element => {
11            let trendBlock = {};
12            trendBlock.element = $element;
13            trendBlock.valueElement = $element.querySelector('.trendblock__value');
14            trendBlock.arrowElement = $element.querySelector('.trendblock__arrow i');
15            const $dataElement = $element.querySelector('.trendblock__data');
16            trendBlock.start = parseFloat($dataElement.dataset.start);
17            trendBlock.end = parseFloat($dataElement.dataset.end);
18            trendBlock.precision = Math.max(this.getDecimals(trendBlock.start), this.getDecimals(trendBlock.end));
19            trendBlock.sign = Math.sign(trendBlock.start - trendBlock.end);
20            trendBlock.delta = (trendBlock.end - trendBlock.start) / this.steps;
21
22            this.trendBlocks.push(trendBlock);
23        })
24    }
25
26    start() {
27        if(!this.started) {
28            this.intervalID = window.setInterval(this.doStep.bind(this), (this.time * 1000) / this.steps);
29            this.started = true;
30        }
31    }
32
33    waitForVisible() {
34        this.trendBlocks.forEach((trendBlock) => {
35            const intersectionObserver = new IntersectionObserver((entries) => {
36                let [entry] = entries;
37                if (entry.isIntersecting) {
38                    this.trendBlocks.forEach((trendBlock) => {
39                        intersectionObserver.unobserve(trendBlock.element);
40                    });
41                    this.start();
42                }
43            }, {threshold: 1});
44
45            if (!isVisible(trendBlock.element)) {
46                intersectionObserver.observe(trendBlock.element);
47            }
48            else{
49                this.trendBlocks.forEach((trendBlock) => {
50                    intersectionObserver.unobserve(trendBlock.element);
51                });
52                this.start();
53            }
54        })
55    }
56
57    doStep() {
58        this.currentStep++;
59        this.trendBlocks.forEach(trendBlock => {
60            trendBlock.valueElement.innerText = round(
61                trendBlock.start + trendBlock.delta * this.currentStep,
62                trendBlock.precision
63            );
64            trendBlock.arrowElement.style.rotate = (trendBlock.sign * 45 / this.steps * this.currentStep) + 'deg';
65
66        })
67        if (this.currentStep >= this.steps) {
68            window.clearInterval(this.intervalID);
69        }
70    }
71
72    getDecimals(value) {
73        if (!Number.isInteger(value)) {
74            return value.toString().split('.')[1].length;
75        }
76        return 0;
77    }
78}