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 }
});