@tsingroc/tsingroc-components 5.0.1 → 5.1.0

package/dist/components/BaseBarChart/index.js

@@ -0,0 +1,121 @@
+import { Card } from "antd";
+import * as echarts from "#src/echarts";
+import { COLOR_CHART_AXIS } from "#src/utils/constants";
+import HighlightSyncedECharts from "../HighlightSyncedECharts";
+import styles from "./BaseBarChart.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Default x-axis labels when no data (match ReviewLineChart: 00:00–24:00). */
+const DEFAULT_CATEGORIES = [...Array.from({
+  length: 24
+}, (_, i) => `${String(i).padStart(2, "0")}:00`), "24:00"];
+export default function BaseBarChart({
+  title,
+  categories,
+  series,
+  yAxisName,
+  gridOption,
+  tooltipValueFormatter = v => String(v),
+  showLegend = true,
+  showSplitLine = true
+}) {
+  const effectiveCategories = categories.length > 0 ? categories : DEFAULT_CATEGORIES;
+  const seriesWithValues = series.filter(s => s.data.some(v_0 => typeof v_0 === "number" && !Number.isNaN(v_0)));
+  const barWidth = seriesWithValues.length > 1 ? "30%" : "50%";
+  return /*#__PURE__*/_jsxs(Card, {
+    className: styles.root,
+    styles: {
+      body: {
+        height: "100%",
+        width: "100%",
+        padding: 0,
+        minHeight: 200,
+        display: "flex",
+        flexDirection: "column"
+      }
+    },
+    children: [title != null && title !== "" && /*#__PURE__*/_jsx("div", {
+      style: {
+        fontSize: "1.1rem"
+      },
+      children: /*#__PURE__*/_jsx("span", {
+        children: title
+      })
+    }), /*#__PURE__*/_jsx(HighlightSyncedECharts, {
+      className: styles.chartContainer,
+      style: {
+        height: "100%"
+      },
+      option: echarts.buildEChartsOption({}, echarts.grid({
+        option: {
+          left: gridOption?.left ?? 0,
+          right: gridOption?.right ?? 0,
+          top: gridOption?.top ?? 10,
+          bottom: gridOption?.bottom ?? 0
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          data: effectiveCategories,
+          show: true,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#ADADAD",
+              width: 1
+            }
+          },
+          axisTick: {
+            show: true
+          },
+          axisLabel: {
+            show: true,
+            color: "#ADADAD",
+            fontSize: 11
+          }
+        },
+        yAxis: {
+          name: yAxisName ?? "",
+          nameTextStyle: {
+            color: COLOR_CHART_AXIS
+          },
+          show: true,
+          axisLabel: {
+            color: COLOR_CHART_AXIS,
+            show: true
+          },
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: showSplitLine
+          }
+        },
+        series: series.map(s_0 => echarts.barSeries({
+          name: s_0.name,
+          data: s_0.data.length > 0 ? s_0.data : [],
+          option: {
+            color: s_0.color,
+            barWidth,
+            tooltip: {
+              valueFormatter: value => tooltipValueFormatter(typeof value === "number" && !Number.isNaN(value) ? value : 0)
+            },
+            ...s_0.option
+          }
+        }))
+      }), showLegend ? echarts.legend({
+        // Legend should represent the configured series even if a series has only null gaps.
+        data: series.map(s_1 => s_1.name)
+      }) : {}, echarts.tooltip({
+        backgroundColor: "rgba(255, 255, 255, 0.95)",
+        borderColor: COLOR_CHART_AXIS,
+        position: ([x, y], _0, _1, _2, {
+          viewSize: [vw, vh],
+          contentSize: [, ch]
+        }) => ({
+          left: x + vw / 100,
+          top: Math.min(y + vw / 100, vh - (ch ?? 0) + 24)
+        })
+      }))
+    })]
+  });
+}

package/dist/components/DataCellNumber/DataCellNumber.module.css

@@ -0,0 +1,20 @@
+.dataCell {
+  display: flex;
+}
+
+.dataCellLeft {
+  flex: 50%;
+  border-right: 1px solid #d3d3d3;
+  padding-inline: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  color: #85008c;
+}
+
+.dataCellRight {
+  flex: 50%;
+  padding-inline: 4px;
+  text-align: left;
+  color: #ff6937;
+}

