Add monthly wish graph

src/routes/wish/_monthlyGraph.svelte

@@ -0,0 +1,88 @@
+<script>
+  import Chart from 'chart.js';
+
+  export let data = {};
+  let chart;
+
+  function createGraph() {
+    if (Object.keys(data).length === 0 || chart === undefined) return;
+
+    Chart.defaults.global.defaultFontColor = '#cbd5e0';
+    Chart.defaults.global.defaultFontFamily = 'Poppins';
+
+    const labels = [];
+    const total = [];
+    const legendary = [];
+    const rare = [];
+
+    const entries = Object.entries(data);
+    for (let [time, value] of entries) {
+      labels.push(time);
+      total.push(value.total);
+      legendary.push(value.legendary);
+      rare.push(value.rare);
+    }
+
+    new Chart(chart, {
+      type: 'line',
+      data: {
+        labels,
+        datasets: [
+          {
+            label: '5* pulls',
+            data: legendary,
+            backgroundColor: 'rgba(255, 177, 63, 0.7)',
+            borderColor: '#FFB13F',
+            borderWidth: 1,
+          },
+          {
+            label: '4* pulls',
+            data: rare,
+            backgroundColor: 'rgba(210, 143, 214, 0.7)',
+            borderColor: '#D28FD6',
+            borderWidth: 1,
+          },
+          {
+            label: 'Total pulls',
+            data: total,
+            backgroundColor: 'rgba(107, 161, 192, 0.7)',
+            borderColor: '#6BA1C0',
+            borderWidth: 1,
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        legend: {
+          display: false,
+        },
+        tooltips: {
+          mode: 'index',
+          intersect: false,
+        },
+        elements: {
+          line: {
+            tension: 0.2,
+          },
+        },
+        scales: {
+          xAxes: [
+            {
+              ticks: {
+                minRotation: 45,
+                maxRotation: 70,
+              },
+            },
+          ],
+        },
+      },
+    });
+  }
+
+  $: data, createGraph();
+</script>
+
+<div class="flex flex-col bg-item rounded-xl p-4 w-full mt-4" style="height: 200px;">
+  <canvas width="500" height="200" bind:this={chart} />
+</div>

src/routes/wish/_summary.svelte

@@ -2,6 +2,8 @@
   import { t } from 'svelte-i18n';
 
   import { onMount } from 'svelte';
+  import dayjs from 'dayjs';
+  
   import { characters } from '../../data/characters';
   import { weaponList } from '../../data/weaponList';
 
@@ -11,6 +13,8 @@
 
   let numberFormat = Intl.NumberFormat();
 
+  export let monthlyData = {};
+
   const types = [
     {
       name: 'Character Event',
@@ -84,13 +88,27 @@
             currentType = 'weapon';
           }
 
+          const time = dayjs.unix(pull.time).format('YYYY-MM');
+          if (monthlyData[time] === undefined) {
+            monthlyData[time] = {
+              total: 0,
+              legendary: 0,
+              rare: 0,
+            }
+          }
+
+          monthlyData[time].total++;
+
           if (rarity === 5) {
             legendary++;
             legendaryPity += pull.pity;
+            monthlyData[time].legendary++;
+
             legendaryPulls.push({ name: itemName, pity: pull.pity });
           } else if (rarity === 4) {
             rare++;
             rarePity += pull.pity;
+            monthlyData[time].rare++;
 
             if (currentType === 'character') {
               rareCharacter++;

src/routes/wish/index.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { t } from 'svelte-i18n'
+  import { t } from 'svelte-i18n';
 
   import { mdiDatabaseImport, mdiHelpCircle } from '@mdi/js';
   import { getContext, onMount } from 'svelte';
@@ -13,9 +13,12 @@
   import Summary from './_summary.svelte';
   import Counter from './_counter.svelte';
   import FirstTimePopup from './_firstTime.svelte';
+  import MonthlyGraph from './_monthlyGraph.svelte';
 
   const { open: openModal, close: closeModal } = getContext('simple-modal');
 
+  let monthlyData = {};
+
   let counter1;
   let counter2;
   let counter3;
@@ -155,7 +158,10 @@
       legendaryPity={80}
     />
     <Counter bind:this={counter3} manualInput={settings.manualInput} id="standard" name="Standard" />
-    <Counter bind:this={counter4} manualInput={settings.manualInput} id="beginners" name="Beginners' Wish" />
-    <Summary bind:this={summary} />
+    <div class="flex flex-col w-full">
+      <Counter bind:this={counter4} manualInput={settings.manualInput} id="beginners" name="Beginners' Wish" />
+      <MonthlyGraph bind:data={monthlyData} />
+    </div>
+    <Summary bind:this={summary} bind:monthlyData />
   </div>
 </div>