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

package/dist/components/LineChartTable.js

@@ -0,0 +1,245 @@
+import { ConfigProvider, Flex, Table, theme } from "antd";
+import { createStyles } from "antd-style";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import * as echarts from "../echarts";
+import ECharts from "./ECharts";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const EMPTY = [];
+
+/**
+ * 折线图与表格的组合，用鼠标指向表格中的数据时会高亮折线图中的对应数据，反之亦然。
+ *
+ * 除了文档列出的属性外，多余的属性会被传递给最外层的 [Flex][1] 组件。
+ *
+ * [1]: https://ant-design.antgroup.com/components/flex-cn#api
+ */
+function LineChartTable(props) {
+  const {
+    xData,
+    xName = "时间",
+    yName = "数值",
+    yUnit,
+    series = [],
+    chartHeight = 175,
+    ...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 echartsRef = useRef(null);
+  const tableRef = useRef(null);
+  const [[hoverSource, hoverXIndex, hoverY], setHover] = useState(EMPTY);
+  let closestYIndex;
+  let closestY;
+  if (hoverXIndex !== undefined && hoverY !== undefined) {
+    let minDist = Infinity;
+    series.forEach((series_0, index) => {
+      const y = series_0.data[hoverXIndex];
+      const dist = Math.abs(y - hoverY);
+      if (dist < minDist) {
+        closestYIndex = index;
+        closestY = y;
+        minDist = dist;
+      }
+    });
+  }
+  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[hoverXIndex ?? 0],
+        status: hoverXIndex !== undefined ? "show" : "hide"
+      }
+    },
+    yAxis: {
+      name: yName + unitString,
+      axisPointer: {
+        value: closestY,
+        status: closestY !== undefined ? "show" : "hide"
+      }
+    },
+    series: series.map(series_1 => echarts.lineSeries(series_1))
+  }), echarts.legend({
+    data: series.map(series_2 => series_2.name),
+    option: {
+      right: 42
+    }
+  }), {
+    axisPointer: [{
+      show: true,
+      triggerOn: "none"
+    }],
+    dataZoom: [{
+      orient: "horizontal",
+      bottom: 8,
+      filterMode: "empty"
+    }]
+  });
+  useEffect(() => {
+    const inst = echartsRef.current?.instance?.getZr();
+    if (!inst) return () => {};
+    const onMousemove = event => {
+      const inst_0 = echartsRef.current?.instance;
+      if (!inst_0) return;
+      const coord = [event.offsetX, event.offsetY];
+      if (inst_0.containPixel("grid", coord)) {
+        const [x, y_0] = inst_0.convertFromPixel("grid", coord);
+        setHover(["chart", x, y_0]);
+      } else {
+        setHover(EMPTY);
+      }
+    };
+    const onGlobalout = () => setHover(EMPTY);
+    inst.on("mousemove", onMousemove);
+    inst.on("globalout", onGlobalout);
+    return () => {
+      inst.off("mousemove", onMousemove);
+      inst.off("globalout", onGlobalout);
+    };
+  }, []);
+  useEffect(() => {
+    const inst_1 = echartsRef.current?.instance;
+    if (!inst_1) return;
+    if (hoverXIndex !== undefined) {
+      inst_1.dispatchAction({
+        type: "highlight",
+        seriesIndex: closestYIndex,
+        dataIndex: hoverXIndex
+      });
+      if (hoverSource === "chart") {
+        // eslint-disable-next-line react-hooks/immutability
+        tableScrollTo(hoverXIndex);
+      }
+    } else {
+      inst_1.dispatchAction({
+        type: "downplay"
+      });
+    }
+  }, [hoverSource, hoverXIndex, closestYIndex]);
+  const tableDataWithoutHover = useMemo(() => {
+    const data = xData.map((x_0, i) => ({
+      key: i,
+      x: x_0
+    }));
+    series.forEach(series_3 => series_3.data.forEach((y_1, i_0) => data[i_0][`y${series_3.name}`] = y_1));
+    return data;
+  }, [xData, series]);
+  const tableData = useMemo(() => {
+    if (hoverSource === "chart" && hoverXIndex !== undefined) {
+      const data_0 = [...tableDataWithoutHover];
+      data_0[hoverXIndex] = {
+        ...data_0[hoverXIndex],
+        hover: closestYIndex ?? true
+      };
+      return data_0;
+    } else {
+      return tableDataWithoutHover;
+    }
+  }, [tableDataWithoutHover, hoverSource, hoverXIndex, closestYIndex]);
+  const tableColumns = useMemo(() => {
+    const columnWidth = `${100 / series.length}%`;
+    return [{
+      key: "x",
+      dataIndex: "x",
+      title: xName,
+      onCell: (data_1, index_0) => ({
+        className: cx({
+          [styles.rowHovered]: data_1.hover !== undefined
+        }),
+        onMouseEnter: () => setHover(["table", index_0]),
+        onMouseLeave: () => setHover(EMPTY)
+      })
+    }, ...series.map((series_4, yIndex) => ({
+      key: `y${series_4.name}`,
+      dataIndex: `y${series_4.name}`,
+      title: series_4.name + unitString,
+      width: columnWidth,
+      onCell: (data_2, xIndex) => ({
+        className: cx(styles.cell, {
+          [styles.rowHovered]: data_2.hover !== undefined,
+          [styles.cellHovered]: data_2.hover === yIndex
+        }),
+        onMouseEnter: () => setHover(["table", xIndex, data_2[`y${series_4.name}`]]),
+        onMouseLeave: () => setHover(EMPTY)
+      })
+    }))];
+  }, [cx, styles, xName, series, unitString]);
+  const tableScrollTo = index_1 => {
+    const table = tableRef.current?.nativeElement;
+    if (table) {
+      const header = table.getElementsByTagName("thead")[0];
+      const row = table.getElementsByTagName("tr")[index_1];
+      table.scrollTo({
+        top: row.offsetTop + row.offsetHeight / 2 - (table.offsetHeight - header.offsetHeight) / 2,
+        behavior: "smooth"
+      });
+    }
+  };
+  return /*#__PURE__*/_jsxs(Flex, {
+    vertical: true,
+    gap: token.marginXS,
+    ...rest,
+    children: [/*#__PURE__*/_jsx(ECharts, {
+      ref: echartsRef,
+      option: option,
+      theme: isDark ? "dark" : undefined,
+      style: {
+        height: chartHeight,
+        flexShrink: 0
+      }
+    }), useMemo(() => /*#__PURE__*/_jsx(Table, {
+      ref: tableRef,
+      dataSource: tableData,
+      columns: tableColumns,
+      size: "small",
+      pagination: false,
+      style: {
+        flexBasis: "100%",
+        overflowY: "auto"
+      },
+      onHeaderRow: () => ({
+        style: {
+          position: "sticky",
+          top: 0,
+          zIndex: 1
+        }
+      })
+    }), [tableData, tableColumns])]
+  });
+}
+export default LineChartTable;
+const useStyles = createStyles(({
+  css,
+  token
+}) => {
+  const rowHovered = css`
+    background: ${token.colorFillQuaternary};
+  `;
+  const cell = css`
+    [class] > &:hover:hover {
+      background: ${token.colorFillSecondary};
+    }
+  `;
+  const cellHovered = css`
+    background: ${token.colorFillSecondary};
+  `;
+  return {
+    rowHovered,
+    cell,
+    cellHovered
+  };
+});

