45 lines
984 B
TypeScript
45 lines
984 B
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>
|
|
);
|
|
}
|