Widget

import { LineChart, Widget } from 'heroui-native-pro';
import { View } from 'react-native';

const TOKENS_DATA = [
  { date: '09-01', input: 35000, output: 22000 },
  { date: '09-02', input: 80000, output: 35000 },
  { date: '09-03', input: 130000, output: 48000 },
];

const formatCompactNumber = (value: number) =>
  value >= 1000 ? `${(value / 1000).toFixed(0)}k` : `${value}`;

export default function WidgetExample() {
  return (
    <View className="px-5">
      <Widget>
        <Widget.Header>
          <Widget.Title>Tokens Over Time</Widget.Title>
          <Widget.Legend>
            <Widget.LegendItem colorClassName="bg-chart-4">
              Input
            </Widget.LegendItem>
            <Widget.LegendItem colorClassName="bg-chart-1">
              Output
            </Widget.LegendItem>
          </Widget.Legend>
        </Widget.Header>
        <Widget.Content>
          <LineChart
            data={TOKENS_DATA}
            xKey="date"
            yKeys={['input', 'output']}
            yAxis={[{ formatYLabel: formatCompactNumber }]}
            wrapperClassName="h-[200px]"
          >
            {({ points }) => (
              <>
                <LineChart.Line
                  points={points.input}
                  colorClassName="accent-chart-4"
                  curveType="monotoneX"
                />
                <LineChart.Line
                  points={points.output}
                  colorClassName="accent-chart-1"
                  curveType="monotoneX"
                />
              </>
            )}
          </LineChart>
        </Widget.Content>
      </Widget>
    </View>
  );
}