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

package/src/components/LineChartTable.tsx

@@ -1,286 +0,0 @@
-import { ConfigProvider, Flex, Table, theme, type FlexProps } from "antd";
-import { createStyles } from "antd-style";
-import type { ColumnType, ColumnsType, TableRef } from "antd/es/table";
-import type { ElementEvent, LineSeriesOption } from "echarts";
-import {
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type TdHTMLAttributes,
-} from "react";
-
-import * as echarts from "../echarts";
-import StrictECharts from "./StrictECharts";
-
-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;
-}
-
-interface DataItem {
-  key: number;
-  x: string | number;
-  [key: `y${string}`]: number;
-  hover?: true | number;
-}
-
-const EMPTY: [] = [];
-
-/**
- * 折线图与表格的组合，用鼠标指向表格中的数据时会高亮折线图中的对应数据，反之亦然。
- *
- * 除了文档列出的属性外，多余的属性会被传递给最外层的 [Flex][1] 组件。
- *
- * [1]: https://ant-design.antgroup.com/components/flex-cn#api
- */
-function LineChartTable(props: LineChartTableProps) {
-  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<StrictECharts>(null);
-  const tableRef = useRef<TableRef>(null);
-  type HoverSource = "chart" | "table";
-  const [[hoverSource, hoverXIndex, hoverY], setHover] = useState<
-    [] | [HoverSource, number] | [HoverSource, number, number]
-  >(EMPTY);
-  let closestYIndex: number | undefined;
-  let closestY: number | undefined;
-  if (hoverXIndex !== undefined && hoverY !== undefined) {
-    let minDist = Infinity;
-    series.forEach((series, index) => {
-      const y = series.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) => echarts.lineSeries(series)),
-    }),
-    echarts.legend({
-      data: series.map((series) => series.name),
-      option: { right: 42 },
-    }),
-    {
-      axisPointer: [{ show: true, triggerOn: "none" }],
-      dataZoom: [{ orient: "horizontal", bottom: 8, filterMode: "empty" }],
-    },
-  );
-  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 [x, y] = inst.convertFromPixel("grid", coord);
-        setHover(["chart", x, y]);
-      } 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 = echartsRef.current?.getEchartsInstance();
-    if (!inst) return;
-    if (hoverXIndex !== undefined) {
-      inst.dispatchAction({
-        type: "highlight",
-        seriesIndex: closestYIndex,
-        dataIndex: hoverXIndex,
-      });
-      if (hoverSource === "chart") {
-        tableScrollTo(hoverXIndex);
-      }
-    } else {
-      inst.dispatchAction({
-        type: "downplay",
-      });
-    }
-  }, [hoverSource, hoverXIndex, closestYIndex]);
-  const tableDataWithoutHover: DataItem[] = useMemo(() => {
-    const data = xData.map((x, i) => ({ key: i, x }) as DataItem);
-    series.forEach((series) =>
-      series.data.forEach((y, i) => (data[i][`y${series.name}`] = y)),
-    );
-    return data;
-  }, [xData, series]);
-  const tableData: DataItem[] = useMemo(() => {
-    if (hoverSource === "chart" && hoverXIndex !== undefined) {
-      const data = [...tableDataWithoutHover];
-      data[hoverXIndex] = {
-        ...data[hoverXIndex],
-        hover: closestYIndex ?? true,
-      };
-      return data;
-    } else {
-      return tableDataWithoutHover;
-    }
-  }, [tableDataWithoutHover, hoverSource, hoverXIndex, closestYIndex]);
-  const tableColumns = useMemo((): ColumnsType<DataItem> => {
-    const columnWidth = `${100 / series.length}%`;
-    return [
-      {
-        key: "x",
-        dataIndex: "x",
-        title: xName,
-        onCell: (
-          data: DataItem,
-          index?: number,
-        ): TdHTMLAttributes<HTMLTableCellElement> => ({
-          className: cx({
-            [styles.rowHovered]: data.hover !== undefined,
-          }),
-          onMouseEnter: () => setHover(["table", index as number]),
-          onMouseLeave: () => setHover(EMPTY),
-        }),
-      },
-      ...series.map(
-        (series, yIndex): ColumnType<DataItem> => ({
-          key: `y${series.name}`,
-          dataIndex: `y${series.name}`,
-          title: series.name + unitString,
-          width: columnWidth,
-          onCell: (
-            data: DataItem,
-            xIndex?: number,
-          ): TdHTMLAttributes<HTMLTableCellElement> => ({
-            className: cx(styles.cell, {
-              [styles.rowHovered]: data.hover !== undefined,
-              [styles.cellHovered]: data.hover === yIndex,
-            }),
-            onMouseEnter: () =>
-              setHover(["table", xIndex as number, data[`y${series.name}`]]),
-            onMouseLeave: () => setHover(EMPTY),
-          }),
-        }),
-      ),
-    ];
-  }, [cx, styles, xName, series, unitString]);
-  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",
-      });
-    }
-  };
-  return (
-    <Flex vertical gap={token.marginXS} {...rest}>
-      <StrictECharts
-        ref={echartsRef}
-        option={option}
-        theme={isDark ? "dark" : undefined}
-        style={{ height: chartHeight, flexShrink: 0 }}
-      />
-      {useMemo(
-        () => (
-          <Table<DataItem>
-            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],
-      )}
-    </Flex>
-  );
-}
-
-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/src/components/LinkedECharts.tsx

@@ -1,51 +0,0 @@
-import * as echarts from "echarts";
-import {
-  createContext,
-  forwardRef,
-  useContext,
-  useId,
-  type ComponentType,
-  type ReactNode,
-} from "react";
-
-import StrictECharts, { type StrictEChartsProps } from "./StrictECharts";
-
-const LinkContext = createContext<string>("global");
-
-/**
- * 联动上下文的 Provider，用于包裹需要联动的图表。
- */
-export function EChartsLinkProvider(props: { children: ReactNode }) {
-  return (
-    <LinkContext.Provider value={useId()}>{props.children}</LinkContext.Provider>
-  );
-}
-
-/**
- * 高阶组件，用于为任何签名与 `StrictECharts` 相同的图表组件添加联动功能。
- */
-export function withEChartsLink(ECharts: ComponentType<StrictEChartsProps>) {
-  return forwardRef<StrictECharts, StrictEChartsProps>(
-    (props, ref): ReactNode => {
-      const group = useContext(LinkContext);
-      return (
-        <ECharts
-          // @ts-expect-error unfixable error
-          ref={ref}
-          {...props}
-          onChartReady={(instance) => {
-            instance.group = group;
-            echarts.connect(group);
-            props.onChartReady?.(instance);
-          }}
-        />
-      );
-    },
-  );
-}
-
-/**
- * 具有联动功能的 `StrictECharts` 组件，签名与 `StrictECharts` 完全一致。
- */
-const LinkedECharts = withEChartsLink(StrictECharts);
-export default LinkedECharts;

package/src/components/LinkedLineChart.tsx

@@ -1,144 +0,0 @@
-import { ConfigProvider, theme } from "antd";
-import type { LineSeriesOption } from "echarts";
-import { createContext, useContext, type ReactNode } from "react";
-
-import * as echarts from "../echarts";
-import LinkedECharts, { EChartsLinkProvider } from "./LinkedECharts";
-import type { StrictEChartsProps } from "./StrictECharts";
-
-interface LineChartLinkContext {
-  xData: (string | number)[];
-  xName: string;
-}
-
-const LineChartLinkContext = createContext<LineChartLinkContext>({
-  xData: [],
-  xName: "时间",
-});
-
-export interface LineChartLinkProviderProps {
-  /** X 轴的数据。*/
-  xData: (string | number)[];
-  /**
-   * X 轴的名称。
-   * @default "时间"
-   */
-  xName?: string;
-  /** 包裹的内容，其中包含需要联动的 {@linkcode LinkedLineChart} 组件。*/
-  children: ReactNode;
-}
-
-/**
- * {@linkcode LinkedLineChart} 联动上下文的 Provider。
- *
- * 用于包裹需要联动的 {@linkcode LinkedLineChart} 组件。
- */
-export function LineChartLinkProvider(props: LineChartLinkProviderProps) {
-  return (
-    <EChartsLinkProvider>
-      <LineChartLinkContext.Provider
-        value={{
-          xData: props.xData,
-          xName: props.xName ?? "时间",
-        }}
-      >
-        {props.children}
-      </LineChartLinkContext.Provider>
-    </EChartsLinkProvider>
-  );
-}
-
-export interface LinkedLineChartProps
-  extends Omit<StrictEChartsProps, "option"> {
-  /**
-   * Y 轴的名称。
-   * @default "数值"
-   */
-  yName?: string;
-  /** Y 轴的单位，默认不显示。*/
-  yUnit?: string;
-  /** 各个曲线的名称、数据和其它选项（颜色、插值模式等）。*/
-  series?: { name: string; data: number[]; option?: LineSeriesOption }[];
-  /**
-   * 是否启用横轴下方的缩放条（`dataZoom`）
-   * @default true
-   */
-  dataZoom?: boolean;
-}
-
-/**
- * 折线图组件，支持多条数据曲线和横轴联动。鼠标悬停在图表上时会触发联动高亮。
- */
-function LinkedLineChart(props: LinkedLineChartProps) {
-  const {
-    yName = "数值",
-    yUnit,
-    series = [],
-    dataZoom = true,
-    ...rest
-  } = props;
-  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((series) => echarts.lineSeries(series)),
-    }),
-    echarts.legend({
-      data: series.map((series) => series.name),
-      option: { right: 42 },
-    }),
-    echarts.tooltip({
-      trigger: "axis",
-      position: (
-        [x],
-        params,
-        dom,
-        rect,
-        { contentSize: [popupWidth], viewSize: [chartWidth] },
-      ) => [
-        x + 10 + popupWidth <= chartWidth ? x + 10 : x - 10 - popupWidth,
-        20,
-      ],
-    }),
-    {
-      dataZoom: [
-        {
-          show: dataZoom,
-          orient: "horizontal",
-          bottom: 8,
-          filterMode: "empty",
-        },
-      ],
-    },
-  );
-  return (
-    <LinkedECharts
-      option={option}
-      theme={isDark ? "dark" : undefined}
-      {...rest}
-    />
-  );
-}
-
-export default LinkedLineChart;

