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

package/src/components/LineChartEditor.tsx

@@ -1,558 +0,0 @@
-import {
-  Button,
-  ConfigProvider,
-  Flex,
-  Input,
-  Modal,
-  Table,
-  message,
-  theme,
-  type FlexProps,
-} from "antd";
-import { createStyles } from "antd-style";
-import type { ColumnType, ColumnsType, TableRef } from "antd/es/table";
-import type { ElementEvent } from "echarts";
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type KeyboardEvent,
-  type TdHTMLAttributes,
-} from "react";
-
-import * as echarts from "../echarts";
-import StrictECharts from "./StrictECharts";
-
-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;
-}
-
-interface DataItem {
-  key: number;
-  x: string | number;
-  orig: number;
-  new: number;
-}
-
-/**
- * 一个折线图编辑器，由折线图、数据表格和确认/撤销按钮三部分组成。
- * 可以在曲线上使用键盘上下/WS 键，或者在表格中编辑数据。
- *
- * 除了文档列出的属性外，多余的属性会被传递给最外层的 [Flex][1] 组件。
- *
- * [1]: https://ant-design.antgroup.com/components/flex-cn#api
- */
-function LineChartEditor(props: LineChartEditorProps) {
-  const {
-    xData,
-    origData,
-    xName = "时间",
-    yName = "数值",
-    yUnit,
-    origName = "原始曲线",
-    newName = "修正曲线",
-    origColor,
-    newColor,
-    smooth = true,
-    chartHeight = 175,
-    controlsLocation = "bottom",
-    confirmPopup = true,
-    onConfirm,
-    adjustStep: defaultAdjustStep = 0.1,
-    ...rest
-  } = props;
-  // TODO i18n
-  const unitString = yUnit !== undefined ? `（${yUnit}）` : "";
-  const { cx, styles, theme: token } = useStyles();
-  const isDark =
-    useContext(ConfigProvider.ConfigContext).theme?.algorithm ===
-    theme.darkAlgorithm;
-  const [modal, modalContextHolder] = Modal.useModal();
-  const [messageApi, messageContextHolder] = message.useMessage();
-  const [newData, setNewData] = useState(origData);
-  const echartsRef = useRef<StrictECharts>(null);
-  const tableRef = useRef<TableRef>(null);
-  const [chartFocused, setChartFocused] = useState<boolean>(false);
-  const [hoverIndex, setHoverIndex] = useState<number>();
-  const [selectedIndex, setSelectedIndex] = useState<number>();
-  const highlightIndex = selectedIndex ?? hoverIndex;
-  const [adjustStep, setAdjustStep] = useState(defaultAdjustStep);
-  const option = echarts.buildEChartsOption(
-    {
-      backgroundColor: "transparent",
-    },
-    echarts.useGrid({
-      option: {
-        id: "grid",
-        left: 12,
-        right: 42,
-        bottom: 40,
-      },
-      xAxis: {
-        name: xName,
-        data: xData,
-        axisPointer: { value: xData[highlightIndex ?? 0] },
-      },
-      yAxis: {
-        name: yName + unitString,
-        axisPointer: { value: newData[highlightIndex ?? 0] },
-      },
-      series: [
-        echarts.lineSeries({
-          name: origName,
-          data: origData,
-          option: {
-            color: origColor,
-            lineStyle: { type: "dashed" },
-            smooth,
-          },
-        }),
-        echarts.lineSeries({
-          name: newName,
-          data: newData,
-          option: {
-            color: newColor,
-            smooth,
-          },
-        }),
-      ],
-    }),
-    echarts.legend({
-      data: [origName, newName],
-      option: { right: 42 },
-    }),
-    {
-      axisPointer: [
-        {
-          show: true,
-          status: highlightIndex !== undefined ? "show" : "hide",
-          triggerOn: "none",
-        },
-      ],
-      dataZoom: [
-        {
-          orient: "horizontal",
-          bottom: 8,
-          filterMode: "empty",
-        },
-      ],
-      graphic: [
-        {
-          type: "text",
-          ignore: highlightIndex === undefined,
-          left: "center",
-          top: 0,
-          style: {
-            // TODO i18n
-            text: !chartFocused
-              ? ""
-              : selectedIndex !== undefined
-                ? "可使用键盘 ↑/↓/W/S 键调节选中数据，使用 +/- 键修改调节步长"
-                : hoverIndex !== undefined
-                  ? "点击可选中当前数据点"
-                  : "",
-            fill: token.colorTextLabel,
-          },
-        },
-      ],
-    },
-  );
-  useEffect(() => {
-    const inst = echartsRef.current?.getEchartsInstance().getZr();
-    if (!inst) return () => {};
-    const onMousemove = (event: ElementEvent) => {
-      const inst = echartsRef.current?.getEchartsInstance();
-      if (!inst) return;
-      const coord = [event.offsetX, event.offsetY];
-      if (inst.containPixel("grid", coord)) {
-        const [index] = inst.convertFromPixel("grid", coord);
-        setChartFocused(true);
-        setHoverIndex(index);
-      } else {
-        setHoverIndex(undefined);
-      }
-    };
-    const onGlobalout = () => setHoverIndex(undefined);
-    const onClick = () =>
-      setHoverIndex((hoverIndex) => {
-        setSelectedIndex(hoverIndex);
-        return hoverIndex;
-      });
-    inst.on("mousemove", onMousemove);
-    inst.on("globalout", onGlobalout);
-    inst.on("click", onClick);
-    return () => {
-      inst.off("mousemove", onMousemove);
-      inst.off("globalout", onGlobalout);
-      inst.off("click", onClick);
-    };
-  }, []);
-  useEffect(() => {
-    const inst = echartsRef.current?.getEchartsInstance();
-    if (!inst) return;
-    if (highlightIndex !== undefined) {
-      inst.dispatchAction({
-        type: "highlight",
-        seriesIndex: 1,
-        dataIndex: highlightIndex,
-      });
-    } else {
-      inst.dispatchAction({
-        type: "downplay",
-        seriesIndex: 1,
-      });
-    }
-    if (selectedIndex !== undefined) {
-      tableScrollTo(selectedIndex);
-    }
-  }, [highlightIndex, selectedIndex]);
-  const onKeyDown = (event: KeyboardEvent) => {
-    if (selectedIndex === undefined) return;
-    switch (event.code) {
-      case "ArrowUp":
-      case "KeyW":
-        setNewData((prev) => {
-          const next = [...prev];
-          next[selectedIndex] += adjustStep;
-          return next;
-        });
-        break;
-      case "ArrowDown":
-      case "KeyS":
-        setNewData((prev) => {
-          const next = [...prev];
-          next[selectedIndex] -= adjustStep;
-          return next;
-        });
-        break;
-      case "Equal":
-        setAdjustStep((prev) => prev + defaultAdjustStep / 10);
-        break;
-      case "Minus":
-        setAdjustStep((prev) => prev - defaultAdjustStep / 10);
-        break;
-      case "Escape":
-      case "Enter":
-        setSelectedIndex(undefined);
-        break;
-      default:
-        return;
-    }
-    event.preventDefault();
-  };
-  const tableData: DataItem[] = useMemo(
-    () =>
-      xData.map((x, i) => ({
-        key: i,
-        x,
-        orig: origData[i],
-        new: newData[i],
-      })),
-    [xData, origData, newData],
-  );
-  const tableColumns = useMemo(
-    (): ColumnsType<DataItem> => [
-      {
-        key: "x",
-        dataIndex: "x",
-        title: xName,
-      },
-      {
-        key: "orig",
-        dataIndex: "orig",
-        title: origName + unitString,
-        width: "50%",
-      },
-      {
-        key: "new",
-        dataIndex: "new",
-        title: newName + unitString,
-        width: "50%",
-        onCell: ((data: DataItem, index: number): EditorCellProps => ({
-          value: data.new,
-          onChange: (value) => {
-            setNewData((prev) => {
-              const next = [...prev];
-              next[index] = value;
-              return next;
-            });
-          },
-          step: adjustStep,
-        })) as unknown as ColumnType<DataItem>["onCell"],
-        onHeaderCell: () => ({
-          style: {
-            paddingInlineStart: token.paddingXS + token.paddingSM,
-          },
-        }),
-      },
-    ],
-    [xName, origName, newName, adjustStep, unitString, token],
-  );
-  const onRow = useCallback(
-    (data: DataItem, index?: number): TdHTMLAttributes<HTMLTableRowElement> => {
-      if (index === undefined) return {};
-      const modified = data.orig != data.new;
-      const selected = index === selectedIndex;
-      return {
-        className: cx(styles.editableRow, {
-          [styles.modified]: modified,
-          [styles.selected]: selected,
-        }),
-        onMouseEnter: () => {
-          setChartFocused(false);
-          setHoverIndex(index);
-        },
-        onMouseLeave: () => setHoverIndex(undefined),
-      };
-    },
-    [cx, styles, selectedIndex],
-  );
-  const tableScrollTo = (index: number) => {
-    const table = tableRef.current?.nativeElement;
-    if (table) {
-      const header = table.getElementsByTagName("thead")[0];
-      const row = table.getElementsByTagName("tr")[index];
-      table.scrollTo({
-        top:
-          row.offsetTop +
-          row.offsetHeight / 2 -
-          (table.offsetHeight - header.offsetHeight) / 2,
-        behavior: "smooth",
-      });
-    }
-  };
-  const onSave = async () => {
-    const modifiedData = tableData.filter((item) => item.new !== item.orig);
-    if (modifiedData.length === 0) {
-      messageApi.warning("您尚未做任何修改！");
-      return;
-    }
-    let confirmed = true;
-    if (confirmPopup) {
-      // TODO i18n
-      confirmed = await modal.confirm({
-        title: "确定要保存修改吗？",
-        width: "fit-content",
-        content: (
-          <>
-            <p>
-              您修改了以下{xName}的{yName}：
-            </p>
-            <Table<DataItem>
-              ref={tableRef}
-              dataSource={modifiedData}
-              columns={tableColumns.map((col) => ({
-                ...col,
-                onCell: undefined,
-                onHeaderCell: undefined,
-              }))}
-              size="small"
-              pagination={false}
-              style={{
-                marginTop: token.marginSM,
-                maxHeight: "50vh",
-                overflowY: "auto",
-              }}
-            />
-          </>
-        ),
-      });
-    }
-    if (confirmed) {
-      onConfirm?.(newData, xData);
-    }
-  };
-  const controls = (
-    <Flex gap={token.marginXXS} align="baseline">
-      {/* TODO i18n */}
-      <div style={{ flexShrink: 0 }}>调节步长：</div>
-      <Input
-        type="number"
-        step={defaultAdjustStep / 10}
-        value={adjustStep}
-        onChange={(event) => setAdjustStep(event.currentTarget.valueAsNumber)}
-        style={{ width: 120 }}
-      />
-      <div style={{ flexBasis: "100%" }}></div>
-      <Button type="primary" onClick={() => void onSave()}>
-        保存
-      </Button>
-      <Button danger onClick={() => setNewData(origData)}>
-        重置
-      </Button>
-    </Flex>
-  );
-  return (
-    <Flex vertical gap={token.marginXS} {...rest}>
-      {modalContextHolder}
-      {messageContextHolder}
-      {controlsLocation === "top" ? controls : ""}
-      <div
-        tabIndex={0}
-        style={{ flexShrink: 0, outline: "none" }}
-        onKeyDown={onKeyDown}
-        onBlur={() => {
-          setChartFocused(false);
-          setSelectedIndex(undefined);
-        }}
-      >
-        <StrictECharts
-          ref={echartsRef}
-          option={option}
-          theme={isDark ? "dark" : undefined}
-          style={{ height: chartHeight }}
-        />
-      </div>
-      {useMemo(
-        () => (
-          <Table<DataItem>
-            ref={tableRef}
-            dataSource={tableData}
-            columns={tableColumns}
-            size="small"
-            pagination={false}
-            style={{ flexBasis: "100%", overflowY: "auto" }}
-            components={{ body: { cell: EditorCell } }}
-            onHeaderRow={() => ({
-              style: { position: "sticky", top: 0, zIndex: 1 },
-            })}
-            onRow={onRow}
-          />
-        ),
-        [tableData, tableColumns, onRow],
-      )}
-      {controlsLocation === "bottom" ? controls : ""}
-    </Flex>
-  );
-}
-
-export default LineChartEditor;
-
-interface EditorCellProps {
-  value: number | undefined;
-  onChange: (value: number) => void;
-  step?: number;
-}
-
-function EditorCell({ value, onChange, step, ...props }: EditorCellProps) {
-  if (value === undefined) {
-    return <td {...props} />;
-  }
-  /* eslint-disable react-hooks/rules-of-hooks */
-  const { styles } = useStyles();
-  const [editing, setEditing] = useState(false);
-  /* eslint-enable react-hooks/rules-of-hooks */
-  return (
-    <td {...props} style={{ paddingBlock: 0 }}>
-      {editing ? (
-        <Input
-          ref={(input) => input?.focus()}
-          type="number"
-          step={step}
-          style={{ margin: 0 }}
-          defaultValue={value}
-          onChange={(event) => onChange(event.currentTarget.valueAsNumber)}
-          onPressEnter={() => setEditing(false)}
-          onBlur={() => setEditing(false)}
-        />
-      ) : (
-        <div
-          className={styles.editableWrapper}
-          onClick={() => setEditing(true)}
-        >
-          {value}
-        </div>
-      )}
-    </td>
-  );
-}
-
-const useStyles = createStyles(({ css, cx, token }) => {
-  const editableWrapper = css`
-    padding: ${token.paddingXXS}px ${token.paddingSM - 1 + 24}px
-      ${token.paddingXXS}px ${token.paddingSM - 1}px;
-    cursor: text;
-    border-radius: ${token.borderRadius}px;
-    border: 1px solid transparent;
-    transition: border ${token.motionDurationFast};
-  `;
-  const modified = css`
-    color: ${token.colorSuccess};
-    background: ${token.colorSuccessBg};
-  `;
-  const selected = css`
-    background: ${token.colorFillTertiary};
-  `;
-  const editableRow = css`
-    &:hover:not(.${cx(selected)}) {
-      background: ${token.colorFillQuaternary};
-    }
-    &:hover .${cx(editableWrapper)} {
-      border-color: ${token.colorBorder};
-    }
-  `;
-  return { editableRow, editableWrapper, modified, selected };
-});