addes guage import version

TradingPal · Dec 1, 2017 · 1c45360 · 1c45360
1 parent c5ebe30
commit 1c45360
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 99 deletions.
diff --git a/App/index.js b/App/index.js
@@ -1,21 +1,21 @@
-import React, { Component, PropTypes } from "react";
+import React, { Component, PropTypes, } from 'react';
 import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View,
-  WebView,
-  Image,
-  Dimensions
-} from "react-native";
+    AppRegistry,
+    StyleSheet,
+    Text,
+    View,
+    WebView,
+    Image,
+    Dimensions
+} from 'react-native';
 
-const win = Dimensions.get("window");
+const win = Dimensions.get('window');
 class ChartWeb extends Component {
-  constructor(props) {
-    super(props);
+    constructor(props){
+        super(props);
 
-    this.state = {
-      init: `<html>
+        this.state={
+            init:`<html>
                     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
                     <style media="screen" type="text/css">
                     #container {
@@ -32,25 +32,18 @@ class ChartWeb extends Component {
                     </style>
                     <head>
                         <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
-                        ${this.props.stock
-                          ? '<script src="https://code.highcharts.com/stock/highstock.js"></script>'
-                          : '<script src="https://code.highcharts.com/highcharts.js"></script>'}
-                        ${this.props.more
-                          ? '<script src="https://code.highcharts.com/highcharts-more.js"></script>'
-                          : ""}
-                        ${this.props.heatMap
-                          ? '<script src="https://code.highcharts.com/modules/heatmap.js"></script>'
-                          : ""}
+                        ${this.props.stock ? '<script src="https://code.highcharts.com/stock/highstock.js"></script>'
+                                      : '<script src="https://code.highcharts.com/highcharts.js"></script>'}
+                        ${this.props.more ? '<script src="https://code.highcharts.com/highcharts-more.js"></script>'
+                                      : ''}
+                        ${this.props.guage ? '<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>'
+                                      : ''}
                         <script src="https://code.highcharts.com/modules/exporting.js"></script>
                         <script>
                         $(function () {
-                            Highcharts.setOptions(${JSON.stringify(
-                              this.props.options
-                            )});
-                            Highcharts.${this.props.stock
-                              ? "stockChart"
-                              : "chart"}('container', `,
-      end: `           );
+                            Highcharts.setOptions(${JSON.stringify(this.props.options)});
+                            Highcharts.${this.props.stock ? 'stockChart' : 'chart'}('container', `,
+            end:`           );
                         });
                         </script>
                     </head>
@@ -59,81 +52,82 @@ class ChartWeb extends Component {
                         </div>
                     </body>
                 </html>`,
-      Wlayout: {
-        height: win.height,
-        width: win.width
-      }
-    };
-  }
+            Wlayout:{
+                height:win.height,
+                width:win.width
+            }
+        }
+    }
 
-  // used to resize on orientation of display
-  reRenderWebView(e) {
-    this.setState({
-      height: e.nativeEvent.layout.height,
-      width: e.nativeEvent.layout.width
-    });
-  }
+    // used to resize on orientation of display
+    reRenderWebView(e) {
+        this.setState({
+            height: e.nativeEvent.layout.height,
+            width: e.nativeEvent.layout.width,
+        })
+    }
 
-  render() {
-    let config = 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;
-    });
+    render() {
+        let config = 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;
+        });
 
-    config = JSON.parse(config);
-    let concatHTML = `${this.state.init}${flattenObject(config)}${this.state
-      .end}`;
 
-    return (
-      <View style={this.props.style}>
-        <WebView
-          onLayout={this.reRenderWebView}
-          style={styles.full}
-          source={{ html: concatHTML, baseUrl: "web/" }}
-          javaScriptEnabled={true}
-          domStorageEnabled={true}
-          scalesPageToFit={true}
-          scrollEnabled={false}
-          automaticallyAdjustContentInsets={true}
-        />
-      </View>
-    );
-  }
-}
+        config = JSON.parse(config)
+        let concatHTML = `${this.state.init}${flattenObject(config)}${this.state.end}`;
+
+        return (
+          <View style={this.props.style}>
+              <WebView
+                  onLayout={this.reRenderWebView}
+                  style={styles.full}
+                  source={{ html: concatHTML, baseUrl: 'web/' }}
+                  javaScriptEnabled={true}
+                  domStorageEnabled={true}
+                  scalesPageToFit={true}
+                  scrollEnabled={false}
+                  automaticallyAdjustContentInsets={true}
+                  {...this.props}
+              />
+          </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 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 flattenText = function(item,key) {
+    if(key=="y") console.log(item, typeof 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)}, `
+        })
+        if(item.length>0) 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"
-  }
+    full: {
+        flex:1,
+        backgroundColor:'transparent'
+    }
 });
 
 module.exports = ChartWeb;
diff --git a/README.md b/README.md
@@ -109,6 +109,10 @@ render() {
 | heatMap   | false | Default false; use HeatMap |
 | style | false      |   Style object to be passed onto the WebView |
 | options | false      |   Pass global and lang options from Highcharts |
+| guage | false      |   Import gauge library from highcharts |
+
+
+props added to WebView
 
 ## NOTE
 if not rendering in real device add this two props to the component

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-highcharts",
-  "version": "0.2.1",
+  "version": "1.1",
   "description":
     "JavaScript implementation of a view container that can flip between its front and back, where the back has a console.log and the front is your aplication.",
   "main": "react-native-highcharts.js",

diff --git a/react-native-highcharts.js b/react-native-highcharts.js
@@ -36,6 +36,8 @@ class ChartWeb extends Component {
                                       : '<script src="https://code.highcharts.com/highcharts.js"></script>'}
                         ${this.props.more ? '<script src="https://code.highcharts.com/highcharts-more.js"></script>'
                                       : ''}
+                        ${this.props.guage ? '<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>'
+                                      : ''}
                         <script src="https://code.highcharts.com/modules/exporting.js"></script>
                         <script>
                         $(function () {
@@ -73,7 +75,7 @@ class ChartWeb extends Component {
 
         config = JSON.parse(config)
         let concatHTML = `${this.state.init}${flattenObject(config)}${this.state.end}`;
-
+        
         return (
           <View style={this.props.style}>
               <WebView
@@ -85,6 +87,7 @@ class ChartWeb extends Component {
                   scalesPageToFit={true}
                   scrollEnabled={false}
                   automaticallyAdjustContentInsets={true}
+                  {...this.props}
               />
           </View>
         );
@@ -98,7 +101,8 @@ var flattenObject = function (obj, str='{') {
     return `${str.slice(0, str.length - 2)}}`
 };
 
-var flattenText = function(item) {
+var flattenText = function(item,key) {
+    if(key=="y") console.log(item, typeof item);
     var str = ''
     if (item && typeof item === 'object' && item.length == undefined) {
         str += flattenObject(item)
@@ -107,7 +111,7 @@ var flattenText = function(item) {
         item.forEach(function(k2) {
             str += `${flattenText(k2)}, `
         })
-        str = str.slice(0, str.length - 2)
+        if(item.length>0) str = str.slice(0, str.length - 2)
         str += ']'
     } else if(typeof item === 'string' && item.slice(0, 8) === 'function') {
         str += `${item}`