merge chart-view from master, implement in component

component/charts/bar-graph/bar-graph.tsx

@@ -8,7 +8,8 @@ import { GraphData, YAxisProps } from '../graph-types';
 
 import { CustomBars } from '../custom-bars';
 import { CustomGrid } from '../custom-grid';
-import { graphStyles } from '../../../styles';
+import { graphStyles } from '../chart-styles';
+import ChartView from '../chart-view';
 
 interface Props {
   data: GraphData;
@@ -57,6 +58,7 @@ export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, testID
   
 
   return (
+    <ChartView>
       <View style={[graphStyles.rowContainer, { height: height }]} testID={`bar-graph-${testID}`}>
         <YAxis
           data={yAxisLeftLabels.values}
@@ -104,6 +106,7 @@ export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, testID
           formatLabel={formatRightYAxisLabel}
         />
       </View>
+      </ChartView>
   );
 };
 

component/charts/chart-styles.ts

@@ -0,0 +1,23 @@
+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 }
+});

component/charts/chart-view.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import { graphStyles } from './chart-styles';
+
+interface ChartViewProps {
+  style?: StyleProp<ViewStyle>;
+  children: React.ReactNode;
+  testID?: string;
+}
+
+const ChartView: React.FC<ChartViewProps> = ({ children, style, testID }) => {
+  return <View style={[graphStyles.container, style]} testID={testID} >{children}</View>;
+};
+
+export default ChartView;