-
Notifications
You must be signed in to change notification settings - Fork 43
/
Heatmap.js
116 lines (103 loc) · 3.46 KB
/
Heatmap.js
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import React, { Component } from 'react';
import { Platform, View, WebView, StyleSheet } from 'react-native';
import patch from 'dotaconstants/build/patch.json';
import base from '../themes/BaseStyles';
import { connect } from 'react-redux';
import _ from 'lodash';
const heatmapInputGenerator = (data, map) => {
return `
function scaleAndExtrema(points, scalef, max, shift) {
const newPoints = points.map(p => ({
x: Math.floor(p.x * scalef),
y: Math.floor(p.y * scalef),
value: p.value + (shift || 0),
}));
const vals = points.map(p => p.value);
const localMax = Math.max.apply(null, vals);
return {
min: 0,
max: max || localMax,
data: newPoints,
}
}
document.querySelector('.map').src = 'maps/${map}';
setTimeout(() => {
var s = document.querySelector('.map').getBoundingClientRect();
var w = s.width;
var heatmapInstance = h337.create({
container: document.querySelector('.heatmap'),
radius: 15 * (w / 600)
});
heatmapInstance.setData(scaleAndExtrema(${data},w / 127, null, 25));
}, 100);
`;
}
const dotaMaps = [
{ patchName: '7.07', mapImage: 'detailed_707.png' },
{ patchName: '7.00', mapImage: 'detailed_700.png' },
{ patchName: '6.86', mapImage: 'detailed_686.png' },
{ patchName: '6.82', mapImage: 'detailed_682.png' },
{ patchName: '6.70', mapImage: 'detailed_pre682.png' },
];
const patchDate = {};
patch.forEach((patchElement) => {
patchDate[patchElement.name] = new Date(patchElement.date).getTime() / 1000;
});
class Heatmap extends Component {
getMap(startTime) {
if (startTime == null) {
return dotaMaps[0].mapImage;
}
for (let i = 0; i < dotaMaps.length; i += 1) {
if (startTime >= patchDate[dotaMaps[i].patchName]) {
return dotaMaps[i].mapImage;
}
}
return dotaMaps[0].mapImage;
}
render() {
let webview = null;
let heatmap = (el) => this.heatmap = el;
if(this.props.points) {
let uri = Platform.OS === 'ios' ? 'heatmap.html' : 'file:///android_asset/heatmap.html';
let script = heatmapInputGenerator(JSON.stringify(this.props.points), this.getMap(this.props.startTime));
webview = <WebView
source = {{uri: uri}}
scrollEnabled = {false}
injectedJavaScript = {script}
javaScriptEnabled
originWhitelist={['*']}
style = {{width: 300, height: 300, backgroundColor: this.props.background}}
/>;
}
return (
<View style = {styles.webviewContainer} >
<View style = {styles.webview} ref = {heatmap}>
{webview}
</View>
</View>
);
}
}
const baseStyles = _.extend(base.general, {
button: {
backgroundColor: 'blue',
borderRadius: 10,
marginTop: 25,
padding: 10
},
webviewContainer: {
alignItems: 'center',
flex: 1,
justifyContent: 'center'
},
text: {
color: 'black',
fontWeight: 'bold',
letterSpacing: 3
},
webview: {
}
});
const styles = StyleSheet.create(baseStyles);
export default connect()(Heatmap);