@hsu-react/ui 0.0.8 → 0.0.10

package/src/components/Chart/_utils/autoSmooth.ts

@@ -1,164 +1,181 @@
-import * as echarts from "echarts";
-
-export interface AutoScrollByItemProps {
-  chart: echarts.ECharts;
-  xAxisData?: Array<string>;
-  windowSize?: number;
-  interval?: number;
-  startIndex?: number;
-  autoPlay?: boolean;
-  enableWheelScroll?: boolean;
-}
-
-export function autoScrollByItem(props: AutoScrollByItemProps) {
-  const {
-    chart,
-    xAxisData,
-    windowSize = 10,
-    interval = 2000,
-    startIndex = 0,
-    autoPlay = true,
-    enableWheelScroll = true,
-  } = props;
-  const total = xAxisData?.length ?? 0;
-  if (total <= 0) {
-    return {
-      pause: () => {},
-      resume: () => {},
-      dispose: () => {},
-    };
-  }
-
-  const initialStartIndex = Math.max(
-    0,
-    Math.min(startIndex, Math.max(total - 1, 0)),
-  );
-  const stepPercent = total > 0 ? (1 / total) * 100 : 0;
-  const windowSizePercent = total > 0 ? (windowSize / total) * 100 : 100;
-  const initialStartPercent = total > 0 ? (initialStartIndex / total) * 100 : 0;
-  let start = initialStartPercent;
-  let end = Math.min(initialStartPercent + windowSizePercent, 100);
-
-  const syncDataZoomRange = () => {
-    const option = chart.getOption() as {
-      dataZoom?: Array<Record<string, unknown>>;
-    };
-    const currentDataZoom = option?.dataZoom;
-    if (!currentDataZoom?.length) return;
-    chart.setOption({
-      dataZoom: currentDataZoom.map((dz) => ({
-        ...dz,
-        start,
-        end,
-      })),
-    });
-  };
-
-  syncDataZoomRange();
-
-  let timer: NodeJS.Timeout | null = null;
-  if (autoPlay) {
-    timer = setInterval(tick, interval);
-  }
-
-  function tick() {
-    start += stepPercent;
-    end += stepPercent;
-
-    if (end > 100) {
-      start = 0;
-      end = windowSizePercent;
-    }
-
-    syncDataZoomRange();
-  }
-
-  if (autoPlay) {
-    chart.getZr().on("mouseover", pause);
-    chart.getZr().on("mouseout", resume);
-  }
-
-  function pause() {
-    if (timer) {
-      clearInterval(timer);
-      timer = null;
-    }
-  }
-  function resume() {
-    if (autoPlay && !timer) {
-      timer = setInterval(tick, interval);
-    }
-  }
-
-  const chartDom = chart.getDom();
-  const applyWheelDelta = (delta: number) => {
-    if (delta === 0) return;
-    const direction = delta > 0 ? 1 : -1;
-
-    start += direction * stepPercent;
-    end += direction * stepPercent;
-
-    if (start < 0) {
-      start = 0;
-      end = windowSizePercent;
-    }
-    if (end > 100) {
-      end = 100;
-      start = Math.max(0, 100 - windowSizePercent);
-    }
-
-    syncDataZoomRange();
-  };
-
-  function handleWheel(event: Event) {
-    if (!enableWheelScroll) return;
-    const wheelEvent = event as WheelEvent;
-    wheelEvent.preventDefault();
-    applyWheelDelta(wheelEvent.deltaY);
-  }
-
-  function handleZrMouseWheel(params: unknown) {
-    if (!enableWheelScroll) return;
-    const eventLike = (params as { event?: Record<string, unknown> })?.event;
-    const nativeEvent = eventLike?.event as WheelEvent | undefined;
-    const deltaFromNative = nativeEvent?.deltaY;
-    const deltaFromEventLike =
-      (eventLike?.deltaY as number | undefined) ??
-      (eventLike?.zrDelta as number | undefined);
-    const wheelDelta = eventLike?.wheelDelta as number | undefined;
-    const resolvedDelta =
-      deltaFromNative ??
-      deltaFromEventLike ??
-      (typeof wheelDelta === "number" ? -wheelDelta : undefined);
-
-    if (typeof resolvedDelta !== "number") return;
-    nativeEvent?.preventDefault();
-    applyWheelDelta(resolvedDelta);
-  }
-
-  if (enableWheelScroll) {
-    chartDom.addEventListener("wheel", handleWheel, { passive: false });
-    chart.getZr().on("mousewheel", handleZrMouseWheel);
-  }
-
-  const handleWindowResize = () => {
-    chart.resize();
-    syncDataZoomRange();
-  };
-  window.addEventListener("resize", handleWindowResize);
-
-  function dispose() {
-    pause();
-    if (autoPlay) {
-      chart.getZr().off("mouseover", pause);
-      chart.getZr().off("mouseout", resume);
-    }
-    if (enableWheelScroll) {
-      chartDom.removeEventListener("wheel", handleWheel);
-      chart.getZr().off("mousewheel", handleZrMouseWheel);
-    }
-    window.removeEventListener("resize", handleWindowResize);
-  }
-
-  return { pause, resume, dispose };
-}
+import * as echarts from "echarts";
+
+export interface AutoScrollByItemProps {
+  chart: echarts.ECharts;
+  xAxisData?: Array<string>;
+  windowSize?: number;
+  interval?: number;
+  startIndex?: number;
+  autoPlay?: boolean;
+  enableWheelScroll?: boolean;
+  /** 窗口变化回调（创建同步、自动滚动、滚轮、resize 均触发），参数为当前窗口 start/end 百分比 */
+  onWindowChange?: (startPercent: number, endPercent: number) => void;
+}
+
+export function autoScrollByItem(props: AutoScrollByItemProps) {
+  const {
+    chart,
+    xAxisData,
+    windowSize = 10,
+    interval = 2000,
+    startIndex = 0,
+    autoPlay = true,
+    enableWheelScroll = true,
+    onWindowChange,
+  } = props;
+  const total = xAxisData?.length ?? 0;
+  if (total <= 0) {
+    return {
+      pause: () => {},
+      resume: () => {},
+      dispose: () => {},
+    };
+  }
+
+  const initialStartIndex = Math.max(
+    0,
+    Math.min(startIndex, Math.max(total - 1, 0)),
+  );
+  const stepPercent = total > 0 ? (1 / total) * 100 : 0;
+  const windowSizePercent = total > 0 ? (windowSize / total) * 100 : 100;
+  const initialStartPercent = total > 0 ? (initialStartIndex / total) * 100 : 0;
+  let start = initialStartPercent;
+  let end = Math.min(initialStartPercent + windowSizePercent, 100);
+
+  // 图表已有 dataZoom 窗口时（组件重渲染重建滚动器）从当前位置继续，
+  // 避免图例点选、坐标轴重算等触发的重渲染把已滚动位置重置回初始窗口
+  const currentZoom = (
+    chart.getOption() as { dataZoom?: Array<{ start?: number; end?: number }> }
+  )?.dataZoom?.[0];
+  if (
+    typeof currentZoom?.start === "number" &&
+    typeof currentZoom?.end === "number"
+  ) {
+    start = currentZoom.start;
+    end = currentZoom.end;
+  }
+
+  const syncDataZoomRange = () => {
+    const option = chart.getOption() as {
+      dataZoom?: Array<Record<string, unknown>>;
+    };
+    const currentDataZoom = option?.dataZoom;
+    if (!currentDataZoom?.length) return;
+    chart.setOption({
+      dataZoom: currentDataZoom.map((dz) => ({
+        ...dz,
+        start,
+        end,
+      })),
+    });
+    onWindowChange?.(start, end);
+  };
+
+  syncDataZoomRange();
+
+  let timer: NodeJS.Timeout | null = null;
+  if (autoPlay) {
+    timer = setInterval(tick, interval);
+  }
+
+  function tick() {
+    start += stepPercent;
+    end += stepPercent;
+
+    if (end > 100) {
+      start = 0;
+      end = windowSizePercent;
+    }
+
+    syncDataZoomRange();
+  }
+
+  if (autoPlay) {
+    chart.getZr().on("mouseover", pause);
+    chart.getZr().on("mouseout", resume);
+  }
+
+  function pause() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  }
+  function resume() {
+    if (autoPlay && !timer) {
+      timer = setInterval(tick, interval);
+    }
+  }
+
+  const chartDom = chart.getDom();
+  const applyWheelDelta = (delta: number) => {
+    if (delta === 0) return;
+    const direction = delta > 0 ? 1 : -1;
+
+    start += direction * stepPercent;
+    end += direction * stepPercent;
+
+    if (start < 0) {
+      start = 0;
+      end = windowSizePercent;
+    }
+    if (end > 100) {
+      end = 100;
+      start = Math.max(0, 100 - windowSizePercent);
+    }
+
+    syncDataZoomRange();
+  };
+
+  function handleWheel(event: Event) {
+    if (!enableWheelScroll) return;
+    const wheelEvent = event as WheelEvent;
+    wheelEvent.preventDefault();
+    applyWheelDelta(wheelEvent.deltaY);
+  }
+
+  function handleZrMouseWheel(params: unknown) {
+    if (!enableWheelScroll) return;
+    const eventLike = (params as { event?: Record<string, unknown> })?.event;
+    const nativeEvent = eventLike?.event as WheelEvent | undefined;
+    const deltaFromNative = nativeEvent?.deltaY;
+    const deltaFromEventLike =
+      (eventLike?.deltaY as number | undefined) ??
+      (eventLike?.zrDelta as number | undefined);
+    const wheelDelta = eventLike?.wheelDelta as number | undefined;
+    const resolvedDelta =
+      deltaFromNative ??
+      deltaFromEventLike ??
+      (typeof wheelDelta === "number" ? -wheelDelta : undefined);
+
+    if (typeof resolvedDelta !== "number") return;
+    nativeEvent?.preventDefault();
+    applyWheelDelta(resolvedDelta);
+  }
+
+  if (enableWheelScroll) {
+    chartDom.addEventListener("wheel", handleWheel, { passive: false });
+    chart.getZr().on("mousewheel", handleZrMouseWheel);
+  }
+
+  const handleWindowResize = () => {
+    chart.resize();
+    syncDataZoomRange();
+  };
+  window.addEventListener("resize", handleWindowResize);
+
+  function dispose() {
+    pause();
+    if (autoPlay) {
+      chart.getZr().off("mouseover", pause);
+      chart.getZr().off("mouseout", resume);
+    }
+    if (enableWheelScroll) {
+      chartDom.removeEventListener("wheel", handleWheel);
+      chart.getZr().off("mousewheel", handleZrMouseWheel);
+    }
+    window.removeEventListener("resize", handleWindowResize);
+  }
+
+  return { pause, resume, dispose };
+}

