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

package/src/echarts/index.ts

@@ -1,129 +0,0 @@
-import type {
-  AngleAxisComponentOption,
-  AxisPointerComponentOption,
-  Color,
-  DataZoomComponentOption,
-  EChartsOption,
-  GraphicComponentOption,
-  GridComponentOption,
-  LegendComponentOption,
-  PolarComponentOption,
-  RadarComponentOption,
-  RadiusAxisComponentOption,
-  SeriesOption,
-  TooltipComponentOption,
-  XAXisComponentOption,
-  YAXisComponentOption,
-} from "echarts";
-import { useMemo } from "react";
-
-export * from "./coordinateSystems";
-export * from "./radar";
-export * from "./legend";
-export * from "./tooltip";
-export * from "./series";
-
-/** 一个可组合的 ECharts 组件。*/
-export interface EChartsComponent {
-  grid?: GridComponentOption[];
-  xAxis?: XAXisComponentOption[];
-  yAxis?: YAXisComponentOption[];
-  polar?: PolarComponentOption[];
-  angleAxis?: AngleAxisComponentOption[];
-  radiusAxis?: RadiusAxisComponentOption[];
-  radar?: RadarComponentOption[];
-  legend?: LegendComponentOption[];
-  tooltip?: TooltipComponentOption[];
-  axisPointer?: AxisPointerComponentOption[];
-  dataZoom?: DataZoomComponentOption[];
-  graphic?: GraphicComponentOption[];
-  series?: SeriesOption[];
-}
-
-/** 一个 ECharts 系列。*/
-export interface EChartsSeries<T = SeriesOption> {
-  series: T[];
-}
-
-/** ECharts 中不可组合的设置项。*/
-export interface EChartsNonComposableOption {
-  color?: Color[];
-  backgroundColor?: string;
-}
-
-export type DataItem = number | string | Date | undefined;
-
-/**
- * 第一个参数 `base` 中可以填入不可组合的 ECharts 配置项，例如 `color`。
- * 剩余的参数就是需要组合的各个 ECharts 组件。
- */
-export function buildEChartsOption(
-  base: EChartsNonComposableOption,
-  ...components: EChartsComponent[]
-) {
-  const option: EChartsComponent & EChartsNonComposableOption = { ...base };
-  for (const component of components) {
-    Object.entries(component).forEach(([k, value]) => {
-      const key = k as keyof EChartsComponent;
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      (option[key] ??= []).push(...(value ?? []));
-    });
-  }
-  return option as EChartsOption;
-}
-
-/**
- * 用组件组合出 ECharts 的配置对象，并将其缓存以减少重渲染。
- *
- * **注意**：该优化只有在传入的每个组件都已经分别被缓存的情况下才有效！
- * 如果不需要细粒度的记忆化，可以直接将所有组件和 `buildEChartsOption`
- * 整个用 `useMemo` 包裹起来。
- */
-export function useMemoizedEChartsOption(
-  base: EChartsNonComposableOption,
-  ...components: EChartsComponent[]
-) {
-  return useMemo(
-    () => buildEChartsOption(base, ...components),
-    components, // eslint-disable-line react-hooks/exhaustive-deps
-  );
-}
-
-// 一些零散工具
-
-/** 一个从 01:00 到 24:00 的数组，可以在等待数据加载时填充 X 轴。*/
-export const HOURS_OF_DAY = Array.from(
-  { length: 24 },
-  (_, index) => (index + 1).toString().padStart(2, "0") + ":00",
-);
-
-/** 虚线图标，可用于图例。*/
-export const DASHES_ICON: string =
-  "path://M304.43 532.76H221.4c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h83.03c11.47 0 20.76 9.3 20.76 20.76s-9.29 20.76-20.76 20.76zM581.19 532.76H442.81c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h138.38c11.47 0 20.76 9.3 20.76 20.76s-9.3 20.76-20.76 20.76zM802.59 532.76h-83.03c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h83.03c11.47 0 20.76 9.3 20.76 20.76s-9.29 20.76-20.76 20.76z";
-
-/** 公用调色板 1。*/
-export const PALETTE_1 = [
-  "#2FDAFF",
-  "#77DA9B",
-  "#FFB82E",
-  "#5470C6",
-  "#91CC75",
-  "#FAC858",
-  "#EE6666",
-  "#73C0DE",
-  "#3BA272",
-  "#FC8452",
-  "#9A60B4",
-  "#EA7CCC",
-];
-
-/** 公用调色板 2。*/
-export const PALETTE_2 = [
-  "#ECA926",
-  "#32ADF4",
-  "#DC7756",
-  "#62CE89",
-  "#4256B9",
-  "#00D0FF",
-  "#96D0DD",
-];

package/src/echarts/legend.ts

@@ -1,36 +0,0 @@
-import type { LegendComponentOption } from "echarts";
-
-import type { EChartsComponent } from ".";
-
-export type LegendDataItem = Exclude<
-  (LegendComponentOption["data"] & {})[0],
-  string
->;
-
-export interface LegendOption {
-  /**
-   * 图例中要显示的系列或数据项。
-   */
-  data: (string | LegendDataItem)[];
-  /**
-   * 其它图例设置项，参见 [ECharts 文档][1]。
-   *
-   * [1]: https://echarts.apache.org/zh/option.html#legend
-   */
-  option?: LegendComponentOption;
-}
-
-/** 添加一个图例。 */
-export function legend(option: LegendOption): EChartsComponent {
-  return {
-    legend: [
-      {
-        top: 0,
-        right: 0,
-        padding: 0,
-        data: option.data,
-        ...option.option,
-      },
-    ],
-  };
-}

package/src/echarts/radar.ts

@@ -1,46 +0,0 @@
-import type { RadarComponentOption, RadarSeriesOption } from "echarts";
-
-import type { EChartsComponent } from ".";
-
-export interface RadarOption {
-  /** 名称，不可与其它组件和系列重名。*/
-  name: string;
-  /** 雷达图的各维度。*/
-  dimensions: RadarComponentOption["indicator"] & {};
-  /** 雷达图的数据。*/
-  data: RadarSeriesOption["data"] & {};
-  /**
-   * 其它传递给雷达图组件的设置项，参见 [ECharts 文档][1]。
-   *
-   * [1]: https://echarts.apache.org/zh/option.html#radar
-   */
-  option?: RadarComponentOption;
-  /**
-   * 其它传递给雷达系列的设置项，参见 [ECharts 文档][1]。
-   *
-   * [1]: https://echarts.apache.org/zh/option.html#series-radar
-   */
-  series?: RadarSeriesOption;
-}
-
-/** 添加一张雷达图。*/
-export function radar(option: RadarOption): EChartsComponent {
-  return {
-    radar: [
-      {
-        id: option.name + "-radar",
-        indicator: option.dimensions,
-        ...option.option,
-      },
-    ],
-    series: [
-      {
-        type: "radar",
-        name: option.name,
-        radarId: option.name + "-radar",
-        data: option.data,
-        ...option.series,
-      },
-    ],
-  };
-}

package/src/echarts/series/barSeries.ts

@@ -1,37 +0,0 @@
-import type { BarSeriesOption as OrigBarSeriesOption } from "echarts";
-
-import type { DataItem, EChartsSeries } from "..";
-
-export interface BarSeriesOption {
-  /** 系列名称，不可与其他系列重名。*/
-  name: string;
-  /**
-   * 条形的数据。
-   *
-   * 数据的结构是二维数组，每一行表示一个数据点，第一、第二列分别代表两个轴。
-   * 若两个轴中有且只有一个是类目轴，则数据类型可以是一维数组，表示另一个轴的值。
-   */
-  data: [DataItem, DataItem, ...DataItem[]][] | DataItem[];
-  /**
-   * 其它需要添加到系列上的选项，参见 [ECharts 文档][1]。
-   *
-   * [1]: https://echarts.apache.org/zh/option.html#series-bar
-   */
-  option?: OrigBarSeriesOption;
-}
-
-/**
- * 在坐标系上添加一组条形图。
- */
-export function barSeries(
-  option: BarSeriesOption,
-): EChartsSeries<OrigBarSeriesOption> {
-  const series: OrigBarSeriesOption = {
-    type: "bar",
-    id: option.name,
-    name: option.name,
-    data: option.data,
-    ...option.option,
-  };
-  return { series: [series] };
-}

package/src/echarts/series/boxplotSeries.ts

@@ -1,62 +0,0 @@
-import type { BoxplotSeriesOption as OrigBoxplotSeriesOption } from "echarts";
-
-import type { EChartsSeries } from "..";
-
-export interface BoxplotSeriesOption {
-  /** 系列名称，不可与其他系列重名。*/
-  name: string;
-  /** 箱线图的数据，每一行按顺序分别是最小值、下四分位数、中位数、上四分位数、最大值。*/
-  data: [number, number, number, number, number][];
-  /**
-   * 每个数据值的格式化函数。
-   * @default (value) => value.toFixed(2)
-   */
-  valueFormatter?: (value: number) => string;
-  /**
-   * 其它需要添加到系列上的选项，参见 [ECharts 文档][1]。
-   *
-   * [1]: https://echarts.apache.org/zh/option.html#series-boxplot
-   */
-  option?: OrigBoxplotSeriesOption;
-}
-
-/** 在坐标系上添加一组箱线图。*/
-export function boxplotSeries(
-  option: BoxplotSeriesOption,
-): EChartsSeries<OrigBoxplotSeriesOption> {
-  const valueFormatter = option.valueFormatter ?? ((value) => value.toFixed(2));
-  const series: OrigBoxplotSeriesOption = {
-    type: "boxplot",
-    id: option.name,
-    name: option.name,
-    data: option.data,
-    ...option.option,
-    tooltip: {
-      formatter: (param) => {
-        // prettier-ignore
-        const data = param.data as (
-          [number | string, number, number, number, number, number]
-        );
-        const strong = (body: string) =>
-          `<strong style="text-align: right;">${body}</strong>`;
-        // TODO i18n
-        return `
-          ${param.name}<br>
-          <div style="
-            display: inline-grid;
-            grid: auto-flow / auto auto;
-            gap: 0 20px;
-          ">
-            最大值 ${strong(valueFormatter(data[5]))}
-            上四分位数 ${strong(valueFormatter(data[4]))}
-            中位数 ${strong(valueFormatter(data[3]))}
-            下四分位数 ${strong(valueFormatter(data[2]))}
-            最小值 ${strong(valueFormatter(data[1]))}
-          </div>
-        `;
-      },
-      ...option.option?.tooltip,
-    },
-  };
-  return { series: [series] };
-}

package/src/echarts/series/intervalSeries.ts

@@ -1,70 +0,0 @@
-import type { Color, LineSeriesOption as OrigLineSeriesOption } from "echarts";
-
-import type { EChartsSeries } from "..";
-
-export interface IntervalSeriesOption {
-  /** 系列名称，不可与其他系列重名。*/
-  name: string;
-  /**
-   * 区间的下边界，请将最小值数据填入此处。其它设置参见 [ECharts 文档][1]。
-   *
-   * [1]: https://echarts.apache.org/zh/option.html#series-line
-   */
-  min: OrigLineSeriesOption & { data: number[] };
-  /**
-   * 区间的上边界，请将最小值数据填入此处。其它设置参见 [ECharts 文档][1]。
-   *
-   * [1]: https://echarts.apache.org/zh/option.html#series-line
-   */
-  max: OrigLineSeriesOption & { data: number[] };
-  /**
-   * 区间条带，此处必须设置一个颜色。其它设置参见 [ECharts 文档][1]。
-   *
-   * [1]: https://echarts.apache.org/zh/option.html#series-line
-   */
-  interval: OrigLineSeriesOption & { color: Color };
-}
-
-const INTERVAL_SERIES_DEFAULTS: OrigLineSeriesOption = {
-  type: "line",
-  smooth: true,
-  showSymbol: false,
-  lineStyle: { opacity: 0 },
-  emphasis: { disabled: true },
-};
-
-/** 绘制一个从下边界到上边界的带状区间。*/
-export function intervalSeries(
-  option: IntervalSeriesOption,
-): EChartsSeries<OrigLineSeriesOption> {
-  // TODO i18n
-  const min: OrigLineSeriesOption = {
-    id: option.name + "下边界",
-    name: option.name + "下边界",
-    stack: option.name,
-    ...INTERVAL_SERIES_DEFAULTS,
-    ...option.min,
-  };
-  const max: OrigLineSeriesOption = {
-    id: option.name + "上边界",
-    name: option.name + "上边界",
-    ...INTERVAL_SERIES_DEFAULTS,
-    ...option.max,
-  };
-  const interval: OrigLineSeriesOption = {
-    id: option.name,
-    name: option.name,
-    stack: option.name,
-    stackStrategy: "all",
-    symbol: "none",
-    data: Array.from(
-      { length: option.min.data.length },
-      (_, i) => option.max.data[i] - option.min.data[i],
-    ),
-    ...INTERVAL_SERIES_DEFAULTS,
-    ...option.interval,
-    tooltip: { show: false, ...option.interval.tooltip },
-    areaStyle: { color: option.interval.color, ...option.interval.areaStyle },
-  };
-  return { series: [min, interval, max] };
-}

