Web components - komponent obl-daily-statistics

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 290 razy

Komponent obl-daily-statistics umożliwia wyświetlanie statystyki dla zakresu dat.

<obl-daily-statistics></obl-daily-statistics> <script>const daily = document.querySelector('obl-daily-statistics'); const year = 2023; daily.settings = { start: new Date(year, 0, 1), end: new Date(year + 1, 0, 1), size: 12, margin: 3, colors: ['rgba(200, 200, 200, 0.5)', '#ffe525', '#25ff65', '#25dfff', '#ff2571'], get: async (startDate, endDate) => new Array(30).fill(0).map(v => { return { date: new Date(startDate.getFullYear(), Math.round(Math.random() * 11), Math.round(Math.random() * 28)), count: Math.round(Math.random() * 80), }; }), getExtData: async statistic => [ statistic.count ? { count: statistic.count, description: 'some stuff to count', } : {}, ], text: { less: 'minimum', more: 'maksimum', total: 'Suma', dayStatistic: statistics => statistics.date.toLocaleDateString() + ' Zliczono ' + statistics.count, }, }; </script>

Rezultatem powyższego kodu jest: