@tsingroc/tsingroc-components 5.0.2 → 5.1.0

package/dist/components/TsingrocTable/TsingrocTable.module.css

@@ -0,0 +1,32 @@
+@layer tsingroc-components {
+  .root {
+    table {
+      border-collapse: separate;
+      border-spacing: 8px 4px;
+      /* 消除外部多余的空白 */
+      margin: -4px -8px;
+      width: calc(100% + 16px);
+    }
+
+    /* 对于可滚动的表格，若宽度过大会导致不必要的横向滚动 */
+    :global(.ant-table-body) table {
+      width: calc(100% + 8px);
+    }
+
+    th {
+      border-radius: 6px;
+      background-color: var(--ant-color-bg-layout);
+      font-weight: normal;
+    }
+
+    :global(.ant-table-cell-row-hover) {
+      background-color: color-mix(in hwb, var(--ant-color-primary), white 92%);
+    }
+
+    td {
+      border: 1px solid var(--ant-color-border);
+      border-radius: 6px;
+      font-variant-numeric: tabular-nums;
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+import { type TableProps } from "antd";
+/**
+ * 清鹏定制表格样式，出自 TMS 系统。
+ *
+ * 调用接口与 [Ant Design 的 Table](https://ant-design.antgroup.com/components/table-cn) 完全一致。
+ *
+ * 该组件实际上只在 Table 基础上添加了 CSS 样式并修改了默认值。你可以通过 `TsingrocTable.style` 取得该组件的 CSS 类名。
+ */
+declare const _default: (<DataType extends Record<string, any>>({ className, ...props }: TableProps<DataType>) => import("react/jsx-runtime").JSX.Element) & {
+    style: string | undefined;
+};
+export default _default;

package/dist/components/TsingrocTable/index.js

@@ -0,0 +1,23 @@
+import { Table } from "antd";
+import styles from "./TsingrocTable.module.css";
+
+/**
+ * 清鹏定制表格样式，出自 TMS 系统。
+ *
+ * 调用接口与 [Ant Design 的 Table](https://ant-design.antgroup.com/components/table-cn) 完全一致。
+ *
+ * 该组件实际上只在 Table 基础上添加了 CSS 样式并修改了默认值。你可以通过 `TsingrocTable.style` 取得该组件的 CSS 类名。
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default Object.assign(function TsingrocTable({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Table, {
+    size: "small",
+    className: styles.root + " " + (className ?? ""),
+    ...props
+  });
+}, {
+  style: styles.root
+});

package/dist/components/TsingrocTheme/index.js

@@ -33,9 +33,9 @@ function TsingrocTheme(props) {
       colorInfo: "#9b5efd",
       colorSuccess: "#1ac489"
     } : {
-      colorPrimary: "#5200d7",
-      colorInfo: "#5200d7",
-      colorSuccess: "#1ac489"
+      colorPrimary: "#85008C",
+      colorBgLayout: "#F2F0F7",
+      borderRadius: 8
     };
     $[3] = props.dark;
     $[4] = t0;

package/dist/index.d.ts

@@ -12,6 +12,8 @@ export { default as CircularProgress, type CircularProgressProps, } from "./comp
 export { default as ConnectedECharts, EChartsConnector, withConnector, } from "./components/ConnectedECharts";
 export { default as ECharts, type EChartsProps, type EChartsRef, type EChartsComponentType, type EChartsHOCType, } from "./components/ECharts";
 export { default as Header, type HeaderProps } from "./components/Header";
+export { default as HighlightSyncedECharts, HighlightProvider, useHighlight, HighlightConsumer, withHighlightSync, type Highlight, } from "./components/HighlightSyncedECharts";
+export { default as HighlightSyncedTable } from "./components/HighlightSyncedTable";
 export { default as ImageBackground, type ImageBackgroundProps, } from "./components/ImageBackground";
 export { default as IndicatorLight, type IndicatorLightProps, } from "./components/IndicatorLight";
 export { default as LeftAlignedECharts, EChartsLeftAligner, withLeftAlign, } from "./components/LeftAlignedECharts";
@@ -19,9 +21,11 @@ export { default as LineChartEditor, type LineChartEditorProps, } from "./compon
 export { default as LineChartTable, type LineChartTableProps, } from "./components/LineChartTable";
 export { default as LinkedLineChart, LineChartLinkProvider, type LinkedLineChartProps, type LineChartLinkProviderProps, } from "./components/LinkedLineChart";
 export { default as QuickDateRangePicker, type QuickDateRangePickerProps, } from "./components/QuickDateRangePicker";
+export { default as ScrollableTable } from "./components/ScrollableTable";
 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 TsingrocTable } from "./components/TsingrocTable";
 export { default as TsingrocTheme, type TsingrocThemeProps, } from "./components/TsingrocTheme";
 export { default as UserButton, type UserButtonProps, } from "./components/UserButton";

package/dist/index.js

@@ -11,6 +11,8 @@ export { default as CircularProgress } from "./components/CircularProgress";
 export { default as ConnectedECharts, EChartsConnector, withConnector } from "./components/ConnectedECharts";
 export { default as ECharts } from "./components/ECharts";
 export { default as Header } from "./components/Header";
+export { default as HighlightSyncedECharts, HighlightProvider, useHighlight, HighlightConsumer, withHighlightSync } from "./components/HighlightSyncedECharts";
+export { default as HighlightSyncedTable } from "./components/HighlightSyncedTable";
 export { default as ImageBackground } from "./components/ImageBackground";
 export { default as IndicatorLight } from "./components/IndicatorLight";
 export { default as LeftAlignedECharts, EChartsLeftAligner, withLeftAlign } from "./components/LeftAlignedECharts";
@@ -18,9 +20,11 @@ export { default as LineChartEditor } from "./components/LineChartEditor";
 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 ScrollableTable } from "./components/ScrollableTable";
 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 TsingrocTable } from "./components/TsingrocTable";
 export { default as TsingrocTheme } from "./components/TsingrocTheme";
 export { default as UserButton } from "./components/UserButton";

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

@@ -0,0 +1,7 @@
+import type { PricePlotValue } from "../../types/dayahead";
+type PricePlotProps = {
+    data: PricePlotValue[];
+};
+declare const PricePlot: ({ data }: PricePlotProps) => import("react/jsx-runtime").JSX.Element;
+export default PricePlot;
+export type { PricePlotValue };

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

@@ -0,0 +1,136 @@
+import { c as _c } from "react/compiler-runtime";
+import { COLOR_PRICE_DAY_AHEAD, COLOR_PRICE_REALTIME } from "#src/utils/constants";
+import ReviewLineChart from "../ReviewLineChart";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TIME_INTERVAL_MIN = 15;
+const PricePlot = t0 => {
+  const $ = _c(19);
+  const {
+    data
+  } = t0;
+  let t1;
+  if ($[0] !== data) {
+    t1 = data.map(_temp);
+    $[0] = data;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== data) {
+    t2 = data.map(_temp2);
+    $[2] = data;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      color: COLOR_PRICE_DAY_AHEAD,
+      smooth: false,
+      tooltip: {
+        valueFormatter: _temp3
+      }
+    };
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== t2) {
+    t4 = {
+      name: "\u65E5\u524D\u4EF7\u683C",
+      data: t2,
+      option: t3
+    };
+    $[5] = t2;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== data) {
+    t5 = data.map(_temp4);
+    $[7] = data;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      color: COLOR_PRICE_REALTIME,
+      smooth: false,
+      tooltip: {
+        valueFormatter: _temp5
+      }
+    };
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== t5) {
+    t7 = {
+      name: "\u5B9E\u65F6\u4EF7\u683C",
+      data: t5,
+      option: t6
+    };
+    $[10] = t5;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  let t8;
+  if ($[12] !== t4 || $[13] !== t7) {
+    t8 = [t4, t7];
+    $[12] = t4;
+    $[13] = t7;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  let t9;
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = ["\u65E5\u524D\u4EF7\u683C", "\u5B9E\u65F6\u4EF7\u683C"];
+    $[15] = t9;
+  } else {
+    t9 = $[15];
+  }
+  let t10;
+  if ($[16] !== t1 || $[17] !== t8) {
+    t10 = /*#__PURE__*/_jsx(ReviewLineChart, {
+      title: "\u4EF7\u683C\u5BF9\u6BD4\u56FE",
+      xAxisData: t1,
+      timeIntervalMinutes: TIME_INTERVAL_MIN,
+      useUtc: false,
+      yAxisName: "\u4EF7\u683C\uFF08\u5143\uFF09",
+      series: t8,
+      legendData: t9,
+      showTitle: true
+    });
+    $[16] = t1;
+    $[17] = t8;
+    $[18] = t10;
+  } else {
+    t10 = $[18];
+  }
+  return t10;
+};
+export default PricePlot;
+function _temp(v) {
+  return v.time;
+}
+function _temp2(v_0) {
+  return v_0.dayAheadPrice;
+}
+function _temp3(v_1) {
+  return v_1 != null ? `¥${Number(v_1).toFixed(3)}` : "-";
+}
+function _temp4(v_2) {
+  return v_2.realTimePrice;
+}
+function _temp5(v_3) {
+  return v_3 != null ? `¥${Number(v_3).toFixed(3)}` : "-";
+}

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

@@ -0,0 +1,13 @@
+.profit-bar-chart {
+  min-height: 0;
+  height: 100%;
+  width: 100%;
+  border: 0px;
+  /* border-bottom: 1px solid var(--ant-color-border); */
+  border-radius: 0px;
+}
+
+.profit-bar-chart__chart-container {
+  height: 100%;
+  width: 100%;
+}

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

@@ -0,0 +1,17 @@
+import type { FilterOption, ProfitPlotValue as DayAheadProfitPlotValue } from "../../types/dayahead";
+type ProfitPlotValue = DayAheadProfitPlotValue;
+type ProfitPlotProps = {
+    agent_data: ProfitPlotValue[];
+    manual_data: ProfitPlotValue[];
+    hasManualData: boolean;
+    useUtc?: boolean;
+    filterValue?: FilterOption;
+    gridOption?: {
+        left?: string | number;
+        right?: string | number;
+        top?: string | number;
+        bottom?: string | number;
+    };
+};
+declare const ProfitBarChart: ({ agent_data, manual_data, hasManualData, useUtc, filterValue, gridOption, }: ProfitPlotProps) => import("react/jsx-runtime").JSX.Element;
+export default ProfitBarChart;

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

@@ -0,0 +1,278 @@
+import { c as _c } from "react/compiler-runtime";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import { useMemo } from "react";
+import BarLineChart from "#src/components/BarLineChart";
+import BaseBarChart from "#src/components/BaseBarChart";
+import { COLOR_PROFIT_MANUAL, COLOR_PROFIT_TSINGROC } from "#src/utils/constants";
+import { jsx as _jsx } from "react/jsx-runtime";
+dayjs.extend(utc);
+const ProfitBarChart = t0 => {
+  const $ = _c(41);
+  const {
+    agent_data,
+    manual_data,
+    hasManualData,
+    useUtc: t1,
+    filterValue: t2,
+    gridOption
+  } = t0;
+  const useUtc = t1 === undefined ? true : t1;
+  const filterValue = t2 === undefined ? "all" : t2;
+  const hasData = agent_data.length > 0 || manual_data.length > 0;
+  let agent_profitData;
+  let effectiveFilter;
+  let formattedTimeData;
+  let showAgent;
+  let showManual;
+  let t3;
+  let t4;
+  if ($[0] !== agent_data || $[1] !== filterValue || $[2] !== gridOption || $[3] !== hasData || $[4] !== hasManualData || $[5] !== manual_data || $[6] !== useUtc) {
+    t4 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const timeData = hasData ? agent_data.length >= manual_data.length ? agent_data.map(_temp) : manual_data.map(_temp2) : Array.from({
+        length: 24
+      }, (_, i) => useUtc ? dayjs.utc().startOf("day").add(i, "hour").toISOString() : dayjs().startOf("day").add(i, "hour").format("YYYY-MM-DDTHH:mm:ss+08:00"));
+      let t5;
+      if ($[14] !== useUtc) {
+        t5 = timeStr => {
+          const parsed = useUtc ? dayjs.utc(timeStr) : dayjs(timeStr);
+          return parsed.format("HH:mm");
+        };
+        $[14] = useUtc;
+        $[15] = t5;
+      } else {
+        t5 = $[15];
+      }
+      formattedTimeData = timeData.map(t5).concat("24:00");
+      const isDayAhead = agent_data.some(_temp3);
+      let t6;
+      bb1: {
+        if (filterValue === "manual" && !hasManualData) {
+          t6 = "agent";
+          break bb1;
+        }
+        t6 = filterValue;
+      }
+      effectiveFilter = t6;
+      showAgent = effectiveFilter === "all" || effectiveFilter === "agent";
+      showManual = hasManualData && (effectiveFilter === "all" || effectiveFilter === "manual");
+      if (isDayAhead && showAgent) {
+        let t7;
+        if ($[16] !== agent_data) {
+          t7 = (_timeStr, index) => {
+            const dataPoint = agent_data[index];
+            return dataPoint?.agentStrategyAdd ?? 0;
+          };
+          $[16] = agent_data;
+          $[17] = t7;
+        } else {
+          t7 = $[17];
+        }
+        const strategyAddData = timeData.map(t7);
+        let t8;
+        if ($[18] !== agent_data) {
+          t8 = (_timeStr_0, index_0) => {
+            const dataPoint_0 = agent_data[index_0];
+            return dataPoint_0?.agentPredictBaseline ?? 0;
+          };
+          $[18] = agent_data;
+          $[19] = t8;
+        } else {
+          t8 = $[19];
+        }
+        const predictBaselineData = timeData.map(t8);
+        let t9;
+        if ($[20] !== manual_data) {
+          t9 = (_timeStr_1, index_1) => {
+            const dataPoint_1 = manual_data[index_1];
+            return dataPoint_1?.manualProfit ?? 0;
+          };
+          $[20] = manual_data;
+          $[21] = t9;
+        } else {
+          t9 = $[21];
+        }
+        const manual_profitData = timeData.map(t9);
+        const barSeries = [{
+          name: "\u7B56\u7565\u589E\u76CA",
+          data: strategyAddData,
+          option: {
+            color: COLOR_PROFIT_TSINGROC,
+            tooltip: {
+              valueFormatter: _temp4
+            }
+          }
+        }, ...(showManual ? [{
+          name: "\u4EBA\u5DE5\u6536\u76CA",
+          data: manual_profitData,
+          option: {
+            color: COLOR_PROFIT_MANUAL,
+            tooltip: {
+              valueFormatter: _temp5
+            }
+          }
+        }] : [])];
+        const lineSeries = [{
+          name: "\u9884\u6D4B\u57FA\u7EBF",
+          data: predictBaselineData,
+          option: {
+            color: COLOR_PROFIT_TSINGROC,
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              type: "dashed"
+            },
+            tooltip: {
+              valueFormatter: _temp6
+            }
+          }
+        }];
+        t4 = /*#__PURE__*/_jsx(BarLineChart, {
+          title: "\u6536\u76CA\u5206\u5E03\u56FE",
+          xAxisData: timeData,
+          xAxisFormat: "time",
+          xAxisInterval: 7,
+          useUtc: useUtc,
+          barSeries: barSeries,
+          lineSeries: lineSeries,
+          barYAxisName: "\u6536\u76CA\uFF08\u5143\uFF09",
+          lineYAxisName: "\u6536\u76CA\uFF08\u5143\uFF09",
+          gridOption: gridOption
+        });
+        break bb0;
+      }
+      let t7;
+      if ($[22] !== agent_data) {
+        t7 = (_timeStr_2, index_2) => {
+          const dataPoint_2 = agent_data[index_2];
+          return dataPoint_2?.agentProfit ?? 0;
+        };
+        $[22] = agent_data;
+        $[23] = t7;
+      } else {
+        t7 = $[23];
+      }
+      agent_profitData = timeData.map(t7);
+      let t8;
+      if ($[24] !== manual_data) {
+        t8 = (_timeStr_3, index_3) => {
+          const dataPoint_3 = manual_data[index_3];
+          return dataPoint_3?.manualProfit ?? 0;
+        };
+        $[24] = manual_data;
+        $[25] = t8;
+      } else {
+        t8 = $[25];
+      }
+      t3 = timeData.map(t8);
+    }
+    $[0] = agent_data;
+    $[1] = filterValue;
+    $[2] = gridOption;
+    $[3] = hasData;
+    $[4] = hasManualData;
+    $[5] = manual_data;
+    $[6] = useUtc;
+    $[7] = agent_profitData;
+    $[8] = effectiveFilter;
+    $[9] = formattedTimeData;
+    $[10] = showAgent;
+    $[11] = showManual;
+    $[12] = t3;
+    $[13] = t4;
+  } else {
+    agent_profitData = $[7];
+    effectiveFilter = $[8];
+    formattedTimeData = $[9];
+    showAgent = $[10];
+    showManual = $[11];
+    t3 = $[12];
+    t4 = $[13];
+  }
+  if (t4 !== Symbol.for("react.early_return_sentinel")) {
+    return t4;
+  }
+  const manual_profitData_0 = t3;
+  let t5;
+  if ($[26] !== agent_profitData || $[27] !== showAgent) {
+    t5 = showAgent ? [{
+      name: "\u667A\u80FD\u4F53\u6536\u76CA",
+      data: agent_profitData,
+      color: COLOR_PROFIT_TSINGROC
+    }] : [];
+    $[26] = agent_profitData;
+    $[27] = showAgent;
+    $[28] = t5;
+  } else {
+    t5 = $[28];
+  }
+  let t6;
+  if ($[29] !== manual_profitData_0 || $[30] !== showManual) {
+    t6 = showManual ? [{
+      name: "\u4EBA\u5DE5\u6536\u76CA",
+      data: manual_profitData_0,
+      color: COLOR_PROFIT_MANUAL
+    }] : [];
+    $[29] = manual_profitData_0;
+    $[30] = showManual;
+    $[31] = t6;
+  } else {
+    t6 = $[31];
+  }
+  let t7;
+  if ($[32] !== t5 || $[33] !== t6) {
+    t7 = [...t5, ...t6];
+    $[32] = t5;
+    $[33] = t6;
+    $[34] = t7;
+  } else {
+    t7 = $[34];
+  }
+  const series = t7;
+  const chartKey = `${effectiveFilter}-${series.length}`;
+  let t8;
+  if ($[35] !== chartKey || $[36] !== formattedTimeData || $[37] !== gridOption || $[38] !== hasData || $[39] !== series) {
+    t8 = /*#__PURE__*/_jsx(BaseBarChart, {
+      title: "\u6536\u76CA\u5206\u5E03\u56FE",
+      categories: formattedTimeData,
+      series: series,
+      yAxisName: "\u6536\u76CA\uFF08\u5143\uFF09",
+      tooltipValueFormatter: _temp7,
+      showLegend: true,
+      showSplitLine: hasData,
+      gridOption: gridOption
+    }, chartKey);
+    $[35] = chartKey;
+    $[36] = formattedTimeData;
+    $[37] = gridOption;
+    $[38] = hasData;
+    $[39] = series;
+    $[40] = t8;
+  } else {
+    t8 = $[40];
+  }
+  return t8;
+};
+export default ProfitBarChart;
+function _temp(v) {
+  return v.time;
+}
+function _temp2(v_0) {
+  return v_0.time;
+}
+function _temp3(d) {
+  return "agentStrategyAdd" in d && d.agentStrategyAdd !== undefined;
+}
+function _temp4(v_1) {
+  return `¥${Number(v_1).toFixed(2)}`;
+}
+function _temp5(v_2) {
+  return `¥${Number(v_2).toFixed(2)}`;
+}
+function _temp6(v_3) {
+  return `¥${Number(v_3).toFixed(2)}`;
+}
+function _temp7(v_4) {
+  return `¥${v_4.toFixed(2)}`;
+}

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

@@ -0,0 +1,40 @@
+/* Block: revenue-summary-card */
+.revenue-summary-container {
+  border: 0px;
+}
+
+.revenue-summary-container__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.revenue-summary-container__title {
+  font-size: 1.25rem;
+}
+
+.revenue-summary-container__cards-container {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  width: 100%;
+}
+
+.revenue-summary-container__card {
+  flex: 1;
+}
+
+.revenue-summary-container__card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 20px;
+  background-color: white;
+}
+
+/* Hide icon on smaller screens */
+@media (max-width: 700px) {
+  .revenue-summary-container__card :global(.ant-card-meta-avatar) {
+    display: none;
+  }
+}

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

@@ -0,0 +1,9 @@
+export type RevenueCardProps = {
+    title: string;
+    num: number;
+    bgColour: string;
+    fontColor: string;
+    circleSize?: number;
+    secondaryText?: string;
+};
+export declare function RevenueCard({ title, num, bgColour, fontColor, circleSize, secondaryText, }: RevenueCardProps): import("react/jsx-runtime").JSX.Element;