@hsu-react/ui 0.0.1

package/lib/components/Chart/Pie/Pie3D/_utils/label.js

@@ -0,0 +1,275 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createLabelSeries = void 0;
+// 估算标签的宽度和高度（基于文本长度和字体大小）
+const estimateLabelSize = (text, fontSize = 14, padding = 5) => {
+  // 简单估算：每个字符约占用 fontSize * 0.6 的宽度
+  const estimatedWidth = text.length * fontSize * 0.6 + padding * 2;
+  const estimatedHeight = fontSize + padding * 2;
+  return {
+    width: estimatedWidth,
+    height: estimatedHeight
+  };
+};
+
+// 检测两个矩形是否重叠
+const isOverlapping = (rect1, rect2) => {
+  return rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y;
+};
+
+// 调整标签位置以避免重叠
+const adjustLabelPositions = (labelPoints, labelTextStyle) => {
+  const fontSize = labelTextStyle.fontSize || 14;
+  const padding = Array.isArray(labelTextStyle.padding) ? labelTextStyle.padding[0] || 5 : labelTextStyle.padding || 5;
+
+  // 将标签尺寸转换为3D坐标系的单位
+  // 假设字体大小和padding的单位需要转换为3D坐标系的相对单位
+  // 3D坐标系的范围大约是-1到1，所以需要适当的缩放
+  const scaleFactor = 0.01; // 将像素单位转换为3D坐标单位
+
+  // 创建标签矩形数组（在2D投影平面上，使用x和y坐标）
+  const labelRects = labelPoints?.map(point => {
+    const size = estimateLabelSize(point.text, fontSize, padding);
+    // 将像素尺寸转换为3D坐标单位
+    const width3D = size.width * scaleFactor;
+    const height3D = size.height * scaleFactor;
+    return {
+      x: point.x - width3D / 2,
+      y: point.y - height3D / 2,
+      width: width3D,
+      height: height3D,
+      index: 0 // 将在循环中设置
+    };
+  });
+
+  // 设置索引
+  labelRects?.forEach((rect, index) => {
+    rect.index = index;
+  });
+
+  // 保存原始坐标
+  labelPoints?.forEach(point => {
+    point.originalY = point.y;
+  });
+
+  // 检测并调整重叠的标签
+  const minSpacing = fontSize * scaleFactor * 0.3; // 最小间距（3D坐标单位）
+  let hasOverlap = true;
+  let iterations = 0;
+  const maxIterations = 100; // 最大迭代次数
+
+  while (hasOverlap && iterations < maxIterations) {
+    hasOverlap = false;
+    iterations++;
+    for (let i = 0; i < labelRects.length; i++) {
+      for (let j = i + 1; j < labelRects.length; j++) {
+        if (isOverlapping(labelRects[i], labelRects[j])) {
+          hasOverlap = true;
+
+          // 计算两个标签的中心点
+          const center1X = labelRects[i].x + labelRects[i].width / 2;
+          const center1Y = labelRects[i].y + labelRects[i].height / 2;
+          const center2X = labelRects[j].x + labelRects[j].width / 2;
+          const center2Y = labelRects[j].y + labelRects[j].height / 2;
+
+          // 计算x和y方向的距离
+          const distanceX = Math.abs(center1X - center2X);
+          const distanceY = Math.abs(center1Y - center2Y);
+
+          // 计算需要的距离
+          const requiredDistanceX = (labelRects[i].width + labelRects[j].width) / 2 + minSpacing;
+          const requiredDistanceY = (labelRects[i].height + labelRects[j].height) / 2 + minSpacing;
+
+          // 根据重叠情况调整位置
+          const originalY1 = labelPoints[i].originalY || labelPoints[i].y;
+          const originalY2 = labelPoints[j].originalY || labelPoints[j].y;
+          const originalX1 = labelPoints[i].x;
+          const originalX2 = labelPoints[j].x;
+
+          // 优先调整y方向（垂直方向），因为这是最常见的重叠情况
+          if (distanceY < requiredDistanceY) {
+            const adjustmentY = (requiredDistanceY - distanceY) / 2 + minSpacing * 0.5;
+            if (originalY1 < originalY2) {
+              labelPoints[i].y -= adjustmentY;
+              labelPoints[j].y += adjustmentY;
+            } else {
+              labelPoints[i].y += adjustmentY;
+              labelPoints[j].y -= adjustmentY;
+            }
+          }
+
+          // 如果x方向也很接近，稍微调整x方向
+          if (distanceX < requiredDistanceX * 0.9) {
+            const adjustmentX = (requiredDistanceX - distanceX) / 2 * 0.5;
+            if (originalX1 < originalX2) {
+              labelPoints[i].x -= adjustmentX;
+              labelPoints[j].x += adjustmentX;
+            } else {
+              labelPoints[i].x += adjustmentX;
+              labelPoints[j].x -= adjustmentX;
+            }
+          }
+
+          // 更新矩形位置
+          const size1 = estimateLabelSize(labelPoints[i].text, fontSize, padding);
+          const size2 = estimateLabelSize(labelPoints[j].text, fontSize, padding);
+          labelRects[i].x = labelPoints[i].x - size1.width * scaleFactor / 2;
+          labelRects[i].y = labelPoints[i].y - size1.height * scaleFactor / 2;
+          labelRects[j].x = labelPoints[j].x - size2.width * scaleFactor / 2;
+          labelRects[j].y = labelPoints[j].y - size2.height * scaleFactor / 2;
+        }
+      }
+    }
+  }
+  return labelPoints;
+};
+const calculateLabelPoints = (series, label, maxValue, minHeight, maxHeight, autoRotate, yOffset, alpha, colorPalette) => {
+  const labelLines = [];
+  const labelPoints = [];
+  const effectiveYOffset = autoRotate ? 0 : yOffset;
+  const sumValue = series.reduce((sum, s) => sum + s.pieData.value, 0);
+  for (let i = 0; i < series.length; i += 1) {
+    const midRatio = (series[i].pieData.startRatio + series[i].pieData.endRatio) / 2;
+    const midRadian = midRatio * Math.PI * 2;
+    const heightRatio = series[i].pieData.value / maxValue;
+    const height = minHeight + (maxHeight - minHeight) * heightRatio;
+    const zTop = height * 0.1;
+    const zBottom = -height * 0.1;
+    const startRadius = 1;
+    const startY = Math.sin(midRadian) * startRadius + effectiveYOffset;
+    let startZ;
+    let midHeightIncrease;
+    let midPoint;
+    let endPoint;
+    if (autoRotate) {
+      startZ = zTop;
+      midHeightIncrease = 1;
+      const midDistance = label.distance || 1;
+      midPoint = [Math.cos(midRadian) * (startRadius + midDistance * 0.2), Math.sin(midRadian) * (startRadius + midDistance * 0.2), startZ + midHeightIncrease];
+      const horizontalDistance = midDistance * 0.4;
+      endPoint = [Math.cos(midRadian) * (startRadius + midDistance * 0.2 + horizontalDistance), Math.sin(midRadian) * (startRadius + midDistance * 0.2 + horizontalDistance), midPoint[2]];
+    } else {
+      const threshold = -1 + alpha / 90;
+      const isFrontSide = startY < threshold;
+      if (isFrontSide) {
+        startZ = (zTop + zBottom) / 2;
+        midHeightIncrease = -1;
+      } else {
+        startZ = zTop;
+        midHeightIncrease = 1;
+      }
+      const midDistance = 1;
+      midPoint = [Math.cos(midRadian) * (startRadius + midDistance * 0.1), Math.sin(midRadian) * (startRadius + midDistance * 0.5) + effectiveYOffset, startZ + midHeightIncrease];
+      const isLeftSide = Math.cos(midRadian) < 0;
+      const horizontalDistance = midDistance * 0.6;
+      endPoint = [midPoint[0] + (isLeftSide ? -horizontalDistance : horizontalDistance), midPoint[1], midPoint[2]];
+    }
+    const startPoint = [Math.cos(midRadian) * startRadius, startY, startZ];
+    const sectorColor = series[i].itemStyle?.color || series[i].pieData.itemStyle?.color || colorPalette[i % colorPalette.length];
+    labelLines.push({
+      coords: [startPoint, midPoint, endPoint],
+      name: series[i].name,
+      color: sectorColor
+    });
+    const percent = (series[i].pieData.value / sumValue * 100).toFixed(1);
+    let labelText = "";
+    if (label.formatter) {
+      labelText = label.formatter({
+        name: series[i].name,
+        value: series[i].pieData.value,
+        percent: parseFloat(percent)
+      });
+    } else {
+      labelText = `${series[i].name} ${percent}%`;
+    }
+    labelPoints.push({
+      x: endPoint[0],
+      y: endPoint[1],
+      z: endPoint[2],
+      text: labelText,
+      name: series[i].name,
+      color: sectorColor
+    });
+  }
+
+  // 调整标签位置以避免重叠
+  const labelTextStyle = label.textStyle || {};
+  // 处理 padding 可能是数组的情况
+  const adjustedTextStyle = {
+    fontSize: labelTextStyle.fontSize,
+    padding: Array.isArray(labelTextStyle.padding) ? labelTextStyle.padding[0] || 5 : labelTextStyle.padding || 5
+  };
+  const adjustedPoints = adjustLabelPositions(labelPoints, adjustedTextStyle);
+
+  // 更新标签线的终点和中间点位置以匹配调整后的标签位置
+  adjustedPoints?.forEach((point, index) => {
+    if (labelLines[index]) {
+      const originalEndPoint = labelLines[index].coords[2];
+      const originalMidPoint = labelLines[index].coords[1];
+
+      // 更新终点
+      labelLines[index].coords[2] = [point.x, point.y, point.z];
+
+      // 如果y坐标发生了变化，调整中间点的y坐标以保持线条平滑
+      const yDiff = point.y - originalEndPoint[1];
+      if (Math.abs(yDiff) > 0.001) {
+        // 调整中间点的y坐标，使其在起点和终点之间平滑过渡
+        const midY = originalMidPoint[1] + yDiff * 0.5; // 中间点跟随终点移动，但幅度较小
+        labelLines[index].coords[1] = [originalMidPoint[0], midY, originalMidPoint[2]];
+      }
+    }
+  });
+  return {
+    lines: labelLines,
+    points: adjustedPoints
+  };
+};
+const createLabelSeries = (series, label, maxValue, minHeight, maxHeight, autoRotate, yOffset, alpha, colorPalette) => {
+  if (!label?.show) {
+    return [];
+  }
+  const {
+    lines,
+    points
+  } = calculateLabelPoints(series, label, maxValue, minHeight, maxHeight, autoRotate, yOffset, alpha, colorPalette);
+  const labelSeries = [];
+  const labelTextStyle = label.textStyle || {};
+  lines?.forEach(line => {
+    labelSeries.push({
+      type: "line3D",
+      coordinateSystem: "cartesian3D",
+      data: line.coords,
+      lineStyle: {
+        width: label.hideLine ? 0 : label.lineStyle?.width || 1,
+        color: label.lineStyle?.color || line.color || "#fff"
+      },
+      silent: true
+    });
+  });
+  points?.forEach(point => {
+    labelSeries.push({
+      type: "scatter3D",
+      data: [[point.x, point.y, point.z, point.text, point.name]],
+      symbolSize: 0,
+      label: {
+        show: true,
+        position: "top",
+        formatter: params => {
+          const dataArray = params?.value || [];
+          return dataArray?.[3] || "";
+        },
+        textStyle: {
+          color: labelTextStyle.color || point.color || "#fff",
+          fontSize: labelTextStyle.fontSize || 14,
+          padding: labelTextStyle.padding || 5
+        }
+      },
+      silent: true
+    });
+  });
+  return labelSeries;
+};
+exports.createLabelSeries = createLabelSeries;

