fix: update history info

package.json

@@ -137,7 +137,7 @@
     "registry": "https://g.civnet.cn:4873"
   },
   "dependencies": {
-    "@wisdom-components/basictable": "^1.2.0",
+    "@wisdom-components/basictable": "^1.4.5",
     "@wisdom-components/empty": "^1.3.9",
     "@wisdom-components/timerangepicker": "^1.3.4",
     "classnames": "^2.2.6",

packages/HistoryInfo/src/HistoryInfo.md

@@ -28,12 +28,12 @@ group:
 
 api 参考 Antd Table 组件 https://ant.design/components/table-cn/#API
 
-| 参数           | 说明                                           | 类型               | 默认值   |
-| -------------- | ---------------------------------------------- | ------------------ | -------- |
-| title          | 标题                                           | string             | 指标曲线 |
-| defaultChecked | 默认选中自定义时间 key                         | string             | oneHour  |
-| columns        | 表格列的配置描述                               | array              | [ ]      |
-| dataSource     | 表格数据源                                     | array              | [ ]      |
-| tableProps     | 表格其他 props                                 | object             | { }      |
-| chartOptions   | 曲线的 options                                 | object             | { }      |
-| onChange       | 选择时间设置或曲线设置的回调，会返回修改后的值 | function(value){ } | -        |
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| title | 标题 | string | 指标曲线 | - |
+| defaultChecked | 默认选中自定义时间 key | string | oneHour | oneHour/fourHour/twelveHours/roundClock/yesterday |
+| columns | 表格列的配置描述 | array | [ ] | - |
+| dataSource | 表格数据源 | array | [ ] | - |
+| tableProps | 表格其他 props | object | { } | - |
+| chartOptions | 曲线的 options | object | { } | - |
+| onChange | 选择时间设置或曲线设置的回调，会返回修改后的值 | function(value){ } | - | - |

packages/HistoryInfo/src/demos/Basic.tsx

@@ -43,7 +43,7 @@ const Demo = () => {
         });
       });
       setData(tableData);
-      setColumns([...columns, ...columnsData]);
+      setColumns(columnsData);
       handleSeries(resData);
     });
   };
@@ -92,13 +92,13 @@ const Demo = () => {
   };
 
   return (
-    <div style={{ height: '1200px' }}>
+    <div style={{ height: '800px' }}>
       <HistoryInfo
         title={'指标曲线'}
         columns={columns}
         dataSource={data}
         chartOptions={{ series }}
-        tableProps={{ bordered: true }}
+        tableProps={{ bordered: true, pagination: { pageSize: 20 } }}
         onChange={onChangeParams}
         // defaultChecked={'fourHour'}
       />

packages/HistoryInfo/src/index.js

@@ -99,12 +99,16 @@ const unique = (arr) => {
   return arr;
 };
 
+let chartWidth = 0; // chart width
+let chartHeight = 0; // chart height
+
 const HistoryInfo = (props) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('history-info');
 
   const { title, columns, dataSource, tableProps, chartOptions, onChange } = props;
 
+  const [activeTabKey, setActiveTabKey] = useState('curve');
   const [timeValue, setTimeValue] = useState('customer');
   const [contrastOption, setContrastOption] = useState('day');
   const [customerChecked, setCustomerChecked] = useState(props.defaultChecked || 'oneHour');
@@ -112,6 +116,7 @@ const HistoryInfo = (props) => {
   const [datePickerArr, setDatePickerArr] = useState(DataPickerArr);
   const [checkboxData, setCheckboxData] = useState(CheckboxData);
   const [dataThinKey, setDataThinKey] = useState(timeIntervalList[0].key);
+  const [options, setOptions] = useState({});
 
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -125,6 +130,10 @@ const HistoryInfo = (props) => {
     dispatch({ type: UPDATE_TIME.UPDATE_TIME, payload: props.defaultChecked });
   }, [props.defaultChecked]);
 
+  useEffect(() => {
+    setOptions({ ...handleChartOptions() });
+  }, [chartOptions]);
+
   // 时间设置切换（自定义/同期对比）
   const onTimeSetChange = (e) => {
     setTimeValue(e.target.value);
@@ -200,6 +209,9 @@ const HistoryInfo = (props) => {
         if (key === 'ignoreOutliers') {
           dispatch({ type: item.type, payload: e.target.checked });
         }
+        if (key === 'curveCenter') {
+          setOptions({ ...handleChartOptions() });
+        }
       }
     });
     setCheckboxData(data);
