OpenFlare/openflare_server/web/components/data/rank-chart.tsx

'use client';

import { useMemo } from 'react';
import type { EChartsOption } from 'echarts';
import ReactECharts from 'echarts-for-react';

type RankChartItem = {
  label: string;
  value: number;
};

type RankChartProps = {
  items: RankChartItem[];
  color: string;
  valueFormatter?: (value: number) => string;
  emptyMessage?: string;
};

const defaultFormatter = (value: number) => value.toLocaleString('zh-CN');

function getChartValue(params: unknown) {
  if (typeof params !== 'object' || params === null || !('value' in params)) {
    return 0;
  }
  const rawValue = (params as { value?: unknown }).value;
  if (Array.isArray(rawValue)) {
    const candidate = rawValue[0];
    return typeof candidate === 'number' ? candidate : 0;
  }
  return typeof rawValue === 'number' ? rawValue : 0;
}

export function RankChart({
  items,
  color,
  valueFormatter = defaultFormatter,
  emptyMessage = '暂无分布数据',
}: RankChartProps) {
  const option = useMemo<EChartsOption>(
    () => ({
      animationDuration: 400,
      grid: {
        left: 16,
        right: 24,
        top: 12,
        bottom: 12,
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        backgroundColor: 'rgba(15, 23, 42, 0.92)',
        borderWidth: 0,
        textStyle: {
          color: '#e2e8f0',
          fontSize: 12,
        },
        formatter: (params: unknown) => {
          const item = Array.isArray(params) ? params[0] : params;
          const data = item as { name?: string; value?: number };
          return `${data.name ?? ''}<br/>${valueFormatter(data.value ?? 0)}`;
        },
      },
      xAxis: {
        type: 'value',
        axisLabel: {
          color: '#94a3b8',
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(148, 163, 184, 0.16)',
            type: 'dashed',
          },
        },
      },
      yAxis: {
        type: 'category',
        data: items.map((item) => item.label),
        axisTick: { show: false },
        axisLine: { show: false },
        axisLabel: {
          color: '#cbd5e1',
          width: 120,
          overflow: 'truncate',
        },
      },
      series: [
        {
          type: 'bar',
          data: items.map((item) => item.value),
          barWidth: 12,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(148, 163, 184, 0.12)',
            borderRadius: 999,
          },
          itemStyle: {
            color,
            borderRadius: 999,
          },
          label: {
            show: true,
            position: 'right',
            color: '#e2e8f0',
            formatter: (params: unknown) =>
              valueFormatter(getChartValue(params)),
          },
        },
      ],
    }),
    [color, items, valueFormatter],
  );

  if (items.length === 0) {
    return (
      <div className="flex h-[220px] items-center justify-center rounded-3xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] text-sm text-[var(--foreground-secondary)]">
        {emptyMessage}
      </div>
    );
  }

  return (
    <ReactECharts
      option={option}
      notMerge
      lazyUpdate
      style={{ height: Math.max(220, items.length * 44), width: '100%' }}
    />
  );
}