@tsingroc/tsingroc-components 5.0.2 → 5.1.0

package/dist/components/BarLineChart/BarLineChart.module.css

@@ -0,0 +1,10 @@
+.barLineChart {
+  height: 100%;
+  width: 100%;
+  border: 0px;
+}
+
+.barLineChartContainer {
+  flex: 1;
+  min-height: 0;
+}

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

@@ -0,0 +1,66 @@
+export interface BarSeriesConfig {
+    name: string;
+    data: (number | null | undefined)[];
+    option?: {
+        color?: string;
+        barWidth?: string | number;
+        tooltip?: {
+            valueFormatter?: (value: unknown) => string;
+        };
+        [key: string]: unknown;
+    };
+}
+export interface LineSeriesConfig {
+    name: string;
+    data: (number | null | undefined)[];
+    option?: {
+        color?: string;
+        smooth?: boolean;
+        lineStyle?: {
+            width?: number;
+            type?: "solid" | "dashed" | "dotted";
+        };
+        tooltip?: {
+            valueFormatter?: (value: unknown) => string;
+        };
+        [key: string]: unknown;
+    };
+}
+export interface BarLineChartProps {
+    title: string;
+    chartClassName?: string;
+    gridOption?: {
+        left?: string | number;
+        top?: string | number;
+        bottom?: string | number;
+        right?: string | number;
+    };
+    xAxisData?: string[];
+    xAxisFormat?: "datetime" | "date" | "time";
+    xAxisInterval?: number | ((dataLength: number) => number);
+    useUtc?: boolean;
+    barSeries?: BarSeriesConfig[];
+    lineSeries?: LineSeriesConfig[];
+    /** Optional. If omitted, derived from lineSeries + barSeries to guarantee match. */
+    legendData?: string[];
+    legendOption?: {
+        left?: string | number;
+        right?: string | number;
+        top?: string | number;
+        bottom?: string | number;
+        orient?: "horizontal" | "vertical";
+        [key: string]: unknown;
+    };
+    showTitle?: boolean;
+    barYAxisName?: string;
+    lineYAxisName?: string;
+    barYAxisNameLocation?: "start" | "middle" | "end";
+    lineYAxisNameLocation?: "start" | "middle" | "end";
+    barYAxisNameGap?: number;
+    lineYAxisNameGap?: number;
+    barYAxisNamePadding?: number | number[];
+    lineYAxisNamePadding?: number | number[];
+    barYAxisMin?: number;
+}
+declare const BarLineChart: ({ title, chartClassName, gridOption, xAxisData, xAxisFormat, xAxisInterval, useUtc, barSeries, lineSeries, legendData: _legendData, legendOption, showTitle, barYAxisName, lineYAxisName, barYAxisNameLocation, lineYAxisNameLocation, barYAxisNameGap, lineYAxisNameGap, barYAxisNamePadding, lineYAxisNamePadding, }: BarLineChartProps) => import("react/jsx-runtime").JSX.Element;
+export default BarLineChart;

package/dist/components/BarLineChart/index.js

