@tsingroc/tsingroc-components 3.13.4 → 3.14.1

package/src/components/LineChartEditor.tsx

@@ -0,0 +1,558 @@
+import {
+  Button,
+  ConfigProvider,
+  Flex,
+  type FlexProps,
+  Input,
+  message,
+  Modal,
+  Table,
+  theme,
+} from "antd";
+import type { ColumnsType, ColumnType, TableRef } from "antd/es/table";
+import {
+  type KeyboardEvent,
+  type TdHTMLAttributes,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { createStyles } from "antd-style";
+import EChartsReact from "echarts-for-react";
+import type { ElementEvent } from "echarts";
+
+import * as echarts from "../echarts";
+
+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<EChartsReact>(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={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);
+        }}
+      >
+        <EChartsReact
+          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;
+  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 };
+});