package/lib/components/Chart/Pie/Pie3D/_utils/option.d.ts

@@ -0,0 +1,20 @@
+import * as echarts from "echarts";
+import { ChartsOption } from "../../..";
+import type { Pie3DDataItem, SeriesItem, LabelConfig } from "..";
+export declare const getPie3DOption: (data: Pie3DDataItem[], config: {
+    internalDiameterRatio: number;
+    tooltip?: unknown;
+    alpha: number;
+    beta: number;
+    autoRotate: boolean;
+    distance: number;
+    coreOption: ChartsOption;
+    optionRef: React.MutableRefObject<ChartsOption | null>;
+    minHeight?: number;
+    maxHeight?: number;
+    yOffset?: number;
+    label?: LabelConfig;
+    enableMouseControl?: boolean;
+}) => echarts.EChartsOption & {
+    series: SeriesItem[];
+};

package/lib/components/Chart/Pie/Pie3D/_utils/option.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPie3DOption = void 0;
+var _chartTooltipFormatter = _interopRequireDefault(require("../../../chartUtils/chartTooltipFormatter"));
+var _series = require("./series");
+var _label = require("./label");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const DEFAULT_COLORS = ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc"];
+const getPie3DOption = (data, config) => {
+  const {
+    internalDiameterRatio,
+    tooltip,
+    alpha,
+    beta,
+    autoRotate,
+    distance,
+    coreOption,
+    optionRef,
+    minHeight = 10,
+    maxHeight = 35,
+    yOffset = 0,
+    label,
+    enableMouseControl = false
+  } = config;
+  const k = (0, _series.calculateK)(internalDiameterRatio);
+  const effectiveYOffset = autoRotate ? 0 : yOffset;
+  const series = (0, _series.createSeries)(data, k, minHeight, maxHeight, effectiveYOffset);
+  const maxValue = data.length ? Math.max(...data.map(item => item.value)) : 0;
+  const colorPalette = coreOption.color || DEFAULT_COLORS;
+  const labelSeries = label?.show ? (0, _label.createLabelSeries)(series, label, maxValue, minHeight, maxHeight, autoRotate, yOffset, alpha, colorPalette) : [];
+  const tooltipConfig = tooltip || {};
+  const option = {
+    ...coreOption,
+    color: colorPalette,
+    tooltip: {
+      formatter: params => {
+        const param = params;
+        if (param.seriesName !== "mouseoutSeries" && optionRef.current && typeof param.seriesIndex === "number") {
+          const currentOption = optionRef.current;
+          return (0, _chartTooltipFormatter.default)({
+            params: {
+              ...params,
+              value: currentOption.series[param.seriesIndex].pieData.value,
+              color: param.color,
+              name: param.seriesName
+            }
+          });
+        }
+        return "";
+      },
+      ...tooltipConfig
+    },
+    xAxis3D: {
+      min: -1,
+      max: 1
+    },
+    yAxis3D: {
+      min: -1,
+      max: 1
+    },
+    zAxis3D: {
+      min: -1,
+      max: 1
+    },
+    grid3D: {
+      show: false,
+      boxHeight: 20,
+      top: "-5%",
+      viewControl: {
+        alpha,
+        beta,
+        rotateSensitivity: enableMouseControl ? 1 : 0,
+        zoomSensitivity: enableMouseControl ? 1 : 0,
+        panSensitivity: enableMouseControl ? 1 : 0,
+        autoRotate,
+        distance
+      },
+      postEffect: {
+        enable: autoRotate ? false : true,
+        bloom: {
+          enable: true,
+          bloomIntensity: 0.1
+        },
+        SSAO: {
+          enable: true,
+          quality: "medium",
+          radius: 2
+        }
+      }
+    },
+    series: [...series, ...labelSeries]
+  };
+  return option;
+};
+exports.getPie3DOption = getPie3DOption;

