Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Is there anyway to use this library in a project which is initialized by Expo & using Typescript template? #136

Open
ngmikeng opened this issue Aug 28, 2021 · 6 comments
Open

Is there anyway to use this library in a project which is initialized by Expo & using Typescript template? #136

ngmikeng opened this issue Aug 28, 2021 · 6 comments

Comments

@ngmikeng
Copy link

I know this library is deprecated but hope someone has also met the issue.
I tried following the instruction but it doesn't work.

My steps:

  • Install package by yarn
  • Create file metro.config.js
  • Install react-native-webview by yarn
  • Put some //@ts-ignore in code for ignore type checking
  • Try with the example code in a component
import React, { useEffect, useState } from "react";
import { View, StyleSheet } from "react-native";
// @ts-ignore
import HighchartsReactNative from "@highcharts/highcharts-react-native";

const Chart: React.FC = () => {
  const [chartOptions, setChartOptions] = useState<any>();

  useEffect(() => {
    let intervalId: NodeJS.Timer;
    const chartOptionsTest = {
      chart: {
        events: {
          load: function () {
            // @ts-ignore
            // set up the updating of the chart each second
            const series = this.series[0];
            intervalId = setInterval(function () {
              const y = Math.random();
              series.addPoint(y, true, true);
            }, 1000);
          }
        }
      },
      series: [{
        data: [1, 2, 3]
      }]
    }
    setChartOptions(chartOptionsTest);

    return () => {
      if (intervalId) {
        clearInterval(intervalId);
      }
    }
  }, [])

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

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    justifyContent: 'center',
    flex: 1
  }
});

export default Chart;
@horstleung
Copy link
Contributor

what is the error?

@ngmikeng
Copy link
Author

what is the error?

The chart doesn't show up although there isn't any error.
I just wonder if there is anyone has used this library with the typescript template which is created by Expo CLI? or it doesn't work because it doesn't support typescript so we can close this issue.

@horstleung
Copy link
Contributor

Can you inspect the webview? maybe there is an error there.

@ngmikeng
Copy link
Author

ngmikeng commented Sep 15, 2021 via email

@velen-lqc
Copy link

Had tough time using the package. So went about custom approach using WebView.

utils/graph-webview-html.ts

function graphWebviewHtml(chartOptions: Highcharts.Options): string {
	return `
    <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
            <script src="https://code.highcharts.com/highcharts.js"></script>
            <script src="https://code.highcharts.com/highcharts-more.js"></script>
            <script src="https://code.highcharts.com/modules/exporting.js"></script>
            <script>
                var chartOptions = ${JSON.stringify(chartOptions)};
                function reviver(key, value) {
                    if (key === 'formatter' && typeof value === 'string') {
                        return new Function('return ' + value)();
                    }
                    return value;
                };
                
                const parsedChartConfig = JSON.parse(JSON.stringify(chartOptions), reviver);
                
                console.debug('chartOptions', chartOptions);
                document.addEventListener("DOMContentLoaded", (event) => {
                    Highcharts.chart('container', parsedChartConfig);    
                });
            </script>
        </head>
        <body>
            <div id="container"></div>
        </body>
    </html>
    `
}

export default graphWebviewHtml

graphObject.ts

function buildGraphObject() : Highcharts.Options  {
   return {
       chart: { ... },
       yAxis: {
		title: {
			text: null
		},
		labels: {
			formatter:
				'function () { return "$" + this.axis.defaultLabelFormatter.call(this); }' as unknown as Highcharts.AxisLabelsFormatterCallbackFunction,
		},
	},
	series:  { ... }
}

HighChartsView.tsx

export const HighChartView: React.FC<IHighChartViewProps> = ({
	style,
	webViewProps,
	chartOptions,
	onEndLoad,
	useInteractionEnabled = true
}) => {
	const html = useMemo(() => {
		if (isNil(chartOptions)) {
			return ''
		} else return graphWebviewHtml(chartOptions)
	}, [chartOptions])

	return (
		<WebView
			isUserInteractionEnabled={useInteractionEnabled}
			onLoadEnd={onEndLoad}
			originWhitelist={['']}
			style={style}
			source={{ html, baseUrl: 'web/' }}
			javaScriptEnabled={true}
			domStorageEnabled={true}
			scalesPageToFit={true}
			scrollEnabled={false}
			automaticallyAdjustContentInsets={true}
			scaleEnabled={false}
			{...webViewProps}
		/>
	)
}

@kbqdev
Copy link

kbqdev commented Aug 2, 2024

Had tough time using the package. So went about custom approach using WebView.

utils/graph-webview-html.ts

function graphWebviewHtml(chartOptions: Highcharts.Options): string {
	return `
    <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
            <script src="https://code.highcharts.com/highcharts.js"></script>
            <script src="https://code.highcharts.com/highcharts-more.js"></script>
            <script src="https://code.highcharts.com/modules/exporting.js"></script>
            <script>
                var chartOptions = ${JSON.stringify(chartOptions)};
                function reviver(key, value) {
                    if (key === 'formatter' && typeof value === 'string') {
                        return new Function('return ' + value)();
                    }
                    return value;
                };
                
                const parsedChartConfig = JSON.parse(JSON.stringify(chartOptions), reviver);
                
                console.debug('chartOptions', chartOptions);
                document.addEventListener("DOMContentLoaded", (event) => {
                    Highcharts.chart('container', parsedChartConfig);    
                });
            </script>
        </head>
        <body>
            <div id="container"></div>
        </body>
    </html>
    `
}

export default graphWebviewHtml

graphObject.ts

function buildGraphObject() : Highcharts.Options  {
   return {
       chart: { ... },
       yAxis: {
		title: {
			text: null
		},
		labels: {
			formatter:
				'function () { return "$" + this.axis.defaultLabelFormatter.call(this); }' as unknown as Highcharts.AxisLabelsFormatterCallbackFunction,
		},
	},
	series:  { ... }
}

HighChartsView.tsx

export const HighChartView: React.FC<IHighChartViewProps> = ({
	style,
	webViewProps,
	chartOptions,
	onEndLoad,
	useInteractionEnabled = true
}) => {
	const html = useMemo(() => {
		if (isNil(chartOptions)) {
			return ''
		} else return graphWebviewHtml(chartOptions)
	}, [chartOptions])

	return (
		<WebView
			isUserInteractionEnabled={useInteractionEnabled}
			onLoadEnd={onEndLoad}
			originWhitelist={['']}
			style={style}
			source={{ html, baseUrl: 'web/' }}
			javaScriptEnabled={true}
			domStorageEnabled={true}
			scalesPageToFit={true}
			scrollEnabled={false}
			automaticallyAdjustContentInsets={true}
			scaleEnabled={false}
			{...webViewProps}
		/>
	)
}

I'm new here can you make a demo. That will be great. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@horstleung @ngmikeng @kbqdev @velen-lqc