@tsingroc/tsingroc-components 3.5.1 → 3.6.0

package/dist/components/LineChartEditor.d.ts

@@ -0,0 +1,40 @@
+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;
+    /**
+     * 原始曲线的名称。
+     * @default "原始曲线"
+     */
+    origName?: string;
+    /**
+     * 修改后曲线的名称。
+     * @default "修正曲线"
+     */
+    newName?: string;
+    /** 用户按下“确认”按钮时的回调。*/
+    onConfirm?: (newData: number[]) => void;
+    /** 上下调整数值的步长。*/
+    adjustStep?: number;
+}
+/**
+ * 一个曲线图编辑器，由曲线图、数据表格和确认/撤销按钮三部分组成。表格中的数据修改会即时反映到曲线图中。
+ *
+ * 除了文档列出的属性外，多余的属性会被传递给最外层的 [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;

package/dist/components/LineChartEditor.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Flex, Input, Table } from "antd";
+import { useMemo, useState } from "react";
+import { createStyles } from "antd-style";
+import EChartsReact from "echarts-for-react";
+import * as echarts from "../echarts";
+/**
+ * 一个曲线图编辑器，由曲线图、数据表格和确认/撤销按钮三部分组成。表格中的数据修改会即时反映到曲线图中。
+ *
+ * 除了文档列出的属性外，多余的属性会被传递给最外层的 [Flex][1] 组件。
+ *
+ * [1]: https://ant-design.antgroup.com/components/flex-cn#api
+ */
+function LineChartEditor(props) {
+    const { xData, origData, xName = "时间", yName = "数值", origName = "原始曲线", newName = "修正曲线", onConfirm, adjustStep, ...rest } = props;
+    const { styles, theme: token } = useStyles();
+    const [newData, setNewData] = useState(origData);
+    const option = echarts.buildEChartsOption({}, echarts.useGrid({
+        xAxis: {
+            name: xName,
+            data: xData,
+        },
+        yAxis: {
+            name: yName,
+        },
+        series: [
+            echarts.lineSeries({
+                name: origName,
+                data: origData,
+                option: {
+                    lineStyle: { type: "dashed" },
+                },
+            }),
+            echarts.lineSeries({
+                name: newName,
+                data: newData,
+            }),
+        ],
+    }), echarts.tooltip({ trigger: "axis" }));
+    const tableColumns = [
+        {
+            key: "x",
+            dataIndex: "x",
+            title: xName,
+        },
+        {
+            key: "orig",
+            dataIndex: "orig",
+            title: origName,
+            width: "50%",
+        },
+        {
+            key: "new",
+            dataIndex: "new",
+            title: newName,
+            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,
+                },
+            }),
+        },
+    ];
+    const tableData = useMemo(() => xData.map((x, i) => ({
+        key: i,
+        x,
+        orig: origData[i],
+        new: newData[i],
+    })), [xData, origData, newData]);
+    return (_jsxs(Flex, { vertical: true, gap: token.marginXS, ...rest, children: [_jsx(EChartsReact, { option: option, notMerge: true }), _jsx(Table, { columns: tableColumns, dataSource: tableData, size: "small", pagination: false, style: { flexBasis: "100%", overflowY: "auto" }, components: { body: { cell: EditorCell } }, onRow: (data) => {
+                    const modified = data.orig != data.new;
+                    return {
+                        className: styles.editableRow,
+                        style: {
+                            color: modified ? token.colorError : undefined,
+                            background: modified ? token.colorErrorBg : undefined,
+                        },
+                    };
+                } }), _jsxs(Flex, { gap: token.marginXXS, children: [_jsx("div", { style: { flexBasis: "100%" } }), _jsx(Button, { type: "primary", onClick: () => onConfirm?.(newData), children: "\u4FDD\u5B58" }), _jsx(Button, { danger: true, onClick: () => setNewData(origData), children: "\u91CD\u7F6E" })] })] }));
+}
+export default LineChartEditor;
+function EditorCell({ value, onChange, step, ...props }) {
+    if (value === undefined) {
+        return _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 (_jsx("td", { ...props, style: { paddingBlock: 0 }, children: editing ? (_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) })) : (_jsx("div", { className: styles.editableWrapper, onClick: () => setEditing(true), children: value })) }));
+}
+const useStyles = createStyles(({ css, 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 editableRow = css `
+    &:hover .${editableWrapper} {
+      border-color: ${token.colorBorder};
+    }
+  `;
+    return { editableRow, editableWrapper };
+});
+//# sourceMappingURL=LineChartEditor.js.map

package/dist/components/LineChartEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChartEditor.js","sourceRoot":"","sources":["../../src/components/LineChartEditor.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { default as CircularProgress, type CircularProgressProps, } from "./comp
 export { default as Header, type HeaderProps } from "./components/Header";
 export { default as ImageBackground, type ImageBackgroundProps, } from "./components/ImageBackground";
 export { default as IndicatorLight, type IndicatorLightProps, } from "./components/IndicatorLight";
+export { default as LineChartEditor, type LineChartEditorProps, } from "./components/LineChartEditor";
 export { default as QuickDateRangePicker, type QuickDateRangePickerProps, } from "./components/QuickDateRangePicker";
 export { default as SegmentedButtons, TimeUnitSwitcher, type TimeUnitSwitcherProps, } from "./components/SegmentedButtons";
 export { default as Sidebar, type SidebarProps } from "./components/Sidebar";

package/dist/index.js

@@ -4,6 +4,7 @@ export { default as CircularProgress, } from "./components/CircularProgress";
 export { default as Header } from "./components/Header";
 export { default as ImageBackground, } from "./components/ImageBackground";
 export { default as IndicatorLight, } from "./components/IndicatorLight";
+export { default as LineChartEditor, } from "./components/LineChartEditor";
 export { default as QuickDateRangePicker, } from "./components/QuickDateRangePicker";
 export { default as SegmentedButtons, TimeUnitSwitcher, } from "./components/SegmentedButtons";
 export { default as Sidebar } from "./components/Sidebar";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAEZ,SAAS,EAET,YAAY,EAEZ,OAAO,GACR,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,uBAAuB,CAAC;AAEhF,OAAO,EACL,OAAO,IAAI,gBAAgB,GAE5B,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAoB,MAAM,qBAAqB,CAAC;AAE1E,OAAO,EACL,OAAO,IAAI,eAAe,GAE3B,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EACL,OAAO,IAAI,cAAc,GAE1B,MAAM,6BAA6B,CAAC;AAErC,OAAO,EACL,OAAO,IAAI,oBAAoB,GAEhC,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EACL,OAAO,IAAI,gBAAgB,EAC3B,gBAAgB,GAEjB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAqB,MAAM,sBAAsB,CAAC;AAE7E,OAAO,EACL,OAAO,IAAI,kBAAkB,GAE9B,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EACL,OAAO,IAAI,aAAa,GAEzB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EACL,OAAO,IAAI,UAAU,GAEtB,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAEZ,SAAS,EAET,YAAY,EAEZ,OAAO,GACR,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,uBAAuB,CAAC;AAEhF,OAAO,EACL,OAAO,IAAI,gBAAgB,GAE5B,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAoB,MAAM,qBAAqB,CAAC;AAE1E,OAAO,EACL,OAAO,IAAI,eAAe,GAE3B,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EACL,OAAO,IAAI,cAAc,GAE1B,MAAM,6BAA6B,CAAC;AAErC,OAAO,EACL,OAAO,IAAI,eAAe,GAE3B,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EACL,OAAO,IAAI,oBAAoB,GAEhC,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EACL,OAAO,IAAI,gBAAgB,EAC3B,gBAAgB,GAEjB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAqB,MAAM,sBAAsB,CAAC;AAE7E,OAAO,EACL,OAAO,IAAI,kBAAkB,GAE9B,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EACL,OAAO,IAAI,aAAa,GAEzB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EACL,OAAO,IAAI,UAAU,GAEtB,MAAM,yBAAyB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsingroc/tsingroc-components",
-  "version": "3.5.1",
+  "version": "3.6.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",