Add monthly wish graph
parent
d9315f3ff7
commit
f0d4beb543
|
@ -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>
|
|
@ -2,6 +2,8 @@
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
|
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
|
||||||
import { characters } from '../../data/characters';
|
import { characters } from '../../data/characters';
|
||||||
import { weaponList } from '../../data/weaponList';
|
import { weaponList } from '../../data/weaponList';
|
||||||
|
|
||||||
|
@ -11,6 +13,8 @@
|
||||||
|
|
||||||
let numberFormat = Intl.NumberFormat();
|
let numberFormat = Intl.NumberFormat();
|
||||||
|
|
||||||
|
export let monthlyData = {};
|
||||||
|
|
||||||
const types = [
|
const types = [
|
||||||
{
|
{
|
||||||
name: 'Character Event',
|
name: 'Character Event',
|
||||||
|
@ -84,13 +88,27 @@
|
||||||
currentType = 'weapon';
|
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) {
|
if (rarity === 5) {
|
||||||
legendary++;
|
legendary++;
|
||||||
legendaryPity += pull.pity;
|
legendaryPity += pull.pity;
|
||||||
|
monthlyData[time].legendary++;
|
||||||
|
|
||||||
legendaryPulls.push({ name: itemName, pity: pull.pity });
|
legendaryPulls.push({ name: itemName, pity: pull.pity });
|
||||||
} else if (rarity === 4) {
|
} else if (rarity === 4) {
|
||||||
rare++;
|
rare++;
|
||||||
rarePity += pull.pity;
|
rarePity += pull.pity;
|
||||||
|
monthlyData[time].rare++;
|
||||||
|
|
||||||
if (currentType === 'character') {
|
if (currentType === 'character') {
|
||||||
rareCharacter++;
|
rareCharacter++;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { t } from 'svelte-i18n'
|
import { t } from 'svelte-i18n';
|
||||||
|
|
||||||
import { mdiDatabaseImport, mdiHelpCircle } from '@mdi/js';
|
import { mdiDatabaseImport, mdiHelpCircle } from '@mdi/js';
|
||||||
import { getContext, onMount } from 'svelte';
|
import { getContext, onMount } from 'svelte';
|
||||||
|
@ -13,9 +13,12 @@
|
||||||
import Summary from './_summary.svelte';
|
import Summary from './_summary.svelte';
|
||||||
import Counter from './_counter.svelte';
|
import Counter from './_counter.svelte';
|
||||||
import FirstTimePopup from './_firstTime.svelte';
|
import FirstTimePopup from './_firstTime.svelte';
|
||||||
|
import MonthlyGraph from './_monthlyGraph.svelte';
|
||||||
|
|
||||||
const { open: openModal, close: closeModal } = getContext('simple-modal');
|
const { open: openModal, close: closeModal } = getContext('simple-modal');
|
||||||
|
|
||||||
|
let monthlyData = {};
|
||||||
|
|
||||||
let counter1;
|
let counter1;
|
||||||
let counter2;
|
let counter2;
|
||||||
let counter3;
|
let counter3;
|
||||||
|
@ -155,7 +158,10 @@
|
||||||
legendaryPity={80}
|
legendaryPity={80}
|
||||||
/>
|
/>
|
||||||
<Counter bind:this={counter3} manualInput={settings.manualInput} id="standard" name="Standard" />
|
<Counter bind:this={counter3} manualInput={settings.manualInput} id="standard" name="Standard" />
|
||||||
<Counter bind:this={counter4} manualInput={settings.manualInput} id="beginners" name="Beginners' Wish" />
|
<div class="flex flex-col w-full">
|
||||||
<Summary bind:this={summary} />
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue