import { Canvas, Chart, Interval, TagGuide } from '@antv/f2';

const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

<Canvas context={context}>
  <Chart data={data}>
    <Interval x="genre" y="sold" />
    <TagGuide
      records={[{ genre: 'Sports', sold: 350 }]}
      content="最高销量"
      direct="tr"
      background={{ fill: '#fff' }}
      textStyle={{ fill: '#000' }}
    />
  </Chart>
</Canvas>

interface TagGuideProps {
  /** 标注位置的数据项或比例值 */
  records: RecordItem[];
  /** 文本内容 */
  content?: string;
  /** x 轴偏移量，支持数字或带单位的字符串（如 '10px'）*/
  offsetX?: number | string;
  /** y 轴偏移量，支持数字或带单位的字符串（如 '10px'）*/
  offsetY?: number | string;
  /** 箭头方向 */
  direct?: 'tl' | 'tc' | 'tr' | 'cl' | 'cr' | 'bl' | 'bc' | 'br';
  /** 箭头的边长 */
  side?: string | number;
  /** 是否自动调整方向避免超出画布 */
  autoAdjust?: boolean;
  /** 背景容器样式，支持 rect 组件属性 */
  background?: Partial<RectStyleProps>;
  /** 文本样式，支持 text 组件属性 */
  textStyle?: Partial<TextStyleProps>;
  /** 是否精确定位（用于分组柱状图），详见下方说明 */
  precise?: boolean;
  /** 是否显示标注 */
  visible?: boolean;
  /** 点击事件回调 */
  onClick?: (ev: Event) => void;
  /** 动画配置，详见 [动画文档](/tutorial/animation) */
  animation?: AnimationProps | ((points: Point[], chart: Chart) => AnimationProps);
}

background={{
  fill: '#fff',
  stroke: '#1677FF',
  strokeWidth: 2,
  radius: '8px',
  padding: ['8px', '12px'],
}}

<Canvas context={context}>
  <Chart data={data}>
    <Interval x="月份" y="销量" color="城市" adjust={{ type: 'dodge' }} />
    {data.map((item) => (
      <TagGuide
        records={[item]}
        precise
        content={`${item.销量}`}
        direct="tc"
      />
    ))}
  </Chart>
</Canvas>

{
  container: {
    fill: '#1677FF',
    radius: '4px',
    padding: ['4px', '8px'],
  },
  text: {
    fontSize: '22px',
    fill: '#fff',
  },
  arrow: {
    fill: '#1677FF',
  },
}

<Canvas context={context}>
  <Chart data={data}>
    <Interval x="genre" y="sold" />
    <TagGuide
      records={[{ genre: 'Shooter', sold: 350 }]}
      content="最高销量"
      direct="tr"
    />
  </Chart>
</Canvas>;

<TagGuide
  records={[{ genre: 'Shooter', sold: 350 }]}
  content="最高销量"
  direct="tl"
  background={{
    fill: '#fff',
    stroke: '#1677FF',
    strokeWidth: 2,
    radius: '8px',
    padding: ['8px', '12px'],
  }}
  textStyle={{
    fill: '#1677FF',
    fontSize: '24px',
    fontWeight: 'bold',
  }}
/>

{/* 右上方向 */}
<TagGuide records={[item]} content="右上" direct="tr" />
{/* 下方居中 */}
<TagGuide records={[item]} content="下方" direct="bc" />
{/* 左侧居中 */}
<TagGuide records={[item]} content="左侧" direct="cl" />

{/* 标注最大值 */}
<TagGuide
  records={[{ genre: 'Sports', sold: 'max' }]}
  content="最大值"
  direct="tc"
  background={{ fill: 'green' }}
/>

<TagGuide
  records={[item]}
  content="固定方向"
  direct="tl"
  autoAdjust={false}
/>

<TagGuide
  records={[item]}
  content="大箭头"
  direct="tr"
  side="12px"
/>

<Canvas context={context}>
  <Chart data={data}>
    <Interval x="genre" y="sold" />
    {data.map((item) => (
      <TagGuide
        records={[{ genre: item.genre, sold: 'max' }]}
        content="Max"
        direct="tc"
        background={{ fill: 'red' }}
      />
    ))}
    {data.map((item) => (
      <TagGuide
        records={[{ genre: item.genre, sold: 'min' }]}
        content="Min"
        direct="bc"
        background={{ fill: 'green' }}
      />
    ))}
  </Chart>
</Canvas>;

<TagGuide
  records={[item]}
  content="偏移标签"
  direct="tr"
  offsetX={20}
  offsetY={-30}
/>

<TagGuide
  records={[item]}
  content="标签"
  direct="tr"
  animation={{
    appear: {
      duration: 450,
      easing: 'linear',
    }
  }}
/>

import { Canvas, Chart, Interval, TagGuide, Axis } from '@antv/f2';

const data = [
  { name: 'London', 月份: 'Jan.', 月均温度: 5.2 },
  { name: 'London', 月份: 'Feb.', 月均温度: 6.8 },
  { name: 'Beijing', 月份: 'Jan.', 月均温度: -3.9 },
  { name: 'Beijing', 月份: 'Feb.', 月均温度: 2.1 },
];

<Canvas context={context}>
  <Chart data={data}>
    <Axis field="月份" />
    <Axis field="月均温度" min={-10} />
    <Interval x="月份" y="月均温度" color="name" adjust={{ type: 'dodge', marginRatio: 0.05 }} />
    {data.map((item) => (
      <TagGuide
        records={[item]}
        precise
        content={`${item['月均温度']}°C`}
        direct={item['月均温度'] >= 0 ? 'tc' : 'bc'}
        background={(points) => {
          const colorMap = { 'London': '#1677FF', 'Beijing': '#22C678' };
          return { fill: colorMap[item.name] };
        }}
        textStyle={{ fontSize: '20px', fill: '#fff' }}
      />
    ))}
  </Chart>
</Canvas>

<TagGuide
  records={[item]}
  content="点击我"
  direct="tr"
  onClick={(e) => {
    console.log('标签被点击', e);
  }}
/>

{data.map((item) => (
  <TagGuide
    records={[item]}
    content={item.sold}
    direct="tc"
    visible={item.sold > 200}
  />
))}