package/src/components/Chart/_utils/cartesian.ts

@@ -21,6 +21,34 @@ export interface NormalizedScrollConfig {
   wheelModeWhenSliderHidden: "scroll" | "none";
 }
 
+/** dataZoom 当前可见窗口对应的 x 轴索引区间（闭区间） */
+export interface DataZoomIndexWindow {
+  startIndex: number;
+  endIndex: number;
+}
+
+/**
+ * 把 dataZoom 的 start/end 百分比换算为 x 轴索引窗口。
+ * 与本组件族写入 dataZoom 的百分比约定一致（index / total * 100），
+ * 对 echarts 原生交互产生的百分比做外扩取整，边界最多多含一项，不影响坐标轴量级。
+ */
+export const percentWindowToIndexWindow = (
+  startPercent: number,
+  endPercent: number,
+  total: number,
+): DataZoomIndexWindow => {
+  if (total <= 0) return { startIndex: 0, endIndex: 0 };
+  const startIndex = Math.max(
+    0,
+    Math.min(total - 1, Math.floor((startPercent / 100) * total)),
+  );
+  const endIndex = Math.max(
+    startIndex,
+    Math.min(total - 1, Math.ceil((endPercent / 100) * total) - 1),
+  );
+  return { startIndex, endIndex };
+};
+
 export const createDefaultCategoryXAxis = (
   xAxisData?: Array<string>,
 ): ChartOptionType => ({

package/src/components/Chart/chartUtils/chartTooltipFormatter.ts

@@ -22,6 +22,8 @@ export interface ChartTooltipFormatterProps {
   hideMarker?: boolean;
   textStyle?: Record<string, unknown>;
   unit?: string;
+  /** 多系列时按数值从大到小排序展示（大的在上） */
+  sortDescending?: boolean;
 }
 
 const chartTooltipFormatter = (props: ChartTooltipFormatterProps) => {
@@ -31,6 +33,7 @@ const chartTooltipFormatter = (props: ChartTooltipFormatterProps) => {
     hideMarker,
     textStyle = { fontSize: 14, color: "#666", fontWeight: 400 },
     unit,
+    sortDescending,
   } = props;
 
   if (!Array.isArray(params)) {
@@ -77,13 +80,19 @@ const chartTooltipFormatter = (props: ChartTooltipFormatterProps) => {
     `;
   }
 
-  const items = params
+  const sortedParams = sortDescending
+    ? [...params].sort(
+        (a, b) => (Number(b.value) || 0) - (Number(a.value) || 0),
+      )
+    : params;
+
+  const items = sortedParams
     ?.map((item, idx) => {
       const value = item.value ?? "";
 
       return `
       <div style="margin: 0 0 ${
-        idx === params.length - 1 ? "0" : "10px"
+        idx === sortedParams.length - 1 ? "0" : "10px"
       } 0;line-height:1;">
         <div style="margin: 0px 0 0;line-height:1;">
           ${hideMarker ? "" : `${item?.marker}`}

package/src/components/Chart/chartUtils/index.ts

@@ -1,37 +1,53 @@
-import chartTooltipFormatter from "./chartTooltipFormatter";
-import {
-  TooltipParams,
-  ChartTooltipFormatterProps,
-} from "./chartTooltipFormatter";
-import {
-  autoScrollLegend,
-  AutoScrollLegendProps,
-} from "../_utils/autoScrollLegend";
-import { calculateAxisConfig } from "./calculateAxisConfig";
-import {
-  MB_PER_GB,
-  MB_PER_TB,
-  trimAxisNumber,
-  chineseMagnitudeDivisor,
-  formatChineseMagnitudeTick,
-  mbDisplayTier,
-  formatMbAxisTick,
-} from "./yAxisDisplayUnit";
-
-export {
-  chartTooltipFormatter,
-  autoScrollLegend,
-  calculateAxisConfig,
-  MB_PER_GB,
-  MB_PER_TB,
-  trimAxisNumber,
-  chineseMagnitudeDivisor,
-  formatChineseMagnitudeTick,
-  mbDisplayTier,
-  formatMbAxisTick,
-};
-export type {
-  TooltipParams,
-  ChartTooltipFormatterProps,
-  AutoScrollLegendProps,
-};
+import chartTooltipFormatter from "./chartTooltipFormatter";
+import {
+  TooltipParams,
+  ChartTooltipFormatterProps,
+} from "./chartTooltipFormatter";
+import {
+  autoScrollLegend,
+  AutoScrollLegendProps,
+} from "../_utils/autoScrollLegend";
+import { calculateAxisConfig } from "./calculateAxisConfig";
+import {
+  useLegendSelection,
+  LegendSelectionResult,
+} from "./useLegendSelection";
+import {
+  useDataZoomWindow,
+  DataZoomWindowOptions,
+  DataZoomWindowResult,
+} from "./useDataZoomWindow";
+import { DataZoomIndexWindow } from "../_utils/cartesian";
+import {
+  MB_PER_GB,
+  MB_PER_TB,
+  trimAxisNumber,
+  chineseMagnitudeDivisor,
+  formatChineseMagnitudeTick,
+  mbDisplayTier,
+  formatMbAxisTick,
+} from "./yAxisDisplayUnit";
+
+export {
+  chartTooltipFormatter,
+  autoScrollLegend,
+  calculateAxisConfig,
+  useLegendSelection,
+  useDataZoomWindow,
+  MB_PER_GB,
+  MB_PER_TB,
+  trimAxisNumber,
+  chineseMagnitudeDivisor,
+  formatChineseMagnitudeTick,
+  mbDisplayTier,
+  formatMbAxisTick,
+};
+export type {
+  TooltipParams,
+  ChartTooltipFormatterProps,
+  AutoScrollLegendProps,
+  LegendSelectionResult,
+  DataZoomWindowOptions,
+  DataZoomWindowResult,
+  DataZoomIndexWindow,
+};

package/src/components/Chart/chartUtils/useDataZoomWindow.ts

@@ -0,0 +1,61 @@
+import { useCallback, useState } from "react";
+import { DataZoomIndexWindow } from "../_utils/cartesian";
+
+export interface DataZoomWindowOptions {
+  /** 开关：是否按 dataZoom 当前可见窗口重算坐标轴，默认开启 */
+  enabled?: boolean;
+}
+
+export interface DataZoomWindowResult {
+  /** 当前可见窗口；开关关闭或尚未收到回调时为 null（表示全量） */
+  zoomWindow: DataZoomIndexWindow | null;
+  /** 传给 Chart.Bar / Chart.Line 的 onDataZoomWindowChanged；开关关闭时为 undefined（不绑定事件） */
+  onDataZoomWindowChanged?: (window: DataZoomIndexWindow) => void;
+  /** 按当前可见窗口裁剪系列数据，配合 calculateAxisConfig 只对展示部分重算坐标轴 */
+  sliceByZoomWindow: <T>(values?: T[] | null) => T[];
+}
+
+/**
+ * dataZoom 可见窗口管理：配合 Chart.Bar / Chart.Line 的 onDataZoomWindowChanged，
+ * 在调用方按"当前可见窗口"裁剪数据后重算 Y 轴 min/max/interval（calculateAxisConfig），
+ * 实现滑块拖动/滚轮/自动滚动时坐标轴跟随展示部分动态重算；可与 useLegendSelection 叠加。
+ */
+export function useDataZoomWindow(
+  options?: DataZoomWindowOptions,
+): DataZoomWindowResult {
+  const enabled = options?.enabled ?? true;
+  const [zoomWindow, setZoomWindow] = useState<DataZoomIndexWindow | null>(
+    null,
+  );
+
+  const onDataZoomWindowChanged = useCallback((next: DataZoomIndexWindow) => {
+    // 窗口未变化时保持原引用，避免重渲染 → 同步回调 → 再重渲染的循环
+    setZoomWindow((prev) =>
+      prev &&
+      prev.startIndex === next.startIndex &&
+      prev.endIndex === next.endIndex
+        ? prev
+        : next,
+    );
+  }, []);
+
+  const effectiveWindow = enabled ? zoomWindow : null;
+
+  const sliceByZoomWindow = useCallback(
+    <T>(values?: T[] | null): T[] => {
+      if (!values) return [];
+      if (!effectiveWindow) return values;
+      return values.slice(
+        effectiveWindow.startIndex,
+        effectiveWindow.endIndex + 1,
+      );
+    },
+    [effectiveWindow],
+  );
+
+  return {
+    zoomWindow: effectiveWindow,
+    onDataZoomWindowChanged: enabled ? onDataZoomWindowChanged : undefined,
+    sliceByZoomWindow,
+  };
+}

package/src/components/Chart/chartUtils/useLegendSelection.ts

@@ -0,0 +1,35 @@
+import { useCallback, useState } from "react";
+
+export interface LegendSelectionResult {
+  /** 传给图表 legend.selected，保证重渲染(setOption notMerge)后隐藏状态不丢 */
+  legendSelected: Record<string, boolean>;
+  /** 传给图表 onLegendSelectChanged */
+  onLegendSelectChanged: (selected: Record<string, boolean>) => void;
+  /** 判断某系列当前是否可见（未点过的系列默认可见） */
+  isSeriesVisible: (name?: string | null) => boolean;
+}
+
+/**
+ * 图例选中状态管理：配合 Chart.Bar / Chart.Line 的 onLegendSelectChanged，
+ * 在调用方按"当前可见系列"重算 Y 轴 min/max/interval（calculateAxisConfig），
+ * 实现图例隐藏某一项后坐标轴自动重算。
+ */
+export function useLegendSelection(): LegendSelectionResult {
+  const [legendSelected, setLegendSelected] = useState<Record<string, boolean>>(
+    {},
+  );
+
+  const onLegendSelectChanged = useCallback(
+    (selected: Record<string, boolean>) => {
+      setLegendSelected({ ...selected });
+    },
+    [],
+  );
+
+  const isSeriesVisible = useCallback(
+    (name?: string | null) => name == null || legendSelected[name] !== false,
+    [legendSelected],
+  );
+
+  return { legendSelected, onLegendSelectChanged, isSeriesVisible };
+}

package/src/components/FormItem/ItemContainer/index.tsx

@@ -46,6 +46,8 @@ export interface ItemContainerProps extends FormItemProps {
   labelBreak?: boolean;
   hideAdditiona?: boolean;
   hideLabel?: boolean;
+  /** 显隐开关，由 FormItem 消费；在此解构剥离，避免透传到 DOM */
+  visible?: boolean;
 }
 
 const ItemContainer: React.FC<ItemContainerProps> = (props) => {
@@ -84,6 +86,7 @@ const ItemContainer: React.FC<ItemContainerProps> = (props) => {
     labelBreak = false,
     hideAdditiona = false,
     hideLabel = false,
+    visible: _visible,
     ...formItemProps
   } = props;
   const { icon = "material-symbols:help", iconClassName, ...tipsConfig } = tips;
@@ -198,15 +201,9 @@ const ItemContainer: React.FC<ItemContainerProps> = (props) => {
     return null;
   }
 
-  // 页面层 FormItemProps 的展示控制属性（如 visible）不属于 antd Form.Item，
-  // 剥离后再透传，避免被 antd 转发到 DOM 触发 React 非法属性警告。
-  const restFormItemProps = Object.fromEntries(
-    Object.entries(formItemProps).filter(([key]) => key !== "visible")
-  );
-
   return (
     <Form.Item
-      {...restFormItemProps}
+      {...formItemProps}
       name={name}
       rules={[
         {

package/src/components/Modal/index.module.scss

@@ -62,6 +62,7 @@
         align-items: center;
         justify-content: flex-end;
         column-gap: 10px;
+        margin-left: auto; // title 为空时仍保持靠右
       }
     }
   }