From f0f83449637f13306a84e2892490dbdeedadfcec Mon Sep 17 00:00:00 2001
From: Made Baruna <made.setia@gmail.com>
Date: Tue, 7 Jun 2022 03:02:54 +0700
Subject: [PATCH] Add pull by day on wish stats

---
 src/routes/wish/tally/index.svelte | 46 ++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

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 @@
             </table>
           </div>
         </div>
+        <div class="bg-background rounded-xl p-4 relative mb-4" style="height: 200px; width: 100%;">
+          <canvas bind:this={chartPullByDay} />
+        </div>
         <div class="bg-background rounded-xl p-4 relative mb-4" style="height: 200px; width: 100%;">
           <canvas bind:this={chart} />
         </div>