@tsingroc/tsingroc-components 5.0.1 → 5.1.0

package/dist/pages/DayAheadReviewPage/index.js

@@ -0,0 +1,259 @@
+import { c as _c } from "react/compiler-runtime";
+import { App, Col, Row } from "antd";
+import { useState } from "react";
+import { HighlightProvider } from "#src";
+import { extractProfitData, hasManualData } from "#src/utils/presenters";
+import { useDayAheadReviewDate } from "./hook/useDayAheadReviewDate";
+import LeftChartContainer from "./layout/LeftChartContainer";
+import ReviewPageLayout from "./layout/ReviewPageLayout";
+import RightSummaryContainer from "./layout/RightSummaryContainer";
+import TopHeader from "./layout/TopDayReviewHeader";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export { useDayAheadReviewDate };
+
+/**
+ * 复盘页面所需的所有数据，包含三部分：
+ *
+ * - `power`: 策略对比图（电量）
+ * - `price`: 价格走势图（价格）
+ * - `table`: 明细表格 + 收益图表（组合数据）
+ *
+ * @example
+ * ```ts
+ * const data: DayAheadReviewPageData = {
+ *   power: [{ time: "2024-01-01T00:00", forecastVolume: 120.5, ... }],
+ *   price: [{ time: "2024-01-01T00:00", dayAheadPrice: 350.5, ... }],
+ *   table: [{ time: "2024-01-01T00:00", forecastVolume: 120.5, dayAheadPrice: 350.5, ... }],
+ * };
+ * ```
+ */
+
+/**
+ * DayAheadReviewPage 组件的属性。
+ *
+ * ## 必需属性
+ *
+ * 组件需要日期管理属性和数据。使用提供的 `useDayAheadReviewDate` 钩子可以简化日期处理。
+ *
+ * ## 可选属性
+ *
+ * - `loading`: 获取数据时显示骨架屏加载器
+ * - `error`: 显示错误消息提示
+ * - `onExport`: 导出按钮的自定义导出处理函数
+ *
+ * @example
+ * ```tsx
+ * function ReviewPage() {
+ *   const { date, setDate, tradingDay, disabledDate } = useDayAheadReviewDate({
+ *     projectId: "power-market",
+ *     serviceStartDay: "2024-01-01",
+ *   });
+ *
+ *   const { data, loading } = useQuery({
+ *     queryKey: ["review", tradingDay],
+ *     queryFn: () => fetchReviewData(tradingDay),
+ *   });
+ *
+ *   return (
+ *     <div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
+ *       <DayAheadReviewPage
+ *         date={date}
+ *         setDate={setDate}
+ *         disabledDate={disabledDate}
+ *         data={data ?? { power: [], price: [], table: [] }}
+ *         loading={loading}
+ *         onExport={(data, date) => exportToCSV(data, `review-${date}.csv`)}
+ *       />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+
+/**
+ * 日前复盘页面组件。
+ *
+ * 提供了一个全面的仪表板，用于分析电力市场日前交易表现。
+ * 以响应式布局展示策略对比、收益分布、价格趋势和详细的间隔数据。
+ *
+ * ## 功能特性
+ *
+ * - **策略对比图表** — 对比 Agent 与人工申报/中标电量
+ * - **价格走势图表** — 可视化日前价格与实时价格
+ * - **收益分布图表** — 分析收益细分及基准对比
+ * - **明细表格** — 查看间隔级别数据并支持导出
+ * - **跨图表高亮** — 所有可视化之间的同步悬停状态
+ */
+export default function DayAheadReviewPage(t0) {
+  const $ = _c(34);
+  const {
+    date,
+    setDate,
+    disabledDate,
+    data,
+    loading: t1,
+    error,
+    onExport
+  } = t0;
+  const loading = t1 === undefined ? false : t1;
+  const app = App.useApp();
+  const [filterValue, setFilterValue] = useState("all");
+  if (error) {
+    const raw = error.message ?? String(error);
+    app.message.info(raw);
+  }
+  let t2;
+  if ($[0] !== data.table) {
+    t2 = hasManualData(data.table);
+    $[0] = data.table;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const hasManualDataFlag = t2;
+  let t3;
+  if ($[2] !== data.table) {
+    t3 = extractProfitData(data.table);
+    $[2] = data.table;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const {
+    agentProfit,
+    manualProfit
+  } = t3;
+  let t4;
+  if ($[4] !== date || $[5] !== disabledDate || $[6] !== setDate) {
+    t4 = /*#__PURE__*/_jsx(TopHeader, {
+      date: date,
+      setDate: setDate,
+      disabledDate: disabledDate
+    });
+    $[4] = date;
+    $[5] = disabledDate;
+    $[6] = setDate;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = {
+      minHeight: 0,
+      flex: 1,
+      height: "100%"
+    };
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      display: "flex",
+      flexDirection: "column",
+      minHeight: 0,
+      height: "100%",
+      gap: 16
+    };
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== agentProfit || $[11] !== data.power || $[12] !== data.price || $[13] !== filterValue || $[14] !== hasManualDataFlag || $[15] !== loading || $[16] !== manualProfit) {
+    t7 = /*#__PURE__*/_jsx(Col, {
+      span: 12,
+      style: t6,
+      children: /*#__PURE__*/_jsx(LeftChartContainer, {
+        powerData: data.power,
+        priceData: data.price,
+        profitAgentData: agentProfit,
+        profitManualData: manualProfit,
+        hasManualData: hasManualDataFlag,
+        filterValue: filterValue,
+        onFilterChange: setFilterValue,
+        loading: loading
+      })
+    });
+    $[10] = agentProfit;
+    $[11] = data.power;
+    $[12] = data.price;
+    $[13] = filterValue;
+    $[14] = hasManualDataFlag;
+    $[15] = loading;
+    $[16] = manualProfit;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  let t8;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      minHeight: 0,
+      gap: 16
+    };
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  let t9;
+  if ($[19] !== agentProfit || $[20] !== data.table || $[21] !== date || $[22] !== filterValue || $[23] !== hasManualDataFlag || $[24] !== loading || $[25] !== manualProfit || $[26] !== onExport) {
+    t9 = /*#__PURE__*/_jsx(Col, {
+      span: 12,
+      style: t8,
+      children: /*#__PURE__*/_jsx(RightSummaryContainer, {
+        data: data.table,
+        date: date,
+        hasManualData: hasManualDataFlag,
+        filterValue: filterValue,
+        loading: loading,
+        profitAgentData: agentProfit,
+        profitManualData: manualProfit,
+        onExport: onExport
+      })
+    });
+    $[19] = agentProfit;
+    $[20] = data.table;
+    $[21] = date;
+    $[22] = filterValue;
+    $[23] = hasManualDataFlag;
+    $[24] = loading;
+    $[25] = manualProfit;
+    $[26] = onExport;
+    $[27] = t9;
+  } else {
+    t9 = $[27];
+  }
+  let t10;
+  if ($[28] !== t7 || $[29] !== t9) {
+    t10 = /*#__PURE__*/_jsx(HighlightProvider, {
+      children: /*#__PURE__*/_jsxs(Row, {
+        gutter: 16,
+        style: t5,
+        children: [t7, t9]
+      })
+    });
+    $[28] = t7;
+    $[29] = t9;
+    $[30] = t10;
+  } else {
+    t10 = $[30];
+  }
+  let t11;
+  if ($[31] !== t10 || $[32] !== t4) {
+    t11 = /*#__PURE__*/_jsxs(ReviewPageLayout, {
+      children: [t4, t10]
+    });
+    $[31] = t10;
+    $[32] = t4;
+    $[33] = t11;
+  } else {
+    t11 = $[33];
+  }
+  return t11;
+}

package/dist/pages/DayAheadReviewPage/layout/LeftChartContainer.d.ts

@@ -0,0 +1,12 @@
+import type { FilterOption, PricePlotValue, ProfitPlotValue, StrategyPlotValue } from "../types/dayahead";
+declare const LeftChartContainer: ({ powerData, priceData, profitAgentData, profitManualData, hasManualData, filterValue, onFilterChange, loading, }: {
+    powerData: StrategyPlotValue[];
+    priceData: PricePlotValue[];
+    profitAgentData: ProfitPlotValue[];
+    profitManualData: ProfitPlotValue[];
+    hasManualData: boolean;
+    filterValue: FilterOption;
+    onFilterChange: (value: FilterOption) => void;
+    loading?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default LeftChartContainer;

package/dist/pages/DayAheadReviewPage/layout/LeftChartContainer.js

@@ -0,0 +1,236 @@
+import { c as _c } from "react/compiler-runtime";
+import { Card, Flex, Radio } from "antd";
+import { memo } from "react";
+import FlexRowLayout from "#src/components/FlexRowLayout";
+import { LoadingSection } from "#src/components/LoadingSection";
+import PricePlot from "../components/PricePlot";
+import ProfitBarChart from "../components/ProfitBarChart";
+import StrategyPlot from "../components/StrategyPlot";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const options = [{
+  label: "全部",
+  value: "all"
+}, {
+  label: "智能体",
+  value: "agent"
+}, {
+  label: "人工",
+  value: "manual"
+}];
+const Header = /*#__PURE__*/memo(function Header(t0) {
+  const $ = _c(7);
+  const {
+    filterValue,
+    onFilterChange
+  } = t0;
+  let t1;
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = /*#__PURE__*/_jsx("div", {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        fontSize: "1.25rem",
+        fontWeight: 500
+      },
+      children: "\u6570\u636E\u56FE\u8868"
+    });
+    t2 = {
+      flexBasis: "50%"
+    };
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t1 = $[0];
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== onFilterChange) {
+    t3 = e => onFilterChange(e.target.value);
+    $[2] = onFilterChange;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== filterValue || $[5] !== t3) {
+    t4 = /*#__PURE__*/_jsxs(FlexRowLayout, {
+      children: [t1, /*#__PURE__*/_jsx("div", {
+        style: t2,
+        children: /*#__PURE__*/_jsx(Flex, {
+          vertical: true,
+          gap: "middle",
+          children: /*#__PURE__*/_jsx(Radio.Group, {
+            block: true,
+            options: options,
+            value: filterValue,
+            onChange: t3,
+            optionType: "button"
+          })
+        })
+      })]
+    });
+    $[4] = filterValue;
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  return t4;
+});
+const LeftChartContainer = t0 => {
+  const $ = _c(18);
+  const {
+    powerData,
+    priceData,
+    profitAgentData,
+    profitManualData,
+    hasManualData,
+    filterValue,
+    onFilterChange,
+    loading: t1
+  } = t0;
+  const loading = t1 === undefined ? false : t1;
+  let t2;
+  let t3;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = {
+      flex: 1,
+      minHeight: 0,
+      display: "flex",
+      flexDirection: "column",
+      gap: 16,
+      border: 0
+    };
+    t3 = {
+      body: {
+        padding: 16,
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+        flex: 1,
+        minHeight: 0
+      }
+    };
+    $[0] = t2;
+    $[1] = t3;
+  } else {
+    t2 = $[0];
+    t3 = $[1];
+  }
+  let t4;
+  if ($[2] !== filterValue || $[3] !== hasManualData || $[4] !== loading || $[5] !== onFilterChange) {
+    t4 = hasManualData && !loading && /*#__PURE__*/_jsx("div", {
+      style: {
+        flexGrow: 0,
+        minHeight: 0,
+        flexBasis: "3%"
+      },
+      children: /*#__PURE__*/_jsx(Header, {
+        filterValue: filterValue,
+        onFilterChange: onFilterChange
+      })
+    });
+    $[2] = filterValue;
+    $[3] = hasManualData;
+    $[4] = loading;
+    $[5] = onFilterChange;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== filterValue || $[8] !== hasManualData || $[9] !== loading || $[10] !== powerData || $[11] !== priceData || $[12] !== profitAgentData || $[13] !== profitManualData) {
+    t5 = loading ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        style: {
+          flex: 1,
+          minHeight: 0
+        },
+        children: /*#__PURE__*/_jsx(LoadingSection, {
+          type: "chart",
+          height: "100%"
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          flex: 1,
+          minHeight: 0
+        },
+        children: /*#__PURE__*/_jsx(LoadingSection, {
+          type: "chart",
+          height: "100%"
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          flex: 1,
+          minHeight: 0
+        },
+        children: /*#__PURE__*/_jsx(LoadingSection, {
+          type: "chart",
+          height: "100%"
+        })
+      })]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        style: {
+          flex: 1,
+          minHeight: 0
+        },
+        children: /*#__PURE__*/_jsx(ProfitBarChart, {
+          agent_data: profitAgentData,
+          manual_data: profitManualData,
+          hasManualData: hasManualData,
+          filterValue: filterValue,
+          useUtc: false,
+          gridOption: {
+            left: 10,
+            top: 25
+          }
+        }, `profit-${filterValue}`)
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          flex: 1,
+          minHeight: 0
+        },
+        children: /*#__PURE__*/_jsx(StrategyPlot, {
+          data: powerData,
+          hasManualData: hasManualData,
+          filterValue: filterValue
+        }, `strategy-${filterValue}`)
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          flex: 1,
+          minHeight: 0
+        },
+        children: /*#__PURE__*/_jsx(PricePlot, {
+          data: priceData
+        })
+      })]
+    });
+    $[7] = filterValue;
+    $[8] = hasManualData;
+    $[9] = loading;
+    $[10] = powerData;
+    $[11] = priceData;
+    $[12] = profitAgentData;
+    $[13] = profitManualData;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  let t6;
+  if ($[15] !== t4 || $[16] !== t5) {
+    t6 = /*#__PURE__*/_jsxs(Card, {
+      style: t2,
+      styles: t3,
+      children: [t4, t5]
+    });
+    $[15] = t4;
+    $[16] = t5;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  return t6;
+};
+export default LeftChartContainer;