package/dist/components/LinkedLineChart.d.ts

@@ -0,0 +1,45 @@
+import type { LineSeriesOption } from "echarts";
+import { type ReactNode } from "react";
+import type { EChartsProps } from "./ECharts";
+export interface LineChartLinkProviderProps {
+    /** X 轴的数据。*/
+    xData: (string | number)[];
+    /**
+     * X 轴的名称。
+     * @default "时间"
+     */
+    xName?: string;
+    /** 包裹的内容，其中包含需要联动的 {@linkcode LinkedLineChart} 组件。*/
+    children: ReactNode;
+}
+/**
+ * {@linkcode LinkedLineChart} 联动上下文的 Provider。
+ *
+ * 用于包裹需要联动的 {@linkcode LinkedLineChart} 组件。
+ */
+export declare function LineChartLinkProvider(props: LineChartLinkProviderProps): import("react/jsx-runtime").JSX.Element;
+export interface LinkedLineChartProps extends Omit<EChartsProps, "option"> {
+    /**
+     * Y 轴的名称。
+     * @default "数值"
+     */
+    yName?: string;
+    /** Y 轴的单位，默认不显示。*/
+    yUnit?: string;
+    /** 各个曲线的名称、数据和其它选项（颜色、插值模式等）。*/
+    series?: {
+        name: string;
+        data: number[];
+        option?: LineSeriesOption;
+    }[];
+    /**
+     * 是否启用横轴下方的缩放条（`dataZoom`）
+     * @default true
+     */
+    dataZoom?: boolean;
+}
+/**
+ * 折线图组件，支持多条数据曲线和横轴联动。鼠标悬停在图表上时会触发联动高亮。
+ */
+declare function LinkedLineChart(props: LinkedLineChartProps): import("react/jsx-runtime").JSX.Element;
+export default LinkedLineChart;

