From dcedb41a32ad19f30c2cff0d148ecacd58401d3d Mon Sep 17 00:00:00 2001 From: bismarkamanor Date: Fri, 15 Oct 2021 09:06:59 +0000 Subject: [PATCH] Added ActivityIndicator loading animation to display before chart --- index.android.js | 190 ++++++++++++++++++++++++++------------------- index.ios.js | 198 +++++++++++++++++++++++++++-------------------- package.json | 3 +- 3 files changed, 225 insertions(+), 166 deletions(-) diff --git a/index.android.js b/index.android.js index b06e2e1..ed2c44e 100644 --- a/index.android.js +++ b/index.android.js @@ -4,91 +4,121 @@ * @flow */ -import React, { Component } from 'react'; -import { - AppRegistry, - StyleSheet, - Text, - View -} from 'react-native'; -import ChartView from './App/index.js'; +/** + * Issue - How to display loading animation before showing chart + * Solution by @BismarkAmanor + * @flow + */ -export default class chartWebView extends Component { +import React, { Component } from "react"; +import { AppRegistry, ActivityIndicator } from "react-native"; +import ChartView from "./App/index.js"; - constructor(props){ +export default class chartWebView extends Component { + constructor(props) { super(props); + this.state = { + timePassed: false, //BismarkAmanor- default timer state + }; } - render() { - var Highcharts='Highcharts'; - var conf={ - chart: { - type: 'spline', - animation: Highcharts.svg, // don't animate in old IE - marginRight: 10, - events: { - load: function () { - // set up the updating of the chart each second - var series = this.series[0]; - setInterval(function () { - var x = (new Date()).getTime(), // current time - y = Math.random(); - series.addPoint([x, y], true, true); - }, 1000); - } - } - }, - title: { - text: 'Live random data' - }, - xAxis: { - type: 'datetime', - tickPixelInterval: 150 - }, - yAxis: { - title: { - text: 'Value' - }, - plotLines: [{ - value: 0, - width: 1, - color: '#808080' - }] - }, - tooltip: { - formatter: function () { - return '' + this.series.name + '
' + - Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '
' + - Highcharts.numberFormat(this.y, 2); - } - }, - legend: { - enabled: false - }, - exporting: { - enabled: false - }, - series: [{ - name: 'Random data', - data: (function () { - // generate an array of random data - var data = [], - time = (new Date()).getTime(), - i; + // BismarkAmanor- executing timer function when app is rendered + componentDidMount() { + this.setTimeout(() => { + this.setTimePassed(); + }, 1000); + } + + render() { + var Highcharts = "Highcharts"; + var conf = { + chart: { + type: "spline", + animation: Highcharts.svg, // don't animate in old IE + marginRight: 10, + events: { + load: function () { + // set up the updating of the chart each second + var series = this.series[0]; + setInterval(function () { + var x = new Date().getTime(), // current time + y = Math.random(); + series.addPoint([x, y], true, true); + }, 1000); + }, + }, + }, + title: { + text: "Live random data", + }, + xAxis: { + type: "datetime", + tickPixelInterval: 150, + }, + yAxis: { + title: { + text: "Value", + }, + plotLines: [ + { + value: 0, + width: 1, + color: "#808080", + }, + ], + }, + tooltip: { + formatter: function () { + return ( + "" + + this.series.name + + "
" + + Highcharts.dateFormat("%Y-%m-%d %H:%M:%S", this.x) + + "
" + + Highcharts.numberFormat(this.y, 2) + ); + }, + }, + legend: { + enabled: false, + }, + exporting: { + enabled: false, + }, + series: [ + { + name: "Random data", + data: (function () { + // generate an array of random data + var data = [], + time = new Date().getTime(), + i; + + for (i = -19; i <= 0; i += 1) { + data.push({ + x: time + i * 1000, + y: Math.random(), + }); + } + return data; + })(), + }, + ], + }; + + // BismarkAmanor- Update timer state + setTimePassed = () => { + this.setState({ timePassed: true }); + }; - for (i = -19; i <= 0; i += 1) { - data.push({ - x: time + i * 1000, - y: Math.random() - }); - } - return data; - }()) - }] - }; - return ( - - ); + // BismarkAmanor- display loading animation if timePassed state is false + if (this.state.timePassed) { + return ; + } else { + return ( + + ); + } } } -AppRegistry.registerComponent('chartWebView', () => chartWebView); +AppRegistry.registerComponent("chartWebView", () => chartWebView); diff --git a/index.ios.js b/index.ios.js index 359c678..ed2c44e 100644 --- a/index.ios.js +++ b/index.ios.js @@ -1,94 +1,124 @@ /** -* Sample React Native App -* https://github.com/facebook/react-native -* @flow -*/ + * Sample React Native App + * https://github.com/facebook/react-native + * @flow + */ -import React, { Component } from 'react'; -import { - AppRegistry, - StyleSheet, - Text, - View -} from 'react-native'; -import ChartView from './App/index.js'; +/** + * Issue - How to display loading animation before showing chart + * Solution by @BismarkAmanor + * @flow + */ -export default class chartWebView extends Component { +import React, { Component } from "react"; +import { AppRegistry, ActivityIndicator } from "react-native"; +import ChartView from "./App/index.js"; - constructor(props){ +export default class chartWebView extends Component { + constructor(props) { super(props); + this.state = { + timePassed: false, //BismarkAmanor- default timer state + }; } - render() { - var Highcharts='Highcharts'; - var conf={ - chart: { - type: 'spline', - animation: Highcharts.svg, // don't animate in old IE - marginRight: 10, - events: { - load: function () { - // set up the updating of the chart each second - var series = this.series[0]; - setInterval(function () { - var x = (new Date()).getTime(), // current time - y = Math.random(); - series.addPoint([x, y], true, true); - }, 1000); - } - } - }, - title: { - text: 'Live random data' - }, - xAxis: { - type: 'datetime', - tickPixelInterval: 150 - }, - yAxis: { - title: { - text: 'Value' - }, - plotLines: [{ - value: 0, - width: 1, - color: '#808080' - }] - }, - tooltip: { - formatter: function () { - return '' + this.series.name + '
' + - Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '
' + - Highcharts.numberFormat(this.y, 2); - } - }, - legend: { - enabled: false - }, - exporting: { - enabled: false - }, - series: [{ - name: 'Random data', - data: (function () { - // generate an array of random data - var data = [], - time = (new Date()).getTime(), - i; + // BismarkAmanor- executing timer function when app is rendered + componentDidMount() { + this.setTimeout(() => { + this.setTimePassed(); + }, 1000); + } + + render() { + var Highcharts = "Highcharts"; + var conf = { + chart: { + type: "spline", + animation: Highcharts.svg, // don't animate in old IE + marginRight: 10, + events: { + load: function () { + // set up the updating of the chart each second + var series = this.series[0]; + setInterval(function () { + var x = new Date().getTime(), // current time + y = Math.random(); + series.addPoint([x, y], true, true); + }, 1000); + }, + }, + }, + title: { + text: "Live random data", + }, + xAxis: { + type: "datetime", + tickPixelInterval: 150, + }, + yAxis: { + title: { + text: "Value", + }, + plotLines: [ + { + value: 0, + width: 1, + color: "#808080", + }, + ], + }, + tooltip: { + formatter: function () { + return ( + "" + + this.series.name + + "
" + + Highcharts.dateFormat("%Y-%m-%d %H:%M:%S", this.x) + + "
" + + Highcharts.numberFormat(this.y, 2) + ); + }, + }, + legend: { + enabled: false, + }, + exporting: { + enabled: false, + }, + series: [ + { + name: "Random data", + data: (function () { + // generate an array of random data + var data = [], + time = new Date().getTime(), + i; + + for (i = -19; i <= 0; i += 1) { + data.push({ + x: time + i * 1000, + y: Math.random(), + }); + } + return data; + })(), + }, + ], + }; + + // BismarkAmanor- Update timer state + setTimePassed = () => { + this.setState({ timePassed: true }); + }; - for (i = -19; i <= 0; i += 1) { - data.push({ - x: time + i * 1000, - y: Math.random() - }); - } - return data; - }()) - }] - }; - return ( - - ); + // BismarkAmanor- display loading animation if timePassed state is false + if (this.state.timePassed) { + return ; + } else { + return ( + + ); + } } } -AppRegistry.registerComponent('chartWebView', () => chartWebView); +AppRegistry.registerComponent("chartWebView", () => chartWebView); diff --git a/package.json b/package.json index 63fcfc9..10d934d 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,7 @@ { "name": "react-native-highcharts", "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.", + "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", "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start",