Related
I try to configure the license of Fusionchart in ReactNative as in this URL https://www.npmjs.com/package/react-native-fusioncharts#license-configuration.
But still, it shows the watermark which should not be visible. Is there anything I missed?
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Platform } from 'react-native';
import ReactNativeFusionCharts from 'react-native-fusioncharts';
global.licenseConfig = {
key: "license-key",
creditLabel: false // true/false to show/hide watermark respectively
};
export default class App extends Component {
constructor(props) {
super(props);
//STEP 2 - Chart Data
const chartData = [
{ label: 'Venezuela', value: '250' },
{ label: 'Saudi', value: '260' },
{ label: 'Canada', value: '180' },
{ label: 'Iran', value: '140' },
{ label: 'Russia', value: '115' },
{ label: 'UAE', value: '100' },
{ label: 'US', value: '30' },
{ label: 'China', value: '30' },
];
//STEP 3 - Chart Configurations
const chartConfig = {
type: 'column2d',
width: 400,
height: 400,
dataFormat: 'json',
dataSource: {
chart: {
caption: 'Countries With Most Oil Reserves [2017-18]',
subCaption: 'In MMbbl = One Million barrels',
xAxisName: 'Country',
yAxisName: 'Reserves (MMbbl)',
numberSuffix: 'K',
theme: 'fusion',
exportEnabled: 1, // to enable the export chart functionality
},
data: chartData,
},
};
const events = {
// Add your events method here:
// Event name should be in small letters.
dataPlotClick: (ev, props) => {
console.log('dataPlotClick');
},
dataLabelClick: (ev, props) => {
console.log('dataLabelClick');
},
};
this.state = {
chartConfig,
events
};
}
render() {
return (
<View style={styles.container}>
<Text style={styles.heading}>FusionCharts Integration with React Native</Text>
<View style={styles.chartContainer}>
<ReactNativeFusionCharts chartConfig={this.state.chartConfig} events={this.state.events} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 50,
height: 500,
backgroundColor: 'white'
},
heading: {
fontSize: 20,
textAlign: 'center',
marginBottom: 10,
},
chartContainer: {
borderColor: 'red',
borderWidth: 1,
height: 500,
},
});
// skip this line if using Create React Native App
AppRegistry.registerComponent('ReactNativeFusionCharts', () => App);
I also add the below code in the root component but not worked.
global.licenseConfig = {
key: "license-key",
creditLabel: false // true/false to show/hide watermark respectively
};
Answering my own question. Hope this will be helpful to someone.
Issue is latest react-native-fusionchart 5.0.0 is not updated with fusionchart 3.17.0. You may need to manually copy the fusionchart content to react-native-fusionchart.
Copy the node_module/fusionchart content into node_modules/react-native-fusioncharts/src/modules/fusionchart folder and run below script.
find fusioncharts -name "*.js" -exec sh -c 'mv "$0" "${0%.js}.fcscript"' {} \;
Then the watermark vanishes as expected. These steps are configured in the gulp script but somehow it seems to be not working.
Hope this issue will be fixed soon.
I want to change the background color of my material ui datepicker modal
import { createMuiTheme } from "#material-ui/core";
const materialTheme = createMuiTheme({
overrides: {
MuiPickersToolbar: {
toolbar: {
backgroundColor: 'red',
},
},
MuiPickersDay: {
day: {
color: 'black',
},
daySelected: {
backgroundColor: '#33abb6',
},
dayDisabled: {
color: '#ccc',
},
current: {
color: 'red',
},
},
MuiPickersModal: {
dialogAction: {
color: '#33abb6',
},
},
},
});
export default materialTheme
In the above code i was able to change colors of date and few others but not the total background color
Are there any documentation from which i can get these class names or any other option
Try in CSS:
.MuiPaper-root {
background-color: #eaea87;
}
In recent version of MUI (v5.3.1) I resolved this issue by adding sx={{ backgroundColor: 'white' }} to TextField in renderInput prop as below:
<MobileDatePicker
label="Date"
value={date}
onChange={(newValue) => {
setDate(newValue);
}}
renderInput={(params) => (
<TextField
sx={{ backgroundColor: 'white' }}
fullWidth
{...params}
/>
)}
/>
You can use createTheme to provide component overrides (see docs):
const theme = createTheme({
components: {
// Name of the component
MuiInputBase: {
styleOverrides: {
// Name of the slot
root: {
// Some CSS
backgroundColor: "white",
// add variant styles like so
"&.Mui-disabled": {
"backgroundColor": "#cccccc"
}
},
},
},
},
});
You can see the name of the component to use by inspect element and looking at the class names, and you can find the slots in the component definition, e.g. this is the slots for the MuiInput component.
Also see this source on combining class names to target disabled, hover, active etc.
MuiPickers is using Dialog Material Ui, so override all dialog component that be used in this pickers. I'm not sure with this solution below. You can try this, hope it's worked.
const materialTheme = createMuiTheme({
overrides: {
MuiPickersToolbar: {
toolbar: {
backgroundColor: 'red',
},
},
MuiPickersDay: {
day: {
color: 'black',
},
daySelected: {
backgroundColor: '#33abb6',
},
dayDisabled: {
color: '#ccc',
},
current: {
color: 'red',
},
},
MuiPickersModal: {
dialogAction: {
color: '#33abb6',
backgroundColor: 'YOUR HEX HERE',
},
},
},
});
I think the good way is send style in DialogProps
https://material-ui-pickers.dev/api/DateTimePicker (section modal wrapper)
so then you can override all dialog modal.
Hello I'm trying to create:
A top Bar for all screen
a bottom bar for only 4 screen
So I have 2 screens -> Home screen and connection screen (without any top or bottom bar)
Then I have my 6 screen A B C D E F
I want a top bar on each and a bottom on A B C F
const TabRouter = createBottomTabNavigator(
{
HomeAfterLoginScreen: { screen: A },
ShowListAlertScreen: { screen: B },
ShowListProfessionScreen: { screen: C },
MyAccountScreen: { screen: F }
},
{
tabBarPosition: "bottom",
tabBarOptions: {
style: { backgroundColor: "#50bcb8" },
showIcon: true,
showLabel: true,
gesturesEnabled: true,
indicatorStyle: { borderBottomWidth: 3, borderBottomColor: Style.color },
inactiveTintColor: "#fff",
activeTintColor: "#fff",
tabStyle: { justifyContent: "center", alignItems: "center" }
}
});
const Router = createStackNavigator({
// If I add A B C F here i loose my bottombar
D : {
screen : D,
navigationOptions: {(nav option ..)}
},
E : {
screen : E,
navigationOptions: {(nav option ..)}
},
Home: {
screen: HomeScreen,
navigationOptions: {(nav option ..)}
},
App: {
screen: TabRouter,
navigationOptions: {
visible: false,
header: null
}
},
ConnexionScreen: {
screen: ConnexionScreen,
navigationOptions: {(nav option ..)}
},
});
export default Router;
There is a sample of my router.js
With this configuration I have bottom bar but I don't have my top bar. Any advice?
this is my screen A and i want a top bar on it. but if if add this screen on creatstack navigator i loose my bottom bar.
const STANDARD_NAVIGATION_OPTION = {
backtitle: null,
headerStyle: { backgroundColor: 'green' },
headerTintColor: 'white'
};
const App = createBottomTabNavigator({
tabA: {
screen: createStackNavigator(
{
tabAFirstScreen: {
screen: tabAScreen,
navigationOptions: {
...STANDARD_NAVIGATION_OPTION,
title: 'Header Title A'
}
}
},
{ headerMode: 'screen' })
},
tabB: {
screen: createStackNavigator(
{
tabBFirstScreen: {
screen: tabBScreen,
navigationOptions: {
...STANDARD_NAVIGATION_OPTION,
title: 'Header Title B'
}
}
},
{ headerMode: 'screen' })
}
}, {
tabBarPosition: 'bottom',
tabBarOptions: {
labelStyle: { fontSize: 12 },
activeTintColor: 'yellow',
pressColor: 'orange'
}
})
const MainNavigator = createAppContainer(App);
export default MainNavigator;
The idea is, first you have a bottomTabNavigator as root, then within the bottom tab, define each and every tab: tabA, tabB and so on..
Within each of the tab, define their own createStackNavigator, so that each and every tab will gives you the header look, which allows you to stack the screen within the tab too.
try by removing the header: null line in
App: {
screen: TabRouter,
navigationOptions: {
visible: false,
header: null
}
An image of what you are expecting would help. Its a weird navigation pattern to hide the tabs on some screens , that means that you don't want the user to navigate to the hidden tabs. But if you are still using the same screens in the top tabnavigator, then i'ts pretty useless to have a bottom and top tabbar for the same screens.
You can have a tab with only 3 tabs, one of them being a nested tabnavigator with 4 tabs , that's the pattern.
Ok, you wan't a header ? , i thought you wanted top tabs navigation, then it's pretty easy, instead of passing a screen to HomeAfterLoginScreen, use a nested stacknavigator , because the tabnavigator doesn't give access to headers , but if you nest a stacknavigator there you can have a header. then you just remove the header with header:null
I can't get Stripe Elements to use Google's Lato. I know there are other questions similar to this one but I don't see anything that applies. I tried fixing this for a while with no luck
var windowHash = getWindowHash();
var stripe = Stripe(stripePubKey);
var elements = stripe.elements({
fonts: [
{
family: "'Lato'",
src: 'local("Lato"), local("lato"), url(https://fonts.gstatic.com/s/lato/v13/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format("woff2")',
weight: 300,
style: "normal",
unicodeRange: "U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF"
}
]
});
var card = elements.create('card', {
iconStyle: 'solid',
hidePostalCode: true,
style: {
base: {
iconColor: '#3cacce',
color: '#424B54',
lineHeight: '36px',
fontWeight: 300,
fontFamily: '"Lato", sans-serif',
fontSize: '13pt',
fontStyle: "normal",
'::placeholder': {
color: '#969696'
},
},
invalid: {
iconColor: '#b32903',
color: '#b32903',
}
},
classes: {
focus: 'is-focused',
empty: 'is-empty',
},
});
And somewhere else:
card.mount('.cardElement');
Any tips on how I can get this to display properly?
Update:
Found the problem! I was trying to load in Lato Light, but because the normal Lato was added, using 300 wight didn't work. Adding the Lato Light font made it work.
You can now use the cssSrc option:
let stripe = Stripe('pk_test_JYjfAwsv9ODbL7mm1qObrIXZ')
let elements = stripe.elements({
fonts: [
{
cssSrc: 'https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600'
}
]
})
Then you can reference it in in the style options when you create the card:
let card = elements.create('card', {
style: {
base: {
fontFamily: 'Montserrat'
}
}
})
card.mount('#card-element')
Source: https://stripe.com/docs/stripe-js/reference
Reason: Have to use latin link and unicode range. Not the latin-ext font face for Lato font (latin and latin-ext)
Use the following fonts parameters
fonts: [
{
family: '"Lato"',
src: 'local("Lato Regular"), local("Lato-Regular"), url(https://fonts.gstatic.com/s/lato/v13/MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2) format("woff2")',
weight: 300,
style: 'normal',
unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215'
}
]
If you're using Elements component you can specify cssSrc option to import external fonts like so.. (the code is written in typescript)
Outside the component
const ELEMENT_OPTIONS: StripeElementsOptions = {
fonts: [
{
cssSrc:
"https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400;500;600;700;900",
},
],
};
Inside the component
<Elements stripe={stripePromise} options={ELEMENT_OPTIONS}>
<StripeCheckoutForm />
</Elements>
I would like to use the d3pie.js library in my Angular2 project but do not know how to import it with it's typescript definitions.
I installed d3, d3pie.js using these commands:
npm install --save d3 d3pie
npm install --save-dev #types/d3 #types/d3pie
However when I try to import the #types definition like I usually do.
import * as d3pie from 'd3pie';
I get the error:
File '~/foobar/node_modules/#types/d3pie/index.d.ts' in not a module.
And with a simple import like:
import 'd3pie';
I get this error in the dev console of my app:
ERROR Error: Uncaught (in promise): ReferenceError: d3pie is not defined
This is the content of my component.ts file, the template has the test div
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-pie-chart',
templateUrl: './pie-chart.component.html',
styleUrls: ['./pie-chart.component.scss']
})
export class PieChartComponent implements OnInit {
constructor() {
}
ngOnInit() {
declare var d3pie: any;
this.testDraw();
}
public testDraw() {
const chart = new d3pie('test',
{
header: {
title: {
text: '',
color: '#333333',
fontSize: 18,
font: 'arial'
},
subtitle: {
color: '#666666',
fontSize: 14,
font: 'arial'
},
location: 'top-center',
titleSubtitlePadding: 8
},
footer: {
text: '',
color: '#666666',
fontSize: 14,
font: 'arial',
location: 'left'
},
size: {
canvasHeight: 500,
canvasWidth: 500,
pieInnerRadius: 0,
pieOuterRadius: null
},
data: {
sortOrder: 'none',
smallSegmentGrouping: {
enabled: false,
value: 1,
valueType: 'percentage',
label: 'Other',
color: '#cccccc'
},
content: []
},
labels: {
outer: {
format: 'label',
hideWhenLessThanPercentage: null,
pieDistance: 30
},
inner: {
format: 'percentage',
hideWhenLessThanPercentage: null
},
mainLabel: {
color: '#333333',
font: 'arial',
fontSize: 10
},
percentage: {
color: '#dddddd',
font: 'arial',
fontSize: 10,
decimalPlaces: 0
},
value: {
color: '#cccc44',
font: 'arial',
fontSize: 10
},
lines: {
enabled: true,
style: 'curved',
color: 'segment' // 'segment' or a hex color
}
},
effects: {
load: {
effect: 'default', // none / default
speed: 1000
},
pullOutSegmentOnClick: {
effect: 'bounce', // none / linear / bounce / elastic / back
speed: 300,
size: 10
},
highlightSegmentOnMouseover: true,
highlightLuminosity: -0.2
},
tooltips: {
enabled: false,
type: 'placeholder', // caption|placeholder
string: '',
placeholderParser: null,
styles: {
fadeInSpeed: 250,
backgroundColor: '#000000',
backgroundOpacity: 0.5,
color: '#efefef',
borderRadius: 2,
font: 'arial',
fontSize: 10,
padding: 4
}
},
misc: {
colors: {
background: null, // transparent
segments: [
'#2484c1', '#65a620', '#7b6888', '#a05d56', '#961a1a',
'#d8d23a', '#e98125', '#d0743c', '#635222', '#6ada6a',
'#0c6197', '#7d9058', '#207f33', '#44b9b0', '#bca44a',
'#e4a14b', '#a3acb2', '#8cc3e9', '#69a6f9', '#5b388f',
'#546e91', '#8bde95', '#d2ab58', '#273c71', '#98bf6e',
'#4daa4b', '#98abc5', '#cc1010', '#31383b', '#006391',
'#c2643f', '#b0a474', '#a5a39c', '#a9c2bc', '#22af8c',
'#7fcecf', '#987ac6', '#3d3b87', '#b77b1c', '#c9c2b6',
'#807ece', '#8db27c', '#be66a2', '#9ed3c6', '#00644b',
'#005064', '#77979f', '#77e079', '#9c73ab', '#1f79a7'
],
segmentStroke: '#ffffff'
},
gradient: {
enabled: false,
percentage: 95,
color: '#000000'
},
canvasPadding: {
top: 5,
right: 5,
bottom: 5,
left: 5
},
pieCenterOffset: {
x: 0,
y: 0
},
cssPrefix: null
},
callbacks: {
onload: null,
onMouseoverSegment: null,
onMouseoutSegment: null,
onClickSegment: null
}
});
}
}
Thank you!
If you are using the angular CLI you can do the following:
add to the angular-cli.json
"scripts": ["./node_modules/d3pie/d3pie/d3pie.min.js",]
then add this to your typings.d.ts
declare var d3pie:any;
Install d3, d3pie.js using these commands:
npm install --save d3
npm install --save-dev #types/d3 #types/d3pie
Please not that d3pie package from npm is outdated (as it still uses d3 v3)
Prefer the latest version from
https://github.com/benkeen/d3pie/tree/master/d3pie
npm install --save benkeen/d3pie
Edit .angular-cli.json with
"scripts": [
"../node_modules/d3/build/d3.js",
"../node_modules/d3pie/d3pie/d3pie.js"
],
Inside your component import d3pie
import 'd3pie'
Profit!