@tsingroc/tsingroc-components 5.0.2 → 5.1.0

package/dist/pages/DayAheadReviewPage/components/ReviewLineChart/index.js

@@ -0,0 +1,398 @@
+import { c as _c } from "react/compiler-runtime";
+import { Card } from "antd";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import { HighlightSyncedECharts } from "#src";
+import * as echarts from "#src/echarts";
+import { COLOR_CHART_AXIS } from "#src/utils/constants";
+import styles from "./ReviewLineChart.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;
+/**
+ * Generate default hourly time data (0:00 to 23:00)
+ * @param useUtc - If true, generate UTC timestamps (Z suffix); otherwise generate local timestamps with +08:00 offset
+ */
+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"));
+};
+
+/**
+ * Format time strings to HH:mm format or keep date format (YYYY-MM-DD or MM-DD)
+ */
+const formatTimeData = (timeData, useUtc, excludeTrailing24, isDefaultHourlyData) => {
+  if (timeData.length === 0) {
+    // Empty chart - show appropriate placeholders based on chart type
+    if (isDefaultHourlyData) {
+      // Hourly chart: show time labels from 00:00 to 23:00
+      return Array.from({
+        length: 24
+      }, (_, i) => `${String(i).padStart(2, "0")}:00`);
+    }
+    // Daily chart: show MM-DD format placeholders
+    return ["03-01", "03-02", "03-03"];
+  }
+
+  // Check if data is in daily date format (YYYY-MM-DD or MM-DD) vs time format
+  const firstItem = timeData[0];
+  const isDailyDateFormat = firstItem?.match(/^\d{4}-\d{2}-\d{2}$/) || firstItem?.match(/^\d{2}-\d{2}$/);
+  if (isDailyDateFormat) {
+    // Keep date format as-is (either YYYY-MM-DD or MM-DD)
+    return timeData;
+  }
+
+  // Original time formatting logic for HH:mm format
+  const formatted = timeData.map(timeStr => {
+    const parsed = useUtc ? dayjs.utc(timeStr) : dayjs(timeStr);
+    return parsed.format("HH:mm");
+  });
+
+  // Only append "24:00" if explicitly requested (excludeTrailing24 is false)
+  // This prevents mismatch between x-axis labels and series data length
+  if (excludeTrailing24) {
+    return formatted;
+  }
+
+  // Check if the last time point is already 23:XX (close to end of day)
+  // If so, don't append "24:00" to avoid series data mismatch
+  const lastFormatted = formatted[formatted.length - 1];
+  if (lastFormatted?.startsWith("23")) {
+    return formatted;
+  }
+  return formatted.concat("24:00");
+};
+
+/**
+ * Calculate x-axis interval for label display
+ */
+const calculateInterval = (xAxisInterval, timeIntervalMinutes, hasData, isDefaultHourlyData, dataLength) => {
+  // If explicitly provided, use it
+  if (xAxisInterval !== undefined) {
+    return typeof xAxisInterval === "function" ? xAxisInterval(dataLength) : xAxisInterval;
+  }
+
+  // Calculate default based on time interval (show every 2 hours)
+  if (hasData && timeIntervalMinutes !== undefined) {
+    return 120 / timeIntervalMinutes - 1;
+  }
+
+  // Default hourly data: show every 2 hours (interval 1)
+  if (isDefaultHourlyData) {
+    return 1;
+  }
+  return undefined;
+};
+const ReviewLineChart = t0 => {
+  const $ = _c(49);
+  const {
+    title,
+    className,
+    chartClassName,
+    gridOption,
+    xAxisData,
+    xAxisInterval,
+    timeIntervalMinutes,
+    useUtc: t1,
+    excludeTrailing24: t2,
+    series,
+    legendData,
+    legendOption,
+    legendSelected,
+    showTitle: t3,
+    yAxisName,
+    yAxisNameLocation,
+    yAxisNamePadding
+  } = t0;
+  const useUtc = t1 === undefined ? false : t1;
+  const excludeTrailing24 = t2 === undefined ? false : t2;
+  const showTitle = t3 === undefined ? false : t3;
+  const hasData = Boolean(xAxisData && xAxisData.length > 0);
+  let T0;
+  let T1;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[0] !== chartClassName || $[1] !== className || $[2] !== excludeTrailing24 || $[3] !== gridOption?.bottom || $[4] !== gridOption?.left || $[5] !== gridOption?.right || $[6] !== gridOption?.top || $[7] !== hasData || $[8] !== legendData || $[9] !== legendOption || $[10] !== legendSelected || $[11] !== series || $[12] !== timeIntervalMinutes || $[13] !== title || $[14] !== useUtc || $[15] !== xAxisData || $[16] !== xAxisInterval || $[17] !== yAxisName || $[18] !== yAxisNameLocation || $[19] !== yAxisNamePadding) {
+    const effectiveXAxisData = hasData && xAxisData ? xAxisData : generateDefaultHourlyData(useUtc);
+    const isDefaultHourlyData = !hasData;
+    const firstItem = effectiveXAxisData[0];
+    const isDailyDateFormat = firstItem?.match(/^\d{4}-\d{2}-\d{2}$/) || firstItem?.match(/^\d{2}-\d{2}$/);
+    const formattedXAxisData = formatTimeData(effectiveXAxisData, useUtc, excludeTrailing24, isDefaultHourlyData);
+    const interval = calculateInterval(xAxisInterval, timeIntervalMinutes, hasData, isDefaultHourlyData, effectiveXAxisData.length);
+    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
+    };
+    T1 = Card;
+    t7 = className ?? styles.reviewLineChart;
+    let t10;
+    if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+      t8 = {
+        body: {
+          height: "100%",
+          width: "100%",
+          padding: 0,
+          minHeight: 200,
+          display: "flex",
+          flexDirection: "column"
+        }
+      };
+      t10 = {
+        fontSize: "1.1rem"
+      };
+      $[28] = t10;
+      $[29] = t8;
+    } else {
+      t10 = $[28];
+      t8 = $[29];
+    }
+    if ($[30] !== title) {
+      t9 = /*#__PURE__*/_jsx("div", {
+        style: t10,
+        children: /*#__PURE__*/_jsx("span", {
+          children: title
+        })
+      });
+      $[30] = title;
+      $[31] = t9;
+    } else {
+      t9 = $[31];
+    }
+    T0 = HighlightSyncedECharts;
+    t5 = chartClassName ?? styles.reviewLineChartContainer;
+    if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = {
+        height: "100%",
+        width: "100%"
+      };
+      $[32] = t6;
+    } else {
+      t6 = $[32];
+    }
+    t4 = echarts.buildEChartsOption({}, echarts.grid({
+      option: finalGridOption,
+      xAxis: {
+        type: "category",
+        data: formattedXAxisData,
+        boundaryGap: false,
+        show: true,
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: AXIS_COLOR,
+            width: 1
+          }
+        },
+        axisTick: {
+          show: true,
+          ...(interval !== undefined && {
+            interval
+          })
+        },
+        axisLabel: {
+          show: true,
+          ...(interval !== undefined && {
+            interval
+          }),
+          color: AXIS_COLOR,
+          fontSize: AXIS_FONT_SIZE,
+          rotate: isDailyDateFormat && formattedXAxisData.length > 8 ? 45 : 0
+        },
+        axisPointer: {
+          animation: false
+        }
+      },
+      yAxis: {
+        name: yAxisName,
+        nameLocation: yAxisNameLocation,
+        show: true,
+        scale: false,
+        nameRotate: 0,
+        nameGap: 10,
+        nameTextStyle: yAxisName ? {
+          color: COLOR_CHART_AXIS,
+          ...(yAxisNamePadding && {
+            padding: yAxisNamePadding
+          })
+        } : undefined,
+        axisLabel: {
+          show: true,
+          color: AXIS_COLOR,
+          fontSize: AXIS_FONT_SIZE
+        },
+        axisLine: {
+          show: false
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            opacity: 0.5
+          }
+        }
+      },
+      series: series.map(_temp)
+    }), echarts.legend({
+      data: legendData,
+      option: {
+        itemHeight: 14,
+        itemWidth: 25,
+        itemGap: 12,
+        textStyle: {
+          fontSize: 12,
+          color: "#666"
+        },
+        ...(legendSelected && {
+          selected: legendSelected
+        }),
+        ...legendOption
+      }
+    }), echarts.tooltip({
+      backgroundColor: "rgba(255, 255, 255, 0.95)",
+      borderColor: COLOR_CHART_AXIS,
+      position: _temp2
+    }));
+    $[0] = chartClassName;
+    $[1] = className;
+    $[2] = excludeTrailing24;
+    $[3] = gridOption?.bottom;
+    $[4] = gridOption?.left;
+    $[5] = gridOption?.right;
+    $[6] = gridOption?.top;
+    $[7] = hasData;
+    $[8] = legendData;
+    $[9] = legendOption;
+    $[10] = legendSelected;
+    $[11] = series;
+    $[12] = timeIntervalMinutes;
+    $[13] = title;
+    $[14] = useUtc;
+    $[15] = xAxisData;
+    $[16] = xAxisInterval;
+    $[17] = yAxisName;
+    $[18] = yAxisNameLocation;
+    $[19] = yAxisNamePadding;
+    $[20] = T0;
+    $[21] = T1;
+    $[22] = t4;
+    $[23] = t5;
+    $[24] = t6;
+    $[25] = t7;
+    $[26] = t8;
+    $[27] = t9;
+  } else {
+    T0 = $[20];
+    T1 = $[21];
+    t4 = $[22];
+    t5 = $[23];
+    t6 = $[24];
+    t7 = $[25];
+    t8 = $[26];
+    t9 = $[27];
+  }
+  let t10;
+  if ($[33] !== showTitle) {
+    t10 = showTitle && {
+      title: {
+        left: "center",
+        top: 10,
+        textStyle: {
+          fontSize: 16,
+          fontWeight: 500
+        }
+      }
+    };
+    $[33] = showTitle;
+    $[34] = t10;
+  } else {
+    t10 = $[34];
+  }
+  let t11;
+  if ($[35] !== t10 || $[36] !== t4) {
+    t11 = {
+      ...t4,
+      ...t10
+    };
+    $[35] = t10;
+    $[36] = t4;
+    $[37] = t11;
+  } else {
+    t11 = $[37];
+  }
+  let t12;
+  if ($[38] !== T0 || $[39] !== t11 || $[40] !== t5 || $[41] !== t6) {
+    t12 = /*#__PURE__*/_jsx(T0, {
+      className: t5,
+      style: t6,
+      option: t11
+    });
+    $[38] = T0;
+    $[39] = t11;
+    $[40] = t5;
+    $[41] = t6;
+    $[42] = t12;
+  } else {
+    t12 = $[42];
+  }
+  let t13;
+  if ($[43] !== T1 || $[44] !== t12 || $[45] !== t7 || $[46] !== t8 || $[47] !== t9) {
+    t13 = /*#__PURE__*/_jsxs(T1, {
+      className: t7,
+      styles: t8,
+      children: [t9, t12]
+    });
+    $[43] = T1;
+    $[44] = t12;
+    $[45] = t7;
+    $[46] = t8;
+    $[47] = t9;
+    $[48] = t13;
+  } else {
+    t13 = $[48];
+  }
+  return t13;
+};
+export default ReviewLineChart;
+function _temp(seriesConfig) {
+  return echarts.lineSeries({
+    name: seriesConfig.name,
+    data: seriesConfig.data,
+    option: {
+      ...seriesConfig.option,
+      triggerLineEvent: true
+    }
+  });
+}
+function _temp2(t0, _0, _1, _2, t1) {
+  const [x, y] = t0;
+  const {
+    viewSize: t2,
+    contentSize: t3
+  } = t1;
+  const [vw, vh] = t2;
+  const [, ch] = t3;
+  return {
+    left: x + vw / 100,
+    top: Math.min(y + vw / 100, vh - ch)
+  };
+}

