Web components - komponent obl-daily-statistics
Stronę tą wyświetlono już: 369 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: