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

package/dist/components/SelectableECharts.d.ts

@@ -0,0 +1,22 @@
+import type { MarkAreaComponentOption } from "echarts";
+import type { ZRStyleProps } from "echarts/types/src/util/types.js";
+import { type EChartsHOCType } from "./ECharts";
+export interface SelectableEChartsProps {
+    /** 编辑器的选中方式。 @default "add" */
+    mode?: "add" | "subtract";
+    /** 可选中的系列名，若为 `undefined` 则均不可选中。（如果需要选中多个系列，可以嵌套多层 `withSelectable`） */
+    seriesName?: string;
+    /** 选中的数据点下标集合。 @default new Set() */
+    selectedIndices?: Set<number>;
+    /** 选中区域变化时的回调。 */
+    onSelectedIndicesChange?: (selectedIndices: Set<number>) => void;
+    /** 选框的样式，可使用 `fill` 和 `stroke` 修改颜色。 */
+    selectionBoxStyle?: Partial<ZRStyleProps>;
+    /** 是否用有色背景高亮选中点在 x 轴上的投影区域。只有 x 轴数值为 `number` 类型的点才能被高亮。 */
+    markArea?: boolean;
+    /** 每个点高亮背景的宽度。如果不填，默认为取相邻两点间距的最小值（x 轴数值必须为 `number` 类型）。 */
+    markAreaWidth?: number;
+    /** 高亮区域的样式，可使用 `color` 修改颜色。 */
+    markAreaStyle?: MarkAreaComponentOption["itemStyle"];
+}
+export declare const withSelectable: EChartsHOCType<SelectableEChartsProps>;

package/dist/components/SelectableECharts.js

