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>

test/component/chart-label.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import "@testing-library/jest-native/extend-expect";
+
+import ChartLabel from '../../component/charts/chart-label/chart-label';
+
+describe('ChartLabel Component Tests', () => {
+  const mockData = {
+    yLabels: [
+      { displayName: 'Shots Taken', axis: 'LEFT' as 'LEFT', color: '#598EBB' },
+      { displayName:'Make Percentage', axis: 'RIGHT' as 'RIGHT', color: '#F2D4BC'}
+    ],
+    title: 'Shots Taken / Make Percentage by Cut Angle'
+  };
+
+  it('should render the correct labels given yLabels', () => {
+    const { getByText } = render(
+      <ChartLabel title={mockData.title} yLabels={mockData.yLabels} />
+    );
+
+    mockData.yLabels.forEach(label => {
+      expect(getByText(label.displayName)).toBeTruthy();
+    });
+  });
+
+  it('should render the correct number of label boxes', () => {
+    const { getAllByText } = render(
+      <ChartLabel title={mockData.title} yLabels={mockData.yLabels} />
+    );
+
+    // Assuming displayName is unique and used only for labels
+    const labelElements = mockData.yLabels.map(label => 
+      getAllByText(label.displayName)
+    ).flat();
+
+    expect(labelElements.length).toBe(mockData.yLabels.length);
+  });
+});