package/lib/components/Chart/Pie/Pie3D/_utils/parametricEquation.d.ts

@@ -0,0 +1,15 @@
+export declare const getParametricEquation: (startRatio: number, endRatio: number, isSelected: boolean, isHovered: boolean, k: number, h: number, yOffset?: number) => {
+    u: {
+        min: number;
+        max: number;
+        step: number;
+    };
+    v: {
+        min: number;
+        max: number;
+        step: number;
+    };
+    x(u: number, v: number): number;
+    y(u: number, v: number): number;
+    z(u: number, v: number): number;
+};

package/lib/components/Chart/Pie/Pie3D/_utils/parametricEquation.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getParametricEquation = void 0;
+const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, h, yOffset = 0) => {
+  const midRatio = (startRatio + endRatio) / 2;
+  const startRadian = startRatio * Math.PI * 2;
+  const endRadian = endRatio * Math.PI * 2;
+  const midRadian = midRatio * Math.PI * 2;
+  let selected = isSelected;
+  if (startRatio === 0 && endRatio === 1) {
+    selected = false;
+  }
+  const offsetX = selected ? Math.cos(midRadian) * 0.1 : 0;
+  const offsetY = selected ? Math.sin(midRadian) * 0.1 : 0;
+  const hoverRate = isHovered ? 1.05 : 1;
+  return {
+    u: {
+      min: -Math.PI,
+      max: Math.PI * 3,
+      step: Math.PI / 32
+    },
+    v: {
+      min: 0,
+      max: Math.PI * 2,
+      step: Math.PI / 64
+    },
+    x(u, v) {
+      if (u < startRadian) {
+        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      if (u > endRadian) {
+        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    },
+    y(u, v) {
+      if (u < startRadian) {
+        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate + yOffset;
+      }
+      if (u > endRadian) {
+        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate + yOffset;
+      }
+      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate + yOffset;
+    },
+    z(u, v) {
+      if (u < -Math.PI * 0.5) {
+        return Math.sin(u);
+      }
+      if (u > Math.PI * 2.5) {
+        return Math.sin(u) * h * 0.1;
+      }
+      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+    }
+  };
+};
+exports.getParametricEquation = getParametricEquation;

package/lib/components/Chart/Pie/Pie3D/_utils/series.d.ts

@@ -0,0 +1,3 @@
+import type { Pie3DDataItem, SeriesItem } from "..";
+export declare const calculateK: (internalDiameterRatio: number) => number;
+export declare const createSeries: (data: Pie3DDataItem[], k: number, minHeight: number, maxHeight: number, effectiveYOffset: number) => SeriesItem[];

package/lib/components/Chart/Pie/Pie3D/_utils/series.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createSeries = exports.calculateK = void 0;
+var _parametricEquation = require("./parametricEquation");
+const calculateK = internalDiameterRatio => {
+  if (typeof internalDiameterRatio === "undefined") {
+    return 1 / 3;
+  }
+  return internalDiameterRatio === 0 ? 1 : (1 - internalDiameterRatio) / (1 + internalDiameterRatio);
+};
+exports.calculateK = calculateK;
+const createSeries = (data, k, minHeight, maxHeight, effectiveYOffset) => {
+  const series = [];
+  let sumValue = 0;
+  let startValue = 0;
+  let endValue = 0;
+  for (let i = 0; i < data.length; i += 1) {
+    sumValue += data[i].value;
+    const seriesItem = {
+      name: data[i].name || `series${i}`,
+      type: "surface",
+      parametric: true,
+      wireframe: {
+        show: false
+      },
+      pieData: {
+        ...data[i]
+      },
+      pieStatus: {
+        selected: false,
+        hovered: false,
+        k
+      }
+    };
+    if (data[i].itemStyle) {
+      seriesItem.itemStyle = {
+        ...data[i].itemStyle
+      };
+    }
+    series.push(seriesItem);
+  }
+  const maxValue = data.length ? Math.max(...data.map(item => item.value)) : 0;
+  const safeMaxValue = maxValue > 0 ? maxValue : 1;
+  for (let i = 0; i < series.length; i += 1) {
+    endValue = startValue + series[i].pieData.value;
+    series[i].pieData.startRatio = startValue / sumValue;
+    series[i].pieData.endRatio = endValue / sumValue;
+    const heightRatio = series[i].pieData.value / safeMaxValue;
+    const height = minHeight + (maxHeight - minHeight) * heightRatio;
+    series[i].parametricEquation = (0, _parametricEquation.getParametricEquation)(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, height, effectiveYOffset);
+    startValue = endValue;
+  }
+  return series;
+};
+exports.createSeries = createSeries;

package/lib/components/Chart/Pie/Pie3D/index.d.ts

@@ -0,0 +1,86 @@
+import * as echarts from "echarts";
+import "echarts-gl";
+import React from "react";
+import { ChartCommonProps } from "../..";
+export interface Pie3DDataItem {
+    name: string;
+    value: number;
+    itemStyle?: {
+        color?: string;
+        opacity?: number;
+    };
+}
+export interface LabelConfig {
+    show?: boolean;
+    distance?: number;
+    formatter?: (params: {
+        name: string;
+        value: number;
+        percent: number;
+    }) => string;
+    hideLine?: boolean;
+    lineStyle?: {
+        color?: string;
+        width?: number;
+    };
+    textStyle?: {
+        color?: string;
+        fontSize?: number;
+        padding?: number | number[];
+    };
+}
+export interface ChartPie3DProps extends Omit<ChartCommonProps, "series"> {
+    pieData: Pie3DDataItem[];
+    internalDiameterRatio?: number;
+    autoRotate?: boolean;
+    distance?: number;
+    alpha?: number;
+    beta?: number;
+    hoverHeightIncrement?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    yOffset?: number;
+    label?: LabelConfig;
+    enableMouseControl?: boolean;
+    onChart?: (chart: echarts.EChartsType) => void;
+    onClick?: (event: echarts.ECElementEvent) => void;
+}
+export interface PieStatus {
+    selected: boolean;
+    hovered: boolean;
+    k: number;
+}
+export interface SeriesItem {
+    name: string;
+    type: "surface";
+    parametric: boolean;
+    wireframe: {
+        show: boolean;
+    };
+    itemStyle?: {
+        color?: string;
+        opacity?: number;
+    };
+    pieData: Pie3DDataItem & {
+        startRatio?: number;
+        endRatio?: number;
+    };
+    pieStatus: PieStatus;
+    parametricEquation?: {
+        u: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        v: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        x: (u: number, v: number) => number;
+        y: (u: number, v: number) => number;
+        z: (u: number, v: number) => number;
+    };
+}
+declare const ChartPie3D: React.FC<ChartPie3DProps>;
+export default ChartPie3D;