bl00dymarie
51 lines
1.2 KiB
JavaScript
51 lines
1.2 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { StyleSheet, View } from 'react-native'
|
|
import moment from 'moment'
|
|
|
|
import AppText from '../common/app-text'
|
|
|
|
import { Sizes, Typography } from '../../styles'
|
|
import { CHART_YAXIS_WIDTH } from '../../config'
|
|
|
|
const ChartLegend = ({ height, currentDate }) => {
|
|
const displayedMonth = moment(currentDate).format('MMM')
|
|
|
|
return (
|
|
<View style={[styles.container, { height }]}>
|
|
<View style={[styles.singleLabelContainer, { height: height / 2 }]}>
|
|
<AppText style={styles.textBold}>#</AppText>
|
|
</View>
|
|
<View style={[styles.singleLabelContainer, { height: height / 2 }]}>
|
|
<AppText style={styles.text}>{displayedMonth}</AppText>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
ChartLegend.propTypes = {
|
|
height: PropTypes.number.isRequired,
|
|
currentDate: PropTypes.string,
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
width: CHART_YAXIS_WIDTH,
|
|
},
|
|
singleLabelContainer: {
|
|
justifyContent: 'space-around',
|
|
alignItems: 'center',
|
|
},
|
|
text: {
|
|
...Typography.label,
|
|
fontSize: Sizes.footnote,
|
|
},
|
|
textBold: {
|
|
...Typography.labelBold,
|
|
},
|
|
})
|
|
|
|
export default ChartLegend
|