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

package/dist/components/LineChartEditor.js

@@ -0,0 +1,458 @@
+import { Button, ConfigProvider, Flex, Input, Modal, Table, message, theme } from "antd";
+import { createStyles } from "antd-style";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import * as echarts from "../echarts";
+import ECharts from "./ECharts";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * 一个折线图编辑器，由折线图、数据表格和确认/撤销按钮三部分组成。
+ * 可以在曲线上使用键盘上下/WS 键，或者在表格中编辑数据。
+ *
+ * 除了文档列出的属性外，多余的属性会被传递给最外层的 [Flex][1] 组件。
+ *
+ * [1]: https://ant-design.antgroup.com/components/flex-cn#api
+ */
+function LineChartEditor(props) {
+  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(null);
+  const tableRef = useRef(null);
+  const [chartFocused, setChartFocused] = useState(false);
+  const [hoverIndex, setHoverIndex] = useState();
+  const [selectedIndex, setSelectedIndex] = useState();
+  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?.instance?.getZr();
+    if (!inst) return () => {};
+    const onMousemove = event => {
+      const inst = echartsRef.current?.instance;
+      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?.instance;
+    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 => {
+    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 = useMemo(() => xData.map((x, i) => ({
+    key: i,
+    x,
+    orig: origData[i],
+    new: newData[i]
+  })), [xData, origData, newData]);
+  const tableColumns = useMemo(() => [{
+    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, index) => ({
+      value: data.new,
+      onChange: value => {
+        setNewData(prev => {
+          const next = [...prev];
+          next[index] = value;
+          return next;
+        });
+      },
+      step: adjustStep
+    }),
+    onHeaderCell: () => ({
+      style: {
+        paddingInlineStart: token.paddingXS + token.paddingSM
+      }
+    })
+  }], [xName, origName, newName, adjustStep, unitString, token]);
+  const onRow = useCallback((data, index) => {
+    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 => {
+    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: /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs("p", {
+            children: ["\u60A8\u4FEE\u6539\u4E86\u4EE5\u4E0B", xName, "\u7684", yName, "\uFF1A"]
+          }), /*#__PURE__*/_jsx(Table, {
+            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 = /*#__PURE__*/_jsxs(Flex, {
+    gap: token.marginXXS,
+    align: "baseline",
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        flexShrink: 0
+      },
+      children: "\u8C03\u8282\u6B65\u957F\uFF1A"
+    }), /*#__PURE__*/_jsx(Input, {
+      type: "number",
+      step: defaultAdjustStep / 10,
+      value: adjustStep,
+      onChange: event => setAdjustStep(event.currentTarget.valueAsNumber),
+      style: {
+        width: 120
+      }
+    }), /*#__PURE__*/_jsx("div", {
+      style: {
+        flexBasis: "100%"
+      }
+    }), /*#__PURE__*/_jsx(Button, {
+      type: "primary",
+      onClick: () => void onSave(),
+      children: "\u4FDD\u5B58"
+    }), /*#__PURE__*/_jsx(Button, {
+      danger: true,
+      onClick: () => setNewData(origData),
+      children: "\u91CD\u7F6E"
+    })]
+  });
+  return /*#__PURE__*/_jsxs(Flex, {
+    vertical: true,
+    gap: token.marginXS,
+    ...rest,
+    children: [modalContextHolder, messageContextHolder, controlsLocation === "top" ? controls : "", /*#__PURE__*/_jsx("div", {
+      tabIndex: 0,
+      style: {
+        flexShrink: 0,
+        outline: "none"
+      },
+      onKeyDown: onKeyDown,
+      onBlur: () => {
+        setChartFocused(false);
+        setSelectedIndex(undefined);
+      },
+      children: /*#__PURE__*/_jsx(ECharts, {
+        ref: echartsRef,
+        option: option,
+        theme: isDark ? "dark" : undefined,
+        style: {
+          height: chartHeight
+        }
+      })
+    }), useMemo(() => /*#__PURE__*/_jsx(Table, {
+      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 : ""]
+  });
+}
+export default LineChartEditor;
+function EditorCell({
+  value,
+  onChange,
+  step,
+  ...props
+}) {
+  if (value === undefined) {
+    return /*#__PURE__*/_jsx("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 /*#__PURE__*/_jsx("td", {
+    ...props,
+    style: {
+      paddingBlock: 0
+    },
+    children: editing ? /*#__PURE__*/_jsx(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)
+    }) : /*#__PURE__*/_jsx("div", {
+      className: styles.editableWrapper,
+      onClick: () => setEditing(true),
+      children: value
+    })
+  });
+}
+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
+  };
+});

package/dist/components/LineChartTable.d.ts

@@ -0,0 +1,38 @@
+import { type FlexProps } from "antd";
+import type { LineSeriesOption } from "echarts";
+export interface LineChartTableProps extends Omit<FlexProps, "children"> {
+    /** X 轴的数据。*/
+    xData: (string | number)[];
+    /**
+     * X 轴的名称。
+     * @default "时间"
+     */
+    xName?: string;
+    /**
+     * Y 轴的名称。
+     * @default "数值"
+     */
+    yName?: string;
+    /** Y 轴的单位，默认不显示。*/
+    yUnit?: string;
+    /** 各个曲线的名称、数据和其它选项（颜色、插值模式等）。*/
+    series?: {
+        name: string;
+        data: number[];
+        option?: LineSeriesOption;
+    }[];
+    /**
+     * 折线图的高度。表格会自动占满剩余的高度。
+     * @default 175
+     */
+    chartHeight?: string | number;
+}
+/**
+ * 折线图与表格的组合，用鼠标指向表格中的数据时会高亮折线图中的对应数据，反之亦然。
+ *
+ * 除了文档列出的属性外，多余的属性会被传递给最外层的 [Flex][1] 组件。
+ *
+ * [1]: https://ant-design.antgroup.com/components/flex-cn#api
+ */
+declare function LineChartTable(props: LineChartTableProps): import("react/jsx-runtime").JSX.Element;
+export default LineChartTable;