railbird-gql/component/charts/chart-styles.ts

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 },
	horizontalInset: { right: 10, left: 10 },
});

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