loewy
ec6d36b44c
-- 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>
42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
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>
|
|
);
|
|
} |