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