-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathmtgaDeckAnalysis.html
92 lines (82 loc) · 5.05 KB
/
mtgaDeckAnalysis.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html style="min-height:100%;">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="icon" type="image/png" href="/images/wcC.png" />
<script src="js/ajax.js"></script>
<link rel="stylesheet" href="css/bulma.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/c3_renderers.min.js" integrity="sha256-GIyyiy+0j73PbyD21LcRsf19KmBZ5TKOTOCDV3yKq9o=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/d3_renderers.min.js" integrity="sha256-gVrbfhLEqr91w7k4clTjpfaNQPOLUYSE+1MXUKEJSNA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/export_renderers.min.js" integrity="sha256-K66VL6j9TG3WhJRh0yu56xEiYTgbxSxgOgTgaodbD3o=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/gchart_renderers.min.js" integrity="sha256-Ve5qXDsBeNuaKKg22jpTMlWThC0OWupW9JtFrXxdy1Q=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/pivot_spec.min.js" integrity="sha256-+jrpqe89NAFbLIqJM4ukIGUro4a+FwjEWc0uvv34K3U=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/plotly_renderers.min.js" integrity="sha256-Y0EYqPg/MEAxRVq5Baq0iNEUDPE8d3KpJ0nk95EqbRQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/pivot.cs.min.js" integrity="sha256-beRnVs5vqoqj3iD0oDqfpBcQCOXWYwyfmDUaHwnBZmE=" crossorigin="anonymous"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/pivot.min.js" integrity="sha256-/btBGbvOvx2h/NcXVS+JPFhnoUGbZXDX0O2v6AaABLU=" crossorigin="anonymous"></script>
<script src="https://cdn.plot.ly/plotly-basic-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/plotly_renderers.min.js" integrity="sha256-Y0EYqPg/MEAxRVq5Baq0iNEUDPE8d3KpJ0nk95EqbRQ=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/pivot.min.css" integrity="sha256-nn3M6N8S2BjPirPhvCF61ZCcgcppdLtnaNOLhiwro7E=" crossorigin="anonymous" />
<style>
.pvtTable, .pvtTable thead tr th, .pvtTable tbody tr th {
font-size:1.5rem !important;
}
.pvtTable thead tr th, .pvtTable tbody tr th, .pvtTable tbody tr td {
padding:0.7rem !important;
}
</style>
</head>
<body style="background-color:#e3e2df; min-height:100vh;">
<script type="text/javascript">
$(function () {
var renderers = $.extend($.pivotUtilities.renderers,
$.pivotUtilities.plotly_renderers);
var urlParams = new URLSearchParams(window.location.search);
sendAjaxGet('/api/User/MtgaDeckAnalysis?deckId=' + urlParams.get('deckId'), function (statuscode, body) {
var data = JSON.parse(body);
if (statuscode === 200) {
$('#deckName').html(data.analysis.deckName);
$('#deckImage').prop('src', data.analysis.deckImage)
$('#deckImage').prop('alt', data.analysis.deckName)
$("#output").pivotUI(data.analysis.matchesInfo,
{
renderers: renderers,
rows: ['eventName', 'firstTurn'],
cols: ["outcome"],
aggregator: $.pivotUtilities.aggregators["Count as Fraction of Rows"],
aggregatorName: 'Count as Fraction of Rows',
exclusions: { outcome: ["Unknown"] }
}
);
}
else {
alert(data.error);
}
});
});
</script>
<h2 class="title is-2">
MTGAHelper Deck Analysis
</h2>
<h5 class="subtitle is-5 has-text-weight-bold">
Use this like a Pivot Table in Excel.<br />Drag and drop labels to the row or column areas to segment and display your data as you want.
</h5>
<div class="columns is-vcentered">
<div class="column is-narrow">
<img id="deckImage" style="height:64px; margin-left:1rem;" />
</div>
<div class="column" style="padding-left:0; padding-top:0;">
<h3 id="deckName" class="title is-3">
<img src="/images/loading.gif" />
This can take some time to load with a lot of matches...
</h3>
</div>
</div>
<div class="is-size-5">
<div id="output"></div>
</div>
</body>
</html>