@@ -0,0 +1,402 @@
+import { c as _c } from "react/compiler-runtime";
+import { GraphicComponent, MarkAreaComponent } from "echarts/components";
+import * as echarts from "echarts/core";
+import { useEffectEvent, useState } from "react";
+import { debugAssert } from "../utils";
+import { destructureLineDataItem } from "../utils/destructureLineDataItem";
+import { normalizeIntoArray } from "../utils/normalizeIntoArray";
+import "./ECharts";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_SELECTED_INDICES = new Set();
+const DEFAULT_SELECTION_BOX_STYLE = {
+  fill: "#000",
+  fillOpacity: 16 / 255,
+  stroke: "#000",
+  strokeOpacity: 176 / 255,
+  lineWidth: 1
+};
+const DEFAULT_MARK_AREA_STYLE = {
+  color: "#000",
+  opacity: 16 / 255
+};
+export const withSelectable = ECharts => function SelectableECharts(props) {
+  "use memo";
+
+  const $ = _c(31);
+  let inputMarkAreaWidth;
+  let inputOption;
+  let markArea;
+  let markAreaStyle;
+  let onInit;
+  let onSelectedIndicesChange;
+  let rest;
+  let selectionBoxStyle;
+  let seriesName;
+  let t0;
+  let t1;
+  if ($[0] !== props) {
+    ({
+      option: inputOption,
+      onInit,
+      mode: t0,
+      seriesName,
+      selectedIndices: t1,
+      onSelectedIndicesChange,
+      selectionBoxStyle,
+      markArea,
+      markAreaStyle,
+      markAreaWidth: inputMarkAreaWidth,
+      ...rest
+    } = props);
+    $[0] = props;
+    $[1] = inputMarkAreaWidth;
+    $[2] = inputOption;
+    $[3] = markArea;
+    $[4] = markAreaStyle;
+    $[5] = onInit;
+    $[6] = onSelectedIndicesChange;
+    $[7] = rest;
+    $[8] = selectionBoxStyle;
+    $[9] = seriesName;
+    $[10] = t0;
+    $[11] = t1;
+  } else {
+    inputMarkAreaWidth = $[1];
+    inputOption = $[2];
+    markArea = $[3];
+    markAreaStyle = $[4];
+    onInit = $[5];
+    onSelectedIndicesChange = $[6];
+    rest = $[7];
+    selectionBoxStyle = $[8];
+    seriesName = $[9];
+    t0 = $[10];
+    t1 = $[11];
+  }
+  const mode = t0 === undefined ? "add" : t0;
+  const selectedIndices = t1 === undefined ? DEFAULT_SELECTED_INDICES : t1;
+  echarts.use(GraphicComponent);
+  echarts.use(MarkAreaComponent);
+  const inputSeriesArray = normalizeIntoArray(inputOption?.series);
+  let t2;
+  if ($[12] !== seriesName) {
+    t2 = it => it.name === seriesName;
+    $[12] = seriesName;
+    $[13] = t2;
+  } else {
+    t2 = $[13];
+  }
+  const inputSeries = inputSeriesArray.find(t2);
+  if (inputSeries && inputSeries.type !== "line") {
+    throw new Error("only line series is supported");
+  }
+  const inputTooltip = normalizeIntoArray(inputOption?.tooltip);
+  let markAreaWidth = inputMarkAreaWidth;
+  if (inputSeries?.data && markArea && !markAreaWidth) {
+    markAreaWidth = Infinity;
+    const xValues = inputSeries.data.map(_temp);
+    for (let i = 1; i < xValues.length; i++) {
+      const prevX = xValues[i - 1];
+      const thisX = xValues[i];
+      if (typeof prevX === "number" && typeof thisX === "number") {
+        markAreaWidth = Math.min(markAreaWidth, thisX - prevX);
+      }
+    }
+    if (markAreaWidth === Infinity) {
+      throw new Error("failed to automatically determine the width of mark area; please ensure the x axis value of the data points are number-typed, or provide the width manually");
+    }
+  }
+  const modelMatcher = inputSeries && ((inputSeries.xAxisId || inputSeries.xAxisIndex) && (inputSeries.yAxisId || inputSeries.yAxisIndex) || inputSeries.polarId || inputSeries.polarIndex) ? inputSeries : {
+    gridIndex: 0
+  };
+  const convertToPixel = (instance, t3) => {
+    const [px, py] = t3;
+    return px != null && py != null ? instance.convertToPixel(modelMatcher, [px, py]) : undefined;
+  };
+  const [mouseState, setMouseState] = useState();
+  let t4;
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = (instance_0, params) => setMouseState({
+      instance: instance_0,
+      start: [params.offsetX, params.offsetY]
+    });
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  const onMouseDown = useEffectEvent(t4);
+  let t5;
+  if ($[15] !== mouseState) {
+    t5 = params_0 => {
+      if (!mouseState) {
+        return;
+      }
+      setMouseState({
+        ...mouseState,
+        end: [params_0.offsetX, params_0.offsetY]
+      });
+    };
+    $[15] = mouseState;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  const onMouseMove = useEffectEvent(t5);
+  const onMouseUp = useEffectEvent((instance_1, params_1) => {
+    if (!mouseState) {
+      return;
+    }
+    let eventTriggered = false;
+    if (onSelectedIndicesChange && inputSeries?.data) {
+      if (mouseState.end) {
+        const [startX, startY] = mouseState.start;
+        const {
+          offsetX,
+          offsetY
+        } = params_1;
+        const [minX, maxX] = [startX, offsetX].sort(_temp2);
+        const [minY, maxY] = [startY, offsetY].sort(_temp3);
+        const newSelectedIndices = new Set(selectedIndices);
+        inputSeries.data.forEach((point, i_0) => {
+          const destructured = destructureLineDataItem(point, i_0);
+          if (destructured == null) {
+            return;
+          }
+          const pixelValue = convertToPixel(instance_1, destructured[0]);
+          if (pixelValue === undefined) {
+            return;
+          }
+          const [x, y] = pixelValue;
+          const selected = minX <= x && x <= maxX && minY <= y && y <= maxY;
+          if (selected) {
+            if (mode === "add") {
+              newSelectedIndices.add(i_0);
+            } else {
+              newSelectedIndices.delete(i_0);
+            }
+          }
+        });
+        onSelectedIndicesChange(newSelectedIndices);
+        eventTriggered = true;
+      } else {
+        if (instance_1.containPixel(modelMatcher, mouseState.start)) {
+          let minDist = Infinity;
+          let minIdx = -1;
+          inputSeries.data.forEach((point_0, i_1) => {
+            const destructured_0 = destructureLineDataItem(point_0, i_1);
+            if (destructured_0 == null) {
+              return;
+            }
+            const pixelValue_0 = convertToPixel(instance_1, destructured_0[0]);
+            if (pixelValue_0 === undefined) {
+              return;
+            }
+            const [x_0] = pixelValue_0;
+            const dist = Math.abs(mouseState.start[0] - x_0);
+            if (dist < minDist) {
+              minDist = dist;
+              minIdx = i_1;
+            }
+          });
+          if (minIdx > 0) {
+            const newSelectedIndices_0 = new Set(selectedIndices);
+            if (mode === "add") {
+              newSelectedIndices_0.add(minIdx);
+            } else {
+              newSelectedIndices_0.delete(minIdx);
+            }
+            onSelectedIndicesChange(newSelectedIndices_0);
+            eventTriggered = true;
+          }
+        }
+      }
+    }
+    if (!eventTriggered) {
+      for (let elem = params_1.target; elem; elem = elem.parent) {
+        if (elem._$handlers?.click) {
+          elem._$handlers?.click.forEach(_temp4);
+        }
+      }
+    }
+    setMouseState(undefined);
+  });
+  const option = {
+    ...inputOption
+  };
+  if (inputSeries) {
+    if (selectedIndices.size > 0 || mode === "add" && mouseState?.end) {
+      const series = {
+        ...inputSeries,
+        showSymbol: true
+      };
+      const allSelectedIndices = new Set();
+      series.data = inputSeries.data?.map((point_1, i_2) => {
+        const destructured_1 = destructureLineDataItem(point_1, i_2);
+        if (destructured_1 == null) {
+          return point_1;
+        }
+        const [value, option_0] = destructured_1;
+        const stateSelected = selectedIndices.has(i_2);
+        let tempSelected = false;
+        if (mouseState?.end) {
+          const [minX_0, maxX_0] = [mouseState.start[0], mouseState.end[0]].sort(_temp5);
+          const [minY_0, maxY_0] = [mouseState.start[1], mouseState.end[1]].sort(_temp6);
+          const pixelValue_1 = convertToPixel(mouseState.instance, value);
+          if (pixelValue_1 !== undefined) {
+            const [x_1, y_0] = pixelValue_1;
+            tempSelected = minX_0 <= x_1 && x_1 <= maxX_0 && minY_0 <= y_0 && y_0 <= maxY_0;
+          }
+        }
+        if (mode === "add" ? stateSelected || tempSelected : stateSelected && !tempSelected) {
+          allSelectedIndices.add(i_2);
+          return {
+            value,
+            ...option_0,
+            symbol: "emptyCircle",
+            symbolSize: 6
+          };
+        } else {
+          return {
+            value,
+            symbol: "none",
+            ...option_0
+          };
+        }
+      });
+      if (markArea) {
+        debugAssert(markAreaWidth !== undefined, "when markArea === true, markAreaWidth is guaranteed to be defined at the beginning of this function");
+        const markAreas = [];
+        if (inputSeries.data) {
+          for (const i_3 of allSelectedIndices) {
+            const destructured_2 = destructureLineDataItem(inputSeries.data[i_3], i_3);
+            if (destructured_2 == null) {
+              continue;
+            }
+            const [t6] = destructured_2;
+            const [xValue] = t6;
+            if (typeof xValue !== "number") {
+              continue;
+            }
+            markAreas.push([{
+              coord: [xValue - markAreaWidth / 2]
+            }, {
+              coord: [xValue + markAreaWidth / 2]
+            }]);
+          }
+        }
+        series.markArea = {
+          itemStyle: {
+            ...DEFAULT_MARK_AREA_STYLE,
+            ...markAreaStyle
+          },
+          emphasis: {
+            disabled: true
+          },
+          data: markAreas
+        };
+      }
+      const seriesArray = [...inputSeriesArray];
+      seriesArray[seriesArray.indexOf(inputSeries)] = series;
+      option.series = seriesArray;
+    }
+  }
+  let t6;
+  if ($[17] !== selectionBoxStyle) {
+    t6 = {
+      ...DEFAULT_SELECTION_BOX_STYLE,
+      ...selectionBoxStyle
+    };
+    $[17] = selectionBoxStyle;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  let t7;
+  if ($[19] !== mouseState) {
+    t7 = mouseState?.end ? {
+      ignore: false,
+      shape: {
+        x: mouseState.start[0],
+        y: mouseState.start[1],
+        width: mouseState.end[0] - mouseState.start[0],
+        height: mouseState.end[1] - mouseState.start[1]
+      }
+    } : {
+      ignore: true
+    };
+    $[19] = mouseState;
+    $[20] = t7;
+  } else {
+    t7 = $[20];
+  }
+  let t8;
+  if ($[21] !== t6 || $[22] !== t7) {
+    t8 = {
+      id: "selectionBox",
+      type: "rect",
+      z: 1000,
+      style: t6,
+      ...t7
+    };
+    $[21] = t6;
+    $[22] = t7;
+    $[23] = t8;
+  } else {
+    t8 = $[23];
+  }
+  option.graphic = [...normalizeIntoArray(option.graphic), t8];
+  if (inputTooltip.length) {
+    let t9;
+    if ($[24] !== mouseState?.end) {
+      t9 = it_1 => ({
+        ...it_1,
+        show: mouseState?.end === undefined
+      });
+      $[24] = mouseState?.end;
+      $[25] = t9;
+    } else {
+      t9 = $[25];
+    }
+    option.tooltip = inputTooltip.map(t9);
+  }
+  let t9;
+  if ($[26] !== onInit || $[27] !== onMouseDown || $[28] !== onMouseMove || $[29] !== onMouseUp) {
+    t9 = instance_2 => {
+      const zr = instance_2.getZr();
+      zr.on("mousedown", params_2 => onMouseDown(instance_2, params_2));
+      zr.on("mousemove", onMouseMove);
+      zr.on("mouseup", params_3 => onMouseUp(instance_2, params_3));
+      return onInit?.(instance_2);
+    };
+    $[26] = onInit;
+    $[27] = onMouseDown;
+    $[28] = onMouseMove;
+    $[29] = onMouseUp;
+    $[30] = t9;
+  } else {
+    t9 = $[30];
+  }
+  return /*#__PURE__*/_jsx(ECharts, {
+    option: option,
+    onInit: t9,
+    ...rest
+  });
+};
+function _temp(item, idx) {
+  return destructureLineDataItem(item, idx)?.[0][0];
+}
+function _temp2(a, b) {
+  return a - b;
+}
+function _temp3(a_0, b_0) {
+  return a_0 - b_0;
+}
+function _temp4(it_0) {
+  return it_0.h();
+}
+function _temp5(a_1, b_1) {
+  return a_1 - b_1;
+}
+function _temp6(a_2, b_2) {
+  return a_2 - b_2;
+}

package/dist/echarts/coordinateSystems/grid.js

@@ -9,10 +9,11 @@ export function grid(option) {
   echarts.use(GridComponent);
   const grid = {
     left: 0,
-    right: 0,
-    top: 24,
+    right: 1,
+    top: 1,
     bottom: 0,
-    containLabel: true,
+    outerBoundsContain: "all",
+    outerBoundsMode: "same",
     ...option.option
   };
   const xAxis = {

package/dist/echarts/legend.js

@@ -5,7 +5,7 @@ export function legend(option) {
   echarts.use(LegendComponent);
   return {
     legend: [{
-      top: 0,
+      top: 1,
       right: 0,
       padding: 0,
       data: option.data,

package/dist/echarts/tooltip.js

@@ -10,9 +10,13 @@ import * as echarts from "echarts/core";
  *
  * [1]: https://echarts.apache.org/zh/option.html#tooltip
  */
-export function tooltip(option = {}) {
+export function tooltip(option) {
   echarts.use(TooltipComponent);
   return {
-    tooltip: [option]
+    tooltip: [{
+      trigger: "axis",
+      transitionDuration: 0,
+      ...option
+    }]
   };
 }

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export { default as LineChartTable, type LineChartTableProps, } from "./componen
 export { default as LinkedLineChart, LineChartLinkProvider, type LinkedLineChartProps, type LineChartLinkProviderProps, } from "./components/LinkedLineChart";
 export { default as QuickDateRangePicker, type QuickDateRangePickerProps, } from "./components/QuickDateRangePicker";
 export { default as SegmentedButtons, TimeUnitSwitcher, type TimeUnitSwitcherProps, } from "./components/SegmentedButtons";
+export { withSelectable, type SelectableEChartsProps, } from "./components/SelectableECharts";
 export { default as Sidebar, type SidebarProps } from "./components/Sidebar";
 export { default as TsingrocDatePicker, type DatePickerProps, } from "./components/TsingrocDatePicker";
 export { default as TsingrocTheme, type TsingrocThemeProps, } from "./components/TsingrocTheme";

package/dist/index.js

@@ -13,6 +13,7 @@ export { default as LineChartTable } from "./components/LineChartTable";
 export { default as LinkedLineChart, LineChartLinkProvider } from "./components/LinkedLineChart";
 export { default as QuickDateRangePicker } from "./components/QuickDateRangePicker";
 export { default as SegmentedButtons, TimeUnitSwitcher } from "./components/SegmentedButtons";
+export { withSelectable } from "./components/SelectableECharts";
 export { default as Sidebar } from "./components/Sidebar";
 export { default as TsingrocDatePicker } from "./components/TsingrocDatePicker";
 export { default as TsingrocTheme } from "./components/TsingrocTheme";

package/dist/utils/destructureLineDataItem.d.ts

@@ -0,0 +1,6 @@
+import type { LineSeriesOption } from "echarts";
+import type { OptionDataValue } from "echarts/types/src/util/types.js";
+export type LineDataItem = LineSeriesOption["data"] extends (infer T)[] | undefined ? T : never;
+export type LineDataValue = OptionDataValue | OptionDataValue[];
+export type LineDataItemOption = LineDataItem extends LineDataValue | infer T ? T : never;
+export declare function destructureLineDataItem(value: LineDataItem, i: number): [OptionDataValue[], LineDataItemOption | undefined] | null | undefined;

package/dist/utils/destructureLineDataItem.js

@@ -0,0 +1,17 @@
+export function destructureLineDataItem(value, i) {
+  if (value == null) return value;
+  let rawValue,
+    option = undefined;
+  if (typeof value === "object" && !(value instanceof Date) && !Array.isArray(value)) {
+    ({
+      value: rawValue,
+      ...option
+    } = value);
+  } else {
+    rawValue = value;
+  }
+  if (!Array.isArray(rawValue)) {
+    rawValue = [i, rawValue];
+  }
+  return [rawValue, option];
+}

package/dist/utils/filterMap.d.ts

@@ -0,0 +1 @@
+export declare function filterMap<T, R>(array: T[], func: (elem: T, index: number, array: T[]) => R): NonNullable<R>[];

package/dist/utils/filterMap.js

@@ -0,0 +1,11 @@
+export function filterMap(array, func) {
+  const result = [];
+  for (let i = 0; i < array.length; i++) {
+    const elem = array[i];
+    const resultElem = func(elem, i, array);
+    if (resultElem != null) {
+      result.push(resultElem);
+    }
+  }
+  return result;
+}

package/dist/utils/index.d.ts

@@ -1,4 +1,8 @@
 export * from "./debug";
+export * from "./destructureLineDataItem";
+export * from "./filterMap";
 export * from "./math";
 export * from "./mock";
+export * from "./normalizeIntoArray";
 export * from "./startOfQuarter";
+export * from "./timeAxisLabel";

package/dist/utils/index.js

@@ -1,4 +1,8 @@
 export * from "./debug";
+export * from "./destructureLineDataItem";
+export * from "./filterMap";
 export * from "./math";
 export * from "./mock";
-export * from "./startOfQuarter";
+export * from "./normalizeIntoArray";
+export * from "./startOfQuarter";
+export * from "./timeAxisLabel";

package/dist/utils/normalizeIntoArray.d.ts

@@ -0,0 +1 @@
+export declare function normalizeIntoArray<T extends object>(value: T | T[] | undefined): T[];

package/dist/utils/normalizeIntoArray.js

@@ -0,0 +1,3 @@
+export function normalizeIntoArray(value) {
+  return value === undefined ? [] : Array.isArray(value) ? value : [value];
+}

package/dist/utils/timeAxisLabel.d.ts

@@ -0,0 +1,5 @@
+import { type Dayjs } from "dayjs";
+import type { XAXisComponentOption } from "echarts";
+export default function timeAxisLabel(startTime: Dayjs, endTime: Dayjs): (XAXisComponentOption & {
+    type: "time";
+})["axisLabel"];

package/dist/utils/timeAxisLabel.js

@@ -0,0 +1,18 @@
+import dayjs from "dayjs";
+export default function timeAxisLabel(startTime, endTime) {
+  return {
+    formatter: endTime.diff(startTime, "day", true) <= 1 ? value => dayjs(value).isSame(endTime) && endTime.hour() === 0 ? "24:00" : "{HH}:{mm}" : value => {
+      const time = dayjs(value);
+      if (time.hour() === 0 && time.minute() === 0) {
+        return "{date|{MM}-{dd}}";
+      } else {
+        return "{HH}:{mm}";
+      }
+    },
+    rich: {
+      date: {
+        fontWeight: "bold"
+      }
+    }
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsingroc/tsingroc-components",
-  "version": "5.0.0-alpha.12",
+  "version": "5.0.0-alpha.13",
   "author": "",
   "license": "ISC",
   "description": "",