diff --git a/src/routes/wish/tally/index.svelte b/src/routes/wish/tally/index.svelte index aea2b4e7..67e4bb2f 100644 --- a/src/routes/wish/tally/index.svelte +++ b/src/routes/wish/tally/index.svelte @@ -2,6 +2,7 @@ import { mdiLoading, mdiStar } from '@mdi/js'; import { onMount, tick } from 'svelte'; import Chart from 'chart.js'; + import dayjs from 'dayjs'; import { t } from 'svelte-i18n'; import Ad from '../../../components/Ad.svelte'; @@ -92,6 +93,7 @@ let chart; let chart2; + let chartPullByDay; let error; @@ -308,6 +310,47 @@ }, }); + new Chart(chartPullByDay, { + type: 'line', + data: { + labels: data.pullByDay.map((e) => dayjs(e.day).format('MM/DD')), + datasets: [ + { + label: 'Pull By Day %', + data: data.pullByDay.map((e) => e.percentage * 100), + borderColor: '#4E7CFF', + backgroundColor: '#4E7CFF', + borderWidth: 3, + pointRadius: 2, + fill: false, + type: 'line', + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + interaction: { + mode: 'index', + intersect: false, + }, + tooltips: { + mode: 'index', + intersect: false, + callbacks: { + title: (tooltipItem) => { + return dayjs(data.pullByDay[tooltipItem[0].index].day).format('dddd, MMM DD YYYY'); + }, + label: (tooltipItem) => { + return `Pull by day: ${numberFormatSecondary.format( + data.pullByDay[tooltipItem.index].percentage * totalWish, + )} (${numberFormat.format(tooltipItem.value)}%)`; + }, + }, + }, + }, + }); + new Chart(chart2, { type: 'bar', data: { @@ -546,6 +589,9 @@ +