package/dist/pages/DayAheadReviewPage/layout/ReviewPageLayout.d.ts

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

package/dist/pages/DayAheadReviewPage/layout/ReviewPageLayout.js

@@ -0,0 +1,32 @@
+import { c as _c } from "react/compiler-runtime";
+import { Layout } from "antd";
+import FlexColLayout from "#src/components/FlexColLayout";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ReviewPageLayout = t0 => {
+  const $ = _c(3);
+  const {
+    children
+  } = t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {};
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] !== children) {
+    t2 = /*#__PURE__*/_jsx(Layout.Content, {
+      style: t1,
+      children: /*#__PURE__*/_jsx(FlexColLayout, {
+        children: children
+      })
+    });
+    $[1] = children;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+};
+export default ReviewPageLayout;

package/dist/pages/DayAheadReviewPage/layout/RightSummaryContainer.d.ts

@@ -0,0 +1,14 @@
+import type { Dayjs } from "dayjs";
+import type { ExtendedReviewValue, FilterOption, ProfitPlotValue } from "../types/dayahead";
+interface RightSummaryContainerProps {
+    data: ExtendedReviewValue[];
+    date: Dayjs;
+    hasManualData: boolean;
+    filterValue: FilterOption;
+    loading?: boolean;
+    profitAgentData?: ProfitPlotValue[];
+    profitManualData?: ProfitPlotValue[];
+    onExport?: (data: ExtendedReviewValue[], date: string, filename: string) => void;
+}
+declare const RightSummaryContainer: ({ data, date, hasManualData, filterValue, loading, profitAgentData, profitManualData, onExport, }: RightSummaryContainerProps) => import("react/jsx-runtime").JSX.Element;
+export default RightSummaryContainer;