@@ -0,0 +1,590 @@
+import { c as _c } from "react/compiler-runtime";
+import { Card } from "antd";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import * as echarts from "#src/echarts";
+import { COLOR_CHART_AXIS } from "#src/utils/constants";
+import HighlightSyncedECharts from "../HighlightSyncedECharts";
+import styles from "./BarLineChart.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+dayjs.extend(utc);
+const DEFAULT_GRID_OPTION = {
+  left: "3%",
+  top: 20,
+  bottom: 0,
+  right: 0
+};
+const AXIS_COLOR = "#ADADAD";
+const AXIS_FONT_SIZE = 11;
+const generateDefaultHourlyData = useUtc => {
+  if (useUtc) {
+    // UTC mode: generate timestamps with Z suffix
+    return Array.from({
+      length: 24
+    }, (_, i) => dayjs.utc().startOf("day").add(i, "hour").toISOString());
+  }
+  // Local mode: generate timestamps with +08:00 offset to match API format
+  return Array.from({
+    length: 24
+  }, (_, i) => dayjs().startOf("day").add(i, "hour").format("YYYY-MM-DDTHH:mm:ss+08:00"));
+};
+const formatTimeData = (timeData, useUtc, format) => timeData.map(t => {
+  const parsed = useUtc ? dayjs.utc(t) : dayjs(t);
+  return format === "date" ? parsed.format("YYYY-MM-DD") : format === "time" ? parsed.format("HH:mm") : parsed.format("MM-DD HH:mm");
+});
+const calculateInterval = (xAxisInterval, isDefaultHourlyData, dataLength) => {
+  if (xAxisInterval !== undefined) {
+    return typeof xAxisInterval === "function" ? xAxisInterval(dataLength) : xAxisInterval;
+  }
+  return isDefaultHourlyData ? 1 : undefined;
+};
+const BarLineChart = t0 => {
+  const $ = _c(119);
+  const {
+    title,
+    chartClassName,
+    gridOption,
+    xAxisData,
+    xAxisFormat: t1,
+    xAxisInterval,
+    useUtc: t2,
+    barSeries: t3,
+    lineSeries: t4,
+    legendData: _legendData,
+    legendOption,
+    showTitle: t5,
+    barYAxisName: t6,
+    lineYAxisName: t7,
+    barYAxisNameLocation: t8,
+    lineYAxisNameLocation: t9,
+    barYAxisNameGap: t10,
+    lineYAxisNameGap: t11,
+    barYAxisNamePadding,
+    lineYAxisNamePadding
+  } = t0;
+  const xAxisFormat = t1 === undefined ? "datetime" : t1;
+  const useUtc = t2 === undefined ? false : t2;
+  let T0;
+  let T1;
+  let alignedBarAxisMax;
+  let alignedLineAxisMax;
+  let barAxisInterval;
+  let barYAxisName;
+  let barYAxisNameGap;
+  let barYAxisNameLocation;
+  let formattedXAxisData;
+  let interval;
+  let lineAxisInterval;
+  let lineYAxisName;
+  let lineYAxisNameGap;
+  let lineYAxisNameLocation;
+  let series;
+  let showTitle;
+  let t12;
+  let t13;
+  let t14;
+  let t15;
+  let t16;
+  let t17;
+  if ($[0] !== _legendData || $[1] !== chartClassName || $[2] !== gridOption?.bottom || $[3] !== gridOption?.left || $[4] !== gridOption?.right || $[5] !== gridOption?.top || $[6] !== legendOption || $[7] !== t10 || $[8] !== t11 || $[9] !== t3 || $[10] !== t4 || $[11] !== t5 || $[12] !== t6 || $[13] !== t7 || $[14] !== t8 || $[15] !== t9 || $[16] !== title || $[17] !== useUtc || $[18] !== xAxisData || $[19] !== xAxisFormat || $[20] !== xAxisInterval) {
+    const barSeries = t3 === undefined ? [] : t3;
+    const lineSeries = t4 === undefined ? [] : t4;
+    showTitle = t5 === undefined ? false : t5;
+    barYAxisName = t6 === undefined ? "\u5355\u4F4D\uFF1A\u5143" : t6;
+    lineYAxisName = t7 === undefined ? "\u5355\u4F4D\uFF1AMWh" : t7;
+    barYAxisNameLocation = t8 === undefined ? "end" : t8;
+    lineYAxisNameLocation = t9 === undefined ? "end" : t9;
+    barYAxisNameGap = t10 === undefined ? 10 : t10;
+    lineYAxisNameGap = t11 === undefined ? 10 : t11;
+    const hasData = Boolean(xAxisData?.length);
+    let t18;
+    if ($[43] !== hasData || $[44] !== useUtc || $[45] !== xAxisData) {
+      t18 = hasData ? xAxisData : generateDefaultHourlyData(useUtc);
+      $[43] = hasData;
+      $[44] = useUtc;
+      $[45] = xAxisData;
+      $[46] = t18;
+    } else {
+      t18 = $[46];
+    }
+    const rawXAxisData = t18;
+    let t19;
+    if ($[47] !== rawXAxisData || $[48] !== useUtc || $[49] !== xAxisFormat) {
+      t19 = formatTimeData(rawXAxisData, useUtc, xAxisFormat);
+      $[47] = rawXAxisData;
+      $[48] = useUtc;
+      $[49] = xAxisFormat;
+      $[50] = t19;
+    } else {
+      t19 = $[50];
+    }
+    formattedXAxisData = t19;
+    const t20 = !hasData;
+    let t21;
+    if ($[51] !== rawXAxisData.length || $[52] !== t20 || $[53] !== xAxisInterval) {
+      t21 = calculateInterval(xAxisInterval, t20, rawXAxisData.length);
+      $[51] = rawXAxisData.length;
+      $[52] = t20;
+      $[53] = xAxisInterval;
+      $[54] = t21;
+    } else {
+      t21 = $[54];
+    }
+    interval = t21;
+    const finalGridOption = {
+      left: gridOption?.left ?? DEFAULT_GRID_OPTION.left,
+      top: gridOption?.top ?? DEFAULT_GRID_OPTION.top,
+      bottom: gridOption?.bottom ?? DEFAULT_GRID_OPTION.bottom,
+      right: gridOption?.right ?? DEFAULT_GRID_OPTION.right
+    };
+    series = [...barSeries.flatMap(_temp), ...lineSeries.flatMap(_temp2)];
+    const legendData = _legendData && _legendData.length > 0 ? _legendData : [...lineSeries, ...barSeries].map(_temp3);
+    const barAxisValues = barSeries.flatMap(_temp4).filter(_temp5);
+    const lineAxisValues = lineSeries.flatMap(_temp6).filter(_temp7);
+    const barAxisMaxAbs = barAxisValues.length > 0 ? Math.max(...barAxisValues.map(_temp8)) : 1500;
+    const lineAxisMaxAbs = lineAxisValues.length > 0 ? Math.max(...lineAxisValues.map(_temp9)) : 600;
+    const barAxisMax = barAxisMaxAbs * 1.1;
+    const lineAxisMax = lineAxisMaxAbs * 1.1;
+    barAxisInterval = Math.ceil(barAxisMax / 5 / 100) * 100;
+    lineAxisInterval = Math.ceil(lineAxisMax / 5 / 50) * 50;
+    alignedBarAxisMax = Math.ceil(barAxisMax / barAxisInterval) * barAxisInterval;
+    alignedLineAxisMax = Math.ceil(lineAxisMax / lineAxisInterval) * lineAxisInterval;
+    T1 = Card;
+    t15 = styles.barLineChart;
+    let t22;
+    if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
+      t16 = {
+        body: {
+          height: "100%",
+          width: "100%",
+          padding: 0,
+          minHeight: 200,
+          display: "flex",
+          flexDirection: "column"
+        }
+      };
+      t22 = {
+        fontSize: "1.1rem"
+      };
+      $[55] = t16;
+      $[56] = t22;
+    } else {
+      t16 = $[55];
+      t22 = $[56];
+    }
+    if ($[57] !== title) {
+      t17 = /*#__PURE__*/_jsx("div", {
+        style: t22,
+        children: title
+      });
+      $[57] = title;
+      $[58] = t17;
+    } else {
+      t17 = $[58];
+    }
+    T0 = HighlightSyncedECharts;
+    t13 = chartClassName ?? styles.barLineChartContainer;
+    if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
+      t14 = {
+        height: "100%",
+        width: "100%"
+      };
+      $[59] = t14;
+    } else {
+      t14 = $[59];
+    }
+    t12 = echarts.buildEChartsOption({}, echarts.grid({
+      option: finalGridOption
+    }), echarts.legend({
+      data: legendData,
+      option: legendOption
+    }), echarts.tooltip({
+      backgroundColor: "rgba(255,255,255,0.95)",
+      borderColor: COLOR_CHART_AXIS
+    }));
+    $[0] = _legendData;
+    $[1] = chartClassName;
+    $[2] = gridOption?.bottom;
+    $[3] = gridOption?.left;
+    $[4] = gridOption?.right;
+    $[5] = gridOption?.top;
+    $[6] = legendOption;
+    $[7] = t10;
+    $[8] = t11;
+    $[9] = t3;
+    $[10] = t4;
+    $[11] = t5;
+    $[12] = t6;
+    $[13] = t7;
+    $[14] = t8;
+    $[15] = t9;
+    $[16] = title;
+    $[17] = useUtc;
+    $[18] = xAxisData;
+    $[19] = xAxisFormat;
+    $[20] = xAxisInterval;
+    $[21] = T0;
+    $[22] = T1;
+    $[23] = alignedBarAxisMax;
+    $[24] = alignedLineAxisMax;
+    $[25] = barAxisInterval;
+    $[26] = barYAxisName;
+    $[27] = barYAxisNameGap;
+    $[28] = barYAxisNameLocation;
+    $[29] = formattedXAxisData;
+    $[30] = interval;
+    $[31] = lineAxisInterval;
+    $[32] = lineYAxisName;
+    $[33] = lineYAxisNameGap;
+    $[34] = lineYAxisNameLocation;
+    $[35] = series;
+    $[36] = showTitle;
+    $[37] = t12;
+    $[38] = t13;
+    $[39] = t14;
+    $[40] = t15;
+    $[41] = t16;
+    $[42] = t17;
+  } else {
+    T0 = $[21];
+    T1 = $[22];
+    alignedBarAxisMax = $[23];
+    alignedLineAxisMax = $[24];
+    barAxisInterval = $[25];
+    barYAxisName = $[26];
+    barYAxisNameGap = $[27];
+    barYAxisNameLocation = $[28];
+    formattedXAxisData = $[29];
+    interval = $[30];
+    lineAxisInterval = $[31];
+    lineYAxisName = $[32];
+    lineYAxisNameGap = $[33];
+    lineYAxisNameLocation = $[34];
+    series = $[35];
+    showTitle = $[36];
+    t12 = $[37];
+    t13 = $[38];
+    t14 = $[39];
+    t15 = $[40];
+    t16 = $[41];
+    t17 = $[42];
+  }
+  let t18;
+  if ($[60] !== interval) {
+    t18 = {
+      interval,
+      color: AXIS_COLOR,
+      fontSize: AXIS_FONT_SIZE
+    };
+    $[60] = interval;
+    $[61] = t18;
+  } else {
+    t18 = $[61];
+  }
+  let t19;
+  if ($[62] === Symbol.for("react.memo_cache_sentinel")) {
+    t19 = {
+      lineStyle: {
+        color: AXIS_COLOR
+      }
+    };
+    $[62] = t19;
+  } else {
+    t19 = $[62];
+  }
+  let t20;
+  if ($[63] !== formattedXAxisData || $[64] !== t18) {
+    t20 = {
+      type: "category",
+      data: formattedXAxisData,
+      boundaryGap: true,
+      axisLabel: t18,
+      axisLine: t19,
+      alignTicks: true
+    };
+    $[63] = formattedXAxisData;
+    $[64] = t18;
+    $[65] = t20;
+  } else {
+    t20 = $[65];
+  }
+  let t21;
+  if ($[66] !== barYAxisNamePadding) {
+    t21 = barYAxisNamePadding && {
+      padding: barYAxisNamePadding
+    };
+    $[66] = barYAxisNamePadding;
+    $[67] = t21;
+  } else {
+    t21 = $[67];
+  }
+  let t22;
+  if ($[68] !== t21) {
+    t22 = {
+      color: COLOR_CHART_AXIS,
+      ...t21
+    };
+    $[68] = t21;
+    $[69] = t22;
+  } else {
+    t22 = $[69];
+  }
+  let t23;
+  if ($[70] === Symbol.for("react.memo_cache_sentinel")) {
+    t23 = {
+      color: AXIS_COLOR,
+      fontSize: AXIS_FONT_SIZE
+    };
+    $[70] = t23;
+  } else {
+    t23 = $[70];
+  }
+  let t24;
+  if ($[71] === Symbol.for("react.memo_cache_sentinel")) {
+    t24 = {
+      show: false,
+      lineStyle: {
+        color: AXIS_COLOR
+      }
+    };
+    $[71] = t24;
+  } else {
+    t24 = $[71];
+  }
+  const t25 = -alignedBarAxisMax;
+  let t26;
+  if ($[72] === Symbol.for("react.memo_cache_sentinel")) {
+    t26 = {
+      show: true
+    };
+    $[72] = t26;
+  } else {
+    t26 = $[72];
+  }
+  let t27;
+  if ($[73] !== alignedBarAxisMax || $[74] !== barAxisInterval || $[75] !== barYAxisName || $[76] !== barYAxisNameGap || $[77] !== barYAxisNameLocation || $[78] !== t22 || $[79] !== t25) {
+    t27 = {
+      type: "value",
+      name: barYAxisName,
+      nameLocation: barYAxisNameLocation,
+      nameGap: barYAxisNameGap,
+      nameTextStyle: t22,
+      axisLabel: t23,
+      axisLine: t24,
+      position: "left",
+      alignTicks: true,
+      min: t25,
+      max: alignedBarAxisMax,
+      interval: barAxisInterval,
+      splitLine: t26
+    };
+    $[73] = alignedBarAxisMax;
+    $[74] = barAxisInterval;
+    $[75] = barYAxisName;
+    $[76] = barYAxisNameGap;
+    $[77] = barYAxisNameLocation;
+    $[78] = t22;
+    $[79] = t25;
+    $[80] = t27;
+  } else {
+    t27 = $[80];
+  }
+  let t28;
+  if ($[81] !== lineYAxisNamePadding) {
+    t28 = lineYAxisNamePadding && {
+      padding: lineYAxisNamePadding
+    };
+    $[81] = lineYAxisNamePadding;
+    $[82] = t28;
+  } else {
+    t28 = $[82];
+  }
+  let t29;
+  if ($[83] !== t28) {
+    t29 = {
+      color: COLOR_CHART_AXIS,
+      ...t28
+    };
+    $[83] = t28;
+    $[84] = t29;
+  } else {
+    t29 = $[84];
+  }
+  let t30;
+  if ($[85] === Symbol.for("react.memo_cache_sentinel")) {
+    t30 = {
+      color: AXIS_COLOR,
+      fontSize: AXIS_FONT_SIZE
+    };
+    $[85] = t30;
+  } else {
+    t30 = $[85];
+  }
+  let t31;
+  if ($[86] === Symbol.for("react.memo_cache_sentinel")) {
+    t31 = {
+      show: false,
+      lineStyle: {
+        color: AXIS_COLOR
+      }
+    };
+    $[86] = t31;
+  } else {
+    t31 = $[86];
+  }
+  const t32 = -alignedLineAxisMax;
+  let t33;
+  if ($[87] === Symbol.for("react.memo_cache_sentinel")) {
+    t33 = {
+      show: true
+    };
+    $[87] = t33;
+  } else {
+    t33 = $[87];
+  }
+  let t34;
+  if ($[88] !== alignedLineAxisMax || $[89] !== lineAxisInterval || $[90] !== lineYAxisName || $[91] !== lineYAxisNameGap || $[92] !== lineYAxisNameLocation || $[93] !== t29 || $[94] !== t32) {
+    t34 = {
+      type: "value",
+      name: lineYAxisName,
+      nameLocation: lineYAxisNameLocation,
+      nameGap: lineYAxisNameGap,
+      nameTextStyle: t29,
+      axisLabel: t30,
+      axisLine: t31,
+      position: "right",
+      alignTicks: true,
+      min: t32,
+      max: alignedLineAxisMax,
+      interval: lineAxisInterval,
+      splitLine: t33,
+      smooth: false
+    };
+    $[88] = alignedLineAxisMax;
+    $[89] = lineAxisInterval;
+    $[90] = lineYAxisName;
+    $[91] = lineYAxisNameGap;
+    $[92] = lineYAxisNameLocation;
+    $[93] = t29;
+    $[94] = t32;
+    $[95] = t34;
+  } else {
+    t34 = $[95];
+  }
+  let t35;
+  if ($[96] !== t27 || $[97] !== t34) {
+    t35 = [t27, t34];
+    $[96] = t27;
+    $[97] = t34;
+    $[98] = t35;
+  } else {
+    t35 = $[98];
+  }
+  let t36;
+  if ($[99] !== showTitle || $[100] !== title) {
+    t36 = showTitle && {
+      title: {
+        text: title,
+        left: "center",
+        top: 10
+      }
+    };
+    $[99] = showTitle;
+    $[100] = title;
+    $[101] = t36;
+  } else {
+    t36 = $[101];
+  }
+  let t37;
+  if ($[102] !== series || $[103] !== t12 || $[104] !== t20 || $[105] !== t35 || $[106] !== t36) {
+    t37 = {
+      ...t12,
+      xAxis: t20,
+      yAxis: t35,
+      series,
+      ...t36
+    };
+    $[102] = series;
+    $[103] = t12;
+    $[104] = t20;
+    $[105] = t35;
+    $[106] = t36;
+    $[107] = t37;
+  } else {
+    t37 = $[107];
+  }
+  let t38;
+  if ($[108] !== T0 || $[109] !== t13 || $[110] !== t14 || $[111] !== t37) {
+    t38 = /*#__PURE__*/_jsx(T0, {
+      className: t13,
+      style: t14,
+      option: t37
+    });
+    $[108] = T0;
+    $[109] = t13;
+    $[110] = t14;
+    $[111] = t37;
+    $[112] = t38;
+  } else {
+    t38 = $[112];
+  }
+  let t39;
+  if ($[113] !== T1 || $[114] !== t15 || $[115] !== t16 || $[116] !== t17 || $[117] !== t38) {
+    t39 = /*#__PURE__*/_jsxs(T1, {
+      className: t15,
+      styles: t16,
+      children: [t17, t38]
+    });
+    $[113] = T1;
+    $[114] = t15;
+    $[115] = t16;
+    $[116] = t17;
+    $[117] = t38;
+    $[118] = t39;
+  } else {
+    t39 = $[118];
+  }
+  return t39;
+};
+export default BarLineChart;
+function _temp(s) {
+  return echarts.barSeries({
+    name: s.name,
+    data: s.data,
+    option: {
+      ...s.option,
+      yAxisIndex: 0
+    }
+  }).series ?? [];
+}
+function _temp2(s_0) {
+  return echarts.lineSeries({
+    name: s_0.name,
+    data: s_0.data,
+    option: {
+      ...s_0.option,
+      yAxisIndex: 1
+    }
+  }).series ?? [];
+}
+function _temp3(s_1) {
+  return s_1.name;
+}
+function _temp4(s_2) {
+  return s_2.data;
+}
+function _temp5(value) {
+  return typeof value === "number";
+}
+function _temp6(s_3) {
+  return s_3.data;
+}
+function _temp7(value_0) {
+  return typeof value_0 === "number";
+}
+function _temp8(v) {
+  return Math.abs(v);
+}
+function _temp9(v_0) {
+  return Math.abs(v_0);
+}