package/src/components/QuickDateRangePicker.tsx

@@ -1,84 +0,0 @@
-import {
-  Button,
-  DatePicker,
-  Space,
-  type ButtonProps,
-  type SpaceProps,
-} from "antd";
-import type { RangePickerProps } from "antd/es/date-picker";
-import dayjs, { type Dayjs } from "dayjs";
-import type { NoUndefinedRangeValueType } from "rc-picker/lib/PickerInput/RangePicker";
-import { useState } from "react";
-
-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;
-}
-
-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: QuickDateRangePickerProps) {
-  const { value, onChange, buttonProps, pickerProps, ...rest } = props;
-  const [range, setRange] =
-    value === undefined
-      ? // eslint-disable-next-line react-hooks/rules-of-hooks
-        useState<NoUndefinedRangeValueType<Dayjs> | undefined>(undefined)
-      : [value, () => {}];
-  function quickPick(value: number) {
-    const end = dayjs();
-    const start = end.subtract(value - 1, "day");
-    const newRange: NoUndefinedRangeValueType<Dayjs> = [start, end];
-    setRange(newRange);
-    onChange?.(newRange);
-  }
-  return (
-    <Space {...rest}>
-      {/* TODO i18n */}
-      {QUICK_PICK_RANGES.map((item, index) => (
-        <Button
-          key={index}
-          onClick={() => quickPick(item.value)}
-          {...buttonProps}
-        >
-          {item.label}
-        </Button>
-      ))}
-      <DatePicker.RangePicker
-        value={range}
-        allowClear={false}
-        onChange={(range) => {
-          setRange(range as NoUndefinedRangeValueType<Dayjs>);
-          onChange?.(range as NoUndefinedRangeValueType<Dayjs>); // 由于 allowClear=false，这里 range 不可能为 null
-        }}
-        {...pickerProps}
-      />
-    </Space>
-  );
-}
-
-export default QuickDateRangePicker;

package/src/components/SegmentedButtons.tsx

@@ -1,46 +0,0 @@
-import { Radio, type RadioGroupProps } from "antd";
-
-/**
- * 分段单选按钮。
- *
- * 该组件是 [Ant Design 的 `Radio.Group optionType="button"`][1] 的别名。
- *
- * [1]: https://ant-design.antgroup.com/components/radio-cn#radiogroup
- */
-function SegmentedButtons(props: RadioGroupProps) {
-  return <Radio.Group optionType="button" {...props} />;
-}
-
-// TODO i18n
-const TIME_UNIT_OPTIONS = [
-  { label: "日", value: "day" },
-  { label: "周", value: "week" },
-  { label: "月", value: "month" },
-];
-
-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 function TimeUnitSwitcher(props: TimeUnitSwitcherProps) {
-  const { onChange, ...rest } = props;
-  return (
-    <Radio.Group
-      optionType="button"
-      options={TIME_UNIT_OPTIONS}
-      onChange={(e) => onChange?.(e.target.value as "day" | "week" | "month")}
-      {...rest}
-    />
-  );
-}
-
-export default SegmentedButtons;