@gadmin2n/schematics 0.0.68 → 0.0.70

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/canvas/PieChart/index.tsx

@@ -0,0 +1,552 @@
+import React, { useMemo, useImperativeHandle, forwardRef } from 'react';
+import { Spin, Empty } from 'antd';
+import type * as echarts from 'echarts';
+import { useECharts } from '@/hooks/useECharts';
+import { LEGEND_HORIZONTAL, LEGEND_VERTICAL } from '../chart-constants';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface PieDataItem {
+  name: string;
+  value: number;
+  itemStyle?: { color?: string; [key: string]: any };
+  /** 额外描述信息，可用于自定义图例 tooltip */
+  comment?: string;
+  /** sunburst 层级子节点 */
+  children?: PieDataItem[];
+  [key: string]: any;
+}
+
+export type PieChartVariant = 'pie' | 'ring' | 'sunburst';
+
+export interface PieChartHandle {
+  /** 访问底层 ECharts 实例，用于 chart linking / dispatchAction 等操作。 */
+  chart: echarts.ECharts | null;
+}
+
+export interface PieChartProps {
+  // ── 核心 ──────────────────────────────────────────────────────────────────
+  /** 饼图数据 */
+  data: PieDataItem[];
+  /** 视觉变体：pie = 标准饼图；ring = 环形图（甜甜圈）；sunburst = 旭日图 */
+  variant?: PieChartVariant;
+  /**
+   * 图表标题，渲染在图表上方。
+   * - 字符串：套默认样式（居中、12px、bold、#515151）
+   * - ReactNode：直接渲染，样式由调用方控制
+   * height 只指图表区域高度，标题额外占空间。
+   */
+  title?: React.ReactNode;
+
+  // ── 布局 ──────────────────────────────────────────────────────────────────
+  /** 图表容器高度，默认 300 */
+  height?: number | string;
+  /** 图例方向。horizontal = 底部横排滚动；vertical = 右侧纵排滚动 */
+  legendOrient?: 'horizontal' | 'vertical';
+  /** 是否显示图例。pie 默认 true，ring 默认 false，sunburst 默认 true */
+  legendShow?: boolean;
+
+  // ── 数据处理 ──────────────────────────────────────────────────────────────
+  /**
+   * 显示前 N 项，其余合并为 "Others"（仅 pie / ring 生效，sunburst 不受影响）。
+   * 默认 5；设为 0 禁用合并，展示全部。
+   */
+  topN?: number;
+  /**
+   * 占比阈值（0-100）。超过该阈值的扇区 label 自动放到扇区内部（白色文字）。
+   * 未设置时所有 label 保持默认 outside 位置。
+   * 建议：pie variant ≥ 15，ring variant ≥ 25（环带较窄）。
+   */
+  insideLabelThreshold?: number;
+
+  // ── 配置覆盖 ──────────────────────────────────────────────────────────────
+  /** 透传至 ECharts series 的配置，与基准配置浅合并 */
+  chartProps?: Record<string, any>;
+  /** 完全自定义 option，与组件生成的 option 浅合并（优先级最高） */
+  option?: echarts.EChartsCoreOption;
+
+  // ── 交互 ──────────────────────────────────────────────────────────────────
+  /** 饼图扇区点击回调 */
+  onClick?: (params: any) => void;
+  /** 其他 ECharts 事件绑定 */
+  onEvents?: Record<string, (params: any, chart: echarts.ECharts) => void>;
+
+  // ── 状态 ──────────────────────────────────────────────────────────────────
+  /** 显示 Spin 加载态 */
+  loading?: boolean;
+  /** 强制显示空态。未传时根据 data.length === 0 自动判断 */
+  empty?: boolean;
+
+  // ── 样式 / 测试 ──────────────────────────────────────────────────────────
+  style?: React.CSSProperties;
+  className?: string;
+  /** data-testid */
+  testId: string;
+}
+
+// ─── 图例基准配置 ─────────────────────────────────────────────────────────────
+
+// LEGEND_HORIZONTAL, LEGEND_VERTICAL 来自 ../chart-constants
+
+// ─── Tooltip 基准配置 ─────────────────────────────────────────────────────────
+
+const PIE_TOOLTIP = {
+  trigger: 'item' as const,
+  confine: true,
+  formatter: (obj: any) => {
+    const { marker, name, value, percent } = obj;
+    return `<div>${marker} ${name}：${value?.toLocaleString()}&nbsp;(${percent}%)</div>`;
+  },
+};
+
+// ─── Others Tooltip（展示明细） ───────────────────────────────────────────────
+
+function buildOthersTooltip(others: PieDataItem[]) {
+  return {
+    trigger: 'item' as const,
+    confine: true,
+    formatter: (obj: any) => {
+      const { marker, name, value, percent } = obj;
+      if (name !== 'Others') {
+        return `<div>${marker} ${name}：${value?.toLocaleString()}&nbsp;(${percent}%)</div>`;
+      }
+      const rows = others
+        .map(
+          (item) =>
+            `<div style="display:flex;justify-content:space-between;gap:16px">` +
+            `<span>${item.name}</span>` +
+            `<span>${item.value?.toLocaleString()}</span>` +
+            `</div>`,
+        )
+        .join('');
+      return `<div><div style="font-weight:bold;margin-bottom:4px">${marker} Others (${percent}%)</div>${rows}</div>`;
+    },
+  };
+}
+
+// ─── 数据预处理：排序 + Top N 合并 ────────────────────────────────────────────
+
+const DEFAULT_TOP_N = 5;
+
+function processData(
+  data: PieDataItem[],
+  topN: number,
+): { processed: PieDataItem[]; others: PieDataItem[] } {
+  // 按 value 从大到小排序（顺时针最大在前）
+  const sorted = [...data].sort((a, b) => b.value - a.value);
+
+  if (topN === 0 || sorted.length <= topN) {
+    return { processed: sorted, others: [] };
+  }
+
+  const top = sorted.slice(0, topN);
+  const rest = sorted.slice(topN);
+  const othersValue = rest.reduce((sum, item) => sum + item.value, 0);
+  const others: PieDataItem = { name: 'Others', value: othersValue };
+
+  return { processed: [...top, others], others: rest };
+}
+
+// ─── inside label 处理 ────────────────────────────────────────────────────────
+
+const INSIDE_LABEL_MAX_NAME_LEN = 6; // 占比 ≥ threshold 时，name 最多 6 显示宽度
+const INSIDE_LABEL_LARGE_THRESHOLD = 40; // 大扇区额外放宽 name 限制
+const INSIDE_LABEL_LARGE_MAX_NAME_LEN = 10; // 占比 ≥ 40% 时，name 最多 10 显示宽度
+const INSIDE_LABEL_XLARGE_THRESHOLD = 80; // 超大扇区进一步放宽
+const INSIDE_LABEL_XLARGE_MAX_NAME_LEN = 14; // 占比 ≥ 80% 时，name 最多 14 显示宽度
+const INSIDE_LABEL_FULL_THRESHOLD = 95; // 占比 ≥ 95% 时，不限制 name 长度
+
+/**
+ * 计算字符串的显示宽度：CJK 字符算 2，其余 ASCII 字符算 1。
+ * 用于在中英文混排时统一按视觉宽度判断是否能放入扇区内部。
+ */
+function getDisplayWidth(str: string): number {
+  return [...str].reduce(
+    (w, c) =>
+      w +
+      (/[\u4e00-\u9fff\u3000-\u303f\uff00-\uffef\u3400-\u4dbf\u20000-\u2a6df]/.test(
+        c,
+      )
+        ? 2
+        : 1),
+    0,
+  );
+}
+
+function applyInsideLabel(
+  data: PieDataItem[],
+  threshold: number,
+): PieDataItem[] {
+  const total = data.reduce((s, d) => s + d.value, 0);
+  if (total === 0) return data;
+  return data.map((item) => {
+    const percent = (item.value / total) * 100;
+    const nameLen = getDisplayWidth(item.name);
+    const shouldBeInside =
+      percent >= INSIDE_LABEL_FULL_THRESHOLD ||
+      (percent >= threshold && nameLen <= INSIDE_LABEL_MAX_NAME_LEN) ||
+      (percent >= INSIDE_LABEL_LARGE_THRESHOLD &&
+        nameLen <= INSIDE_LABEL_LARGE_MAX_NAME_LEN) ||
+      (percent >= INSIDE_LABEL_XLARGE_THRESHOLD &&
+        nameLen <= INSIDE_LABEL_XLARGE_MAX_NAME_LEN);
+    if (shouldBeInside) {
+      return {
+        ...item,
+        label: {
+          ...(item.label ?? {}),
+          position: 'inside' as const,
+          color: '#fff',
+          // 紧凑格式：只显示 name + percent，避免多行文字撑出扇区导致 ECharts 自动 fallback 到外部
+          formatter: (obj: any) => `${obj.name}\n${obj.percent}%`,
+          overflow: 'none' as const,
+        },
+        labelLine: { show: false },
+      };
+    }
+    return item;
+  });
+}
+
+// ─── Label 基准配置 ───────────────────────────────────────────────────────────
+
+const PIE_LABEL = {
+  show: true,
+  alignTo: 'edge' as const,
+  edgeDistance: 10,
+  minMargin: 5,
+  formatter: (obj: any) => {
+    const { value, name, percent } = obj;
+    return `${name}：${value?.toLocaleString()}(${percent}%)`;
+  },
+};
+
+// labelLayout 回调：让引导线终点对准 label 底部，形成下划线效果
+const PIE_LABEL_LAYOUT = (params: any) => {
+  const { labelRect, labelLinePoints } = params;
+  if (!labelRect || !labelLinePoints) return {};
+
+  // label 底部 y 坐标 + 2px 间距
+  const bottomY = labelRect.y + labelRect.height + 2;
+  // 用引导线起点 x 和拐点 x 判断方向：拐点在起点左边 = 左侧 label
+  const isLeft = labelLinePoints[1][0] < labelLinePoints[0][0];
+
+  return {
+    labelLinePoints: [
+      labelLinePoints[0],
+      [labelLinePoints[1][0], bottomY],
+      [isLeft ? labelRect.x : labelRect.x + labelRect.width, bottomY],
+    ],
+  };
+};
+
+// ─── Variant 系列基准配置 ─────────────────────────────────────────────────────
+
+function getPieSeriesBase(
+  data: PieDataItem[],
+  chartProps?: Record<string, any>,
+) {
+  return {
+    type: 'pie' as const,
+    radius: ['0', '65%'],
+    center: ['50%', '42%'],
+    clockwise: true,
+    avoidLabelOverlap: true,
+    data,
+    top: 0,
+    label: PIE_LABEL,
+    labelLayout: PIE_LABEL_LAYOUT,
+    labelLine: {
+      show: true,
+      length: 15,
+      length2: 0,
+      smooth: 0,
+      maxSurfaceAngle: 80,
+    },
+    emphasis: {
+      itemStyle: {
+        shadowBlur: 10,
+        shadowOffsetX: 0,
+        shadowColor: 'rgba(0, 0, 0, 0.5)',
+      },
+    },
+    ...chartProps,
+  };
+}
+
+function getRingSeriesBase(
+  data: PieDataItem[],
+  chartProps?: Record<string, any>,
+) {
+  return {
+    type: 'pie' as const,
+    radius: ['35%', '65%'],
+    center: ['50%', '42%'],
+    clockwise: true,
+    avoidLabelOverlap: true,
+    itemStyle: {
+      borderRadius: 10,
+      borderColor: '#fff',
+      borderWidth: 2,
+    },
+    label: PIE_LABEL,
+    labelLayout: PIE_LABEL_LAYOUT,
+    labelLine: {
+      show: true,
+      length: 15,
+      length2: 0,
+      smooth: 0,
+      maxSurfaceAngle: 80,
+    },
+    data,
+    top: 0,
+    emphasis: {
+      scaleSize: 5,
+      itemStyle: {
+        shadowBlur: 10,
+        shadowOffsetX: 0,
+        shadowColor: 'rgba(0, 0, 0, 0.5)',
+      },
+    },
+    ...chartProps,
+  };
+}
+
+function getSunburstSeriesBase(
+  data: PieDataItem[],
+  chartProps?: Record<string, any>,
+) {
+  return {
+    type: 'sunburst' as const,
+    data,
+    center: ['50%', '50%'],
+    radius: ['0', '90%'],
+    sort: 'desc',
+    startAngle: 90,
+    label: {
+      show: true,
+      position: 'inside',
+      distance: 80,
+      fontSize: 10,
+      formatter: (params: any) => {
+        const { data: d = {} } = params || {};
+        return `${params?.name}\n${d?.percent ? d.percent + '%' : params?.value}`;
+      },
+    },
+    labelLayout: {
+      hideOverlap: true,
+    },
+    emphasis: {
+      focus: 'relative',
+    },
+    ...chartProps,
+  };
+}
+
+// ─── 组件 ─────────────────────────────────────────────────────────────────────
+
+const PieChartInner: React.ForwardRefRenderFunction<
+  PieChartHandle,
+  PieChartProps
+> = (
+  {
+    data,
+    variant = 'pie',
+    title,
+    height = 300,
+    legendOrient = 'horizontal',
+    legendShow,
+    topN = DEFAULT_TOP_N,
+    insideLabelThreshold,
+    chartProps,
+    option: optionOverride,
+    onClick,
+    onEvents: onEventsProp,
+    loading = false,
+    empty,
+    style,
+    className,
+    testId,
+  },
+  ref,
+) => {
+  // 空态判断
+  const isEmpty = empty ?? data.length === 0;
+
+  // 合并 onClick 到 onEvents
+  const onEvents = useMemo(() => {
+    if (!onClick && !onEventsProp) return undefined;
+    return {
+      ...onEventsProp,
+      ...(onClick
+        ? { click: (params: any, chart: echarts.ECharts) => onClick(params) }
+        : {}),
+    };
+  }, [onClick, onEventsProp]);
+
+  // 构建 option
+  const mergedOption = useMemo(() => {
+    // 图配置
+    const defaultLegendShow = variant === 'ring' ? false : true;
+    const showLegend = legendShow ?? defaultLegendShow;
+    const legendBase =
+      legendOrient === 'vertical' ? LEGEND_VERTICAL : LEGEND_HORIZONTAL;
+    const legend = { ...legendBase, show: showLegend };
+
+    // 数据预处理（sunburst 不做 topN 处理）
+    let seriesData = data;
+    let othersItems: PieDataItem[] = [];
+    if (variant !== 'sunburst') {
+      const { processed, others } = processData(data, topN);
+      seriesData = processed;
+      othersItems = others;
+    }
+
+    // inside label 优化（仅 pie variant，ring 一律 outside）
+    if (insideLabelThreshold !== undefined && variant === 'pie') {
+      seriesData = applyInsideLabel(seriesData, insideLabelThreshold);
+    }
+
+    // tooltip（有 Others 时用明细 tooltip）
+    const tooltip =
+      variant === 'sunburst'
+        ? { confine: true, trigger: 'item' as const }
+        : othersItems.length > 0
+          ? buildOthersTooltip(othersItems)
+          : PIE_TOOLTIP;
+
+    // 系列配置
+    let series;
+    switch (variant) {
+      case 'ring':
+        series = [getRingSeriesBase(seriesData, chartProps)];
+        break;
+      case 'sunburst':
+        series = getSunburstSeriesBase(seriesData, chartProps);
+        break;
+      case 'pie':
+      default:
+        series = [getPieSeriesBase(seriesData, chartProps)];
+        break;
+    }
+
+    // 基础 option
+    const baseOption: echarts.EChartsCoreOption = {
+      grid: { top: 24 },
+      tooltip,
+      legend,
+      series,
+    };
+
+    // 用户 option 覆盖
+    if (optionOverride) {
+      return {
+        ...baseOption,
+        ...optionOverride,
+        // 深合并 tooltip 和 legend
+        ...(optionOverride.tooltip
+          ? {
+              tooltip: {
+                ...(baseOption.tooltip as any),
+                ...(optionOverride.tooltip as any),
+              },
+            }
+          : {}),
+        ...(optionOverride.legend
+          ? { legend: { ...legend, ...(optionOverride.legend as any) } }
+          : {}),
+      };
+    }
+
+    return baseOption;
+  }, [
+    data,
+    variant,
+    legendOrient,
+    legendShow,
+    topN,
+    insideLabelThreshold,
+    chartProps,
+    optionOverride,
+  ]);
+
+  const { domRef, chartRef } = useECharts({ option: mergedOption, onEvents });
+
+  useImperativeHandle(ref, () => ({
+    get chart() {
+      return chartRef.current;
+    },
+  }));
+
+  // 空态渲染：始终保留 ECharts div（domRef 不能断），用覆盖层显示空态
+  const titleNode = title ? (
+    typeof title === 'string' ? (
+      <div
+        style={{
+          textAlign: 'center',
+          fontSize: 13,
+          fontWeight: 'bold',
+          color: '#515151',
+          marginTop: 12,
+          marginBottom: 4,
+        }}
+      >
+        {title}
+      </div>
+    ) : (
+      title
+    )
+  ) : null;
+
+  return (
+    <Spin spinning={loading}>
+      <div
+        style={{
+          position: 'relative',
+          width: '100%',
+          ...(titleNode
+            ? { display: 'flex', flexDirection: 'column', height }
+            : {}),
+        }}
+      >
+        {titleNode}
+        <div
+          style={{
+            position: 'relative',
+            width: '100%',
+            ...(titleNode ? { flex: 1, minHeight: 0 } : { height }),
+          }}
+        >
+          <div
+            ref={domRef}
+            className={className}
+            style={{
+              width: '100%',
+              height: titleNode ? '100%' : height,
+              ...style,
+            }}
+            data-testid={testId}
+          />
+          {isEmpty && !loading && (
+            <div
+              style={{
+                position: 'absolute',
+                inset: 0,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <Empty
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+                description="NO DATA"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </Spin>
+  );
+};
+
+export const PieChart = forwardRef(PieChartInner);
+export default PieChart;