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}

component/charts/chart-label/chart-label.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+import { chartLabel } from '../chart-styles';
+
+type Axis = 'RIGHT' | 'LEFT'
+
+interface YLabel {
+  axis: Axis;
+  displayName: string;
+  color: string;
+}
+
+type ChartLabelProps = {
+  title: string;
+  yLabels: Array<YLabel>;
+};
+
+const renderLabels = (yLabels: Array<YLabel>) => {
+  return yLabels.map((label) => (
+    <View key={`${label.axis}-${label.displayName}`} style={chartLabel.labelInnerRow}>
+      <View
+        style={[chartLabel.labelColorBox, { backgroundColor: label.color }]}
+      />
+      <View style={chartLabel.labelTextMargin}>
+        <Text style={chartLabel.labelText}>{label.displayName}</Text>
+      </View>
+    </View>
+  ));
+};
+
+export default function ChartLabel({ title, yLabels }: ChartLabelProps) {
+
+  return (
+    <View>
+      <View style={chartLabel.titleRow}>
+        <Text style={chartLabel.titleText}>{title}</Text>
+      </View>
+      <View style={chartLabel.labelOuterRow}>{renderLabels(yLabels)}</View>
+    </View>
+  );
+}

component/charts/chart-styles.ts

@@ -21,3 +21,25 @@ export const graphStyles = StyleSheet.create({
   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 }
+});

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