package/dist/pages/DayAheadReviewPage/components/ReviewSummaryTable/ReviewSummaryTable.module.css

@@ -0,0 +1,33 @@
+/* Block: review-summary-table */
+.review-summary-table {
+  display: flex;
+  flex-direction: column;
+  border: 0px;
+  width: 100%;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-title {
+  font-size: 1.25rem;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.header-actions_export-button {
+  border-radius: 8px;
+}
+
+.table-container {
+  min-height: 0;
+  flex: 1;
+  border-radius: 6px;
+}

package/dist/pages/DayAheadReviewPage/components/ReviewSummaryTable/index.d.ts

@@ -0,0 +1,17 @@
+import type { ColumnType } from "antd/es/table";
+import { type ReactNode } from "react";
+export type FilterOption = "all" | "agent" | "manual";
+export interface ReviewSummaryTableProps<T extends Record<string, any> & {
+    index: number;
+}> {
+    data: Omit<T, "index">[];
+    columns: ColumnType<T>[];
+    tradingDay?: string;
+    onExport: (data: Omit<T, "index">[], date: string, filename: string) => void;
+    additionalActions?: ReactNode;
+    dataType?: 24 | 96;
+}
+declare const ReviewSummaryTable: <T extends Record<string, any> & {
+    index: number;
+}>({ data, columns, tradingDay, onExport, additionalActions, dataType, }: ReviewSummaryTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default ReviewSummaryTable;

package/dist/pages/DayAheadReviewPage/components/ReviewSummaryTable/index.js

@@ -0,0 +1,187 @@
+import { c as _c } from "react/compiler-runtime";
+import { Button, Card } from "antd";
+import dayjs from "dayjs";
+import { useMemo } from "react";
+import { HighlightSyncedTable, TsingrocTable } from "#src";
+import styles from "./ReviewSummaryTable.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const generateEmptyData = dataType => {
+  const intervalMinutes = dataType === 24 ? 60 : 15;
+  const rowCount = dataType;
+  return Array.from({
+    length: rowCount
+  }, (_, i) => {
+    const time = dayjs().startOf("day").add(i * intervalMinutes, "minute").format("YYYY-MM-DDTHH:mm");
+    const emptyRow = {
+      time
+    };
+    const numericFields = ["dayAheadPrice", "realTimePrice", "agentDeclaredPrice", "manualDeclaredPrice", "forecastVolume", "actualVolume", "agentDeclaredVolume", "manualDeclaredVolume", "agentClearanceVolume", "manualClearanceVolume", "clearanceVolume", "agentProfit", "manualProfit", "quotation", "tenDayPriceAgent", "tenDayAvgSpotPrice", "tenDayPriceManual", "monthHoldVolume", "tenDayClearanceVolume", "tenDayClearancePrice", "spotAvgPrice"];
+    numericFields.forEach(field => {
+      emptyRow[field] = null;
+    });
+    return emptyRow;
+  });
+};
+const ReviewSummaryTable = t0 => {
+  const $ = _c(25);
+  const {
+    data,
+    columns,
+    tradingDay,
+    onExport,
+    additionalActions,
+    dataType: t1
+  } = t0;
+  const dataType = t1 === undefined ? 24 : t1;
+  const hasData = data.length > 0;
+  let t2;
+  if ($[0] !== data || $[1] !== dataType || $[2] !== hasData) {
+    t2 = hasData ? data : generateEmptyData(dataType);
+    $[0] = data;
+    $[1] = dataType;
+    $[2] = hasData;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const effectiveData = t2;
+  let t3;
+  if ($[4] !== effectiveData) {
+    t3 = effectiveData.map(_temp);
+    $[4] = effectiveData;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const indexedData = t3;
+  let t4;
+  if ($[6] !== data || $[7] !== onExport || $[8] !== tradingDay) {
+    t4 = () => {
+      const date = tradingDay || dayjs().format("YYYY-MM-DD");
+      const filename = `day-ahead-review-${date}.csv`;
+      onExport(data, date, filename);
+    };
+    $[6] = data;
+    $[7] = onExport;
+    $[8] = tradingDay;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  const handleExport = t4;
+  let t5;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = {
+      body: {
+        display: "flex",
+        flexDirection: "column",
+        padding: 0,
+        gap: 12,
+        flex: 1,
+        minHeight: 0
+      }
+    };
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = /*#__PURE__*/_jsx("div", {
+      className: styles["header-title"],
+      children: "\u6570\u636E\u660E\u7EC6"
+    });
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  let t7;
+  if ($[12] !== handleExport) {
+    t7 = /*#__PURE__*/_jsx(Button, {
+      type: "primary",
+      className: styles["header-actions_export-button"],
+      onClick: handleExport,
+      children: "\u5BFC\u51FA\u6570\u636E"
+    });
+    $[12] = handleExport;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  let t8;
+  if ($[14] !== additionalActions || $[15] !== t7) {
+    t8 = /*#__PURE__*/_jsxs("div", {
+      className: styles.header,
+      children: [t6, /*#__PURE__*/_jsxs("div", {
+        className: styles["header-actions"],
+        children: [additionalActions, t7]
+      })]
+    });
+    $[14] = additionalActions;
+    $[15] = t7;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  let t9;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = {
+      flex: 1,
+      minHeight: 0,
+      display: "flex"
+    };
+    $[17] = t9;
+  } else {
+    t9 = $[17];
+  }
+  let t10;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = {
+      x: true
+    };
+    $[18] = t10;
+  } else {
+    t10 = $[18];
+  }
+  let t11;
+  if ($[19] !== columns || $[20] !== indexedData) {
+    t11 = /*#__PURE__*/_jsx("div", {
+      style: t9,
+      children: /*#__PURE__*/_jsx(HighlightSyncedTable, {
+        dataSource: indexedData,
+        columns: columns,
+        rowKey: "index",
+        scroll: t10,
+        pagination: false,
+        size: "small",
+        className: TsingrocTable.style + " " + styles["table-container"]
+      })
+    });
+    $[19] = columns;
+    $[20] = indexedData;
+    $[21] = t11;
+  } else {
+    t11 = $[21];
+  }
+  let t12;
+  if ($[22] !== t11 || $[23] !== t8) {
+    t12 = /*#__PURE__*/_jsxs(Card, {
+      className: styles["review-summary-table"],
+      styles: t5,
+      children: [t8, t11]
+    });
+    $[22] = t11;
+    $[23] = t8;
+    $[24] = t12;
+  } else {
+    t12 = $[24];
+  }
+  return t12;
+};
+export default ReviewSummaryTable;
+function _temp(it, index) {
+  return {
+    ...it,
+    index
+  };
+}

package/dist/pages/DayAheadReviewPage/components/StrategyPlot/index.d.ts

@@ -0,0 +1,10 @@
+import type { StrategyPlotValue } from "../../types/dayahead";
+import type { FilterOption } from "../ReviewSummaryTable";
+type StrategyPlotProps = {
+    data: StrategyPlotValue[];
+    hasManualData: boolean;
+    filterValue?: FilterOption;
+};
+declare const StrategyPlot: ({ data, hasManualData, filterValue }: StrategyPlotProps) => import("react/jsx-runtime").JSX.Element;
+export default StrategyPlot;
+export type { StrategyPlotValue };