@tsingroc/tsingroc-components 5.0.0-alpha.10 → 5.0.0-alpha.12

package/dist/components/LeftAlignedECharts.js

@@ -0,0 +1,270 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, use, useEffect, useEffectEvent, useId, useImperativeHandle, useRef, useState } from "react";
+import { debugAssert } from "../utils/debug";
+// eslint-disable-line @typescript-eslint/no-unused-vars
+import ConnectedECharts from "./ConnectedECharts"; // eslint-disable-line @typescript-eslint/no-unused-vars
+import { jsx as _jsx } from "react/jsx-runtime";
+const LeftAlignContext = /*#__PURE__*/createContext(null);
+
+/**
+ * 为 {@linkcode LeftAlignedECharts} 和
+ * {@linkcode withLeftAlign | withLeftAlign(ECharts)}
+ * 提供对齐上下文。
+ */
+export function EChartsLeftAligner(t0) {
+  const $ = _c(10);
+  const {
+    children
+  } = t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = new Map();
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const [labelsWidthMap, setLabelsWidthMap] = useState(t1);
+  let t2;
+  if ($[1] !== labelsWidthMap) {
+    t2 = Math.max(...labelsWidthMap.values());
+    $[1] = labelsWidthMap;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  let t4;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = (id, size) => setLabelsWidthMap(map => new Map(map).set(id, size));
+    t4 = id_0 => setLabelsWidthMap(map_0 => (map_0 = new Map(map_0), map_0.delete(id_0), map_0));
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t3 = $[3];
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== t2) {
+    t5 = {
+      maxLabelsWidth: t2,
+      register: t3,
+      unregister: t4
+    };
+    $[5] = t2;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== children || $[8] !== t5) {
+    t6 = /*#__PURE__*/_jsx(LeftAlignContext.Provider, {
+      value: t5,
+      children: children
+    });
+    $[7] = children;
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  return t6;
+}
+function findLabelsGroup(element) {
+  if (element.isGroup) {
+    const group = element;
+    if (group.children().every(el => el.type === "text")) {
+      return group;
+    } else {
+      for (const child of group.children()) {
+        const found = findLabelsGroup(child);
+        if (found) {
+          return found;
+        }
+      }
+    }
+  }
+}
+function getLabelsWidth(instance) {
+  const yAxis = instance.getZr().storage.getRoots().find(it => it.__ecComponentInfo.mainType === "yAxis");
+  if (!yAxis) {
+    return undefined;
+  }
+  const labelsGroup = findLabelsGroup(yAxis);
+  if (!labelsGroup) {
+    return undefined;
+  }
+  // 不知道为什么，直接在 labelsGroup 上使用 getBoundingRect 测量到的宽度有时是错误的
+  const childrenWidths = labelsGroup.children().map(it => it.getBoundingRect().width);
+  return Math.max(...childrenWidths);
+}
+
+/**
+ * 为 ECharts 添加与其它 ECharts 纵轴左对齐的能力。
+ *
+ * 使用该组件时必须满足下列限制：
+ *
+ * - 必须包裹在 {@linkcode EChartsLeftAligner} 内，否则会立即抛出错误。
+ * - 图像所在的容器本身必须已经左对齐。
+ * - 图像中必须包含且仅包含一个 grid 坐标系。
+ *   如果图像不包含 grid，那么该组件不会产生任何效果。
+ *   如果图像包含多个 grid，那么该组件只会对齐其中一个 grid，且无法保证是哪一个。
+ * - grid 必须有且仅有一个纵轴，并且在左侧，不满足这一条件的影响同上一条。
+ * - grid 坐标系必须被设置为 `{ containLabel: true }` 或者
+ *   `{ outerBoundsMode: "same", outerBoundsContain: "axisLabel" }`。
+ *   这也是组件库内的 `echarts.grid()` 的默认设置。
+ *   如果你不这么设置，而是使用 `left` 和 `bottom` 来手动对齐轴线，那就没必要使用这个组件，强行使用可能导致布局异常。
+ * - grid 坐标系的 `left` 属性会被该组件覆盖，最终效果总是会使得纵轴标签最宽的坐标系的标签紧贴容器左边缘（即 `left === 0`）。
+ * - 左对齐时原本的过渡动画会被打断。
+ */
+export const withLeftAlign = ECharts => props => {
+  "use memo";
+
+  const $ = _c(27);
+  let onSetOption;
+  let option;
+  let outerRef;
+  let rest;
+  if ($[0] !== props) {
+    ({
+      ref: outerRef,
+      option,
+      onSetOption,
+      ...rest
+    } = props);
+    $[0] = props;
+    $[1] = onSetOption;
+    $[2] = option;
+    $[3] = outerRef;
+    $[4] = rest;
+  } else {
+    onSetOption = $[1];
+    option = $[2];
+    outerRef = $[3];
+    rest = $[4];
+  }
+  const ref = useRef(null);
+  let t0;
+  let t1;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      debugAssert(ref.current, "ref should be connected");
+      return ref.current;
+    };
+    t1 = [];
+    $[5] = t0;
+    $[6] = t1;
+  } else {
+    t0 = $[5];
+    t1 = $[6];
+  }
+  useImperativeHandle(outerRef, t0, t1);
+  const context = use(LeftAlignContext);
+  if (!context) {
+    throw new Error("LeftAlignedECharts or withLeftAlign(ECharts) must be wrapped inside an EChartsLeftAligner!");
+  }
+  const {
+    maxLabelsWidth,
+    register,
+    unregister
+  } = context;
+  const id = useId();
+  const [labelsWidth, setLabelsWidth] = useState();
+  let t2;
+  if ($[7] !== id || $[8] !== register) {
+    t2 = instance => {
+      const labelsWidth_0 = getLabelsWidth(instance);
+      if (labelsWidth_0 !== undefined) {
+        setLabelsWidth(labelsWidth_0);
+        register(id, labelsWidth_0);
+      }
+    };
+    $[7] = id;
+    $[8] = register;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  const reportLayoutChange = useEffectEvent(t2);
+  let t3;
+  if ($[10] !== id || $[11] !== unregister) {
+    t3 = () => unregister(id);
+    $[10] = id;
+    $[11] = unregister;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  const dispose = useEffectEvent(t3);
+  let t4;
+  if ($[13] !== dispose) {
+    t4 = () => dispose;
+    $[13] = dispose;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  let t5;
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = [];
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  useEffect(t4, t5);
+  let t6;
+  if ($[16] !== labelsWidth || $[17] !== maxLabelsWidth || $[18] !== option) {
+    t6 = option === undefined || option.grid === undefined || labelsWidth === undefined || Number.isNaN(labelsWidth) || labelsWidth >= maxLabelsWidth ? option : {
+      ...option,
+      grid: (Array.isArray(option.grid) ? option.grid : [option.grid]).map(it => ({
+        ...it,
+        left: maxLabelsWidth - labelsWidth
+      }))
+    };
+    $[16] = labelsWidth;
+    $[17] = maxLabelsWidth;
+    $[18] = option;
+    $[19] = t6;
+  } else {
+    t6 = $[19];
+  }
+  let t7;
+  if ($[20] !== onSetOption || $[21] !== reportLayoutChange) {
+    t7 = instance_0 => {
+      reportLayoutChange(instance_0);
+      return onSetOption?.(instance_0);
+    };
+    $[20] = onSetOption;
+    $[21] = reportLayoutChange;
+    $[22] = t7;
+  } else {
+    t7 = $[22];
+  }
+  let t8;
+  if ($[23] !== rest || $[24] !== t6 || $[25] !== t7) {
+    t8 = /*#__PURE__*/_jsx(ECharts, {
+      ref: ref,
+      option: t6,
+      onSetOption: t7,
+      ...rest
+    });
+    $[23] = rest;
+    $[24] = t6;
+    $[25] = t7;
+    $[26] = t8;
+  } else {
+    t8 = $[26];
+  }
+  return t8;
+};
+
+/**
+ * 预置了纵轴左对齐、联动和自适应容器尺寸能力的 ECharts 组件。
+ *
+ * @see {@linkcode withLeftAlign}
+ * @see {@linkcode withConnector}
+ * @see {@linkcode withAutoResize}
+ */
+const LeftAlignedECharts = Object.assign(withLeftAlign(ConnectedECharts), {
+  displayName: "LeftAlignedECharts"
+});
+export default LeftAlignedECharts;

package/dist/components/LineChartEditor.d.ts

@@ -0,0 +1,74 @@
+import { type FlexProps } from "antd";
+export interface LineChartEditorProps extends Omit<FlexProps, "children"> {
+    /** X 轴的数据。*/
+    xData: (string | number)[];
+    /** Y 轴的原始数据。*/
+    origData: number[];
+    /**
+     * X 轴的名称。
+     * @default "时间"
+     */
+    xName?: string;
+    /**
+     * Y 轴的名称。
+     * @default "数值"
+     */
+    yName?: string;
+    /** Y 轴的单位，默认不显示。*/
+    yUnit?: string;
+    /**
+     * 原始曲线的名称。
+     * @default "原始曲线"
+     */
+    origName?: string;
+    /**
+     * 修改后曲线的名称。
+     * @default "修正曲线"
+     */
+    newName?: string;
+    /** 原始曲线的颜色，默认使用 ECharts 的默认值。*/
+    origColor?: string;
+    /** 修改后曲线的颜色，默认使用 ECharts 的默认值。*/
+    newColor?: string;
+    /**
+     * 是否平滑曲线显示。
+     *
+     * 如果是 `boolean` 类型，则表示是否开启平滑处理。如果是 `number` 类型（取值范围 0 到 1），
+     * 表示平滑程度，越小表示越接近折线段，反之亦然。设为 `true` 时相当于设为 0.5。
+     *
+     * @default true
+     */
+    smooth?: boolean | number;
+    /**
+     * 折线图的高度。表格会自动占满剩余的高度。
+     * @default 175
+     */
+    chartHeight?: string | number;
+    /**
+     * 控制按钮的位置。
+     * @default "bottom"
+     */
+    controlsLocation?: "top" | "bottom";
+    /**
+     * 保存时是否弹窗要求确认。
+     * @default true
+     */
+    confirmPopup?: boolean;
+    /** 确认提交修改时的回调。*/
+    onConfirm?: (newData: number[], xData: (string | number)[]) => void;
+    /**
+     * 上下调整数值的步长的默认值。用户总是可以在组件内自行调整步长。
+     * @default 0.1
+     */
+    adjustStep?: number;
+}
+/**
+ * 一个折线图编辑器，由折线图、数据表格和确认/撤销按钮三部分组成。
+ * 可以在曲线上使用键盘上下/WS 键，或者在表格中编辑数据。
+ *
+ * 除了文档列出的属性外，多余的属性会被传递给最外层的 [Flex][1] 组件。
+ *
+ * [1]: https://ant-design.antgroup.com/components/flex-cn#api
+ */
+declare function LineChartEditor(props: LineChartEditorProps): import("react/jsx-runtime").JSX.Element;
+export default LineChartEditor;