package/src/echarts/series/lineSeries.ts

@@ -1,78 +0,0 @@
-import type { LineSeriesOption as OrigLineSeriesOption } from "echarts";
-
-import type { DataItem, EChartsSeries } from "..";
-
-export type LineSeriesPreset = (option: OrigLineSeriesOption) => void;
-
-export interface LineSeriesOption {
-  /** 系列名称，不可与其他系列重名。*/
-  name: string;
-  /**
-   * 折线的数据。
-   *
-   * 数据的结构是二维数组，每一行表示一个数据点，第一、第二列分别代表两个轴。
-   * 若两个轴中有且只有一个是类目轴，则数据类型可以是一维数组，表示另一个轴的值。
-   */
-  data: [DataItem, DataItem, ...DataItem[]][] | DataItem[];
-  /**
-   * 其它需要添加到系列上的选项，参见 [ECharts 文档][1]。优先级**低于**预设 `presets`。
-   *
-   * [1]: https://echarts.apache.org/zh/option.html#series-line
-   */
-  option?: OrigLineSeriesOption;
-  /**
-   * 需要应用的配置预设。预设的优先级**高于** `option`。
-   *
-   * 可用的预设：{@linkcode gradientArea}
-   */
-  presets?: LineSeriesPreset[];
-}
-
-/**
- * 在坐标系上添加一条折线。
- */
-export function lineSeries(
-  option: LineSeriesOption,
-): EChartsSeries<OrigLineSeriesOption> {
-  const series: OrigLineSeriesOption = {
-    type: "line",
-    id: option.name,
-    name: option.name,
-    data: option.data,
-    smooth: true,
-    showSymbol: false,
-    ...option.option,
-  };
-  option.presets?.forEach((preset) => preset(series));
-  return { series: [series] };
-}
-
-/**
- * 折线图预设，使折线下方区域在纵向呈现线性渐变色。
- *
- * 参数 `top` 表示顶部颜色；参数 `bottom` 表示底部颜色，默认为全透明 `"transparent"`。
- */
-export function gradientArea(
-  top: string,
-  bottom: string = "transparent",
-): LineSeriesPreset {
-  return (option) => {
-    (option.areaStyle ??= {}).color = {
-      type: "linear",
-      x: 0,
-      y: 0,
-      x2: 0,
-      y2: 1,
-      colorStops: [
-        {
-          offset: 0,
-          color: top,
-        },
-        {
-          offset: 1,
-          color: bottom,
-        },
-      ],
-    };
-  };
-}

package/src/echarts/series/maxBarSeries.ts

