0.1.1 • Published 2 years ago

react-native-highcharts-webview v0.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

react-native-highcharts-webview

Highcharts react native wrapper, fork from HighCharts.

Platforms

x iOS x Android Web

Prerequisites

  • expo >=43.0.3, we are using the Asset and FileSystem packages
  • react-native-webview

Installation

Install dependencies

yarn add react-native-highcharts-webview
yarn add expo

Extra steps for bare react native projects

  1. follow the setup guide of Expo
  2. Add permissions to Android manifest
<!-- Added permissions -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.INTERNET" />

Edit metro.config.js

const path = require('path');
const blacklist = require('metro-config/src/defaults/blacklist');
const escape = require('escape-string-regexp');
const pak = require('../package.json');
const { getDefaultConfig } = require('metro-config'); // <-- add this

const root = path.resolve(__dirname, '..');

const modules = Object.keys({
  ...pak.peerDependencies,
});

module.exports = (async () => {
    //<------add this
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
   //</add this-------->

  return {
    projectRoot: __dirname,
    watchFolders: [root],
    resolver: {
      blacklistRE: blacklist(
        modules.map(
          (m) =>
            new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
        )
      ),
      sourceExts, ///<------add this
      extraNodeModules: modules.reduce((acc, name) => {
        acc[name] = path.join(__dirname, 'node_modules', name);
        return acc;
      }, {}),
      assetExts: [...assetExts, 'hcscript'], ///<------add this
    },
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
  };
})();

Try it

iOS

yarn example ios

Android

yarn example android

Example

import React from 'react';
import { StyleSheet, View } from 'react-native';
import HighchartsReactNative from 'react-native-highcharts-webview';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      chartOptions: {
        series: [
          {
            data: [1, 2, 3],
          },
        ],
      },
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <HighchartsReactNative
          styles={styles.container}
          options={this.state.chartOptions}
        />
      </View>
    );
  }
}

Options details

Available properties:

  <HighchartsReact
    styles={styles}
    webviewStyles={webviewStyles}
    options={this.state.chartOptions}
    modules={modules}
    callback={chartCallback}
    useSSL={true}
    useCDN={true} // or string 'mydomain.com/highchartsfiles/'
    data={'Data to be stored as global variable in Webview'}
    onMessage={message => this.onMessage(message)}
    loader={ true }
    devPort={'xxx.xxx.xxx.xxx:xxxxx'} // i.e 192.168.0.1:12345
    setOptions={highchartsGlobalOptions}
  />
ParameterTypeRequiredDescription
stylesObjectnoYou can style your container using JavaScript like in the regular react and react native.
optionsObjectyesHighcharts chart configuration object. Please refer to the Highcharts API documentation. This option is required.
modulesArraynoList of modules which should be added to Highcharts. I.e when you would like to setup solidgauge series which requires highcharts-more and solid-gauge files, you should declare array: const modules = ['solid-gauge']
callbackFunctionnoA callback function for the created chart. First argument for the function will hold the created chart. Default this in the function points to the chart. This option is optional.
useCDNBooleannoSet the flag as true, if you would like to load files (i.e highcharts.js) from CDN instead of local file system. You can declare an url to your domain (i.e mydomain.com/highchartsfiles/)
useSSLBooleannoSet the flag as true, if you would like to load files (i.e highcharts.js) by SSL. (The useCDN flag is mandatory).
dataanynoData to be stored as global variable in Webview.
onMessageFunctionnoGlobal communication between Webview and App. The function takes the message as the first argument.
loaderBooleannoSet the flag to true, if you would like to show loader while chart is loading.
webviewStylesObjectnoYou can style your webview using JavaScript object structured like in the regular React and React Native apps.
webviewPropsObjectnoYou can pass webview props.
setOptionsObjectnoOptions which are set for Highcharts through Highcharts.setOptions() method. Usually it is used to set the global and lang options. For more details please visit Highcharts documentation, and API.
devPortStringnoWhen using EXPO in DEV mode, you may declare address and port to actually load the html file in Android. You cannot use built-in file:/// when using Expo,because the Android and iOS folders don’t exist yet. When it’s in STAGING or PROD skip this option and use default the file:///android_asset path.

License

See the License file

Remarks

Changelog

0.1

  • Init forking from official package
  • modify folder structure and dependencies
  • update highcharts files to version 9.3.1
react-nativeiosandroid
@infinitebrahmanuniverse/nolb-react-native-h@everything-registry/sub-chunk-2580@zalastax/nolb-react-native-h
0.1.1

2 years ago