@gadmin2n/schematics 0.0.71 → 0.0.72

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

@@ -1,552 +0,0 @@
-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;