package/dist/components/DataCellNumber/index.d.ts

@@ -0,0 +1,14 @@
+type KeysMatching<T, V> = {
+    [K in keyof T]-?: Exclude<T[K], undefined> extends V ? K : never;
+}[keyof T];
+/** Keys that hold number or number | null (for editable numeric cells) */
+type NumericKey<T> = KeysMatching<T, number> | KeysMatching<T, number | null>;
+export declare function DataCellNumber<Value>({ value1, value2, modified, fractionDigits, valueKey, onChange }: {
+    value1: number | null;
+    value2?: number | null;
+    modified?: boolean;
+    fractionDigits?: number;
+    valueKey: NumericKey<Value>;
+    onChange?: (key: NumericKey<Value>, value: number) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DataCellNumber/index.js

@@ -0,0 +1,142 @@
+import { c as _c } from "react/compiler-runtime";
+import { InputNumber } from "antd";
+import { COLOR_POWER_MANUAL } from "#src/utils/constants";
+import styles from "./DataCellNumber.module.css";
+
+/** Keys that hold number or number | null (for editable numeric cells) */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function DataCell(t0) {
+  const $ = _c(17);
+  const {
+    value1,
+    value2,
+    formatter,
+    editorRender
+  } = t0;
+  if (value2 !== undefined) {
+    let t1;
+    if ($[0] !== formatter || $[1] !== value1) {
+      t1 = formatter(value1);
+      $[0] = formatter;
+      $[1] = value1;
+      $[2] = t1;
+    } else {
+      t1 = $[2];
+    }
+    let t2;
+    if ($[3] !== t1) {
+      t2 = /*#__PURE__*/_jsx("div", {
+        className: styles.dataCellLeft,
+        children: t1
+      });
+      $[3] = t1;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    let t3;
+    if ($[5] !== editorRender || $[6] !== formatter || $[7] !== value2) {
+      t3 = editorRender ? editorRender(value2) : formatter(value2);
+      $[5] = editorRender;
+      $[6] = formatter;
+      $[7] = value2;
+      $[8] = t3;
+    } else {
+      t3 = $[8];
+    }
+    let t4;
+    if ($[9] !== t3) {
+      t4 = /*#__PURE__*/_jsx("div", {
+        className: styles.dataCellRight,
+        children: t3
+      });
+      $[9] = t3;
+      $[10] = t4;
+    } else {
+      t4 = $[10];
+    }
+    let t5;
+    if ($[11] !== t2 || $[12] !== t4) {
+      t5 = /*#__PURE__*/_jsxs("div", {
+        className: styles.dataCell,
+        children: [t2, t4]
+      });
+      $[11] = t2;
+      $[12] = t4;
+      $[13] = t5;
+    } else {
+      t5 = $[13];
+    }
+    return t5;
+  } else {
+    let t1;
+    if ($[14] !== formatter || $[15] !== value1) {
+      t1 = formatter(value1);
+      $[14] = formatter;
+      $[15] = value1;
+      $[16] = t1;
+    } else {
+      t1 = $[16];
+    }
+    return t1;
+  }
+}
+export function DataCellNumber(t0) {
+  const $ = _c(12);
+  const {
+    value1,
+    value2,
+    modified,
+    fractionDigits: t1,
+    valueKey,
+    onChange
+  } = t0;
+  const fractionDigits = t1 === undefined ? 3 : t1;
+  let t2;
+  if ($[0] !== fractionDigits) {
+    t2 = value => value == null ? "" : value.toFixed(fractionDigits);
+    $[0] = fractionDigits;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const formatter = t2;
+  let t3;
+  if ($[2] !== fractionDigits || $[3] !== modified || $[4] !== onChange || $[5] !== valueKey) {
+    t3 = onChange && (value_0 => /*#__PURE__*/_jsx(InputNumber, {
+      value: value_0 ?? 0,
+      formatter: v => v != null ? Number(v).toFixed(fractionDigits) : "",
+      min: 0,
+      onChange: v_0 => v_0 !== null && onChange(valueKey, v_0),
+      styles: {
+        input: {
+          color: modified ? COLOR_POWER_MANUAL : undefined
+        }
+      }
+    }));
+    $[2] = fractionDigits;
+    $[3] = modified;
+    $[4] = onChange;
+    $[5] = valueKey;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== formatter || $[8] !== t3 || $[9] !== value1 || $[10] !== value2) {
+    t4 = /*#__PURE__*/_jsx(DataCell, {
+      value1: value1,
+      value2: value2,
+      formatter: formatter,
+      editorRender: t3
+    });
+    $[7] = formatter;
+    $[8] = t3;
+    $[9] = value1;
+    $[10] = value2;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  return t4;
+}

package/dist/components/FlexColLayout/index.d.ts

@@ -0,0 +1,6 @@
+declare const FlexColLayout: ({ children, style, gap }: {
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+    gap?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export default FlexColLayout;

package/dist/components/FlexColLayout/index.js

@@ -0,0 +1,40 @@
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FlexColLayout = t0 => {
+  const $ = _c(6);
+  const {
+    children,
+    style,
+    gap: t1
+  } = t0;
+  const gap = t1 === undefined ? 16 : t1;
+  let t2;
+  if ($[0] !== gap || $[1] !== style) {
+    t2 = {
+      display: "flex",
+      flexDirection: "column",
+      gap,
+      height: "100%",
+      ...style
+    };
+    $[0] = gap;
+    $[1] = style;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== children || $[4] !== t2) {
+    t3 = /*#__PURE__*/_jsx("div", {
+      style: t2,
+      children: children
+    });
+    $[3] = children;
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  return t3;
+};
+export default FlexColLayout;

package/dist/components/FlexRowLayout/index.d.ts

@@ -0,0 +1,5 @@
+declare const FlexRowLayout: ({ children, styles }: {
+    children: React.ReactNode;
+    styles?: React.CSSProperties;
+}) => import("react/jsx-runtime").JSX.Element;
+export default FlexRowLayout;

package/dist/components/FlexRowLayout/index.js

@@ -0,0 +1,45 @@
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FlexRowLayout = t0 => {
+  const $ = _c(7);
+  const {
+    children,
+    styles: t1
+  } = t0;
+  let t2;
+  if ($[0] !== t1) {
+    t2 = t1 === undefined ? {} : t1;
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const styles = t2;
+  let t3;
+  if ($[2] !== styles) {
+    t3 = {
+      display: "flex",
+      flexDirection: "row",
+      gap: 16,
+      ...styles
+    };
+    $[2] = styles;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== children || $[5] !== t3) {
+    t4 = /*#__PURE__*/_jsx("div", {
+      style: t3,
+      children: children
+    });
+    $[4] = children;
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  return t4;
+};
+export default FlexRowLayout;

package/dist/components/HighlightSyncedECharts/index.d.ts

@@ -0,0 +1,47 @@
+import type { EChartsHOCType } from "../ECharts";
+export type Highlight = {
+    source: string;
+    index: number;
+} | undefined;
+/**
+ * 为 {@linkcode HighlightSyncedECharts}/{@linkcode withHighlightSync | withHighlightSync(ECharts)}
+ * 提供联动上下文，只有同一个上下文内的 ECharts 会联动。
+ */
+export declare function HighlightProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * 获取当前高亮同步上下文的高亮状态和更新函数。
+ */
+export declare function useHighlight(): [Highlight, import("react").Dispatch<import("react").SetStateAction<Highlight>>];
+/**
+ * 在当前高亮同步上下文内消费高亮状态和更新函数。
+ */
+export declare const HighlightConsumer: import("react").Consumer<[Highlight, import("react").Dispatch<import("react").SetStateAction<Highlight>>]>;
+/**
+ * 为 ECharts 增加高亮同步能力。所有添加了该能力的 ECharts 的高亮位置都会同步。
+ * 还可以通过 {@linkcode useHighlight} 或者 {@linkcode HighlightConsumer}
+ * 将图的高亮与其它东西联动（例如使用 {@linkcode HighlightSyncedTable} 使图和表的高亮同步）。
+ *
+ * 请不要和 {@linkcode withConnector} 一同使用。
+ * 如果你只需要在图和图之间联动，不需要和图以外的东西联动，那么推荐使用 {@linkcode withConnector}。
+ *
+ * 必须包裹在 {@linkcode HighlightProvider} 内使用。
+ */
+export declare const withHighlightSync: EChartsHOCType<{
+    highlightSeriesIndex?: number;
+}>;
+/**
+ * 预置了高亮同步和自适应容器尺寸能力的 ECharts。
+ * 可以通过 {@linkcode useHighlight} 或者 {@linkcode HighlightConsumer}
+ * 将图的高亮与其它东西联动（例如使用 {@linkcode HighlightSyncedTable} 使图和表的高亮同步）。
+ *
+ * 必须包裹在 {@linkcode HighlightProvider} 内使用。
+ *
+ * @see {@linkcode withHighlightSync}
+ * @see {@linkcode withAutoResize}
+ */
+declare const HighlightSyncedECharts: import("../ECharts").EChartsComponentType<{
+    highlightSeriesIndex?: number;
+}>;
+export default HighlightSyncedECharts;

package/dist/components/HighlightSyncedECharts/index.js

@@ -0,0 +1,260 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, use, useEffect, useEffectEvent, useId, useImperativeHandle, useRef, useState } from "react";
+import { debugAssert } from "#src/utils/debug";
+import AutoResizedECharts from "../AutoResizedECharts"; // oxlint-disable-line no-unused-vars
+// oxlint-disable-line no-unused-vars
+
+// oxlint-disable-line no-unused-vars
+import { jsx as _jsx } from "react/jsx-runtime";
+const HighlightContext = /*#__PURE__*/createContext([undefined, () => {}]);
+
+/**
+ * 为 {@linkcode HighlightSyncedECharts}/{@linkcode withHighlightSync | withHighlightSync(ECharts)}
+ * 提供联动上下文，只有同一个上下文内的 ECharts 会联动。
+ */
+export function HighlightProvider(t0) {
+  const $ = _c(3);
+  const {
+    children
+  } = t0;
+  const getterSetter = useState(undefined);
+  let t1;
+  if ($[0] !== children || $[1] !== getterSetter) {
+    t1 = /*#__PURE__*/_jsx(HighlightContext.Provider, {
+      value: getterSetter,
+      children: children
+    });
+    $[0] = children;
+    $[1] = getterSetter;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+/**
+ * 获取当前高亮同步上下文的高亮状态和更新函数。
+ */
+export function useHighlight() {
+  return use(HighlightContext);
+}
+
+/**
+ * 在当前高亮同步上下文内消费高亮状态和更新函数。
+ */
+export const HighlightConsumer = HighlightContext.Consumer;
+
+/**
+ * 为 ECharts 增加高亮同步能力。所有添加了该能力的 ECharts 的高亮位置都会同步。
+ * 还可以通过 {@linkcode useHighlight} 或者 {@linkcode HighlightConsumer}
+ * 将图的高亮与其它东西联动（例如使用 {@linkcode HighlightSyncedTable} 使图和表的高亮同步）。
+ *
+ * 请不要和 {@linkcode withConnector} 一同使用。
+ * 如果你只需要在图和图之间联动，不需要和图以外的东西联动，那么推荐使用 {@linkcode withConnector}。
+ *
+ * 必须包裹在 {@linkcode HighlightProvider} 内使用。
+ */
+export const withHighlightSync = ECharts => function HighlightSyncedECharts(props) {
+  "use memo";
+
+  const $ = _c(27);
+  let onInit;
+  let outerRef;
+  let rest;
+  let t0;
+  if ($[0] !== props) {
+    ({
+      ref: outerRef,
+      onInit,
+      highlightSeriesIndex: t0,
+      ...rest
+    } = props);
+    $[0] = props;
+    $[1] = onInit;
+    $[2] = outerRef;
+    $[3] = rest;
+    $[4] = t0;
+  } else {
+    onInit = $[1];
+    outerRef = $[2];
+    rest = $[3];
+    t0 = $[4];
+  }
+  const highlightSeriesIndex = t0 === undefined ? 0 : t0;
+  const id = useId();
+  const [highlight, setHighlight] = use(HighlightContext);
+  const ref = useRef(null);
+  let t1;
+  let t2;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      debugAssert(ref.current, "ref should be connected");
+      return ref.current;
+    };
+    t2 = [];
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t1 = $[5];
+    t2 = $[6];
+  }
+  useImperativeHandle(outerRef, t1, t2);
+  let t3;
+  if ($[7] !== highlightSeriesIndex || $[8] !== id) {
+    t3 = (instance, highlight_0) => {
+      if (highlight_0) {
+        if (highlight_0.source === id) {
+          return;
+        }
+        const option = instance.getOption();
+        const series = option.series;
+        const targetSeries = series[highlightSeriesIndex];
+        const dataLength = Array.isArray(targetSeries?.data) ? targetSeries.data.length : 0;
+        if (highlight_0.index < 0 || highlight_0.index >= dataLength) {
+          return;
+        }
+        instance.setOption({
+          xAxis: {
+            axisPointer: {
+              status: "show",
+              value: highlight_0.index
+            }
+          }
+        });
+        instance.dispatchAction({
+          type: "highlight",
+          seriesIndex: highlightSeriesIndex,
+          dataIndexInside: highlight_0.index
+        }, {
+          silent: true
+        });
+        instance.dispatchAction({
+          type: "showTip",
+          seriesIndex: highlightSeriesIndex,
+          dataIndex: highlight_0.index
+        }, {
+          silent: true
+        });
+      } else {
+        instance.setOption({
+          xAxis: {
+            axisPointer: {
+              status: "hide",
+              value: undefined
+            }
+          }
+        });
+        instance.dispatchAction({
+          type: "downplay",
+          seriesIndex: highlightSeriesIndex
+        }, {
+          silent: true
+        });
+        instance.dispatchAction({
+          type: "hideTip"
+        }, {
+          silent: true
+        });
+      }
+    };
+    $[7] = highlightSeriesIndex;
+    $[8] = id;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  const onHighlightChange = useEffectEvent(t3);
+  let t4;
+  if ($[10] !== highlight || $[11] !== onHighlightChange) {
+    t4 = () => {
+      const instance_0 = ref.current?.instance;
+      if (!instance_0) {
+        return;
+      }
+      onHighlightChange(instance_0, highlight);
+    };
+    $[10] = highlight;
+    $[11] = onHighlightChange;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  let t5;
+  if ($[13] !== highlight) {
+    t5 = [highlight];
+    $[13] = highlight;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  useEffect(t4, t5);
+  let t6;
+  if ($[15] !== highlight || $[16] !== highlightSeriesIndex || $[17] !== id || $[18] !== setHighlight) {
+    t6 = event => {
+      if (!event.batch) {
+        return;
+      }
+      const elementEvent = event.batch.find(it => it.seriesIndex === highlightSeriesIndex);
+      if (!elementEvent) {
+        return;
+      }
+      if (highlight?.source === id && highlight.index === elementEvent.dataIndexInside) {
+        return;
+      }
+      setHighlight({
+        source: id,
+        index: elementEvent.dataIndexInside
+      });
+    };
+    $[15] = highlight;
+    $[16] = highlightSeriesIndex;
+    $[17] = id;
+    $[18] = setHighlight;
+    $[19] = t6;
+  } else {
+    t6 = $[19];
+  }
+  const onHighlight = useEffectEvent(t6);
+  let t7;
+  if ($[20] !== onHighlight || $[21] !== onInit || $[22] !== setHighlight) {
+    t7 = instance_1 => {
+      instance_1.on("highlight", event_0 => onHighlight(event_0));
+      instance_1.on("downplay", () => setHighlight(undefined));
+      return onInit?.(instance_1);
+    };
+    $[20] = onHighlight;
+    $[21] = onInit;
+    $[22] = setHighlight;
+    $[23] = t7;
+  } else {
+    t7 = $[23];
+  }
+  let t8;
+  if ($[24] !== rest || $[25] !== t7) {
+    t8 = /*#__PURE__*/_jsx(ECharts, {
+      ref: ref,
+      onInit: t7,
+      ...rest
+    });
+    $[24] = rest;
+    $[25] = t7;
+    $[26] = t8;
+  } else {
+    t8 = $[26];
+  }
+  return t8;
+};
+
+/**
+ * 预置了高亮同步和自适应容器尺寸能力的 ECharts。
+ * 可以通过 {@linkcode useHighlight} 或者 {@linkcode HighlightConsumer}
+ * 将图的高亮与其它东西联动（例如使用 {@linkcode HighlightSyncedTable} 使图和表的高亮同步）。
+ *
+ * 必须包裹在 {@linkcode HighlightProvider} 内使用。
+ *
+ * @see {@linkcode withHighlightSync}
+ * @see {@linkcode withAutoResize}
+ */
+const HighlightSyncedECharts = withHighlightSync(AutoResizedECharts);
+export default HighlightSyncedECharts;