loewy
ec6d36b44c
-- question: helper functions can be used directly in chartLabel OR I could have them be part of useGraphData hook since this component will be called on a graph. image: shows the Chart Label up top with capital cased keys/labels and color boxes FIXES #29 Co-authored-by: Loewy <loewy@chainstarters.com> Reviewed-on: billnerds/rn-playground#30 Reviewed-by: Kat Huang <kkathuang@gmail.com> Co-authored-by: loewy <loewymalkov@gmail.com> Co-committed-by: loewy <loewymalkov@gmail.com>
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { StyleSheet } from 'react-native';
|
|
|
|
import { colors, shadows } from '../../styles';
|
|
|
|
export const graphStyles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: colors.panelWhite,
|
|
borderColor: 'black',
|
|
borderRadius: 5,
|
|
marginVertical: 10,
|
|
marginHorizontal: 15,
|
|
paddingTop: 15,
|
|
paddingHorizontal: 15,
|
|
...shadows.standard
|
|
},
|
|
rowContainer: { flexDirection: 'row', padding: 10 },
|
|
flex: { flex: 1 },
|
|
yAxisLeftPadding: { paddingRight: 3 },
|
|
yAxisRightPadding: { paddingLeft: 3 },
|
|
yAxisFontStyle: { fontSize: 10, fill: 'grey' },
|
|
xAxisFontStyle: { fontSize: 12, fill: 'black' },
|
|
xAxisMarginTop: { marginTop: -15 }
|
|
});
|
|
|
|
export const chartLabel = StyleSheet.create({
|
|
titleRow: {
|
|
flexDirection: 'row',
|
|
marginHorizontal: 10
|
|
},
|
|
titleText: { fontWeight: '500' },
|
|
labelOuterRow: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
marginHorizontal: 10
|
|
},
|
|
labelInnerRow: { flexDirection: 'row', alignItems: 'center', marginTop: 5 },
|
|
labelColorBox: {
|
|
height: 15,
|
|
width: 15,
|
|
borderRadius: 4,
|
|
marginRight: 2
|
|
},
|
|
labelTextMargin: { marginRight: 15 },
|
|
labelText: { fontSize: 12 }
|
|
});
|