package/dist/components/BaseBarChart/BaseBarChart.module.css

@@ -0,0 +1,12 @@
+.root {
+  min-height: 0;
+  height: 100%;
+  width: 100%;
+  border: 0;
+  border-radius: 0;
+}
+
+.chartContainer {
+  height: 100%;
+  width: 100%;
+}

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

@@ -0,0 +1,33 @@
+export interface BarSeriesConfig {
+    name: string;
+    /** Bar values per category. Use `null` to create gaps (no bar rendered). */
+    data: Array<number | null>;
+    /** Single color for all bars, or omit when using per-point styling (e.g. itemStyle in option). */
+    color?: string;
+    /** ECharts series option (e.g. barWidth, itemStyle, tooltip). */
+    option?: Record<string, unknown>;
+}
+export interface BaseBarChartProps {
+    /** Chart title shown above the chart. */
+    title?: string;
+    /** X-axis category labels (e.g. time "00:00", "02:00", ...). */
+    categories: string[];
+    /** Bar series: each has name, data array, optional color and option. */
+    series: BarSeriesConfig[];
+    /** Y-axis label (e.g. "收益（元）"). */
+    yAxisName?: string;
+    /** Grid insets. */
+    gridOption?: {
+        left?: string | number;
+        top?: string | number;
+        bottom?: string | number;
+        right?: string | number;
+    };
+    /** Tooltip value formatter (e.g. value => `¥${value.toFixed(2)}`). */
+    tooltipValueFormatter?: (value: number) => string;
+    /** Show legend with series names. */
+    showLegend?: boolean;
+    /** Show y-axis split lines (grid). Default false. */
+    showSplitLine?: boolean;
+}
+export default function BaseBarChart({ title, categories, series, yAxisName, gridOption, tooltipValueFormatter, showLegend, showSplitLine, }: BaseBarChartProps): import("react/jsx-runtime").JSX.Element;