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