I am trying to finish the intro tutorial for Gooddata.ui. However, I am not able to see any chart. I can see loading bullets, but no charts.
To be more specific:
a line chart is shown just for a short time and then it disappears (just a blick)
a bar chart is not shown at all
a table is shown without formatting
My code looks like this (I removed all the things from create-react-app) :
import React, { Component } from 'react';
import { LineChart, BarChart, Table } from '#gooddata/react-components';
...
class App extends Component {
render() {
return (
<div className="App">
<div style={{ height: 300 }}>
<Table
projectId="xms7ga4tf3g3nzucd8380o2bev8oeknp"
measures={measures}
/>
</div>
<div style={{ height: 300 }}>
<LineChart
projectId="xms7ga4tf3g3nzucd8380o2bev8oeknp"
measures={measures}
trendBy={attribute}
config={{
colors: [ '#14b2e2']
}}
/>
</div>
</div>
);
}
}
export default App;
Please, could you help me to find the problem?
It looks you forgot to add the following line of the code to load the CSS:
import '#gooddata/react-components/styles/css/main.css';
See step 2 in part 6 of the tutorial.
Related
I want to shown an alert but my alert make to my app down scroll like this
alert image
i would like show that alert on the center and elevate it.
i tried with this css, but does not worked nothing
const styles = StyleSheet.create({
elevatedElement: {
zIndex: 3000000,
elevation: 3000000,
},
})
this is my code of the alert
import React, { useState } from 'react'
import { View } from 'react-native';
import { Button, Paragraph, Dialog, Portal, Provider } from 'react-native-paper';
const Alert = ({ show, setShow }) => {
return (
<Provider>
<View>
<Portal>
<Dialog visible={show} >
<Dialog.Title>Alert</Dialog.Title>
<Dialog.Content>
<Paragraph>This is simple dialog</Paragraph>
</Dialog.Content>
<Dialog.Actions>
<Button onPress={setShow}>Done</Button>
</Dialog.Actions>
</Dialog>
</Portal>
</View>
</Provider>
);
};
export default Alert;
and i am using that component like this
return (
<><Alert show={true} />
<Background>
<RightButton goRight={logout} />
<Logo />
</Background>
</>
)
According to the documentation for the Portal usage:
Portal allows rendering a component at a different place in the parent tree. You can use it to render content that should appear above other elements, similar to Modal. It requires a Portal. Host component to be rendered somewhere in the parent tree
So if you want to render the Portal on top of other elements like a modal you should use the Portal.Host:
**Note:**Try to implement thePortal component as the first element of Alert component without using the View element as below:
import { Portal } from 'react-native-paper';
// rest of the codes ...
return (
<Portal.Host>
<Dialog visible={show} >
<Dialog.Title>Alert</Dialog.Title>
<Dialog.Content>
<Paragraph>This is simple dialog</Paragraph>
</Dialog.Content>
<Dialog.Actions>
<Button onPress={setShow}>Done</Button>
</Dialog.Actions>
</Dialog>
</Portal.Host>
);
No need to set the zIndex or elevation style properties for this component.
I am trying to integrate a component with the following Code:
<!-- ScheduleOnce embed START -->
<div id="SOIDIV_MohamadElBaba" data-so-page="MohamadElBaba" data-height="550" data-style="border: 1px solid #d8d8d8; min-width: 290px; max-width: 900px;" data-psz="00"></div>
<script type="text/javascript" src="https://cdn.oncehub.com/mergedjs/so.js"></script>
<!-- ScheduleOnce embed END -->
The goal is to have the app display the component.
I am using react-native and expo, but when I run the project no errors are logged. The component is simply not appearing.
Can someone give me an idea about whats going on?
Full code: (react-native / expo App.js)
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
export default function App() {
return (
<View>
<h1>App Loaded</h1>
<div
id="SOIDIV_MohamadElBaba"
data-so-page="MohamadElBaba"
data-height="550"
data-style="border: 1px solid #d8d8d8; min-width: 290px; max-width: 900px;"
data-psz="00"
></div>
<script
type="text/javascript"
src="https://cdn.oncehub.com/mergedjs/so.js"
></script>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
As react native doesn't use the DOM like regular react does, you can't use HTML tags such as div, h1 etc. My assumption would therefore be that you need to use this WebView component to do that. You would then need to set the source prop equal to your html code. You should end up with something like <WebView source={{html: '<h1>App Loaded</h1><div.....'}}. Or even better, if you have the actual uri for the embedded code, you can just do <WebView source={{uri: 'the uri to the page'}} />
https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source
This links to the deprecated project page, but it provides an actual code example, and the syntax should be the same between this old version and the newest version. Just remember to add the package referenced in the github link opposed to this one https://reactnative.dev/docs/webview#source
this document suggests that I should be able to inject values into a web page displayed by the WebView component such that the value can be used by loaded the page:
https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native
specifically, the code below shows how to set a value within the window object but does not show how it is used:
import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
export default class App extends Component {
render() {
const runFirst = `
window.isNativeApp = true;
true; // note: this is required, or you'll sometimes get silent failures
`;
return (
<View style={{ flex: 1 }}>
<WebView
source={{uri: 'my-url-here'}}
injectedJavaScriptBeforeContentLoaded={runFirst}
/>
</View>
);
}
}
the page I'm loading looks like this:
<html>
<body>
<script>
alert(window.isNativeApp)
</script>
</body>
</html>
which displays undefined. I've also tried:
<html>
<body>
<script>
var fn = function() {
alert(window.isNativeApp)
}
document.addEventListener('DOMContentLoaded', fn, false)
</script>
</body>
</html>
with identical results. given that I'm supposed to be able to send the webpage values, how am I supposed to use them?
from my package.json:
"react-dom": "~16.9.0",
"react-native": "^0.62.1",
"react-native-webview": "^8.2.1",
Appendix I
in fact, the above doesn't seem to run at all. if I try the following:
const runFirst = `
console.log('INJECTION')
alert('INJECTION')
true; // note: this is required, or you'll sometimes get silent failures
`;
I get neither an alert, nor a trace in the log. of course, I'm not sure whether alert() can work before the document is loaded, or whether the log would be visible to me in the regular app's console output
by contrast injectedJavaScript does seem to run, albeit after the document loads, which means that at the time that the <script> in my doc runs, the value hasn't yet been set
for the next poor sod that struggles with this, the library is broken and will (someday) be fixed, but in the meantime, this works:
<WebView
source={{uri: 'my-url-here'}}
injectedJavaScriptBeforeContentLoaded={runFirst}
onMessage={event => { alert(event.nativeEvent.data )}}
/>
the onMessage is intended for communications in the other direction but its mere presence makes the code work
I am getting the html response from the api as shown below. I want to render the text and open the url on click of the text that is given in the response.
"Details": "<span style=\"font-family: Georgia; font-size: 24px;\"><em><span style=\"color: #0070c0;\">Click here to view News.</span></em></span>"
You can use WebView as HTML renderer like this,
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyInlineWeb extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{ html: '<h1>Hello world</h1>' }}
/>
);
}
}
See official docs here
use this package react-native-render-html
extremely customizable and easy to use and aims at being able to render anything you throw at it.
import React, { Component } from 'react';
import { ScrollView, Dimensions } from 'react-native';
import HTML from 'react-native-render-html';
const htmlContent = `
<h1>This HTML snippet is now rendered with native components !</h1>
<h2>Enjoy a webview-free and blazing fast application</h2>
<img src="https://i.imgur.com/dHLmxfO.jpg?2" />
<em style="textAlign: center;">Look at how happy this native cat is</em>
`;
export default class Demo extends Component {
render () {
return (
<ScrollView style={{ flex: 1 }}>
<HTML html={htmlContent} imagesMaxWidth={Dimensions.get('window').width} />
</ScrollView>
);
}
}
I was wondering, is it possible to add a react component as the content?
I added the component inside the overlay like so -
this.player.overlay({
content: <SomeReactComponent />,
align: 'bottom-left',
overlays: [{
start: 'play',
end: 'end'
}]
});
and the SomeReactComponent is just a react component for a dynamic image renderer that looks like this
import like from './like.png';
import love from './love.png';
import neutral from './neutral.png';
class SomeReactComponent extends Component {
getImage(pic) {
const image = pic;
return image;
}
render() {
const pic = [love, like, neutral];
return (
<div>
{ sentimentsArray.map(sentiment =>
<img src={this.getImage(pic)} style={{ width: '75%', height: '75%', objectFit: 'scale-down' }} />
)}
</div>
);
}
}
When i call this.player.overlay in my console, it says the overlays.options.content is a Symbol of React.element, however, I'm not getting anything as an overlay
It's not possible to use React component for this property unfortunately, but only string or node element. Take a look to the doc for more information.