package/dist/components/LinkedLineChart.js

@@ -0,0 +1,159 @@
+import { c as _c } from "react/compiler-runtime";
+import { ConfigProvider, theme } from "antd";
+import { createContext, useContext } from "react";
+import * as echarts from "../echarts";
+import ConnectedECharts, { EChartsConnector } from "./ConnectedECharts";
+import { jsx as _jsx } from "react/jsx-runtime";
+const LineChartLinkContext = /*#__PURE__*/createContext({
+  xData: [],
+  xName: "时间"
+});
+/**
+ * {@linkcode LinkedLineChart} 联动上下文的 Provider。
+ *
+ * 用于包裹需要联动的 {@linkcode LinkedLineChart} 组件。
+ */
+export function LineChartLinkProvider(props) {
+  const $ = _c(6);
+  const t0 = props.xName ?? "\u65F6\u95F4";
+  let t1;
+  if ($[0] !== props.xData || $[1] !== t0) {
+    t1 = {
+      xData: props.xData,
+      xName: t0
+    };
+    $[0] = props.xData;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== props.children || $[4] !== t1) {
+    t2 = /*#__PURE__*/_jsx(EChartsConnector, {
+      children: /*#__PURE__*/_jsx(LineChartLinkContext.Provider, {
+        value: t1,
+        children: props.children
+      })
+    });
+    $[3] = props.children;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+/**
+ * 折线图组件，支持多条数据曲线和横轴联动。鼠标悬停在图表上时会触发联动高亮。
+ */
+function LinkedLineChart(props) {
+  const $ = _c(10);
+  let rest;
+  let t0;
+  let t1;
+  let t2;
+  let yUnit;
+  if ($[0] !== props) {
+    ({
+      yName: t0,
+      yUnit,
+      series: t1,
+      dataZoom: t2,
+      ...rest
+    } = props);
+    $[0] = props;
+    $[1] = rest;
+    $[2] = t0;
+    $[3] = t1;
+    $[4] = t2;
+    $[5] = yUnit;
+  } else {
+    rest = $[1];
+    t0 = $[2];
+    t1 = $[3];
+    t2 = $[4];
+    yUnit = $[5];
+  }
+  const yName = t0 === undefined ? "\u6570\u503C" : t0;
+  const series = t1 === undefined ? [] : t1;
+  const dataZoom = t2 === undefined ? true : t2;
+  const unitString = yUnit !== undefined ? `（${yUnit}）` : "";
+  const isDark = useContext(ConfigProvider.ConfigContext).theme?.algorithm === theme.darkAlgorithm;
+  const {
+    xData,
+    xName
+  } = useContext(LineChartLinkContext);
+  const option = echarts.buildEChartsOption({
+    backgroundColor: "transparent"
+  }, echarts.useGrid({
+    option: {
+      id: "grid",
+      left: 12,
+      right: 42,
+      bottom: dataZoom ? 40 : 0
+    },
+    xAxis: {
+      name: xName,
+      data: xData,
+      axisPointer: {
+        show: true
+      }
+    },
+    yAxis: {
+      name: yName + unitString,
+      axisPointer: {
+        show: false
+      }
+    },
+    series: series.map(_temp)
+  }), echarts.legend({
+    data: series.map(_temp2),
+    option: {
+      right: 42
+    }
+  }), echarts.tooltip({
+    trigger: "axis",
+    position: _temp3
+  }), {
+    dataZoom: [{
+      show: dataZoom,
+      orient: "horizontal",
+      bottom: 8,
+      filterMode: "empty"
+    }]
+  });
+  const t3 = isDark ? "dark" : undefined;
+  let t4;
+  if ($[6] !== option || $[7] !== rest || $[8] !== t3) {
+    t4 = /*#__PURE__*/_jsx(ConnectedECharts, {
+      option: option,
+      theme: t3,
+      ...rest
+    });
+    $[6] = option;
+    $[7] = rest;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
+}
+function _temp3(t0, _params, _dom, _rect, t1) {
+  const [x] = t0;
+  const {
+    contentSize: t2,
+    viewSize: t3
+  } = t1;
+  const [popupWidth] = t2;
+  const [chartWidth] = t3;
+  return [x + 10 + popupWidth <= chartWidth ? x + 10 : x - 10 - popupWidth, 20];
+}
+function _temp2(series_1) {
+  return series_1.name;
+}
+function _temp(series_0) {
+  return echarts.lineSeries(series_0);
+}
+export default LinkedLineChart;

package/dist/components/QuickDateRangePicker.d.ts

@@ -0,0 +1,30 @@
+import { type ButtonProps, type SpaceProps } from "antd";
+import type { RangePickerProps } from "antd/es/date-picker";
+import { type Dayjs } from "dayjs";
+import type { NoUndefinedRangeValueType } from "rc-picker/lib/PickerInput/RangePicker";
+export interface QuickDateRangePickerProps extends Omit<SpaceProps, "onChange"> {
+    /** 一个二元组 `[start, end]`，表示时间段的开始和结束。*/
+    value?: NoUndefinedRangeValueType<Dayjs>;
+    onChange?: (range: NoUndefinedRangeValueType<Dayjs>) => void;
+    /**
+     * 内部按钮的属性，参见 [Ant Design 的 `Button` API][1]。
+     *
+     * [1]: https://ant-design.antgroup.com/components/button-cn#api
+     */
+    buttonProps?: ButtonProps;
+    /**
+     * 内部日期范围选择器的属性，参见 [Ant Design 的 `DatePicker.RangePicker` API][1]。
+     *
+     * [1]: https://ant-design.antgroup.com/components/date-picker-cn#rangepicker
+     */
+    pickerProps?: RangePickerProps;
+}
+/**
+ * 带有快速选择最近 3/5/7 天功能的日期范围选择器。
+ *
+ * 除了文档中列出的属性外，该组件会将其它属性传递给 [Ant Design 的 `Space` 组件][1]。
+ *
+ * [1]: https://ant-design.antgroup.com/components/space-cn#api
+ */
+declare function QuickDateRangePicker(props: QuickDateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export default QuickDateRangePicker;

package/dist/components/QuickDateRangePicker.js

@@ -0,0 +1,58 @@
+import { Button, DatePicker, Space } from "antd";
+import dayjs from "dayjs";
+import { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const QUICK_PICK_RANGES = [{
+  value: 3,
+  label: "最近 3 天"
+}, {
+  value: 5,
+  label: "最近 5 天"
+}, {
+  value: 7,
+  label: "最近 7 天"
+}];
+
+/**
+ * 带有快速选择最近 3/5/7 天功能的日期范围选择器。
+ *
+ * 除了文档中列出的属性外，该组件会将其它属性传递给 [Ant Design 的 `Space` 组件][1]。
+ *
+ * [1]: https://ant-design.antgroup.com/components/space-cn#api
+ */
+function QuickDateRangePicker(props) {
+  const {
+    value,
+    onChange,
+    buttonProps,
+    pickerProps,
+    ...rest
+  } = props;
+  const [range, setRange] = value === undefined ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useState(undefined) : [value, () => {}];
+  function quickPick(value) {
+    const end = dayjs();
+    const start = end.subtract(value - 1, "day");
+    const newRange = [start, end];
+    setRange(newRange);
+    onChange?.(newRange);
+  }
+  return /*#__PURE__*/_jsxs(Space, {
+    ...rest,
+    children: [QUICK_PICK_RANGES.map((item, index) => /*#__PURE__*/_jsx(Button, {
+      onClick: () => quickPick(item.value),
+      ...buttonProps,
+      children: item.label
+    }, index)), /*#__PURE__*/_jsx(DatePicker.RangePicker, {
+      value: range,
+      allowClear: false,
+      onChange: range => {
+        setRange(range);
+        onChange?.(range); // 由于 allowClear=false，这里 range 不可能为 null
+      },
+      ...pickerProps
+    })]
+  });
+}
+export default QuickDateRangePicker;

package/dist/components/SegmentedButtons.d.ts

@@ -0,0 +1,22 @@
+import { type RadioGroupProps } from "antd";
+/**
+ * 分段单选按钮。
+ *
+ * 该组件是 [Ant Design 的 `Radio.Group optionType="button"`][1] 的别名。
+ *
+ * [1]: https://ant-design.antgroup.com/components/radio-cn#radiogroup
+ */
+declare function SegmentedButtons(props: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export interface TimeUnitSwitcherProps extends Omit<RadioGroupProps, "onChange"> {
+    value?: "day" | "week" | "month";
+    onChange?: (value: "day" | "week" | "month") => void;
+}
+/**
+ * 时间单位（日/周/月）切换按钮。
+ *
+ * 该组件是 {@linkcode SegmentedButtons} 的特化版本。更多属性参见 [`Radio.Group`][1]。
+ *
+ * [1]: https://ant-design.antgroup.com/components/radio-cn#radiogroup
+ */
+export declare function TimeUnitSwitcher(props: TimeUnitSwitcherProps): import("react/jsx-runtime").JSX.Element;
+export default SegmentedButtons;

package/dist/components/SegmentedButtons.js

@@ -0,0 +1,86 @@
+import { c as _c } from "react/compiler-runtime";
+import { Radio } from "antd";
+
+/**
+ * 分段单选按钮。
+ *
+ * 该组件是 [Ant Design 的 `Radio.Group optionType="button"`][1] 的别名。
+ *
+ * [1]: https://ant-design.antgroup.com/components/radio-cn#radiogroup
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function SegmentedButtons(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = /*#__PURE__*/_jsx(Radio.Group, {
+      optionType: "button",
+      ...props
+    });
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+// TODO i18n
+const TIME_UNIT_OPTIONS = [{
+  label: "日",
+  value: "day"
+}, {
+  label: "周",
+  value: "week"
+}, {
+  label: "月",
+  value: "month"
+}];
+/**
+ * 时间单位（日/周/月）切换按钮。
+ *
+ * 该组件是 {@linkcode SegmentedButtons} 的特化版本。更多属性参见 [`Radio.Group`][1]。
+ *
+ * [1]: https://ant-design.antgroup.com/components/radio-cn#radiogroup
+ */
+export function TimeUnitSwitcher(props) {
+  const $ = _c(8);
+  let onChange;
+  let rest;
+  if ($[0] !== props) {
+    ({
+      onChange,
+      ...rest
+    } = props);
+    $[0] = props;
+    $[1] = onChange;
+    $[2] = rest;
+  } else {
+    onChange = $[1];
+    rest = $[2];
+  }
+  let t0;
+  if ($[3] !== onChange) {
+    t0 = e => onChange?.(e.target.value);
+    $[3] = onChange;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  let t1;
+  if ($[5] !== rest || $[6] !== t0) {
+    t1 = /*#__PURE__*/_jsx(Radio.Group, {
+      optionType: "button",
+      options: TIME_UNIT_OPTIONS,
+      onChange: t0,
+      ...rest
+    });
+    $[5] = rest;
+    $[6] = t0;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  return t1;
+}
+export default SegmentedButtons;