@@ -1,55 +0,0 @@
-import type { Color, BarSeriesOption as OrigBarSeriesOption } from "echarts";
-
-import type { EChartsSeries } from "..";
-
-export interface MaxBarSeriesOption {
-  /** 系列名称，不可与其他系列重名。*/
-  name: string;
-  /** 需要求最大值的各个系列的数据。*/
-  data: (number | undefined)[][];
-  /** 各个系列的颜色，各个最大值条形将被设为对应的颜色。若留空，则使用默认颜色。*/
-  palette?: Color[];
-  /**
-   * 其它需要添加到系列上的选项，参见 [ECharts 文档][1]。
-   *
-   * [1]: https://echarts.apache.org/zh/option.html#series-bar
-   */
-  option?: OrigBarSeriesOption;
-}
-
-/** 求出多个系列的最大值，显示为条形图。*/
-export function maxBarSeries(
-  option: MaxBarSeriesOption,
-): EChartsSeries<OrigBarSeriesOption> {
-  const series: OrigBarSeriesOption = {
-    type: "bar",
-    id: option.name,
-    name: option.name,
-    data: Array.from({ length: option.data[0].length }, (_, i) => {
-      // prettier-ignore
-      const [max, maxJ] = option.data
-        .map((series) => series[i])
-        .reduce<[number | undefined, number]>(
-          ([max, maxJ], y, j) =>
-            max === undefined || (y !== undefined && y > max)
-            ? [y, j]
-            : [max, maxJ],
-          [undefined, -1]
-        );
-      if (max !== undefined && option.palette) {
-        return {
-          value: max,
-          itemStyle: {
-            color: option.palette[maxJ],
-          },
-        };
-      } else {
-        return max;
-      }
-    }),
-    ...option.option,
-    itemStyle: { opacity: 0.7, ...option.option?.itemStyle },
-    tooltip: { show: false, ...option.option?.tooltip },
-  };
-  return { series: [series] };
-}

package/src/echarts/series/pieSeries.ts

@@ -1,76 +0,0 @@
-import type { PieSeriesOption as OrigPieSeriesOption } from "echarts";
-
-import type { EChartsSeries } from "..";
-
-/** 饼图的数据项。*/
-export type PieDataItem = (OrigPieSeriesOption["data"] & {})[0] extends
-  | number
-  | string
-  | unknown[]
-  | infer T
-  ? T
-  : never;
-
-export type PieSeriesPreset = (option: OrigPieSeriesOption) => void;
-
-export interface PieSeriesOption {
-  /** 系列名称，不可与其他系列重名。*/
-  name: string;
-  /** 饼图的数据，数组元素可以是单个数值或者一个对象。*/
-  data: (number | PieDataItem)[];
-  /**
-   * 其它需要添加到系列上的选项，参见 [ECharts 文档][1]。优先级**低于**预设 `presets`。
-   *
-   * [1]: https://echarts.apache.org/zh/option.html#series-pie
-   */
-  option?: OrigPieSeriesOption;
-  /**
-   * 需要应用的配置预设。预设的优先级**高于** `option`。
-   *
-   * 可用的预设：{@linkcode ringPie}
-   */
-  presets?: PieSeriesPreset[];
-}
-
-/**
- * 添加一个饼图。
- *
- * 请使用 ECharts 的 legend 组件来添加图例，不要手动编写 React 代码制作图例。
- */
-export function pieSeries(
-  option: PieSeriesOption,
-): EChartsSeries<OrigPieSeriesOption> {
-  const series: OrigPieSeriesOption = {
-    type: "pie",
-    id: option.name,
-    name: option.name,
-    data: option.data,
-    ...option.option,
-  };
-  option.presets?.forEach((preset) => preset(series));
-  return { series: [series] };
-}
-
-const RING_PIE = (option: OrigPieSeriesOption) => {
-  option.radius = ["43%", "75%"];
-  option.avoidLabelOverlap = false;
-  option.label = {
-    show: false,
-    position: "center",
-  };
-  option.labelLine = {
-    show: false,
-  };
-  option.emphasis = {
-    label: {
-      show: true,
-      fontSize: 16,
-      fontWeight: "bold",
-    },
-  };
-};
-
-/** 饼图预设，使饼图变为环状，标签出现在环的中央。*/
-export function ringPie(): PieSeriesPreset {
-  return RING_PIE;
-}