I want to design a stack bar chart with an inner edge curve, I am using Rechart library.
This is my code for that:
<ResponsiveContainer width="100%" height="100%">
<BarChart
width={500}
height={300}
data={data}
margin={{
top: 20,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="10" vertical={false} />
<XAxis dataKey="name" axisLine={false} tick={CustomizedXAxisTick} />
<YAxis axisLine={false} tick={CustomizedYAxisTick} />
<Tooltip
cursor={false}
wrapperStyle={{ outline: "none" }}
position={{
x: position?.data.x ?? 0,
y: position?.data.y ?? 0
}}
content={<CustomTooltip />}
/>
<Bar dataKey="Company" stackId="a" fill="#49ABA8" radius={[0, 0, 10, 10]} />
<Bar dataKey="Employee" stackId="a" fill="#296E6B" radius={[10, 10, 0, 0]}
onMouseMove={(data) => setPosition({ data: data, show: true })}
onMouseLeave={(data) =>
setPosition({ data: data, show: false })
}
/>
</BarChart>
</ResponsiveContainer>
I did not get the expected output
Output:
Expected output :
Expected output:
Related
I am using yup schema object for field validation in react.
so anyone know how to add color to error message or any other way to add color to requird message
below is the code -
const ValidationSchema = yup.object({name: yup
.string('Enter your name'),
age:yup
.number('Enter your name'),
.required('number required')
})
This is how the form is being used -
const formik = useFormik({
initialValues: {
name: '',
customerId:'',
email:'',
phoneNumber:'',
age: '',
gender: '',
race: '',
state_code: '',
county_code: '',
},
validationSchema: validationSchema,
onSubmit: async (values) => {
let diseases = Object.keys(selectValue).filter((keyName) => selectValue[keyName] === true && keyName)
console.log(responseAPI)
},
});
<form onSubmit={formik.handleSubmit}>
<Grid container rowSpacing={2} columnSpacing={{ xs: 1, sm: 2, md: 3 }} sx={{ marginBottom: '2em' }}>
<Grid item xs={12} md={6} lg={4} sx={{ fontWeight: 'initial', '& .MuiTextField-root': { m: 1, width: '25ch' }, }}>
<ArgonTextField
onChange={formik.handleChange} value={formik.values.name} id="name" type="string" name="name"
placeholder="Name"
/>
</Grid>
<Grid item xs={12} md={6} lg={4} sx={{ fontWeight: 'initial', '& .MuiTextField-root': { m: 1, width: '25ch' }, }}>
<ArgonTextField placeholder="Phone Number"
onChange={formik.handleChange} value={formik.values.phoneNumber} id="phoneNumber" type="number" name="phoneNumber"
/>
</Grid>
</Grid>
<AddCustomerDetails data={values} selectValue={selectValue} setSelectValue={setSelectValue} diseases={diseases} formik={formik} setDiseases={setDiseases}
description={description} setDescription={setDescription}
/>
</form>
so I want number required message color to be red its now black in color.
if I disable --tw-ring-shadow it works ok
you can see in image !! show image !!
TimePicker Code
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Stack spacing={3}>
<TimePicker
renderInput={(params) => <TextField {...params}/>}
value={value}
label="min/max time"
onChange={(newValue) => {
setValue(newValue);
}}
minTime={new Date(0, 0, 0, 8)}
maxTime={new Date(0, 0, 0, 18, 45)}
/>
</Stack>
</LocalizationProvider>
I have the following code:
<View style={{flexDirection: 'row'}}>
<Image
source={require('../assets/profile.png')}
style={{
width: 80,
height: 80,
}}
/>
<View style={{flex: 1}}>
<Input placeholder="Name" />
<Input placeholder="Surname" />
</View>
</View>
Now it looks like this:
But the problem is that width and height of image are hardcoded values. That's why I want to ask if there any way to set image height the same as height of parent view and then set width the same as height? I will appreciate any help, thanks in advance!
UPD
Here's the whole code of screen:
const Profile = () => {
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<SafeAreaView style={styles.screenContainer}>
<View style={styles.inputsContainer}>
<View style={{flexDirection: 'row'}}>
<Image
source={require('../assets/profile.png')}
style={styles.avatar}
/>
<View style={{flex: 1}}>
<Input placeholder="Name" />
<Input placeholder="Surname" />
</View>
</View>
<Text style={styles.inputDescription}>
Enter your name and upload profile photo
</Text>
<View style={styles.inputBlock}>
<Input placeholder="Phone number" keyboardType="phone-pad" />
<Text style={styles.inputDescription}>
Update your phone number
</Text>
</View>
<View style={styles.inputBlock}>
<Input
placeholder="Email"
keyboardType="email-address"
style={styles.inputBlock}
/>
<Text style={styles.inputDescription}>Update your email</Text>
</View>
</View>
<View>
<ButtonSubmit style={styles.updateButton} title="Update" />
</View>
</SafeAreaView>
</TouchableWithoutFeedback>
);
};
const styles = StyleSheet.create({
screenContainer: {
flex: 1,
},
inputsContainer: {
flex: 1,
marginVertical: 20,
marginHorizontal: 20,
},
inputDescription: {
marginTop: 10,
marginLeft: 10,
color: 'grey',
},
inputBlock: {
marginTop: 20,
},
avatar: {
width: 80,
height: 80,
},
updateButton: {
marginBottom: 20,
marginHorizontal: 60,
},
});
You can do that using flex: 1 at the <Image> component too. In theory, both <Image> and <View> will have the same height. Then, you just need to adjust <Image> width either with width or flex-basis.
If that doesn't work, please provide a codesandbox like example
I am using Card component from Material UI. It looks like this:
You can see both: Star and Plus icon have inherited opacity from the background image.
I want the Plus icon to have opacity 1. Is this possible? Here is code:
<Card
style={{
position: "relative",
}}
>
<IconButton
color="primary"
className={classes.star}
style={{
pointerEvents: itemEnabled ? "auto" : "none"
}}
>
{item.favorite ? <Star /> : <StarBorder />}
</IconButton>
<IconButton
color="primary"
className={classes.permission}
onClick={e => {
e.preventDefault();
e.stopPropagation();
console.log("test")
}}
>
<Add />
</IconButton>
<CardActionArea style={{
width: "100%",
pointerEvents: itemEnabled ? "auto" : "none"
}}>
<CardMedia
className={classes.media}
image={requiredImage}
style={{
opacity: itemEnabled ? 1 : 0.4,
}}
title={item.favorite ? item.link.name : item.name}
/>
</CardActionArea>
</Card>
here are some styles used in className if interested:
const styles = theme => ({
media: {
height: 140,
width: "100%"
},
star: {
position: "absolute",
right: 0,
color: "white",
zIndex: 555
},
permission: {
position: "absolute",
right: 0,
top: 30,
color: "white",
zIndex: 555
},
linksTitle: {
padding: 20
}
});
How to get inner shadow as below image. I am using below code to get the outer shadow. But how can I get Inner shadow ? Thanks in Advance.
<View style={styles.searchBar}>
<TextInput
placeholder={'Suchen...'}
style={styles.inputSearch}
onChangeText={t => this.setState({ text: t })}
value={text}
onSubmitEditing={this.onSearch}
/>
<TouchableOpacity style={styles.clearButton} onPress={this.onClear}>
<Image source={Images.cancelSmall} />
</TouchableOpacity>
</View>
styles :
searchBar: {
flexDirection: 'row',
borderWidth: 0.1,
borderColor: 'grey',
flex: 1,
height: 40,
borderRadius: 40,
backgroundColor: '#fafafa',
shadowColor: 'rgba(0, 0, 0, 0.05)',
shadowOffset: {
width: 2,
height: 3
},
shadowRadius: 6,
shadowOpacity: 1
},
inputSearch: {
paddingLeft: 10,
height: 44,
flex: 1
}
you can use react-native-shadow it is has inset option
import { BorderShadow } from 'react-native-shadow'
render = () => {
const shadowOpt = {
width:160,
height:170,
color:"rgba(0, 0, 0, 0.05)",
border:2,
inset: true,
style:{marginVertical:5}
}
return (
<BorderShadow setting={shadowOpt}>
<TextInput
placeholder={'Suchen...'}
style={styles.inputSearch}
onChangeText={t => this.setState({ text: t })}
value={text}
onSubmitEditing={this.onSearch}
/>
<TouchableOpacity style={styles.clearButton} onPress={this.onClear}>
<Image source={Images.cancelSmall} />
</TouchableOpacity>
</BorderShadow >
)
}
<LinearGradient
style={styles.gradientButton}
colors={['#040406', '#040406', '#040406', '#444446']}
start={{ x: 0.48, y: 0.1 }}
end={{ x: 0.5, y: 0.6 }}
>
Use background color dark for a better look