@@ -250,11 +262,7 @@ const HistoryInfo = (props) => {
           )}
           {timeValue === 'contrast' && ( // 同期对比
             <>
-              <Select
-                defaultValue={contrastOption}
-                style={{ width: 60 }}
-                onChange={onContrastChange}
-              >
+              <Select value={contrastOption} style={{ width: 60 }} onChange={onContrastChange}>
                 <Option value="day">日</Option>
                 <Option value="month">月</Option>
               </Select>
@@ -396,11 +404,34 @@ const HistoryInfo = (props) => {
       };
     }
 
+    options.tooltip.formatter = function formatter() {
+      let _html = `<b>${Highcharts.dateFormat(
+        contrastOption === 'day' ? '%H:%M' : '%d %H:%M',
+        this.x,
+      )}</b><br/>`;
+      this.points.forEach((item) => {
+        _html += `<span style={{color: ${item.series.color}}}>${item.series.name}</span>:
+                <b>${
+                  item.point.y.toFixed(
+                    item.series.userOptions.decimalPoint ? item.series.userOptions.decimalPoint : 2,
+                  ) * 1
+                }${item.series.userOptions.tooltip.valueSuffix}</b>
+                <br/>`;
+      });
+      return _html;
+    };
+
     if (container.current) {
+      if (container.current.offsetWidth !== 0) {
+        chartWidth = container.current.offsetWidth;
+        chartHeight = container.current.offsetHeight;
+      }
       Highcharts.setOptions({
+        // 处理 chart 高度坍塌
         chart: {
-          width: container.current.offsetWidth,
-          height: container.current.offsetHeight - 10,
+          width: container.current.offsetWidth === 0 ? chartWidth : container.current.offsetWidth,
+          height:
+            container.current.offsetHeight === 0 ? chartHeight : container.current.offsetHeight,
         },
       });
     }
@@ -465,11 +496,12 @@ const HistoryInfo = (props) => {
   return (
     <div className={classNames(prefixCls)}>
       <Tabs
-        defaultActiveKey={TabPaneData[0].key}
+        activeKey={activeTabKey}
         centered
         tabBarExtraContent={{
           left: <h3 className="tabs-extra-demo-button">{title}</h3>,
         }}
+        onChange={(key) => setActiveTabKey(key)}
       >
         {TabPaneData.map((item) => (
           <TabPane tab={item.tab} key={item.key}>
@@ -477,20 +509,24 @@ const HistoryInfo = (props) => {
               {renderOptions(item)}
               {!dataSource.length && <Empty />}
               {!!dataSource.length && (
-                <div style={{ flex: 1 }} ref={container}>
+                <div className={classNames(`${prefixCls}-wrap`)}>
+                  <div className={classNames(`${prefixCls}-main`)}>
                     {item.key === 'curve' && (
+                      <div className={classNames(`${prefixCls}-chart`)} ref={container}>
                         <HighchartsReact
                           immutable={true}
                           highcharts={Highcharts}
                           constructorType={'stockChart'}
-                      options={handleChartOptions()}
+                          options={options}
                           allowChartUpdate={true}
                         />
+                      </div>
                     )}
                     {item.key === 'table' && (
                       <BasicTable dataSource={dataSource} columns={columns} {...tableProps} />
                     )}
                   </div>
+                </div>
               )}
             </div>
           </TabPane>
@@ -525,7 +561,7 @@ export default HistoryInfo;
 const startFormat = 'YYYY-MM-DD 00:00:00';
 const endFormat = 'YYYY-MM-DD 23:59:59';
 
-const timeFormat = 'YYYY-MM-DD kk:mm:ss';
+const timeFormat = 'YYYY-MM-DD HH:mm:ss';
 
 const colors = [
   '#1884EC',
@@ -580,21 +616,6 @@ const defaultOptions = {
     shared: true,
     split: false,
     valueDecimals: 3,
-    formatter: function () {
-      let _html = `<b>${Highcharts.dateFormat('%Y/%m/%d %H:%M', this.x)}</b><br/>`;
-      this.points.forEach((item) => {
-        _html += `<span style={{color: ${item.series.color}}}>${item.series.name}</span>:
-                  <b>${
-                    item.point.y.toFixed(
-                      item.series.userOptions.decimalPoint
-                        ? item.series.userOptions.decimalPoint
-                        : 2,
-                    ) * 1
-                  }${item.series.userOptions.tooltip.valueSuffix}</b>
-                  <br/>`;
-      });
-      return _html;
-    },
   },
   plotOptions: {
     series: {
@@ -723,10 +744,10 @@ const timeIntervalList = [
 const DataPickerArr = [
   {
     key: 1,
-    value: '',
+    value: moment(),
   },
   {
     key: 2,
-    value: '',
+    value: moment().subtract(1, 'days'),
   },
 ];

packages/HistoryInfo/src/index.less

@@ -16,6 +16,23 @@
     padding: 10px 0 0 0;
   }
 
+  &-wrap {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &-main {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+  }
+
+  &-chart {
+    width: 100%;
+    height: 100%;
+  }
+
   &-time {
     display: flex;
     align-items: center;