ChartLabel -- graph helper component to render title + labels for a chart/graph (#30)

-- 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>

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

@@ -10,6 +10,7 @@ import { CustomBars } from '../custom-bars';
 import { CustomGrid } from '../custom-grid';
 import { graphStyles } from '../chart-styles';
 import ChartView from '../chart-view';
+import ChartLabel from '../chart-label/chart-label';
 
 interface Props {
   data: GraphData;
@@ -55,10 +56,13 @@ export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, testID
   // eslint-disable-next-line react-hooks/rules-of-hooks
   } = useGraphData(data, props);
 
-  
+  // TODO: Will come from BE & destructured / color assigned in useGraphData
+  const yLabels = [{ displayName: 'Shots Taken', axis: 'LEFT' as 'LEFT', color: barColors[0] }, { displayName:'Make Percentage', axis: 'RIGHT' as 'RIGHT', color: barColors[1] }]
+  const title = 'Shots Taken / Make Percentage by Cut Angle'
 
   return (
     <ChartView>
+      <ChartLabel title={title} yLabels={yLabels} />
       <View style={[graphStyles.rowContainer, { height: height }]} testID={`bar-graph-${testID}`}>
         <YAxis
           data={yAxisLeftLabels.values}