forked from TradingPal/react-native-highcharts
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathreact-native-highcharts.js
106 lines (98 loc) · 3.21 KB
/
react-native-highcharts.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
import React, { Component } from 'react'
import { StyleSheet, View, WebView, Dimensions } from 'react-native'
import { Highcharts, HighchartsMore, MomentJs, MomentJsTimezone } from './Resources'
const { height, width } = Dimensions.get('window')
class ChartWeb extends Component {
constructor (props) {
super(props)
this.state = {
height,
width
}
}
createChartHTML (config, options) {
return `<html>
<head>
<style media="screen" type="text/css">#container{width:100%;height:100%;top:0;left:0;right:0;bottom:0;position:absolute;}</style>
<script>${Highcharts}</script>
<script>${HighchartsMore}</script>
<script>${MomentJs}</script>
<script>${MomentJsTimezone}</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
${this.props.options ? 'Highcharts.setOptions(' + options + ')' : null}
Highcharts.${this.props.stock ? 'stockChart' : 'chart'}('container', ${config});
});
</script>
</head>
<body>
<div id="container" />
</body>
</html>`
}
// used to resize on orientation of display
reRenderWebView (e) {
this.setState({
height: e.nativeEvent.layout.height,
width: e.nativeEvent.layout.width
})
}
render () {
const config = JSON.parse(JSON.stringify(this.props.config, function (key, value) {
// create string of json but if it detects function it uses toString()
return (typeof value === 'function') ? value.toString() : value
}))
const options = JSON.parse(JSON.stringify(this.props.options, function (key, value) {
// create string of json but if it detects function it uses toString()
return (typeof value === 'function') ? value.toString() : value
}))
const concatHTML = this.createChartHTML(flattenObject(config), flattenObject(options))
return (
<View style={this.props.style}>
<WebView
onLayout={this.reRenderWebView}
style={styles.full}
source={{ html: concatHTML, baseUrl: 'web/' }}
javaScriptEnabled
domStorageEnabled
scalesPageToFit
scrollEnabled={false}
automaticallyAdjustContentInsets
/>
</View>
)
};
};
var flattenObject = function (obj, str = '{') {
Object.keys(obj).forEach(function (key) {
str += `${key}: ${flattenText(obj[key])}, `
})
return `${str.slice(0, str.length - 2)}}`
}
var flattenText = function (item) {
var str = ''
if (item && typeof item === 'object' && item.length === undefined) {
str += flattenObject(item)
} else if (item && typeof item === 'object' && item.length !== undefined) {
str += '['
item.forEach(function (k2) {
str += `${flattenText(k2)}, `
})
str = str.slice(0, str.length - 2)
str += ']'
} else if (typeof item === 'string' && item.slice(0, 8) === 'function') {
str += `${item}`
} else if (typeof item === 'string') {
str += `"${item.replace(/"/g, '\\"')}"`
} else {
str += `${item}`
}
return str
}
var styles = StyleSheet.create({
full: {
flex: 1,
backgroundColor: 'transparent'
}
})
module.exports = ChartWeb